Основы адаптивного Веб





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

Но возникает вопрос: как проверять адаптивность сайта? Вот прописали вы media запросы в CSS, подключили bootstrap и используете нужные классы. А как вы проверите, что на всех разрешениях экрана сайт правильно адаптируется. Я для этих целей рекомендую использовать следующий онлайн сервис – http://quirktools.com/screenfly/. Просто введите URL страницы для проверки и переключайте разрешения экранов в панели управления. Очень точный и главное бесплатный сервис, который заслуживает уважение и благодарности от веб-мастеров и верстальщиков, которые занимаются адаптивной версткой сайтов. Ну как вам статья? Все понятно? Если нет, пишите в комментарии, будем разбираться вместе. Да, чтобы сделать адаптивный дизайн сайта, нужно хорошо потрудится. Но эти труды вознаградятся благосклонным отношением к вашему сайту поисковиков, и самое главное посетителей вашего сайта.

Предисловие

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

CSS-фреймворки

CSS-фреймворк — фреймворк, созданный для упрощения работы верстальщика, быстроты разработки и исключения максимально возможного числа ошибок вёрстки (проблемы совместимости различных версий браузеров и т. д.). Данные фреймворки подразумевают использование различных подходов для корректного отображения сайтов на устройствах любого размера. Многие разработчики предпочитают использование CSS-фреймворков, вместо прописывания всех стилей вручную. Это обусловлено следующими причинами:
  • Более быстрая разработка
  • Поддержка кроссбраузерности
  • Поддержка различных устройств и размеров экранов
  • Единообразие кода при работе в команде позволяет снизить число разногласий при разработке.
Как и библиотеки скриптовых языков программирования, CSS-библиотеки, обычно имеющие вид внешнего CSS-файла, добавляются в заголовок веб-страницы. Рассмотрим самые популярные CSS-фреймворки.

Bootstrap

Самый популярный фреймворк для разработки адаптивных и мобильных web-проектов. Bootstrap – это инструмент с открытым исходным кодом для разработки сайтов с помощью HTML, CSS и JS. Bootstrap – интуитивно простой и в тоже время мощный интерфейсный фреймворк, повышающий скорость и облегчающий разработку web-приложений. Bootstrap легко и эффективно масштабирует ваш проект с одной базой кода – от телефонов и планшетов до настольных компьютеров. Для этого используется 12-колоночная сетка: В дополнение к CSS данный фреймворк включает в себя поддержку двух самых популярных CSS-препроцессоров: Less и Sass. Отличительные черты:
  • 12 – колоночная сетка
  • Большое количество готовых для использования компонентов
  • Поддержка Less и Sass
  • Использование Normalize.css.

Material Design for Bootstrap

Material Design for Bootstrap – это инструментарий с открытым исходным кодом для разработки приложений, основанный на Bootstrap и использующий подходы Material Design. Фреймворк позволяет быстро создавать приложение с помощью переменных Sass, адаптивной сетки, большого количества готовых компонентов и мощных плагинов, реализованных на jQuery. Отличительные черты:
  • 12 – колоночная сетка
  • Большое количество готовых для использования компонентов в соответствии с концепцией Material Design.

Materialize

Materialize – современная, адаптивная платформа, построенная на принципе материального дизайна. В платформу включен набор компонентов, а также стили для них. Проработаны анимации и эффекты в компонентах, чтобы они были максимально плавными. Все элементы и анимации интуитивны и понятны пользователю, а единый адаптивный дизайн упрощает UX для всех платформ. Отличительные черты:
  • 12 – колоночная сетка
  • Большое количество готовых для использования компонентов в соответствии с концепцией Material Design
  • Поддержка Sass.

Bulma

Bulma – современный CSS-фреймворк основанный на новом способе отображения Flexbox. Flexbox – самый современный инструмент компоновки, доступный в CSS. Отличительные черты:
  • Использование Flexbox вместо колоночной сетки
  • Большое количество готовых для использования компонентов
  • Поддержка Sass
  • Не используются JS-файлы

Pure

Pure – набор небольших адаптивных CSS-модулей, которые вы можете использовать в любом веб-проекте. Pure построен на Normalize.css и предоставляет разметку и стили для собственных HTML-элементов, а также наиболее распространенные компоненты пользовательского интерфейса. Pure – адаптивный фреймворк, поэтому элементы отлично смотрятся на всех размерах экрана. Pure имеет минимальные стили, что подразумевает написание собственных кастомизированных стилей. Отличительные черты:
  • 24 – колоночная сетка
  • Модульный фреймворк
  • Не используются JS-файлы
  • Использование Normalize.css
  • Минимальное количество готовых компонентов и стилей.

