Мобильный трафик растёт и занимает, в среднем, уже около 25% от всех посещений. Если раньше потеря этих посетителей была незначительной, то сейчас это каждый 4 или 5 пользователь. Думаю, статистику приводить не надо. Мы плотно и серьезно занялись разработкой новой мобильной версии виджета . Собрали весь опыт предыдущих ошибок и неделями тестировали результаты. Повторюсь, что мы разрабатывали мобильный виджет, а не улучшали собственный сайт. В результате собрали список самых смертельных ошибок в мобильной версии сайта. Прошлись по ошибкам мобильного дизайна и мобильной верстки. Все эти ошибки убивают конверсию мобильного трафика. И самое время обратить на это внимание:

1. Слишком длинные формы захвата.

Это настоящий убийца конверсии на любом сайте! Особенно к этому чувствительны мобильные версии, так как заполнять анкеты на телефоне, крайне, не удобно. Избавляйтесь от них.
На примере видно, насколько грамотно поступили ребята из Тинькоф банка, которые разбили длинную заявку «на кредит» на шаги. Заполнив всего 4 поля, посетитель станет лидом и, если он отвалится на втором шаге, то контакты его останутся.

2. Номер телефона компании указан без +7 или в виде картинки.

Это просто адский ад! Есть особое место в аду для таких сайтов, когда вместо 1 клика требуется запоминать номер и потом самостоятельно его вводить. Чёрт! А если я еду за рулем?

3. Использование Flash на сайте или контент, который нельзя воспроизвести на мобильном.

Желательно для мобильной версии полностью исключить такой контент. Он не будет нормально работать и вызовет много трудностей у посетителей. Видео не пойдет, игра не заиграет, а особая анимация в меню разъест мозг. Яблочные устройства ios вообще не поддерживают Flash анимацию. Удаляйте лишнее, зачем усложнять просмотр.

4. Виджеты и поп-апы на сайте, которые не адаптированы под мобильные.

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

Как правильно проверять виджет и на что обратить внимание, смотрите в коротком видео-обзоре:

5. Отсутствие адаптированной мобильной версии. Кроссбраузерности и кроссплатформенности.

Какие плюсы от наличия мобильной версии?
Во-первых, поисковые системы отдают предпочтения в выдаче. Так google помечает сайты отметкой «Mobile friendly»:

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

Существуют 3 ключевые проблемы скорости сайта - это размер, расстояние и виджеты. Обычно, для мобильного пользователя не требуются какие-то специальные эффекты на сайте, подойдет обычная верстка сайта без «наворотов». Дополнительно экран мобильного телефона, чаще всего, обладает низким разрешением, поэтому для мобильных пользователей можно «отгружать» меньшие по размеры изображения (и использовать более прогрессивный формат, например, WebP).

Для решения проблемы расстояния нужно убедиться, что хостинг сайта нормально доступен из сетей основных мобильных операторов. Оптимальным будет размещение в хорошем московском (или региональным - для региональных проектов) датацентре, который заявляет хорошую связность с сетями мобильных операторов. Зарубежный хостинг мало подходит (и имеет ряд проблем со скоростью передачи данных из-за границы).

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

9. Ошибочный редирект. Отсутствие перехода на полную версию сайта.

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

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

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

10. Автозаполнение. Включение набора цифр.

Конверсия растет, если мы уменьшаем сопротивление для клиента. Каждое поле можно сделать более удобным для заполнения. Для этого прописываем соответственно:

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

Как это сделать:
Сделайте иконку размером 180px на 180px (без закругления), а на сайте добавьте тег

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

Высокой конверсии вашей мобильной версии сайта!

Стационарные ПК уже давно не являются единственным источником информации. Находясь в движении пользователь также стремиться быть в курсе всего необходимого, что может предложить глобальная сеть интернет. Текущая ситуация такова, что актуальность мобильных версий ресурса становится неоспоримой. За последнее десятилетие мобильные гаджеты перешли из категории «предметов роскоши» в категорию «предметов обязательной необходимости». Коммерческие ресурсы для сохранения уровня конверсии должны чутко реагировать на такие изменения. Мобильная версия сайта стала неотделимой частью ЛЮБОЙ интернет платформы реализующей товары или услуги.

Статистика неумолима, она сообщает, что за октябрь-ноябрь 2016-ого года доля посещений Интернета посредством мобильных гаджетов составила значительную цифру – 51%. То есть, более половины всего трафика – это трафик, генерируемый с мобильных устройств: смартфонов, планшетов, телефонов.

