08a. web design

Веб Дизайн

Лекция 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/

6

Плохо визуально структурированное содержание

http://www.telegraaf.nl/

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

17

Примеры отзывчивых сайтовhttp://mediaqueri.es

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