Перестаньте создавать обычные сайты. Адаптивный веб-дизайн

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

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

Кому нужен адаптивный сайт?

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

Изменится ли сайт?

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

Составление сметы

Смета веб-ресурса с таким дизайном имеет ряд отличий по сравнению со сметой, которая составляется для обычного веб-ресурса. Главные отличия заключаются в следующем:

• Увеличивается время разработки (примерно на 30 процентов), так как нужно дополнительное время для создания прототипа.
• В смете появляется новая графа, где требуется описать поведение различных элементов на мобильных устройствах.
• Увеличивается время верстки и тестирования (примерно в 1.5 раза).
• В два раза увеличивается отладка верстки.

Из-за этого, соответственно, происходит увеличение стоимости разработки сайта. Однако видя все преимущества адаптива, клиент поймет, почему цена более высокая.

Если же сайт создается не «с нуля», и при этом его владелец не хочет менять текущую версию дизайна, нужно объяснить ему, что верстку придется полностью переделать, а потому технологический процесс будет осуществляться с нуля. Текущую версию веб-ресурса придется привести к новой сетке, поэтому она немного изменится в любом случае.

Составление сметы во многом определяется тем, какой путь адаптации выбран. Для составления сметы нужно, чтобы:

• проектировщик создал прототип с учетом структуры текущей версии сайта (время работы увеличивается в два раза по сравнению с базовой сметой);
• дизайнер создал один или два различных проекта для одной страницы (разработка внешнего вида галереи на мобильных гаджетах, меню и т.д.).

Верстка осуществляется так же, как при создании веб-страниц «с нуля».

Разработка сайта

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

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

• открытие нумерной клавиатуры на гаджете, если возможен ввод исключительно цифр;
• уменьшение объема изображений, доступных для скачивания (чтобы пользователь не тратил время на скачивание фотографий по 2 Мб);
• прохождение страницами гугл-теста.

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

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

Итоги

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