RESPONSIVE WEB DESIGN

1. RESPONSIVE WEB
DESIGN
Kerimhanov R.
rkerimhanov@codemastersintl.com

2. Оглавление:
•
•
•
•
•
•
•
•
•
Знакомство с
HTML5,
CSS3 адаптивным
и
веб-дизайном
Медиазапросы: поддержка
разных
областей
просмотра
Использование «резиновых»
макетов
HTML5 для
адаптивных
веб-дизайнов
CSS3:
селекторы,
типографика цветовые
и
режимы
Великолепная эстетика использованием
с
CSS3
CSS3-переходы,
трансформации анимации
и
Покорение форм помощью
с
HTML5 CSS3
и
Решение кросс-браузерных
проблем адаптивностью
с

3. Знакомство с
HTML5,
CSS3 адаптивным
и
веб-дизайном
Итан Маркотт – разносторонний дизайнер-разработчик. Его работы – это сочетание качественного кода и захватывающего дизайна.
Среди его клиентов – New York Magazine, Стэнфордский университет, Кинофестиваль «Сандэнс» и «Консорциум Всемирной
паутины» (World Wide Web Consortium, W3C). Он ведет блог unstoppablerobotninja.com и постоянно зависает в Твиттере (@beep).
Итан – автор и технический редактор журнала A List Apart – издания для людей, делающих веб-сайты. Вместе с основателем
компании Happy Cog, самым известным веб-дизайнером в мире Джеффри Зельдманом, Итан работал над третьей редакцией книги
«Web-дизайн по стандартам», которая занимает почетное место на книжных полках каждого опытного дизайнера.

4. Преимущества HTML5
• Упрощение разметки
• Новые семантически значимые элементы тегов
• Новые атрибуты
Преимущества CSS3
• Новые свойства
• Media queries
• Применение css3 не приведет к каким-либо нарушениям

5. Можно ли реализовать потенциал HTML5 и CSS3 уже сегодня?
•
Хочет
ли
заказчик
охватить
максимально
широкий
круг
интернет
-пользователей,
количество
которых
постоянно
растет?
•
Хочет
ли
заказчик
получить
максимально
чистую,
наиболее
быст
ро
работающую самую
и
удобную сопровождении
в
кодовую
базу?
•
Понимает
ли
заказчик,
что
взаимодействие
может должно
и
сл
егка
отличаться
при
использовании
разных
браузеров?
• Хочет
ли
заказчик,
чтобы
нужный
ему
дизайн
выглядел
одина

6. Медиазапросы: поддержка разных областей просмотра
Медиазапросы можно использовать уже сегодня
•
•
•
•
•
•
•
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" />

7. Что позволяют проверить медиазапросы
•
•
•
•
•
•
•
•
•
•
•
•
•
Width
Height
Device-width
Device-height
Orientation
Aspect-ratio
Device-aspect-ratio
Color
Color-index
Monochrome
Resolution
Scan
Grid

8. Использование «резиновых» макетов
ШИРИНА ДОЧЕРНЕГО ЭЛЕМЕНТА
__________________________________
*
ШИРИНА РОДИТЕЛЬСКОГО ЭЛЕМЕНАТА
100
=
РЕЗУЛЬТАТ

9. Резиновые изображения

10. Сеточные системы 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/)

11. HTML5 для адаптивных веб-дизайнов

13. CSS3 типографика: селекторы и цветовые режимы

14. Новые цветовые форматы CSS3 и альфа-прозрачность
• RGB
• HEX
• HSL

15. Великолепная эстетика использованием
с
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%);
• Повторяющиеся градиенты

16. 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);

17. 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;
}
http://lea.verou.me/
Рис. 6.18. Для страницы задан фон в виде узора

18. CSS препроцессоры
• http://sass-lang.com/
• http://www.lesscss.org/
Масштабируемые значки
• http://fico.lensco.be/#see
• http://icomoon.io/

19. CSS3-переходы,
трансформации анимации
и
• Переходы
•
•
•
•
transition-property
transition-duration
transition-timing-function
transition-delay

20. • Трансформации
• 2D
• scale
• translate
• rotate
• Skew
• matrix
• 3D
• perspective
• rotateX & rotateY

21. Анимация с помощью 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;

22. Покорение форм помощью
с
HTML5 CSS3
и
• Атрибуты
•
•
•
•
•
placeholder
required
autofocus
autocomplete
list & datalist
• Типы полей ввода
• email
• number
• url
• tel
• search
• pattern
• color
• date, time, month,week e.t.c
• range

23. Решение кросс-браузерных
проблем адаптивностью
с
• Плавное сокращение возможностей
• Прогрессивное улучшение
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">

24. Выводы, вопросы и дополнения?
• Используйте html5 и css3 где возможно
• Не забывайте про владельцев мобильных
систем – используйте адаптивную
верстку
• Используйте полизаполнения
• Используйте готовые фреймворки
• Используйте css препроцессоры