Особенности разработки адаптивного дизайна сайта

В отличие от привычной работы по созданию дизайна сайта для одного типа устройств – компьютеров, у адаптивного дизайна другие, более сложные законы, и они диктуют принципиально другой подход к разработке. Теперь нужно учитывать мобильные устройства и их особенности: расстояние от точки просмотра, плотность пикселей, ориентацию, предполагаемую скорость подключения к Интернет.

Павел ШУДНЕВ

Первое, с чего начинается разработка адаптивного дизайна сайта – это создание прототипа для наименьшего из устройств. Какого? На момент написания этого текста, еще актуально говорить про смартфоны, однако в обозримом будущем их вполне может потеснить новая категория мобильных устройств, с которых можно просматривать сайты. По-английски она называется wearables (т.е. то, что можно носить). На сегодня речь идет только о часах Apple, однако завтра у новинки наверняка появятся конкуренты…

Пока работу над адаптивным дизайном принято начинать со смартфона (золотой принцип mobile first – сначала мобильный). Причем не просто со смартфона, а со смартфона в вертикальной (портретной) ориентации, ибо в горизонтальной (альбомной) ориентации дизайн сайта имеет полное право несколько измениться – адаптироваться под новые размеры вьюпорта (от англ. viewport – видимая часть окна браузера).

В чем заключаются особенности разработки дизайна сайта для смартфона? Давайте посмотрим:

  1. Дизайн разрабатывается на экране компьютера, но предназначен для смартфона
  2. Разницу в абсолютных размерах экрана ПК и мобильного телефона комментировать, пожалуй, излишне: размеры устройств отличаются в разы
  3. При взаимодействии с телефоном нельзя использовать привычные для ПК клавиатуру и мышь, однако в работе над дизайном их использовать нужно
  4. Глядя на экран монитора ПК (или ноутбука) невозможно понять, как дизайн сайта будет смотреться на экране смартфона: помимо разных физических размеров, у этих устройств огромная разница в плотности пикселей (плотности точек, из которых состоит изображение)
  5. У компьютера и смартфона также отличаются расстояния от точки просмотра

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

Как происходит процесс разработки дизайна?

Есть несколько подходов к разработке адаптивного дизайна сайтов. Здравый смысл говорит о том, что разработанный на компьютере дизайн желательно посмотреть на экране целевого устройства – мобильного телефона.

На первый взгляд, задача кажется вполне решаемой: сделать снимок экрана (с дизайном сайта) нужного размера, скопировать его на телефон, и открыть изображение с телефона, но… к сожалению, не так все просто.

Дело в том, что при разных физических размерах экранов разных телефонов, они еще и между собой отличаются плотностью пикселей. Например, у современных телефонов Apple iPhone плотность пикселей составляет 326 ppi (326 пикселей на один дюйм, или примерно 128 пикселей на один сантиметр), а у флагманского iPhone 6 Pus – так и вовсе 401 ppi. У большинства же моделей Samsung, для сравнения, показатель ppi колеблется в районе 245 точек на дюйм.

Это значит, что одно изображение будет иметь разные физические размеры при просмотре с разных смартфонов. Скажем, если за базовое устройство взять телефон Samsung (245 ppi), то на iPhone 5 та же картинка будет иметь на треть меньшие размеры, а при просмотре с iPhone 6 Pus картинка будет выглядеть почти в два раза меньше. Казалось бы: ну и что?!

Фундаментальный элемент веб-дизайна – используемый шрифт. Он обязательно должен быть читабельным, т.е. для начала иметь нормальный размер. При просмотре же дизайна сайта с разных мобильных телефонов, как уже было сказано выше, размеры картинки и ее элементов, в том числе шрифтов, могут быть изменены в ту или иную сторону. Т.е. шрифт может выглядеть как больше, чем запланировал дизайнер, так и меньше. И это – только вершина айсберга.

Другие нюансы адаптивности

Если на базе начальной версии дизайна разработать действующий прототип сайта (или одной из его страниц), то окажется, что дизайн может по-разному отображаться с телефонов на базе Android и Apple iOS. Например, на iPhone все элементы дизайна (как изображения, так и шрифты) могут выглядеть значительно больше, хотя по логике вещей они должны быть меньше…

Шрифты, которые отлично смотрятся на экране компьютера, при просмотре с iPhone могут выглядеть очень размыто. То есть мало того, что размер шрифта вдруг стал раза в два больше, так он стал еще и размытым! И в этот момент становится очевидно, что выбранный шрифт в дизайне сайта использовать просто нельзя, а поскольку шрифтов обычно используется несколько, и они подбираются один к другому, есть вероятность, что нужно будет поменять все шрифты, используемые в дизайне сайта.

Если шрифт подобрал дизайнер, это еще полбеды. Однако возможны ситуации, когда используемый шрифт прописан в бренд-буке компании. И что тогда делать? Его ведь менять вовсе нельзя – иначе заказчик дизайн просто не примет (и будет иметь на это полное право).

Отдельная история – изменение размера шрифта и других элементов дизайна при повороте устройства. Нормальный человек об этом точно не задумается, ряд разработчиков (особенно в России) не обращают на это внимания… Это может показаться мелочью, однако из таких «мелочей» и складывается хороший или плохой дизайн.

На некоторых сайтах при смене ориентации смартфона с вертикальной на горизонтальную (т.е. при его повороте), элементы дизайна увеличиваются пропорционально ширине вьюпорта (чаще всего это можно наблюдать на телефонах Apple). Если отношение сторон телефона составляет, например, два к трем (как, скажем, на iPhone 4 – 640 x 960 пикселей), то при его повороте на 90 градусов размер шрифтов и других элементов дизайна увеличится в полтора раза.

Сравним с дизайном сайтов для ПК

Выше шла речь об особенностях разработки адаптивного дизайна сайта – который должен быть максимально удобным для просмотра на любых устройствах, с которых возможен выход в Интернет. Ниже хотелось бы коротко описать разработку дизайна обычного – неадаптивного – сайта, который предназначен для просмотра только с ПК.

  1. Дизайн разрабатывается на ПК, и предназначен для просмотра на ПК. Поэтому вопросов о том, как сайт будет смотреться с мобильных устройств не возникает в принципе
  2. За исключением мониторов Apple, в которых использована матрица Retina, разница в плотности пикселей современных компьютеров небольшая: она редко превышает 20%.
  3. Диагонали экранов компьютеров, безусловно, отличаются между собой, но не в разы – в отличие от экранов монитора ПК и мобильного телефона: если размер экрана iPhone 4 меньше стандартной визитной карточки, то экран небольшого ноутбука по размеру сопоставим с книгой
  4. В процессе разработки дизайна сайта для ПК, дизайнер работает с клавиатурой и мышью – теми же инструментами, что и будущий пользователь сайта (нет нюансов тачскринов и навигации при помощи пальцев)
  5. Расстояние от точки просмотра до экрана ПК в четыре раза больше, чем до экрана мобильного телефона. Однако этот вопрос совершенно не должен волновать дизайнера, который разрабатывает дизайн сайта, предназначенного только для просмотра с компьютеров

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

Post Scriptum

Задачей данной статьи было показать особенности разработки адаптивного дизайна сайта. Хочется верить, что по ее прочтении у читателя как минимум возникло представление о том, насколько данный процесс отличается от разработки дизайна сайта обычного – предназначенного только для ПК. Что хотелось бы добавить:

Во-первых, так как процесс разработки дизайна сложнее, выше так называемая «цена входного билета» в данный сегмент: чтобы заниматься адаптивным дизайном, нужно намного больше знать, понимать и уметь.

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

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

Другие статьи
Ликбез: хостинг, сервер, сайты, домены, DNS и CMS
Рассказ о пяти ключевых составляющих разработки сайта простым и понятным языком, с примерами. Читать далее
Что такое редизайн сайта и зачем он нужен?
Есть мнение, что редизайн – это просто разработка нового дизайна для старого сайта, и нужен он для того, чтобы сайт выглядел более современно. Это очень поверхностная точка зрения, которая имеет мало общего с реальностью: на самом деле, всё намного более серьезно… и интересно. Читать далее
Как выбрать домен
Мои клиенты часто обращаются ко мне за советом, как правильно выбрать доменное имя. У меня на этот счет есть свои соображения, которыми я поделюсь ниже. Читать далее
Что нужно знать при переносе сайта на другой домен?
Если вас интересуют переходы на ваш сайт из поисковых систем, то при переносе сайта на другой домен нужно сделать так, чтобы Google знал, что сайт переехал, а не думал, что его содержимое украли. Читать далее