4 инструмента для упрощения разработки адаптивного дизайна


Оглавление (нажмите, чтобы открыть):

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

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

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

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

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

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

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

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

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

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

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

Как сказали в UXMag:

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

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

Как красноречиво отметила автор издания 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. Фреймворки

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

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

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

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

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

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

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

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

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

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

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

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), который будет более агрессивно заменять переменные и имена функций на одиночные буквы. Независимый веб-разработчик Майк Беквит (Michael Beckwith) рекомендует сохранять неминифицированные копии CSS и JavaScript-файлы для рабочей копии сайта, а на «боевой» версии использовать минифицированные.


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

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

Ссылки по теме

Популярные статьи
Информационная безопасность Microsoft Офисное ПО Антивирусное ПО и защита от спама Eset Software


Бестселлеры
Курсы обучения «Atlassian JIRA — система управления проектами и задачами на предприятии»
Microsoft Office 365 для Дома 32-bit/x64. 5 ПК/Mac + 5 Планшетов + 5 Телефонов. Подписка на 1 год. Электронный ключ
Microsoft Windows 10 Профессиональная 32-bit/64-bit. Все языки. Электронный ключ
Microsoft Office для Дома и Учебы 2020. Все языки. Электронный ключ
Курс «Oracle. Программирование на SQL и PL/SQL»
Курс «Основы TOGAF® 9»
Microsoft Windows Professional 10 Sngl OLP 1 License No Level Legalization GetGenuine wCOA (FQC-09481)
Microsoft Office 365 Персональный 32-bit/x64. 1 ПК/MAC + 1 Планшет + 1 Телефон. Все языки. Подписка на 1 год. Электронный ключ
Windows Server 2020 Standard
Курс «Нотация BPMN 2.0. Ее использование для моделирования бизнес-процессов и их регламентации»
Антивирус ESET NOD32 Antivirus Business Edition
Corel CorelDRAW Home & Student Suite X8

О нас
Интернет-магазин ITShop.ru предлагает широкий спектр услуг информационных технологий и ПО.

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

Хорошие отзывы постоянных клиентов и высокий уровень специалистов позволяет получить наивысший результат при совместной работе.

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 инструментов для создания адаптивного дизайна, которые лучше, чем Photoshop

Photoshop – популярнейшая программа среди дизайнеров, а с такими расширениями, как CSS3Ps и FontAwesomePS это хороший инструмент для разработки прототипов веб-сайтов. Тем не менее, его создавали не для этой цели. А учитывая растущие требования к высокой адаптивности дизайна, CSS препроцессорам, CSS рамкам и независимой от разрешения графике (SVG), Photoshop теряет актуальность в сфере веб-дизайна.

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

1. WebFlow

WebFlow позволяет проектировать веб-сайты способом оперирования drag-and-drop. Этот конструктор создает макет, основанный на сетке Bootstrap и поставляется с набором таких стандартных веб-компонентов, как текстовые блоки, списки и форматирование текста, которые вы можете добавить в рабочее пространство WebFlow.

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

2. Avocode

Avocode поддерживает PSD файлы и позволяет редактировать и преобразовывать их в работоспособный сайт с HTML и CSS. Avocode извлекает все активы в ваш проект, в том числе CSS, изображения и SVG (если таковые имеются). Вы можете легко извлечь CSS в виде Less, SASS или Stylus для любого выбранного слоя с интегрированным CSSHat.

Avocode оснащен контролем версий, который позволяет вернуться к предыдущей конструкции на случай, если что-нибудь пойдет не так.

3. Macaw

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

Для создания адаптивного дизайна Macaw позволяет устанавливать контрольные точки и оптимизировать свой сайт для всех устройств. Когда процесс проектирования будет завершен, Macaw может сгенерировать правильный HTML и CSS.

4. Sketch

Sketch идеально подходит для проектирования интерфейсов и веб-сайтов. Этот инструмент создает векторные объекты, а не растровые. Таким образом, если вы измените размер холста, дизайн не утратит качество. Такие функции, как «built-in grid» помогут лучше организовать размещение объекта или веб-макета.


Sketch отображает шрифты, похожие на то, что показывает Webkit (вероятно, Chrome, Opera и Safari). Таким образом, вы избавитесь от беспокойства по поводу не резкого и не точного отображения текста в браузере по сравнению с оригиналом. Sketch может экспортировать CSS для каждого элемента в слое.

