Адаптивная верстка в процессе разработки сайта

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

Не сложно догадаться, почему это произошло. Если раньше разработчики имели одну среду работы и тестирования — настольный компьютер и список браузеров (а были еще времена  табличной верстки, когда и проблемы кроссбраузерности не существовало). То теперь перед нами огромное число смартфонов, планшетов, нетбуков со своими мобильными браузерами и операционными системами. А на очереди телевизоры и холодильники 🙂

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

Платформа

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

Общие требования

1. Оптимизация изображений для веба в соответствии со стандартами PageSpeed Insights.
2. Подключение шрифта-выручалочки Font Awesome, даже если в дизайне он не был задействован.
3. Прижатый подвал для вертикально узких страниц.
4. Подсветка (hover) для ссылок и кнопок.

Конечно же, техническое задание не ограничивается этими 4-мя требованиями, но мы всегда заостряем внимание на них т.к. все мы люди, можем забыть или поленится выполнить задачу на 100%. Поэтому нужен контроль.

Учитываем SEO

Очевидные вещи, тем не менее каждую верстку мы проверяем по следующему списку:

1. Грамотное использование тегов заголовков <h1> — <h6>.
2. Наличие атрибута alt и заполнение его релевантным текстом для статических изображений.
3. Тег <title> и метатеги description (описание) и keywords (ключевые слова).
4. Для контактной информации использование в ссылках ключевых слов skype, tel и mailto.
5. Используем семантическую разметку данных Schema.org.
6. Фавиконка. Да-да, она самая должны быть сделана именно на этом этапе.

Упрощаем работу программисту

Здесь мы аккумулируем наш предыдущий опыт и учитываем специфику CMS, на котором проект будет собираться. В частности, в список тестирования верстки у нас входит:

1. Демонстрация нумерованного и маркированного списков в тексте конечной страницы (да, бывало обнаруживали отсутствие этих стилей уже  после публикации сайта).

2. Размещение изображение в папке /images/ т.к., например, папка /img/ зарезервирована в некоторых CMS.
3. Ссылки без css-классов т.к. во многих CMS ссылки генерируются автоматически и стили удобнее определять через родительские контейнеры.

4. Библиотека jQuery не должны быть внесена в один общий файл.

Разрешения экранов

Тестирования верстки мы проводим на 11-ти основных экранах. Здесь нам здорово помогает adaptivic.com и аналогичные сервисы.

Отдельные эксперименты по тестированию адаптивности

1. В “Хлебных крошках” обязательно демонстрируем поведение верстки, когда навигация не помещается в один ряд на мобильных устройствах.

Тестирование в браузерах

Эту работы мы проводим вручную в 9-ти основных браузерах. Какое-то время мы брали в расчет Opera Mini и Opera 12, но опыт и практика показали не целесообразность этого. Никому это не надо.

Тестирования на устройствах

Чтобы объем работы по тестированию не стремился к бесконечности, в техническом задании мы фиксируем список устройств (как правило это наши и заказчика устройства) на которых вдоль и поперек будет проверена наша работа. Список подкрепляем подобными ссылками на Яндекс.Маркете с описанием и техническими характеристиками.

Проводя работы по этой схеме у нас получается на выходе готовый продукт, грамотно сделанный и без ошибок. Но если что-то и упустим, то как правило находим и исправляем еще на этапе сборки так, что и никто и не заметит… 🙂