Телефон: +7 4012 402 180
г. Калининград, пл. Победы, 10а
График работы: пн-пт с 10:00-20:00

Заполнить бриф

Заказать звонок

Заполнить бриф

+7 4012 402-180

Адаптивный дизайн сайта: особенности использования

Главная
→
Блог

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

Заказывайте адаптивный дизайн сайта под ключ. Техническая консультация специалистов - Бесплатно! Подробнее по телефону: +7 4012 402-180 и оставляйте заявку на адрес почты: admin@seokld.ru

Макс Даймонд

CEO Агентство Веб Решений L STUDIO

ЧТО ТАКОЕ АДАПТИВНЫЙ ДИЗАЙН

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

Благодаря специальному тегу браузер понимает, что если у пользователя в этот момент идет загрузка страницы с мобильного устройства, то он подстраивает сайт под его устройство. Если уже говорить совсем по простому.

Адаптивный дизайн – это также способность сайта подстраиваться под телефоны. Ведь существует еще и мобильная версия сайта, когда разработчики создают еще один проект в домене которого содержится буква m., что означает, что сайт подгрузит мобильную версию пользователю, когда тот будет заходить на него с телефона. Сайт Агентства Креативных Решений имеет как раз адаптивный дизайн. Если бы это была отдельная мобильная версия, то выглядело бы это так: m.seokld.ru

ЧЕМ ОТЛИЧАЕТСЯ АДАПТИВНЫЙ ДИЗАЙН САЙТА ОТ МОБИЛЬНОЙ ВЕРСИИ?

Очень разумный вопрос. При разработке отзывчивого дизайна сайт просто “складывается” в зависимости от количества блоков на экране мобильного устройства. Примерно так:

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

Именно поисковик Google в 2015 году заявил о том, что mobile-first будет важным фактором при ранжировании сайтов в поисковике. Иными словами, если вы “мобильный”, то будете показываться выше наряду с другими сайтами, у которых адаптивного дизайна нет. Т.е важный нюанс – наличие отзывчивого дизайна повышает вес при поисковом seo продвижении.

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

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

РАЗМЕРЫ МАКЕТОВ АДАПТИВНОГО ДИЗАЙНА

При проектировании дизайнер использует макеты под каждое устройство заданных размеров экранов. Их несколько в зависимости от ширины:

320 px — Мобильные устройства (портретная ориентация по вертикали);
480 px — Мобильные устройства (альбомная ориентация по горизонтали);
600 px — Небольшие планшеты;
768 px — Планшеты (портретная ориентация);
1024 px — Планшеты (альбомная ориентация)/Нетбуки;
1280 px и более — для компьютеров.

Или можно их сегментировать детально вот так. Разрешения стационарных ПК и ноутбуков:

Для планшетов выделяют такие разрешения адаптивных макетов дизайна:

Для смартфонов:

На выходе дизайнер передает в работу верстальщику несколько наборов psd макетов, которые в конечно счете превратятся в будущий сайт.
Мы проектируем более просто и все сайты уже идут с мобильной версией, благодаря фреймворку Bootstrap. Он размечает сетку по которой с помощью стилей элементы “подстраиваются” под экраны устройств.

Выглядеть это может вот так:

или вот так:

Т.е так сайт будет сжиматься при уменьшении размеров экранов. Это варианты, так называемой, сетки на основе которой и будет строиться весь ваш сайт.

КАК СДЕЛАТЬ САЙТ АДАПТИВНЫМ?

При создании сайта в шапке сайта задается соответствующий мета тег viewport, который вставляется в секции <head>. Выглядит это так:


<meta name=”viewport” content=”name=value, name=value”

Полная запись будет выглядеть вот так:


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

Расшифровать ее можно примерно следующим образом: идет приказ браузеру подстраивать сайт пропорционально экрану устройства в зависимости от его ширины. Т. е в строгой пропорции, чтобы нигде сайт “не выпирал”. А это уже достигается умелой версткой.

КАК ПРОВЕРИТЬ САЙТ В МОБИЛЬНОЙ ВЕРСИИ

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

Самым распространенным сервисом является – http://ami.responsivedesign.is
Достаточно вбить адрес вашего сайта и посмотреть как он выглядит на разных устройствах:

Урл сайта вбиваем в поле ниже наших экранов: