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

imageПриветствую Вас дорогие друзья! Очень долго ничего не писал, был занят адаптацией сразу нескольких сайтов. Вот теперь в этой статье я поделюсь с Вами, что это такое, зачем и какая у меня получилась адаптация. Принимаю заказы на адаптацию сайтов с системой управления WordPress, а также и лендинги, визитки сайтов. Стоимость адаптации 5000 р, срок выполнения от 3-х до 10- дней. На сегодняшний день 10-15% из 100 сайтов имеют адаптацию, и судя по статистике 30-40% трафика приходится на мобильный трафик, и эта цифра постоянно увеличивается. Практически каждый сейчас пользуется интернетом на смартфонах, планшетах. Сайты не оптимизированные под мобильные устройства теряют своих посетителей, а также и потенциальных покупателей, большой процент отказов с мобильного трафика, плохие поведенческие факторы и еще куча минусов, и все это из за неудобства использования сайта. В поисковой системе Google 21 апреля 2015 года был запущен новый алгоритм ранжирования сайтов с приоритетом на  адаптивный дизайн для мобильных устройств. На сегодняшний день очень актуальной является тема адаптивного дизайна, и Google нас оповестил о важности адаптивного сайта, прислав веб-мастерам вот такое письмо: Сайт https://blogorazvitie.ru/ не оптимизирован для мобильных устройств Веб-мастеру сайта https://blogorazvitie.ru/ Мы проверили 46 стр. Вашего сайта и обнаружили, что 100% из них неудобно просматривать на мобильных устройствах. Из-за ошибок на этих 46 стр. у пользователей складывается плохое впечатление о ресурсе. Эти страницы не считаются оптимизированными для мобильных устройств с точки зрения Поиска Google, и они будут отображаться и ранжироваться в результатах поиска на смартфонах соответствующим образом. Если с телефона в поиске Google найти свой сайт и если он адаптирован, то под ним будет написано — для мобильных. Вскоре Google начнет понижать позиции не мобильных сайтов в выдаче. Я думаю, что и Яндекс от Google не отстанет, тем более, что у Яндекса происходят еженедельные «Апдейты».  С помощью инструментов вебмастера Google можно увидеть все страницы, которые по мнению гугла содержат ошибки с адаптацией. До оптимизации своего сайта под мобильные у меня было 46 страниц с ошибками, после снизилось до 1 страницы, и то потому что эта страница была сделана с помощью плагина WPpage, позже доберусь до нее. image Проверить адаптацию сайта Вы можете на этом сервисе responsinator_com, сервис предоставляет возможность посмотреть сайт при разных расширениях, от мобильных телефонов до ПК. Также это можно сделать и через кабинет вебмастера Google, выбрав страницу с ошибкой и нажав — проверить текущую версию. Или просто потяните за край браузера и посмотрите будет ли Ваш  сайт сужаться равномерно с размером браузера. Как видно на скриншоте сайт без адаптации, снизу появился скролл, на мобильных устройствах такой сайт удобством не блещет. Адаптация сайта под мобильные устройства В интернете можно найти массу вариантов адаптации сайта, но не все они являются качественными. Можно установить плагин, который практически без всяких настроек создаст Вам отдельную версию сайта — мобильную. Но этот вариант я не рекомендую! Все таки это плагин, который нагружает Ваш сервер, во вторых нет возможности сделать нужный Вам дизайн. Есть фирмы, которые на заказ Вам сделают мобильную версию сайта с индивидуальным, уникальным дизайном — опять же цена будет за это удовольствие от 20 тысяч и выше. Если Вы только завели свой сайт, то можно установить резиновый шаблон, в интернете их множество как платных так и бесплатных. Конечно можно и сменить шаблон на уже взрослом сайте, но не советую это делать, так как придется много чего править (что встанет криво, что вообще не будет работать). Самый подходящий вариант мобильного сайта, это сделать его адаптивным под различные размеры окна, делается это с помощью внесения изменений в файлы шаблона сайта. Ниже я немного расскажу что нужно сделать для адаптации сайта, а также покажу некоторые сайты, которые я адаптировал на заказ. Расписывать каждый шаг я не буду, рассказываю только основное, потому что все шаблоны разные. Представьте каким Ваш  сайт должен быть на мобильных устройствах, а лучше нарисуйте Ваш будущий мобильный сайт (основные элементы страницы, меню, различные кнопки, сайдбар, подвал сайта). Без этой строчки работать адаптация не будет. С помощью фаербага нужно узнать какие размеры установлены для тех частей сайта, которые надо адаптировать. В зависимости от шаблона блоки могут называться по разному, но основные это — wrapper, header, container, wrap, content, sidebar, footer. Браузеры распознают медиа-запросы, где указано, как браузер должен отображать сайт при определенном размере. В основном сайт содержит основной контейнер «wrapper», но может и по другому называться, и если например, ширина этого блока «width: 900px», то в медиа-запросе нужно установить размер в процентах, для данного блока ставим 100%, он должен быть на всю ширину экрана: @media screen and (max-width: 1024px) { #wrapper: 100%; } Если ширина экрана будет меньше чем 1024рх, то сработает данный запрос, и блок будет адаптироваться к экрану. Основные медиа-запросы (1024 — ноутбуки, планшеты, 768 — планшеты, ipad, некоторые смартфоны, 480 — смартфоны, телефоны, 320 — телефоны, 240 — телефоны с маленьким разрешением). Для изображений, видео и фреймов прописываете вот такие медиа-запросы: img {max-width:100%;height: auto;} embed, object, iframe {width: 100%;} Теперь все медиа-файлы на сайте будут растягиваться под размеры экрана. Также и для других блоков прописываете запросы. Если есть сайдбар справа или слева от контента, то тут методом вычисления задаем размеры также в процентах. Например общая ширина родительского блока 900рх, ширина блока с контентом 580рх, а сайдбара 300рх, то считаем по формуле: 580/900*100 = 64% — для контента 300/900*100 = 33% — для сайдбара Если сайдбар имеет отступ например от левого края родительского блока —  margin-left: 590px; , то расстояние также считайте по формуле и ставьте в процентах. Таким образом контент и сайдбар будут адаптироваться под размеры экрана. Когда установите размеры блоков под запрос в 1024рх, проверьте при каком размере экрана нужно устанавливать новые запросы с размерами. Делается это просто, при включенном фаербаге сужайте браузер, в верхнем правом углу будет написан размер текущего окна. Например, если при достижении экрана в 768рх блоки начинают наезжать друг на друга, то значит под этот запрос нужно высчитывать новые размеры и так далее до полного сужения браузера. На маленьких экранах сайдбар будет плохо выглядеть, для этого его нужно переместить под контент, а контент растянуть на всю ширину экрана. Делается это тоже просто. @media screen and (max-width: 480px) { #content {max-width: 100%; float: none;} #sidebar {margin-left: 0; width: 480px; max-width: 100%;} } Теперь когда сайт адаптируется под размеры экрана, займемся меню. Необходимо стандартную навигацию заменить на новую в виде кнопки. На своем сайте я сделал четыре кнопки, меню, страницы, подписка в виде иконки и выезжающий сайдбар. Все кнопки сделаны на HTML CSS, если разбираетесь в CSS томожете сделать кнопки любой формы и дизайна. За функционал кнопок отвечает небольшой скрипт. Для начала нужно скрыть основную навигацию на маленьких экранах, за навигацию обычно отвечает блок «navi», пишем в медиа-запросе такую конструкцию: @media screen and (max-width: 480px) { #navi {display: none;} } Для вывода меню используйте код, который ставите в то место где хотите видеть кнопку. Меню — Ссылка кнопки меню, ставите туда где хотите видеть кнопку Стили для кнопки меню: #touch-menu { background: linear-gradient(to bottom, #fff, #BCB8B6); float: left; width: 70px; height: 12px; text-align: center; } #nav a:hover { background: linear-gradient(to bottom, #BCB8B6, #fff); color: #101010; border-bottom: 3px solid #0000FF; } #touch-menu:hover { background: linear-gradient(to bottom, #BCB8B6, #fff); color: #101010; border-bottom: 3px solid #0000FF; } #touch-menu {display: none;} — скрываем на больших экранах @media screen and (max-width: 480px) { #touch-menu {display: block;} } Я Вам дал свои стили, которые можете переделать под свой дизайн. А вот это сам скрипт, он будет показывать меню при клике по кнопке: На данный момент эта версия рабочая. Я Вам выдал только малую часть того, что придется сделать для адаптации сайта, но общую суть думаю Вы поняли. Если соберетесь делать адаптацию самостоятельно, то в интернете масса информации на эту тему. Вот сайты, которые я делал на заказ, дизайном особо не отличаются, у клиентов особых условий не было, самое главное — то что сайты адаптированны к мобильным устройствам. Сайт Александра Крутицких.   Сайт Александра Крутицких.

