Статьи с тегом #adaptive-design

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

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

Всплывающие уведомления (CSS3 & JS)

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

Плавные спойлеры (HTML5 & CSS3)

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

Всплывающие подсказки (CSS)

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

Адаптивная веб-типографика

Как выбрать оптимальный размер шрифта, установить интерлиньяж и определить допустимую ширину линии, чтобы улучшить восприятие содержимого сайта и сделать текст визуально гармоничным? И чем в этом может помочь золотое сечение? Крис Пирсон в своей статье «The Ultimate Guide to Readable Web Typography» делится математическими секретами удобочитаемости текста, а на основе данного перевода вниманию читателя представляется туториал о том, как адаптивная веб-типографика, построенная на пропорциях золотого сечения, может быть реализована средствами CSS и JS.

Адаптивный вертикальный ритм

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