Интересное замечание — в России например статистика больше направлена в пользу десктопа. Причина — самый популярный поисковик в РФ — Яндекс — имеет самую низкую долю мобильных пользователей.

Но тенденция к росту доли мобильного трафика есть и у Яндекса, значит скоро мы будем стоять на пороге “мобилизации сайтов” — верстальщикам будет хватать работы…

Более того, 80% процентов людей, которые в принципе посещают Интернет, являются владельцами смартфонов. Даже клиенты, которые посещают проект при помощи стационарного компьютера, в следующий раз могут сделать это с телефона. И остаться недовольными.

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

В результате, дизайн и текст, модули и блоки – все отображается некорректно. Теряется вся суть дизайна, нарушается юзабилити (удобство), пропадает маркетинговый акцент, невозможно грамотно донести до клиента УТП (уникальное торговое предложение). Сайт просто не выполняет свои функции.

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

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

Проанализируйте Вашу целевую аудиторию (ЦА)
Прежде чем перейти к вопросу создания корректной мобильной версии сайта, необходимо тщательно изучить собственную аудиторию. Создание мобильной структуры – это комплексный подход, в котором необходимо учесть множество факторов влияющих на успешную оценку пользователями. Поэтому, нужно знать все аспекты Вашей ЦА. Статистика сообщает, что чем ниже возрастная категория аудитории, тем более вероятен тот факт, что посещение ресурса будет происходить ТОЛЬКО с мобильной версии.

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

Типы мобильных версий сайта
Итак, оптимизация мобильной версии сайта возможна посредством следующих вариантов:

1. Создание отдельной версии сайта с собственным URL. Фактически – это поддомен ресурса, который является полноценным двойником основного сайта. Правда, зачастую с сильно сокращенным функционалом. Такое решение обладает несколькими плюсами: возможность коррекции контента на каждом сайте отдельно, идеальное отображение и отсутствие необходимости в компромиссном дизайне. Однако, для пользователя такой вариант не самый удобный. Ему придется запоминать отдельный адрес, что может привести к путанице. Для владельца проекта есть и свои недостатки – необходимость отдельного администрирования нового сайта, финансовые затраты. Да и ввиду совершенствования CSS, отдельная мобильная версия становится все менее продуктивной;

2. Самый простой способ адаптации к мобильным гаджетам – снабжение ресурса внешними плагинами. Плагин — это программный модуль, которые расширяет возможности движка сайта. Решение дешевое и удобное, но нефункциональное. Даже лучшие плагины все равно содержат массу ошибок, всплывает некорректное отображение страниц. Примером может быть плагин WP Mobile Edition для WordPress CMS, соответственно. Решение не подходит для компаний с серьезным каналом трафика;

3. Разработка мобильного приложения. Это весьма удобное решение для пользователя. Приложение разрабатывается под конкретное ПО (IOS, Android). В результате, пользователь работает с наиболее привычным для себя функционалом. Правда, для этого необходимо само приложение скачать. А убедить пользователя в том, что необходимость посещения данного ресурса для него настолько важна, что он должен установить внешнее ПО (программное обеспечение) – задача сложная. Поэтому, зачастую такое решение используется, как дополнительная мера при уже существующей полноценной мобильной версии сайта;

4. Адаптивный дизайн. Если задуматься, для чего нужна мобильная версия сайта в принципе, то легко прийти к выводу, что это упрощение в первую очередь для клиентов обладающих ПК и смартфоном ОДНОВРЕМЕННО. Поэтому, если пользователь посещает ресурс с разных устройств в разное время, адаптивный дизайн – лучший выбор. Это более трудоемкое решение. Но оно позволяет создать ресурс, который автоматически подгоняет визуальную картинку под любую ширину экрана, и пользователь всегда видит корректное отображение информации.

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

Оптимизируйте размеры текстов на ресурсе
Существует множество противоречивых мнений об объемах текста, особенно это актуально для посадочных страниц. Текущий средний объем зачастую упирается в значение: 2000 слов. Однако, является ли он оптимальным?

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