Сайт Инны  Фельдман.   Для того чтобы посмотреть как они отображаются на разных мобильных устройствах, и как работает навигация сайтов, воспользуйтесь сервисом: www.responsinator.com Хотелось бы рассказать по больше про адаптацию сайтов для мобильных устройств, но эта информация и  опыт не поместятся в одну статью, это отдельный обучающий курс нужно создавать. На сегодняшний день агенства, которые занимаются разработкой сайтов, предоставляют такую услугу «адаптации сайта под мобильные устройства», но цены у них довольно высокие. Адаптация только главной страницы сайта — 5000 рублей (очень странно конечно, почему только главной) Адаптация WordPress сайта — от 7000 до 30000 рублей Полная адаптация сайта — от 10 — 15 тысяч до 50 тысяч рублей (как Вам такие цены?) Вот такие цены я нашел в интернете. Я Вам предлагаю сделать мобильную адаптацию всего за 5000 рублей. Если Вас интересует адаптация сайта под мобильные устройства, но сами не знаете как это сделать, то можете кликнуть по баннеру ниже и оформить заказ. Всю информацию по данной услуге можно будет прочитать на странице заказа. Также можете посмотреть цены на мои услуги и страницу с отзывами клиентов и портфолио. На этом я заканчиваю данный пост, надеюсь Вы узнали что то новое. Если будут вопросы пишите в комментариях или на почту. До новых встреч!!!

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

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

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

