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

Медиа-запросы: Обзор различных возможностей

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

Продолжить чтение

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

Ускорение сайтов с адаптивным дизайном

От автора: Когда в последний раз вы заходили на какой-нибудь сайт и были потрясены его производительностью (т.е. как быстро вы могли на нем делать то, что вам хотелось?)

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

Продолжить чтение

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

Функция calc - потрясающие возможности для адаптивного веб-дизайна

От автора: Функция calc является относительно новой, но очень редко используемой возможностью в CSS 3. Она позволяет осуществлять простые арифметические операции прямо в описании таблиц стилей с использованием всевозможных единиц измерения. Ее очень удобно применять для вычисления размера, позиции, трансформаций и даже цветов.

Продолжить чтение

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

Адаптивное целое фоновое изображение с помощью CSS

От автора: В этой обучающей статье мы рассмотрим простую технику создания фонового изображения, которое будет полностью растягиваться на всю ширину окна просмотра (viewport) браузера. Для этого нам понадобится CSS-свойство background-size; JavaScript не нужен.

Продолжить чтение

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

Мобильные устройства и доступность

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

 

Продолжить чтение

Верстка \ HTML5

Использование тэга HTML5 picture для адаптивных изображений

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

 

Продолжить чтение

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

Единое решение проблемы адаптивных изображений

От автора: Адаптивные изображения были одной из сложнейших проблем адаптивного веб-дизайна, и остаются ею по сей день. Пока у браузерных вендоров имеется «родное» решение, нам приходится думать «на ходу» и находить собственные решения. Изображения «Retina» особенно проблемны, потому что если вы масштабировали свою разметку em’ами или в процентах (как и должно быть!), то не можете быть уверены в точных пиксельных размерах каждого показываемого изображения.

Продолжить чтение

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

Пуленепробиваемые и доступные шрифты-иконки

От автора: Некоторые элементы HTML не очень хорошо сочетаются с адаптивными разметками. Один из них – старый добрый iframe, который может понадобиться при вставке содержимого из внешних источников, таких как YouTube.

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

Продолжить чтение

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

Несколько советов по разметке и отзывчивости email-писем

От автора: Электронная почта может быть одним из самых мощных средств коммуникации с вашими пользователями и может послужить множеству целей. Вы можете использовать ее как способ привлечь внимание к выбранному контенту (ежемесячные/еженедельные рассылки, «обзор событий года» и т.д.), оказать услугу пользователям (аналитическая разбивка посещений страницы профиля/избранного), или поддержать связь с пользователями (анонсирование нового функционала). Здесь в Artsy, мы используем все эти виды email-рассылок и заметили, что они являются важным ресурсом. Однако, лучшие методики разметки шаблонов и использования CSS (помня о разнообразии устройств и размеров экранов ваших пользователей) очень отличаются и очень сильно отстают от нынешних стандартов HTML5 и методик создания красивых веб-страниц. В этой статье мне хотелось бы представить несколько техник, которые я успешно использовал в Artsy для создания email-шаблонов, которые будут хорошо выглядеть в вашем браузере или на мобильном устройстве, а также в нескольких самых популярных почтовых клиентах.

Продолжить чтение

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

Framework-и для адаптивного дизайна

От автора: Адаптивный дизайн – это построение вебсайта с разметкой на базе сетки, масштабируемыми изображениями и медиазапросами, как его описывает Итан Маркотт (Ethan Marcotte). После того, как он дал определение этой технике, начали появляться framework-и адаптивного дизайна, объединяющие эти принципы. Основанные по большей части на CSS и JavaScript’е, многие из них с открытым кодом, их можно бесплатно скачать и легко модифицировать под себя.

Продолжить чтение