Как переделать сайт под мобильную версию – 3 способа быстро адаптировать сайт под мобильные устройства

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

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

• Настраивать фон отдельно для каждой версии сайта
• Скрывать отдельные блоки и виджеты
• В версии сайта для планшета можно выбрать размещение виджетов в одну или две колонки

Настройки для виджетов

Скрытие виджетов

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

Примечание:

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

Виджеты в две колонки

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

Важно:

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

Примечание:

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

Плавающие виджеты: «Заказать звонок», «Поделиться в соцсетях», «LiveChat», «Jivosite», «AddThis»

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

Как скрыть блок

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

Например, если скрыть шапку на компьютерной версии сайта, то она будет отображаться только на планшете и телефоне. Вернуть отображение блока на устройстве можно кнопкой «Показать»

Примечание:

При отключенной опции «Показывать скрытые блоки в конструкторе» — блоки отображаться не будут.

Настройки фона блоков

При смене фона блока (цвет, изображение, карта) в компьютерной версии сайта, фон изменится во всех режимах. Если фон блока был изменен на планшете или телефоне — изменения будут применены только на этом устройстве.

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

Примечание:

Кнопка «Сбросить настройки» позволяет отменить все изменения фона блока на устройствах и устанавливает фон компьютерной версии.

Помогла ли вам статья?

Статья оказалась полезной для 53 человек

ukit.com

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

 

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

Почему владельцы веб-ресурсов так сопротивляются созданию мобильной версии сайта?

 

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

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

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

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

3 причины сделать сайт мобильным

1. Повышение лояльности

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

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

2. Позиции в поисковой выдаче

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

3. Рост числа покупок, совершенных при помощи телефона

Уже не раз были проведены исследования, доказывающие, что доля мобильного трафика растет с каждым годом все быстрее. К примеру, последним из таких было исследование креативного агентства «We are social», по результатом которого видно, что размер мобильного трафика в 2017 году вырос до 50,3% от общего объема трафика.

А по данным Google известно, что более 65% пользователей покупают товары именно при помощи телефонов.

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

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

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

 

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

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

Данный метод прекрасен еще тем, что с помощью удобного drag and drop интерфейса конструктора можно с легкостью изменять внешний вид мобильной версии и внедрять такие уникальные элементы, как click-to-call для звонка в одно нажатие, кнопки для быстрого набора сообщения, а также собирать аналитику мобильного трафика.

Что нужно сделать, чтобы реализовать? Нужно совершить простейшие действия: добавить в конструктор URL своего веб-сайта, и через несколько минут… происходит магия — у вас уже есть готовая мобильная версия сайта с синхронизированным контентом! А для того, чтобы завершить ее установку, необходимо будет лишь добавить строчку кода в тэг head основного веб-ресурса и выбрать период подписки.

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

Высокой вам конверсии!

---

---

Статьи по теме

webmart.by

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

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

Это очень важный этап оптимизации сайта, так как сегодня все больше людей имеют телефоны, смартфоны и планшеты, подключенные к интернету. И если на большом мониторе ваш сайт выглядит просто прекрасно, то на телефоне его, возможно, просто невозможно будет просматривать: шрифты будут ОЧЕНЬ маленькими, а дизайн будет СИЛЬНО перекошен. Человек сразу закроет сайт, а поисковая система поставит себе галочку: ОТКАЗ!

Как проверить сайт?

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

Начнём с сервиса, и воспользуемся инструментом от Google — developers.google.com. Вот какую печальную картину имеет мой сайт:

Как показано на картинке, мой сайт на смартфоне отображается так же, как отражался бы на обычном компьютере, и поэтому читать его будет ОЧЕНЬ трудно. К тому же, как сообщил мне Google, в шаблоне сайта есть элементы, которые мешают моему сайту быстро открываться на мобильных устройствах. И вот тут требуется пояснение.

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

Как решить проблему?

Тут есть несколько вариантов.

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

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

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

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

2. Поставить адаптивный шаблон

