Веб проектите се очекува да работат на повеќе различни уреди, големини на екран и контексти на прелистување. Веб дизајните треба да се прилагодат на овие варијабили, обезбедувајќи оптимално искуство на приказ за секое сценарио. Во овој курс ќе дискутираме за основите на прилагодливиот дизајн за почетници во дизајнот, но и ќе ги објасниме сите недоразбирања кои ги имаат искусните дизајнери за веб, зборувајќи за начинот на кој моменталните трендови кај уредите, поврзливоста и корисничкото искуство, го имплементираат овој прилагодлив дизајн. Курсот ги покрива концептите на густина на екран, флуидни мрежи и прилагодливи слики, како и актуелните стратегии за дизајнирање кои ве водат од реален модел до тестирање.

Следејќи ги концептите со кои се запознавме во курсот Основи на прилагодлив дизајн, во овој курс ќе ја демонстрираме практичната употреба на прилагодливиот дизајн, и ќе ви покажеме како да го збогатите изгледот и однесувањето на вашиот веб дизајн кај повеќе уреди. Прво, ќе погледнеме како да го испланирате вашиот дизајн и да ги искористите CSS медиа прашалниците за да креирате повеќе распореди. Потоа ќе направиме распоредот да се прилагодува на промените на големината на екранот со CSS и jQuery, и флуидно ќе ги прикажеме сликите и видеата. Дополнително, ќе ви покажеме и како да ги искористите мобилните можности, како настани на допир и HTML5 форми, за да го подобрите искуството на мобилните корисници. Курсот ќе ви покаже и како да работите со ресурси и да ја оптимизирате изведбата на вашиот сајт.

Прилагодливите слики се следната еволуција во веб дизајнот. Научете како да ги имплементирате со реални сценарија за најдобри практики за имплементирање на прилагодливи слики во сајтови за продукција. Во овој курс ќе ви објасниме што се прилагодливите слики и како тие функционираат, како да го употребите Picturefill JavaScript полифилот, за да направите прилагодливите слики да работат во прелистувачите кои сé уште не ги поддржуваат. Потоа ќе ги погледнеме двата главни типови на прилагодливи слики (употребувајќи го <img> тагот со srcset и w и новиот <picture> таг), и ќе работиме со примери подготвени за продукција за да ви помогнеме да се стекнете со практично искуство за нивна имплементација.

1. Прилагодлив дизајн на веб сајт
Откријте како да употребите прилагодлив веб дизајн за да го направите сајтот почитлив и поефикасен на секаков уред. Во овој курс ќе работиме со техники на комбинирање HTML и CSS во веб распоред, кој може да се прилагодува на различни големини на екран и ориентации. Во курсот ќе работиме на еден веб сајт од почеток до крај, од прилагодување на HTML страницата и елементите содржатели, па до нанесување стил на поставените елементи за мали, средни и големи екрани. Патем, ќе ви покажеме како да го смените местото на лентата за навигација, со цел истата да има подобар приказ на мобилни уреди, како да креирате анимирани транзиции, и како да претворите неподредени листи во интерактивни менија со поддршка на настани на допир.  Ќе научите и како да употребувате CSS псеудо-елементи, и да прилагодувате распореди за печатење, за да заштедите на мастило и хартија.

2. Прилагодлива HTML е-пошта
Дизајнирањето на HTML е-пошти е предизвик, особено ако ги земете во предвид ограничените можности на десктоп и веб читачите за е-пошта, во комбинација со малите екрани на мобилните уреди. Внесете прилагодливи HTML е-пошти. Дозволете ни да ви покажеме како да дизајнирате елегантна е-порака, која ќе се прилагодува на различни големини на екран, и визуелно точно ќе се обработува во повеќе од 30 клиенти за пошта, како Gmail, Yahoo, AOL, и повеќе верзии на  Outlook, како и на Android, iOS, и Windows телефоните. Научете како да додадете опции од типот на графики во позадина, заоблени агли, и сенки, кои нема да ја прекинуваат е-пораката кога нема да може да се прикажат. Потоа креирајте копчиња за повик на акција, додадете анимации и нанесете стил со CSS. Дополнително, разгледајте ги алатките и услугите кои ќе ви помогнат да ги тестирате вашите кампањи. Почнете сега, и дознајте што може да направите со HTML е-поштата.