5. Antetype

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

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

5 лучших CSS-фреймворков для верстальщиков и веб-мастеров

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

  • Кроссбраузерность
  • Возможность создать корректный HTML макет даже не очень опытному специалисту
  • Единообразие кода
  • Увеличение скорости разработки
  • Привязанность к стилю CSS библиотеки
  • Избыточный код

Bootstrap

Один из самых известных CSS-фреймворков на сегодняшний день. Имеет в своем составе шаблоны для отрисовки кнопок, сайдбаров, навигационных панелей, форм и других элементов сайта. Включает себя JavaScript-расширения.
Основные инструменты bootstrap — шаблоны, @media, формы, навигация, алерты, типографика и конечно же, сетки. Bootstrap совместим со всеми основными современными браузерами, но в старых версиях браузеров могут быть проблемы. Поддерживает адаптивность. Использует языки Less и Sass.

Skeleton

Основан на JavaScript и CSS, используется для быстрого и безошибочного создания адаптивных сайтов которые корректно отображаются как на больших мониторах, так и на экранах маленьких гаджетов. Большой плюс Skeleton — его можно приспособить под любой дизайн. Сетка разметки содержит 12 колонок и имеет базовую ширину 960 пикселей. Совместим со всеми основными браузерами.

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

Foundation

Распространенный CSS-фреймворк. Наряду с другими основными элементами включает в себя несколько HTML шаблонов с различным расположением блоков на странице. Имеет большой набор компонентов на JavaScript. Очень серьезный по своим возможностям и составу фреймворк. Использует Sass. Совместимость кода со всеми основными браузерами.

Semantic UI

Поддержка Firefox, Chrome, Safari, Internet Explorer, Android 4, Blackberry10. Содержит большое количество компонентов: иконки, изображения, надписи, меню и другие стандартные компоненты. Поддерживает последние версии HTML и CSS и имеет хорошую подборку скриптовых модулей и API. Использует Less. По применимости соревнуется с bootstrap. Есть вариант на русском языке, но неполный, а организаторы проекта предлагают помочь в переводе.

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

Какими фреймворками пользуетесь? Расскажите в комментариях.

Верстка, фреймворки и не только в профессиональном курсе для будущих веб-мастеров «Веб-разработчик».

источник изображения http://mdex-nn.ru/

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

  • Кроссбраузерность
  • Возможность создать корректный HTML макет даже не очень опытному специалисту
  • Единообразие кода
  • Увеличение скорости разработки
  • Привязанность к стилю CSS библиотеки
  • Избыточный код

Bootstrap

Один из самых известных CSS-фреймворков на сегодняшний день. Имеет в своем составе шаблоны для отрисовки кнопок, сайдбаров, навигационных панелей, форм и других элементов сайта. Включает себя JavaScript-расширения.
Основные инструменты bootstrap — шаблоны, @media, формы, навигация, алерты, типографика и конечно же, сетки. Bootstrap совместим со всеми основными современными браузерами, но в старых версиях браузеров могут быть проблемы. Поддерживает адаптивность. Использует языки Less и Sass.

Skeleton

Основан на JavaScript и CSS, используется для быстрого и безошибочного создания адаптивных сайтов которые корректно отображаются как на больших мониторах, так и на экранах маленьких гаджетов. Большой плюс Skeleton — его можно приспособить под любой дизайн. Сетка разметки содержит 12 колонок и имеет базовую ширину 960 пикселей. Совместим со всеми основными браузерами.

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

Foundation

Распространенный CSS-фреймворк. Наряду с другими основными элементами включает в себя несколько HTML шаблонов с различным расположением блоков на странице. Имеет большой набор компонентов на JavaScript. Очень серьезный по своим возможностям и составу фреймворк. Использует Sass. Совместимость кода со всеми основными браузерами.

Semantic UI

Поддержка Firefox, Chrome, Safari, Internet Explorer, Android 4, Blackberry10. Содержит большое количество компонентов: иконки, изображения, надписи, меню и другие стандартные компоненты. Поддерживает последние версии HTML и CSS и имеет хорошую подборку скриптовых модулей и API. Использует Less. По применимости соревнуется с bootstrap. Есть вариант на русском языке, но неполный, а организаторы проекта предлагают помочь в переводе.

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

Какими фреймворками пользуетесь? Расскажите в комментариях.

