Как оптимизировать сайт под мобильные платформы
Опубликовано: 09.04.2015 13:12
Просмотров: 3284
В связи с новыми факторами ранжирования Google показываю несколько действенных приёмов для оптимизации вашего портала под мобильные платформы, а следовательно и для увеличения поискового трафика
Адаптируем наш сайт под мобильные за несколько шагов
Приветствую Вас, наши дорогие и многоуважаемые читатели. Недавно я писал, что Google с апреля меняет алгоритм выдачи и одно из главных изменений - это курс на мобильные платформы и оптимизированные под них сайты (а вот и статья). Да, уже 21 век, эра компьютерных технологий. Всё больше людей пользуются своими смартфонами и планшетами, из-за чего все эти изменения в алгоритмах смотрятся довольно таки правильными. Сейчас расскажу вам о нескольких способах улучшения своего сайта под мобильные устройства. Поехали!
Тег meta viewport для установки ширины в мобильных браузерах
Этот тег помогает понять браузеру ширину окна просмотра. А так же он поможет управлять масштабированием странички сайта. С помощью Viewport можно установить масштаб сайта при его первой загрузке пользователем, указать уровень масштабируемости. А вот вам и пример того, как можно указать данный метатег (не забываем, что его надо ставить в теге HEAD).
1
Этот тег очень полезен при разработке адаптивного шаблона. И кстати, для адаптивного шаблона я чаще всего использую Bootstrap (готовый css-фраймворк). В нём отлично сделана система гридов (адаптивных блоков, основной вёрстки шаблона), из-за чего я практически всегда использую его, а сверху накручиваю свои стили.
@media screen - простой способ адаптивной вёрстки
Media позволяет очень просто указывать стили для определённых экранов, точнее разрешений. Практически все нормальные css-фраймворки используют данный подход, так почему бы и вам ним не воспользоваться? Смотрите пример:
1
2
3
4
Здесь можно удобно варьировать с max-width и min-width. Советую почитать более специализированную информацию, я только наталкиваю Вас на путь истинный.
Modernizr для старых браузеров
Вы всё ещё пользуетесь престарелым IE? Тогда этот пункт специально для вас! Modernizr - это JS-библиотека, которая поможет найти аналог HTML-тегов и CSS-стилей для устаревших браузеров. Вы ведь не хотите отсечь целевую аудиторию в виде людей, которым на работе до сих пор запрещают пользоваться новыми технологиями? Только хардкор, никакой другой путь не может быть правильным, кроме самого тяжёлого!
Сенсорное управление для мобилок
Советую найти на задворках интернете вот такую библиотечку - TouchSwipe. Она позволяет реализовать на вашем портале поддержку сенсорного управления на мобильных девайсах, что станет отличной "плюшкой" для пользователей. Согласитесь же, что очень приятно повертеть сайт, покрутить его, потыкать и прочее. Создаётся впечатление, что разработчики подумали именно про тебя и сделали эдакую "фишку". Из таких приятных мелочей и создаётся мнение о всей площадке.
Шрифты очень важны
Не надо использовать шрифты, для просмотра которых приходится приближать сайт. это совершенно неудобно. Постарайтесь поиграть со значениями font-size, поискать подходящие шрифты на просторах рунета.
Отказываемся от плагинов
Пытайтесь отказаться от всякого flash-изобилия на сайте и прочих красивых, но совершенно неподдерживающихся большинством мобильных устройств приблуд. Не делайте упор на эти технологии, лучше идти в сторону минимализма и функционала.
Мобильная версия - это очень хорошо
Если у Вас есть уже готовая площадка, которая долгое время функционировала, но не была адаптирована под маленькие экраны, то проще всего будет создать отдельную мобильную версию сайта, а не пытаться переделать текущий дизайн сайта. Так можно обойтись меньшей кровью, а главное - это проще и следовательно - быстрее реализуемо.
Выводы
В общем есть много способов оптимизации вашего портала под новые стандарты Google, да и наверняка в недалёком будущем и Яндекса. пытайтесь делать сайт именно для людей, а не зацикливаться на одних только поисковиках (пусть полетят в меня гнилые кокосы, но я всегда буду придерживаться такого мнения). Улучшайте своё юзабилити, пишите побольше интересных материалов, тогда люди к вам потянутся!
Спасибо за внимание и до скорых встреч!
Советуем почитать
