Метод разработки CSS utility-first простое и быстрое создание адаптивного дизайна

Содержание материала:

20 полезных сниппетов CSS для создания адаптивного меню

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

CSS-Only Dark Menu от Джона Ербанка

Кроме дизайна этот сниппет задает адаптивное выпадающее меню. Панель навигации при стандартном окне занимает обычное горизонтальное положение.

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

Full Responsive Portfolio от Celine

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

Bootstrap Navbar от Bobby

Этот сниппет кода содержит несколько контрольных точек и устанавливается поверх Bootstrap .

При больших размерах окна просмотра ссылки навигации располагаются рядом с логотипом, а на меньших контрольных точках они смещаются вниз в собственную панель. Когда окно просмотра становится еще меньше, ссылки « прячутся » под переключатель меню. Это распространенный метод работает во всех браузерах.

Clean Dropdown Toggle от Бойда Массье

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

Animated Sliding Bar от Антуана Виниаля

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

На небольших экранах используется тот же эффект, но меню отображается вертикально, а не горизонтально. Обратите внимание на красивый эффект анимации, который управляется с помощью класса CSS .active .

Basic Responsive Menu от Эша Нельсона

На первый взгляд это меню кажется стандартным: традиционные ссылки, гамбургер-переключатель меню и плоская цветовая гамма. Хотя оно лишено гламурного блеска, меню работает и работает удобно и просто. Весь его код написан на Haml и SASS .

Sliding Drawer Hamburger Nav от Ханьлиня Чонга

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

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

Single-Page Mic Nav от Travis

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

Morphing Circular Menu от Sergio

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

Данное решение вряд ли найдет широкое применение в коммерческой сфере. Но все равно это замечательный пример того, какое широкое поле для творчества предоставляет адаптивный дизайн.

Pure CSS Flexbox Nav от Джо Уоткинса

Флексбокс CSS3 — это термин, используемый разработчиками, чтобы обозначить гибкую модель макетов CSS3 . Мы уже публиковали полное руководство по Flexbox, с которым я советую вам ознакомиться.

Это меню построено на Flexbox , в котором ссылки распределяются в панели равномерно, независимо от размера экрана. Весь код написан на чистом HTML и CSS , реализована поддержка выпадающих меню для сайта.

Animated Toggle от Джо Баггали

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

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

Flexible Nav Menu от gantit

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

Pure CSS Tabs от Мартина Гайдичара

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

Pure CSS Breadcrumbs от Оливера Ноблича

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

Batman Nav от Mighty Shaban

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

Система меню красиво скомпонована. Она может пригодиться при разработке любого одностраничного макета.

Multilevel Dropdown от Стефани Уотер

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

Pure CSS eBook Webapp от Энди Фицсаймона

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

Equal-Width Navigation от Дориана Коврана

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

Stylized Multilevel Navbox от Эндрю ДеБрю

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

Dynamic Sliding Menu Bar от Филиппа Ферча

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

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

Заключение

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

Данная публикация представляет собой перевод статьи « 20 Useful CSS Snippets for Responsive Menus » , подготовленной дружной командой проекта Интернет-технологии.ру

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

С ростом технического прогресса мы имеем все больше и больше возможностей выхода в интернет: теперь это не только стационарные компьютеры, но и разнообразные планшетные устройства, мобильные телефоны, смартфоны, ноутбуки, и даже телевизоры. Разрешение экрана таких устройств может варьироваться от 320 до 2560 пикселей, поэтому традиционный дизайн сайта с фиксированной шириной уходит далеко в прошлое. А на смену ему приходит адаптивный веб-дизайн, особенность которого и заключается в создании таких веб-страниц, которые должны удобно просматриваться с помощью любого устройства, предоставляющего выход в интернет. Таким образом, адаптивный дизайн избавляет разработчиков от необходимости создавать несколько версий веб-сайта для различных устройств, что крайне не эффективно.

Как легко и быстро создать адаптивный сайт новичку

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

И если раньше сайты создавали с фиксированными или «резиновыми» размерами, то сегодня вебмастерам приходится заботиться о том, чтобы они одинаково хорошо отображались на всевозможных устройствах.

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

Что такое адаптивный сайт?

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

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

Например, на ПК вы открываете какую-либо веб-страницу и видите стандартное строение: верхняя навигация, два сайдбара (блоки по бокам), между ними основное содержание и футер.

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

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

Зачем нужен адаптивный сайт?

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

  • Сокращаются траты на разработку шаблонов под различные разрешения, так как адаптивный сайт подстраивается под все экраны;
  • Отсутствуют поддомены и дубли страниц, которые негативно сказываются на продвижении;
  • Информация хорошо отображается на всех устройствах, что снижает количество отказов (когда пользователи уходят с первой веб-страницы, не сделав переходов по другим);
  • Повышаются продажи, так как делать заказы удобно с любых девайсов.

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

Где можно разработать подобный шаблон?

Можно разработать его с нуля, но для этого необходимы знания в HTML5, CSS3 и JavaScript. Если вы подобными знаниями не обладаете, не расстраивайтесь. Это сложный путь, а я, как вы помните, люблю обходить такие дороги. Существует несколько инструментов, которые я испробовал в 2020 году и продолжаю работать с ними сегодня.

Разрабатываем оформление с Тильдой

Этот сервис я уже несколько раз упоминал на Start Luck. Подробное описание конструктора можете прочитать в моем блоге. Сейчас расскажу вкратце. В основе работы лежит конструктор, через который вы формируете оформление своего сайта. Необходимо просто самостоятельно расставить блоки в нужных местах. Код сгенерирует система.

Однако, есть небольшой нюанс: для его выгрузки потребуется оплатить тариф Business (цена — 1 250 рублей). Это гораздо дешевле, чем заказывать разработку с нуля за несколько десятков тысяч рублей. И конечно же, Tilda шагает в ногу со временем, делая каждый шаблон адаптивным.

Работаем с готовыми инструментами в Bootstrap 3

Данная система представляет собой набор готовых решений, благодаря которым вебмастер экономит время на разработке дизайна своего проекта. Внешний вид создаётся из готовых блоков. К каждому уже прописан код. Таким образом, оставшееся время, силы и средства можно потратить на разработку уникальных функций.

Макеты, предложенные Bootstrap 3, адаптированы под любые устройства. Не нужно вносить никаких изменений в код, за вас это уже сделали другие. К этому можно добавить ещё одно преимущество — кросс-браузерность. То есть созданный макет будет одинаково отображаться во всех популярных браузерах.

Работать с этой системой может каждый, начиная от новичков и заканчивая профессионалами. Опытные специалисты могут воспользоваться открытым кодом и вносить в него изменения на своё усмотрение. Скачать набор инструментов можно с официального сайта.

Если вы хотите стать мастером и получить полную инструкцию по работе с этой и другими программами, которые пригодятся для создания сайта, могу порекомендовать курс « Веб-дизайнер: эффективный сайт от идеи до реализации » на Нетологии.