Мобильной версией сайта можно назвать отдельную верстку, которая максимально минимизирует нагрузку на сервер и уменьшает в несколько раз вес страницы. Единственный, как по мне, минус – это отдельная верстка. Цена за такой проект будет гораздо выше, временные рамки также увеличиваются. И такой вариант больше рассматривают те, у кого действительно большие проекты, где можно не экономить на разработке, потому что все делается для того, чтобы пользователю было удобно совершать покупки, т.е. все это окупится и пойдет только плюсом. Под эти цели обычно выделяют отдельный поддомен, к примеру – m.mysite.ru. В конфигурационный файл прописывают проверку на определение устройства, с которого заходит посетитель на сайт и в соответствии с полученным результатом происходит переадресация на прописанную цель. И если рассматривать тот вариант, что вы уже имеете сайт и хотели бы заказать мобильную версию, то здесь необходимо искать специалиста, который знает хорошо систему управления сайта (CMS) в качестве программирования и сможет с легкостью произвести натяжку нового мобильного дизайна.

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

Этот вариант гораздо проще, в несколько раз быстрее и менее затратен. Именно его я предлагаю всем своим клиентам и с уверенностью могу вам заявить, что его выбирают из-за ценовой политики. Допустим, у меня адаптация практически всегда занимает не более одного дня, в то время, как другие вам предложат от 3 до 7 дней. А разработку мобильной версии могут отдельные студии и вовсе предложить месяц. Хотя, тут временные рамки больше зависят от специалиста.

