От автора: Большинство верстальщиков согласились бы, что просто иметь мобильно-ориентированное мышление не достаточно для создания высококачественных отзывчивых сайтов – также необходимы релевантные мобильно-ориентированные основополагающие директивы и принципы. Недавно мы столкнулись с проблемами в масштабировании мобильно-ориентированных сайтов на планшетах и компьютерах. То, что мы видели, было не всегда приятно, но уроки оказались ценны. В этой статье мы исправим эти ошибки и надеемся создать полностью кроссплатформенную верстку от мобильных устройств до настольного компьютера.
Для создания полностью масштабируемого сайта требуется большая сосредоточенность на качестве кода. При смене домена такие концепции, как модульность, инкапсуляция и способность к тестированию, становятся крайне важны. Увеличиваем ли мы масштаб до десктопной версии или уменьшаем до мобильной, необходимо чтобы код оставался последовательным и простым в обслуживании. Каждый взломанный, плохо продуманный или написанный наспех кусок кода, который мы добавляем, снижает элегантность, способность к расширению и отзывчивость кода.
Быть может, создание отзывчивых приложений не приоритетно сейчас для вашей команды. Но однажды будет – и время конверсии кадров может быть очень жестким, когда эти дни наступят.
В идеале, необходимо просто добавить медиа запросы CSS, и все должно заработать. Но легкая адаптация кода к изменениям размера экрана – единственное, что может произойти.
Ниже представлено несколько предложений и фиксов, которые сделают перевод в адаптивную верстку легче. Некоторые из них имеют особенности в отношении отзывчивого дизайна, в то время как другие в основном хорошо применяются на практике.
Медиа запросы
Все мы знаем о медиа запросах. Насколько сложны они могут быть? Набросать парочку на каждой странице, и отзывчивый сайт готов?
Использование медиа запросов на ваших страницах крайне важно; они позволяют переписывать значения CSS в зависимости от размера экрана. Возможно, этот подход звучит просто, но в крупных проектах это может быстро выйти из-под контроля. Есть несколько основных проблем, которые можно получить, используя медиа запросы:
Встречные медиа запросы: если не придерживаться общего шаблона, легко допустить ошибку в медиа запросах так, что они будут переписывать друг друга. Мы рекомендуем использовать один и тот же макет во всех проектах, и создали один макет здесь.
Установка стилей элементов из JS: Заманчивый, но «некрасивый» способ для создания отзывчивых сайтов. Элемент не может должным образом использовать медиа запросы, когда вы опирается на логику JS для установки собственной ширины. Если в логике JS ширина является строчным свойством, то невозможно переписать ее значение через CSS без !important. В дополнение к этому, вам придется обслуживать все растущий набор JS логики.
Медиа запросы подключены не последними: если ваши запросы не загружаются последними, то они не смогут переписать значения необходимых элементов. Каждый модуль может иметь собственный CSS файл, и в целом, файлы могут быть размещены не в самом конце, что приводит нас к следующему пункту.
Пространства имен CSS для инкапсуляции: если вы пишите модуль, то его CSS селекторы должны быть правильно инкапсулированы с помощью пространства имен. Мы советуем добавлять префиксы к классам с именем модуля, такие как navbar-parent. Следуя этому шаблону, будут предотвращены конфликты с другими модулями. А также будет гарантировано, что медиа запросы в конце файлов CSS вашего модуля обработают необходимые значения.
Слишком много CSS селекторов: Специфика правил CSS требует, чтобы медиа запросы использовали те же особенности для перезаписи значений. Легко увлечься с использованием LESS, который позволяет вложить глубину множественных уровней в CSS. Как правило, это излишне усложняет код, хотя может быть полезно для инкапсуляции на первом или втором уровне. Мы рекомендуем использовать пространство имен над вложенными спецификаторами, так как это более элегантно и проще в обслуживании.
Использование !important для перезаписи стилей: Добавление !important в стили снижает способность к сопровождению. Лучше избегать использования !important и вместо этого использовать CSS пространство имен для предотвращения смешивания модулей.
Отзывчивый или адаптивный?
Оба подхода имеют мощный инструментарий, но важно понять разницу между ними. Методика отзывчивого дизайна обычно включает в себя медиа запросы, резиновые сетки и процентные значения. Метод адаптивной верстки наоборот сосредоточен больше на логике JavaScript’а и добавлении или удалении свойств, опираясь на определение устройства и размер экрана.
И какую же следует использовать? Отзывчивую или адаптивную методику? Ответ зависит от того, что вы хотите получить. Может быть, заманчиво применять везде адаптивную технику верстки в вашем проекте, но во многих случаях она может не потребоваться. Хуже того, применение адаптивной верстки может быстро переусложнить ваш дизайн. Примером может послужить использование JavaScript для установки значений атрибутов CSS стилей, что мы видели неоднократно.
Используйте JavaScript в крайних случаях
Старайтесь избегать использования JavaScriptгде только возможно, когда создаете свой UI. К примеру, динамическое изменение размеров лучше выполняется через медиа запросы. В большинстве UI вы будете выбирать макет страницы, основанный на размере экрана, а не на типе устройства. Путаница с необходимостью определения типа устройства с определенным размером экрана может привести нас к применению адаптивной верстки там, где отзывчивая работала бы лучше.
Пересмотрите все дизайны, где изменение атрибутов CSS основано на определении типа устройства; в большинстве случаев лучше будет положиться только на размер экрана посредством медиа запросов. Но когда же нам использовать адаптивную JavaScript технику?
Когда использовать адаптивную верстку
Адаптивная техника веб дизайна – могущественный инструмент, позволяющий использовать выборочную загрузку ресурсов, основанную на user-agent’ах и размерах экрана. Логика, которая, к примеру, определяет браузер десктопной версии и загружает изображения высокого разрешения в отличие от сжатых для мобильных устройств копий. Загрузка дополнительных ресурсов и функций для экранов большего размера также может быть полезна. Браузер настольного компьютера, например, из-за большего размера экрана, возможностей или пропускной способности может отображать больше функционала.
В идеале, дополнительные ресурсы будут подгружаться по требованию для конкретных платформ. Данный тип загрузки ускоряет мобильные версии сайтов, в то же время, позволяя использовать полный функциональный набор в версиях для рабочего стола и планшета. Эту методику можно применить для проверки юзер-агента на стороне клиента или сервера. Если все обработано на сервере, возвращены будут только ресурсы поддерживаемые платформой пользователя. Кроме того, загрузка по требованию со стороны клиента может использовать AJAX запросы для загрузки дополнительных ресурсов, если таковые поддерживаются. Это эффект может быть достигнут при использовании JavaScript на стороне клиента, основанного на поддержке браузера и юзер-агента. Обычно, определение на стороне клиента предпочтительнее, поскольку позволяет делать это, исходя из фактической функциональности браузера, не прибегая к сложным юзер-агент проверкам.
Простой пример гибкой сетки
Отзывчивая гибкая сетка не должна быть сложной. В нашем демо мы показываем простую реализацию, где создана горизонтально-прокручиваемая секция контейнеров с изображениями. Изображения центрированы и могут масштабироваться до 100% от родительского контейнера, сохраняя исходное соотношение сторон. Кроме того, высота контейнера установлена в 100%, позволяя нам регулировать высоту исключительно в родительском блоке-обертке. Этот способ поддерживает простоту и легкость чтения медиа запросов.
HTML и CSS исходный код по этим ссылкам использует выше описанную концепцию. Мы планируем добавить больше стереотипных шаблонов; не стесняйтесь добавлять собственный код. Pull-запросы приветствуются.
Лучшие практики
Мы надеемся, что информация, описанная выше, пригодится, когда вы будете работать над своим следующим мобильно-ориентированным проектом. Ниже представлено обобщение выше упомянутого и другие полезные подсказки.
Об использовании медиа запросов
Самые отзывчивые макеты страниц могут и должны быть выполнены с помощью медиа запросов. Использования JS для манипуляции CSS стилей (возможно кроме добавления/удаления классов) нужно избегать. Установка ширины через JS не так проста в обслуживании или динамична, как в CSS.
Используйте стереотипный шаблон, чтобы избежать противоречия в запросах или чтобы не получить запросы, которые постоянно пропускаются.
Подключайте файлы медиа запросов после остальных файлов стилей. Медиа запросы переопределяют значения CSS и должны быть конечными значениями, не важно на уровне страницы или модуля.
Если в ваших базовых CSS стилях много селекторов, правила медиа запросов должны быть подстроены под правилаCSS. Используйте как можно меньше селекторов, когда пишите CSS правила.
О создании CSS правил
Используйте классы, а не идентификаторы, чтобы избежать специфичных проблем.
Для определения текущего селектора используйте наименьшее количество селекторов.
Используйте классы повторно. Если у элемента такой же вид в разных частях страницы, не надо создавать два разных класса. Создайте общий и используйте его повторно.
Инкапсулируйте ваши CSS селекторы, используя правильное пространство имен, для предотвращения конфликтов. Например, class=”module-name-parent”
Необходимо как можно реже использовать !important. Перед тем, как использовать его, спросите себя, можете ли вы добавить другой класс вместо этого (родительский или того же уровня). А потом задайте себе еще один вопрос, имеет ли правило, которое вы пытаетесь переопределить, лишние селекторы.
Об использовании LESS
Используйте LESS вложение только там, где это необходимо. Вложенность хороша для организации, но также порождает специфические проблемы в CSS.
Убедитесь, что у вас нет CSS правил, как это:
|
1 2 3 |
#wrapper #body-content #content #left-side #text { border: 1px solid #000; } |
Работайте с командой разработчиков и присваивайте LESS переменным хорошие имена.
Если вы используете набор CSS правил повторно, делайте это через LESS примесь.
О добавлении оберток к элементам
Большинство структур DOM намного сложнее, чем это необходимо.
Добавляйте блоки-обертки только, когда они необходимы. Не добавляйте обертки, если то же самое можно сделать на CSS.
Если удаляете блок-обертку, и макет страницы не изменился, этот блок вам не нужен. А теперь проведите глобальный поиск таких блоков (JS, CSS, rhtml, jsp, тэги) и удалите их.
Об использовании загрузки по требованию
Добавляйте плэйсхолдеры к компонентам, где необходима загрузка по требованию.
Секции с загрузкой по требованию сначала остаются пустыми. Убедитесь, что вы зарезервировали достаточно места под контент в случае загрузки по требованию. В противном случае, после загрузки модуля произойдет сдвиг страницы.
Используйте медиа запросы для пустых разделов, которые точно совпадают по заполняемым размерам.
О чистке
Если вы балуетесь с CSS и пытаетесь починить макет страницы, не забудьте удалить ненужные правила CSS. Многие из них, возможно, больше не нужны. Также удалите лишние блоки-обертки.
Автор: Bryce Watson и Michael Woo
Источник: //www.ebaytechblog.com/
Редакция: Команда webformyself.
