Бърз старт в адаптивния дизайн

Съвременни адаптивни решения. Създаване на впечатляващ дизайн за всяко устройство. Перфектните до пиксел сайтове вече не съществуват. Данните, в които позиционирахме елементите на дадена уеб страница и очаквахме те винаги да изглеждат по желания от нас начин, отдавна отминаха; сега е необходимо да се справяме с постоянния наплив от нови и разнообразни устройства, на които нашият дизайн трябва да изглежда фантастично. Адаптивният уеб дизайн вече не е просто допълнителна функционалност, която може да използвате по желание. Той е задължителен!

Книгата "Бърз старт в адаптивния дизайн, съвременни адаптивни решения" има за цел да помогне на дизайнерите в бързото усвояване и прилагане на CSS и HTML инструментите, които са им необходими в съвременния свят на нови и разнообразни устройства. Изпълнена с практически указания и подробни примери.

Тази книга разглежда следните теми:

• използване на адаптивни градивни елементи, които ще подпомагат адаптирането на уеб страниците;
• разработване на адаптивни решетки, които ще направят едно оформление приложимо за всяко устройство;
• добавяне на адаптивен текст към даден дизайн;
• използване на адаптивни изображения и видео;
• адаптиране към потребителския контекст: ориентация, околна светлина, местно време и др.

"Преди време всичко беше толкова лесно: трябваше само дизайнерите да създадат потребителски интерфейс за уеб сайт или приложение за 15-инчов монитор, и ако не обръща внимание на проблемите, свързани с несъвместимостта между различните браузъри, щяха да са приключили с изпълнението на вашата задача. След това се появиха първите мобилни телефони с вградени уеб браузъри и усложниха живота на дизайнерите и разработчиците. Най-лошото е, че на потребителите им допадна да сърфират с тях!

През 2016 г. за първи път броят на сърфиращи в интернет от мобилни устройства превиши броя на сърфиращите от компютър. Точно когато разработчиците и дизайнерите свикнаха да изграждат уеб сайтове за мобилни устройства, им се наложи да изграждат уеб сайтове и за таблети, смарт часовници, телевизори, автомобили, очила, по-големи настолни екрани, екрани с висока разделителна способност и дори уеб браузъри, вградени в стените. Поддържането на този привидно безкраен поток от нови устройства представлява все по-голямо предизвикателство за разработчиците.

И как да се ще поддържа този все по-голям набор от устройства? Отговорът е адаптивен уеб дизайн (от англ. Responsive Web Design и съкратено RWD), включващ технологии, които позволяват на уеб сайтове да се адаптират към екрани с произволни размери. Адаптивният уеб дизайн (RWD) се присъединява към популярната максима в уеб разработването: "Не се повтаряй" (от английски "Don't Repeat Yourself", като обикновено се използва абревиатурата "DRY"). Вместо да поддържате множество кодови бази за всяко устройство, RWD ви позволява да използвате една кодова база, която да се адаптира адекватно към всяко устройство. Прилагайки техниките на RWD, вие ще пишете еднократно код на HTML, CSS и JavaScript и след това само ще изобразявате съответните елементите на дисплея в зависимост от използваната платформа. Възможно е много от тези стилове и елементи дори да се използват отново или да бъдат изградени посредством минимално количество код за максимална ефективност.

Тази книга има за цел да ви помогне в усвояването и прилагането на CSS и HTML инструментите, които са ви необходими в този нов свят на различни устройства. Тя ще ви запознае с градивните елементи, които подпомагат адаптирането на уеб страниците към различни устройства, с нейна помощ ще направите крачка напред в използването на решетки, ще ви покаже как да направите текст и изображения четими на всички устройства, а в последната глава - ще ви разкрие как да отговаряте на изискванията на по- сложни устройства."
Из книгата

ЗеСТ Прес
София, 1408
жк Иван Вазов, ул. Димитър Манов 75
info@zest-pres.com

Предговор

• За кого е предназначена тази книга
• Използвани стилове
• Съвети, бележки и предупреждения
• Допълнителни материали

Същност и цели на адаптивния уеб дизайн

• История
• Теории в рамките на адаптивния дизайн
• Теория за прогресивното подобрение
• Теория за постепенното влошаване
• Теория за мобилните устройства
• Какво ви е необходимо за поддръжка
• Компютри
• Мобилни телефони
• Таблети
• Хибридни устройства
• Умни аксесоари
• Телевизори
• Коли
• Игрови конзоли
• Печат
• Примерно приложение
• Да се запознаем с RWDFlix
• Компютърна версия
• Версия при използване на таблет
• Мобилна версия
• Версия при използване на телевизор
• Структуриране на страница с помощта на HTML5
• Готови ли сте за адаптивния дизайн?

Градивни елементи на адаптивния дизайн

• Медийни типове
• Създаване на заявка
• Логически заявки с оператори Only и Not
• Характеристики на заявката
• Опростяване на примерното приложение
• Теория за мобилните устройства
• Мета елемент viewport
• Някакви въпроси

По-добри адаптивни структури с помощта на решетъчни системи

• Какво представлява решетката?
• Как да създадете своя собствена решетка
• Flexbox
• CSS оформление на решетката
• Създаване на решетки с помощта на платформи
• Bootstrap
• Foundation
• Какво се случва с демо приложението?
• Накратко

Адаптивен текст

• История на типографията
• Адаптивни типографски свойства в CSS
• Фиксирано оразмеряване
• Относително оразмеряване
• Създаване на четим текст
• Продължавайте напред
Адаптивни изображения и видео клипове
• Изображения
• Адаптивни размери
• Правилният файл за правилното устройство
• srcset
• Елементът picture
• Адаптивно видео
• Елементът video
• Бъдете адаптивни
Адаптиране към потребителския контекст
• Приложно-програмни интерфейси
• На базата на час от денонощието
• Ниво на батерията
• Геопозициониране
• На базата на мрежата
• Предпочитанията на потребителите
• Околна светлина
• Вибрация
• Ориентация на устройството
• В отговор на всички предизвикателства