Дизайн и вёрстка (05)

Дизайн

Графический

Программируемый

Графический дизайн

Приемущества

Недостатки

Полная свобода дизайнера
Можно внедрять всякие «завитушки»

Старая школа
Для создания адаптивного дизайна

Программируемый дизайн

Приемущества

Недостатки

Легко переносится в CSS свойства
Можно импортировать как SVG
Удобно создавать адаптивные

Технологии

Старая школа

Макет в .PSD
Язык разметки текста HTML5
Таблицы стилей CSS3
JQuery

Новая школа, Hard

Важна ли адаптивность?

Принцип: HTML

HTML код:

Принцип: стили

CSS код:

Принцип: Фреймворк Bootstrap
HTML код:

Растровые картинки vs правила CSS

Растровые картинки vs правила CSS

Растровые картинки vs правила CSS

Растровые картинки vs правила CSS

Растровая картинка: 300 байт (со сжатием)

CSS правило: 53 байта

В этом примере эффективность выше в 6 раз.
Это

Дизайн-макет

Дизайн-макет

Дизайн-макет

Вёрстка

Результат вёрстки

Набор файлов: HTML, CSS, JS

Результат вёрстки

Илья Ершов

Веб-разработчик, руководитель интернет-проектов
ershov.ilya@gmail.com
Skype: ershov.ilya
www.ershov.pw

Ссылки и дополнительные
материалы на странице: www.j.mp/mfpa-links