Сайт адаптивный дизайн

Что это такое и зачем?

Адаптивный дизайн это разработка страниц для просмотра на различных устройствах. Для этого контент должен размещаться на экране определенного размера, и самое главное сайт должен быстро работать на этих устройствах. Если сайт грузится дольше 3х секунд — с него уходят около 56% пользователей. Конечно это средний показатель — но цифра велика и это надо учитывать.

Скорость

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

Мобилка в первую очередь

Пользователей мобильных устройств становится больше и разрабатывать версию для них придётся в любом случае. Если мобильная версия делается сначала то мы выделим главные элементы контента, продумаем сервисы и новые возможности вроде геолокации, камер и прочего.
После мобильной сжатой версии ее проще дополнять, двигаясь от простого к сложному, у информации будет четкая иерархия. Такой подход позволяет сделать сайт с минимальным количеством лишних элементов, здесь фокусы внимания будут правильно расположены, и все будет хорошо 🙂

Если у вас сайт со срочной информацией — мобильная версия обязательна!

Адаптивка или мобилка?

иногда заказчики путают адаптивный дизайн с мобильным. Тут хочется дать небольшое пояснение. Адаптивный дизайн — это дизайн-макет, который адаптируется под любой размер. Тоесть макет делается под все разрешения от мобильных устройств, через планшеты к десктопам, и далее к большеформатным экранам. Если для стандартного экрана мы используем компоновку из 4х колонок, то там будет 1, 2, 3, 4, 6, и так далее. У планшетов и мобильных устройств будет другое меню — гамбургер из которого будет выпадать список.

Мобильная версия это только 1 колонка — и всё.

Заключение

Быстрый — значит первый.
Веб дизайн становится мобильным, поэтому обращайте внимание на скорость работы сайта.
В первую очередь следует разрабатывать мобильную версию, а затем на десктопе дополнять её контентом. Всегда лучше использовать векторную графику, где это возможно, оптимизировать изображения.