Разбираемся с Adobe Muse

Ещё один вариант для начинающих вебмастеров. Хотя, им охотно пользуются и настоящие спецы. Дело в том, что он экономит уйму времени. Как? Да очень просто! От вас требуется работа в редакторе с интуитивно понятным интерфейсом, а коды генерирует система. Высокий статус подтверждается разработчиком софта. Компания Adobe разработала множество популярных продуктов, включая Photoshop.

Основные преимущества Adobe Muse:

  • Вы работаете только с графическим оформлением, программная основа формируется в автоматическом режиме самим приложением;
  • Разработать хороший шаблон можно за пару часов;
  • Возможность создания адаптивных сайтов;
  • Большой функционал;
  • Утилита работает с современными языками — HTML5 и CSS3;
  • Интуитивно понятный интерфейс.

Научиться работать в Adobe Muse легко. На YouTube есть множество обучающих роликов. Ещё можете прочитать мой материал, где я описывал базовый функционал этой утилиты.

Так же советую вам ознакомиться с курсом Сергея Садовникова, где он рассказывает о создании Landing Page и рассматривает в работе вышеописанный софт.

Используем Dreamweaver

Данная утилита берёт начало в 1997 году. Долгое время, пока у неё не было серьёзных конкурентов, она была самой востребованной в среде вебмастеров. Затем наметился спад популярности, который прекратился после приобретения компанией Adobe всех прав на усовершенствование софта. Ранее я уже упоминал про неё в рамках статьи «Программы для разработки сайтов» на Start Luck.

В основе работы Dreamweaver лежит принцип «что видишь, то и получишь». Скажу сразу, что она подойдёт продвинутым пользователям, которые владеют HTML и CSS. Но это не значит, что новичкам путь закрыт. Если вы только начинаете знакомство с веб-языками, эта утилита может помочь в этом. Здесь встроена система подсказок, которые возникают в нужных местах, помогают исправлять ошибки и многое другое. В общем, большая находка для начинающих вебмастеров!

Суть в том, что вы вносите изменения в код и можете сразу наблюдать графический результат в отдельном окне. Это очень удобно и ускоряет процесс разработки. Конечно же, присутствует возможность создания адаптивных сайтов. Купить программу можно на официальном сайте Adobe . Стоимость лицензионной подписки — 1 288 рублей в месяц.

Вам интересно создание адаптивных сайтов с нуля и вы не хотите идти простыми путями, которые я описал? Вас завораживает копание в кодах, создание нового и уникального? Вы хотите постичь HTML, CSS, JavaScript и другие языки, но не знаете, с чего начать? Современный университет удалённого обучения GeekBrains предлагает обучающие курсы с лучшими преподавателями, после прохождения которых вы получаете диплом и гарантированное трудоустройство в крупную ИТ-компанию.

А моё сегодняшнее эфирное время, к сожалению, подходит к концу. Я описал для вас современные инструменты, с помощью которых можно создавать качественные проекты с высоким котированием поисковыми системами.

Если вам понравилась статья, подписывайтесь на мой блог, чтобы быть в курсе новых публикаций. С вами вёл интересную и занимательную беседу Андрей Зенков, до новых встреч!

7 способов улучшения процесса разработки адаптивного дизайна

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

Конечно, из-за того, что процесс работы над адаптивным проектом очень индивидуален и итеративен, проанализировать его и дать решения на все случаи жизни довольно трудно. Тем не менее, некоторые общие способы и техники можно применять практически всегда.

Мы рассмотрим семь техник по улучшению адаптивного дизайна начиная со структуры контента и заканчивая масштабируемыми изображениями.

1. Мобильная версия прежде всего

Подход «mobile first» с его постепенными улучшениями, охватывающими основные аспекты проектирования интерфейса, поможет вам сфокусироваться и понять ограничения мобильной среды для более эффективной и инновационной работы.

Это значит, что сначала создается дизайн и контент, оптимизированные для простейших устройств. Затем расширяется оформление для девайсов с небольшими экранами и поддержкой Media query. В заключение шаблон и контент улучшаются для десктопов. Количество пользователей, выходящих в сеть со смартфонов, продолжает расти бешеными темпами, и подход «mobile first» внедрил даже Google.

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

Как отмечают члены команды ZURB, стоящей за популярным CSS-фреймворком Foundation:

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

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

Топ-пост этого месяца:  Как вывести все записи определенного пользователя (автора)

2. Контентная стратегия

Цель адаптивного дизайна заключается в том, чтобы сделать возможным наилучший пользовательский опыт в любомконтексте. Создание адаптивного сайта – отличный повод для того, чтобы взглянуть на контент другими глазами, сделать его более читаемым и легкодоступным, вне зависимости от того, на каком устройстве его просматривает пользователь. Неважно, выберите ли вы постепенное ухудшение или прогрессивное улучшение, применение методологии «content out» поможет разработать контентную стратегию, которая ставит во главу угла пользователя.

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

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

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

Как красноречиво отметила автор издания Content Everywhere Сара Вахтер-Бётчер (Sara Wachter-Boettcher):

Если говорить о контенте, как о чем-то, что определяет форму и содержание, то станет ясно, что контент это даже не первоочередная, а основополагающая вещь.

3. Скетч и Прототип

После разработки контентной стратегии и инструментария, начинайте внедрение скетчинга в процесс адаптивного проектирования – это поможет создать умный, организованный макет, который легко масштабируется.

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

Существует громадное количество ресурсов для скетчинга, а в Responsive Sketchsheets от ZURB также включен и подход mobile first, так что с его помощью можно двигаться от полноразмерных мобильных страниц к миниатюрам эскизов для десктопных макетов. Или, при желании, просто двигаться вниз от десктопной версии. Можно даже заниматься скетчингом на iPad. Инструмент не имеет особого значения – выбирайте тот, который подходит именно вам и позволяет осуществлять быстрые итерации.

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

В определенный момент на стадии скетчинга и прототипирования вы можете подумать о том, что было бы хорошо создатьбиблиотеку паттернов – динамическую, документированную проектную библиотеку базовых элементов и паттернов, которая используются в качестве отправной точки и затем дополняется. Такая библиотека поможет обеспечить более гибкий рабочий процесс и будет особенно полезна группам, работающим вместе. Существует несколько ресурсов – один из самых впечатляющих это Rock Hammer от Stuff and Nonsense. Используйте его в качестве базы паттернов разработки и дизайна или как основу для создания адаптивного сайта.

Как отметил Мэтт Гриффин (Matt Griffin) в тексте для A List Apart, скетчинг и прототипирование дают нам возможность «переосмыслить весь подход к адаптивному проектированию для веба и помогают перестать разрабатывать «вебсайты» и «мобильные сайты», а вместо этого сконцетрироваться на создании гибких систем доставки контента с набором правил, которые определяют представление контента при изменениях контекста».

4. Фреймворки

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

