Агентство комплексного интернет-маркетинга

Верстка сайта

Актуальная информация об интернет-маркетинге и создании сайтов от специалистов Marketing Up
Здесь вы найдете подробные кейсы наших проектов, аналитику, результаты свежих исследований, разбор интересных фишек, приемов и тонкостей создания сайтов и т.д. - все, что важно для построения успешного бизнеса в Интернет.

Требования к верстке сайта — наш подход

Автор: Алексей Харитонов08.10.2020

Сегодня мы расскажем о верстке — этапе разработки сайта, который часто недооценивают. А диджитал любит внимательных Заказчиков, которые не упускают важного!


Почему верстка так важна

Так уж получается, что малознакомый с сайтостроением Заказчик оценивает сайт чисто визуально, по сочетанию изображений и текста. Верстка кажется чем-то малозначительным, некоей чисто технической обработкой. Это ошибочный подход.

На самом же деле, верстальщик — серый кардинал сайтостроения, от качества его работы зависит эффективность всего сайта. Некачественная верстка подрывает доверие потенциальных клиентов и поисковых систем и заставляет интернет-пользователей терять терпение из-за долгой загрузки контента.

Мы нередко сталкиваемся с ситуацией, когда к нам обращаются за 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 секунд и неудобен для использования на каком-либо популярном устройстве, значит верстка заставляет желать лучшего. 

Почему качество нашей верстки выше, чем у многих других подрядчиков?

Особенность работы наших верстальщиков в том, что они — это часть команды. Мы ведь агентство комплексного интернет-маркетинга, с отчетностью до продаж. Плохая верстка — медленная загрузка. Медленная загрузка — мало продаж. Мало продаж — Заказчик недоволен и у нас у всех возникают проблемы.

Слабая верстка не даст реализоваться замыслу интернет-маркетолога, задушив креатив дизайнера и копирайтера. Поэтому в нашем агентстве на качество верстки обращают внимание все специалисты, отвечающие за конечный результат — респектабельный, конвертящий заявки сайт.

Все в нашем агентстве связаны своеобразной круговой порукой, в том числе и верстальщики. Вам, как Заказчику, выгодна такая ситуация. Поэтому, если вам нужен сайт с качественной версткой, обращайтесь к нам!

 

 

3020