Во-вторых, современная статистика указывает на то, что лаконичные тексты обладают более высокими показателями конверсии. Для пользователей с мобильных устройств посадочные страницы (лендинги) на 2000 слов – это слишком крупный размер текста. Поэтому, стоит его сокращать, искать золотую середину между посетителями с ПК и смартфонов. Рекомендуется уменьшение текстов на лендингах до 1000 слов. И соответственно, стоит сделать все страницы сайта более лаконичными. При этом, подобное решение может предполагать полной пересмотр всего семантического ядра.

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

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

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

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

Это очень важно, поскольку мобильный пользователь хочет четко видеть основные тезисы, которые ему предлагает текст! Особенности мобильной версии сайта предполагают специфическое форматирование и структурирование, которое полностью избавляется от «полотен текста». Посмотрите на структуру одного из текстов сайта компании «Seoquick».

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

HTML compressor, который корректирует размеры скриптов и самого кода на странице;
. JavaScript compressor, сжимающий скрипты Java;
. CSS compressor, соответственно, работающий с таблицами стилей.

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

Не пренебрегайте обычными методами, такими как работы с самим кэшем браузера. Кэш браузера — сохраненная копия виртуальной страницы, которую пользователь уже посещал. Постоянно тестируйте скорость загрузки ресурса посредством специальных сервисов. Неплохо смотрится в этой роли PageSpeed Insights или .

Оптимизируйте дизайн
Речь не об адаптации дизайна, а о его упрощении. Требования к мобильной версии сайта, в первую очередь, как раз и заключаются в простоте и лаконичности. Громоздкие элементы, которые служат лишь для визуальной составляющей: тени, градиенты – затрудняют загрузку и в принципе уже выходят из моды. Достигнуть того же эффекта можно посредством банальной игры с цветом.

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

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

Увеличивают вес страницы, а мы помним, насколько важна быстрая загрузка для мобильной версии сайта;
. Могут отображаться неправильно на мобильной платформе или в мобильном браузере (это зависит от самого плагина);
. Понижают страницы в релевантности (так как из-за увеличения веса страницы снижается ее уровень юзабилити).

В идеале, ресурс должен отказать от плагинов в принципе. Если это не приведет к потере функциональности или аспектов дизайна. Это планка, к которой ресурс должен стремиться.

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

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

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

Как я и обещал, пришла пора рассказать Вам, что такое «Адаптивная верстка» и как сделать мобильную версию сайта под смартфоны и планшеты, а так же понравиться поисковым системам!

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

Да и трафик с гаджетов растет все больше и больше, день за днем! Веб-мастеру необходимо это учесть...

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

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

Вроде бы понятно объяснил?! Кто что не понял? Пишите в комментариях, вместе обсудим.

Так вот, совсем недавно, у меня был отпуск, решил побольше статей написать полезных, реализовать какие-нибудь интересные идеи, в общем провести отпуск с пользой, а не лежать на диване, хотя как хотелось м-м-м….

В один из прекрасных дней мне на электронную почту (впрочем все его получили) пришло такое сообщение:

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

Мобильный сайт WordPress с помощью плагинов!

Как оказалось такие плагины существуют и в принципе выполняют свою функцию! Но, проверку Google — на удобство просмотра сайта с мобильного устройства, они не проходят ! Уж не знаю почему, но Google упорно отказывается видеть изменения, перепробовал множество вариантов... По этому смысла их использовать нету...

Если Вы все же хотите использовать для этой цели плагины, то самые лучшие из них это:

WPtouch Mobile Plugin - Этот плагин мне понравился больше всего, все довольно просто и понятно, мой блог корректно отображался без каких либо косяков!

Не буду описывать каждый плагин, сами опробуете и определитесь:

• MobilePress;
• WordPress Mobile Pack;
• Duda Mobile Website Builder;
• WordPress Mobile Pack;
• WordPress PDA & iPhone;
• WPmob Lite;
• WPtap News Press;
• WP Mobile Detector;
• WiziApp.

Еще минус плагинов в том, что они иногда подглючивают, например захожу через смартфон — все хорошо, повторил еще раз или обновил - показывает обычный сайт! Какая то загадка прям

Короче меня это не устроило и я продолжил искать лучшее решение!

Затем, решил поручить эту работу специалисту какому-нибудь на бирже фрилансеров, но после долгих раздумий решил научиться адаптивной верстке и сделать все сам! В конце концов я же разработчик сайтов и пришла пора повышать квалификацию…

Если кому интересно, то переделка сайта в адаптивный, стоит примерно от 5.000 рублей и выше... Не советую нанимать горе-специалистов, которые берут дешевле — скупой платит дважды! Да и на отзывы обращайте внимание...