При выборе фреймворка важно обращать внимание на несколько вещей. Какой объем обучения необходим для начала работы? Каково количество доступной документации, и на каких условиях предоставляется поддержка? Каковы функциональные возможности фреймворка?

Один из фрейморков, реализующих подход mobile first – это Foundation от команды ZURB. Его последняя версия была перестроена с нуля, на основе методологии mobile first Люка Вроблевски (Luke Wroblewski) – теперь макет, который вы делаете, будет изначально построен для небольшого устройства. Его сетка с 12-ю столбцами может масштабироваться до значительного размера и при этом легко «сворачивается», так что вы можете создавать сложные макеты, с сеткой, которая уменьшена, чтобы уместить все необходимые для мобильных устройств столбцы один над другим. Она адаптируется к различным размерам экранов посредством как процентных ширин, так и media queries. Теперь Foundation поддерживает большее количество устройств, и работа с ними стала более интеллектуальной. Этот фреймворк сочетает в себе гибкость, мощь и использует препроцессор Sass, так что вы можете удалить все презентационные классы и написать точную семантическую разметку по своему выбору, сохранив дополнительные преимущества компонентов фреймворка. Сейчас Foundation поставляется в комплекте с дополнениями и расширениями Sass почти для каждого компонента.

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

5. Точки прерывания

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

Поскольку контент – это краеугольный камень веба, имеет смысл использовать подход «отрицания устройств» (device-agnostic) и задавать точки прерывания в соответствии с контентом. Изучите ваш дизайн, найдите точки, где действительно возникают проблемы, и улучшайте слабые места. Пытаться подобрать каждому новому расширению свою точку прерывания – непрактично, ведь новые устройства появляются постоянно.

Плюс этого подхода, по мнению дизайнера и автора Эллиота Джей Стокса (Elliot Jay Stocks) заключается в том, что:

Если вы улучшаете свой дизайн, когда он выглядит хорошо, вам не придется беспокоиться о модернизации media queries для новых устройств.

Так что же означает «контентный» подход к точкам прерывания?

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

считает дизайнер Марк Боултон (Mark Boulton).

Еще один подход к определению точек прерывания был озвучен автором книги Implementing Responsive Design Тимом Кадлецем (Tim Kadlec) и заключается в том, чтобы менять ширину и высоту окна браузера и смотреть, какие моменты можно улучшить, позволяя контенту выступать в роли проводника. Начните с мобильного представления (около 300px) и увеличивайте окно браузера до тех пор, пока вещи не начнут выглядеть требующими улучшения. Это будет первой точкой прерывания – установите для нее media query и решайте возникающие вопросы. Повторяйте эти действия, пока не добьетесь приемлемого диапазона между точками. Устанавливая точки прерывания в величинах REM и EM, вместо пикселей (вопрос на Хабре по теме — прим. перев.), вы добьетесь большой степени гибкости.

Кроме того, этот метод не отнимает много времени. Дрю Томас (Drew Thomas) утверждает:

На то, чтобы добавить «специальную» media query требуется столько же времени, что и на поиск решения, которое позволит контенту работать без дополнительных media query.

Мы не защищаем тезис о том, что «точки прерывания мертвы», скорее мы считаем, что контент должен наполнять наши media queries; единственный способ создать дизайн, который будет работать на любом устройстве – это забыть обо всех устройствах. Вы даже можете пойти дальше и обратиться к классической теории читабельности, чтобы определять точки прерывания на ее основе.

6. Масштабируемые изображения

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

Одним из таких решений является использование ПО Adaptive Images, которое построено на эксперименте компании Filament Group. Adaptive Images использует один файл .htaccess, один php-файл и одну строчку кода JavaScript для определения размера экрана посетителя сайта. Затем модуль автоматически создает, кэширует и показывает подходящее конкретному устройству масштабированную версию встроенных HTML-изображений. Важно подумать и о том, как изображения будут урезаться при уменьшении – средства вроде Focal Point и ReSRC.it помогают интеллектуально обрезать изображение, так чтобы главный фокус изображения не терялся при просмотре на устройствах меньшего размера.

С появлением нового поколения retina-дисплеев с высокой плотностью пикселей, увеличилась важность оптимизации изображений для правильного масштабирования. Одним из способов создания адаптивных retina-изображений это использование средства CSS Sprites. Для работы с дисплеями с высоким разрешением вам нужны два изображения – в обычном (@1x) и высоком (@2x) разрешении, что означает дублирование файлов, селекторов и ссылок в CSS. При использовании CSS Sprites, однако, «вам всего лишь нужно переопределить ссылку на @1x спрайт-файл для всех селекторов, которые включают атрибуты высокого разрешения», говорит Мэйкел Луманс (Maykel Loomans). Эта техника снижает количество сетевых запросов, уменьшает размер файла стилей и позволяет добиться более эффективного процесса создания изображений для retina.

Тем не менее CSS Sprites работает только с изображениями, отмеченными в вашем CSS. Для картинок на веб-страницах Imulus разработала крайне полезный плагин Retina.js, который проверяет ваш сервер на наличие путей к изображениям с @2x на конце.

Еще один совет – урезание ненужных изображений с помощью Icon Fonts, которые очень легко масштабировать, редактировать и поддерживать, благодаря чему получаются более легкие сайты.

Еще одним медиа-ресурсом, требующим правильного масштабирования, является видео – оно должно быть гибким и масштабироваться от экрана к экрану. Здесь все чуть сложнее, чем в случае с изображениями, но jQuery-плагины (напр.Fitvid.js и Fluidvid.js) помогут облегчить разработку.

7. Минификация

Вы потратили время на создание красивого адаптивного сайта, но предприняли ли вы что-то для оптимизации производительности? Изображения, JavaScript, CSS, библиотеки – все это нужно загружать, что значит большее время загрузки и количество HTTP-запросов.

Минификация – это практика удаления ненужных символов из кода (без потери его функциональности) для уменьшения его размера и повышения скорости загрузки. Этими ненужными символами могут быть пробелы, табы, переводы строк и комментарии, которые удаляются для минификации кода, оставляя при этом все его качества неизменными, но сокращая общий вес. Чтобы сократить вес еще больше, можно установить уровень минификации (особенно для JavaScript), который будет более агрессивно заменять переменные и имена функций на одиночные буквы. Независимый веб-разработчик Майк Беквит (Michael Beckwith) рекомендует сохранять неминифицированные копии CSS и JavaScript-файлы для рабочей копии сайта, а на «боевой» версии использовать минифицированные.

Минифицровать CSS и JavaScript-файлы можно с помощью большого количества инструментов: CSSTidy, Minify, JSMin, YUI Compressor и SquishI – это лишь некоторые из них. Эти средства можно даже сравнить. В конечном счете, выбор инструмента минификации зависит от вашего кода и рабочего процесса.