Верстка, фреймворки и не только в профессиональном курсе для будущих веб-мастеров «Веб-разработчик».

Как сделать адаптивный сайт под все разрешения экрана

Приветствую вас, случайные посетители и постоянные читатели блога Royal-Site.ru!

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


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

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

Как сделать адаптивную верстку сайта

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

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

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

Как так? Я стал перепроверять все стили, правильно ли я прописал классы, в итоге дошел до того, что через javascript проверил ширину окна браузера в px. Я был в шоке. При проверке на ноутбуке я получил результат 1024px, и примерно такой же результат я получил открыв сайт на смартфоне!

Но ведь этого не может быть!

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

Из-за своей глупости и некомпетентности я потерял очень много времени. Зато теперь запомнил навсегда))).

Адаптивная верстка CSS media запросы

Чтобы сделать адаптивную верстку сайта с помощью CSS, необходимо использовать media запросы.

Это как? Да, очень просто. В CSS файле нужно прописать запросы типа:

Это код означает, что стили заключенные между “ < >” будут работать для экранов с минимальной шириной 1440px и максимальной 1599px.

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

Самые важные разрешения экрана, при адаптивной верстке

  • 320 px — Мобильные устройства (портретная ориентация);
  • 480 px — Мобильные устройства (альбомная ориентация);
  • 600 px — Небольшие планшеты;
  • 768 px — Планшеты (портретная ориентация);
  • 1024 px — Планшеты (альбомная ориентация)/Нетбуки;
  • 1280 px и более — PC.

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

bootstrap адаптивный дизайн

Очень удобно использовать для создания адаптивной верстки bootstrap. Удобство в том, что все стили для адаптации блоков, кнопок, таблиц и т.д. уже прописаны в bootstpap. Нужно только разобраться какой класс к какому элементу присвоить.

Для начала, качайте свежую версию bootstrap и подключите его к своему сайту. Учтите, что подключение стилей и скриптов к wordpress имеет свои особенности.

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

Например, такая конструкция позволит выделить один широкий блок для контента шириной в 8 частей и один узкий для сайдбара шириной в 4 части экрана:

Ширина блоков будет рассчитываться автоматически в зависимости от ширины экрана. А при просмотре на мобильном устройстве эти блоки будут смещаться друг под друга.

Также можно регулировать отступ блок от края, опять же, на нужное количество частей. Например такая конструкция:

Будет создан блок шириной в 10 частей с отступом слева в 1 часть экрана.

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

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

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

Но возникает вопрос: как проверять адаптивность сайта? Вот прописали вы media запросы в CSS, подключили bootstrap и используете нужные классы. А как вы проверите, что на всех разрешениях экрана сайт правильно адаптируется.

Я для этих целей рекомендую использовать следующий онлайн сервис – http://quirktools.com/screenfly/ . Просто введите URL страницы для проверки и переключайте разрешения экранов в панели управления.

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

Ну как вам статья? Все понятно? Если нет, пишите в комментарии, будем разбираться вместе.

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

Десять проблем адаптивного дизайна и их решения

Это перевод статьи Кирилла Стрельченкова «10 Responsive Design Problems and Fixes».

Благодаря адаптивным сайтам, быстро подстраивающимся под любое устройство и размер экрана, интернет меняется, чтобы предоставить пользователю наилучший опыт. Начиная с межнациональных корпораций, таких, как Sony, Microsoft и Nokia, и заканчивая мировыми техническими знаменитостями (Salesforce) и онлайн-гигантами для путешествий (Expedia), серьёзные игроки поворачиваются к адаптивному веб-дизайну, чтобы идти в ногу с современными тенденциями и достичь ещё более широкой аудитории.

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

1. Более проблематичный этап визуализации

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

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

2. Навигация


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

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

3. Качество фоновых изображений и иконок

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

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

4. Отображение данных на маленьких экранах

Отображение таблиц с данными (например, расписание авиарейсов) на маленьких экранах — настоящая проблема.

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

5. Быстрая загрузка на всех устройствах

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

Решение: постепенная загрузка, которая позволяет загружать только то, что нужно пользователю. Правило следующее: первым загружается контент, затем улучшения, a потом всё остальное. Используя подход «сначала мобильные», для пользователей, привыкших к большому числу контента, дизайнеры должны оставить только те элементы, которые необходимы. Распространение мобильных устройств опережает настольные компьютеры, поэтому постепенная загрузка — это решение. Благодаря использованию средств автоматизации для масштабирования и кэширования изображений, последующие изменения на сайте становятся проще. Из-за того, что соединение пользователя может быть неидеальным, производительность очень важна.

