1. Skype консультант
  2. Задать вопрос
  3. Поиск
вместе с вами 18 лет
Как усилить результаты продвижения? где найти точки роста
Многоканальный телефон в Москве +7 (495)229-31-41 Перезвоните мне
Оптимизация сайта под мобильные устройства

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

23 Сен 2018

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

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

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

  • Ширина страницы в мобильном браузере;
  • Media Queries;
  • Modernizr;
  • Сенсорное управление на сайте;
  • Экран заставки;
  • iOS иконки и Windows 8 иконки;

А также важно помнить, о трех незаменимых типах адаптации вашего сайта под современную структуру гаджета:

  • Адаптивный дизайн;
  • Динамический показ;
  • Разные URL.

Ширина страницы в мобильном браузере

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

Правильное написание мета-тэга meta viewport :

Правильное добавление тэга во время создания каскадных таблиц стилей:

@-viewport { width: device-width;}

При разработке адаптивного веб-сайта тэг meta viewport является незаменимой частью, как и Media Queries. Но также тэг является универсальным, поэтому вы можете с легкостью использовать его и в неадаптивных дизайнерских проектах.

Media Queries

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

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

Media Queries встраивается в код страницы, при помощи ссылки:

Разработчики чаще всего вписывают Media Queries в код каскадных таблиц:

@media screen and (max-width: 960px) { /** Style Rules here **/}

Modernizr

15.png

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

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

Сенсорное управление на сайте

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

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

Экран заставки

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

Для добавления заставки на сайте стоит ввести ссылку в строке head:

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

IOS и Windows 8 иконки

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

36.jpg

Для добавления иконок на IOS стоит прописать ссылку в коде сайта в разделе head:

<link href="touch-icon-iphone.png" rel="apple-touch-icon" /> <link href="touch-icon-ipad.png" rel="apple-touch-icon" sizes="72x72" /> <link href="touch-icon-iphone-retina.png" rel="apple-touch-icon" sizes="114x114" />

Также вы можете удалить ссылки, но при этом стоит убедиться, что изображение иконки сохранено в корневой папке с приставкой в названии (apple-touch-icon-*).

Windows 8 и RT тоже имеют поддержку иконок на рабочем столе. В Windows 8 они называются Pin Icon. Для создания иконки стоит использовать мета-тэги:

<meta name="msapplication-TileColor" content="#000" /> - определяет цвет ячейки;

<meta name="msapplication-TileImage" content="icon.png" />- отвечает за изображение. 

Три способа адаптации сайта

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

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

Динамический показ

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

Разные URL

В разных устройствах используются разные варианты URL и HTML кода. Система самостоятельно определяет тип устройства пользователя и перенаправляет на нужную страницу с помощью переадресации HTTP/HTTP-заголовка.

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

ыват.jpg


Возврат к алфавитному указателю

Остались вопросы?

Заполните форму ниже или просто позвоните нам +7 (495) 229-31-41

наверх