До недавнего времени почти все люди для доступа в интернет использовали ноутбуки и настольные компьютеры (ПК) и соответственно все сайты по умолчанию создавались для этих устройств, т.е. размеры текста, картинок и вообще всё информационное содержимое адаптировались для комфортного восприятия именно на больших экранах. Сейчас же большинство людей (по данным Google) заходят в интернет не с ПК или ноутбуков, а со своих мобильных устройств, экраны которых значительно меньше. Соответственно работать с такими сайтами на планшетах и тем более мобильных телефонах стало очень неудобно, необходимо все время совершать дополнительные действия, такие как масштабирование и скроллинг в стороны, чтобы просматривать все содержимое страницы.
Помимо данной проблемы сайты с фиксированной шириной имеют и множество других, самая неприятная из которых появилась совсем недавно, в середине 2015 года, когда поисковые системы, такие как Google, начали «отдавать приоритет» в результатах поиска тем сайтам, которые оптимизированы для работы с мобильными устройствами. Это означает, что при прочих равных условиях сайты адаптированные для работы с мобильными устройствами будут «показываться раньше» в списке результатов поиска, чем те, которые такой адаптации не и имеют.
Адаптиацию дизайна сайта под мобильные устройства можно реализовать тремя способами:- Дополнительно разработать мобильную версию сайта
- Создать мобильное приложение, позволяющее работать с сайтом.
- Разработать адаптивный дизайн сайта.
Во всех трех случаях посетители сайта смогут комфортно им пользоваться с мобильных устройств. Следует, однако, отметить, что указанные способы имеют достаточно существенные отличия. Поговорим более детально об их плюсах и минусах.
Плюсы мобильной версии сайта
Плюс только один - поскольку мобильная версия является отдельным сайтом, то она может быть абсолютно другой по внешнему виду и иметь какие-то свои функциональные особенности.
Минусы мобильной версии сайта
- Стоимость разработки приравнивается к стоимости создания нового сайта, т.к. по сути она таковой и является. То же самое относится и к сроку разработки.
- Так как отдельный сайт, то будут появляться дополнительные денежные и временные затраты на его обслуживание и продвижение в поисковых системах.
- Создание/редактирование товаров или статей должны проходить одновременно на обоих сайтах (мобильная и обычная версии), что вызывает некоторые неудобства в их обслуживании.
Плюсы мобильного приложения
Тут также только один положительный момент - внешний вид и управление содержимым сайта соответствует уже привычному для пользователя интерфейсу его мобильной операционной системы.
Минусы мобильного приложения
- Стоимость и сроки создания достаточно велики
- Необходимо создавать и поддерживать сразу несколько версий для каждой популярной мобильной ОС (Android, iOS, Windows Phone)
Плюсы адаптивного дизайна
- Стоимость и сроки ниже, чем в предыдущих способах.
- Нет необходимости в найме дополнительного персонала для обслуживания еще одного сайта или мобильного приложения т.к. сайт всего один.
- Нет дополнительных затрат на поисковое продвижение и контекстную рекламу.
- Нет затрат на постоянную поддержку и совершенствование, как это бывает в мобильных приложениях с выходом новых версий мобильных операционных систем.
- Адаптация внешнего вида и содержимого сайта может быть настроена не только на меньшие (чем ПК или ноутбуки) размеры экрана (мобильные устройства), но и на большие, например, для телевизоров с 4к панелями. И для этого также не понадобится создавать отдельные приложения (под разные SmartTV) или новые версии сайтов.
Минусы адаптивного дизайна
Все вышеописанные минусы других способов в данном случае отсутствуют. Единственный возможный минус адаптивного дизайна - при загрузке сайта на мобильных устройствах, объем загружаемых данных будет таким же как и на ПК. А так как мобильный интернет обычно менее скоростной, то время загрузки страниц будет не очень комфортным. Но если адаптивный дизайн создается совместно с грамотной программной доработкой самого сайта, то даже от этого минуса можно избавиться.
Из вышеизложенного можно сделать вывод, что наиболее универсальным и финансово выгодным способом в большинстве случаев является разработка адаптивного дизайна. Давайте разберемся, какой дизайн можно назвать адаптивным (или «отзывчивым», от англ. «responsive»). Дизайн, который в реальном времени подстраивается под любой размер экрана и позволяет комфортно взаимодействовать с содержимым сайта, может быть назван адаптивным. Под понятием "в реальном времени" подразумевается, что при любых изменениях размеров экрана содержимое страницы будет незамедлительно реагировать на него и подстраиваться для лучшего восприятия, например, при изменении ориентации (повороте) планшета или мобильного телефона. Ниже приведен конкретный пример того как выглядит одно и тот же содержимое сайта на разных экранах.
Стоимость и время создания адаптивного дизайна сайта
Как и стоимость, время зависит от множества факторов, таких как сложность дизайна, его функциональные особенности, временные рамки, устанавливаемые заказчиком и более точно может быть вычислена при наличии четкого технического задания. В зависимости от типа работ минимальные время и стоимость будят примерно такими:
Создание адаптивной версии уже существующего дизайна - от
5500 грн.
(1-2 р. дня)
Разработка нового дизайна + его адаптивная верстка - от 10200 грн. (4-5 р. дней)
Для заказа или просто расчёта стоимости адаптивного дизайна именно вашего сайта, необходимо просто оставить онлайн заявку.
Как заказать адаптивный дизайн сайта?
Есть несколько способов это сделать:- Вы можете связаться с нами по телефону (см. внизу страницы), рассказать о своем проекте и согласовать с нами все детали работ.
- Заполнить заявку на нашем сайте, указав базовую информацию о вашем проекте.
- Или же отправьте нам email, где подробно опишите, что именно вам необходимо, а также прикрепите к письму все сопутствующие материалы, которые вы сочтете важными.
Какие этапы разработки нового адаптивного дизайна сайта?
После ранее описанной процедуры заказа выполнение разбивается на 2 этапа:- Отрисовка самого дизайна (картинки):
- Работа начинается после того как вы оплачиваете стоимость дизайна (обычно около 50-60% от всей стоимости)
- Создается дизайн сайта с тестовым содержимым (текст, фото, видео, и т.д.) под несколько размеров устройств (телефоны, планшеты, ПК). Результаты предоставляются в виде картинок.
- После утверждения дизайна заказчиком, мы переходим к этапу верстки (создание из картинки нормальной, интерактивной версии на основе HTML/CSS/JS)
- Верстка дизайна
- Далее вы оплачиваете оставшиеся 40-50% от общей стоимости и мы приступаем к верстке.
- Для личной проверки на разных типах устройств клиент получает ссылку на рабочий дизайн
- После окончательного утверждения клиент получает все исходные файлы сверстанных шаблонов (html,css,js) и по желанию все исходные файлы самих дизайнов в формате (обычно .sketch или .psd)