Веб Дизайн

Лекция 7

Структурирование содержания,

Отзывчивый Дизайн, Twitter Bootstrap

Vladimir Tomberg, PhD

Эстонский Университет Прикладных Наук

по Предпринимательству Майнор

Январь 2015

Pic

ture

sourc

e:

htt

p:/

/userc

ente

redconte

nt.

com

ПРЕЗЕНТАЦИЯ ДОМАШНИХ РАБОТ

Сегодня самостоятельно!

2

Информационная Архитектура• Навигация отражается в карте сайта;

• Иерархия информации,

• В раскладке страницы,

• Организация страницы в структуру, ориентированную на пользователя,

• Создание карты пути пользователя (CustomerJourney Map)

Web Accessibility Workshop

3

Сначала надо структурировать содержание

4Web Accessibility Workshop

Picture Source http://blog.braintraffic.com

Основа качественной страницы – последовательно структурированное содержание

Readability removes everything on the page except the main content so that readers are not distracted

5

Источник: https://www.readability.com/

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

6Web Accessibility Workshop

http://www.telegraaf.nl/

Планирование структуры заголовков

• Страницы должны быть структурированы в иерархии;

• Заголовки младшего уровня должны заключаться в заголовки следующего старшего уровня;

7Web Accessibility Workshop

Правильное использование заголовков

• Не используйте такое форматирование шрифта, как font size или bold чтобы придать заголовку вид — используйте оригинальные теги (<h1> - <h6>) для всех заголовков;

• Также не используйте теги заголовков чтобы придать визуальное отличие тексту;

• Используйте элемент <strong> вместо <bold> и элемент <em> вместо <i>

8Web Accessibility Workshop

Правильное использование списков

• HTML списки - <ul>, <ol>, и <dl> - также передают иерархическую систему содержания

<ul>

<li>Coffee</li>

<li>Tea</li>

<li>Milk</li>

</ul>

9Web Accessibility Workshop

ОТЗЫВЧИВЫЙ И АДАПТИВНЫЙ ВЕБ-ДИЗАЙН

10

Дизайн отзывчивой страницы

11

Гибкие медиа

12Web Accessibility Workshop

Flexible Media

img {max-width: 100%;}

• Это правило устанавливает размер

изображения на максимально

возможный, или по ширине

содержащего элемента, который

находится выше по иерархии

13Web Accessibility Workshop

Media Query

Media Queries это модуль CSS3 который реализует визуализацию содержания адаптируя к условиям, например ─ к разным разрешениям экрана

14Web Accessibility Workshop

Source http://www.downgraf.com

Media Query Operators

15Web Accessibility Workshop

@media (min-width: 700px) { ... }

@media (min-width: 700px) and (orientation: landscape) { ... }

@media (min-width: 700px), handheld and (orientation: landscape) { ... }

Source https://developer.mozilla.org

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

16

Инструменты тестирования адаптивных страниц

Viewport Resizer и Responsive Design Bookmarklet

http://lab.maltewassermann.com/viewport-resizer/ http://responsive.victorcoulon.fr/

Web Accessibility Workshop

17

Задание 16. Тестирование сайтов

• Протестируйте сайты конкурентов на отзывчивость;

• Напишите краткий отчет и включите в него скриншоты: Каковы результаты тестирования?

Что реализовано хорошо?

Что не работает?

• Разместите пост в блоге

18Web Accessibility Workshop

Адаптивный и Отзывчивый веб-дизайн

19Web Accessibility Workshop

Мобильная версия сначала

Если вы можете удовлетворить пользователей мобильных систем, вы

сможете удовлетворить всех

20Web Accessibility Workshop

4.12.2014 – Google предсказал увеличение мобильных запросов до 50%

21Web Accessibility Workshop

Source http://www.themobilewebtrends.com

Mobile First

22Web Accessibility Workshop

Source http://bradfrostweb.com

ГИБКИЕ СЕТКИ

23

Основа отзывчивого дизайна – Гибкая Сетка. Одно содержание – несколько раскладок

24Web Accessibility Workshop

Пример сетки

25Web Accessibility Workshop

Source: http://aaronkwhite.com

Примеры сайтов изготовленных на основе сеток

http://960.gs/

26

Использование сеток в Axure

27

28

• Axure file with the 960 Grids already placed on Master pages

• Axure960GridSystem.zip

• Bootstrap_08152013.zip

Несколько ссылок на шаблоны с сетками для Axure

Задание 17. Верстка с сеткой

• Переработайте свой макет таким образом, чтобы он строился на основе гибкой сетки;

• Используйте одну из сеток для Axure;

• Попробуйте начать с мобильной версии;

• Результаты опубликуйте в блоге

29

СРЕДА РАЗРАБОТКИ (FRAMEWORK) TWITTER BOOTSTRAP

30

Twitter Bootstrap

• Простой и легко настраиваемый HTML, CSS и Javascript фреймворк для более быстрой и удобной Web-разработки

31

Ссылка для загрузки

http://getbootstrap.com/getting-started/

32

Директория с файлами примеров

http://goo.gl/gZlUVV

33

Задание 18. Верстка в Bootstrap

• На основе новых макетов сверстать первую страницу используя Bootstrap;

• Исходный код и скриншот страницы опубликовать в блоге

34