Mobile Devices

Im Modul Mobile Devices werden Techniken und Best Practice Ansätze zur Webentwicklung jenseits des Desktops vermittelt. Als Webentwickler der heutigen Zeit haben wir keine Kontrolle mehr darüber, von welchem Medium aus unsere Websites verwendet werden. Responsive Webdesign ist dafür seit 2010 der Begriff unter dem die Lösungen für dieses Problem liegen.

Im Verlauf des Moduls erarbeiten wir den Mobile First - Approach und erleuchten die Philosophie hinter Progressive Enhancement und wie man diese im eigenen Workflow umsetzen kann. Den Abschluss machen moderne Layout Techniken und der Umgang mit den kommenden Lösungen für responsive Images.

Themenüberblick

Einheit 1 - responsive webdesign fundamentals

• fluid layouts
• mediaqueries
• Arbeitsweise mit und ohne Preprozessoren
• Lösungen für <img /> & background-image
• Breakpoints

Einheit 2 - retrofitting RWD process

• Von Desktop zu Mobile
• Testen mit den Devtools
• Probleme dieses Ansatzes
• Performanceeinbußen

Einheit 3 - mobile first

• der mobile first approach
• Vorraussetzungen
• min-width based mediaqueries
• technische Kapazitäten mit mobile first nutzen
• Inkonsistenzen & Barrieren von mobilen Browsern

Einheit 4 - progressive enhancement

• Progressive Enhancement Philosophy
• RWD Workflow
• advanced mediaqueries

Einheit 5 - moderne Layout Techniken

• Legitimität und Probleme von <table>
• Floats, overflows & clearfixes
• Flexbox
• Grid-Systeme & Layout Engines (susy)
• CSS Grid

Einheit 6 - responsive images

• Umgang mit Bildern bei RWD
• Bildformate
• Nutzen von SVG
• srcset
• <picture>