Отзывчивый сайт и дизайн

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

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

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

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

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

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

Пример подготовки респонсивности

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

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

Адаптивность для 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.