Итак, в чем же простота данного метода? Она заключается в том, что адаптация происходит методом медиа-запросов и стилизацией CSS. Основная работа заключается во взаимодействии с файлом стилей, где мы указываем определенные рамки, в которых будет отображаться или видоизменяться тот или иной блок верстки. Также, мы с легкостью можем отображать или скрывать, добавлять новые блоки с помощью скриптов в те места, где это не совсем удобно сделать версткой. Конечно, всегда приходится немного редактировать html, но эти правки минимальны и незначительны по сравнению с отдельной мобильной версией. Вот вам для примера один из адаптированных мной проектов:

Вывод: оба этих варианта достигают поставленной цели – делают сайт оптимизированным под мобильные устройства. Однако, цена их разнится в несколько раз. При заказе адаптива вам обычно понадобится заплатить не более 6 тысяч рублей, в то время как мобильная версия будет стоить примерно от 9. Все это связано с тем, что при адаптации по большей части затрагивается только файл стилей, в то время как мобильная версия требует нового дизайна, верстки и натяжки на CMS. Но в любом случае – решение за вами!

не скупись ставь лайк Подписка на обновления: подписаться в telegram

Вместе с этим советую почитать:

Сегодня востребованной проблемой становится адаптация сайта под мобильные устройства. Ещё каких-то 30 лет назад сложно было поверить, что компьютер и интернет будут в каждом доме, а в начале 2000-х никто не мог предугадать такой экспансии мобильных устройств на рынок. Если вы онлайн-предприниматель или просто ведёте блог, зарабатывая с рекламы – примите во внимание, что уже сейчас каждый третий пользователь в России заходит на ваш сайт с мобильного девайса, а в США данная цифра перевалила за 50 % ещё в 2014 году. Число мобильных юзеров будет только расти, поэтому если вы хотите максимизировать прибыль с вашего ресурса, прислушайтесь к советам и решениям, данным в статье.

Содержание

Что можно потерять, отказавшись от адаптации

Ответ один: конверсию и, как следствие, ваши средства. Почему так происходит? Тому есть три причины:

  • «Заботливые» поисковые системы. При заходе со смартфона или планшета, сайты, которые Google или Яндекс сочтут адаптированными под мобильные устройства, окажутся в выдаче поисковика выше устаревших десктопных версий. К тому же, их украсит пометка «для мобильных». Вряд ли вы когда-то листали дальше первой-второй страницы результатов поиска, ваши потенциальные посетители мало чем отличаются.
  • Лояльность пользователя. Даже если пользователь попадёт на ваш сайт, он не захочет на ходу целиться пальцем в маленькие ссылки, масштабировать страницу и раскрывать огромные вложенные меню. Он предпочтёт воспользоваться сайтом поудобнее, пусть и предложение вашей компании выгоднее.
  • Психология. Если ресурс удобен и понравился пользователю, он с большей долей вероятности сделает на нём что-то, т.е. повысит вашу конверсию.

Разобравшись с причинами и потерями, рассмотрим, как должен выглядеть хороший mobile-friendly ресурс, приспособленный к переносным гаджетам.

Признаки ресурса, адаптированного под маленькие экраны

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

  • Скорость загрузки. Никаких тяжеловесных шрифтов и огромных картинок, которые будут подгружаться ещё полминуты после открытия страницы. Не забывайте, что мобильная сеть является весьма нестабильной средой передачи данных, а значит скорость загрузки может варьироваться.
  • Лёгкая и понятная навигация. Только вертикальная прокрутка, максимальное использование площади экрана, основное меню сайта всегда под рукой. Не заставляйте посетителей прилагать усилия для связи с вами: разместите удобную кнопку звонка или хотя бы контакты в шапке.
  • Крупный интерфейс. Формы и кнопки должны быть достаточно большими по сравнению с десктопной версией, чтобы пользователь мог легко попасть в них.
  • Читабельный текст. Используйте CSS или различные плагины, чтобы текст не был слишком мелким на любых экранах.
  • Возможность воспользоваться полной версией. Не заставляйте пользователя сидеть с мобильной версии принудительными переходами: возможно, версия для десктопа ему покажется удобнее.

Как обеспечить скорость загрузки

