Embed Size (px)
Citation preview
Веб Дизайн
Лекция 8Структурирование содержания,
Отзывчивый Дизайн, Прогрессивное улучшение
Vladimir Tomberg, PhD
Эстонский Университет Прикладных Наук
по Предпринимательству Майнор
Февраль 2016
Pic
ture
sou
rce:
http
://us
erce
nter
edco
nten
t.com
1
ПРЕЗЕНТАЦИЯ ДОМАШНИХ РАБОТСегодня самостоятельно!
2
3
Информационная Архитектура
•Навигация отражается в карте сайта;
•Иерархия информации,•В раскладке страницы,•Организация страницы
в структуру, ориентированную на пользователя,
•Создание карты пути пользования (Customer Journey Map)
4
Сначала надо структурировать содержание
Picture Source http://blog.braintraffic.com
5
Основа качественной страницы – последовательно структурированное содержание
Readability убирает со страницы все, кроме содержания. Остальное пользователь не видит
Источник: https://www.readability.com/
7
Планирование структуры и заголовков
• Страницы должны быть структурированы в иерархии;
8
Планирование структуры и заголовков
• Заголовки младшего уровня должны заключаться в заголовки следующего старшего уровня;
9
Правильное использование заголовков
• Не используйте такое форматирование шрифта, как font size или bold чтобы придать заголовку вид — используйте оригинальные теги (<h1> - <h6>) для всех заголовков;
• Также не используйте теги заголовков чтобы придать визуальное отличие тексту;
• Используйте элемент <strong> вместо <bold> и элемент <em> вместо <i>
10
Правильное использование списков
• HTML списки - <ul>, <ol>, и <dl> - также передают иерархическую систему содержания
<ul> <li>Coffee</li> <li>Tea</li> <li>Milk</li></ul>
ОТЗЫВЧИВЫЙ И АДАПТИВНЫЙ ВЕБ-ДИЗАЙН
11
12
Дизайн отзывчивой страницы
13
Гибкие медиа
14
Flexible Media
img {max-width: 100%;}
• Это правило устанавливает размер изображения на максимально возможный, или по ширине содержащего элемента, который находится выше по иерархии
15
Media Query
Media Queries это модуль CSS3 который реализует визуализацию содержания адаптируя к условиям, например ─ к разным разрешениям экрана
Source http://www.downgraf.com
16
Media Query Operators
@media (min-width: 700px) { ... }
@media (min-width: 700px) and (orientation: landscape) { ... }
@media (min-width: 700px), handheld and (orientation: landscape) { ... }
Source https://developer.mozilla.org
18
Инструменты тестирования адаптивных страниц
Viewport Resizer и Responsive Design Bookmarklet
http://lab.maltewassermann.com/viewport-resizer/ http://responsive.victorcoulon.fr/
19
Задание. Тестирование сайтов на отзывчивость
• Протестируйте сайты конкурентов на отзывчивость;
• Напишите краткий отчет и включите в него скриншоты: Каковы результаты тестирования? Что реализовано хорошо? Что не работает?
• Разместите пост в Google Drive
20
Адаптивный и Отзывчивый веб-дизайн
21
Сначала Мобильные!
Если вы можете удовлетворить пользователей мобильных систем, вы
сможете удовлетворить всех
22
4.12.2014 – Google предсказал увеличение мобильных запросов до 50%
Source http://www.themobilewebtrends.com
23
Сначала Мобильные! (Mobile First)
Source http://bradfrostweb.com
Три главных принципа прогрессивного улучшения
1. Начинайте с чистого содержания и хорошо структурированной разметки;
2. Поддерживайте строгое разделение раскладки, представления и содержания;
3. Ненавязчиво добавляйте дополнительное поведение и презентацию, постоянно учитывая доступность содержания
24
Заготовка с раскладкой: каждый блок имеет имя (ID) и роль
25
Пример сложного интерфейса
• Как реализовать этот интерфейс при помощи чистого HTML, не используя JavaScript и CSS?
26
27
Задание: создайте мокапы для разных устройств
• Используя метод прогрессивного улучшения и Мобильные сначала! – создайте в Axure Lo-Fi прототипы вашего сайта для трёх разных резолюций
• Используйте три режима редактирования Axure. В качестве шаблона используйте файл из Google Drive