Заключение

Быстрый рост популярности просмотра сайтов на мобильных устройствах обуславливает необходимость реализации удобного и читабельного отображения компонентов в независимости от типа устройств и размеров экранов. Рассмотренные в данной статье подходы помогут создавать сайты для различных устройств и размеров экранов. Описание CSS-фреймворков упростит выбор подходящего фреймворка для использования в проекте. Feature Teams Проект “Система для прогноза курса криптовалют на основе анализа текста” опубликован в портфолио

Резиновый (гибкий) макет сайта

Резиновый (гибкий) макет сайта — это макет, который изменяется в зависимости от ширины рабочей области окна (вкладки) браузера. Потребность в такой разметке возникла, когда у многих пользователей появились мониторы, имеющие диагональ 19″, 21″ и больше. В этот период времени сложилась такая ситуация, когда у одних пользователей были маленькие мониторы, а у других средние и большие. Разрешения, которые были установлены на этих мониторах стали сильно отличаться, и уже трудно было выбрать для макета какую-то определённую ширину. Выходом из этой ситуации стало создание разметки, в которой блоки имеют не строго фиксированную ширину, а резиновую (обычно заданную в процентах). Такой макет в отличие от фиксированного уже мог «подстраиваться» под размеры монитора, т.е. изменять свои размеры. Пример верстки первого макета:
<style>
body {
  margin: 0;
}
.aside {
  float: left;
  width: 250px;
}
.main {
  margin-left: 250px;
}
</style>

<div class="container">
  <aside class="aside">
    ASIDE
  </aside>
  <main class="main">
    MAIN
  </main>
</div>
Пример верстки второго макета:
<style>
body {
  margin: 0;
}
.aside {
  float: left;
  width: 25%;
}
.main {
  margin-left: 25%;
}
</style>

<div class="container">
  <aside class="aside">
    ASIDE
  </aside>
  <main class="main">
    MAIN
  </main>
</div>
После десктопов начали появляться и другие электронные устройства. В настоящее время просматривать сайты можно с помощью смартфонов (размер экрана от 3″ до 6″), планшетов (от 7″ до 10″), ноутбуков (10″ и выше), десктопов (19″ и выше) и TV (32″ и выше). Резиновый (гибкий) макет нельзя спроектировать так, чтобы он оптимально отображался на всех этих устройствах, т.к. он рассчитан на определённый диапазон или класс устройств. Чтобы было понятно, выполним расчёты на примере вышеприведённого резинового макета. А именно вычислим ширину блоков (1 и 2), которые они будут иметь на смартфоне с горизонтальным разрешением 320рх. В первом варианте: 1 блок — 250рх, 2 блок — 70рх. Во втором: 1 блок — 80рх, 2 блок — 240рх. Как видно из расчётов, сайт, имеющий такой резиновый (гибкий) макет выглядеть на смартфонах будет просто ужасно.

Адаптивный дизайн изначально для мобильных устройств

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

Преимущества

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

Недостатки

  • Занимает много времени. Давайте смотреть правде в глаза, «сначала мобильные» — это далеко не самый быстрый принцип. Он занимает много времени и сил на построение всего с нуля. Нужно сделать всё так, чтобы это стоило потраченных ресурсов.
  • Сдвиг в сознании. Довольно сложно заставить организации думать обо всём другим образом. Мышление, направленное на разработку изначально для мобильных устройств, переворачивает всё с ног на голову, что усложняет использование подходов, к которым люди привыкли за много лет. Для этого требуется забыть их (к счастью, об этом есть книга) и постоянно напоминать людям не возвращаться к старым методам.
  • Организационно сложно. Большой редизайн обычно усложняется различными видами организационной бюрократии. Президент компании хочет высказать свое мнение по поводу дизайна, несмотря на то, что его не было ни на одном предварительном собрании о том, что вообще такое адаптивный дизайн. На пути создания интерфейса, который будет отлично выглядеть и функционировать на любом устройстве, могут также встать амбиции других людей и политика.
  • Незнакомо. Любой редизайн делает интерфейс незнакомым для пользователей. Но чтобы сохранить знакомый подход, особенно если вы собрались всё кардинально менять, нужно быть предельно осторожным.

