Адаптивные сайты электронной коммерции

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

Как сделать адаптивный сайт

Создайте несколько специализированных макетов

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

Адаптивный дизайн для новостного сайта

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

Мобильный адаптивный дизайн для новостного сайта

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

Подумайте о скорости загрузки

Поскольку сегодня люди редко расстаются со своими мобильными устройствами, обратите внимание на скорость загрузки страниц: ведь их могут просматривать как в скоростных сетях Wi-Fi, так и с помощью 3G или EDGE. Уберите с мобильной версии сайта тяжеловесные изображения и не загружайте видео автоматически. Например, на сайте нашего ИТ-ивента Code’n’Cofee использовано фоновое видео, которое проигрывается автоматически. Но если вы посетите мобильную версию этого сайта, то увидите, что вместо видео на нем загружается фотография:

Сайт для ИТ-ивента или конференции

Еще один способ сократить время загрузки страницы — использовать специальные знаки вместо изображений для простых форм, например для звездочек рейтинга (★ и ☆).

Используйте viewport и media query

В HTML5 появился элемент viewport для контроля масштабирования и размера страницы. Вот пример кода:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

width=device-width указывает, что ширина страницы должна соответствовать ширине экрана устройства.

initial-scale=1.0 устанавливает степень масштабирования, которая будет использоваться после загрузки страницы.

Чтобы сайт был адаптивным, вам следует использовать элемент viewpoint.

В CSS3 появилось правило @media, которое позволяет включать указанные CSS-свойства только когда выполняется определенное условие:

@media only screen and (max-width: 500px) { body { width: 100%; } }

А так можно загружать разные стили для разных типов устройств:

<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="newsheet.css">

Указывайте размер в относительных величинах

Чтобы ваш сайт был адаптивным, указывайте размеры объектов в относительных величинах (таких, как проценты). Например, когда вы указываете, что размер колонки равен 50%, то она всегда будет занимать половину экрана. Такой подход лежит в основе концепции grid-view, согласно которой экран разделяется на 12 колонок общей шириной 100%. Когда мы изменяем размер страницы, grid-view и заключенные в него элементы адаптируются к новым размерам. Например, вот как выглядит созданный нами дизайн сайта KeenSnap на широкоугольных мониторах:

Адаптивный сайт для фотографов и их клиентов

А вот эта же страница с меню-гамбургером на меньшем экране:

Адаптивный сайт для фотографов и их клиентов c меню-гамбургером

Как видите, страница адаптируется к размеру экрана устройств iPhone, iPad, Android девайсов. Вот как она выглядит на экране смартфона:

Мобильный адаптивный сайт для фотографов и их клиентов

Используйте векторные и адаптивные изображения

Когда использовать векторные, а когда растровые изображения? Ответ прост: если иконки на сайте достаточно просты и не обладают большим количеством деталей, тогда используйте изображения в формате SVG или просто специальные иконочные шрифты. В таком случае они будут выглядеть отлично даже на больших экранах. А вот с растровыми изображениями на страницах не все так просто. Чтобы они хорошо выглядели на любых экранах, приходиться использовать JavaScript или PHP для генерации и показа изображений, которые соответствуют разрешению экрана.

Вот и все, что касается основ создания адаптивных сайтов. А теперь давайте взглянем на несколько примеров.

Примеры адаптивного дизайна сайтов электронной коммерции

Вот созданный нами сайт магазина «Радиалка», занимающийся продажей туристического снаряжения и одежды:

Адаптивный сайт магазина с туристическим снаряжением

Это же сайт на меньшем экране:

Cайт магазина с туристическим снаряжением, который адаптируется под размер экрана

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

Вот еще несколько примеров отличных адаптивных сайтов, которые встретились нам в сети. Веб-сайт, продающий электронные книги:

Адаптивный дизайн сайта книжного магазина

Страничка игры для iOS/OS X:

Адаптивный сайт для видеоигры

Магазин часов:

Адаптивный сайт для магазина аксессуаров

Примеры мобильных адаптивных сайтов

А вот несколько отличных мобильных адаптивных сайтов. Гостиничная компания:

Мобильный адаптивный сайта для гостиничной компании

Магазин галстуков:

Мобильный адаптивный сайт для магазина аксессуаров

Компания, которая продает строительные краски:

Мобильный адаптивный сайт для магазина стройматериалов

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

Мы в stfalcon.com любим создавать адаптивный дизайн сайтов электронной коммерции (примеры — в нашем портфолио) и будем рады создать такой сайт для вашей компании.

Об авторе

Front-end разработчик
Руслан отвечает за HTML, CSS и JavaScript на проектах студии.

Похожие статьи

Вернуться к списку записей К списку записей