Pull to refresh
  • by relevance
  • by date
  • by rating

62 полезных инструмента для адаптивного дизайна (Responsive web design)

Website developmentCSS
Translation
UPD. Для краткого введения в адаптивный дизайн рекомендую прочитать статью «Как сделать один сайт для всех устройств (Responsive Web Design)».

Перевод крайне ценной статьи «Responsive Web Design Techniques, Tools and Design Strategies» популярного интернет-издания для разработчиков Smashing Magazine.

Еще в январе мы опубликовали статью об адаптивном дизайне «Responsive Web Design: What It Is and How To Use It» (Адаптивный веб-дизайн: Что это такое и как им пользоваться). Адаптивный веб-дизайн продолжает привлекать к себе много внимания, но, учитывая, насколько он отличается от традиционных методов разработки сайтов, он может показаться заоблачно сложным для тех дизайнеров и разработчиков, которые его не пробовали.

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

Техники Responsive web design


1. CSS Transitions and Media Queries
CSS Transitions и Media Queries

Elliot Jay Stocks подробно рассказывает о методе сочетания CSS Media Queries и CSS transitions. Основная идея в следующем: разрабатывая адаптивный сайт с помощью Media Queries, вы постоянно изменяете ширину вашего браузера, чтобы посмотреть, как сайт ведет себя при этом. Но каждый раз, когда отрабатывает один из ваших Media Queries, виден жесткий переход между стилями (первый, например, для десктопов, второй — для планшетов). Почему бы не использовать CSS transitions для сглаживания этих жестких переходов с помощью анимации?



Читать дальше →
Total votes 112: ↑107 and ↓5 +102
Views195.4K
Comments 14

Новая Главная портала Mail.Ru

Mail.ru Group corporate blog
Думаю, многие из вас хоть раз видели старую главную страницу Mail.Ru, которая довольно долго не менялась. Поэтому для общего понимания, небольшая преамбула: технический апдейт, о котором пойдет речь в этом посте, стал возможен после внутренних изменений в компании.



Разработкой новой главной занималась довольно большая команда: в нее входили дизайнеры, специалисты по юзабилити и, конечно, разработчики, среди которых я и note.
Читать дальше →
Total votes 164: ↑139 and ↓25 +114
Views42.2K
Comments 125

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

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


Читать дальше →
Total votes 168: ↑152 and ↓16 +136
Views431K
Comments 51

Адаптивная верстка: CSS&JS фреймворк Skeleton

Website developmentCSSHTML
Sandbox

В продолжение недавней статьи про адаптивную верстку, хочется более полно раскрыть тему. В реалиях, чаще всего, для адаптивной верстки используют CSS-фреймворки. Об одном из них я хотел бы рассказать, а если точнее – перевести мануал по ее использованию. Называется он Skeleton.
Читать дальше →
Total votes 90: ↑84 and ↓6 +78
Views56.8K
Comments 36

[Перевод] HTML5 Адаптивные изображения

Website developmentHTML


Адаптивные изображения одна из проблем Responsive Web Design. Возможно вы начали использовать high-res изображения для дисплеев с высоким разрешением и уменьшать их размер для устройств с меньшим разрешением дисплея, что попросту съедает трафик без какой либо пользы для владельцев устройств с дисплеями с небольшим разрешением. Или все так же используете изображения невысокого разрешения, которые ужасно смотрятся на больших экранах и дисплеях с высоким разрешением.
Читать дальше →
Total votes 40: ↑36 and ↓4 +32
Views25.4K
Comments 57

Таблицы с данными в адаптивном дизайне

Website developmentCSS
Одна из постоянных проблем верстальщиков адаптивных сайтов — это задача удобно представить обычные таблицы на мобильных устройствах. Вот как выглядят такие таблицы чаще всего:


Не очень удобно, правда? К счастью уже существует несколько хитрых способов решить такую проблему.
Читать дальше →
Total votes 64: ↑61 and ↓3 +58
Views96.9K
Comments 21

SCSS: пара полезных техник

Website developmentCSS
Sandbox
CSS – препроцессоры все популярнее среди веб – разработчиков. Почему?
Потому что они позволяют:
  • Сэкономить время
  • Применять принцип DRY в CSS
  • Сделать код более читаемым

На данный момент наиболее популярными препроцессорами являются SASS и LESS.

О том, почему SASS лучше LESS, можно почитать в этой статье. Лучше ли — вопрос спорный, однако, я перешел с LESS на SCSS хотя бы потому, что тут есть:
  • Циклы
  • Условные операторы
  • Списки