В общем начал я изучать эту тему, сначала теория, затем практика на своем блоге! Ну и в принципе научился, оказалось ничего сложного в этом нет, теперь мой блог адаптивный и подстраивается под любой экран и я рад как слон… Зайдите с любого смартфона ко мне на блог и Вы сами все увидите Найдете косяк — дайте знать...

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

Варианты создания мобильного сайта?

Существует, на сколько мне известно, три направления. Разберем каждую технологию по отдельности, с какими плюсами и минусами мы можем столкнуться?!

Отдельная версия сайта — Это своего рода отдельный облегченный сайт, созданный специально для просмотра на мобильных устройствах или с низкой скоростью интернета..сайт или http://mobile.сайт. В данном случае используется перенаправление.

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

• Дублирование контента — так как один и тот же контент будет и в основной версии и в мобильной. Возможно спасет мета-тег rel=canonical, но есть масса и других проблемм.
• Срез функционала — как не крути но такой сайт будет урезанной копией основного сайта, отсюда совсем другие показатели статистики. Да и основная масса посетителей не любит различного рода ограничений и всегда переходит на основной сайт...
• Перенаправления — как известно, различного рода редиректы негативно сказываются в сфере SEO.

Технология RESS — Тут используется вычисление на стороне сервера, смотря с какого устройства был заход — создается тот или иной макет (html и css). Называется это чудо — адаптивный веб-дизайн + специальное программное обеспечение на стороне сервера (RESS — Responsive Web Design и Server Side Components).

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

• Определение — чтобы выдать нужную версию сайта, нужно точно определить устройство посетителя, а с этим как я слышал не всегда все гладко.

Адаптивная верстка (веб-дизайн) — Эта верстка сайта подстраивается под любое разрешение экрана путем его определения с помощью CSS3 Media Queries. Как правило используется один и тот же ресурс, который содержит в себе различные варианты для отображения на смартфонах, планшетах и компьютерах...

• Сохранность — не зависимо от устройства используется один и тот же контент и набор html кодов;
• Единый URL — для различных макетов используются одни и те же адреса и контент, нет дублей.

• Скорость загрузки — так как загружаются все элементы и скрипты основного сайта, даже если они скрыты.
• Навигация — сложность в создании продуманной мобильной навигации.

Делаем адаптивную верстку самостоятельно

Для своего блога я выбрал адаптивную верстку по нескольким причинам:

1. не нужно нарушать целостность основного сайта, блога;
2. используется один единый контент, одна база данных и так далее;
3. Лично для меня простота внедрения (потребуются знания html и css).

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

Во первых нужно прописать мета-тег в :

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

Так же, если мы добавим еще и maximum-scale=1.0, user-scalable=no — то этим, мы запретим масштабирование, но я не рекомендую этого делать, пусть человек сам решает, может у него проблемы со зрением...

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

Это дело нужно будет исправлять с помощью Media Queries в файле стилей CSS, выглядит параметр так:

@media screen and (min-width:240px) and (max-width:720px) {
тут теги и атрибуты
}

То есть, эти стили будут применяться браузером от минимальной ширины 240px до максимальной 720px устройства! Если больше или меньше этих значений, то будут применены основные стили сайта. Все просто!

И вот таким макаром мы прописываем стили под разные разрешения устройств. Например:

• смартфоны вертикально — от 240 до 340, от 341 до 420;
• смартфоны горизонтально и некоторые планшеты вертикально — от 421 до 540, от 541 до 670;
• планшеты вертикально — от 671 до 800;
• планшеты горизонтально — от 801 до 1024

Если нужно показать какой-либо элемент: display:block, если же спрятать: display:none;

Чтобы узнать как выглядит сайт или блог на различных устройствах есть замечательные сервисы:

• http://quirktools.com
• http://www.emulateurmobile.com/
• http://webmark.com.ua

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

На этом у меня все! Надеюсь моя статья Вам реально помогла, в благодарность поделитесь ей =)

На клиентском сайте записал пример работы адаптивной верстки, если так и не поняли принцип ее работы обязательно смотрим. До скорой встречи! Пишите комментарии...

С уважением, Владимир Савельев

Премиум-уроки от клуба webformyself

Это новый революционный продукт в области обучения сайтостроительству! Все лучшие видео-уроки собраны в одном месте и разделены на категории: WordPress, Joomla, PHP, HTML, CSS и JavaScript... База постоянно пополняется и уже сейчас в ней более 200 уроков! Всего за один год - Вы сможете стать опытным веб-мастером "с полного нуля"!