Помимо минификации кода, можно объединять CSS и JavaScript в общие файлы для сокращения количества HTTP-запросов. Это может быть довольно труднореализуемо, если скрипты отличаются на разных страницах, но для уменьшения времени отклика – дело стоящее. Еще один метод оптимизации производительности – это включение Gzip-компрессии. После активации на сервере, она отправляет браузеру .zip файл, вместо файла .html. Затем браузер загружает архив, распаковывает его и показывает содержимое пользователю. В результате, вместо загрузки 100 килобайтного файла html, после компрессии загружается файл весом в 15 килобайт, а значит посетитель сайта будет взаимодействовать с более компактным, быстрым, сжатым контентом, и время загрузки уменьшится. Не стоит забывать, что снижение времени загрузки напрямую влияет на выручку, так что налицо сразу несколько плюсов.

Адаптивная верстка (теория).

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

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

Основные понятия

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

Что представляет из себя отзывчивый веб-дизайн (responsive web design)? Это прежде всего гибкая, или по другому «резиновая» сетка макета вашего сайта основаная на относительных единицах измерения, которая позволяет использовать один макет для разного типа устройств, гибкие изображения и видеоматериалы, и медиазапросы.

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

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

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

И так, адаптивный веб-дизайн (adaptive web design) включает в себя гибкую сетку макета сайта, гибкие изображения и видеоматериалы, медиазапросы и прогрессивное улучшение (progressive enhancement).

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

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

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

В настоящее время до сих пор многие сайты созданы для отображения на экранах мониторов, по этой причине мобильные браузеры не отображают страницу на все 100%, а отображают её в виртуальном окне (viewport), которое, как правило, шире экрана устройства. Чтобы страница поместилась на экране устройства мобильные браузеры уменьшают её масштаб (сжимают отображаемый результат, чтобы его можно было увидеть сразу), коэффициент масштабирования зависит от характеристик конкретного устройства. Пользователи при этом могут изменять и масштабировать видимую область, чтобы видеть разные части страницы.

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

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

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

Для того, чтобы мобильные браузеры автоматически не изменяли размер страниц сайта, необходимо в теге разместить метатег, который сообщает браузеру, как обрабатывать размеры страницы и изменять ее масштаб:

  • Атрибут name задает имя документа метаданным, значение «viewport» дает подсказку браузеру о размере начального размера области просмотра. Функция атрибута content задать значения для этого атрибута.
  • Значение w > атрибута content сообщает, что ширина страницы устанавливается в соответствии с размером экрана устройства в аппаратно-независимых пикселях (device-independent pixel, dip), что позволяет странице пересчитывать положение элементов для корректного отображения на различных экранах. По аналогии допускается указать значения для высоты height=device-height .
  • Значение initial-scale=1 атрибута content сообщает браузеру, что необходимо установить соответствие 1:1 для пикселей CSS и аппаратно-независимых пикселей вне зависимости от ориентации устройства (альбомной или портретной).

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

Значение атрибута Определение
width Определяет ширину в пикселях области просмотра (значение — положительное целое число или device-width ).
height Определяет высоту в пикселях области просмотра (значение — положительное целое число или device-height ).
initial-scale Определяет соотношение между шириной устройства ( device-width в портретном режиме или device-height в ландшафтном режиме) и размером области просмотра. Чем больше число, тем выше масштаб. Значение — положительное целое число от 0.0 до 10.0.
minimum-scale Определяет минимальное значение zoom (оно должно быть меньше или равно maximum-scale ). Значение — положительное целое число от 0.0 до 10.0.
maximum-scale Определяет максимальное значение zoom (оно должно быть больше или равно minimum-scale ). Значение — положительное целое число от 0.0 до 10.0.
user-scalable Логическое значение, которое определяет, может ли пользователь увеличить масштаб веб-страницы. Значение по умолчанию yes (пользователь может увеличивать масштаб).

Приоритет создания стилей

Давайте рассмотрим еще одну важную теоретическую тему, связанную с тем под какое устройство начинать разработку сайта — для мобильных устройств или компьютеров?

В настоящее время существует два основных подхода:

  • Mobile first — подход при котором разработка сайта начинается и ориентирована на пользователей мобильных устройств. В первую очередь описываются стили, предназначенные для смартфонов, а затем дизайн дорабатывается для планшетных устройств и настольных компьютеров (начинается с размещения основной функции, а затем постепенно добавляются дополнительные элементы для более высоких разрешений, часто это называют progressive enhancement — прогрессивным улучшением). При использовании этого подхода Вы должны учитывать то, что Ваши страницы должны быть оптимизированы, максимально быстро загружаться и отображать важное содержание в первую очередь. Прочая информация должна загружаться и отображаться пользователю по его требованию, страница не должна загружать те ресурсы, которые не потребуются пользователю для получения необходимой информации. Этот подход в источниках упоминают также как content first, по той причине, что контент вашего проекта должен быть тщательно исследован и структурирован, чтобы быть классифицированным на основе важности. Подход mobile first может быть намного дороже, чем подход desktop first из-за более длительной фазы подготовки и опыта, необходимого для создания проекта.
  • Desktop first — подход при котором разработка ведется для для многофункциональных проектов, ориентированных на пользователей настольных компьютеров. В первую очередь описываются стили, предназначенные для компьютеров, а затем дизайн дорабатывается для планшетных устройств и смартфонов. При использовании этого подхода Вы первоначально доводите до максимума и совершенства дизайн и функционал Ваших страниц, а затем адаптируете его под новые разрешения и устройства, удаляя при этом необходимые колонки, перестраиваете стили и позиционируете отдельные блоки, изменяете шрифт и тому подобное. Переход к меньшему разрешению часто называют изящной деградацией — graceful degradation, при которой происходит скрытие и обертывание элементов, пытаясь сохранить при этом как можно больше исходного функционала. Как правило, деградация с настольной версии на мобильную приводит к сбоям в работе пользователей, это связано с тем, что некоторые настольные технологии просто не поддерживаются на мобильных устройствах и должны быть заменены резервным решением, которое, вероятно, будет сложным и дорогостоящим для реализации. Крупные компании зачастую создают дополнительно отдельное приложение для Android или iOS для основных функций, которые будут служить для оптимизации работы мобильных пользователей.
Топ-пост этого месяца:  Как создать на Python «Hello, World» руководство по запуску первой программы

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

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

Медиазапросы

Прежде всего давайте ответим на такой вопрос, что такое медиазапросы и для чего они нужны? Медиазапросы позволяют установить страницам сайта стили на основании определенных характеристик устройства, связанных с отображением контента, например, таких как ширина, высота, ориентация и разрешение экрана. Медиазапросы являются неотъемлемой частью CSS, они имеют широкое применение в адаптивном веб-дизайне, так как позволяют создать привлекательное и читаемое представление Вашего сайта на экране любого устройства с которого он просматривается.

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

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

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

Ниже представлено отображение этого сайта в режиме устройства в браузере Chrome:

Что должны изменять медиазапросы?

В этом разделе мы рассмотрим с Вами основные изменения страниц сайта, на которые должны быть нацелены Ваши медиазапросы:

