Мобильная версия как сделать. Приложения для разработки приложений: как сделать приложение для iOS и Android самостоятельно

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

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

Адаптивный дизайн. Страница сайта в данном случае не меняется, но CSS-файл применяет другие правила, в зависимости от ширины окна браузера, и “адаптируется” под него.
Отдельный мобильный сайт. Он размещается на поддомене или в подкаталоге, иногда основной и мобильный сайт имеют одинаковый URL. Загрузка HTML-кода зависит от значения user-agent («динамической выдачи»). Если URL разный, то структура страниц обычно сохраняется, но ничто не мешает их изменить, так как эти версии сайтов хранятся в разных каталогах. Отличный пример – мобильный сайт ВКонтакте (m.vk.com).
Мобильная версия сайта или RESS (Responsive Design + Server Side). Этот метод сложный в разработке, но включает в себя преимущества как адаптивного дизайна, так и отдельного мобильного сайта.

Как создать мобильную версию сайта

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

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

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

Тенденции веб-дизайна

«Mobile First»

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

Навигация

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

Размеры экрана

Большинство смартфонов имеют расширение 320 пикселей. Многие ориентируются на 240. Чтобы все элементы были в рамках страницы, нужно установить 100% в табличке стилей CSS, тогда они будут подстраиваться под ширину экрана.

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

Тачскрин

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

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

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

По возможности нужно отказаться от ввода текста.
Не пренебрегайте такими возможностями платформы, как функция «click to call» или адрес компании в виде ссылки (загрузка карты с маршрутом).

Как сделать адаптивную верстку

При адаптивном дизайне используется один HTML-код для всех размеров экранов. Все элементы меняются в зависимости от правил, которые прописывают в файле CSS media.

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

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

Правила верстки

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

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

Поисковую строку лучше заменять иконкой «увеличительное стекло». А верхнее меню сделать выпадающим. Это обеспечивает удобство использования и экономит пространство.

Любую реорганизацию начинают с ключевых блоков, а менее значимые элементы не отображают на усмотрение дизайнера.

Самым распространенным способом мобильной верстки является создание макета с одной колонкой. При этом весь контент нужно разделить на отдельные блоки. Например:

Весь контент находится в одной колонке, но разделяется на блоки с подсказками. В верхней части располагают элементы навигации;
«Гармошка» — прием, когда контент скрывается под заголовками в виде кнопок.

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

Что касается разрешения для адаптивной верстки, то нужно просмотреть аналитику самых популярных моделей разных устройств или зайти на Firefox -> Открыть меню -> Разработка -> Адаптивный дизайн. Кроме того, можно использовать растягивание с шагом по 100 пикселей.

Удачные примеры адаптивных сайтов:

New Adventures In Web Design Conference 2012

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

Ribot

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

Adaptive Web Design – рекламный сайт книги, которая ответит на все вопросы об адаптативном дизайне. Естественно, выполнен сайт на высшем уровне.

Если же массив данных огромен, то есть смысл сделать отдельный сайт для мобильных устройств.

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

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

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

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

Преимущества и недостатки этих способов разработки

Преимущества

Недостатки

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

● Удобство разработки. Вся структура сайта подстраивается под разную ширину экранов;

● Не нужно писать сайт с нуля, достаточно внести изменения в CSS и HTML;

● Простая поддержка такого продукта;

● Наличие одного адреса позитивно сказывается на продвижении сайта.

● Разные задачи мобильных пользователей и пользователей ПК;

● Адаптивный сайт нельзя отключить и перейти на обычный домен.

Мобильный сайт

● Так как он существует отдельно от основной версии, в него легко вносить изменения;

● Удобен для пользователей;

● Есть возможность перехода на основной сайт.

● Разные адреса десктопной и мобильной версии;

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

Любой качественный сайт должен иметь мобильную версию сайта, ведь мобильный трафик постепенно растёт, а отсутствие адаптивной верстки сайта приводит к отказом. Это так же заметили в Google, после чего было решено проверять сайты на наличие мобильной версии сайта, а с 21 апреля 2015 года и во все станет фактором для ранжирования.
Так как же сделать мобильную версию сайта, что бы избежать отказов и понижения позиций? Для решения этой проблемы существуют два способа. Первый способ — сделать адаптивную вёрстку, второй способ — сделать отдельный дизайн мобильной версии сайта. Так как мой сайт на WordPress покажу решения только для данного CMS движка.

Как сделать мобильную версию сайта WordPress

Однако, если вы довольный своим шаблоном и вам не хочется плагинов, есть вариант сделать ваш шаблон растягивающимся без плагина, как мой. Для этого достаточно прописать в css — «width: 100%» . Ну а что бы дизайн не сильно растягивался добавить строчку:

#content {
max-width: 1280px;
}

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

img, embed, video {
max-width: 100%;
}

Недостатки такого способа:

Тяжело разместить каждый эллемент красиво для разных экранов.
Медленная загрузка сайта из-за не сжатых картинок + подгрузки лишних не оптимизированных скриптов.

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

