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

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

В мобильной версии был виден только календарь статей, немного рекламы и часть блока "популярные статьи". Этого, очевидно, недостаточно.  У пользователя, откуда бы он к нам не пришел, должна быть возможность выбора, что ему смотреть, а тут её совсем не было. 

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

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

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

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

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

Полный макет:

Адаптивный модуль макета:

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

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

Разумеется, это потребовало совершенно иных, чем ранее, подходов к верстке. Пришлось напрочь отказаться от таблиц и перейти к DIVам (блочным элементам) с их проблемами, связанными с непредсказуемостью работы и необходимостью создания дополнительных классов в таблицах стилей CSS, а зачастую даже с объектно-ориентированным подходом. Но это было интересно  и потому проблем не вызвало. Не остановили нас и слабые, поначалу, знания в области верстки HTML-документов. Сейчас все можно почитать в интернете и мы почитали. 

Будущим веб-мастерам желаю удачи. Все не так сложно, как кажется. Главное - старание и упорство. Запуск нового дизайна - в ближайшие дни... Счастливого всем ноября!

Ссылка на проект