Адаптивная вёрстка с технической точки зрения

Сама вёрстка начинается с максимального расширения экрана – 1920х1080px. Когда сайт полностью свёрстан, начинается подгонка под различные расширения экрана, в этом вам может помочь браузер Google Chrome. В данном браузере существует консоль, которая помогает отследить как визуально выглядит сайт на различных размерах экрана. Достаточно нажать клавишу на клавиатуре F12, либо нажать правой кнопкой мыши на нужный элемент и выбрать «Просмотреть код» и браузер выведет HTML-разметку и CSS-свойства элементов. Во многих современных браузерах есть консоль для просмотра кода, где вы в режиме реального времени можете изменить любые стили CSS или HTML-разметку. Браузер Chrome и Яндекс.Браузер предлагает широкий набор для разработчиков, к примеру, можно найти ошибки в JS-коде или найти нужный фрагмент HTML-разметки.

Смета

  • В проектировании время увеличилось на 30%. Это полностью покрыло время на создание адаптивного прототипа.
  • Добавилась строка «Описание поведения активных элементов на гаджетах — 3ч»;
  • В верстке время каждого макета увеличилось в 1,5 раза + скорректировались риски;
  • Тестирование верстки также увеличилось в 1,5 раза + скорректировались риски;
  • Отладка верстки увеличилась в 2 раза.
  • Во-первых, сохранять спокойствие;
  • Во-вторых, объяснить клиенту, что технологический процесс будет с нуля, так как верстку нужно полностью переделать;
  • В-третьих, если клиент сильно придирчив, то нужно объяснить, что большая версия немного изменится, так как нужно будет ее привести к новой сетке.
  • Проектировщик должен составить прототип, учитывая структуру текущего сайта, и выстроить блоки так, чтобы логика при перестроении не ломалась. Смело увеличивайте время в 2 раза от базовой сметы. Помните, проектировщик здесь делает самую ответственную работу.
  • Дизайнер. Тут можно вложить дизайн двух разрешений одной страницы в бюджет, но тогда его будет сложно утвердить, да и не очень-то профессионально это 🙂 Я рекомендую закладывать работу дизайнера на задачи типа «Отрисовка иконок в SVG» (вы ведь пользуетесь им, да? 21 век на дворе), «Отрисовка дополнительных элементов сайта» (например: внешний вид галереи для телефонов, меню, подсказки форм и т.п.).
  • В верстке и далее все как в проекте «с нуля» (см. выше).

Forefathers Group

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

Выводы и пояснения

Как некоторые из вас могли заметить, сайт The Marketing Agents имеет адаптивный дизайн. О ужас! Я не пытаюсь внушить вам, будто RWD не может быть хорошим решением, но говорить, что это правильный выбор для всех — все равно, что утверждать, что все должны ездить на Prius из-за экономичного расхода топлива. Попробуйте продать эту машину главному подрядчику, работающему на стройплощадке, или маме, которая по очереди с соседями должна возить шестерых детей на тренировку по футболу. Со временем, когда дизайнеры станут более опытными в разработке адаптивного дизайна, поймут его недостатки и найдут обходные пути, они смогут создавать сервисы, более удобные и полезные для конечных пользователей и, что не менее важно, для владельцев бизнеса. Но сейчас нельзя забывать и о других способах создания мобильных сайтов Но сейчас нельзя забывать и о других способах создания мобильных сайтов. Если вы знаете кого-то, кто собирается заказать разработку мобильного веб-сайта, или кого-то, кто считает адаптивный дизайн величайшим изобретением после луковых колец при простуде, пожалуйста, поделитесь с ними ссылкой на эту статью. Если вы думаете, что автор этого поста сошёл с ума, дайте знать об этом в комментариях. От редакции Если ваш бюджет ограничен и вы думаете о том, от чего стоит отказаться в начале, чтобы весь остальной проект был реализован на высшем уровне – обратитесь к участникам рейтинга веб-студий. Лидеры рейтинга знают лучше всех, каким именно образом решить вопрос удобства работы с сайтом мобильных посетителей и в каких случаях действительно стоит им пожертвовать, а в каких – нет. Чтобы у вас была только достоверная и объективная информация, для составления этого рейтинга мы ежегодной изучаем десятки тысяч сайтов, запущенных в Рунете. Оригинал: http://www.themarketingagents.com/responsive-design-problems

С этим читают