Следует стремиться к значению в 2-3 секунды. Медленнее – это отпугнёт и большинство пользователей, и поисковик при ранжировании вашего сайта. Оценить скорость можно с помощью прекрасного инструмента Think With Google. Если результаты будут неутешительными, предпринять можно следующее:

  • Не раздувайте код страницы. Зачастую такое происходит по вине дизайнера, когда он сосредоточен только на внешнем виде сайта и слишком усложняет его макет. Напомните ему, что простота нынче в моде. Аскетичный интерфейс с одной кнопкой призыва к действию сам по себе приведёт к более высокой конверсии, а быстрота загрузки увеличит лояльность посетителей.
  • Оптимизируйте изображения. Почти две трети веса страницы – это картинки. Картинок не должно быть чересчур много. Альтернативный вариант: используйте сжатие. Самый быстрый способ – воспользоваться онлайн-сервисами, например, Compressor.io.
  • Меньше кастомных шрифтов. Во-первых, на загрузку необычных шрифтов тратится время, а затем браузер захлёбывается в тоннах CSS и JS-кода при рендеринге этих шрифтов. Можно использовать их в заголовках, но не для всего текста.
  • Минимизируйте код. Другими словами, удалите из него лишние участки, не влияющие на функционал. При наличии знаний можно сделать это вручную, но быстрее с этим справятся онлайн-инструменты, Minifycode.com. Для сайтов на WordPress существует плагин Better WordPress Minify.
  • Подключите «ленивую загрузку». Она загружает только ту часть сайта, которая сразу видна в окне, и подгружает остальное при прокрутке. Есть плагин Lazy Load для jQuery, для WordPress он называется BJ Lazy Load.

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

Mobile-friendly дизайн

Mobile-friendly (дружественный к мобильным устройствам) – это не просто отзывчивый веб-дизайн (Responsible Web Design), подразумевающий корректное и эстетичное отображение сайта на всех экранах. Помимо технических аспектов, необходимо учесть также психологию мобильного пользователя. Переносные гаджеты используются на ходу, поэтому сайт для них должен не повторять полную версию, а быть более упрощённым и оптимизированным:

  • Меньше текста и перегруженных форм. Упростите процедуры подписки, заказа товаров и т.п. Большое количество информации и кнопок отталкивает мобильных пользователей.
  • Расположение кнопки «call-to-action». Размещение кнопок на краях экрана вынуждают юзеров перехватывать устройство, что понижает конверсию. Помещайте ключевые элементы интерфейса в центр макета.
  • Сдержанные цвета. Разноцветные и пёстрые сайты отвлекают внимание пользователей, сбивая их с толку. Сделайте так, чтобы цвета помогали им, подсказывая, куда и когда нажать.
  • Учёт вертикальной прокрутки. Мобильные сайты читаются сверху вниз, в отличие от десктопа, где информация может быть распределена по всему экрану. Поэтому будет нелогичным размещение кнопки «Купить» перед информацией о продукте и его фотографиями.
  • Меньше подвижных элементов. Слайд-шоу, карусели изображений – всё это уместно на десктопе, но не в дороге, когда человек менее сосредоточен.

Резюмируя, можно сказать: главное в мобильных интерфейсах – минимализм, простота и ясность.

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

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

Если ваш сайт «крутится» на базе CMS WordPress, превратить его в мобильный можно всего лишь в несколько кликов с помощью различных плагинов. Вот некоторые из них:

  1. JetPack. Он входит в набор базовых плагинов, а включение адаптивного макета происходит всего в одно нажатие: зайдите в настройки плагина и поставьте галочку «Mobile Theme».
  2. WPtouch. Плагин добавляет красивые анимации и быструю загрузку страниц через AJAX. Pro-версия имеет расширенную админ-панель и бесплатную техподдержку.
  3. WP Mobile Detector. Создатели плагина заявляют о более чем 5000 различных устройствах в базе. Для каждого конкретного девайса в зависимости от разрешения экрана отображается своя тема, оптимизируются изображения. Предоставляются также инструменты аналитики.
  4. WordPress Mobile Pack. Поддерживает перенаправление по доменам, имеет встроенный переключатель между мобильной и десктопной версией, множество твиков в CSS, отдельную мобильную панель для администрирования.
  5. WP Mobile Edition. Очень похож на предыдущий, но здесь ещё и поддержка комментов от Disqus и автоматическое создание карты сайта, что улучшает позиции сайта в поиске.

