Talik

Адаптивный дизайн против Мобильных версий сайта

Адаптивный дизайн против Мобильных версий сайта


Адаптивным («отзывчивым», Responsive) называют дизайн, который проектируется и разрабатывается таким образом, что сайт становится совместимым с любым устройством, которое может быть использовано для работы в интернете. Это не означает, что сайт должен иметь мобильную (wap) версию. Ведь все мобильные устройства такие разные! Разнообразие это хорошо, потому, что оно делает мир ярким, но это в конечном итоге может свести дизайнера с ума, пока он будет делать и настраивать макет для каждой модели и марки. Здесь понадобятся оперативные усилия по разработке. К сожалению, или к счастью, необходимость гибкости в макетах в наше время уже существует.

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


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

Чем такой подход лучше Адаптивного дизайна?

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

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

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

Адаптивный дизайн против Мобильных версий сайта


Вот только данный шаблон уж очень простой, сделанный скорее для галочки...

А вот, как данную проблему мы видим со своей стороны

на основе хака от Генри Хофмана новая концепция - 4 шаблона для разных типов устройств

* mob - шаблон для телефонов и Opera Mini
* smart - шаблон для смартфонов обрабатывающих ява-скрипт (iOS, android)
* tablet - шаблон для планшетов
* standart - шаблон сайта по умолчанию для десктопов

Для веб-браузера Opera Mini независимо от платформы, на которой он работает, в силу своей природы невозможно исполнение анимированных jQuery скриптов (да и любых других интерактивов). Поэтому, шаблон для Опера Мини и обычных мобильников (не смартфонов) лучше всего подойдет немного переработанный под свои нужды стандартный мобильный шаблон из комплекта к DLE

Адаптивный дизайн против Мобильных версий сайта


Шаблон для смартфонов, как и писалось выше, имеет смысл стилизовать под интерфейсы популярных мобильных операционных систем.
Для подобных экспериментов крайне удобен набор UiUiKit (Universal iPhone UI Kit)

в самом простом (черновом) варианте сайт может выглядеть так

Адаптивный дизайн против Мобильных версий сайтаАдаптивный дизайн против Мобильных версий сайтаАдаптивный дизайн против Мобильных версий сайтаАдаптивный дизайн против Мобильных версий сайта
кликнуть для просмотра


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

Адаптивный дизайн против Мобильных версий сайта


прототип подобного интерфейса можно скачать на сайте http://metroui.org.ua/

Плиточный интерфейс для планшетов очень перспективен. Майкрософт не зря на него ориентирует пользователей.

Еще несколько скриншотов в качестве прототипов

Адаптивный дизайн против Мобильных версий сайта
метро-стиль

Адаптивный дизайн против Мобильных версий сайта
плитки в стиле Google Play


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

Например, популярная RSS читалка flipboard

Адаптивный дизайн против Мобильных версий сайта


Ну, а если посмотреть интерфейс Opera Mini для iPad,- так это просто готовый шаблон. Бери и верстай.

Адаптивный дизайн против Мобильных версий сайта
Адаптивный дизайн против Мобильных версий сайта



Что в итоге

Остается только подготовить стандартизированные шаблоны для смартфонов и планшетов, добавить к сайту на DLE необходимый хак, и при посещении ресурса, умный скрипт сам будет подсовывать посетителю наиболее удобную версию сайта.
Бета-версия хака переключения шаблонов можно проверить по адресу http://forblond.ru

Адаптивный дизайн против Мобильных версий сайта



PS

Если у вас сайт работает на WP - то для него уже есть великолепный плагин мобильной версии.

бесплатный вариант предлагает версию для iPhone

Адаптивный дизайн против Мобильных версий сайта


а на сайте разработчки, есть расширенная версия с поддержкой iPad

Адаптивный дизайн против Мобильных версий сайта