Исходя из представленного изображения медиазапросы должны быть ориентированы на следующие изменения:

  • «Резиновая ширина» — использование фиксированной ширины (свойство w >auto ), или значения в процентах. Это позволит превратить фиксированную сетку макета в резиновую, и независимо от разрешения экрана элемент поместиться на экране, не вызывая при этом переполнение содержимого. Обратите внимание, что в этом случае даже при смене ориентации экрана содержимое элемента просто растянется и подстроится под необходимое разрешение.
  • Изменение количества колонок — в зависимости от разрешения экрана изменяйте количество колонок в макете, например, четыре колонки будут хорошо смотреться на настольных компьютерах и планшетах с альбомной ориентацией, но этот макет не будет подходить для смартфонов, где было бы предпочтительно использовать две колонки и тому подобное.
  • Сужение пустого пространства — по возможности производите сужение внутренних и внешних отступов элементов (margin и padding) для размещения большего количества необходимой информации на небольших экранах, при использовании высоких значений для отступов пользователям мобильных устройств потребуется лишний раз прокручивать содержимое, что может негативно сказаться на визуальном отображении и удобстве при чтении.
  • Изменение навигации — традиционная горизонтальная панель навигации, используемая на большинстве сайтов, по мере сужения экрана будет вызывать переполнение содержимого, или перемещать элементы меню на новые строки, занимая всё больше пространства экрана. В некоторых случаях такое поведение будет допустимо, но в большинстве случаев такой подход не будет решать необходимую задачу. Существует несколько подходов изменения навигации, например, использование отдельной навигации для мобильных устройств, которая будет отображаться при определенном разрешении, а горизонтальная панель при этом будет скрываться, или применение динамических изменений навигации с использованием языка программирования JavaScript и CSS стилей, которые позволят создать оптимальное отображение на устройстве, например, отображать вертикальную навигацию по нажатию на определенную кнопку.
  • Настройка шрифта — при создании медиазапросов обратите внимание на тот момент, что крупные заголовки хорошо смотрятся на мониторах настольных компьютеров, но на мобильных устройствах трудно читаются и могут занимать большое количества пространства. По этой причине необходимо уменьшать размер шрифта для мобильных устройств, а что касается основного текста с информацией, то в этом случае наоборот следует увеличивать размер шрифта для лучшего восприятия информации.
  • Изящная деградация — используйте медиазапросы для того, чтобы скрыть то содержимое страниц сайта, которое по Вашему мнению допустимо явно не отображать пользователям мобильных устройств. Как правило, для этого достаточно указать для необходимых элементов свойство display со значением none .
  • Изменение фоновых изображений — если вы используете растровые изображения, например, формат png в качестве фона для элемента, обратите внимание на такой момент, что при уменьшении разрешения экрана фоновое изображение будет масштабироваться теряя при этом свой изначальный вид. Обратите внимание, что вы можете использовать для необходимого вам элемента другое фоновое изображение меньшего размера, которое будет лучше подходить для определенного размера экрана. Для этих целей изменяйте значение CSS свойства background-image для вставки изображения в качестве фонового для конкретного элемента.

Подключение медиазапросов

В этом разделе мы с Вами рассмотрим как произвести подключение медиазапросов к таблице стилей. Самым распространенным вариантом подключения является внедрение медиазапроса в таблицу стилей с использованием CSS правила @media .

Ранее в этом учебнике мы уже рассматривали такие правила как @font-face , которое позволяет веб-сайтам скачать и использовать шрифты, отличные от «безопасных веб-шрифтов», правило @keyframes , которое позволяет контролировать промежуточные этапы анимации путем создания ключевых кадров (или точки) в процессе анимации, и правило @import, оно используется для импорта содержимого CSS файла в текущую таблицу стилей, мы о нем еще поговорим далее в статье.

Подключение медиазапросов с использованием правила @media

Правило @media используется для изменения CSS стилей на основании определенных характеристик устройства, связанных с отображением контента, таких как ширина, высота, ориентация, разрешение экрана и так далее. Это правило имеет следующий синтаксис:

Давайте детально разберем из чего состоит синтаксис этого правила.

Логические операторы

Вы можете комбинировать медиазапросы с использованием логических операторов:

Значение Описание
and Оператор and («И») используется для объединения нескольких медиазапросов в один.
not Оператор not («Логическое НЕ») обращает результат — если медиазапрос был истинным без «not», то он станет ложным, и наоборот.
only Оператор only («Только») может использоваться для скрытия таблиц стилей от устаревших браузеров, которые не могут обработать медиазапрос (игнорируют), содержащий в себе этот логический оператор.
, Оператор «,» позволяет объединить несколько медиазапросов через запятую. Если хотя бы один запрос возвращает «true» (соответствует), то условие выполняется и стили будут применены. Этот оператор ведет себя как логический оператор OR («ИЛИ» ).

Устройства (media type)

Вы можете использовать медиазапросы для конкретных типов устройств:

Значение Описание
all Подходит для всех типов устройств. Это значение по умолчанию.
print Предназначен для печатных страниц и для режима предварительного просмотра печати.
screen Экраны компьютера.
speech Речевые синтезаторы, устройства для чтения с экрана (для чтения страниц вслух).

Мультимедийные функции (media functions)

Ниже представлен перечень основных мультимедийных функций, которые являются частью современного стандарта:

