Распространенная практика оценивать работы по разработке сайта с разбивкой на разработку десктопной и мобильной версий сайта отдельно — это самый настоящий смертный грех и развод сразу по нескольким причинам, о которых я расскажу после краткого экскурса в историю веб-вёрстки.
Так сложилось, что digital-индустрия в России росла собственным независимым путём. В то же время в англоязычной среде, к моменту зарождения веб-дизайна как такового, уже были сильны традиции полиграфического дизайна, в том числе с использованием компьютеров. И с развитием digital-индустрии и появлением в ней денег, полиграфические дизайнеры и верстальщики принялись браться за дизайн и разработку сайтов, используя наработанные годами подходы и паттерны полиграфического дизайна.
Что любопытно, даже сейчас можно встретить англоязычные сайты, которые выглядят как раздаточная рекламная листовка, но в интернете. Из полиграфии в веб перекочевали раз и навсегда жёстко заданная ширина, общее композиционное решение, напоминающее о лучших традициях печатного дела. Хорошо, если «тело» сайта будет отцентровано на экране, а не прибито к левому краю. Такие сайты создавались как в 1998 году, так и в 2008 и, наверняка, продолжают создаваться и поныне…
Продвижение медцентров и клиник: три кейса о SEO, TikTok и Instagram*
Как получить измеримые результаты в фарммаркетинге.
Показываем на примерах →
Спецпроект
При этом в российской традиции разработки сайтов, ввиду большей независимости от полиграфического дизайна, главенствовал другой подход — максимального использования полезного пространства экрана, даже во времена, когда табличная верстка была ещё распространена. Например, в 2003 — 2006 годах многие старались сделать «резиновую» верстку с блоками фиксированной ширины для меню и сайдбаров и контентом, занимающим всю оставшуюся полезную площадь. Это послужило основной предпосылкой, выросшей со временем в существенную разницу в подходе к процессу верстки сайтов: «старая американская модель» — верстается точно по размерам, которые нарисовал дизайнер и «новая русская модель» — растягиваем блоки, подстраиваем дизайн и заполняем всё полезное пространство.
С момента появления мобильных устройств долгое время использовались отдельные мобильные версии сайтов, так как ни скорость интернета, ни возможности этих устройств не позволяли отображать полноценные веб-страницы. Но с появлением iPhone, iPad и ростом использования мобильных браузеров, владельцы веб-сайтов оказались перед необходимостью корректного отображения их сайтов на мобильных устройствах наряду с настольными компьютерами. Однако, далеко не все компании могли позволить себе иметь отдельную «мобильную версию» сайта, так как это сулило значительные дополнительные затраты, а отображение полноценной версии сайта для настольных компьютеров в телефонах оставляло желать лучшего.
Переломным моментом в мировой практике стал выход статьи «Responsive Web Design» в 2010 на ресурсе A List Apart за авторством Ethan Marcotte. С её появлением такой подход получил название Responsive Design и широкое распространение и прочно закрепился в индустрии. Очень важно отметить, как этот инновационный для англоязычной среды подход перекликается с давно принятым у нас «резиновым» подходом к верстке — использование всей полезной площади страницы, отказ от или уменьшение второстепенных блоков при значительном уменьшении ширины экрана.
Вместе с появлением названия также начали появляться лёгкие для освоения инструменты для создания «responsive design», которые, как и любые инструменты, применяемые бездумно, могут привести к нежелательным последствиям. Такого не случается, когда работает квалифицированный верстальщик — он на автопилоте учитывает семантическую структуру и закладывает в исходную структуру вёрстки «отзывчивость» блоков, иногда предпочитая собственный код готовым решениям. Попутно учитывает огромное количество мелочей, которые будут влиять на скорость загрузки сайта, ранжирование и отображение в поисковых системах — это и есть настоящая адаптивная верстка.
Подход, разделяющий версию для десктопа и для мобильного, чаще всего означает, что работа будет сделана по сути дважды: создаются две раздельные версии — каждая как аналог жёстко заданного дизайна по устаревшей модели. И конечно же, за двойную работу хочется получить дополнительную компенсацию. Но это также означает и недостаточную квалификацию: профессионал не сможет использовать менее эффективный подход, даже намеренно. Вёрстка двух раздельных макетов, а не одного, по-настоящему адаптивного, — это явный признак не владения ключевыми основами ремесла.
Важно отметить, что описываемый сценарий создания адаптивной верстки начинается на этапе проектирования сайта, портала или сервиса, то есть задолго до начала процесса собственно вёрстки. При проектировании учитывается множество поведенческих и бизнес факторов. На основе этих данных принимается решение, какие элементы являются ключевыми для каждого устройства и, соответственно, сценария использования/поведения пользователя на сайте — это позволяет отсеять, скрыть одни элементы и переформировать другие под каждое из целевых устройств/сценариев. Такая методология создания адаптивного решения использует структурированный подход к процессу «проектирование-дизайн-верстка», предотвращает усложнение базовой разметки, и применима даже для достаточно сложных систем.
В современных реалиях не должно даже стоять вопроса о наличии мобильной или адаптивной версии сайта. Так что, если при расчете работ по созданию сайта вам предложат на выбор разделенные варианты: «вёрстка» и «адаптивная вёрстка» (и конечно же второй вариант стоит дороже), знайте — это признак такой же некомпетентности, как если бы вам предлагали сверстать сайт «фреймами» или «таблицами» как стандартное решение, а за современную вёрстку блоками просили отдельных денег. Исключение может составлять, например, случай, если вы создаёте аналог «Вконтакте», но это совсем другая история…
Мнение редакции может не совпадать с мнением автора. Если у вас есть, что дополнить — будем рады вашим комментариям. Если вы хотите написать статью с вашей точкой зрения — прочитайте правила публикации на Cossa.
Источник:
