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

Главные вкладки

Проверил десяток сайтов, выбранных случайным образом из справочника компаний, размещенных на ВЛ.РУ, итог удручающий - 7 из 10 ресурсов не соответствуют требованиям  Google на удобство просмотра на мобильных устройствах. Чем это им  грозит? С 21 апреля not mobile frendly сайты будут понижаться в выдаче поиска. Кроме того, сайты теперь будут помечаться особым образом. Поэтому, даже когда два конкурирующих ресурса будут находиться рядом, пользователь, зашедший в Интернет с мобильного устройства, с большей вероятностью выберет тот, который удобно просматривать на смартфоне или планшете. А ведь число людей, пользующихся мобильным интернетом всё больше и больше - на момент написания статьи 53%. Но и это не всё - статистика показывает, что адаптированные к мобильным сайты имеют более высокую конверсию, во многом потому, что у них лучше юзабилити. Ниже, на примере сайта друпал.ру я покажу, что адаптивный дизайн - это не так страшно, как считают некоторые веб-мастера и администраторы сайтов, упорно не желающие переходить на адаптивную вёрстку. Цель - сделать сайт  удобным для просмотра пользователями на мобильных устройствах, без горизонтальной прокрутки экрана и масштабирования. Я не буду углубляться в технические вопросы, а покажу принципы создания адаптивного дизайна. Вот как сайт выглядит сейчас.

3column.jpgКак мы видим, сайт имеет трехколоночную структуру с шапкой и подвалом во всю ширину, резиновую ширину контента и более-менее корретно отображается на мониторах и планшетах в горизонтальном положении, а вот на тех же планшетах в вертикальном положении и на смартфонах сайт просматривать неудобно, так как контент вылезает за пределы экрана. Для адаптации контента под разные разрешения будем использовать синтаксис @media.

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

Далее, для смартфона, убираем колонку слева тоже вниз, таким образом изменив макет страницы на одноколоночный. Меню "O drupal" и форму поиска, чтоб они не вылезали за пределы экрана, сдвигаем вниз и влево. В блоке с приветствием много текста - делаем часть его скрытым и раскрывающимся без перезагрузки. Ширину изображений делаем 100%. Текстовые ссылки в анонсах статей заменяем на иконки. Вот что получам в итоге, посредством CSS и незначительныx доработок шаблона темы.

Планшет Смартфон
Без имени-1.jpg Без имени-2.jpg
Дата:
28/04/2015 - 01:30

Похожие записи

С 21 апреля Google будет понижать в выдаче сайты, не соответствующие понятию mobile-friendly

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

Адаптивный дизайн увеличит конверсию вашего сайта на 40% и более

С 21 апреля 2015 года компания Google начала полноценно использовать mobile-friendliness, как критерий для ранжирования сайтов. Уже сегодня сайты, работающие на технологии адаптивной верстки, лучше...

Адаптивный дизайн как ключ к успеху

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

Исследование рынка веб-разработок в России 2010-2011

Источник: Записки друпалурга и сеошника CMS Magazine & Рейтинг Рунета представляют итоги очередного исследования рынка веб-разработки. В этом исследовании обобщены данные опроса,...