6. Длительные этапы дизайна, разработки и тестирования

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

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

7. Скрытие и удаление содержимого

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

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

8. Перевод фиксированных сайтов в адаптивные

Существует большая дилемма: менять ли менее гибкий код фиксированной вёрстки или оставить как есть и по-прежнему обеспечивать приемлемую производительность?

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

9. Старые версии Internet Explorer не поддерживают CSS3 медиавыражения

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

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

10. Не все понимают, зачем им использовать адаптивный дизайн

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

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

Заключение

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

Инструменты, методы, шаблоны и платформы для разработки адаптивного дизайна сайтов

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

Адаптивный дизайн позволит веб-сайту идеально работать на любом устройстве и экране любого размера или разрешения. Неважно, с какого устройства пользователь просматривает страницу, будь то смартфон с разрешением экрана 320 пикселей, планшет с разрешением от 768 до 1024 пикселей, либо современный нетбук или монитор, разрешение экрана которого достигает 1680 пикселей. Так как же вы собираетесь разрабатывать адаптивный дизайн сайта? Сегодня дизайнеры применяют динамичные значения ширины, указанные в процентном соотношении или в em, изображения, способные подстраиваться под пропорции страницы, а также гибкие сетки, способные адаптироваться под размеры окна браузера или под разрешение дисплея. Так что, можно быть полностью уверенным в том, что веб-сайт будет одинаково выглядеть как на большом мониторе стационарного ПК, так и на 10-дюймовом дисплее нетбука.

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

Инструменты и методы разработки

Ниже приведена подборка инструментов и методов, помогающих в разработке адаптивных дизайнов сайтов.

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

Помогает изменять окно браузера в размере. Вам просто нужно будет кликнуть на указатель размера, в котором вы хотели бы увидеть свой сайт. Сервис не работает в Chrome и Opera из-за некоторых проблем с событием ResizeTo.

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

Складывающаяся сетка для разработки адаптивного дизайна.

Adobe® Device Central CS5.5 упрощает процесс разработки контента для мобильных телефонов, планшетов и других устройств.

Шаблоны и платформы

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

Mobile Boilerplate представляет собой уже зарекомендовавший себя шаблон, предназначенный для разработки богатых и производительных мобильных веб-приложений. Вы сможете получить кросс-браузерный контент для смартфонов класса «А», а также возможность отката для доисторических моделей Blackberry, Symbian и IE Mobile. Вы получаете возможность бесплатной офлайн-установки, различные кнопки, возможность работы с media queries, а также различные инструменты для разработки WebKit-оптимизированных мобильных приложений. Воспользуйтесь Mobile Boilerplate для разработки своего мобильного веб-приложения.

Skeleton представляет собой небольшой набор CSS и JS-файлов, которые помогут вам быстро разрабатывать привлекательные сайты любого размера, будь то проект, предназначенный для настольного ПК или iPhone.


Данные CSS3 Media Queries представляют собой своеобразные «заглушки» для определения устройств и их атрибутов.

Забавный великолепный способ разработки веб-сайтов с гибким каркасом.

CSS-платформа для скорой разработки интерактивных прототипов.

Less Framework представляет собой сеточную CSS-систему, предназначенную для разработки адаптивных веб-сайтов. Она содержит 4 шаблона и 3 набора типографики.

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

inuit.css предназначен для работы на маленьких дисплеях (планшетах) или совсем миниатюрных (мобильные телефоны).

Кросс-браузерная сеточная CSS-платформа, которая не скрывает пиксели в границы.

Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Кейс: Адаптивный дизайн как инструмент SEO

Время чтения: 4 минуты Нет времени читать? Нет времени?

Поисковая оптимизация – мы об этом говорим постоянно – область очень инертная, и во многом благодаря мощному лобби самих же seo-компаний. Закупка ссылок на биржах, перелинковка, мета-теги… — честно говоря, уже скучно про все это читать. Давайте поговорим о таком инструменте увеличения поискового трафика, как адаптивный дизайн сайта.

