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

26.02.2019

И снова хорошая новость для владельцев сайтов на WordPress – есть плагины, которые создают мобильную версию вашего сайта на поддомене, например, WP Mobile Edition.

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

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

Что мы получим?

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

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

Еще по теме:

Есть вопросы?

Задайте их прямо сейчас, и мы ответим в течение 8 рабочих часов.

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

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

Немного теории

Большинство современных сайтов работают на основе той или иной системы управления контентом (Content management system - CMS) или по простому web движке. За внешний вид сайта в web движке, т.е. то каким его видят посетители ресурса отвечают так называемые шаблоны.
Шаблон - это, как правило, набор файлов определяющий внешний вид сайта. Для каждого движка используются свои шаблоны, но у всех них есть нечто общее - это файл(ы) с таблицами стилей CSS и файл(ы) отвечающие за разметку страницы, это может быть PHP, ASP и т. д. Возможны и более экзотические варианты, но в любом случае на выходе web движка будет CSS и HTML и возможно что-то ещё. Ну да я отвлёкся.

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

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

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

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

По большому счёту такой шаблон представляет собой облегчённый вариант полного, отличающийся по дизайну, размерами и расположением элементов.
Такое упрощение прежде всего связано с тем, что разрешение экрана современных смартфонов начинается, как правило, с 800x480 точек при размере экрана порядка 4"" дюйма.
Это значит, что примерно на этот размер и надо рассчитывать при разработке.

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

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

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

Настройка web движка

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

Для примера я покажу настройку Mobile Detector от BlackRed Designs, он имеет минимум настроек, и всё что необходимо сделать после его установки это опубликовать его и выбрать шаблон который будет использоваться для отображения страниц на мобильных устройствах.

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

Создание шаблона

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

Метатеги и масштабирование

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

Этот мататег должен быть расположен в разделе head рядом с остальными метатегами и выглядеть примерно следующим образом:

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

Помните, в самом начале я писал о том чтобы рассмотреть тот или иной элемент на странице на не оптимизированных сайтах частенько приходиться пользоваться зумом, приближая и отдаляя отдельные участки страницы? Так вот, параметр initial-scale=1.0 как раз устанавливает изначальное масштабирование страницы в 100%.
Если не указать мобильному устройству изначальный масштаб, то он может выставить его самостоятельно в зависимости от системы устройства, как то Android, iOS, Windows Phone, а также используемого браузера например Firefox, Chrome, Safari, Opera и т. д.
Лучше изначально избежать этого. Для кого же масштаб покажется не удобным смогут отмасштабировать его по собственному желанию, соответствующим жестом.

Границы сайта

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

body {
margin-top: 20px;
margin-left:100px;
margin-right:100px;
border: 1px solid #dfdfdf;
}

То для мобильной версии это уже потеря и так небольшого полезного пространства, которое лучше использовать на все 100%;

body {
width:100%;
}

Шапка

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

Header-search
{
text-align:right;
float:right;
}

На уровень ниже и расположить по левому краю:

Header-search
{
margin-top:5px;
text-align:left;
}

Меню

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

Topmenu ul li
{
display: inline;
}
Topmenu li a
{
display:block;
float: left;
}

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

Topmenu ul li {
display: block;
}
Topmenu li a {
display:block;
}

Шрифт

Как правило для полной версии сайта используется шрифт 12-13px:

p, li, dt, dd, legend
{
font-size: 13px;
}

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

p, li, dt, dd, legend
{
font-size: 16px;
}

Из этих же соображений выбирается размер шрифта и для остальных текстовых элементов, например так:

h1 {
font-size: 24px;
}
h2 {
font-size: 22px;
font-weight: normal;
}
h3 {
font-size: 17px;
margin-top: 5px;
margin-bottom:0px;
}
h4 {
font-size: 16px;
}

Изображения

В содержимом сайтов наряду с текстовой информацией постоянно встречаются изображения. Здесь я имею в виду не элементы оформления дизайна, а изображения которые встречаются в контенте, в содержании записей, статей и т. д.
Как я уже писал ранее, разрешение экрана современных смартфонов начинается с 800x480 точек. Это означает что размер изображения не должен превышать 480 пикселей, по скольку иначе оно не поместиться на экране и потребуется масштабирование.

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

img
{
max-width:100%;
height:auto;
}

