K9124 Responsive Web Design RWD

Med Responsive Web Design skal man kun programmere en hjemmeside 1 gang. Hjemmesiden tilpasses automatisk de forskellige skærmstørrelser og events….

Målgruppe for Responsive Web Design Kurset

Kurset henvender sig til webudviklere, der ønsker at udvikle til både browsere, telefoner, tablets m.m. Responsive Web Design har ry for at være tricky, men hvis man lærer det rigtigt, er det faktisk både nemt og sjovt.

Kurset giver dig mere end Buzzword Compliance. Du lærer med effektive Hello World eksempler og eget site at udvikle Responsive Web Design (RWD).

Kort om Responsive Webdesign

Begrebet Responsive Web Design kom frem i 2010. Med RWD kan man udvikle websider, som er funktionsdygtige og ser godt ud ikke bare i en almindelig browser, men også på telefoner og tablets.

Adaptive Web Design (AWD) og Responsive Web Design (RWD)

AWD handler om at udvikle forskellige løsninger til forskellige klienter. Serveren ‘sniffer’ den benyttede klient. Herefter sendes den rigtige, tilpassede kode til klienten.

Fordelen er, at klienten kun får den nødvendige kode – og at man tilpasser koden 100% til denne klient. Ulempen er dog, at man skal udvikle parallelle løsninger til potentielt mange klienter. AWD må antages at være ‘old school’.

RWD er anderledes. Man udvikler én kode, som sendes til klienten. Ved hjælp af CSS og kreativ brug af HTML5 indstilles koden automatisk til den klient brugeren benytter. Men det hele sker på klient-siden – modsat Adaptive Design.

Forudsætninger for kurset

Du skal have rimelig rutine i webudvikling gerne med rutine i html5 og css3.

Mange hjemmesider og temaer til diverse cms-systemer er ikke responsive. Det er nemt at tjekke:

Prøv at tryk CTRL-+ flere gange. Fremkommer der en vandret scrollbar nederst på skærmen er siden ikke responsive.

Efter kurset kan du

Kurset er meget praktisk orienteret. Du får vist eksempler på særdeles flotte, responsive websider, og du kommer til at udvikle dit eget site fra bunden. Alle responsive teknikker beskrives undervejs.

Men kurset tager dig hele vejen, og efter endt kursus kan du lave dit eget professionelle responsive site.

Kursusindhold

  • Browserkompabilitet og Web Engines
  • Responsive Web Design fallback til HTML4 og ældre browsere
  • HTML5 elementer med betydning for Responsive Web Design – herunder især fokus på semantic
  • K9133 BootStrap Framework – intro, overblik *) (Vi har selvstændigt kursus i BootStrap – Afhængig af kursistønsker kan BootStrap indkøres mere eller mindre i dette kursus)
  • CSS3 – transition
  • CSS3 – box model – herunder flex box modellen, box-pack, box-align- box-orient m.fl.
  • Media Queries – grundstruktur
  • Standard CSS i forhold til Media Queries – upsize og downsize dit site. Skal man starte oppefra? eller nedefra?
  • Media Queries i forhold til width, height, orientation af device
  • Brug af breakpoints
  • Flytning af emner på skærmen
  • Ændring af farver, position, visibility, opacity og andet i forbindelse med resizing af skærm
  • Web form elementer, der automatisk tilpasser sig klient, så f.eks. et number-felt automatisk får vist numerisk tastatur på en mobiltelefon
  • Sektioner og Detaljevisning
  • Flexible Images
  • Fluid Grids – Hvornår skal noget gradvist resizes, ikke resizes eller flyttes/skjules
  • Flexible Images – hvordan kan billeder bliver gradvist større/mindre, når viewport (indre skærmstørrelse) ændres
  • Progressive Enhancement
  • Gracefully Degrading

Kodeeksempler med hjem

På kurset får du en lang række eksempler/filer fra den virkelige verden med hjem.

Kursuscertifikat

Efter endt kursus modtager du kursuscertifikat for deltagelse.

Eksempler på hjemmesider, der benytter Responsive Web Design

I dag er de fleste hjemmeside responsive. I 2014 annoncerede Google, at man ville straffe ikke-responsive hjemmesider med lavere ranking.

Resize vinduet og se siderne blive tilpasset. Bemærk, at der ikke kommer en horisontal scrollbar. ZoomTek.dk er selvfølgelig også Responsive. I skrivende stund er RWD efterhånden blevet meget udbredt.

Jyske Bank var en af de første større hjemmesider herhjemme med 100% rwd. Boston Globe (amerikansk hjemmeside) var blandt de første til at lave avanceret RWD, og her er det interessant at se, hvor elegant rwd er integreret.

Skal man lave komponentbaseret udvikling, er kendskab til RWD væsentligt. For selv om man arbejder i et responsive tema, hjælper det ikke meget hvis man indlejrer kode eller komponenter, der ikke er det.