Я считаю, что в последнее время разница размера экранов между разными группами устройств всё больше размывается. Не смотря на это я попытался написать инструмент для определения, как групп устройств (мобильники, планшеты, лаптопы, десктопы), так и конкретных девайсов (iPhone 5, iPhone X, iPad Pro 12 и т.д.). Получилась, на мой взгляд, довольно удобная пачка SASS-миксинов. И что немаловажно, инструмент прост в использовании, а также позволяет расширять список устройств своим без правки исходников.
Читать полностью »
Рубрика «media queries»
Sass MediaScreen — Определяем девайсы на CSS
2019-10-10 в 20:11, admin, рубрики: css, gulp, html, media queries, sass, scss, препроцессоры, Разработка веб-сайтовОтзывчивый дизайн. Реакция на уровень освещенности
2014-03-19 в 13:10, admin, рубрики: css, html, javascript, media queries, responsive web design, адаптивная вёрстка, метки: media queries, responsive web design, адаптивная вёрстка 
В последнее время появляется все больше и больше мобильных устройств, которые уже не только определяют освещенность вокруг, но и соответствующим образом меняют отображаемую на экране информацию к более удобному и читаемому виду.
Теперь эта возможность потихоньку перебирается и в движки мобильных браузеров.
В статье будет рассмотрен пример реагирования веб-старницы в браузере на окружающую освещенность.
Читать полностью »
Compass — инструмент для эффективной работы с CSS
2013-09-18 в 15:47, admin, рубрики: compass, css, css3, media queries, prototyping tool, sprites, метки: compass, css3, media queries, prototyping tool, sprites С выходом CSS3 появилось множество новшеств: с новыми свойствами стили стали сложнее, но не появилось никаких улучшений для поддержки новых и старых сложностей, в том числе дупликации кода. В чистом CSS отсутствует модульность, так как разбиение стилей на файлы и их подключение через @import пагубно влияет на производительность.
Решение этих проблем нашлось в CSS препроцессорах, с их помощью стало возможным использование переменных, выполнение математических подсчетов в коде, появилась возможность повторно использовать код с помощью миксинов и наследования. Читать полностью »
Responsive Email Design, или Как прочитать письмо на холодильнике
2013-05-23 в 8:41, admin, рубрики: android, badoo, css, email-рассылки, html, iOS, media queries, баду, Блог компании Badoo, Веб-разработка, интерфейсы, письма, метки: android, badoo, css, email-рассылки, html, iOS, media queries, баду, интерфейсы, письма 
Для нас, как и для большинства социальных сетей, очень важны email-рассылки. Одной из интересных и сложных технических задач является корректное отображение писем на мобильных устройствах. Сейчас около 23% писем Badoo открывается именно на них, и эта цифра постоянно увеличивается. А возможно, кто-то прямо сейчас читает наше письмо на своем интернет-холодильнике.
Сегодня мы расскажем, каких правил придерживаться в разработке электронных писем, как сохранить их юзабилити на мобильных устройствах, а также поделимся своими хитростями, накопленными в процессе работы.
Требования
С какими проблемами мы столкнулись и какие требования предъявляются к нашим письмам:
- письма должны корректно отображаться в множестве разных почтовых клиентов и браузеров;
- они должны быть оптимизированы под различные устройства на платформах iOS и Andriod (смартфоны с большим, средним и малым разрешением экрана; планшетные компьютеры);
- нужна обязательная поддержка Outlook 2003/2007/2010, т.к. он занимает большой сегмент использования;
- редактирование компонентов, которые применяются еще в 50 шаблонах писем;
- необходимо создавать универсальные блоки, которые будут подстраиваться под ситуацию, т.к. в письмах данные имеют динамическую структуру (например, письма переводят на 44 языка, в них меняются размеры блоков, изображений, размер текста).
Использование Media Queries в Sass 3.2
2012-10-30 в 22:42, admin, рубрики: css, media queries, sass, Веб-разработка, метки: css, media queries, sass, фронтендС выходом Sass 3.2 начал продвигаться в массы путь объектно-ориентированного CSS (OOCSS), принося с собой принцип DRY и программистское мышление. Media queries и OOCSS стали жизненно важны для современной фронтенд разработки.
Коллекция паттернов поведения для элементов отзывчивого веб-дизайна
2012-09-12 в 10:41, admin, рубрики: css, html, javascript, media queries, mobile design, responsive design, responsive web design, Веб-разработка, Дизайн в IT, Мобильный веб, Отзывчивый веб-дизайн, метки: css, html, javascript, media queries, mobile design, responsive design, responsive web design, Отзывчивый веб-дизайн 
Думаю любому современному дизайнеру или верстальщику рано или поздно в голову приходила мысль «А почему бы на этом проекте не использовать принципы отзывчевого веб-дизайна?». Пожалуй, сложно найти человека, который не слышал о responsive design в наше время, когда сёрфить веб могут с телефона, микроволновки и тапочек. Приступая к работе над подобным проектом, неплохо было бы иметь под рукой примеры возможного поведения лейаута и его отдельных элементов.
Читать полностью »
Красочная сборка Opera 12.50
2012-08-28 в 15:41, admin, рубрики: fullscreen api, icc, media queries, opera, opera 12.50, SPDY, Блог компании Opera Software, Веб-разработка, метки: fullscreen api, icc, media queries, opera, opera 12.50, SPDY 
Работа над новым стабильным релизом не прекращается и на этой неделе мы рады представить вам сборку Opera 12.50 с целым букетом новых красочных возможностей и улучшений. Как обычно, мы выбрали из них самые интересные для разработчиков и спешим поделиться.Читать полностью »
CSS Summit 2012, моя первая онлайн конференция
2012-08-24 в 8:41, admin, рубрики: css, css animations, css selectors, css transitions, html, media queries, performance, polyfills, sass, конференция, отчёт, метки: css, css animations, css selectors, css transitions, html, media queries, performance, polyfills, sass, конференция, отчёт 
В начале августа удалось побывать на четвёртой, ежегодной онлайн конференции CSS Summit. Конференция проходила 3 дня подряд с разбитием докладов по следующим направлениям: CSS3 training, Advanced CSS, Preprocessors. Все доклады на английском языке.
Для нас это был первый опыт присутствия на онлайн конференциях, и даже если вы не особо интересуетесь клиентской разработкой, вам возможно будет интересно почитать о формате проведения подобных конференций.
Записи докладов как со всей конференции, так и за отдельные дни, можно купить на официальном сайте. Промо код, со скидкой 20% — “20SNOOK”.
Под катом пару слов об организации мероприятия, ссылки на презентации и небольшой конспект интересных тезисов и мыслей о веб разработке.
Читать полностью »
HTML5 аудио — состояние дел. Часть 2
2012-08-13 в 19:01, admin, рубрики: Audio Data API, html, javascript, media queries, браузеры, медиаплеер 
(Статья специалиста по фронтенду и медиатегам Марка Боаса (Mark Boas) от 8 мая 2012. Перевод заключительной части. Начало дало понять, что придётся попотеть, прежде чем освоить всю кухню, а ведь это ещё развивается… Не ждите коротких рецептов.)
Содержание первой части:
■ Типы MIME
● Серверная часть
● Клиентская часть
■ Заранее узнать тип аудио поможет .canPlayType (наверное)
■ Текущая поддержка кодеков в браузерах
■ Форматы контейнеров и расширения файлов
■ Мы имеем тег <audio> и не боимся его использовать!
■ Буферизация, поиск и интервалы воспроизведения
● Атрибут buffered
● Объект TimeRanges
  ● Атрибуты seeking и seekable
Читать полностью »
HTML5 Audio — cостояние дел. Часть 1
2012-07-24 в 8:22, admin, рубрики: Audio API, html, javascript, media queries, браузеры, медиаплеер(По общему совету ShpuntiK, обратил внимание на статью специалиста по фронтенду и особенно, по медиаформатам, разработчика из нескольких опенсорсных проектов и happyworm.com. Статья написана в мае 2012 и отражает современное состояние дел с поддержкой браузерами новых медиатегов и форматов. --прим. перев.)
Это продолжение моей (автора, Марка Боаса --прим. перев.) статьи 2009 года "Native Audio in the browser" (англ., и дополненной в октябре 2010 --прим. перев.), которая объясняет основы работы аудио в HTML5. Возможно, стоит почитать сначала её, если вы хотите почувствовать работу тега <audio> и связанного с ним API.
Теперь, через 2.5 года, пришло время посмотреть, как идут дела. При том, что многие продвинутые аудио API активно разрабатываются, улучшается воодушевляющая нас нативная браузерная поддержка звука — самое время вернуться в увлекательный мир тега <audio>.
Читать полностью »