Эта запись говорит, что ширина изображения не может быть больше 100% т.е больше ширины экрана, например в 480px. Вторая запись позволяет сохранить пропорции изображения.
В идеале для полной и мобильной версии желательно использовать разные размеры картинок, но это уже не решается средствами одного шаблона и требует более серьёзных средств.

Таблицы

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

table tr td
{
display:block;
}

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

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

Проверка результата, тестирование

Очевидно, что в процессе разработки шаблона правильнее всего проверять как он выглядит непосредственно на телефоне. Желательно на нескольких разных, под управлением разных систем: Android, iOS, Windows Phone, а также на нескольких браузерах Firefox, Chrome, Safari, Opera и т. д. Только так можно быть полностью уверенным что всё выглядит так как задумано.

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

Для проверки в среде iOS, для iPhone и iPod, существует специальная среда разработки от Apple – Xcode. С её помощью можно эмулировать практически любое яблочное устройство.

К сожалению Xcode работает только под Mac OS, и практически единственным вариантом запуска её на PC является создание виртуальной машины.

Довольно интересным средством проверки является Firefox OS Simulator, который является дополнением к браузеру Firefox. Загрузить его можно по адресу:
https://addons.mozilla.org/En-us/firefox/addon/firefox-os-simulator/

По сути здесь эмулируется полноценное устройство под Firefox OS.

Также в процессе разработки шаблона довольно полезно выдать свой обычный браузер за мобильный. Для FireFox это делается при помощи дополнения User Agent Switcher, установить которое можно от сюда:
https://addons.mozilla.org/ru/firefox/addon/user-agent-switcher/

При этом вы получаете возможность использовать довольно мощные средства веб разработки встроенные в сам FireFox.

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

По мимо всего прочего поисковик Google тоже должен проверить ресурс на его «мобильность», ведь только в этом случае сайт получит преимущество перед другими. Проверить всё ли нравиться поисковику можно по адресу:
https://www.google.com/webmasters/tools/mobile-friendly/

Для полной уверенности что Google всё устраивает желательно проверить все страницы сайта. Либо просмотреть пункт «Удобство просмотра на мобильных устройствах» в инструменте для web мастеров по адресу:
http://www.google.com/webmasters/

Заключение

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

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

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

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

Скорее всего, Поисковая система 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 — для различных макетов используются одни и те же адреса и контент, нет дублей.

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

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

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

