Хабрахабр адаптивный дизайн: 62 полезных инструмента для адаптивного дизайна (Responsive web design) / Хабр
Самые простые техники адаптивной верстки / Хабр
Сайтов с адаптивной разметкой с каждым месяцем становится все больше, заказчики кроме кроссбраузерности все чаще требуют адаптивность, но многие разработчики не спешат обучаться новым техникам. Но адаптивный дизайн — это просто! В этой статье представлено 5 примеров адаптивной разметки различных элементов веб-страниц.1. Видео (демо)
Очень простой CSS и HTML, и ваше embed-видео будет масштабироваться в соответствии с шириной страницы:
<div>
<iframe src="http://player.vimeo.com/video/6929537"frameborder="0"></iframe>
</div>
.video {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
}
.video iframe,
.video object,
.video embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
2. Максимальная и минимальная ширина (демо)
Max-width помогает определить максимально возможную ширину объекта. В примере ниже ширина div’а — 800 пикселей при возможности, но не более 90% ширины:
.container {
width: 800px;
max-width: 90%;
}
Так же можно масштабировать изображение:
img {
max-width: 100%;
height: auto;
}
Такая конструкция будет работать в IE 7 и IE 9, а для IE 8 делаем такой хак:
@media \0screen { img { width: auto; /* for ie 8 */ } }
Min-width — противоположность max-width, позволяет задать минимальную ширину объекта. В примере ниже благодаря min-width масштабируется текстовое поле:
3. Относительные значения (демо)
Если в адаптивной верстке использовать относительные значения в нужных местах, можно значительно сократить CSS код страницы. Ниже представлены примеры.
Относительный margin
Пример верстки вложенных комментариев, где вместо абсолютных значений используются относительные. Как видно из скриншота, второй способ гораздо читабельнее:
Относительный размер шрифта
При использовании относительных значений (em или %) шрифта наследуются также относительные значения межстрочного пространства и отступов:
Относительный padding
На скриншоте ниже хорошо видно преимущества относительных значений padding перед абсолютными:
Можно очистить float от предыдущего элемента и оставить контент внутри контейнера, используя overflow:hidden, что бывает очень полезно в адаптивной разметке. Наглядно — в демо.
5. Перенос слов (демо)
При помощи CSS можно переносить непереносимые текстовые конструкции:
.break-word {
word-wrap: break-word;
}
Адаптивный веб-дизайн vs. Отзывчивый веб-дизайн, в чем разница? / Хабр
С тех пор, как вышли книги «Adaptive Web Design» Аарона Густафсона и «Responsive Web Design» Итана Маркотта (русское издание называется «Отзывчивый веб-дизайн»), в сообществе веб-дизайнеров и разработчиков ведутся споры о том, чем отличаются эти 2 подхода. Одни считают, что эти 2 понятия являются синонимами, а другие, что это совершенно разные понятия. Но, как известно, истина всегда где-то посередине, поэтому предлагаю вашему вниманию перевод статьи финского веб-дизайнера и разработчика Вильями Салминена (Viljami Salminen) «Adaptive vs. Responsive, what’s the difference?»:
Кажется, есть некоторая путаница относительно этих терминов и того, что они означают, так вот здесь мои мысли на данную тему и несколько ссылок, чтобы подкрепить их. Я, как правило, не очень пылкий, когда дело доходит до обсуждения чего-либо, но на этот раз я хотел бы внести в этот вопрос ясность, т.к. слышу его очень часто.
«Отзывчивый веб-дизайн» (Responsive Web Design) является частью более широкого понятия, которое называется «Адаптивный веб-дизайн» (Adaptive Web Design). Когда идет речь об отзывчивом веб-дизайне, то мы имеем в виду только макет веб-страницы (Итан Маркотт, «резиновый» макет, гибкие изображения и медиазапросы).
С другой стороны, «Адаптивный веб-дизайн» включает в себя гораздо больше, чем просто «резиновый» макет. На практике это почти одно и то же, что и прогрессивное улучшение (progressive enhancement), если говорить кратко, то это понятие означает, что мы стремимся предоставить лучшие возможности для максимально широкой аудитории. Также: нельзя смешивать понятия «Адаптивный веб-дизайн» и «Адаптивный макет» (Adaptive layout), т.к. это совершенно разные вещи.
И, наконец, «Адаптивный макет» означает макет, сделанный путем сочетания множества фиксированных горизонтальных размеров (ширины). Сейчас, мне кажется, если все сделано правильно и блоки фиксированной ширины сочетаются с «резиновыми» блоками, то Адаптивный макет можно считать одной из форм отзывчивого веб-дизайна, а не просто его альтернативой. Зельдман уже высказывал немного похожую идею в 2011 году в одной из записей своего блога.
Примечание переводчика. К сожалению, из текста Вильями Сальминена сложно понять, что такое «Адаптивный макет», поэтому я постараюсь объяснить, что это означает своими словами. Подход Итана Маркотта предусматривает использование «резинового» макета (ширина, отступы и поля задаются в процентах), а адаптивный макет предполагает, что для каждого размера экрана у нас используются свои стилевые правила, в которых жестко заданы фиксированные размеры элементов (в пикселях). Более развернутое описание данного подхода вы можете найти в статье «Switchy McLayout: An Adaptive Layout Technique» (перевод).
Ссылки
Update v1. Если моя статья сделала эти 2 понятия более сложными для восприятия, чем они есть на самом деле, то постараюсь объяснить все в двух словах: отзывчивый веб-дизайн является частью адаптивного. Отзывчивый веб-дизайн = «резиновый» макет, в то время как адаптивный веб-дизайн = «резиновый» макет + прогрессивное улучшение.
Как превратить обычные сайты в адаптивные? / Блог компании UXDepot / Хабр
На данный момент около 11-12% из 100 000 самых посещаемых сайтов — адаптивны, и нет сомнений, что в ближайшие несколько лет их количество возрастёт.Так как всё больше организаций закатывают рукава, хватаясь за реалии веба, используемого различными девайсами, будет нелишним рассмотреть несколько стратегий, используемых для достижения нирваны:
Адаптивная модернизация
Адаптивная модернизация — это процесс, при котором берется существующий сайт, предназначенный только для настольных компьютеров, и «переделывается в адаптивный» по факту.
Что касается готовых сайтов (в частности коммерческих), у команд не всегда есть возможность всё отбросить и построить заново.
Дэн Седерхольм
Для большинства организаций, широкомасштабное создание нового дизайна с нуля даже не рассматривается. Именно поэтому адаптивная модернизация это популярный подход к созданию хорошего интерфейса для мобильных устройств.
Преимущества
- Относительно быстро.
Способов сделать адаптивную модернизацию довольно много, эта стратегия может заключаться в добавлении файла small-screens.css на сайт. Несмотря на этот довольно грубый пример, адаптивная модернизация — привлекательный вариант для большого числа организаций, так как не требует перестройки всего с нуля. - Знакомо.
Не сбивает с толку пользователей. Люди годами привыкают к интерфейсу и делая модернизацию существующего, организации сохраняют знакомый подход, при этом улучшая жизнь людям с мобильными устройствами. - Организационно быстрее.
Говоря политическим языком, модернизировать интерфейс более безопасно, чем начинать всё с нуля. Меньше споров о том, какой оттенок зеленого выбрать, какие банальные стоковые фотографии использовать, а управлению не придётся выворачивать руки. Это позволяет командам быстрее запускать адаптивные сайты.
Недостатки
- Затрагивает только малую часть.
Опять же, есть множество вариантов выполнения модернизации, но цель большинства из них — «сделать симпатично». Фокусируясь на переделке макета, модернизация часто упускает огромное количество других факторов, которые нужно учитывать при создании успешного проекта для различных устройств. - 10 литров воды в трёхлитровой банке.
Так как сайты для настольных компьютеров рассчитаны только для них (и, часто, существуют на протяжении длительного времени), они могут содержать много хлама. А так как модернизация, в основном, заключается в переплавке макета, большинство проблем с контентом, не учитываются полностью.
Есть что-то странное в написании кода для лучшей поддержки небольших устройств. Удаление лишнего может зайти слишком далеко, но без концентрации на производительности она сама по себе не вырастет.- Худшая поддержка.
Медиа-запросы, изначально разработанные для настольных компьютеров, плохо поддерживаются большинством мобильных устройств. - Временные исправления.
Мне хочется умереть, когда я слышу от людей просьбу «сделать адаптивным» что-либо, как будто это просто чекбокс в плане проекта (который иногда на самом деле существует). Такой тип ограниченного мышления упускает реальные возможности, которые предлагает адаптивный дизайн.
Адаптивные мобильные сайты
Адаптивные мобильные сайты, или как я их называю «семена для адаптивного будущего», представляют собой практику создания отдельного сайта формата «m.yourdomain.ru» с использованием техник адаптивного дизайна. Эту стратегию используют такие сайты, как The BBC, The Guardian и Entertainment Weekly (над которым работал я).
Мобильная версия даёт возможность посадить семя, которое вырастет из вашего устаревшего сайта.
Со временем устаревший сайт можно удалить, а изначально мобильный, адаптивный и учитывающий будущие тенденции будет развиваться.
Преимущества
- Ниже риск.
Большинство организаций до сих пор замечают, что трафик с мобильных устройств составляет меньшинство. Поэтому запуск мобильного адаптивного сайта позволяет таким организациям протестировать обстановку без необходимости бросаться в эту тему с головой. - Возможность научиться быть гибким.
Дизайнеры могут научиться думать более гибко. Разработчики узнают мириады хитростей устройств на Android. Менеджеры могут понять, как отойти от совершенствования пикселей. Адаптивный мобильный сайт может стать отличной песочницей для обучения. - Инфраструктура.
Команды могут научиться как, раз и навсегда решить проблемы с управлением содержимым, например, с созданием изображений - Удалить лишнее.
Этот подход предлагает отличную возможность для команд спросить себя: «а действительно ли нам это нужно», а также сфокусироваться на производительности. Почему? Потому что в первую очередь они заняты улучшением взаимодействия пользователей с их сайтом на мобильных устройствах. - Будущее за изначально мобильными сайтами.
Несмотря на первоначально неполноценный контент или функционал, при достаточном количестве времени и усилий эти мобильные сайты, в конце концов, могут заменить своих полноформатных предков.
Недостатки
- Это всё равно мобильный сайт.
Будь он адаптивным или нет, этот подход всё равно сохраняет большое количество минусов мобильных сайтов: проблемы с перенаправлением URL, управлением содержимым, одинаковым контентом, последовательностью, SEO-оптимизацией и прочих. - Временные исправления.
Множество мобильных сайтов созданы как пластырь — чтобы остановить кровь. Такие сайты создаются с целью разгрузить растущий трафик, поступающий с мобильных устройств. Эти решения всё же могут удовлетворить существующие потребности, но учитывая будущие тенденции, это вряд ли спасёт вас в долгосрочной перспективе. - Вероятность зачахнуть на корню.
Некоторые организации могут начать такие проекты, пройти полпути, а потом бросить всё это дело, пока не будет принят бюджет на следующий год. - Дизайн для маленьких экранов.
Так как изначально акцент ставится на маленькие экраны, последующий перенос интерфейса на большие дисплеи без потери качества может оказаться проблемой.
Адаптивный дизайн изначально для мобильных устройств
«Сначала мобильные» — это принцип, подразумевающий разработку интерфейса, который будет учитывать ограничения мобильной среды (маленький экран, низкая пропускная способность и прочее), однако использующий все преимущества бОльших экранов.
Преимущества
- Начало с новыми силами.
СНачала мобильные — начало с чистого листа. Дизайнеры с восторгом берутся за работу для целевой аудитории для достижения бизнес-цели. Разработчики фокусируются на компактной и эффективной разметке. Оставляя в стороне (или полностью изменяя) существующую базу кода, команды могут погрузиться в реальность разнообразных устройств без необходимости беспокоиться о расходах на устаревающие технологии. - Лучшая поддержка.
Создавая по принципу «сначала мобильные», разработчики способны обеспечить поддержку большего количества мобильных устройств, особенно более старых, которые не поддерживают медиа-запросы. - Производительность.
Несмотря на то, что производительность сайта в первую очередь зависит от его реализации, адаптивные проекты для мобильной среды дают командам возможность с самого начала акцентировать внимание на производительности. - С учётом всего и сразу.
Дизайн «сначала мобильные» (несмотря на его название) может учитывать большое количество разрешений, а не только ориентироваться на один класс устройств. - Дизайн, ориентированный на будущее.
Интерфейс, в первую очередь разработанный для мобильных устройств, создаёт прочный фундамент, способный перенести проверку временем и служить в качестве платформы для будущего роста и изменений.
Недостатки
- Занимает много времени.
Давайте смотреть правде в глаза, «сначала мобильные» — это далеко не самый быстрый принцип. Он занимает много времени и сил на построение всего с нуля. Нужно сделать всё так, чтобы это стоило потраченных ресурсов. - Сдвиг в сознании.
Довольно сложно заставить организации думать обо всём другим образом. Мышление, направленное на разработку изначально для мобильных устройств, переворачивает всё с ног на голову, что усложняет использование подходов, к которым люди привыкли за много лет. Для этого требуется забыть их (к счастью, об этом есть книга) и постоянно напоминать людям не возвращаться к старым методам. - Организационно сложно.
Большой редизайн обычно усложняется различными видами организационной бюрократии. Президент компании хочет высказать свое мнение по поводу дизайна, несмотря на то, что его не было ни на одном предварительном собрании о том, что вообще такое адаптивный дизайн. На пути создания интерфейса, который будет отлично выглядеть и функционировать на любом устройстве, могут также встать амбиции других людей и политика. - Незнакомо.
Любой редизайн делает интерфейс незнакомым для пользователей. Но чтобы сохранить знакомый подход, особенно если вы собрались всё кардинально менять, нужно быть предельно осторожным.
Стратегия поэтапности
Стратегия поэтапного создания адаптивного дизайна разбивает крупномасштабную кампанию на несколько ступеней. Как и при модернизации (эти стратегии не взаимоисключающие), здесь может не получиться сделать масштабный редизайн, именно поэтому некоторые организации делают это шаг за шагом. Есть несколько видов поэтапного создания адаптивного интерфейса:
Страница за страницей
Этот метод подразумевает создание подгруппы страниц. Такие компании, как Microsoft, запускают адаптивные ключевые страницы, при этом оставляя большинство внутренних только для настольных компьютеров.
Преимущества
- Заметно.
Запуск адаптивных версий самых просматриваемых страниц (например, главной), направляет усилия туда, где большинство пользователей заметят обновлённый дизайн. - Возможность научиться быть гибким.
Организации часто используют такие проекты в качестве проводников к более обширным идеям. Фокусируя внимание на нескольких основных страницах, можно научиться всему, что касается создания адаптивных интерфейсов, а потом использовать эти знания для остальной части сайта. - Более высокие шансы запуска.
Фокусировка на одной странице или одной функции — это отличный способ увидеть результат. Если делать редизайн всего и сразу, это может стать чудовищно сложным делом, которое может никогда не увидеть свет.
Недостатки
- Отсутствие целостности.
Пользователь переходит от блестящего нового дизайна к старому уродливому всего за один клик. Это плохо с точки зрения однородности, так как пользователи воспринимают компанию как одну торговую марку, а не мешанину из разных отделов и приоритетов. - Недальновидность.
Большинство редизайнов, основанных на страницах, сфокусированы на «запуске к третьему кварталу», но довольно часто, на более крупных сайтах, план развёртывания проекта отсутствует. - Вероятность зачахнуть на корню.
В первую очередь необходимо определиться со стратегией и рисками, иначе ваш сайт рискует стать Франкенштейном.
Компонент за компонентом
Я работал с несколькими организациями, которые выбрали довольно интересный подход к адаптивному дизайну. Вместо того, чтобы в первую очередь переоснащать главную страницу, а потом двигаться к внутренним, часть компаний делают адаптивными некоторые компоненты (например, заголовок или подвал), а потом постепенно переходят к другим. Они переключают мета-тег просмотра только когда весь интерфейс становится адаптивным.
Преимущества
- Постепенное ознакомление пользователей с новым интерфейсом.
Вместо того, чтобы сваливать пользователям на голову полностью новый, на 100% изумительный адаптивный дизайн (!), этот поэтапный подход показывает пользователям новый интерфейс на протяжении некоторого времени. Изменения оказываются не такими стремительными, чтобы разозлить людей, но продвигают дизайн в нужном направлении. - Разбивка процесса.
Команды учатся решать модульные проблемы (на уровне блоков), а не фокусироваться на целой странице. - Равномерный уровень усилий.
Разбивка процесса на модули позволяет лучше понять рамки проекта.
Недостатки
- 50 оттенков несовершенства.
Этот подход может оказаться неудачным, так как пользователям придётся иметь дело с таким себе интерфейсом Франкенштейна, который одновременно и старый и новый. - Возможность зачахнуть на корню.
Такие типы проектов нуждаются в чётких конечных целях, иначе они могут навсегда застрять в чистилище. - Техническое сосуществование.
Что происходит, когда один модуль, использующий новейшие технологии и техники, сталкивается лбом с устаревшим модулем? В этом подходе есть множество сложностей, связанных с архитектурой.
«Я Чеви Чейз, а ты нет»
Конечно, все организации разные, поэтому какой путь выбрать — зависит от различных факторов. Время, бюджет, рамки, организационная структура, набор навыков и многие другие факторы влияют на то, какую стратегию лучше применять. Но со временем становится всё более очевидным то, что организациям нужно работать над возрастающим разнообразием устройств, имеющих доступ в интернет.
Это перевод статьи под названием «Responsive Strategy» от Brad Frost. Перевели в компании UXDepot с одобрением автора.
PS от переводчиков: Надеюсь, вам понравилась статья. Мы будем рады, если вы укажете нам на ошибки в переводе, чтобы мы могли их оперативно исправить. Пишите нам по адресу [email protected], пожалуйста 🙂
9 основных принципов отзывчивого веб-дизайна / Хабр
Отзывчивый дизайн — отличное решение проблемы корректного отображения сайта на разных экранах. Однако новичкам зачастую трудно понять основы, обучаясь только по книгам/статьям. С каждым днём появляется всё больше различных устройств, имеющих разные размеры экрана, поэтому создание дизайна в пикселях и только для настольных компьютеров/смартфонов остаётся в прошлом. Именно поэтому сейчас стоит изучить принципы отзывчивого дизайна — дизайна, совмещающего в себе адаптивность и резиновость (если вы ещё не знакомы с адаптивным дизайном, то эта статья будет хорошим выбором для начала изучения).
Отзывчивый vs Адаптивный веб-дизайн
Может показаться, что это одно и то же. Однако оба этих вида дизайна дополняют друг друга и подходят каждый для своей задачи.
Поток
Когда размер экрана уменьшается, содержимое страницы начинает занимать больше высоты, и элементы начинают смещаться вниз. Такое поведение называется потоком. Это может быть труднодоступным для понимания, если раньше вы использовали фиксированные размеры элементов. Однако, когда вы начнёте использовать поток, вы поймёте принцип его работы.
Относительные единицы измерения
Область просмотра страницы может быть монитором, экраном мобильного или чем угодно ещё. Плотность пикселей на разных экранах также разная, поэтому нам нужны гибкие единицы измерения, работающие везде. Отзывчивый дизайн — именно тот случай, когда относительные единицы измерения вроде процентов становятся действительно полезными. С помощью процентов мы можем задать блоку ширину в 50%, и на любом устройстве он будет занимать лишь половину экрана.
Контрольные точки (Breakpoints)
Контрольные точки позволяют менять расположение блоков на странице только в случае использования экрана с определёнными размерами. Например, на настольных компьютерах у сайта будет три колонки, а на мобильных — только одна. Как вы расставите контрольные точки, зависит от поведения контента. Если содержимое страницы «ползёт», то определённо следует добавить контрольную точку. Однако, контрольные точки следует использовать с осторожностью — вы можете в них запутаться.
Max- и min-значения
Контент, занимающий всю ширину экрана — это здорово, если он отображается на мобильном. А если вы откроете страницу через ваш телевизор? Вряд ли увиденная картина обрадует вас. Поэтому здравым решением будет использование минимальных и максимальных значений. Например, если задать блоку свойства `width: 100%` и `max-width: 1000px`, то он будет отображаться на весь экран, если ширина экрана меньше 1000 пикселей; в противном случае, блок будет занимать 1000 пикселей.
Вложенные объекты
Помните
position: relative? Если у вас будет много элементов, зависящих от расположения других элементов, то их будет тяжело контролировать. Намного проще и правильнее обернуть эти элементы в один контейнер. Кстати, это тот случай, когда статичные единицы измерения вроде пикселей помогут вам. Они полезны для содержимого, которое вы не хотите адаптировать к размеру экрана — например, это может быть логотип или кнопка.Desktop или mobile first
С технической стороны нет никаких отличий: вы можете писать базовую разметку для мобильных, и расставлять ключевые точки для десктопов (mobile first) и наоборот. Часто люди не знают, какой подход выбрать. Подумайте как следует и выберите подходящий вам подход.
Веб-шрифты vs системные шрифты
Хотите использовать на своём сайте круто смотрящуюся гарнитуру Futura или Didot? Используйте веб-шрифты! Хоть они и выглядят красиво, не стоит забывать, что каждый подключённый шрифт будет загружен. Соответственно, чем больше шрифтов, тем медленнее загружается страница. С другой стороны, системные шрифты загружаются моментально за исключением случаев, когда пользователь не имеет локально установленного шрифта, используемого на странице. В таких случаях браузер будет использовать шрифт по умолчанию.
Растровые vs векторные изображения
Имеет ли ваше изображение множество мелких деталей и впечатляющих эффектов? Если да, то используйте растровый формат. В противном случае используйте векторный формат. Для растровых изображений используйте форматы jpg, png или gif, для векторных лучшим выбором будут SVG и иконочные шрифты. Каждый из форматов имеет свои преимущества и недостатки. В любом случае, помните о размере изображений — ни одна картинка не должна попасть в онлайн, не будучи оптимизированной (сжатой). Векторные изображения зачастую избавлены от лишнего размера, однако они не поддерживаются старыми браузерами. Также стоит помнить, что если векторное изображение содержит много деталей, то оно может весить больше растрового.
Как сделать один сайт для всех устройств (Responsive Web Design) / Хабр
Вчера была опубликована хорошая статья «Веб-дизайн. Каждому устройству свое представление». Несмотря на неплохие размышления, к сожалению, вывод в ней довольно глупый. А именно:«Нужно определить, какими устройствами могут пользоваться ваши посетители, проработать и создать для этих устройств представление вашего сайта, определить устройство посредством проверки заголовков браузеров, и отправить наиболее подходящее представление.»
Почему это глупо
Во-первых, никто не сможет предугадать, какими устройствами будут пользоваться ваши посетители. Нужно ориентироваться не на устройства, а на разрешения.
Это скриншот из презентации «Beyond the mobile web by yiibu» (очень рекомендую).
Во-вторых, если вы не facebook или yandex, скорее всего, вы не потянете создание и поддержку разных версий сайта для каждого устройства. Да и это не имеет особого смысла. Потому что ситуация становится похожа на реалии пятнадцатилетней давности. Тогда делали сайт «под браузер», а сейчас автор предлагает делать сайт «под устройство».
Как сделать один сайт для всех устройств
Вопросы, которые поднимал автор вышеуказанной статьи, уже довольно давно в цивилизованном мире обдуманы, и, более того, они уже решены.
Сейчас можно сделать 1 сайт с единственной версткой, который будет работать на устройствах, начиная с телефонов, заканчивая огромными телевизорами. Например, yiibu.com или alistapart.com (поуменьшайте окно браузера):
Все это называется «Responsive Web Design»
Responsive состоит из следующих техник:
Резиновый макет на основе пропорций (fluid grid)
Основная идея — формула для вычисления пропорций в процентах «target / context = result». Например, у нас есть макет psd с шириной 1000px. В нем есть два блока: один слева шириной 270px, другой справа 730px. Сверстаем мы их так:
.leftcolumn {
width: 27%; /* 270px / 1000px = 0,27 */
float: left;
}
.rightcolumn {
width: 73%; /* 730px / 1000px = 0,73 */
float: right;
}
Если внутри левого столбца будет еще один блок и, скажем, на макете он шириной в 170px, то для него поменяются цель и контекст, и код будет выглядеть вот так:
.leftcolumn .some-div {
width: 62,962963%; /* 170px / 270px = 0.62962963 */
float: left;
}
На хабре был перевод оригинальной статьи Ethan Marcotte «Fluid Grids».
Резиновые изображения (fluid images)
Подстраивают свои размеры под блок родителя. Основная идея в неочевидном применении свойства { max-width: 100% }. Изображение с img { max-width: 100% } никогда не вылезет из своего блока-родителя.
Если блок-родитель меньше, чем размеры img, то изображение пропорционально уменьшится. Этот принцип применим как для img, так и для embed, object, video.
Подробная оригинальная статья «Fluid Images».
Media queries
Нужны для отображения макета, оптимизированного под разрешение, с которого в данный момент этот сайт смотрится. Это часть стандарта CSS, которая позволяет применять стили на основе информации о разрешении устройства.
Например, так:
/* начало css */
Здесь базовые стили для глупых браузеров. Например, для телефонов не high-end уровня. Pocket Internet Explorer для Windows Mobile 6.5 здесь же :).
@media only screen and (min-width: 480px) {
Здесь стили более разумных, но все еще мобильных устройств. Android, iPhone и так далее.
}
@media only screen and (min-width: 768px) {
Планшеты в режиме portrait.
}
@media only screen and (min-width: 992px) {
Планшеты в режиме landscape, нетбуки, ноутбуки, десктоп.
}
@media only screen and (min-width: 1382px) {
Десктоп с большими разрешениями, телевизоры.
}
/* конец css */
media queries понимают все разумные браузеры. Для ie же есть Respond.js
Mobile first
Это техника, при которой сайт верстается сначала для устройств с меньшими возможностями, а затем с помощью media queries добавляются возможности и плюшки.
Так глупые браузеры без media queries получат самый простой контент (например, на мобильных телефонах). А более продвинутые поймут и отрисуют страницу, беря во внимание media queries.
Подробнее о Mobile first
Ссылки
1. Русскоязычный блог о Responsive Web Design
2. Единственная хорошая книга на эту тему — «Responsive Web Design». Написана Ethan Marcotte, который в общем и положил начало адаптивным макетам. После ее прочтения многое прояснится.
Чем тестировать адаптивный дизайн? / Хабр
Хватит менять размер окна браузера, хватит его насиловать! Готов спорить, вы не раз слышали это. Хорошо, возможно и не слышали. Но если вы профессионально занимаетесь разработкой адаптивных сайтов, вы понимаете о чем я: любое изменение DOM или правка CSS, и вы снова начинаете тянуть край браузера вперед, назад, тестируя изменения и просматривая ничего ли не сломалось.
Целью ваших движений является имитация экранов различных устройств.
В корпоративной среде зачастую, у вас есть множество гаджетов предоставленных компанией для теста. На моей работе в моем распоряжении есть iPad, iPod, другие планшеты, ноутбуки, а также настольные мониторы. Если у вас нет такой роскоши, приходится использовать то, что под рукой.
К счастью, есть внушающий набор онлайн инструментов, имитирующих различные диагонали устройств. Конечно, каждый из них имеет свои преимущества и недостатки, мы рассмотри несколько таких инструментов.
Для тестирования я выбрал реально адаптивный сайт PajamasOnYourFeet.com, сайт построено на основе HTML5 шаблона, бесплатно предоставленным EGrappler.
Am I Responsive?
Am I Responsive, очень простой инструмент, позволяющий быстро просмотреть ваш сайт на 4 устройствах. Все они — IOS и разработчик объясняет это фишкой сайта. В общем никаких настроек, никакого выбора, а очень просто и наглядно.
Доступные размеры:
- настольный монитор — 1600 x 992px;
- ноутбук — 1280 x 802px;
- планшет — 768 x 1024px;
- мобильный телефон — 320 x 480px.
Цитирую разработчика: «это не инструмент для тестирования, крайне важно проводить тестирование на реальных устройствах. А данный инструмент поможет быстро сделать скриншот и показать клиенту, что вы имеете ввиду».
Есть две приятные фишки: возможность таскать устройства по вашему экрану, а также возможность поделится ссылкой на тест сайта.
deviceponsive
deviceponsive очень похож на Am I Responsive, тем, что он настолько же прост, с минимум настроек и опций. Все доступные устройства отображаются сразу на одной длинной странице. Из всех доступных опций это возможность отредактировать фон заголовка и добавить туда свой логотип, что будет полезно когда вы решите поделится скриншотом.
Устройства и доступные разрешения экранов.
- Macbook — 1280 x 800
- iPad портрет — 768 x 1024
- iPad портрет — 1024 x 768
- Kindle портрет — 600 x 1024
- Kindle альбомная ориентация — 1024 x 600
- iPhone портрет — 320 x 480
- iPhone альбомная ориентация — 480 x 320
- Galaxy портрет — 240 x 320
- Galaxy альбомная ориентация — 320 x 240
Как и на большинстве подобных инструментах отображаются полосы прокрутки, которых бы не было бы на реальных устройствах. Это вынужденный шаг для обеспечения возможности прокрутки на не сенсорных устройствах.
responsive test
Как и deviceponsive, responsive test отображает ваш сайт в различных устройствах. Но вместо показа всех сразу, вы сами выбираете необходимое устройство в верхнем меню страницы. Кстати тут корректно работает масштабирование, что позволяет проводить тестирование большего разрешения на меньшем.
30 различных разрешений доступно на сайте, начиная от огромного настольного монитора, до того, что они называют «дрянный андроид» (справедливости стоит заметить, что есть и нормальный андроид).
Что касается браузера Firefox, то он немного не корректно работает с данным сайтом. Обратите внимание, что на скриншоте не отображается слайдер между зеленым заголовком и белой областью фонового содержания.
responsive.is
Очень похож на предыдущих два инструмента, но есть одна вещь которая отличает responsive.is от других. Это плавная анимация при переходе от одного устройства к другому, а также полу-прозрачная область которая показывает реальную площадь сайта не попадающую в область просмотра.
Доступные варианты устройств — авто (то как вы видите сайт), настольный комьютер, планшет в альбомной и портретной ориентации, смартфон в портретной и альбомном положении. Задавать произвольные размеры в px, к сожалению нельзя.
Screenqueries
А вот возможности и доступные опции отличают Screenqueries от предыдущих сервисов. 14 телефонов и 12 планшетов представлены здесь, с отдельной возможностью переключения в портретный и альбомный режим. Результаты отображаются на сетке с линейками. Также возможно задать произвольное разрешение, потянув за правый или нижний край.
Интересной особенностью этого сайта, для ряда устройств есть “Trueview” вариант, который показывает ваш сайт в нативном браузере устройства.
К сожалению, Firefox и тут не смог отобразить слайдер. Не нужно обвинять меня, Firefox мой любимый браузер, но такие вот дела.
Screenfly
Screenfly пожалуй наиболее функциональный из всех. Доступно 9 больше чем планшет устройств — от 10″ ноутбуков, до 24″ мониторов, 5 планшетов, 9 телефонов, 3 телевизионных разрешения, а также произвольное разрешение. Добавьте сюда отдельный переключатель в портретный и альбомный режим, а также опцию показа прокрутки. Также можно поделится ссылкой на тест с помощью одной кнопки.
У каждого устройства в меню указано размер экрана в px., а также в правом верхнем углу отображается фактический размер вашего окна браузера.
Все перечисленные достоинства позволяют претендовать на лидерство если бы не одно но (цитата разработчика): «Screenfly может использовать прокси-сервер, чтобы имитировать устройства во время просмотра вашего сайта. Прокси-сервер имитирует строку агента пользователя, но не поведение этих устройств.» Screenfly является единственным сервисом из списка, который позволяет тестировать на основе строки агента пользователя.
Используете ли вы представленные инструменты в своей практике? Делитесь своими секретами разработки адаптивных сайтов в комментариях.
P.S. Ошибки по поводу перевода просьба сообщать в личку.
Адаптивный дизайн приложения под каждого пользователя / Хабр
Я придерживаюсь мнения, что мобильные приложения должны быть более персонализированными. Какие-то функции мне не нужны, другие использую чаще. Но почему-то мы уравниваем всех под одну гребенку, чтобы по чуть-чуть, но угодить большему количеству людей. Чуть дальше в плане персонализации ушли новостные ленты и соц. сети, которые предоставляют уникальный каждому контент.А что если уйти еще дальше и помимо контента предоставлять людям персонализированный UI?!
Теория
Концепция
- Приложение само понимает, чем ты часто пользуешься и выносит часто используемую функциональность на первый экран.
- Располагает элементы по степени значимости на странице так, чтобы вам не нужно было бы тянуться большим пальцем до него.
- В зависимости от того насколько часто этот элемент используется, его содержание тоже будет сильно отличаться
- Так же есть триггеры: пришло пуш уведомление, определенная дата или действие пользователя. Этот триггер имеет свой удельный вес, который присваивается отдельному элементу на короткое время.
Логика
Этап калибровки
Человек пользуется приложением.
А программа сама анализирует количество кликов на каждый элемент и дает элементам удельный вес.
Этап плавного внедрения
После первоначальной калибровки, мы можем осторожно внедрять самый популярный запрос на главную страницу, отдельным блоком.
Этап проверки элемента
Мы анализируем частоту заходов и определяем достоин ли элемент того, чтобы остаться на главной странице.
И если достоин и им пользуются часто, то рассматриваем вариант расширения этой ячейки, для того, чтобы пользователь еще быстрее выполнил целевое действие.
Практика
Пример реализации приложения
Хороший пример это банковские приложения.
Почему?
- Они многофункциональные
- Большая часть функций мне как пользователю вообще не нужна, но другим они могут быть важней
- Некоторая часть функций может быть нужна, только в определенный момент
- Такими приложениями пользуются все, поэтому легче понять концепцию
Здесь я постараюсь показать на этапе эскизов как я вижу должно быть. Если пост будет интересен, то тогда я уже сделаю демо приложение на iOS.Грубый эксиз приложения
Сценарии
У каждого человека есть свои сценарии которые он выполняет. Они не всегда логичны, а задача приложения облегчить путь достижения этой цели.
Сценарий 1: Перевожу часто деньги одному и тому же человеку (младший брат, ребенок, жена).
Мы можем добавить блок с возможностью быстрого перевода именно ему.
Но блок сам по себе может эволюционировать, как покемоны. Если мы видим, что им достаточно часто пользуются.
2 уровень блока:
Здесь мы уже можем переводить непосредственно с самой ячейки, нажав на кнопку перевести
Приложение понимает что этой функцией не только пользуются часто, но еще и сумма одинаковая, поэтому мы идем еще дальше и изменяем ячейку так чтобы была установлена дефолтная для данной операции сумма.
3 уровень блока
Сценарий 2 Раз в месяц я плачу за квартиру, здесь уже срабатывает триггер даты.
Приложение понимает, что примерно в это число каждый месяц я отдаю деньги за квартиру.
И логично нам показать именно этот блок именно в этот день на главном экране и после исполнения платежа его убрать.
Сценарий 3 Закрываю кредит после получения зп.
Триггер. Я получил зп на карту и приложение понимает, что обычно после этого действия в течение дня или двух я закрываю кредит, который на мне висит.
В блоке теперь появляется оплата кредита.
Сценарий 4 Использую чат с поддержкой
Зачастую мы если переписываемся в чате с поддержкой, то этот процесс не быстрый, мы можем несколько раз свернуть приложение, заняться своими делами и вернуться позже, поэтому мы можем в период общения с чатом, его вынести на первый экран. Так как мы знаем когда он начала разговор и когда в принципе решил проблему.
Сценарий 5 Вывожу деньги с расчетного счета на карту
Срабатывает триггер о поступлении денег р/с и я допустим всегда распределяю их между своими картами:
Я хотел донести мысль, что пользовательский опыт можно улучшить, пытаясь помочь ему выполнить то, что он хочет как можно быстрей, конечно это будет сложнее для нас как разработчиков, но это будет оценено нашими клиентами. Cкажите, что вы думаете о таком подходе?
Как сделать один сайт для всех устройств (Адаптивный веб-дизайн) / Хабр
Вчера была опубликована хорошая статья «Веб-дизайн. Каждому устройству свое представление ». Несмотря на неплохие размышления, к сожалению, вывод в ней довольно глупый. А именно:«Нужно определить, какими устройствами могут пользоваться ваши посетители, проработать и создать для этих устройств представления вашего сайта, определить устройство посредством проверки заголовков браузеров , и предоставить наиболее подходящее представление ».»
Почему это глупо
Во-первых, никто не сможет предугадать, какими будут пользоваться ваши посетители. Нужно ориентироваться не на устройство, а на разрешение.
Это скриншот из презентации «За пределами мобильного Интернета от yiibu» (очень рекомендую).
Во-вторых, если вы не потянете на facebook или yandex, скорее всего, вы не потянете создание и поддержку разных версий сайта для каждого устройства. Да и это не имеет особого смысла. Потому что ситуация становится похожа на реалии пятнадцатилетней давности.Тогда делали сайт «под браузер», а сейчас автор предлагает делать сайт «под устройство».
Как сделать один сайт для всех устройств
Вопросы, которые поднимал упомянутой статьи, уже довольно давно в цивилизованном мире обдуманы, и, более того, они уже решены.
Сейчас можно сделать 1 сайт с единственной версткой, который будет работать на устройствах, начиная с телефонов, заканчивая телевизорами. Например, yiibu.com или alistapart.com (поуменьшайте окно):
Все это называется «Адаптивный веб-дизайн»
Отзывчивый из следующих техник:
Резиновый макет на основе пропорций (жидкая сетка)
Основная идея — формула для вычисления пропорций в процентах «target / context = result».Например, у нас есть макет psd с шириной 1000px. В нем есть два блока: один слева шириной 270px, другой справа 730px. Сверстаем мы их так:
.leftcolumn {
width: 27%; / * 270px / 1000px = 0,27 * /
float: left;
}
. Правая колонка {
ширина: 73%; / * 730px / 1000px = 0,73 * /
float: right;
}
Если внутри левого столбца будет еще один блок и, скажем, на макете он шириной в 170 пикселей, то для него поменять цель и контекст, и код будет выглядеть вот так:
.leftcolumn .some-div {ширина
: 62,962963%; / * 170px / 270px = 0.62962963 * /
float: left;
}
На хабре был перевод оригинальной статьи Итан Маркотт «Fluid Grids».
Резиновые изображения (флюидные изображения)
Подстраивают свои размеры под блок родителя. Основная идея в неочевидном применении свойства {max-width: 100%}. Изображение с img {max-width: 100%} никогда не вылезет из своего блока-родителя.
Если блок-родитель меньше, чем размеры img, то изображение пропорционально уменьшится.Этот принцип применим как для img, так и для embed, object, video.
Подробная оригинальная статья «Fluid Images».
Медиа-запросы
Нужны для отображения макета, оптимизированного под разрешение, с которого в данный момент этот сайт смотрится. Это часть стандарта CSS, которая позволяет применять стили на основе информации о разрешении.
Например, так:
/ * начало css * /
Здесь базовые стили для глупых браузеров.Например, для телефонов не высокого уровня. Pocket Internet Explorer для Windows Mobile 6.5 здесь же :).
@media only screen и (min-width: 480px) {
Здесь стили более разумных, но все еще мобильных устройств. Android, iPhone и так далее.
}
@media only screen и (min-width: 768px) {
Планшеты в режиме портрета.
}
@media only screen и (min-width: 992px) {
Планшеты в режиме ландшафта, нетбуки, ноутбуки, десктоп.
}
@media only screen и (min-width: 1382px) {
Десктоп с большими разрешениями, телевизоры.
}
/ * конец css * /
медиа-запросов понимают все разумные браузеры. Для т.е. же есть Respond.js
Mobile first
Это оборудование, которое позволяет использовать возможности устройств, а затем с помощью медиа-запросов добавляются возможности и плюшки.
Так глупые браузеры без медиа-запросов получат самый простой контент (например, на мобильных телефонах). Медиа-запросы более продвинутые поймут и отрисуют страницу.
Подробнее о Мобильная первая
Ссылки
1. Русскоязычный блог о Адаптивный веб-дизайн
2. Единственная хорошая книга на эту тему — «Адаптивный веб-дизайн». Написана Итан Маркотт, который в общем и положил начало адаптивным макетам. После ее прочтения многое прояснится.
.Самые простые техники адаптивной верстки / Хабр
Сайтов с адаптивной разметкой с каждым месяцем становится все больше, заказчики кроме кроссбраузерности все чаще требуют адаптивности, но многие разработчики не спешат обучаться новым оборудованием. Но адаптивный дизайн — это просто! В этой статье представлены 5 примеров адаптивной разметки различных элементов веб-страниц.
1. Видео (демо)
Очень простой CSS и HTML, и ваше embed-видео будет масштабироваться в соответствии с шириной страницы:
.video {
положение: относительное;
обивка-низ: 56,25%;
высота: 0;
переполнение: скрыто;
}
.video iframe,
.видео объект,
.video embed {
позиция: абсолютная;
верх: 0;
слева: 0;
ширина: 100%;
высота: 100%;
}
2. Максимальная и минимальная ширина (демо)
Максимальная ширина помогает максимально возможную ширину объекта. В пример ширины ниже div’а — 800 пикселей при возможности, но не более 90% ширины:
.container {
ширина: 800 пикселей;
максимальная ширина: 90%;
}
Так же можно масштабировать изображение:
img {
максимальная ширина: 100%;
высота: авто;
}
Такая конструкция будет работать в IE 7 и IE 9, а для IE 8 делает такой хак:
@media \ 0screen {
img {
ширина: авто; / * для ie 8 * /
}
}
Min-width — противоположность max-width, позволяет задать минимальную ширину объекта. В результате благодаря min-width масштабируется текстовое поле:
3.Относительные значения (демо)
Если в адаптивной верстке использовать относительные значения в нужных местах, можно сократить CSS код страницы. Ниже представлены представлены.
Относительная маржа
Пример верстки вложенных комментариев, где вместо абсолютных значений используются относительные. Как видно из скриншота, второй способ гораздо читабельнее:
Относительный размер шрифта
При использовании относительных значений значений (em или%) шрифта наследуются также относительные межстрочного пространства и отступов:
Относительный отступ
На скриншоте ниже хорошо видно относительных значений padding перед абсолютными:
4.Трюк с переливом: скрытый (демо)
Можно очистить float от предыдущего элемента и оставить контент внутри контейнера, используя overflow: hidden, что бывает очень полезно в адаптивной разметке. Наглядно — в демо.
5. Перенос слов (демо)
При помощи CSS можно переносить непереносимые текстовые конструкции:
.break-word {
перенос слов: слово-разрыв;
}
.
Разбираемся в трендах веб-дизайна / Хабр
Несмотря на обилие в интернете разнообразных статей по направлениям веб-дизайна, разобраться в том, какой дизайн визуально устарел, какой в тренде и почему, довольно нелегко. Для начала нужен глобальный взгляд на новейшую веб-дизайн, чтобы не запутаться в деталях. В этой статье рассказана краткая история визуальных направлений последних лет и данные их ключевые отличительные признаки.Речь здесь пойдет именно о визуальной эволюции веб-дизайна, с небольшим оглядкой на вехи в развитии технологий.Дело в том, что, хотя влияет технология заметно, оно не является определяющим. Например, и скевоморфный, и «плоский» дизайн можно сделать, применяя один и тот же стек технологий.
Итак, поехали.
Первая декада XXI века — карамельный веб «2.0»
Выступая на конференции Будущее веб-дизайна в Хай-йорке, известный американский дизайнер Эллиот Джей Стокс описал «то, что люди подразумевают под визуальным дизайном в стиле веб 2.0», следующие признаки:
• яркие цвета;
• бейджи «специальное предложение», налепленные на страницу;
• глянцевость, стеклянность, «карамель» в иконках и иллюстрациях;
• закругленные углы;
• градиенты;
• паттерны на фон с диагональными линиями;
• отражения.
Эти клише наполняли интернет в основном с 2003 по 2010 год. Часто технологии не очень поспевали за модой. Вспомним, например, верстку закругленных уголков, которая делалась с помощью картинок. Однако, как видно из этого же примера с уголками, мода подхлестывала технологии.
2011 — скевоморфизм
С начала второго десятилетия XXI века на смену «карамельному» тренду пришел истинно натуралистичный дизайн.
Скевоморфизм — это использование элементов дизайна очень похожих визуально на аналоги в реальном мире.В промышленном дизайне, например, широко известна история о том, что двигатель в первых автомобилях поместили впереди, так как это казалось интуитивным: ведь лошади же спереди повозки.
Детально прорисованная трехмерная иконка «мусорная корзина» или «» фон приложения-календаря у iOS того времени — характерные примеры скевоморфизма. Существует и другое толкование этого слова, близкое понятию аффорданс, однако здесь мы говорим о скевоморфизме именно как о визуальном стиле.
Черты скевоморфизма в вебе:
• трехмерные элементы;
• приглушенная, натуралистичная цветовая схема;
• элементы, выглядящие как ткань, кожа или другой физический материал, с реалистичными швами и текстурой;
• «тисненые» буквы;
• «занавесочки», ленточки, печати.
Параллельно этому тренду в модульных входах и более фундаментальных вещах, связанных с развитием браузерных технологий, облегчением труда верстальщика и, скажем прямо, формированием вкуса у веб-дизайнеров, которые, наконец, окончательно отдельной профессией.
Это в моде и по сей день:
• интересная, разнообразная типографика;
• следование законам печатного дизайна в оформлении текста;
• большие фотографии на фон.
Надо сказать, что все это время законодателем мод был по сути один крупный бренд с инноваторским имиджем, угадайте кто? Ну конечно, Apple.Элементы веб 2.0, а затем и скевоморфизма впервые появились на их сайтах и приложениях.
Но в 2010–2011 году на сцену стиля вышли сразу два конкурента.
2010 — Windows Metro (он же язык дизайна Microsoft и современный интерфейс)
В 2010 году Microsoft представил общественности свой новый дизайн, радикально отличный от прошлого. Основной упор в стайлгайде сделан на «плоские» элементы и типографику, в отличие от прежних, «иконочных» интерфейсов. Изменения преподносились как «по-настоящему цифровой дизайн».
Так как и Apple тоже в это время начал вводить элементы минимализма, это быстро стало трендом, захлестнувшим интернет.
Не в последнюю очередь популярность «плоского» дизайна с техническими потребностями в эпоху стартапов и мобильных устройств. Как никогда важно быстро делать сайты и приложения, которые бы выглядели адекватно и на десктопе и на экране смартфона. Со скевоморфными элементами трудно сделать действительно адаптивный, а с плоскими — пожалуйста, и выглядит стильно.
2011 — Twitter Bootstrap
Twitter Bootstrap был представлен как фреймворк для облегчения жизни программистам фронт-энда, по сути стал проводником нового стиля.
Легкость и визуальная аккуратность фреймворка сыграли немаловажную роль в его стремительном распространении. Но причиной основного было, конечно же, решение «под ключ» целого комплекса характерных задач фронт-энд разработки. То, что можно сразу получить и качественный код под все платформы, и хороший дизайн, привлекло тысячи разработчиков.В интернете начались разговоры про то, что все сайты стали на вид одинаковые…
Однако существует мнение, что ни тогда, ни сейчас Bootstrap не являлся законодателем мод, а скорее их прямым отражением. В Bootstrap 1.0 применялись градиенты, больше было теней и другого ненавязчивого 3d, характер для эпохи заката скевоморфизма.
Вот, например, как изменилось модальное окно с кнопками:
Bootstrap 1 :
Bootstrap 3 :
2012 — Flat Design
Скевоморфизм превращается в ругательное слово, а маятник моды качнулся в другую сторону — в полную силу вошел тренд «плоский дизайн» со стал визуальными признаками:
• минимализм;
• двухмерность, без теней и глубины;
• на первом плане контент;
• возврат ярких цветов.
Даже кнопка, для которой был использован традиционный доступ — приподнятая форма, похожая на форму физических кнопок.
Продолжают активно развиваться тренды, ставшие модными еще в эпоху скевоморфизма:
• интересная типографика и ориентация на печатный дизайн;
• большие фотографии и даже видео на фоне сайтов.
2013 — борьба трендов
Накалстей в разгар борьбы наступающего плоского и не сдающегося скевоморфного дизайна достиг апогея.Это стало одной из самых обсуждаемых тем в интернете не только среди дизайнеров. Аргентинское агенство In такто даже выпустило на эту тему игру.
Агентство похвасталось успехами в известном видеоролике.
Тем временем, прогресс не стоит на месте и в 2014 году вышли два «визуальных языка», которые, возможно, решат исход борьбы.
2014 — Google Material Design
Подробнейший стайлгайд от Google впечатляет не столько новизной конструкции, сколько уровнем пиара и масштабом донесения до аудитории.Google действительно стал законодателем мод в дизайне приложений, для которых предназначался стайлгайд. Однако очень быстро появилось и несколько фреймворков Material Design для веба, большая часть которых сделана не в Google (например, вот Material Design в Angular.js).
Как объяснил дизайнер John Weley на конференции Google I / O 2014, в противоположность подходу Microsoft, которые объявляли свой Metro «аутентично цифровым», Google хотели вернуться к реальности, «нецифровому» миру, найти натуралистичную, в чем-то даже скевоморфную метафору для интерфейс.Однако эта метафора была выбрана.
Соответственно, почти все в интерфейсе выглядит и ведет себя, как бумага. Экраны — это листы бумаги, а на них — чернила. В дизайне вернулись тени, отбрасываемые, когда один лист представил другим. Снова появилась приподнятая кнопка, но теперь она не нажимается (не «опускается») при клике, а выдает эффект растекающихся чернил. Бумага, тем не менее, имеет и ряд нереалистичных свойств, например, у нее нет текстуры, а листы могут бесшовно соединяться и разделяться.
Стиль Google Material Design в целом поддерживает тенденции минимализма, использование ярких цветов и интересной типографики.
Из нового же он привел в моду следующее:
• возврат теней и глубины в дизайн;
• иконки используются много, они в целом плоские, но с тенями, складками и «глубиной»;
• анимации в стиле метафоры «бумажных листов».
Анимация впервые адекватно поддерживает общую стилевую идею и практически выступает на первый план стайлгайда.Почти в каждом разделе присутствуют примеры с интересной и обоснованной анимацией.
2014 — Язык дизайна IMB
В конце прошлого года компания IBM выложила в открытый доступ свой новый язык дизайна.
Как сказано в блоге IBM, вдохновляющей идеей для нового дизайна аналогия с человеческими людьми. Язык — это то, что позволяет людям общаться, друг друга и вместе решать задачи. Подобным образом и визуальный язык — язык дизайна — призван помочь дизайнерам и разработчикам продуктов «заговорить на одном языке», и между собой, и с пользователями.
IBM Design Language в отличие от Google Material Design не дает рекомендаций по размерам отступов, а задает общефилософский хороший тон в дизайне. Например, есть несколько абзацев для золотого сечения и варианты сетки, но нет никаких шаблонов и ограничений «вот так будет в стиле IBM, а вот так совсем нет», как это сделано в Material Design. Нежелание дарить ленивым готовые шаблоны стайлгайда объясняют стремлением дать свободу новым идеям. На фоне разговоров о том, все сайты и приложения стали одинаковыми, звучит заманчиво.
Иногда принимают цифры и гайдлайны все же можно разыскать. Например, в разделе Иконографика есть рекомендация: «не скругляйте уголки, тогда иконки будут иметь более строгий« научный »вид».
изображает Google Material Design
… и IBM Design Language:
В IBM Design Language большое внимание уделено акценту на пользователя и контент, а также опять-таки анимации. За основу концепции движения взяты бессмертные принципы диснеевской анимации.Кратко, но довольно емко рассказано, в чем секрет притягательности и стильности некоторых приемов. Даются примеры, например, про, как блок-предупреждение при появлении двигается тяжело, с замедлением, своим тяжеловесностью привлекает внимание и интересное впечатление важности.
2015, что дальше?
Судя по акценту на движения элементов в двух нашумевших стилях 2014 года, анимация становится новым полем, на котором разыграется битва трендов.
И это понятно, ведь технологии сделали создание анимаций как никогда ранее легким.А в визуальном веб-дизайне сейчас, ситуация сложилась, когда что-то новое привнести трудно. Это делает акцент на анимации, чтобы сделать их узнаваемой «фишкой». Так что самое интересное нас ждет, конечно, впереди.
.Респонсивный Vs адаптивный дизайн: что лучше для пользователя?
Современные веб-разработчики и маркетологи все чаще отдают предпочтение респонсивному дизайну (адаптивный дизайн), позволяющему создать доступную страницу для просмотра на любом устройстве. И хотя такой подход достаточно хорош с точки зрения Google, который «любит» респонсивные сайты — далеко не единственный вариант, способный приспосабливаться под нужды пользователя.
Так называемый адаптивный дизайн (адаптивный дизайн) появился отнюдь не вчера, но всерьез о нем заговорили лишь недавно, благодаря тем усовершенствованиям, которые он способен привнести в пользовательский опыт.
Чтобы понять, какой из двух видов лучше всего подходит вам, необходимо использовать преимущества использования методов обоих методов, а также знать, какие наиболее оптимальные решения для разных типов устройств и устройств.
Респонсивный веб-дизайн
Респонсивный веб-дизайн — это масштабирование интерфейса устройства пользователя за счет медиа-запросов, или модуля CSS3, позволяющего задавать разные стили (или даже таблицы стилей) в зависимости от разрешения экрана, его размеров и других характеристик.
Применение данного метода лучше подходит для сайтов с гибкой, или «резиновой» структурой. В случае разработки разработчики потратят кучу времени и ресурсов на передвижение сайта под планшет и мобильный телефон, чтобы компенсировать имеющийся недостаток гибкости.
Помимо своей изменяющейся структуры, у респонсивного дизайна есть несколько других преимуществ:
1. Одинаковый внешний вид ресурса в разных браузерах и на различных платформах
2.Наличие у сайта одинакового URL, что способствует SEO-оптимизации
.
3. Разработчикам необходимо обслуживать лишь один сайт, что позволяет сократить время, затрачиваемое на дизайн и контент
И хотя положительные респонсивного дизайна очевидны, у этого метода существует ряд недостатков. Самым большим из них является скорость загрузки, которая значительно снижается из-за высокого разрешения и других визуальных элементов, необходимых для оформления внешнего вида ресурса.
Если вы делаете выбор в пользу респонсивного подхода, ваши дизайнеры всегда будут ограничены этим фактором, как сложные визуальные элементы, могут «тормозить» загрузку на мобильных устройствах.
Адаптивный веб-дизайн
Адаптивный дизайн функционирует немного иначе. Он сегментирует пользователей на категории в зависимости от того, с какого устройства они просматривают сайт.
В то время как сайты, созданные с помощью технологии респонсивного дизайна, выглядят одинаково вне зависимости от размеров устройства — адаптивный ресурс определяет, с каким устройством пользователь заходит на сайт, и демонстрирует ту его версию, которая была создана специально для этого типа устройств.
Например, если вы просматриваете обычную страницу блога, где используются картинки, заголовки, описание и кнопка «Поделиться» на вашем телефоне, эта страница будет очень долго загружаться из-за большого количества изображений. Кроме того, из-за небольших размеров экрана страница будет выглядеть перегруженной.
Вместо того, чтобы показывать уменьшенную копию ресурса, сервер с адаптивным дизайном идентифицирует тип устройства пользователя и отображает упрощенную версию блога, содержит только самые необходимые элементы интерфейса и изображения более низкого качества.
Иными словами, сервер берет на себя всю «тяжелую» работу, вместо того, чтобы заставлять сайт оптимизировать самого себя. Среди достоинств адаптивного дизайна можно выделить следующие:
- Изображения загружаются намного быстрее, так как они сжимаются и адаптируются под устройство пользователя
- Загрузка сайта происходит быстрее, так как сервер определяет тип устройства пользователя и загружает соответствующий ему программный код
- Разработчики предлагают различные версии сайтов и подгонять их под соответствующие устройства, чтобы сделать их более удобными для мобильных пользователей.
Привлекательность этого метода омрачается тем, что создает адаптивный сайт не так-то просто. Из-за адаптации к различным устройствам, время, затрачиваемое на манипуляторы, увеличивается. Более того, если вам потребуется сделать какие-либо доработки на сайте, придется вносить изменения во все его версию. Поэтому если у вас небольшой бюджет и нет команды специалистов, которые будут осуществлять поддержку адаптивного сайта, лучше пока отказаться от данной идеи.
Какой вариант и для чего подходит?
Даже если вы отдаете предпочтение какому-либо одному из двух описанных видов дизайна, важно осознавать, что прежде всего необходимо думать об удобстве пользователей.
Если вашими пользователями удобнее использовать с ресурсом, который одну и ту же пользу использует на всех устройствах, то делайте выбор в пользу респонсивного дизайна. Если же ваши пользователи более подкованы технически и вы хотите заложить хороший фундамент на будущее, то адаптивный дизайн станет оптимальным решением.
Несмотря на тот факт, что особенно важно в сфере электронной торговли и медиа индустрии.
Для лендингов или сайтов, которые прекрасно загружаются на мобильные устройства, респонсивный дизайн станет оптимальным решением. Их владельцам стоит рассматривать создание адаптивного ресурса как вариант на будущее.
Высоких вам конверсий!
По материалам impactbnd.com источник изображения rmaxwell
21-10-2015
.