О сравнении синтаксиса SCSS и SASS, можно почитать в этой статье. Лично я выбрал SCSS по причине обратной совместимости с CSS и, как следствие, возможности быстро включать старые CSS файлы в проект посредством директивы import. Для этого им надо изменить расширение на .scss.

Об основах SCSS уже писали faiwer1 и AbleBoy2, здесь же я хочу описать пару техник, которые мне действительно помогли.
Читать дальше →
Total votes 24: ↑23 and ↓1 +22
Views28.7K
Comments 21

30 CSS-фреймворков для адаптивного веб-дизайна

Website developmentCSS
Заметил, в последнее время на любое упоминание Twitter Bootstrap, минимум один человек отмечает, что «слишком много его стало». Большинство все устраивает, но некоторым он уже приелся и они хотят чего-то нового. Поэтому решил написать статью со сборником css-фреймворков, думаю каждый сможет найти что-нибудь для себя. Заодно сделаем интернет разнообразнее.

Читать дальше →
Total votes 85: ↑82 and ↓3 +79
Views297.5K
Comments 44

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

Website developmentCSS
Tutorial
Одна из основных задач при адаптивной верстке — это масштабирование изображений (в том числе фоновых) таким образом, чтобы они корректно отображались на устройствах с разными разрешениями экранов.

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

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


Читать дальше →
Total votes 71: ↑62 and ↓9 +53
Views125.3K
Comments 15

Gamma Gallery — отличная адаптивная галерея

Website developmentCSS
Создание фотогалереи для адаптивного дизайна — не самая простая задача. Следует учитывать отображение на экранах различной ширины, при этом не загружая слишком много графики на мобильных устройствах. Хорошее решение — Gamma Gallery, выглядит очень круто.



Демонстрация | Исходники
Читать дальше →
Total votes 52: ↑44 and ↓8 +36
Views59.9K
Comments 38

Новый jQuery плагин адаптивной галереи c автоматической группировкой

Website developmentJavaScriptjQuery
image

На сайте tympanus.net представлен новый экспериментальный jQuery плагин для создания галереи, который можно использовать для решения разных задач, например, простой показ изображении, сгруппированных определенным образом или отображение целых альбомов пользователей с фотографиями без перезагрузки страницы. Разумеется, галерея адаптивная, что позволяет удобно использовать ее как на компьютерах с большим экраном так и на мобильных устройствах.
Как использовать этот плагин?
Total votes 54: ↑49 and ↓5 +44
Views29.3K
Comments 17

Преобразование меню в выпадающий список на маленьких экранах

jQuery
Translation
Tutorial
image

В качестве примера того, что мы получим в результате, можно посмотреть сайт «Five Simple Steps» с адаптивной версткой. Когда окно браузера имеет маленькую ширину, меню в верхнем правом углу превращается из обычного ряда ссылок в выпадающее меню.
Читать дальше →
Total votes 43: ↑30 and ↓13 +17
Views26K
Comments 28

Создаем адаптивную страницу портфолио с фильтрами

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

Netcribe
ДЕМО

Читать дальше →
Total votes 45: ↑29 and ↓16 +13
Views27.8K
Comments 25

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

CSSDevelopment of mobile applications
Sandbox
Статья является переводом отличного, вдохновляющего, хоть и небольшого поста Mixing Responsive Design and Mobile Templates от одного из создателей CodePen, Криса Койера.

Итак, вы заняты стратегической проработкой поведения своего сайта для мобильных устройств. По идее вам надо бы выбрать что-то одно — или адаптивный дизайн, или создание отдельного сайта для мобильных. Что ж, возможно, это не так. Может быть, вам удастся сочетать сразу несколько стратегий.
Читать дальше →
Total votes 9: ↑8 and ↓1 +7
Views17.9K
Comments 2

Тестирование адаптивной верстки локального сайта

Website developmentDevelopment of mobile applications
Здраствуйте, ребята!

Сегодня наткнулся на статью «9 интересностей и полезностей для веб-разработчика», в которой рассматриваются всякие полезности для веб-разрабочиков. Среди всего прочего нашел для себя прикольную тулзу для тестирования сайта под разным расширением — «dimensionsapp» (ссылка). Но в чем проблема, мне необходимо тестировать сайт который располагается на моем локальном веб-сервере. И тут мне в голову пришла идея быстренько собрать такую же тулзу, только чтобы она работала у меня в локале!

Требования к тулзе:
  • Возможность ручного выбора ширины области просмотра и выбор из готовых размеров устройств Apple (iPhone и iPad)
  • Возможность просматривать на 100% высоты окна или полностью подстравить область просмотра под размеры девайса
  • Простой и легковесный интерфейс (никакой графики)
  • Шкала делений с шагом в 5 и 50 пикселей
  • Возможность видеть текущую ширину области просмотра