Адаптивный веб-дизайн (англ. Responsive web design) — дизайн веб-страниц, обеспечивающий отличное восприятие на различных устройствах, подключённых к интернету. Целью адаптивного веб-дизайна является универсальность веб-сайта для различных устройств. Для того, чтобы веб-сайт был удобно просматриваемым с устройств различных разрешений и форматов, по технологии адаптивного веб-дизайна не нужно создавать отдельные версии веб-сайта для отдельных видов устройств. Один сайт может работать на смартфоне, планшете, ноутбуке и телевизоре с выходом в интернет, то есть на всем спектре устройств.[Wikipedia.org]

По прогнозам компании Cisco, объем мобильного трафика только с 2011 года по 2020-ый год увеличится в 18 раз. В таких странах, как Индия и Китай, трафик с мобильных устройств уже сейчас превосходит трафик со стационарных устройств. Естественно, этот тренд не может не учитываться поисковиками.

Например, поисковик Google вот здесь дает рекомендацию черным по белому использовать адаптивный веб-дизайн: «Google recommends webmasters follow the industry best practice of using responsive web design».

Очевидно, что наличие/отсутствие адаптивного веб-дизайна является фактором, влияющим на «счастье пользователя», соответственно – и на органическую выдачу поисковиков.

Разберем это влияние на выдачу на примере собственного сайта. Сайт на адаптивной верстке мы запустили 30 августа 2013 года. Сегодня, спустя 25 дней, мы уже можем делать кое-какие выводы. Некоторые из них стали неожиданностью для нас самих.

Снижение «отказов»

Вот так вот выглядят наши «отказы» по Яндекс-Метрике за последний квартал:

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

Увеличение времени, проведенном на сайте

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

Вот так вот выглядят данные о длине сессии по месяцам 2013-го года:

Сентябрь (на 22 число) – 00:03:59

Средняя длина сессии за первые восемь месяцев 2013 года – ровно 2 минуты. В сентябре, после редизайна сайта и перехода на адаптивную верстку – в два раза больше!

Ну, ок, уменьшено количество отказов, скажете вы, увеличена длина сессии – и что дальше? Каким образом это все скажется на сайте?

Месяц еще не закончился, можно мерить только среднедневными показателями. А вот по среднедневным показателям мы видим рост по поисковому трафику на 27,5% по отношению к августу.

Rusability

В мае 2010 года Итан Маркотт в своей статье для A List Apart изложил концепцию адаптивного (или «отзывчивого») веб-дизайна, положив тем самым начало новому направлению. Та статья привлекла внимание широкой аудитории и в конечном итоге ее автору для описания своих идей понадобилась целая книга.

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

С тех пор технология адаптивного веб-дизайна стала одной из наиболее обсуждаемых тем в дизайнерском сообществе. И теперь это уже – норма.

1. Дизайн, ориентированный на контент

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

При наличии контента уже можно экспериментировать с тем, как все будет выглядеть – строить каркас для контента. Этот термин был предложен Стивеном Хеем в книге Responsive Design Workflow, что подразумевает использование базовых прямоугольных блоков для создания макета для контента.

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

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

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

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

А после подкорректировать раскладку страницы, чтобы она соответствовала новой ширине, добавив колонку, к примеру, для боковой панели.

2. Дизайн «в браузере»

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

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

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

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


Не беспокойтесь о том, что вы, возможно, не являетесь кудесником внешних интерфейсов, ведь существуют инструменты, позволяющие делать прототипы (Macaw, Webflow и Adobe Edge Reflow). Вы также можете воспользоваться советом какого-нибудь разработчика, но есть мнение, что вначале лучше освоить азы – это поможет составить представление о процессе построения адаптивного веб-дизайна.

Одно из преимуществ такой стратегии состоит в том, что сокращается время, необходимое для внесения изменений.

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

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

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

3. Разработка библиотеки паттернов

Одна из ключевых особенностей практически всех RWD-проектов – гид по стилю. Он, как правило, включает основные стили для проекта и интерактивные положения всех модулей.

На данном этапе необходимо определить каждый из паттернов опыта взаимодействия.

В Fireworks применяются символы и стили для общих компонентов и модулей. Для хорошего дизайна необходимо проиллюстрировать, каким образом каждый из модулей будет адаптирован к избранными контрольным точкам.
Разработчик Брэд Фрост предложил концепцию Atomic Web Design, для ее описания он использует отчасти наукообразную терминологию. Основные стили бренда он называет атомами, составляющими фундамент дизайна. Такие вещи, как цвет, шрифт и иконки соотносятся с базовыми элементами HTML для формулирования «молекул». Молекулы используются для создания «организмов». Взять, к примеру, кнопку поиска. В данном случае к кнопке может быть добавлена форма ввода и лейбл.