не нужно нарушать целостность основного сайта, блога;
используется один единый контент, одна база данных и так далее;
Лично для меня простота внедрения (потребуются знания 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 уроков! Всего за один год - Вы сможете стать опытным веб-мастером "с полного нуля"!

Подробнее

Мобильный трафик растёт и занимает, в среднем, уже около 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 пунктов помогут вам улучшить мобильную версию сайта и сделать клиентов довольными. Некоторые из них могут быть уже известными и очевидными для вас, но не включить их в список самых смертельных ошибок было бы не правильно.

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

С началом эры бума мобильных устройств разработчики оказались перед выбором: оставлять ли мобильные версии своих сайтов наряду с «полноценными», или сайты должны стать адаптивными и самостоятельно подстраиваться под разные размеры экранов?

На текущий момент при построении мобильных версий сайтов существуют 3 основных способа их построения:

Адаптивный дизайн;
Отдельная мобильная версия сайта;
RESS (Responsive Design + Server Side).

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

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

Для реализации адаптивного дизайна обычно используются CSS3 Media Queries. В зависимости от размера экрана, пользователь будет видеть разную картинку:

@media screen and (max-width: 1600px) { div.for-example {width: 1500px;} } @media screen and (max-width: 1280px) { div.for-example {width: 1100px;} } @media screen and (max-width: 1024px) { div.for-example {width: 980px;} }

Преимущества адаптивного дизайна

Удобство разработки - при адаптивной верстке вся структура сайта автоматически подстраивается под различную ширину экрана. Для того, что бы получить рабочий продукт не нужно писать все с нуля - достаточно лишь подправить CSS и HTML… С учетом наличия фреймворков, подобных Bootstrap подобная разработка не является очень сложной при стандартной реализации. К тому же, поддержка такого продукта будет относительно простой задачей.
Один URL - избавляет нас от ненужных редиректов, и надобности пользователю запоминать адрес мобильной версии (пусть даже это просто приставка m.). Так же наличие единого адреса позитивно скажется на продвижении сайта, поскольку поисковикам будет «удобнее» работать.

Недостатки адаптивного дизайна

Разные задачи - типовые задачи «мобильных» пользователей крупных сайтов обычно отличаются от задач пользователей ПК. Если вы являетесь клиентом банка, то, скорее всего, в мобильной версии сайта вас будет интересовать очень ограниченный спектр информации - адреса ближайших отделений, банкоматов и т.д.
В целом, при адаптивной верстке самый распространенный подход - делать копию обычного сайта, реализовать в верстке под телефоны потребности всех групп целевой аудитории. Но тогда о юзабилити можно забыть. Нужные пяти процентам посетителей второстепенные разделы создадут неудобства для основной массы клиентов.
Безысходность - Одно из неоспоримых преимуществ мобильной версии: если не нравится, ее можно отключить, перейти на обычный домен. Сайты с адаптивным дизайном не дают этого простого, но важного выбора. Если адаптированная верстка неудобна, забагована или если она скрывает важный элемент навигации, пишите пропало: вы ничего не можете сделать, чтобы увидеть его снова. Придется бежать искать десктоп или сайт конкурента. Можно придумать «костыли» для обхода этого ограничения (использовать cookie и подключать разные таблицы стилей). Но такой подход усложняет разработку.

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

Отдельная мобильная версия сайта

Чтобы сделать сайт удобным для мобильных пользователей часто создают так же отдельные версии сайтов - специально ориентированные на пользователя со смартфоном/планшетом. Наиболее распространена практика - перенаправление мобильных пользователей на специальный поддомен (m.example.com, mobile.example.com и т.д.). Наверное, в 99% случаев, мобильная версия представляет собой урезанную основную версию - лишь с тем функционалом, который, по мнению разработчиков, будет необходим и полезен пользователям мобильных устройств и планшетов.

Преимущества мобильной версии

Легкость в изменениях - поскольку сайт существует, де-факто, отдельно от основной версии, вносить в него правки, связанные только с мобильной версией значительно проще, поскольку мобильная версия чаще всего не предоставляет избыточного, ненужного функционала.
Удобство для пользователя - мобильная версия обычно сильно упрощена по сравнению с десктопной версией, поэтому пользователю не нужно будет далеко ходить за нужной ему информацией.
Быстрота - из-за того же упрощения сайта, мобильная версия грузится быстрее. Это существенно для пользователей, которые все ещё ходят через GPRS или слабый 3G.
Выбор- чаще всего, в мобильной версии есть возможность перейти на основную версию сайта.

Недостатки мобильной версии

Несколько адресов -
Неудобство для пользователя - для десктопной и мобильной версии разные адреса. Для одних это может оказаться плюсов, для других же - крайне раздражительным фактором, когда для того, что бы удобно посмотреть сайт, нужно запоминать ещё один адрес. Так же есть проблемы и с поисковиками: во избежание дублированного контента SEO-специалистам нужно использовать мета-теги rel=«alternative» и rel=«canonical». Кроме того, когда пользователь мобильного поиска Google кликнет по ссылке в результатах, он попадет на десктопную версию или перенаправлен на мобильную. Но если мобильная версия этой страницы не существует, он получит сообщение об ошибке.
Ограниченность - создание отдельного мобильного сайта означает избавление от части содержания и функциональности. Кроме того, у вас может быть два различных набора контента, который может негативно сказаться на общей информационной картине.

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

RESS

Сам Google, хоть и поддерживает использование веб-мастерами адаптивного дизайна, однако в своих продуктах использует иную систему. Если зайти, к примеру, на главную страницу под разными User-Agent-ами, то можно увидеть различный HTML для различных устройств. RESS - Responsive Design + Server Side. Пример реализации, набросанный «на коленке»:

$DS = DIRECTORY_SEPARATOR; require_once(dirname(__FILE__) . $DS . "libraries" . $DS . "browser.php"); $device = BBrowser::detectDevice(); if($device == DEVICE_TYPE_MPHONE){ $tmpl = "template.m.php"; } else if($device == DEVICE_TYPE_TABLET){ $tmpl = "template.t.php";} else{ $tmpl = "template.php"; } include(dirname(__FILE__) . $DS . "templates" . $DS . $tmpl);

Плюсы RESS

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

Минимизация трафика - Ненужные JavaScript могут быть удалены из HTML, который освобождает CPU, память и кэш на мобильном устройстве. Так же может быть специально оптимизирована html и css.
Возможно использовать таргетирование - например, для Android-устройств предлагать скачать приложение с GooglePlay, а для Apple – с iTunes. Для каждого устройства можно сделать свою вёрстку.

Минусы RESS

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

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

Резюме

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