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

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

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

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

1. Использование Google Chrome для отладки мобильной версии сайта

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

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

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

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

2. Как обеспечить переход на мобильную версию

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

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

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

Чаще всего пользователь зашедший с мобильного устройства перенаправляется на поддомен сайта, отличающийся буквой «m.» в начале или словом «mobile.». Например, мобильной версией сайта vk.com является m.vk.com.

Многие программы для разработки сайтов позволяют реализовать этот метод с помощью несложных процедур. Например, в популярной CMS Битрикс, такой переход реализуется размещением в конце файла php_interface/dbconn.php дополнительных строк кода:

if(
         strpos($_SERVER['REQUEST_URI'], '/m/') !== 0
        && (
              strstr($_SERVER['HTTP_USER_AGENT'], 'iPhone')
              || strstr($_SERVER['HTTP_USER_AGENT'],'iPod')
              || strstr($_SERVER['HTTP_USER_AGENT'],'Android')
        )
) {
        header("Location: /m/");
        die();
}

3. Адаптивная верстка

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

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

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

В любом случае, для того, чтобы создать сайт с адаптивным элементом, вам необходимо использовать мета-тег viewport. Стандартной шириной области экрана браузера является 980px. Если вы вставите в блок <head></head> строку

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

то браузер будет использовать в качестве стандартной ширины экрана ширину экрана вашего устройства. За это и отвечает выражение width=device-width.

4. Принципы CSS для адаптивной верстки.

Рассмотрим второй пример адаптивной верстки – сайт tsu.ru. Если снова попробовать изменить размеры окна браузера, то вы заметите, что помимо растяжения и изменения элементов, при некотором размере экрана сайт резко меняет свой дизайн. Убираются некоторые ненужные элементы, а оставшиеся выстраиваются в другом порядке. Этот дизайн можно считать полностью адаптивным, поскольку один и тот же сайт имеет разную структуру в зависимости от размеров экрана.

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

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

1
Если ваша разметка имеет несколько колонок, то в стиле мобильной версии лучше оставить только одну колонку.
2
Элементы, которые являются не столь важными на вашем сайте (например, большие картинки), можно не отображать использовав display: none;
3
Рекомендуется уменьшить размер полей вокруг всех элементов интерфейса.
4
Увеличить размер мелкого текста, сделав его более читаемым.
5
Убрать плавающие элементы, с которыми пользователям не всегда удобно работать на сенсорном экране.
6
По необходимости изменить события на соответствующие новые. Например, стоит учесть, что событие mouseover не будет работать должным образом и накладывать на него важный функционал не стоит.

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

devicehit.ru


Теги: создание сайтов

Читайте также по теме статьи «Мобильная версия сайта»:


Люди читают