Сегодня мы расскажем о верстке — этапе разработки сайта, который часто недооценивают. А диджитал любит внимательных Заказчиков, которые не упускают важного!
Почему верстка так важна
Так уж получается, что малознакомый с сайтостроением Заказчик оценивает сайт чисто визуально, по сочетанию изображений и текста. Верстка кажется чем-то малозначительным, некоей чисто технической обработкой. Это ошибочный подход.
На самом же деле, верстальщик — серый кардинал сайтостроения, от качества его работы зависит эффективность всего сайта. Некачественная верстка подрывает доверие потенциальных клиентов и поисковых систем и заставляет интернет-пользователей терять терпение из-за долгой загрузки контента.
Мы нередко сталкиваемся с ситуацией, когда к нам обращаются за SEO-продвижением владельцы сайтов с ужасающей версткой — тяжелым невалидным кодом. Отчасти такая ситуация порождена безответственностью и непрофессионализмом некоторых подрядчиков, отчасти — беспечностью Заказчиков, бездумно отдавших на дешевый аутсорсинг один из главных этапов разработки сайта.
Заказчику важно помнить о существовании верстки и понимать ее трудозатратность. Иногда уже на завершающей стадии разработки сайта Заказчик просит внести изменения во внешний вид каких-либо страниц. Малознакомому с интернет-технологиями человеку кажется, что этим ребятам из агентства ничего не стоит поменять пару картинок. На деле же эти правки иногда подразумевают не только разрушение замысла дизайнера, но и переписывание целых страниц кода.
Поэтому, в нашем агентстве верстка всегда была на особом контроле.
Какие инструменты мы применяем в верстке
Верстая сайты, мы используем язык гиперразметки HTML5 и каскадные таблицы стилей СSS3.
HTML задает структуру веб-контента. Это целый язык, состоящий из тегов — элементов разметки. Например, фраза, расположенная внутри тега <h1> выводится браузером как самый значимый заголовок.
При желании вы можете кликнуть по нашему сайту правой кнопки мыши и нажать ссылку «Показать исходный код». Вы увидите сотни и тысячи тегов и ссылок, организованных по принципу древовидной иерархии. Вот с таким кодом ежедневно работают наши верстальщики:
Фрагмент html-кода.
CSS определяет визуальное оформление содержания веб-страницы. Он задает не только шрифты, цвета, стили, но и форму отдельных веб-элементов. Например, с его помощью можно сделать кнопку с краями, закругленными под определенный радиус, а также заставить ее изменять цвет при нажатии.
С помощью каскадных таблиц стилей (CSS) верстальщик реализует замысел дизайнера. Многое из того, что кажется интернет-пользователю картинками, на самом деле прописано в коде.
В принципе, многие элементы можно оформить и с помощью html. Но мы этого стараемся не делать, потому что это давно стало дурным тоном в веб-разработке. Правильнее выносить оформление стилей в отдельные файлы CSS.
Какие требования мы предъявляем к верстке
1) Сайт должен достойно отображаться на экранах самого разного размера. Ваш потенциальный клиент может просматривать сайт как с огромного домашнего монитора, так и компактного дисплея смартфона. В обоих случаях он может совершить покупку и принести вам прибыль. Или не принести, если ваш сайт разъезжается в разные стороны, мельчит буквы, совершенно не вызывая доверия.
Наверняка вы сталкивались с такой ситуацией, когда заходите на сайт, а там все мелко, неразборчиво, как в старинном псалтыре. Глаза напрягаются, а для того, чтобы дочитать текст до конца, приходится использовать горизонтальную прокрутку. Это значит, что верстальщик не занимался адаптацией верстки сайта под мобильные устройства.
Мы уделяем мобильной адаптации первичное внимание.
Во-первых, в 2019 году доля интернет-покупок с мобильных телефонов в России выросла до 60%. То есть, теперь уже речь идет в первую очередь об ориентации на пользователей мобильных устройств.
Поэтому, в нашем портфолио мы всегда показываем, как выглядит сайт при просмотре со смартфона.
Во-вторых, и Яндекс и Google поощряют мобилопригодные сайты. Удобство пользователя — один из ключевых факторов поискового ранжирования. А отличительная особенность веб-разработки в Marketing Up — то, что мы разрабатываем seo-дружественные сайты.
2) Сайт должен достойно выглядеть в популярных браузерах и их различных версиях. Увы, ваши потенциальные покупатели используют не только различные устройства, но и отличное друг от друга программное обеспечение. Отображение сайтов в разных браузерах до сих пор отличается. Договориться между собой их создатели никак не могут. Вот и приходится нашим верстальщикам корпеть над тем, чтобы «угодить» всем браузерам.
Так, мы оптимизируем верстку наших сайтов под:
- Google Chrome;
- Mozilla Firefox;
- Safari;
- Яндекс Браузер;
- Opera.
Согласно данным StatCounter на начало 2020 года, этими браузерами пользуется абсолютное большинство интернет-пользователей России — 94,7%.
Разработанный Microsoft на замену Internet Explorer браузер Edge Legacy мы не ставим во главу угла, но все же проверяем отображение и в нем — для нас важны даже эти 1,5%.
3) Верстка должна быть валидной, без лишних нагромождений кода, с минимумом синтаксических ошибок. На первый взгляд, это кажется не таким уж и важным фактором — покупатели ведь код смотреть не будут. Однако, загроможденный код негативно сказывается на ранжировании сайта в поисковиках.
Во-первых, из-за этого замедляется загрузка веб-страниц, то есть страдает удобство пользователя.
Во-вторых, такая небрежность в веб-разработке сама по себе является тревожным сигналом об отношении организации к ведению дел.
Поэтому, мы проверяем верстку сайта на валидность с помощью специализированных сервисов наподобие валидатора W3C. Это сервис разработан Консорциумом Всемирной Паутины — организацией, создавшей интернет. Логика у нас простая — на кого же еще ровняться, как не на фактических законодателей сети?
4) Верстка должна быть современной. Это требование очень тесно связано с предыдущим. Дело в том, что HTML и CSS c течением времени претерпевают изменения. Мы верстаем сайты на HTML5 и СSS 3 — актуальных версиях этих языков.
Digital эволюционирует быстрее других сфер.
Теги, использование которых когда-то было повсеместным, теперь осуждаются спецификациями html.
Те методы, без которых раньше нельзя было представить себе верстку сайта, признаются безнадежно устаревшими. Например, когда-то сайты верстали табличным методом (table). Однако, на смену таблицам пришел блочный метод (div).
Такие изменения происходят не так уж часто, но регулярно. Мы постоянно отслеживаем такие новшества, с тем, чтобы сайты наших Заказчиков верстались «в ногу со временем».
Адаптивность, кроссбраузерность, валидность, современность — вот наши требования к качественной верстке.
Как проверить качество верстки
Неподготовленному человеку определить качество верстки трудно. Предельно упрощенный способ: зайти на сайт с разных устройств и браузеров, оценить, насколько корректно отображается сайт. Можно воспользоваться для этих целей сервисом browserstack.com.
Также проверьте скорость загрузки на Google PageSpeed Insights. Помните, 64% пользователей ожидают, что загрузка будет продолжаться не более 4 секунд!
Этот инструмент прост в использовании. Достаточно ввести адрес интересующего сайта и он выдает результат в процентах и цветовой маркировке. Красный — плохо, оранжевый — средне, зеленый — прекрасно.
Можно прогнать код через валидаторы, но тут есть нюансы. Дело в том, что верстка процесс творческий — в ней существуют разные подходы, со своими плюсами и минусами. Соответственно, на практике даже в очень качественной верстке могут промелькивать «ошибки». Поэтому, тут лучше разбираться специалистам, иначе вы будете просто ориентироваться на объем кода, высветившегося красным.
Если сайт грузится по 10 секунд и неудобен для использования на каком-либо популярном устройстве, значит верстка заставляет желать лучшего.
Почему качество нашей верстки выше, чем у многих других подрядчиков?
Особенность работы наших верстальщиков в том, что они — это часть команды. Мы ведь агентство комплексного интернет-маркетинга, с отчетностью до продаж. Плохая верстка — медленная загрузка. Медленная загрузка — мало продаж. Мало продаж — Заказчик недоволен и у нас у всех возникают проблемы.
Слабая верстка не даст реализоваться замыслу интернет-маркетолога, задушив креатив дизайнера и копирайтера. Поэтому в нашем агентстве на качество верстки обращают внимание все специалисты, отвечающие за конечный результат — респектабельный, конвертящий заявки сайт.
Все в нашем агентстве связаны своеобразной круговой порукой, в том числе и верстальщики. Вам, как Заказчику, выгодна такая ситуация. Поэтому, если вам нужен сайт с качественной версткой, обращайтесь к нам!
Комментарии