Значение Описание
aspect-ratio Соотношение ширины и высоты области просмотра (соотношение сторон экрана). Это значение состоит из двух целых положительных чисел, разделенных косой чертой («/»). Первое число это соотношение пикселей по горизонтали, а второе по вертикали. Например: aspect-ratio : 5/4 (соотношение пять к четырем).
color Определяет количество бит на цветовую компоненту устройства вывода. Если устройство не является цветным устройством, то это значение равно нулю. Допускаются только положительные значения. Например, если дисплей использует по 4 бита на красный и синий, а 5 бит на зеленый, то считается, что устройство использует 4 бит на цветовой компонент.
color-index Количество цветов, которое устройство может отображать. Отрицательные значения не допускаются.
grid Определяет основано ли выходное устройство на сеточной системе (например, терминал «tty» или дисплей телефона с одним фиксированным шрифтом), в этом случае значение будет равно 1, если устройство растровое, то значение будет равно .
height Задает высоту области просмотра (используются единицы измерения CSS).
max-aspect-ratio Максимальное соотношение ширины и высоты области просмотра (соотношение сторон экрана). Это значение состоит из двух целых положительных чисел, разделенных косой чертой («/»). Первое число это соотношение пикселей по горизонтали, а второе по вертикали.
max-color Определяет максимальное количество бит на цветовую компоненту устройства вывода. Допускаются только положительные значения.
max-color-index Максимальное количество цветов, которое устройство может отображать. Отрицательные значения не допускаются.
max-height Задает максимальную высоту области просмотра (используются единицы измерения CSS).
max-monochrome Указывает максимальное количество бит на пиксель монохромного устройства. Если устройство не является монохромным, то значение будет равно 0. Допускаются только положительные целые числа.
max-resolution Указывает максимальное разрешение устройства вывода (например, монитор, или принтер). Разрешение может быть указано как в точках на дюйм ( dpi ), так и в точках на сантиметр ( dpcm ).
max-width Задает максимальную ширину области просмотра (используются единицы измерения CSS).
min-aspect-ratio Минимальное соотношение ширины и высоты области просмотра (соотношение сторон экрана). Это значение состоит из двух целых положительных чисел, разделенных косой чертой («/»). Первое число это соотношение пикселей по горизонтали, а второе по вертикали.
min-color Определяет минимальное количество бит на цветовую компоненту устройства вывода. Допускаются только положительные значения.
min-color-index Минимальное количество цветов, которое устройство может отображать. Отрицательные значения не допускаются.
min-height Задает минимальную высоту области просмотра (используются единицы измерения CSS).
min-monochrome Указывает минимальное количество бит на пиксель монохромного устройства. Если устройство не является монохромным, то значение будет равно 0. Допускаются только положительные целые числа.
min-resolution Указывает минимальное разрешение устройства вывода (например, монитор, или принтер). Разрешение может быть указано как в точках на дюйм ( dpi ), так и в точках на сантиметр ( dpcm ).
min-width Задает минимальную ширину области просмотра (используются единицы измерения CSS).
monochrome Указывает количество бит на пиксель монохромного устройства. Если устройство не является монохромным, то значение будет равно 0. Допускаются только положительные целые числа.
orientation Определяет, находится ли область просмотра в режиме альбомной ориентации — экран шире, чем высота, или в портретной ориентации — высота дисплея больше или равна ширине. Для альбомной ориентации используется значение: orientation : landscape , а для портретной и orientation : portrait .
resolution Указывает разрешение устройства вывода (например, монитор, или принтер). Разрешение может быть указано как в точках на дюйм ( dpi ), так и в точках на сантиметр ( dpcm ).
scan Указывает метод сканирования устройства вывода. Слово сканирование, используемое в этом контексте, не относится к сканеру изображений, например к сканеру, используемому для оцифровки фотографии. Скорее, это означает процесс, посредством которого изображение рисуется на телевизионном экране (или другом устройстве). Для того, чтобы указать тип развертки устройства, необходимо указать одно из значений: череcстрочная развертка — ( interlace ), прогрессивная развертка ( progressive ).
width Задает ширину области просмотра (используются единицы измерения CSS).

В настоящее время спецификации Media Queries Level 4 и Media Queries Level 5 включают некоторые улучшения синтаксиса и дополнительно вводят прочие мультимедийные функции, которые имеют ограниченную поддержку и возможно будут либо изменены, либо удалены к тому времени, когда они станут частью живого стандарта. По этой причине мы будем рассматривать в примерах лишь тот синтаксис и те функции, которые активно используются в настоящее время, к ним можно отнести такие как width , min-width , max-width , height , min-height и max-height .

Подключение медиазапросов с использованием тега

Вы можете подключать различные стили для различных устройств, используя HTML тег (определяет связь между документом и внешним ресурсом) и его атрибута media:

Обратите внимание, что в этом случае используется в качестве значения атрибута media тот же синтаксис, что и при использовании правила @media .

Подключение медиазапросов с использованием тега 2. Используя CSS правило @media внутри HTML тега

Обратите внимание, что при использовании атрибута media тега используется тот же синтаксис, что и при использовании правила @media .

Подключение медиазапросов с использованием правила @import

Кроме того, Вы можете использовать правило @import, которое позволяет копировать стили из других CSS файлов:

Учтите тот факт, что правило @import увеличивает число соединений с сервером, поскольку файл, на который вы ссылаетесь необходимо скачать и проанализировать (создается дополнительный запрос к серверу). Исходя из правил и рекомендаций PageSpeed Insight (Google), связанных с оптимизацией страниц, рекомендуется избегать применения правила @import.

Медиазапросы, используемые в Bootstrap 4

В этом разделе мы с Вами рассмотрим основные медиазапросы, которые используются в Bootstrap 4. Bootstrap это HTML, CSS и Javascript фреймворк для создания адаптивных страниц.

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

Давайте рассмотрим какие точки останова основанные на минимальной ширине (мультимедийная функция min-width ) используются в Bootstrap 4:

Bootstrap в основном использует вышеуказанные диапазоны запросов для макета, системы сеток и компонентов, но иногда используют и медиазапросы, которые идут в другом направлении (заданный размер области просмотра или меньше).

Давайте рассмотрим какие точки останова основанные на минимальной ширине (мультимедийная функция max-width ) используются в Bootstrap 4:

В Bootstrap 4 существуют также точки останова направленные на определенный сегмент размеров экрана с использованием минимальной и максимальной ширины области просмотра (мультимедийные функции min-width и max-width ):

Обратите внимание, что точки останова, направленные на опеределенный сегмент используют логический оператор and («И»), который используется для объединения нескольких медиазапросов в один, в нашем случае это значение для минимальной и максимальной ширины области просмотра.

Аналогичным образом медиазапросы могут охватывать несколько сегментов точек останова:

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

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

#1- Введение.

Учение — не только свет, по народной пословице, — оно также и свобода. Ничто так не освобождает человека, как знание… Тургенев И. С.

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

Три кита адаптивного дизайна

На первом вводном видеоуроке мы поговорим о самом понятии адаптивной верстки и дизайна, узнаем, из чего он состоит и что подразумевается под каждой из его частей.

Итак, адаптивный дизайн держится на трех китах: отзывчивом дизайне (Responsive design), Progressive Enhancement и Mobile first.

Отзывчивый дизайн, или Responsive design

Первый раз термин «отзывчивый дизайн» был упомянут Итаном Маркотом в его статье в мае 2010 г. Само это понятие включает в себя три технологии. Первая из них — Fluid grid (гибкая сетка макета), вторая технология — Flexible Media (весь медиа-контент сайта), и последняя из рассматриваемых технологий отзывчивого дизайна — это Media queiries (медиа-запросы). Все они будут подробно разобраны на следующих видеоуроках нашего курса.

Progressive Enhancement и Graceful degradation

Право авторства такого понятия адаптивного дизайна, как Progressive Enhancement принадлежит известному разработчику Арону Густафсону, который впервые ввел этот термин в своей книге. Под Progressive Enhancement подразумевается постепенное улучшение, когда верстка проекта начинается с самого простого к более сложному, современному, чтобы сайт мог корректно отображаться при помощи самого старого, но еще используемого браузера.

Подход к началу верстки проектов — есть главное отличие этой технологии от другой, совершенно противоположной — Graceful degradation (изящная деградация). При такой верстке разработка проектов идет от самого сложного. навороченного к простому.

Mobile first

Последняя технология, входящая в состав адаптивного дизайна — это Mobile first. Под ней понимается первоочередная разработка проектов для мобильных устройств, а затем уже для стационарных.

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

