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

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

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

 

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

Верстка \ 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’е, многие из них с открытым кодом, их можно бесплатно скачать и легко модифицировать под себя.

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

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

5 мощных техник адаптивного веб-дизайна

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

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

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

Текущее состояние адаптивного вебдизайна

От автора: Адаптивный вебдизайн используется уже насколько лет, а в 2012г. он был горячо обсуждаемой темой. У многих хорошо известных дизайнеров, таких как Брэд Фрост (Brad Frost) и Люк Вроблевски (Luke Wroblewski), имеется большой опыт работы с ним и они помогли нам сильно продвинуться в этой области. Но сделать нужно еще очень многое.

В этой статье мы рассмотрим, что возможно сделать сейчас, что станет возможным в будущем при помощи еще не стандартизированных свойств (таких как CSS Уровня 4 и HTML5 APIS), и что еще нуждается в улучшении. Это – неутомительная статья, и мы не станем глубоко вдаваться в каждую технику, но у вас будет достаточно ссылок и источников знаний для дальнейшего самостоятельного исследования вопроса.

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

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

Техника Clown Car: изображения в адаптивном вебдизайне

От автора: Сейчас изображения – «горячая» тема споров в адаптивном вебдизайне. Почему? Потому, что еще никому не понравились существующие решения. Для облегчения нашей сильной головной боли – обеспечить пользователя одним изображением, оптимизированным к размеру и разрешению его дисплея, без потери времени, памяти или пропускной способности и на стороне клиента – обсуждаются новые элементы и атрибуты.

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

Верстка \ HTML&CSS

Техники адаптивной типографской разметки текста

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

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

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