Адаптивная верстка сайтов | Сначала мобильные
С какой версии начинать разработку сайта: с мобильной или десктопной? Такой вопрос был задан в статье о медиа-запросах, используемых в адаптивной верстке.
Люк Вроблевски, автор книги «Сначала мобильные!», однозначно говорит, что начинать нужно с мобильных:
Как только вы поймете, каким количеством бессмысленных навигационных элементов, пустого контента и неэффективных рекламных баннеров завален типичный сайт, вам станет очевидно, почему мобильная «диета» может оказаться полезной как для самих владельцев сайта, так и для их клиентов.
По причине того, что огромное количество сайтов для обычных мониторов уже было создано до появления адаптивной верстки, их потом приходилось адаптировать под мобильные устройства. Отчего сложилось впечатление, что «большая» версия как бы важнее, а мобильная идет эдаким полезным дополнением.
Но в действительности все совершенно наоборот: мобильная версия — это то, от чего нужно отталкиваться и делать ее по возможности самой легкой и доступной, не обременяя кучей излишеств.
Смотрите сами: пользователю мобильного устройства приходится тратить свое время и дорогой, пока еще, трафик только лишь для того, чтобы с полезным содержимым загружался весь этот излишек наворотов, что был предназначен для большой версии — красочные элементы дизайна, тяжеловесные картинки, баннеры, второстепенные блоки информации и пр.
Кстати, по поводу картинок. Указанный мной ранее способ адаптации изображений не самый лучший:
img {
max-width: 100%;
}
Дело в том, что это не совсем адаптация. По сути, это всего лишь старая добрая «резиновая» верстка. Использовать слово адаптивный здесь не корректно, потому что мы только уменьшаем визуально картинку, но вес ее остается прежним. А значит, время ее загрузки также останется прежним, что для мобильного устройства весьма ощутимо.
Чтобы картинка стала действительно адаптивной, нужно использовать специальные программные средства сжатия изображений. Но об этом я расскажу в отдельной статье.
Таким образом, сначала необходимо сосредоточиться на создании мобильной версии сайта, а затем добавлять к ней, либо наоборот прятать другие элементы дизайна.
Вы можете спросить: а зачем что-то еще прятать, ведь и так мобильная версия минимальная? А вот! Может быть и такое. Яркий пример тому — мобильная навигация. Это меню, спрятанное за иконкой-гамбургером, о котором вы все, наверняка, знаете и сто раз видели:
Это типичная менюшка, предназначенная для мобильных устройств. Так вот, когда вы верстаете сайт, то гораздо удобнее этот вариант меню сначала добавить в верстку страницы, чтобы она по-умолчанию показывалась на экранах мобильных устройств. А затем при помощи медиа-запросов вы просто выключаете ее отображение на экранах больших мониторов.
Согласитесь, что вставить в медиа-запрос короткий кусок кода типа:
#mobile-menu{display: none;}
гораздо проще, чем городить там же огород из кучи правил для отображения меню.
Контент важнее навигации
Подход «сначала мобильные» предполагает, что конечный результат будет обеспечивать решение наиболее важных для пользователей задач, поэтому при проектировании сайтов разработчикам необходимо безжалостно избавляться от избыточного интерфейса, пустого контента и всего того мусора, которым сегодня заполнены многие веб-ресурсы.
Общее правило адаптивного дизайна гласит: контент всегда должен иметь приоритет над навигацией.
Большинство мобильных версий сайтов почему-то начинают свой диалог с пользователем с навигации. Навигационные панели часто занимают довольно большое пространство на экране. Но пользователю не нужна навигация, ему нужен контент в первую очередь. И здесь как раз меню в одну кнопку (тот же «гамбургер» или просто слово Меню) будет наилучшим решением.
И, конечно же, не стоит забывать о кнопке возврата наверх, чтобы пользователю не приходилось бесконечно проматывать экраны в попытке добраться до верхнего меню навигации. Либо сделать так, чтобы кнопка меню всегда «плавала» в верхней части экрана и не исчезала.
Надеюсь, вопрос исчерпан. В следующей статье мы поближе познакомимся с одним из трех китов адаптивной верстки — макетом на основе сетки (flexible gridbased layout).
Оставайтесь на связи, а еще лучше подпишитесь на обновления блога Вебсовет.
Адаптивная верстка сайтов | Введение
Адаптивная верстка сайтов | Медиа-запросы
