Views Comments Previous Next Search

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Рассказать друзьям
0 комментариевпожаловаться

Комментарии

Подписаться
Комментарии загружаются
чтобы можно было оставлять комментарии.