Адаптивность интернет проектов

к списку статей

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

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

Старое понятие «резиновость», является линейным масштабированием интернет ресурса. Responsive веб сайт построен не на линейном масштабировании, а акцентирован на построении ядра и его качественной загрузке, которая основана на производительности.
Генеральная идея в том, что ресурс будет отзываться и реагировать на то устройство, на котором его открывает пользователь для просмотра. 

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

Responsive дизайн, означает и изменение принципов создания интерфейса. Вместо разметки всей страницы используются фрагменты стилей Samantha Warren’s Style Tiles или специальная сетка для четкой координации визуальных элементов графики.
Есть еще один плюс в теме – не так давно опубликованы рекомендации Google для мобильных проектов, где отмечается, что адаптивность (т.е. интернет ресурсы, имеющие Responsive интерфейс) будут более успешны в ранжировании поисковой системы. 

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

Подгготовка адаптивности

Представленный проект выполнен на Битрикс и рассчитан на разрешения экрана, ширина которого лежит в диапазоне от 1280px до 1920px. Адаптивность слайдера в шапке проекта реализована на базе скрипта ResponsiveSlides.js: изображения в слайдере пропорционально изменяют свои размеры в зависимости от ширины экрана.

Адаптивный сайт
Интернет площадка для фото и видео материалов. Название площадки «География в фотографии».

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

Адаптивная верстка
1280px
1920px

Адаптивный для SEO

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

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

Поиск и ранжирование

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

Ссылочная масса

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

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

Переход на адаптивный интерфейс

Техническое воплощение идеи Responsive сайт требует специальных знаний, чтобы избежать ошибок:

  • Использование сжатых изображений. У Вас есть хорошие изображения, которые замечательно открываются в основной версии веб ресурса, но теперь изображения должны так - же хорошо открываться и в версии для планшетов и смартфонов,тоже. Помните, пользователи современных устройств покинут ресурс через пять секунд ожидания долгой загрузки.
  • Интерфейс для любого размера экрана. Не делайте один дизайн сайта для стационарного компьютера, один для смартфонов, один для планшетов, чтобы потом заставить свой сайт переходить на один из этих размеров. Смысл в том, что веб ресурс, т.е. сайт и его графика - это перестройка элементов на веб странице по мере уменьшения или увеличения количества пикселей, а не переключение с одного интерфейса на другой.
  • Предоставьте пользователю весь контент. Довольно трудно разместить весь контент на версию сайта для девайсов с обычной версии, но это потребуется сделать, если Вы хотите иметь современный web сайт. Мобильные посетители, безусловно, должны получить столько же сервисов и информации, сколько и посетители с стационарных компьютеров.
  • Оптимизация для сенсорных экранов. Не размещайте в версии сайта для смартфонов и планшетов элементы JavaScript, которые срабатывают при наведении мышкой. Не забывайте, у планшетов нет мыши, а у посетителя со стационарного компьютера может быть Windows 8 и пользоваться сенсорным экраном. Будет лучше, если интернет ресурс будет доступен с сенсорных экранов, вне зависимости от их размеров.
  • Следует протестировать все браузеры. Что говорить про то, когда мы жаловались, что приходится тестировать проект на IE и еще на Firefox. Теперь все гораздо интереснее: Смартфон/Планшет – Браузер Android по умолчанию, Safari, Chrome beta, Opera, Dolphin, Firefox, Настольный компьютер - IE10 для Windows 8 (без флэш),IE9 для Windows 7,Firefox, Safari,Chrome.
к списку статей
(он-лайн заявка)