responsive web design
DESCRIPTION
RESPONSIVE WEB DESIGNTRANSCRIPT
Оглавление:
• Знакомство с HTML5, CSS3 и адаптивным веб-дизайном• Медиазапросы: поддержка разных областей просмотра• Использование «резиновых» макетов • HTML5 для адаптивных веб-дизайнов• CSS3: селекторы, типографика и цветовые режимы• Великолепная эстетика с использованием CSS3• CSS3-переходы, трансформации и анимации • Покорение форм с помощью HTML5 и CSS3 • Решение кросс-браузерных проблем с адаптивностью
Знакомство с HTML5, CSS3 и адаптивным веб-дизайномИтан Маркотт – разносторонний дизайнер-разработчик. Его работы – это сочетание качественного кода и захватывающего дизайна. Среди его клиентов – New York Magazine, Стэнфордский университет, Кинофестиваль «Сандэнс» и «Консорциум Всемирной паутины» (World Wide Web Consortium, W3C). Он ведет блог unstoppablerobotninja.com и постоянно зависает в Твиттере (@beep).
Итан – автор и технический редактор журнала A List Apart – издания для людей, делающих веб-сайты. Вместе с основателем компании Happy Cog, самым известным веб-дизайнером в мире Джеффри Зельдманом, Итан работал над третьей редакцией книги «Web-дизайн по стандартам», которая занимает почетное место на книжных полках каждого опытного дизайнера.
Преимущества HTML5
• Упрощение разметки• Новые семантически значимые элементы тегов• Новые атрибуты
Преимущества CSS3
• Новые свойства• Media queries• Применение css3 не приведет к каким-либо нарушениям
Можно ли реализовать потенциал HTML5 и CSS3 уже сегодня?
• Хочет ли заказчик охватить максимально широкий круг интернет-пользователей, количество которых постоянно растет?
• Хочет ли заказчик получить максимально чистую, наиболее быстро работающую и самую удобную в сопровождении кодовую базу? • Понимает ли заказчик, что взаимодействие может и должно слегка отличаться при использовании разных браузеров? • Хочет ли заказчик, чтобы нужный ему дизайн выглядел одинаково во всех браузерах, включая Internet Explorer версии 8 и ниже? • Будут ли 70 или более процентов текущих или ожидаемых посетителей сайта заказчика использовать Internet Explorer версии 8 или ниже?
Медиазапросы: поддержка разных областей просмотраМедиазапросы можно использовать уже сегодня
• Firefox 3.6+• Safary 4+• Chrome 4+• Opera 9+• IE 9+• Safari 3.2+ в IOS• Android 2.1 +
Синтаксис медиазапросов
@media screen and (max-width: 960px)
<link rel="stylesheet" media="screen and (max-width: 960px) " href="800wide-portrait-screen.css" />
Что позволяют проверить медиазапросы
• Width• Height• Device-width• Device-height• Orientation• Aspect-ratio• Device-aspect-ratio• Color• Color-index• Monochrome• Resolution• Scan• Grid
Использование «резиновых» макетов
ШИРИНА ДОЧЕРНЕГО ЭЛЕМЕНТА__________________________________ШИРИНА РОДИТЕЛЬСКОГО ЭЛЕМЕНАТА * 100 = РЕЗУЛЬТАТ
Резиновые изображения
Сеточные системы CSS
• Semantic (http://semantic.gs/)• Skeleton (http://www.getskeleton.com/)• Less Framework (http://lessframework.com/)• 1140 Css Grid (http://cssgrid.net/)• Clumnal (http://www.columnal.com/)• Foundation (http://foundation.zurb.com)• Twitter Bootstrap (http://getbootstrap.com/)
HTML5 для адаптивных веб-дизайнов
CSS3 типографика: селекторы и цветовые режимы
Новые цветовые форматы CSS3 и альфа-прозрачность
• RGB• HEX• HSL
Великолепная эстетика с использованием CSS3
• Текст с тенью text-shadow: 0px 1px #ffffff,4px 4px 0px #dad7d7;
• Тени блочных элементовbox-shadow:inset 0 0 40px #000000;
• Линейные фоновые градиентыbackground: linear-gradient(90deg, #ffffff 0%, #e4e4e4 50%, #ffffff 100%);
• Радиальные фоновые градиентыbackground: radial-gradient(center, ellipse farthest-corner, #ffffff 72%, #dddddd 100%);
• Повторяющиеся градиенты
background: repeating-linear-gradient(90deg, #ffffff 0px, hsla(0, 1%, 50%,0.1) 5px);
background: repeating-radial-gradient(2px 2px, ellipse, hsla(0,0%,100%,1) 2px, hsla(0,0%,95%,1) 10px, hsla(0,0%,93%,1) 15px, hsla(0,0%,100%,1) 20px);
body {background-color:white; background-image: radial-gradient(hsla(0, 0%, 87%, 0.31) 9px, transparent 10px), repeating-radial-radient(hsla(0, 0%, 87%, 0.31) 0, hsla(0, 0%, 87%, 0.31) 4px, transparent 5px, transparent 20px, hsla(0, 0%, 87%, 0.31) 21px, hsla(0, 0%, 87%, 0.31) 25px, transparent 26px, transparent 50px); background-size: 30px 30px, 90px 90px;
background-position: 0 0;
}
Рис. 6.18. Для страницы задан фон в виде узора
http://lea.verou.me/
CSS препроцессоры
• http://sass-lang.com/• http://www.lesscss.org/
Масштабируемые значки
• http://fico.lensco.be/#see• http://icomoon.io/
CSS3-переходы, трансформации и анимации
• Переходы• transition-property• transition-duration• transition-timing-function• transition-delay
• Трансформации• 2D
• 3D
• scale• translate• rotate• Skew• matrix
• perspective• rotateX & rotateY
Анимация с помощью CSS3
@keyframes warning { 0% { text-shadow: 0px 0px 4px #000000; } 50% { text-shadow: 0 0 20px #000000; } 100% { text-shadow: 0px 0px 4px #000000; }}
animation: warning 1.5s infinite ease-in;
Покорение форм с помощью HTML5 и CSS3
• placeholder• required• autofocus• autocomplete• list & datalist
• Атрибуты
• Типы полей ввода• email• number• url• tel• search• pattern• color• date, time, month,week e.t.c• range
Решение кросс-браузерных проблем с адаптивностью
• Плавное сокращение возможностей• Прогрессивное улучшение
Modernizr — «швейцарский армейский нож» разработчика клиентских приложений
<html class=" js flexbox geolocation postmessage indexeddb history websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients no-cssreflections csstransforms no-csstransforms3d csstransitions fontface generatedcontent video audio localStorage sessionstorage applicationcache" lang="en">
Выводы, вопросы и дополнения?
• Используйте html5 и css3 где возможно• Не забывайте про владельцев мобильных
систем – используйте адаптивную верстку
• Используйте полизаполнения• Используйте готовые фреймворки • Используйте css препроцессоры