Итак в результате 3-х часов кодинга получена тулза с кодовым названием «Moka moka» (ну я долго не думал). Дальше парочка скриншотов работы тулзы:


Читать дальше →
Total votes 7: ↑6 and ↓1 +5
Views22.1K
Comments 20

Делаем css-спрайты отзывчивее на retina-дисплеях и не только [less]

Website developmentCSS
Tutorial
image

Зачем нам вообще нужны спрайты?


Напишу лишь вкратце зачем это нужно, так как на хабре уже много раз описывали преимущества и недостатки css-спрайтов.
  • Во-первых, используя спрайты, мы ускоряем загрузку страницы; в случае использования иконок, можно создать универсальное средство для применения в проектах;
  • Во-вторых, не все устройства с высоким ppi (например, Windows Phone 7.5-7.8, Android до 4 версии на стоковом браузере) поддерживают использование webfonts.
  • Легкая интеграция, используя специальные сервисы генерации спрайтов

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


Используя css-спрайты со множеством элементов встает проблема о создании css-свойств с background-position; Их нужно писать много, иногда очень много. Конечно, нам помогают многие сервисы по генерации спрайтов — они выдают вместе со спрайтом еще и css/less/sass — файл с координатами. Но практически всегда все жестко завязано на пикселях:
  • Изменяя размер (например, для retina-экранов) исходного файла-спрайта все «едет»;
  • Мы не можем изменять размер элемента-контейнера, куда хотим вставить, допустим, иконку, чтобы эта иконка смасштабировалась: свойства background-size: cover/contain/100% не работают по понятным причинам;

Используя спрайты, подготовленные для 72ppi, на телефонах, планшетах и новых retina-ноутбуках вызывает размытие изображений, и выглядят некрасиво...
Читать дальше →
Total votes 19: ↑15 and ↓4 +11
Views24.1K
Comments 32

Отзывчивый дизайн. Реакция на уровень освещенности

CSSJavaScriptHTML
Sandbox
Media Queries

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

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

В статье будет рассмотрен пример реагирования веб-старницы в браузере на окружающую освещенность.
Читать дальше →
Total votes 52: ↑48 and ↓4 +44
Views25.9K
Comments 19

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

JavaScript
Для начала хотел бы вам сказать, что моя специализация — это Backend, но версткой и клиентской частью приходится заниматься постоянно, особенно в своих проектах, которые я делаю в одиночку. Уже давно стало негласным правилом то, что сайт должен быть удобен на всех устройствах, включая всё их разнообразие, особенно в век популяризации мобильного интернета. Благо, CSS3 позволяет это делать при помощи медиа-выражений (media queries). Но есть еще один способ, показавшийся мне более удобным. В зависимости от размера экрана, его ориентации, типа устройства, устанавливать глобальные стили тегу html (можно и другим элементам). А в CSS, отталкиваясь от этих классов, задавать особые стили для разных случаев. Так CSS станет более понятным и мы избавимся от использования медиа-выражений. Для этого нам и понадобится Restive.JS. Так как я человек-практик, да и полное описание лучше читать на сайте плагина, то в статье я ограничусь созданием адаптивной мини-страницы, в процессе которого, надеюсь, станет понятно, для чего всё это необходимо.
Читать дальше →
Total votes 17: ↑14 and ↓3 +11
Views19.5K
Comments 19

О размере экрана, пикселя и элемента

Interfaces
Sandbox


Привет, username. Свой первый пост я хочу посвятить актуальной проблеме, связанной с появлением большого количества новых форматов дисплеев и непрекращающейся гонкой за плотностью пикселей. В свете появления таких устройств, как очки дополненной реальности, смартчасов, 4к-мониторов и еще более широкого спектра планшетов и ноутбуков, возникает вопрос: какой размер графического элемента/текста следует считать оптимальным и в чем его измерять. Android-разработчики, несомненно, тут же воскликнут: «Да, конечно, в dp!». Но практика показывает, что дела обстоят несколько сложнее.
Читать дальше →
Total votes 93: ↑92 and ↓1 +91
Views184.5K
Comments 28

Как создавать сайты, готовые к локализации

Alconost corporate blogWebsite developmentCSSHTML
Translation


Локализовать можно любой сайт – по крайней мере, мы в Alconost еще не отказали в этом ни одному клиенту. Тем не менее, результат локализации может сильно зависеть не только от наших переводчиков, а и от ваших веб-дизайнеров. Почему? Ответ на этот вопрос и еще много полезных идей – в переводе статьи опытного проджект-менеджера по локализации Роберта Ханта.
Читать дальше →
Total votes 39: ↑24 and ↓15 +9
Views13.5K
Comments 17