Но для меня это тоже не выход, так как полностью менять шаблон сайта я не хочу, с этим я провозился слишком долго и он мне ОЧЕНЬ нравится. Может есть плагины, которые могут внести изменения в шаблон? Поискал, ничего не нашёл, предлагается только много адаптивных дизайнов. Как вариант, можно купить ПРЕМИУМ ШАБЛОН, такие шаблоны имеют много дополнительных функций и ОБЯЗАТЕЛЬНО такой шаблон будет адаптивным.

Вывод тут можно сделать такой: когда вы только начинаете делать свой сайт, то СРАЗУ выбирайте адаптивную тему. Как ещё можно решить мою проблему?

Если вам нравится ваш шаблон, но у вас не адаптивная верстка, то ОЧЕНЬ ХОРОШИМ ВАРИАНТОМ будет сделать его адаптивным. Чтобы сделать это своими силами нужно быть программистом, поэтому самым целесообразным решением будет заказать эту услугу у профессионалов.

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

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

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

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

4. Как создать мобильную версию сайта проще всего?

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

Установил плагин WordPress Mobile Pack (Mobile Switcher) и сразу всё улучшилось!

Вроде всё хорошо, и проблема решена, но….

1. Не отображается реклама, плагин её режет.

2. В подвале две внешние ссылки.

Если вторую проблему можно легко решить, то первую решить будет сложно. А как сами понимаете, если сайт живёт рекламой, то такой минус критичен.

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

Ну что же, попробую поискать что нибудь получше.

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

Неужели нет чего то получше? Поищем…

И вот я на я нашёл САМЫЙ лучший плагин для мобильной версии сайта — WPSmart Mobile. Из всех недостатков — это только ссылки в подвале, но мы их ведь можем убрать? Правда реклама осталась только в самой статье, но это мелочи, её можно встроить в сам мобильный шаблон, вечером займусь.