Затем происходит смешение с другими организмами для создания «шаблонов», например, заголовков. В свою очередь, шаблоны позволяют уже сформировать страницы – и вуаля! У вас есть Atomic Web Design.
Эта теория применима для составления структуры библиотеки паттернов. Вначале создаются стили бренда, а затем уже их можно адаптировать под элементы HTML и т.д. Ваша библиотека паттернов будет способна поведать историю проекта – о том, как бренд клиента стал по-новому выглядеть в сети. Для разработчиков необходимо добавлять заметки и фрагменты программ, относящиеся к определенной опции экранного меню.
Лаборатория паттернов по прошествии некоторого времени может превратиться в изменяемый веб-дизайн, по мере того, как осуществляется переход от дизайна страниц к дизайну системных компонентов.

4. Универсальность

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

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

4.1 Проверенный метод

Большинство современных мобильных девайсов оснащены тачскрином, поэтому необходимо учитывать размер интерактивных элементов интерфейса. Нет единого мнения об идеальной площади смартфона для нажатия. Инженеры Apple выбирают 44px, люди из Microsoft утверждают, что 34px лучше.

Возможно, использование 48px представляется более практичным при разработке интерактивных элементов. Для каждой области оставляются как минимум 6px, и обычно 12px – для базового уровня. В эпоху общего проектирования и крупных размеров многие сегодняшние сайты оставляют чуть больше места для десктопов. Эти увеличенные в объеме элементы должны также использоваться в формах – для простоты и соответствия мобильным девайсам. Некоторые предпочитают проектировать собственные расширенные поля форм для соответствия со стилем сайта.

Но применительно к мобильным устройствам рекомендуется по возможности использовать «родные» средства управления. Клавиатуры и выпадающее меню должны быть оптимизированы для конкретного девайса. И еще один момент: уберите выделение ссылки при наведении курсора для мобильных устройств.

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

4.2 Навигация

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

Jump links

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

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

Выпадающий список

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

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

Без канвы

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

На таких сайтах, как Teehan+Lax и Squarespace, описанная техника используется как единственный метод навигации. Есть мнение, что в скором времени она станет трендом в RWD.

4.3 Мобильные версии сайтов, ориентированные на выполнение задач

Еще один важный момент, на который стоит обратить внимание при разработке мобильной версии – расположение средств контроля в верхней части страницы. Над «сгибом».

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

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

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

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

5. Производительность

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

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

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

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

«Адаптивные» изображения

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

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


Усечение скрипта

Большой размер сайта может зависеть еще и от различных скриптов, таких как Javascript и дополнительных CSS таблиц стилей.

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

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

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

Подача контента небольшими порциями

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

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

И в заключение…

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

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

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

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

Выражаем благодарность econsultancy за прекрасный материал.

Адаптивная верстка сайтов: обзор подходов и CSS фреймворков

October 24, 2020 Jazz Team Технические статьи , 0

Предисловие

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

О статье

Данная статья предназначена для разработчиков, имеющих опыт верстки сайтов, знающих HTML и CSS, понимающих назначение CSS селекторов и т. д.

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

Виды версток

Рассмотрим основные виды версток, их разницу и основные принципы, используемые при их реализации.

Фиксированная верстка

Фиксированная верстка (Fixed Layout) — подход создания страниц сайта, которые имеют заданную ширину. Ширина компонентов на странице не изменяется. На мониторах с маленьким разрешением появляется горизонтальная полоса прокрутки. Данный тип верстки не подходит для удобного отображения информации на мобильных устройствах.
Пример ниже демонстрирует строгое задание ширины для тега body:

Резиновая верстка

Резиновая верстка (Elastic layout) подразумевает возможность компонентов сайта менять свои размеры в зависимости от размера окна браузера, растягиваться от и до указанных минимальных и максимальных размеров. Это достигается благодаря использованию относительных значений, max-width / min-width (максимальная / минимальная ширина), max-height / min-height (максимальная / минимальная высота).
Примеры использования техник резиновой верстки:

Адаптивная верстка