Подробнее

Доброго времени суток всем друзьям и читателям – сайт!

В этой статье Вы узнаете, как сделать мобильную версию сайта.

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

Конечно, дословно все его слова я цитировать не буду. Единственное, что дало мне пищу для ума, это последнее предложение:

— Денис, Вам срочно нужна , чтобы не потерять старых и получить новых посетителей!

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

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

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

То, что я нашел, оказалось готовым решением от всемирной компании G o o g l e .

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

Классно, правда? Лично я в восторге от этого генератора!

Ладно, оставим все эмоции для комментариев, пришло время творить.

Для создания мобильной версии сайта переходим по ссылке на сервис — Howtogomo.com .

Последнее время на сервисе наблюдаются изменения. Вот ещё одна ссылка на этот ресурс www.dudamobile.com .

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

Они могут немного отличаться, но смысл тот же.

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

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

Сделав свой выбор, переходим к следующему шагу, нажав синюю кнопку «NEXT »:

Здесь Вы увидите 5 пунктов настроек. Если у Вас есть много свободного времени, то Вы досконально можете изучить каждый из них. Там особенного ничего нет. Изменение цвета шрифта, ссылок, заголовков и т. д. Всё, как в любом графическом редакторе доступно и понятно. Поэтому в отдельности описывать каждый пункт, смысла нет. Опять жмём на уже знакомую кнопку и переходим к дальнейшим действиям:

Во вновь открывшемся окне Вам нужно заполнить небольшую форму. Вписываем в неё свой действующий E-mail и два раза одинаковый пароль (любой). После этого нажимаем на синюю кнопку с надписью «SAVE MY SITE », что в переводе означает «СОХРАНИТЬ МОЙ САЙТ »:

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

В открывшемся окне копируем специальный скрипт и вставляем его перед закрывающим тегом < / head> в файле header.php Вашей активной .

Также Вы можете воспользоваться плагином (). Для этого внизу есть специальное с инструкциями разных движков и хостингов:

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

Для примера вот Вам моя – .

А Вы уже сделали мобильную версию своего сайта?

На сегодня это всё. До новых статей…

С уважением, Денис Черников!

Сергей Арсентьев

Создание мобильной версии сайта на WordPress за 10 минут

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

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

Однако все изменилось с тех пор, как Google всерьез взялся на поддержку мобильных устройств. Долгое время Google "пугал" своих вебмастеров примерно следующими сообщениями:

Мы проверили 27 стр. Вашего сайта и обнаружили, что 100% из них неудобно просматривать на мобильных устройствах. Из-за ошибок на этих 27 стр. у пользователей складывается плохое впечатление о ресурсе. Эти страницы не считаются оптимизированными для мобильных устройств с точки зрения Поиска Google, и они будут отображаться и ранжироваться в результатах поиска на смартфонах соответствующим образом.

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

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

Результат проверки должен быть вот таким:

По аналогии проверяйте мобильную версию сайта в панели вебмастера Яндекс: https://webmaster.yandex.ru/site/

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

У меня кстати один сайт клиента по SEO в инструменте Google проверку проходил, а в Яндексе - нет! Так что обязательно проверяйте и там, и там.

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

Важно! У вас может быть уже создана мобильная версия, да только Google и Яндекс может это не понять, так как вы ему запретили индексацию служебных папок в файле Robots.txt.

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

Так, по крайней мере считает Google и Яндекс, а это значит, что мобильная версия становится стандартом. Но это еще далеко не все плюшки, которые вы получите от использования "маленькой" версии сайта или блога.

Вот примерный список преимуществ, которые получает сайт с мобильной версией:

