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


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


Адаптивным («отзывчивым», 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

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


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


13 августа 2012  4 9 880   шаблон идея Версия для печати


Похожие публикации

Переключение шаблонов мобильной и настольной версии сайта в DLE

Хотя сейчас в моде исключительно адаптивные сайты, но они не всегда позволяют максимально эффективно решить задачу по адаптации контента под мобильные устройства. Зачастую проще сделать мобильную... читать далее

ШинДиск.Ру - интернет-магазин автосервиса

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

8 способов свести дизайнера с ума

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

МирТранспорта.ру - онлайн версия печатного журнала

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

Стартапы / Новая эпоха заработка в интернете — мобильные приложения

Дарю бизнес-идею молодым энергичным читателям. Современные мобильные устройства позволяют устанавливать приложения (apps на общеизвестном жаргоне) или виджеты (widgets на том же жаргоне). Эти... читать далее

Web-разработка / Верстка для мобильных устройств

Общая информация Так как мобильных устройств существует великое множество, то одна модель может поддерживать какие-либо возможности HTML/CSS, а другая наоборот — либо не поддерживать, либо... читать далее

Комментарии (4)

  1. #1 написал: TCSE
    Группа: Администраторы
    13 августа 2012 23:51

    в продолжения идеи.

    набросок главной страницы мобильного шаблона для планшетов на основе Опера Мини




    картинка кликабельна
    • 0

       

  2. #2 написал: dnklightdasha
    Группа: OpenID
    15 августа 2012 10:11

    Быстро протестировать сайт на адаптивность можно здесь
    http://plastilin5.com/tools/
    • 0

       

  3. #3 написал: TCSE
    Группа: Администраторы
    30 октября 2012 22:37

    полностью готовый шаблон для iPad специально для сайтов работающих на основе DLE-CMS реализован нашей студией.
    И никаких адаптивных полу-мер.





    • 0

       

  4. #4 написал: TCSE
    Группа: Администраторы
    13 декабря 2012 18:30

    в подтверждение правильности своей точки зрения "мобильная версия сайта для каждой платформы своя, лучше чем приложение" рекомендую почитать:

    50% прибыли в App Store и Play получают всего 25 разработчиков
    http://habrahabr.ru/company/apps4all/blo
    g/161431/


    Продвижение мобильных приложений
    http://habrahabr.ru/post/161981/

    Сколько стоит создать приложение или вся правда о деньгах
    http://habrahabr.ru/post/162121/
    • 0

       

Прокомментировать


@

  • bowtiesmilelaughingblushsmileyrelaxedsmirk
    heart_eyeskissing_heartkissing_closed_eyesflushedrelievedsatisfiedgrin
    winkstuck_out_tongue_winking_eyestuck_out_tongue_closed_eyesgrinningkissingstuck_out_tonguesleeping
    worriedfrowninganguishedopen_mouthgrimacingconfusedhushed
    expressionlessunamusedsweat_smilesweatdisappointed_relievedwearypensive
    disappointedconfoundedfearfulcold_sweatperseverecrysob
    joyastonishedscreamtired_faceangryragetriumph
    sleepyyummasksunglassesdizzy_faceimpsmiling_imp
    neutral_faceno_mouthinnocent

Архив сайта

Реклама на сайте вконтакте голоса другу . Ростов фото недвижимость ростов. . По информации: http://www.bayern-live.ru.