Создание мобильной версии сайта: теория
Создание мобильной версии сайта становиться все более и более актуальной темой, так как с развитием высоких технологий, все больше пользователей интернета переходят на мобильные устройства. Из этой статьи Вы узнаете о основных требованиях к мобильным версиям сайтов.
При работе над оптимизацией конверсии мобильного трафика важно следить, чтобы все страницы сайта одинаково хорошо отображались на разных видах мобильных устройств. Если это не так, то велика вероятность, что пользователь покинет сайт, не желая подстраиваться под неизменные и статичные параметры системы.
Добившись максимально возможного удобства сайта для пользователей мобильных устройств, можно рассчитывать на высокую долю конверсии мобильного трафика. Подобные площадки сохраняются в закладках, отличаются высокой посещаемостью и немалой долей «мобильных» продаж. Но так происходит только тогда, когда ресурс (или отдельные его страницы) имеет четкую спецификацию, оптимизирован соответствующим образом.
При создании мобильной версии сайта рекомендуется полагаться на стандарты w3c. Простота и универсальность кода в данном случае имеет первостепенное значение. В противном случае ресурс просто не отобразится на коммуникаторах. Естественно, рассчитывать на какие-либо продажи при этом невозможно.
Адаптация целевых страниц должна быть четкой, продуманной и взвешенной. Поставив себя на место пользователя, можно лучше проанализировать происходящие процессы, выявить главные ошибки, допущенные в проектировании площадки.
Не лишним будет упомянуть элементы, которые помогут оптимизировать сайт под мобильные устройства, такие как смартфоны и планшеты, которые повысят конверсию ресурса.
Данный файл чем-то напоминает привычный robots.txt и также помогает поисковым роботам собрать информацию о сайте. В рамках meta.txt размещается описание площадки, даются указания по перенаправлению пользователей на разные версии ресурса.
2. Совместимость
Убедиться в том, что мобильная версия сайта одинаково правильно отображается на всех мобильных устройствах, можно вручную, либо воспользовавшись специальными программами-эмуляторами.
3. Скорость загрузки страниц
Подготавливая мобильную версию сайта, важно уделить повышенное внимание коду страниц, убрать лишние картинки и анимацию. Кстати, устройства iOS не работают с flash-элементами вообще, а значит, наличие таковых на сайте лишь увеличит время загрузки страниц.
4. Сжатость информационной подачи
Идеальный вариант – это публикация всех важных данных в рамках одной страницы. Если подобной компактности добиться не удается, то акцент делается на самых важных элементах. Например, контактные данные, номера телефонов, адреса компаний лучше вынести на главную страницу ресурса.
Важно понимать, что ограниченный дисплей мобильного устройства не в состоянии отобразить полноэкранную версию ресурса, включающую изображения, рисованные или анимированные элементы дизайна и пр.
5. Анкеты, тесты, формы, интерактивные элементы
Эти блоки должны быть короткими и небольшими. Работать с компактной клавиатурой мобильного устройства захочет (и сможет) не каждый. По этой причине не стоит спрашивать у посетителя больше, чем это необходимо. Формы должны содержать лишь самые важные поля, снабженные упрощающими комментариями.
6. Дать то, что нужно
Удобство интерфейса и релевантность контента – главные составляющие любого хорошего сайта. Эти же принципы работают и при создании мобильных версий сайтов. Дать то, что нужно посетителю – величайшее искусство и главная задача веб-мастера.
Естественно, получить мобильную (упрощенную) версию сайта можно, если внести должные корректировки в стандартные шаблоны ресурса. Однако статистические данные утверждают, что никакие модификации не сравнятся с проектами, специально разработанными для мобильных устройств.
Говоря проще, мобильную версию сайта придется разрабатывать и создавать отдельно от основной площадки. Только в этом случае можно гарантировать стабильность полученного результата в виде высокой конверсии мобильного трафика.
Здравствуйте, Александр! Понятно, что лучше создавать мобильную версию сайта. А каково Ваше мнение о плагине WPtouch Mobile Plugin? Вид блога для мобильного пользователя он, конечно, изменяет. Во всяком случае, с планшета смотрится вполне достойно. Со смартфона или мобильного телефона, правда, не заходил…
Здравствуйте, Александр!
Извините, что задержался с ответом, не заметил Вашего комментария.
У меня стоит этот плагин, правда ставила его Лариса, но если она посчитала нужным, то он хороший.
Сейчас заходил к Вам со смартфона(у меня нокиа 5230), все нормально отображается, читать очень удобно, и шрифт нормальные, не мелкий, и всю ширину страницу хорошо видно, без лишней прокрутки.
День добрый =)
Вот я совсем недавно задумалась о мобильной версии. Меня, по правде сказать, такие версии сайтов жутко злят))я даже на планшете постоянно ставлю, чтобы отображал мне полную версию, но ведь нужно о читателях подумать, им, возможно, было бы удобно…
Короче говоря, все в раздумьях…и хочется, и колется))
Добрый вечер, Галя!
Тоже задумываюсь все чаще о мобильной версии
Не сегодня мобильные версии не вариант. Только адаптивно-резиновая верстка. Это и удобнее и проще для читателей. К тому же, на Вордпрессе сегодня масса бесплатных адаптивных шаблонов и не проблема подобрать что-то под себя.
Спасибо, Артем, что просвещаешь!
Я то покупаю статьи ореинтируясь прежде всего на то, чего у меня еще нет.
Так что, я не особо вдумывался в то, что здесь написано. Так, подкорректировал.
Ты наверняка на фрилансе берешь работы по технической части, а не по написанию статей,
а то у тебя было бы не плохо покупать. Хорошо пишешь.
После почти годового ведения блога, я понял, что мне не нравиться писать статьи. Вот с техническими вещами разбираться — это да, это я люблю. А статьи только по необходимости.
Тогда, Артем, вопрос тебе по твоим любимым «техническим вещам», ты мне написал про шаблон: «он у тебя еще и не адаптивный. На планшете читать будет сложно.»
Как это понять и как исправить?
Адаптивный шаблон — это когда шаблон выглядит одинаково на разных устройствах (смартфоны, планшеты), то есть заточен под разное разрешение экрана. Проверяется элементарно — окно браузера уменьшаешь в размерах, если сайт видно полностью (не появляется бегунок снизу) значит шаблон адаптивный или резиново-адаптивный. Если виден только кусок сайта — шаблон с жесткой привязкой.
Исправляется это дело добавлением специальных стилей для разных разрешений. Кстати, у Димы Лемура читал, что артистер позволяет создавать адаптивные версии шаблона, но сам не сталкивался
Все ясно. Этот по моему адаптивный. Спасибо, что разъяснил.
Хм… по-моему, вполне удобно с планшета читать…
И да, с помощью артистера можно сделать резиновый шаблон.
Много делал в артистере, но именно резиновый пока не понял как. Это где, Галя, там устанавливается? И будет ли резиновый подходящим для мобильных?
Привет, Саш =)
У меня третий артистер, и вот как только его запускаю, он спрашивает, мол де, чего желаете создать? Выскакивает окошко «Новый проект», там я выбираю «Темы для CMS», и, соответственно, Вордпресс. Загружается проект. В верхнем меню есть кнопочка «Макет», тыкаешь в нее, открывается ее меню, и там надо найти «ширина листа». Вот как раз там и делается макет резиновым (даже с процентами). Вроде бы так, я сама не создавала такие шаблоны, уж очень не люблю эти «тягучки» =)
А что касается годится ли такой шаблон для мобильной версии или нет…я, к сожалению, не знаю =(
Спасибо, Галя! все понял.
поставил себе на блог Плагин MobilePress, поскольку на мобильных устройствах сайт отображался не корректно, кривовато скажем. настроил этот плагин по инструкциям бывалых. но….незнамо почему, на ноутбуке у меня некоторые страницы стали открываться в мобильной версии, а на мобильном устройстве наоборт — в полной «кривой» версии…ставил этот плагин, т.к. он самый легковесный среди его собратьев, но то ли с моей темой не совместим, то ли с версией wp…короче снес его, так не хочется менять теперь тему, а трафик с моилок жалко терять, по статистике 30 процентов заходов ко мне — именно с них(((
Конечно, Артем, не надо сдаваться, тем более, что мобильные устройства потихоньку вытесняют компы. Пробуй другие плагины, у меня раньше стоял WPtouch Mobile Plugin, пока мне Артем Абрамович (artabr.ru) не настроил эту тему.
Наконец нашел сайт, который помог мне адаптировать сайты для мобильных устройств _http://www.mobile-version.ru/. Сделать это заставило время и текущие обстоятельства. Проанализировал трафик своего сайта, и он показал, что почти 50% переходов с мобильных устройств. Поэтому стал искать, кто сделает адаптацию. Найденный сайт понравился мне прежде всего коротким временем выполнения моего заказа, всего 2 дня, но и стоимость работы сыграла свою роль. И еще здесь сайт тестируется яндексом и гуглом после того, как его адаптировали. Проверил на сервисе, где я провожу анализ сайта, для мобильных устройств все показывает в плюсах.