Адаптивная верстка

Существует два подхода к созданию мобильного сайта. Первый – создать отдельную версию сайта с упрощённым макетом, такие версии как правило размещаются на поддоменах вида m.example.com. Второй – использовать адаптивную вёрстку, «резиновый макет», при котором элементы на странице автоматически меняют свой размер и местоположение в зависимости от разрешения или ориентации экрана. У второго подхода есть преимущества перед отдельной версией, а именно:

  • Использование адаптивного макета – официальная рекомендация от Google, такие сайты ранжируются выше.
  • Сайт выглядит одинаково на всех устройствах, что не вызывает диссонанса у пользователей и повышает юзабилити.

Если вы используете WordPress, то шаблоны с адаптивным дизайном можно найти в репозитории.

При самостоятельной вёрстке, можно использовать средства CSS и JavaScript для создания резинового макета, например:

  • CSS: max-width в процентах для заполнения окна браузера по ширине.
  • HTML-тег meta viewport с атрибутом initial-scale=1.0, тогда ширина картинок станет равной ширине экрана.
  • Использование дочерних файлов CSS для мобильной версии, чтобы «вытянуть» макет по вертикали для узких экранов и упростить его.
  • Медиазапросы в CSS3 могут использоваться для выборочного исполнения селекторов. К примеру, медиа-запрос с min-width: 480px может быть использован для применения стиля только если ширина окна больше 480px. Max-device-width позволяет определить ширину экрана устройства (полезно, если браузер открывается в оконном режиме). Медиазапрос по свойству orientation может помочь для выяснения ориентации устройства, и т.п.
  • Подгрузка нужной таблицы стилей в зависимости от разрешения может быть выполнена на jQuery (если media queries не поддерживаются).

Создание адаптированных кнопок

В мобильной версии сайта должно быть как можно меньше текстовых ссылок, потому что пользователям сенсорных экранов весьма сложно попадать по ним, особенно если ссылок много, и все они рядом. Замените ссылки на большие кнопки или специальные меню. Разные компании диктуют разные стандарты, например, по гайдлайнам от Apple минимальный размер элемента – 44х44 пикселя.

Вот пара плагинов для WordPress, которые помогут создать на вашем ресурсе удобную навигацию:

  • Standout Color Boxes and Buttons. Позволяет создавать разнообразные кнопки для навигации и меню.
  • Responsive Menu. Создаёт удобные иерархические меню для мобильных экранов.

Адаптация форм под мобильный трафик

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

  • Упрощайте: оставьте поля только для имени и e-mail, а все данные по регистрации высылайте автоматом на почту.
  • При заполнении форма не должна вынуждать пользователя что-либо масштабировать и вызывать сомнения, что именно надо вводить в то или иное поле.
  • Подписи к полям ввода следует размещать над ними, а не слева, где они вызовут необходимость использовать горизонтальный скролл.
  • Используйте возможности мобильного устройства, например, определение местоположения по GPS, вместо того, чтобы заставлять пользователя вводить его вручную.
  • Где уместно, проставьте значения по умолчанию, чтобы сэкономить время посетителя сайта.

Для форм на WordPress есть плагины: бесплатный SumoMe или платный OptinMonster, которые помогут создать гибкие формы ввода для вашего сайта.

Не забывайте про ненадёжность мобильного подключения! Если данные, введённые пользователем, пропадут из-за разрыва коннекта, он почти наверняка покинет ваш сайт. Используйте сохранение данных и AJAX-запросы для повышения надёжности.

Удобочитаемый контент для мобильных пользователей

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

  • Структурируйте текст. Самая важная информация должна располагаться в начале, на первом экране, а остальная может выходить из зоны просмотра.
  • Используйте крупный шрифт, по крайней мере, 15px.
  • Абзацы должны быть небольшими, не более 4-5 строк.
  • Не прибегайте к сложным и длинным предложениям, оптимальная длина для мобильного пользователя – до 70-80 символов.
  • Текст должен быть контрастным и не сливаться с фоном.

