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

Максим Шульгин

Максим Шульгин

Тестировщик верстки

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

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

Куча телефонов

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

Платформа

Все проекты мы верстаем на фреймворке 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-ти основных экранах. Здесь нам здорово помогает Screenfly и аналогичные сервисы.

1920×1080 1680×1050 1600×1200 1440×900 1366×768 1280×1024
1280×800 1152×864 1024×768 800×600 640×480  —1
1 Буквально несколько месяцев назад мы перестали брать в расчет экран 240х320, ввиду его низкой доли в статистике Рунета.

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

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

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

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

Google Chrome Android Browser Safari
Firefox Яндекс.Браузер Microsoft Edge
Explorer 10+ Opera (Blink) Opera Mobile

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

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

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

Другие записи

Energo-konsultant.ru — портал потребителей энергоресурсов и ЖКХ

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