РАБОТАЮ ВО ВСЕХ ГОРОДАХ РОССИИ

ВРЕМЯ РАБОТЫ С 9:00 ДО 20:00

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

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

 

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

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

Сервис https://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

 

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

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

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

 

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

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

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

 

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

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

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

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

 

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

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

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

 

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

 

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

 

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


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

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

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

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


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

 

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


 

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

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

 

Комментарии

5

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

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

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

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

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


* Нажимая на кнопку "Отправить" я соглашаюсь с политикой конфиденциальности

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

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

]]>eTXT]]>

Сервис анализа и проверки траста xt сайтов в Яндексе