Недавно Google сделал заявление, суть которого сводилась к тому, что с 21 апреля сего года сайты, у которых нет мобильной версии или те, которые не имеют специального представления для отображения на телефоне, будут выдаваться в результатах поиска в последнюю очередь.
Не сильно переживая за посещаемость сайта, а больше для того, чтоб держать себя в тренде, решил изучить вопрос, как такое сделать. Я, если честно, не очень люблю сайты, которые на телефоне выглядят неузнаваемо. Но это относится к действительно неузнаваемым сайтам, где не очень продумано, что должно пропадать на маленьких экранах.
Безусловно, я уже знал такое слово, как Responsive (дословно - отзывчивый) – это верстка сайта так, чтобы внешний вид подходил под то разрешение и устройство, на котором сайт смотрят. Так, на широком мониторе можно показывать меню слева на сайте, а на узком, например, на экране мобильного телефона, меню лучше свернуть и раскрывать только по нажатию кнопки меню.
Ознакомление с технологиями Resonsive верстки подсказало мне, что едва ли я это сам осилю – я все-таки разработчик, а не верстальщик. Потому надо бы обратиться к услугам верстальщиков и заплатить денег, а поскольку мой сайт – это хобби и собственная база знаний, то тратиться не хотелось.
Я был уверен, что раз тема актуальная, то наверняка и процесс верстки автоматизирован. И, как и ожидалось, я оказался прав. Существует немало фреймворков для создания responsive сайтов. Найти их просто – если вбить в поисковике что-то типа «TOP Responsive frameworks», то найдете много обзоров о фреймворках. Попробовав пару фреймворков, мой выбор пал на Foundation 5.
В нем собраны инструменты не только расположения объектов (т.н. grid), но и такие вещи как выпадающее меню, открытие больших изображений над страницей (а-ля лайтбокс), хлебные крошки, кнопки, табы, слайдеры и многое другое. Сразу замечу, что Foundation 5 не рассчитан на Internet explorer 8, отображаться корректно будет в Internet explorer 9 и старше, а также в других нормальных браузерах – Google Chrome, Firefox, Opera, Safari.
Страница проекта Foundation 5: http://foundation.zurb.com/
Документация по использованию фреймворка: http://foundation.zurb.com/