Самый удобный вариант для пользователей, это иметь отдельный поддомен с мобильной версией, так поступают сайты гиганты, популярные сайты ну и конечно различные успешные сервисы. Обычно создают поддомен m.website.ru либо mobile.website.ru.

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

В чем недостаток этого способа:
1. По сути вы создаёте дубликат сайта, выходит что нужно наполнять 2 сайта, конечно можно сделать авторепостинг с помощью NextScripts: Social Networks Auto-Poster, но следить за двумя сайтами не практично.
2. Так как мобильная версия дублирует контент, поэтому нужно либо запрещать к индексации поддомен, тогда поисковики не оценят ваш труд. Либо прописывать в head — rel=»canonical», показывая что контент дублируется, однако в выдачи первой страницы m. версии уже не будут.
3. Как не стараться SEO оптимизация таких страниц превращается в тяжёлую работу, либо вы пишите уникальный контент для мобильной версии, либо не выйти в топ таким страницам.

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

Порядок действий как сделать отдельную мобильную версию сайта WordPress:
1. Создаём поддомен (пример m.сайт) на хостинге;
2. Покупаем платный шаблон, либо создаём собственный для мобильных телефонов. Так же есть вариант организовать мобильную версию отдельно с помощь тех же плагинов, о которых писал в первом методе;
3. Загружаем заново весь контент, который должен быть на мобильной версии сайта;
4. Настраиваем индексации и прописываем необходимые параметры для поисковиков.
5. Настраиваем проверку на вход с мобильных устройств на основном домене и поддомене с помощью веб-сервера nginx.

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

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

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

1. Какие бывают мобильные сайты

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

сайты с мобильной версией на поддомене (отдельная версия сайта, написанная специально для мобильных устройств, например: m.site.ru);
сайты с адаптивной версткой (верстка, которая адаптируется под устройство, на котором открывается сайт);
сайты с динамической версткой (сервер вашего сайта отдает для разных устройств разный размер страниц).

Поисковые роботы с одинаковым приоритетом воспринимают перечисленные выше типы адаптации, поэтому выбор полностью за вами. Но стоит обратить внимание на несколько нюансов.
Во-первых , я бы не рекомендовал создавать мобильную версию сайта в отдельной папке (директории), так как робот может некорректно её воспринять.
Во-вторых , если вы остановились на варианте с поддоменом, выбирайте простое и понятное для пользователей доменное имя с явным указанием на мобильный сайт. Например, m.site.com , а в случае наличия регионального поддомена - m.novosib.site.com. Такая прямая зависимость поможет пользователям и поисковым системам связать основную и мобильную версию вашего сайта.
В-третьих , при перенаправлении пользователей на мобильную версию важно, чтобы с десктопной версии страницы стоял редирект только на соответствующую страницу мобильной версии, а не на весь сайт.

2. Несколько слов о создании сайта.

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

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

3. Как проверить сайт на мобилопригодность

Для проверки сайта вы можете воспользоваться инструментом в бета версии сервиса Яндекс.Вебмастер «Проверка мобильных страниц».

Самыми распространенными ошибками, которые позволяет выявить инструмент в Яндекс.Вебмастере , являются наличие горизонтальной прокрутки, много мелкого текста, отсутствие или неверное расположение мета-тега «viewport», а также наличие невоспроизводимого видео.

4. Что делать, если обнаружены ошибки

Хочу поподробнее остановиться на тех замечаниях, которые вы можете увидеть в сервисе Яндекс.Вебмастер :

Горизонтальная прокрутка

Если при проверке сайта в выявлена горизонтальная прокрутка, возможно, ширина его страниц больше среднего. Как правило, большинство пользователей использует смартфоны c разрешением 320 px, вы можете ориентироваться на эту величину. Заметьте, некоторые браузеры могут автоматически сжимать страницу под размеры мобильного устройства, поэтому вы можете и не обнаружить прокрутки при просмотре сайта, чего может не произойти у посетителя вашего сайта, и он увидит полосу прокрутки. Вместе с этим следует проверить отступы, встроенные картинки и логотипы – возможно, именно из-за них меняется итоговая ширина той или иной страницы.

Много мелкого текста

Если на сайте обнаружено много мелкого текста, то это также может быть следствием большой ширины страницы. Даже если шрифт на вашем сайте составляет 12 px, а ширина страницы равна, к примеру, 720 px, то браузер, сжимая страницу до среднего значения, скорее всего, уменьшит его почти в 2 раза.
В данной ситуации необходимо либо увеличивать размер шрифта таким образом, чтобы после масштабирования он оставался читаемым, либо менять ширину страницы, приводя её к рекомендуемой.

Отсутствие мета-тега «viewport»

Не меньшее внимание стоит уделять мета-тегу «viewport», который необходим для того, чтобы браузер мобильного устройства знал, что на сайте есть адаптивная верстка. Если выявлено, что на вашем сайте отсутствует данный мета-тег, проверьте, что он расположен именно в контейнере , что соответствует стандарту HTML. Кроме того, мы советуем устанавливать динамическую область просмотра в зависимости от ширины экрана устройства:

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

Наличие Flash-элементов

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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