]]>eTXT]]>


]]>]]>

Адаптивный дизайн – это про вас? Проверьте свои сайты!

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

 

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

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

 

А теперь проще. :) Вы когда-нибудь проверяли, как выглядит ваш блог на мобильных устройствах? Понятно, смартфон и планшет считаете ненужным баловством, поэтому и посмотреть не удосужились. Но есть другой путь – это воспользоваться сервисами, выдающими скрины сайта с мобильных устройств. Они, конечно, не могут точно показать внешний вид на мобильном оборудовании, но общее представление дают. Идеальное тестирование может быть только на настоящих девайсах.

 

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

 

Как создать мобильную версию сайта? Теория.

 

Для этого нужно прописать стили для каждого девайса индивидуально, например, создать файл mobile.css или добавить в основные стили. А так как постоянно появляются электронные новинки, эта задача становится весьма непростой.

 

  • Для изображений использовать свойство CSS max-width, указав 100%.
  • Свойство CSS media queries меняет расположение элементов на страницах. С помощью этого свойства указываются стили для каждого разрешения экрана индивидуально.
  • Нужно упростить структуру сайта, навигацию, убрать крупные элементы, рекламу.

 

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

 

Сервисы проверки вашего сайта на адаптивность. Как выглядит блог на экранах планшетов и смартфонов с горизонтальным или вертикальным экраном.

 

Сервис http://webmark.com.ua/mobile

 

Возьмем для примера блог на старой теме и посмотрим скрины ниже:

В iPhone вертикально 320 x 480: 

Отображение сайта на iPhone

В iPhone горизонтально 480 x 320:

Блог в iPhone горизонтальном 480 x 320:

В Android вертикально 240 x 320:

В Android вертикально 240 x 320:

В Android горизонтально 320 x 240:

В Android горизонтально 320 x 240:

В Android вертикально (новый) 295 х 515:

В Android вертикально (новый) 295 х 515:

В Android горизонтально (новый) 515 х 295:

В Android горизонтально (новый) 515 х 295:

В iPad вертикально 768 x 1024:

В iPad вертикально 768 x 1024:

В iPad горизонтально 1024 x 768:

В iPad горизонтально 1024 x 768:

В Kindle вертикально 600 x 1024:

В Kindle вертикально 600 x 1024

В Kindle горизонтально 1024 x 600:

В Kindle горизонтально 1024 x 600

 

Сервис http://ami.responsivedesign.is/

Наглядный скрин, где вы видите одновременно 4 изображения с разными разрешениями экрана.

4 изображения с разными разрешениями экрана.

 

Сервис http://deviceponsive.com/

Тоже простой сервис. Красивые реалистичные изображения. Вы можете даже воспользоваться прокруткой на любом из устройств.

Мобильная версия сайта

 

Сервис http://quirktools.com/screenfly/

Разнообразие вариантов с моделями устройств, разрешением и ориентацией экрана. Изменение происходит моментально.

Модели устройств, разрешения, ориентация экрана.

В выше перечисленных онлайн сервисах скрины кэшируются.

 

Мобильный эмулятор http://www.mobilephoneemulator.com/

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

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

 

В инструментах гугла проверки загрузки страниц есть тоже возможность просмотра новых версий мобильного дизайна. По итогам тестирования, в гугл и mobilephoneemulator.com удобнее проводить исследования.

 

Инструменты Google для работы с сайтами - PageSpeed Insights

 

Проверка загрузки страниц сайта на всех устройствах: ]]>http://developers.google.com/speed/pagespeed/insights/]]>


Как видим из результатов теста, эта тема вордпресс не рассчитана на мобильных пользователей.

Для исправления этой ситуации можно предположить два решения.

Первое – поменять тему, адаптированную к мобильным устройствам.

Второе – поставить специальный плагин, делающий мобильную версию сайта. В этом случае, дизайн и навигацию можно будет сменить на упрощенные.


Проведем эксперимент и установим плагин WPtouch.

 

WPtouch Mobile Plugin – плагин вордпресс

Скачать бесплатно ]]>http://wordpress.org/plugins/wptouch/]]>

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

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

Посмотрите, как стал выглядеть сайт после активации плагина с минимальной настройкой цвета ссылок на белом фоне. 

Мобильная версия сайта

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

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

Настройки плагина WPtouch

Если вы забыли, как создается произвольное меню в вордпресс, то идите во вкладку «Внешний вид» - «Меню».

Посмотреть все внесенные изменения можно только в хроме/сафари. В этом случае, вы реально можете пощелкать по всем кнопочкам.

Адаптивный дизайн

Посты теперь хорошо читаются и ничего лишнего на экранах нет.

Пользователю удобно читать на смартфонах

Остались два вопроса открытыми:

  1. А как же реклама? Ее тоже желательно показывать мобильному посетителю.
  2. Второй вопрос, что выбрать: упрощенную версию или полную, но адаптированную к разным расширениям и моделям девайсов.

В упрощенной практически нет графики и есть только список ссылок на статьи и разделы. Нет ракламы и баннеров.

В полной мобильной версии макет остается визуально тем же со всей графикой и рекламой.

Адаптивный макет ли мобильная версия. Что выбрать?


 

Хотелось бы найти и для друпал такое быстрое, легкое решение в виде модуля. Если кто-то уже нашел его, поделитесь и со мной, пожалуйста! :)

А я пока в раздумьях о вариантах решения. Что думаете по этому поводу? Лучше просто или красиво? Плюсы, минусы?

 

Комментарии

5

Адаптивный дизайн как говориться нам строить и жить помогает в век прогресса технологий особенно технологий производства экранов мониторов для компьютеров планшетов смартфонов . ведь сейчас на рынке находиться несметное количество различных гаджетов и у каждого вида будь то ноутбук или планшетный компьютер либо телефон имеется разрешение экрана причем у каждого свое мало того также имеется на рынке и много различных систем от всеми известной windows до скажем tizen . Так вот адаптивный дизайн сайтов по средствам плагина вордпресс помогает справиться со всем этим разнообразием и грамотно масштабировать сайт для отображения на экранах как стационарного устройства так и на мобильном гаджете

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

Вот и я задумалась. Ещё и мобильники с рекламой... Но когда полная версия со всей графикой - как то лучше смотрится и объёмнее что ли.

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

Сейчас в основном идут шаблоны "премиум" или даже бесплатные адаптированные под мобильные . Сейчас существует множество сайтов для адаптации под мобильные телефоны и планшеты.

Добавить комментарий

Plain text

  • HTML-теги не обрабатываются и показываются как обычный текст
To prevent automated spam submissions leave this field empty.
CAPTCHA
Действительно ли вы человек?

Навигатор по интернету

Узнать простую, но эффективную систему для наращивания трафика. Плюс эта книга с правами перепродажи. 

Узнать подробнее!

Создание сайта

Сделать веб-сайт по приемлемым ценамЗаказать создание сайта под ключ. Цена: недорого.





Если вам понравилась статья, вы можете ]]>подписаться на RSS]]> или E-mail рассылку. Для получения обновлений по электронной почте, введите ваш e-mail адрес в эту форму:

Введите Ваш email:

Подпишись с ]]>FeedBurner]]>

Другие сервисы почтовых рассылок