На странице не должно быть никаких элементов ActiveX, плагинов Silverlight или анимации Flash.

Все эти технологии не поддерживаются мобильными платформами, а Flash давно уже должен быть заменён на HTML5 даже в десктопных версиях. То же касается и форматов файлов: то, что вы предлагаете к скачиванию, должно открываться на большинстве смартфонов. Например, уместнее форматы PDF или PNG для документов, чем DOC, потому что просмотрщик файлов Word установлен далеко не у всех.

Оптимизация электронных писем

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

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

В отличие от браузеров, не все почтовые клиенты могут поддерживать «мудрёный» CSS. Поэтому везде, где это возможно, следует отдать предпочтение HTML. Если вы верстаете адаптивный двухколоночный макет, откажитесь от CSS float: left, а используйте HTML-атрибут align=”left”.

Заключение

Сегодня новые сайты должны разрабатываться согласно подходу mobile first: сначала разрабатываете мобильный макет, а потом уже десктопный. Если всё делается в обратном порядке, мобильным юзерам зачастую уделяется недостаточно внимания, в итоге вы теряете трафик и деньги. В статье мы рассмотрели основные правила и методы создания mobile-friendly ресурса.

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

Больше результатов…

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

Смотрите также:

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

1. JetPack

Начнем с самого простого и, пожалуй, самого эффективного способа сделать сайт на WordPress дружественным для мобильных устройств. Набор инструментов JetPack позволяет решить эту задачу нажатием всего 1 кнопки. Более того: он наверняка уже у вас установлен в числе других базовых плагинов. Если да – то просто кликните по ссылке «JetPack» в меню администратора сайта и перейдите на страницу модулей. Там надо активировать «Mobile Theme» — и всё готово.

2. WPtouch

Следующий по своей эффективности в списке бесплатных инструментов — плагин WPtouch. Его скачали уже более 4,3 млн раз. Он позволяет сделать красивый и быстрый мобильный сайт буквально за пару минут, при этом не написав ни строчки кода. Платная версия под названием WPtouch Pro предлагает еще отдельную админ-панель и поддержку в системе тикетов.

3. WP Mobile Detector

У этого плагина есть автоматическое распознавание обычных мобильников и смартфонов. В зависимости от этого сайт загружается в совместимой версии для каждого конкретного мобильного телефона или другого гаджета (с учетом разрешения экрана, диагонали и других параметров). Всего есть 7 предустановленных вариантов мобильной темы оформления. Также этот плагин автоматически меняет размер и разрешение картинок в зависимости от пользовательского дисплея. Кроме того, здесь есть свои виджеты и сбор статистики.

Основные возможности:

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

4. WordPress Mobile Pack

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

Также плагин включает:

  • переключатель между мобильной и классической настольной темой;
  • набор поддерживаемых и распознаваемых устройств, включая темы для Nokia и браузеров на WebKit;
  • настройку цветовой палитры по темам с поддержкой твиков в CSS;
  • автоматическую адаптацию картинок и разбиение постов и страниц;
  • мобильную панель администратора;
  • виджет мобильной рекламы, поддерживающий такие платформы как AdMob или Google’s Mobile Adsense;
  • мобильную аналитику;
  • виджет для добавления бар-кодов на сайт, чтобы быстро добавлять сайт в закладки на мобильном устройстве при просмотре сайта на большом экране настольного ПК.

5. WP Mobile Edition

По сути перед вами — брат-близнец предыдущего плагина. У него есть все те же фишки и опции, но есть еще поддержка системы комментирования Disqus и мобильная карта XML с собственным генератором для сайтов, что хорошо скажется на поисковой оптимизации. Также этот плагин создает мобильную версию на поддомене вида m.facebook.com, что хорошо для ускоренного кэширования и реализации поддержки мобильных cookie.

6. Wapple Architect Mobile Plugin

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

7. MobilePress

Довольно популярный и простой плагин, который поставляется с 2 темами и помогает дальнейшей разработке тем мобильными разработчиками.

