+7 495 589 08 53
дизайнвизуальное оформление вашего проекта

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

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

Проверить свой сайт на предмет готовности к наплыву мобильных пользователей совсем несложно. Для этого достаточно зайти на него со своего телефона и пройтись по основным разделам, пунктам меню, изучить характеристики товара и просмотреть несколько связанных с ним изображений. Удобно ли проводить все эти операции? Сколько кликов требуется для них, и всегда ли вы с первого раза попадаете по нужной вам ссылке?

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

Недостатки традиционных подходов

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

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

Но станет ли загружать мобильную версию только что пришедший посетитель, случайно заинтересовавшийся вашим предложением? Тут уж мобильное приложение – не лучший вариант, и следует позаботиться, чтобы основная версия сайта была для пользователя достаточно удобной и позволила ему без труда найти контакты или даже оформить заявку прямо с мобильного устройства.

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

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

Недостатки адаптивного дизайна

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

Другим существенным недостатком является набор довольно жестких требований к контенту, публикуемому на страницах сайта. Как следствие, для обслуживания такого сайта потребуется грамотный контент-менеджер.

Этапы создания сайта с адаптивным дизайном

1. Отрисовка

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

Если определенные элементы не удается уместить в достойном качестве, то предпочтительнее сразу исключить или заменить их. Результатом первого этапа разработки дизайна становится несколько макетов (обычно от 5 до 10), рассчитанных на типовые экранные разрешения и пропорции.

2. Верстка

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

3. Тестирование

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

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

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

Понравилась статья? Поделись с друзьями!
Денис Баталин
Креативный директор Bataline
Клиент желает заказать баннер 6×3 метра. Присылает почтой картинку. GIF 3×3 см и официальную заявку, типа...
«Прошу изготовить...» и .т.д. Подпись «Зам директора Иванов И.И.»
Пишу ему:
— Я не могу напечатать эту картинку. Нужно другое разрешение.
Через час получаю гневное письмо:
«Печать плаката разрешаю! Генеральный директор Бубин А.А.»
Антон Иванов
Ведущий дизайнер и проектировщик интерфейсов Bataline
Дизайнер: Мне нужен Ваш логотип и гайдлайны, чтобы я мог разработать шапку для Вашего сайта, согласно вашей корпоративной символике.
Клиент: Окей, я скину вам его по факсу!
Михаил Соколов
Bitrix-разработчик
Идут программист и веб-дизайнер по улице. Прямо перед носом у них падает кирпич. Затем еще один.
- Тетрис! - подумал программист.
- Выпадающая менюшка! - подумал веб-дизайнер.
Алексей Глубоков
Исполнительный директор
Ну нам кажется это нужно сделать в стиле грез, это же для мужчин в основном раздел. Заходишь на пляж, а там хаотично девушки красивые пролетают. Штук двадцать. Летают, летают… А потом хопа... и енот!
Антон Иванов
Ведущий дизайнер и проектировщик интерфейсов Bataline
Вот этот макет просто замечательный, и шрифт красивый, иллюстрация отлично вписалась. И красный цвет такой яркий! Но давайте уберем картинку, все буквы напишем одной высоты и черного цвета, а фон пускай будет белым
На шапке календаря нарисовать два логотипа и под ними с одной стороны мясорубку, в которую рука опускает пару купюр, а откуда должен вылезать фарш — там пачки купюр, сложенные друг на друга. Это и умно (потому что мясорубка — это изначально умное решение), и это просто, потому что вручную трудно, и это надежно, потому что ты точно знаешь, какой будет результат.
Михаил Парамонов
Эксперт Bataline по поисковому продвижению
Отправоено несколько скринов дизайна будущего сайта заказчику для утверждения. Заказчик присылает в ответ:
— Да. Мы разочарованы. Картинки не щёлкаются, затемнения картинок не работают, видео не играет и даже не щёлкаются ссылки!
Роман Баталин
Руководитель отдела продаж
— В шапке сайте должна быть красивая и большая иллюстрация на тему леса и охоты, потому что все охотники очень любят разглядывать картинки, а потом читать.
Мария Грох
Руководитель проекта ihunter
— Меня интересует разработка сайта-визитки. На нем должна быть возможность заказывать товары, оплачивать кредитной картой, регистрироваться, добавлять фотки и переписываться с друзьями.
Алексей Зуев
Специалист отдела социальных медиа Bataline
— А вам дизайнер, который логотип рисовал, кроме этой картинки точно ничего не оставлял? нам просто нужен вектор для работы, jpg не подходит.
— Не, ну там был файлик, но он не открывался и я его удалила...
Михаил Парамонов
Эксперт Bataline по поисковому продвижению
Отправить заявку Задать вопрос эксперту
5 причин заказывать разработку сайта в Bataline
Задай вопрос эксперту по разработке сайтов
Денис Баталин креативный директор
  • Вопрос от клиента:
    Как лучше всего контролировать сотрудников, работающих на фрилансе? Проблема, с которой мы часто сталкиваемся — ощущение, что сотрудники вместо того, чтобы работать, видимо развлекаются.
  • Вопрос от клиента.:
    Какие креативные инструменты вы используете в работе?
Поделитесь нами:
Или напишите нам: Написать

Напишите нам несколько слов о вашем проекте и оставьте, пожалуйста, контактную информацию. Мы свяжемся с вами немедленно!

Сообщение отправлено.