Основные принципы «отзывчивого» веб-дизайна показали в GIF

Стартап Froont (разрабатывает платформу для создания сайтов с «отзывчивым» дизайном) описал девять основных принципов «отзывчивого» веб-дизайна (responsive web design) в GIF-изображениях. Look At Me приводит советы разработчиков Froont. Стоит отметить, что «отзывчивым» веб-дизайном принято называть понятие, которое является частью адаптивного веб-дизайна (adaptive web design), но касается только макета страницы.

Чем отличается «отзывчивый» веб-дизайн от адаптивного. «Может показаться, что это одно и то же, но это не так. Эти подходы дополняют друг друга, но среди них нет правильного или неправильного».

Подвижность. «Когда размер экрана становится меньше, контент начинает занимать пространство снизу. При этом всё, что находится после его нижней границы, отодвинется. Это может показаться сложным, если вы привыкли создавать сайты с указанием величин в пикселях и точках».

Относительные величины. «Макет будет открываться на десктопах, мобильных и каких-то других устройствах. При этом плотность пикселей у них тоже может меняться. Поэтому нужно работать с гибкими единицами, то есть с процентами. Если вы задаёте для чего-то ширину 50 %, то оно будет занимать половину экрана на любом устройстве (или половину окна браузера)».

Контрольные точки. «Они позволяют макету сайта перестраиваться в определённых точках. Например, три колонки на десктопе станут одной колонкой на мобильном устройстве. <...> Их нужно использовать с осторожностью, поскольку они могут внести беспорядок в макет».

Максимальные и минимальные величины. «Прекрасно, когда контент занимает всю ширину экрана, как, например, на мобильных устройствах. Но растягивать его по всей ширине экрана телевизора не имеет смысла. Здесь помогут максимальные и минимальные значения. Например, можно задать ширину 100 % и максимальную ширину 1000px. Тогда контент заполнит всю ширину экрана, но не превысит 1000px по ширине».

Вложенные объекты. «Помните про относительные величины? Макет со множеством элементов, расположенных друг относительно друга, сложно контролировать. Поэтому перенос элементов в отдельный контейнер сделает макет более понятным, чистым и аккуратным. Такой метод удобно применять для элементов, которые не будут масштабироваться, например, для логотипов или кнопок».

Mobile first или desktop first. «Технически не такая большая разница: запускается проект на маленьком экране, а потом переносится на большой, или наоборот. Тем не менее mobile first создаёт дополнительные ограничения. Часто разработчики начинают делать две версии сразу, чтобы посмотреть, какая получается лучше».

Подключаемые или системные шрифты. «Хотите иметь Futura или Didot на сайте? Используйте подключаемые шрифты — они будут выглядеть великолепно. Но каждый из них загружается отдельно, и чем больше их будет, тем больше времени уйдёт на загрузку страницы. А системные шрифты работают очень быстро. За исключением тех случаев, когда их нет у пользователя на устройстве».

Растровые или векторные изображения. «В иконке много деталей? Тогда используйте растровое изображение. Если нет, то подумайте насчёт векторных. И те и другие имеют свои достоинства и недостатки. Однако помните о размере файла — все картинки для интернета должны оптимизироваться. Векторные изображения весят совсем мало, но старые браузеры их не поддерживают. Тем более, если в векторном файле очень много кривых, то он будет „тяжелее“ растрового».