Приятного всем просмотра! Учитесь с удовольствием! Всегда ваш Loftblog.

Руководство для новичков: простой адаптивный сайт при помощи CSS

Все говорят об адаптивном веб-дизайне. Но значит ли это, что все понимают, для чего он нужен?

Респонсивный дизайн – это не только разработка сайтов для мобильных устройств, здесь речь идет об адаптации макетов под разные размеры экрана (viewports).

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

Важно понимать, что сайт не должен быть построен под конкретный рабочий стол или мобильное устройство. Здесь важна способность макета адаптироваться под различные размеры.

Разочарование пользователей

Некоторые люди думают, что сократить функционал и устранить контент, который они считают несущественным, это является нормальным для пользователя. Но как вы можете быть уверены, что информация, которую вы урезали или перенесли на вторичную страницу, не является контентом, который наиболее важный для меня?!

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

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

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

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

Пошаговое руководство

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

Ключевым элементом гибкости в адаптивном дизайне, является fluid ширина макета. Все, что вам нужно сделать, это создать wrapper, content и column widths, которые будут адаптироваться под различную ширину устройств. В этом нет ничего нового, но сейчас это важнее, чем когда-либо. Чтобы не усложнять задачу, мы создадим fluid страницу, состоящую из навигации, главного изображения и двух колонок, которая учитывает расположение на устройствах различных размеров. Мы, также включили respond.min.js, который позволяет медиа-запросам работать в IE6-8.

Основная HTML структура:

CSS

Когда дело доходит до CSS, то установить max-width, будет хорошей идеей, это остановит сайт от масштабирования на огромных экранах, но не будет удерживать от сокращения страниц. Один из основных вопросов при переключении с фиксированной ширины на fluid, это изображения. В CSS, есть простое решения этой проблемы. Просто установите ширину изображения на 100%. Также добавим auto для высоты изображений, чтобы избежать сплющенных изображений в Опере и Сафари на малых экранах:

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

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

Переключение главной навигации

Основная причина, почему вам надо сменить навигацию, это происходящая минимизация, которая может привести к нечитаемости и трудности нажатия кнопок. Используя этот метод, вы облегчите жизнь пользователя. Вы также можете заметить в коде, что мы внесли изменения в #main и aside разделы, для соединения их в одну колонку.

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

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

8 типичных ошибок проектирования адаптивного дизайна

Интернет-магазин нуждается в оптимизации под мобильные устройства. Эта задача решается при помощи адаптивного дизайн, который позволяет корректно отображать сайт на любых платформах. Однако внедрение адаптивного дизайна сталкивается со стандартным набором ошибок. Перечислим 8 наиболее распространенных проблем, характерных для сайтов интернет-магазинов.

Пренебрежение аналитикой поведения посетителей

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

Проектирование магазина для настольных компьютеров

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

Тестирование адаптивного дизайна

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

Недостатки адаптивного дизайна легко выявляются предварительным тестированием интернет-магазина, но многие продавцы не имеют на это ресурсов. Для снижения рисков потери денег, протестируйте ключевые маршруты пользователей по сайту в основных браузерах – Chrome, IE, Firefox, Safari и операционных системах – Windows, Mac OS, Android, IOS на популярных мобильных устройствах. Проводите тестирование каждый раз, когда вносите изменения, сервисы типа BrowserStack или Viewport Resizer, помогут сократить время тестирования до нескольких часов.

Мелкие элементы для мобильных экранов

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

Медленная скорость загрузки страниц

Мобильная аудитория любит быстрые сайты и минимальное время загрузки. Оцените составляющие ваших мобильных страниц – картинки, кнопки, текст, скрипты – они должны быть оптимизированы для мобильных устройств. Google учитывает время загрузки страницы в своей выдаче и маркирует мобильные сайты и отдает им предпочтение в топе, так что «легкие» сайты получают дополнительное серьезное преимущество.

Разносите контент по разным вкладкам, например страница товара может содержать только базовое изображение, описание, цену и кнопку «Купить». Отзывы покупателей и видеоролики можно вынести на отдельную вкладку и уменьшить «вес» основной части страницы. Кроме контента оптимизируйте и другие элементы влияющих на скорость загрузки – CSS-файлы, изображения и скрипты, отправляйте только необходимые данные. В этом вам помогут инструменты, которые уменьшают размер ресурсных файлов и время их загрузки: Uglify или JSCompress.

Урезание контента для мобильных пользователей

Нередко при разработке мобильного интернет-магазина, разработчики прячут часть контента, чтобы на мобильных устройствах загрузка шла быстрее. Однако часто размер страницы на самом деле не уменьшается, а контент просто не отображается для пользователя. Ваш магазин должен быть способен динамически генерировать страницу, уменьшая ее «вес» и сокращая время загрузки для мобильных посетителей. Кроме того, давать мобильным пользователям меньше контента – плохо, это негативно влияет на потребительский опыт. Как правило, в процессе покупки они используют разные устройства, так делает около 90% покупателей в Интернете. Ограничивать их методами адаптивного дизайна – большая ошибка.

Поддержка изображений только в одном разрешении

Хороший сайт с адаптивным дизайном автоматически меняет разрешение картинок в зависимости от типа устройства, тяжелые изображения увеличивают время загрузки. Существует несколько способов автоматической подстройки размеров изображения под конкретное устройство. «Гибкие» изображения (fluid images) – метод на базе CSS, который позволяет сжимать и растягивать картинку в зависимости от ширины содержащего ее элемента, или элемент HTML5

, позволяющий подгружать картинку нужного размера для каждого тип устройств.

«Неадаптивные» электронные письма

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

5 лучших инструментов для создания адаптивного веб-дизайна

В начале хочу сказать, что я не включил сюда «point-and-click» инструменты. Причина очень проста — я верю, что они плохи для всех: дизайнеры, клиенты, разработчики… страдают все. Дело не в качестве кода, и не в том, что работать в них «слишком просто». Дело в том, что эти программы всегда будут ограничивать своих пользователей, какими бы крутыми они не были.

Теперь к инструментам. Давайте начнём с очевидного:

1. Ваш браузер

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

Разве пользователь просматривает веб-сайт в Фотошопе? Используйте графические редакторы для редактирования изображений, а ваш браузер для разработки веб-сайтов.

Нашим клиентам пора отвыкать от мега-детализированных макетов, к которым они привыкли. Нам необходимо двигаться дальше, вместе с развитием интерактивных и «текучих» веб-технологий.

Установите хотя бы один браузер с хорошим рендерингом, а так же некоторые расширения для разработчиков. Привыкайте смотреть на исходный код так, как его видит браузер.

2. Проектирование в Google Drive

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

Я предпочитаю проектировщик Google Drive по нескольким причинам:

  • Социальная и совместная работа. Google предоставляет возможность обмена информацией лучше, чем кто-либо другой. Контекстные комментарии, одновременное редактирование и интеграция Hangout. Я влюблен.
  • Автоматические направляющие. В каждом документе направляющие создаются автоматически на основе размеров каждого элемента, введённого в документ. Это позволяет легко изобразить последовательные размеры элементов документа, что отлично подходит для таких одержимых сетками дизайнеров, как я.
  • Я делюсь с клиентами этими вайфреймами и они выглядят очень профессионально, что является большим плюсом.