• приоритет в Google и Яндексе (да, да, Яндекс теперь тоже анализируется мобильную версию в новом интерфейсе панели Вебмастера, апдейт от Яндекса, скорее всего, не за горами)
• улучшение поведенческих факторов: ведь посетителям комфортнее работать с мобильного устройства на сайте, который имеет мобильную версию, поэтому они на таких сайтах проводят больше времени, открывают больше страниц и легче получают информацию, уменьшая показатели отказов и улучшая поведенческие факторы, которые дополнительно влияют на положение в поиске.
• скорость загрузки: в мобильной версии, как правило, отброшены лишние второстепенные детали, чтобы сайт грузился максимально быстро - это также улучшает поведенческие факторы и статистику сайта.
• повышение конверсий: на удобном сайте люди быстрее и стабильнее добираются до нужных целей (положить товар в корзину, оформить подписку, стать зарегистрированным участником, прочитать запись в блоге, кликнуть на рекламу и так далее).
• солидность: корпоративные сайты, имеющие мобильную версию придают их компаниям небольшой дополнительный положительный имидж.
• отношение пользователей: пользователи быстрее привыкают к хорошему, поэтому блоги и сайты, имеющие мобильную версию, имеют больше шансов получить постоянную лояльную аудиторию, чем их менее развитые конкуренты.

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

Но как это сделать?
Неужели придется верстать все заново и платить за это тысячи рублей? Если ваш сайт сделан на WordPress CMS, то все можно сделать быстро и бесплатно.

WordPress: мобильная версия сайта за 5-10 минут!

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

Что вам нужно теперь сделать:

После установки вам станет доступны настройки плагина в левом меню. Там есть такие пункты: базовые настройки, темы и расширения, параметры темы и меню. Рассмотрим все подробнее.

Базовые настройки

Название и автор сайта
Что будет написано вверху вашего сайта в мобильной версии. Рекомендую использовать что-то короткое, буквально на 20 знаков, так как примерно это количество умещается целиком. Галочку " " можно снять.

Определение региона.
Русский в большинстве случаев подойдет.

Начальная страница.
Можете вручную задать отдельную главную страницу для мобильных устройств (например, меньшую по объему или с другим текстом). Очень удобно, но я оставил все по умолчанию.

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

Параметры темы: "Общие"

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

Вкладка "Общие" позволяет задавать такие параметры как:

Блог.
Количество записей в списке блога. Тут же можно исключать рубрики и теги (то есть выводить не все записи в мобильной версии). Я вывожу всё, это по-моему логично.

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

Вот смотрите, в первом случае - с эскизами, во втором - без.

Мне больше понравилось с эскизами, тем более, что места они занимают немного.

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

Страницы
У меня комментарии на страницах не выводятся, поэтому выводить не

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

Включить wpcf7_contact_form (плагин формы обратной связи)
Включить dilemma (голосование да/нет)
Включить social-locker ()
Включить wysijap (плагин для электронной подписки)

Форма регистрации
Так как на моем блоге нет возможности регистрации, то не включал.

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

Параметры темы: "Фирменная символика"

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

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

Эмблема сайта
Это логотип. Если установить логотип сайта, то он будет показываться вместо названия. Так как это название, я уже писал выше, короткое, то мне больше понравилось использовать лого.

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

Оформление
Выберите шрифты, которые вам больше нравятся. Я поставил "Шрифты браузера". По идее должно быстрее грузиться.

Общий доступ.
Установите галочки "Показать ссылки для обмена" и "Показывать совместные ссылки на страницах", это позволит показывать в мобильной версии внутри поста ссылки на соцсети Facebook, Twitter, Google+ и отправить ссылку на пост по емейл. Это удобно и красиво.

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

Параметры темы: "Закладка пиктограмм".

Это кнопка для iPhone или Android, которая будет использоваться, если пользователи сохранят ссылку на ваш сайт себе на мобильное устройство.

Я взял за основу PSD-макет иконки iPhone и быстро создал себе нужную кнопку в Photoshop.

Если вы пока не дружите с этим редактором, то можете бесплатно создать иконку для Apple вот в этом сервисе .

Меню

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

Тут все просто: вы можете выбрать или уже предустановленные иконки (проще всего) или загрузить свои иконки на прозрачном фоне и добавить уже их.

Важно! В момент добавления никакого уведомления об успешной загрузке не происходит, поэтому просто грузите сколько нужно, а потом переходите в Menu Icons и выбирайте набор значков "Пользовательские значки" - там будут загруженные ранее иконки.

Вот посмотрите, как у меня получилось настроить:

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

А знаете ли вы, что можете проверить получившуюся версию сайта для мобильных устройств на iPhone5 без самого телефона? Для этого можно просто воспользоваться сервисом "Эмулятором iPhone", например iphone5simulator.com

Выводы и итоги

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

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

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

Яндекс с августа 2016 года теперь тоже определяет мобильную версию в панели вебмастера, очевидно, что этот поисковик также будет отдавать приоритет в поиске для сайтов, имеющих мобильную версию.