Что ещё прекрасно, что даже на планшете сайт выглядит отлично, как и на моём маленьком смартфоне. Не поленился и запустил Android на виртуальной машине, чтобы вам показать (о том, как установить андроид на виртуальную машину, можно прочитать ЗДЕСЬ.:

Ещё плагин имеет три варианта шаблонов, выбор не большой, но есть. Осталась мелочь — удалить ссылки в подвале, так, на всякий случай.

Тут оказалось все не так сложно. Идём в папку с установленным плагином и открываем файл base-functions.php — путь к нему: ВАШ САЙТ/wp-content/plugins/wpsmart-mobile/themes/base/base-functions.php

<div>
Site optimized for mobile devices by <a href="http://www.wpsmart.com/mobile">WPSmart Mobile</a>
<a href="http://wordpress.org/">Proudly powered by WordPress</a> | <a href="#">View Full Site</a>
</div>

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

ОЧЕНЬ ВАЖНО! В связи с тем, что google предъявляет теперь большие требования к мобильной версии сайта, именно ему нужно угодит. А он требует при своих тестах доступ в robots.txt к мобильному шаблону. Поэтому в robots.txt нужно ОБЯЗАТЕЛЬНО прописать:

Allow: /wp-content/plugins/wpsmart-mobile/themes

Только после этого тест на мобильность будет успешен:

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

Дальнейшая доработка плагина WPSmart Mobile

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

ВАЖНО! После внесения изменений не обновляйте плагин, иначе вы потеряете все внесенные изменения!

Центровка картинок. Изначально картинки в шаблоне прижимаются к левому краю. На планшете это некрасиво. Нужно вот эту секцию в css привести к такому виду:

body img {
display: block;
margin: 0 auto;
}

Не нашли ответ? Воспользуйтесь поиском по сайту

zmoe.ru

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

Вы здесь: Главная — HTML — HTML Основы — Как сделать мобильную версию сайта

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

Первым делом, Вы должны понять, что мобильный Интернет уступает по скорости стационарному во много раз, плюс из-за небольшого экрана просмотр страниц так же не удобен. Я уже молчу про тех, кто пытается выйти в Интернет через GPRS. Мне это удалось прочувствовать однажды, когда я был далеко в Краснодарском крае, в какой-то глубинке, где телефон по непонятным причинам более-менее (40-50%) ловил только на кладбище. С такой связью можно звонить, но вот Интернет был совершенно некудышным. Поэтому когда мне пришлось там загружать страницы размеров 200-300 КБ, из которых 90% — это ненужная графика, я проклинал создателей этого сайта.

Поэтому в первую очередь мобильная версия сайта должна быть с минимальным набором графики, максимум — это какая-нибудь «лёгкая» шапка, не более того.

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

Что касается ширины страницы, то рекомендую поставить max-width: 620px; у самого верхнего контейнера. Сильнее растягивать не требуется.

Мобильную версию сайта лучше сделать на отдельном поддомене, например, на m.mysite.ru.

Когда Ваш отдельный сайт для мобильных устройств будет готов, надо подумать, как перенаправлять пользователей с мобильными устройствами с сайта mysite.ru на m.mysite.ru. Код для определения браузера можно скачать здесь: http://detectmobilebrowsers.com/.

Скачиваете, например, для PHP. Далее вставляете в index-файл этот код и заменяете там адрес в header() на адрес Вашей мобильной версии сайта.

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

Подведу итог:

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

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

• Создано 01.02.2013 10:59:23
• Михаил Русаков

Предыдущая статья Следующая статья

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

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

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

1. Кнопка:
   <a href=»https://myrusakov.ru» target=»_blank»><img src=»https://myrusakov.ru/images/button.gif» alt=»Как создать свой сайт» /></a>

   Она выглядит вот так:

2. Текстовая ссылка:
   <a href=»https://myrusakov.ru» target=»_blank»>Как создать свой сайт</a>

   Она выглядит вот так: Как создать свой сайт

3. BB-код ссылки для форумов (например, можете поставить её в подписи):
   [URL=»https://myrusakov.ru»]Как создать свой сайт[/URL]

myrusakov.ru

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

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

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

Поэтому для увеличения количества посещений уважающему себя сайту требуется подходящая адаптация.

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

1. Провести оптимизацию скорости загрузки страниц.
2. Не использовать в структуре сайта многоступенчатое меню.
3. Адаптировать шаблон под распространенные разрешения экранов.
4. Исключить лишние Flash-элементы либо использовать скрипты Java.
5. Удалить многоступенчатое меню, заменить на интуитивно понятное и облегченное.

Виртуальный хостинг сайтов для популярных CMS:

Изменить стили в шаблоне сайта

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

• стандартный для компьютера;
• для планшетов — 992 px * 768 px;
• для смартфонов — 480 px * 320 px.

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

Если на страницах насчитывается до 90% графики и медиа, не имеющих отношения к основному текстовому контенту, привалирующим выбором становится создание отдельной мобильной версии сайта на поддомене, начинающемся как, например, m.ваш_сайт.ru

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

Использовать адаптивный дизайн

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

Определяющие отличия от мобильной версии:

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

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

Процесс проводится одним из двух доступных способов:

• Самостоятельная обработка для «подгонки» под смартфоны и планшеты.
• Использование специализированного плагина.

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

• контроль масштаба страницы и ее элементов в зависимости от экрана аппарата;
• тщательная проверка кода, иначе площадку не увидят мобильные браузеры;
• использование SEO-принципов продвижения в условиях мини-формата.

Второй способ предлагает внедрение плагина в структуру интернет-сайта. Наиболее распространена платформа WordPress, для которой подойдет «WP Mobile Detect». Его активация самостоятельно оптимизирует контент и при необходимости поменяет тему.

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

Практически все популярные современные системы управления контентом позволяют использовать адаптивные шаблоны «из коробки». Если выбранный Вами «движок» этого не позволяет – это повод задуматься о выборе другого программного решения.

Подведем итоги

Выбор способа адаптации определяется категорией и величиной сайта. Распределение решений идет примерно следующим образом:

• Адаптивный дизайн — визитки, блоги, информационные сайты, форумы, промо-страницы и прочие источники «легкого по весу» контента.
• Создание отдельного шаблона — для среднего сегмента загруженности: информационные ресурсы, форумы, интернет-магазины.
• Мобильная версия на поддомене — крупные интернет-магазины, социальные сети, порталы и каталоги.

www.ipipe.ru

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

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

Отдельный сайт;
Мобильное приложение;
Адаптивная вёрстка

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

Отдельный сайт

Первый способ сделать мобильную версию сайта — это сделать отдельный сайт для мобильных устройств. Для этого можно использовать домен третьего уровня, например, m.epicblog.net или просто директорию, например, epicblog.net/mobile — разницы нет. Это должна быть версия сайта полностью адаптированная под экраны мобильных телефонов и планшетов, под ширину экрана менее 620 пикселей. Также понадобится специальный скрипт, который будет автоматически определять ширину экрана пользователя и перенаправлять его на нужную версию сайта.

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

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

Мобильное приложение

Второй способ сделать мобильную версию сайта — это создать мобильное приложение сайта. Разработка мобильного приложения — удовольствие не дешевое! Есть множество онлайн сервисов-конструкторов, где можно создать не сложное мобильное приложение для сайта. Но эти сервисы, как правило, платные и обычно нет возможности создать мобильное приложение сразу под Android, iOS и Windows Phone.

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

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

Третий способ сделать мобильную версию сайта — использовать адаптивную вёрстку дизайна сайта. Для этого можно использовать CSS3 Media Queries — это когда в стилях дизайна сайта прописываются все возможные варианты разрешения экрана и как их отображать.

Метод адаптивной верстки является самым лучшим для создания мобильной версии сайта. На сайте EpicBlog.net используется именно этот метод.

Создание мобильной версии сайта с нуля — это очень не простой и долгий процесс. Необходимо протестировать сайт на разных устройствах, выявить и исправить все недочеты и ошибки. Для тестирования можно использовать «Режим адаптивного дизайна» в «Исследовании элемента» в браузере или Google сервис PageSpeed Insights. 

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

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

Всем удачи и добра!

epicblog.net

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

Опубликовано 28.03.2015 17:10

Просмотров: 4576

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

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

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

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

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

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

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

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

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

 

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

 

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

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

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

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

В моём случае я использую Joomla 2.5, для которой необходим специальный плагин. Для неё есть довольно много плагинов которые отличаются по своим возможностям. Ознакомиться и скачать их можно здесь:
http://extensions.joomla.org/category/mobile/mobile-display

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

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

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

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

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

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

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

<meta name=»viewport» content=»width=device-width, initial-scale=1.0″>

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

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

В большинстве случаев достаточно записи показанной мною выше, однако желающие более подробно ознакомиться с  viewport могут прочитать отличную статью по адресу:
http://frontender.com.ua/mobile-web/wtf-viewport/

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

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

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;
    }

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

h2    {
    font-size: 24px;
    }

h3    {
    font-size: 22px;
    font-weight: normal;
    }

h4    {
    font-size: 17px;
    margin-top: 5px;
    margin-bottom:0px;
    }

h5    {
    font-size: 16px;
    }

 

Изображения

В содержимом сайтов наряду с текстовой информацией постоянно встречаются изображения. Здесь я имею в виду не элементы оформления дизайна, а изображения которые встречаются в контенте, в содержании записей, статей и т. д.
Как я уже писал ранее,  разрешение экрана современных смартфонов начинается с 800×480 точек. Это означает что размер изображения  не должен превышать 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 движке, и рассказал об общих подходах при разработки и тестировании мобильной версии сайта. Понятно, что по мимо основных, описанных мною ранее моментах, существует множество других, но охватить их целиком тем более в рамках одной статьи просто невозможно. По этому, если у вас остались вопросы, или вам необходимо сделать мобильную версию сайта, оставляйте комментарии, пишите через раздел контакты и я всегда постараюсь помочь вам!

unboxit.ru