Здравствуйте, уважаемые читатели! Я много времени провожу в Интернете и посещаю различные сайты: блоги, интернет-магазины, коммерческие проекты и т.д. Поскольку моя деятельность связана с сайтостроением, то я постоянно оцениваю все попадающиеся мне веб-ресурсы. Мне интересны:

  • дизайн,
  • юзабилити,
  • оптимизация,
  • наполнение,
  • мобильная версия,
  • различные фишки и т.д.

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

Однако не все могут похвастаться адаптивностью. Более того — даже среди сайтов, имеющих мобильный вариант, тяжело найти проект, который был бы на 100% оптимизирован под смартфоны и планшеты. Основная проблема – плохое юзабилити, абсолютно не продуманное для пользователей портативных устройств.

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

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

Как сделать мобильную версию?

Есть два основных способа:

  1. Разработка отдельного сайта, целиком оптимизированного под смартфоны, и расположенного на поддомене (например, m.site.ru). Когда пользователь открывает страничку, происходит определение типа устройства, и показывается либо десктопная, либо мобильная версия.
  2. Адаптация существующего ресурса под различное разрешение (адаптивный или, как ещё говорят, отзывчивый дизайн плюс адаптивная вёрстка). При этом основной контент автоматически подстраивается под ширину экрана.

Существует ещё один вариант – динамическая вёрстка. Но он используется гораздо реже, поэтому выделять его не будем.

Адаптивная вёрстка в последнее время применяется в сайтостроении всё чаще, так как имеет множество преимуществ:

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

Более подробно об адаптивных сайтах я писал ЗДЕСЬ.

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

Сайт веб-студии «Три Дабл Ю», на котором вы сейчас находитесь, создан именно по такой технологии.

Порядок разработки адаптивной версии

С чего же начать адаптацию сайта под мобильные устройства? Выделим несколько этапов:

  1. Разработка прототипа будущей адаптивной версии. На этом этапе необходимо продумать, как страницы будут выглядеть на смартфоне и планшете. А именно: какие блоки и элементы стоит вынести на первый план, как будут оформлены страницы и т.д. Составляется техническое задание для дизайнера и верстальщика.
  2. Адаптивный дизайн. Прототип, созданный ранее, получает своё визуальное оформление. Рисуются элементы, характерные для мобильных устройств: меню «гамбургер», компактные иконки и т.д.
  3. Вёрстка. На основании разработанного дизайна осуществляется адаптивная вёрстка имеющегося сайта.
  4. Запуск и тестирование. После окончания работы нужно протестировать работу сайта на экранах с различными разрешениями. Это можно сделать с помощью специальных сервисов, но наилучший вариант – найти несколько смартфонов и планшетов и посмотреть на результат вживую.

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

Кроме этого, практически для всех CMS существуют готовые адаптивные шаблоны (темы оформления), которые можно найти в Интернете (они могут быть как платные, так и бесплатные) и установить на свой сайт. Вы получите адаптивность, однако в большинстве случаев её придётся дорабатывать, чтобы обеспечить максимальное удобство для владельцев портативных устройств.

Всё-таки решили не «копаться» в кодах самостоятельно, а заказать мобильную версию у специалистов? Наша веб-студия предлагает услуги по адаптации вашего веб-сайта под мобильные устройства. Стоимость работы оценивается индивидуально.

Чтобы узнать подробности и сколько это стоит, свяжитесь с нами по контактному телефону или напишите через форму обратной связи на странице «Контакты». Обязательно укажите адрес своего ресурса!

Будем рады вам помочь!

С уважением, Сергей Чесноков, руководитель веб-студии