Последнее время перед нами все чаще встает вопрос, как сделать так, чтобы сайт клиента было удобно просматривать не только на компьютере с большим монитором, но и на других устройствах, которые все больше входят в нашу жизнь. Люди все чаще заходят на сайты с планшетов, смартфонов и других устройств. И это необходимо учитывать при разработке дизайна и программировании сайта. И если совсем недавно, это явление носило, скорее, эпизодический характер, и большинство разработчиков просто игнорировало изменение ситуации (например, не стоит дополнительно усложнять верстку сайта, если процент людей, просматриваюших его на смартфоне, стремится к нулю), то на данный момент ситуация глобально изменилась. Кроме того, существуют множество категорий сайтов, для которых именно просмотр на смартфонах (то есть «в дороге» является критичным, например, справочные сайты, сайты соц. сетей, некоторые Интернет-магазины и так далее — одним словом, те сайты, на которые люди регулярно заходят, не находясь за стационарным компьютером. При этом между смартфонами и компьютерами существует еще громадный диапазон размеров устройств: планшеты, нетбуки, ноутбуки. В связи с этим грамотное распределение экранного пространства при отображении информации на сайте приобретает первостепенную важность.
Случай из недавней практики: клиент, которому мы сделали адаптивный сайт, спрашивает: «Почему мой сайт на телефоне вытянулся весь в столбик, а не отображается так же, как на мониторе? Я хочу, чтобы он вообще на всех устройствах отображался одинаково!» Краткое объяснение преимуществ адаптивности вернуло нам взаимопонимание, и клиент смог оценить возможность читать сайт, просто прокручивая его на телефоне вниз. Многие пользователи сайтов обычно даже не задумываются о том, что сайты не могут отображаться одинаково на всех устройствах. Хотя бы потому, что все экраны — разные, они отличаются не только размерами, но и пропорциями и даже ориентацией (они могут быть ориентированы вертикально или горизонтально). Поэтому приходится прибегать к различным хитростям, позволяющим красиво и удобно разместить контент на любом экране.
Самым простым способом адаптации размера сайта к разрешению экрана является пропорциональное масштабирование, которое мы часто видим на экранах смартфонов: сайт просто сжимается до размеров телефона и демонстрируется точно так же, как на мониторе, только в 3–5 раз мельче. Такой способ демонстрации сайта имеет один яркий недостаток: чаще всего, для того, чтобы прочитать текст на таком сайте, нужно его увеличивать и читать, прокручивая пальцем влево-вправо, а для того, чтобы обратно вернуться к обзору всего сайта — его надо уменьшать. Такой сайт мы условно назовем «жестким».
В Европе и США создание сайтов ведется по другому принципу и тоже своеобразно решают данную задачу: сайт верстается под некую ширину в пикселях (экранных точках), которая условно принимается как минимальная ширина экрана, на котором будет просматриваться сайт. Таким образом, сайт при отображении на маленьком экране будет выглядеть именно таким, как его создали. На экранах бОльших, по бокам от такого сайта просто появится пустое место (в той или иной степени оформленное графически). При просмотре же на меньших экранах с сайтом произойдет не очень приятная вещь: он либо получит горизонтальную прокрутку (что, чаще всего, происходит на небольших мониторах), либо опять же уменьшится пропорционально (на телефонах и планшетах). Такой вариант называется «фиксированным по ширине», и он может быть довольно удачным, при условии, что основное наполнение вашего сайта — тексты, а также вы не преследуете цели задействовать все поле экрана.
Есть у данного решения еще один недостаток: обычно пользователи с большими экранами смотрят на них с большего расстояния, чем, к примеру, пользователи планшетов и нетбуков, а так как обычно размер шрифта на таких сайтах выставляется в пикселях (то есть линейные размеры знаков будут практически одинаковыми на нетбуке и большом экране), то на больших экранах создается ощущение очень мелкого шрифта и приходится придвигаться или увеличивать, чтобы прочитать, особенно людям с близорукостью.
Следующий тип сайтов, который был достаточно актуален еще сравнительно недавно, и продолжает использоваться очень активно при работе с большинством движков и с привлечением шаблонов, это так называемый тянущийся дизайн. Если немного упрощать объяснение, то суть метода такая: сайт делится на условные «колонки», каждая из которых либо растягивается на определенный процент от ширины экрана, либо не растягивается вообще. Таким образом, к примеру, сайт может состоять из меню слева, которое не тянется вообще, далее 60% оставшегося места занимает собственно текст и справа, к примеру, идет колонка новостей, которая занимает оставшиеся 40%. Обычно у таких сайтов так же есть минимальная ширина (необходимая для того, чтобы на совсем узких экранах эти самые 60% и 40% не превратились в совсем уж узкие столбики, в которые помещается по одному слову в ряд) и максимальная ширина (чтобы на совсем широких экранах сайт не превратился в длинные ряды текста, которые будет неудобно читать. Такой вариант сайта является наиболее распространенным среди российских разработчиков, которые еще не перешли на полную адаптивность и в целом является достаточно неплохим. Но при работе с мобильными устройствами он чаще всего неудобен— так как, если на нем более одной колонки, то его будет удобно читать только в горизонтальном развороте смартфона и при укрупнении, то ест одну колонку читаем, остальные — не видим. А при этом на больших мониторах по бокам от сайта опять же появляются пустые пространства и опять-таки — мелкий шрифт, в целом сайт производит непрезентабельное впечатление.
Для решения обозначенных проблем напрашивается такой вариант: почему бы не верстать сайт блоками, которые при подстройке сайта к различным размерам экрана будут двигаться относительно друг друга? При этом на меньших экранах частью несущественной информации вообще можно пожертвовать или сократить ее до предела, вывести вместо 10 анонсов новостей всего три последние, сократить промежутки между блоками и поля, некоторые крупные картинки можно заменить короткими фразами или пиктограммами, а размер шрифта вообще выставлять в зависимости от размера экрана, таким образом, на крупных мониторах шрифт будет крупнее, а на смартфонах он будет достаточно мелким. На больших же экранах, напротив, мы можем рядом с читаемой статьей разместить список других статей, пояснительные блоки, формы и иллюстрации, добавить пустого пространства для создания ощущения легкости, расшифровать некоторые навигационные моменты, увеличить число элементов. Именно такой способ верстки получил название «адаптивная верстка». Для достижения такого эффекта, дизайнер и веб-технолог должны работать в тесном сотрудничестве, детально прорабатывая поведение каждого блока сайта. Результатом их совместной деятельности является адаптивный дизайн. Ухищрений здесь очень много, а цель одна — красиво и экономно заполнить экранное пространство для комфортного просмотра сайта. А для смартфонов такой дизайн еще зачастую должен решать задачу простоты управления: нажатие на экран пальцами значительно уступает в точности клику мышки в определенную область, поэтому на подобных сайтах предусматривается упрощение попадания в кнопки и ссылки.
Адаптивный дизайн и адаптивная верстка стоят значительно дороже стандартных потому, что на стадии дизайна гораздо больше тонкостей должны учитываться дизайнером, требуется большое количество консультаций с веб-технологами и гораздо более высокая квалификация: дизайнер должен досконально знать возможности современной верстки и уметь их использовать для решения задач клиента. А последующий этап верстки потребует от специалиста самого широкого арсенала средств, при этом вся задача осложняется необходимостью обеспечить сайту кроссбраузерность — то есть качественное и единообразное отображение под различными браузерами и на различных устройствах.
Возникает закономерный вопрос: всем ли сайтам нужен адаптивный дизайн? Разумеется, нет. На некоторых проектах можно обойтись стандартными способами, но при этом вы всегда должны иметь в виду: скорее всего, вы делаете свой сайт неудобным для определенных пользователей. Это значит, что вы может потерять заказчика или покупателя, поэтому заказывая разработку дизайна каждый раз оценивайте необходимость адаптивной верстки.