Адаптивная верстка (Adaptive Layout) позволяет подстраиваться основному контейнеру и любому другому элементу сайта под разрешение экрана, делая возможным менять размер шрифта, расположение объектов, цвет и т. д. Происходит это динамически, например, с использованием медиа-запросов (@media), позволяющих автоматически определять разрешение монитора, тип устройства и подставлять указанные значения в автоматическом режиме. В примере ниже задается ширина div равная 960px для всех устройств, ширина которых меньше 1200px и 320px для всех устройств, ширина которых меньше 480px.

Отзывчивая верстка

Отзывчивая верстка (Responsive Layout) — это объединение резиновой и адаптивной вёрстки. При данном подходе используются как медиа-запросы, так и процентное задание ширины компонентов. Используя данный вид верстки можно с уверенностью сказать, что сайт приспособится к любому устройству.
Ниже задается ширина div равная 50% от размера родительского компонента для всех устройств, ширина которых меньше 1200px и 100% для всех устройств, ширина которых меньше 480px.

Основные техники реализации сайтов под любое разрешение

Относительные значения

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

Относительные значения для размеров и отступов

Относительные значения можно задавать для width, height, margin, padding и т. д. Самый известный способ задания относительного размера — указание в процентах (%).
Ниже приводится пример задания ширины равной 90% от размера родительского компонента.

При этом значение высчитывается относительно родительского компонента.
Также существуют значения относительно размера экрана:

  • vw — 1% ширины окна. При уменьшении ширины окна, уменьшается ширина, высота, шрифт элемента;
  • vh — 1% высоты окна. При уменьшении высоты окна, уменьшается ширина, высота, шрифт элемента;
  • vmin — выбирается наименьшее из vw и vh;
  • vmax — выбирается наибольшее из vw и vh.

Ниже рассмотрен пример использования vw и vh. В данном случае ширина и высота тега div будут равны 50% от ширины и высоты экрана соответственно.

Относительные значения для размера шрифта

Существуют следующие относительные значения для шрифтов:

  • em — задаёт размер относительно шрифта родителя;
  • rem — задаёт размер относительно шрифта .


Вычислим размер шрифта для тега body. В данном примере размер шрифта для body задается относительно размера html. Таким образом, размер шрифта для body будет равен 30px (20px * 1.5 = 30px).

Также относительные размеры шрифта можно задавать с помощью %, vw, vh и т. д. В следующем примере размер шрифта для body равен 80% от размера шрифта html — 16px.

Максимальные и минимальные размеры компонентов

Для задания максимальных и минимальных значений ширины и высоты компонента используются свойства max-width / min-width и max-height / min-height соответственно.

Допустим, что родительским компонентом данного div является body. Тогда, при изменении ширины экрана, ширина данного компонента будет составлять 60% от ширины body. Однако он будет увеличиваться только до величины, определенной в max-width, это 500px. Как только контейнер достигнет этой ширины — он перестанет увеличиваться.

Использование медиа-запросов

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

С помощью медиа-запросов можно задать стили для следующих типов устройств:

  • all — все типы (значение используется по умолчанию)
  • braille — устройства, основанные на системе Брайля, которые предназначены для чтения слепыми людьми
  • embossed — принтеры, использующие для печати систему Брайля
  • handheld — смартфоны и аналогичные им аппараты
  • print — принтеры и другие печатающие устройства
  • projection — проекторы
  • screen — экран монитора
  • speech — речевые синтезаторы, а также программы для воспроизведения текста вслух
  • tty — устройства с фиксированным размером символов
  • tv — телевизоры.

Пример задания ширины для тега div, на экранах мониторов, смартфонах и т. п.

Ссылки по техникам реализации адаптивной верстки

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

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 — набор небольших адаптивных CSS-модулей, которые вы можете использовать в любом веб-проекте. Pure построен на Normalize.css и предоставляет разметку и стили для собственных HTML-элементов, а также наиболее распространенные компоненты пользовательского интерфейса. Pure — адаптивный фреймворк, поэтому элементы отлично смотрятся на всех размерах экрана. Pure имеет минимальные стили, что подразумевает написание собственных кастомизированных стилей.

  • 24 — колоночная сетка
  • Модульный фреймворк
  • Не используются JS-файлы
  • Использование Normalize.css
  • Минимальное количество готовых компонентов и стилей.

Заключение

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

Мастер Йода рекомендует:  STL стандартная библиотека шаблонов С++
Добавить комментарий