8. Duda Mobile Website Builder

Плагин-конструктор Duda Mobile помог создать мобильные версии сайтов в том числе для таких проектов и изданий как Forbes, Huffington Post, NY Times. Он очень простой и быстро превращает ваш обычный сайт в мобильный. Работает со всеми темами оформления для движка WordPress и автоматически синхронизируется с вашим основным сайтом.

Источник: WPLift.com

Смотрите также:

9 лучших плагинов WordPress для Instagram 2021 года Как импортировать документы .docx из MS Word в WordPress Как вставить пример кода в записях и на страницах WordPress: 7 плагинов Алексей Шевченко редактор wpcafe Изучает сайтостроение с 2008 года. Практикующий вебмастер, специализирующий на создание сайтов на WordPress. Задать вопрос Алексею можно на https://profiles.wordpress.org/wpthemeus/ Сертификат ssl Вордпресс —> —>

Гугл декларирует, что учитывает в своем поиске оптимизацию сайта для мобильных устройств. Если вы добавили свой ресурс в google webmasters, то возможно у него появилась пометка “Сайт не оптимизирован для мобильных устройств”. Это означает, что нужно провести работу по улучшению видимости ресурса в глазах google и адаптировать сайт под мобильные устройства. Нижеприведенные инструкции применимы не только для WordPress ресурсов, но и для любых других движков.

Для проверки отображения сайта на адаптивность будем пользоваться сервисом google https://developers.google.com/speed/pagespeed/insights.

Указываем адрес сайта и жмем кнопку “Анализировать”. Видно, что для этого примера степень удобства для мобильных пользователей оценивается в 69 процентов, и кроме того, есть сообщение “Возможно, страница не пройдет проверку удобства просмотра на мобильных устройствах”. image

Ниже видна детализация проблем и ссылки на инструкции по их устранению.

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

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

Нажимаем ссылку “Как исправить” и видим следующий текст о необходимости указания тега viewport. imageПо ссылке “Настройте область просмотра” приведена статья, разъясняющая, как использовать этот тег. Детально разбираться с ним не будем. Просто воспользуемся указанием google о том, что на сайте в блоке head нужно указать инструкцию:

Добавляем тег на сайт и ради интереса проверяем после этого, как изменился показатель удобства для мобильных пользователей. imageВидим рост с 69 до 80%.

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

Далее смотрим проблему в красной зоне “Адаптируйте размер контента для области просмотра”. Проблема заключается в том, что гугл делает проверку для устройства шириной в 375 пикселов, а размер некоторых элементов сайта превышает этот показатель.

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

#wrapper {      width: 1000px;  }

wrapper – в данном случае это основной контейнер страницы сайта. Такой элемент, естественно, не помещается на экран шириной 375 пикселов. Также можно обнаружить и другие подобные инструкции для других элементов сайта.

Мы будем исправлять эту проблему с помощью следующего приема. Перепишем приведенные выше стили следующим образом:

#wrapper {      max-width: 1000px;      width: 100%;  }

Броузер при формировании страницы в качестве ширины элемента будет использовать минимальное значение из двух: max-width и width. В этом случае, если ширина экрана пользователя превышает 1000px, то будет использоваться значение 1000, а если ширина экрана меньше 1000px, будет использоваться значение, равное ширине экрана (100%).

Находим и переписываем таким образом все инструкции в наших стилях, где размер элементов превышает проверяемый google – 375x.

После внесения всех изменений проверяем сайт image и видим, что показать удобства стал 94%. Цель достигнута. Сайт будет восприниматься гуглом, как удобный для мобильных пользователей.

Рекомендую добавить еще 1 инструкцию в файл style.css

img, iframe {      max-width:100% !important;  }

Это для того, чтобы картинка и фрейм всегда помещались на экране.

Оцените статью
Рейтинг автора
5
Материал подготовил
Илья Коршунов
Наш эксперт
Написано статей
134
А как считаете Вы?
Напишите в комментариях, что вы думаете – согласны
ли со статьей или есть что добавить?
Добавить комментарий