Тем не менее я не ограничен направляющими и нахожу GDDA (Google Drive Drawing App) отличной альтернативой макетам приложений, которые пытаются ограничить вас границами сетки.

О, и это бесплатно. Надо ли говорить больше?

3. Style Prototypes

Style Prototypes встроен в браузер и даёт вам и клиентам возможность посмотреть, как цвета, типографика и элементы пользовательского интерфейса вашего сайта будут выглядеть. Так как он создан для просмотра в браузере, то будет меньше несоответствий после построения сайта.

Кроме того я считаю, что Style Prototypes поможет нашим клиентам мысленно отделить понятия UX и эстетики. И вообще всё, что помогает клиентам ближе понимать процесс веб-дизайна может быть только хорошо.

4. Responsinator

Responsinator — простой инструмент, который покажет сайт в различных размерах. Он показывает сайт на разных устройствах и экранах. Но тут есть пару нюансов.

Хотите посмотреть, как ваш сайт будет смотреться при маленьких размерах? Измените размер окна браузера. Хотите проверить сайт на мобильном устройстве? Лучше устроить реальное тестирование. Фактически этот инструмент для клиентов. Инструмент, что бы показать им разницу экрана настольного компьютера и ноутбука. Небольшого смартфона и планшета. А так же всё остальное в этом духе.

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

5. Adobe Edge Inspect

Теперь инструмент для вас. Если у вас есть мобильная лаборатория тестирования (и чем раньше вы сможете сделать её, тем лучше) Edge Inspect будет синхронизировать все ваши устройства, что бы посмотреть одну и ту же страницу. Обновите страницу на одном устройстве и обновятся все.

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

Заключение

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

А какие инструменты используете вы? Напишите свой топ-5 в комментариях!

Руководство по разработке адаптивного дизайна для новичка

Что же такое адаптивный/реагирующий дизайн?

Давайте начнем с самого начала. Верите или нет, но блог Think Vitamin, с которого был взят оригинал статьи, уже оборудован адаптивным дизайном. Для того чтобы увидеть его в действии, откройте страницу с данной статьей в окне браузера, и дальше медленно уменьшайте или увеличивайте окошко по горизонтали. Вы заметите, как шаблон автоматически подстраивается под размер окошка и предоставляет вам сайт в наиболее комфортном образе. Вы даже можете попробовать открыть эту страницу на мобильном устройстве. Давайте ознакомимся со скриншотами того, как выглядит сайт на различных разрешениях экрана:

Нельзя говорить о адаптивном дизайне, и не упомянуть при этом его создателя, Итана Маркотта (Ethan Marcotte). Если вы не читали его конструктивную статью о адаптивном веб-дизайне, то мы настоятельно рекомендуем вам ознакомиться с ней (серьезно, она обязательна к прочтению). В этой статье Итан обсуждает все ключевые идеи, формирующие адаптивный веб-дизайн; и что на самом деле представляет собой это свойство дизайна с технической точки зрения. Это не просто кусочек технологии, это больше набор техник и идей, которые формируют единое целое. Это и есть главная причина путаницы. Но прямо сейчас мы постараемся развеять все недопонимания и познакомить вас с каждой частью по-отдельности.

Так что же такое адаптивный дизайн на самом деле? На самом деле, лучше будет спросить «Какие проблемы адаптивный дизайн помогает решить?». Итак, как вы, вероятно, уже могли заметить, компьютеры более не являются единственным устройством, через которое люди сидят в интернете. Возможно, мы опорочим свой статус подобным заявлением, но нам кажется, что iPhone является первым мобильным устройством, в котором действительно по-настоящему был реализован веб-браузер. Это устройство дало толчок всему миру мобильных девайсов. Многие другие производители последовали примеру, и в целом изменился весь облик мобильного мира.

Изменение «ландшафта» веб-браузеров означает также то, что изменились и ожидания пользователей; людям хочется пользоваться интернетом посредством мобильных устройств так же просто, как они делают это с помощью компьютеров. Итак, в ответ на это (извините за каламбур) сообщество веб-дизайнеров начало разрабатывать мобильные версии веб-сайтов. Оглянувшись назад, вряд ли можно сказать, что это было решением проблемы, но в то время эта идея казалась вполне разумной и резонной. У каждого веб-сайта должно было быть две версии: основная версия «для рабочего стола», а также, в качестве бонуса, «мобильная» версия.

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

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

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

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

Гибкие сетки

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

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

Для того чтобы высчитать пропорции для каждого элемента на странице, вы должны разделить указанный элемент по контексту. На данный момент наилучшим способом является создание высококачественного (высокоточного) наброска в редакторе изображений, позволяющем работать с пиксельной точностью (например, Photoshop). Имея свой набросок высокой точности, вы можете измерить элемент на странице, и разделить его на полную ширину страницы. Например, если ширина вашего шаблона равна 960 пикселей, то это и будет значение вашего элемента «container». Затем давайте предположим, что наш указанный элемент имеет ширину в 300 пикселей. Если мы разделим результат на 100, то получим процентное соотношение равное 31.25%. Его мы и можем применить к нашему элементу. Вот наш расчет:

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

Гибкие сетки очень важны в процессе разработки адаптивного дизайна, но они могут помочь нам не во всех случаях. Когда ширина браузерного окна становится совсем небольшой, дизайн начнет преломляться. Например, полноценный 3-колонный шаблон вряд ли будет нормально отображаться на маленьком экране мобильного устройства. К счастью, адаптивный дизайн и об этом позаботился… за счет media queries.

Media Queries

Вторая часть адаптивного дизайна заключается в CSS3 media queries, которые на данный момент поддерживаются почти во всех современных браузерах. Если вы не знакомы с CSS3 media queries, то эта технология в основном позволяет вам собирать данные о посетителе сайта, и использовать их для применения соответствующих стилей CSS. В нашем случае мы ориентированы на свойство min-width, которое позволяет нам применять определенные CSS-стили, если размер окна браузера подпадает под определенную ширину, которую мы можем задать. Если мы хотели применить стилизацию к мобильным телефонам, то наш media query выглядел бы примерно так:

@media screen and (min-width: 480px) <

Используя серию media queries типа таких, мы можем и дальше делать нашу работу, даже при больших разрешениях. Мы рекомендуем вам использовать следующие наборы разрешений в пикселях:

* 320px, 480px, 600px, 768px, 900px, 1200px

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

Опять же, для того, чтобы увидеть адаптивный дизайн в действии, вы можете просто открыть исходник данной статьи через браузер на настольном ПК, а затем просто уменьшить окно в размерах. Вы увидите, как элементы на страницах масштабируются магическим образом.

Добавить комментарий