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. Så 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 Web Design - RWD

Responsive Web Design er et relativt nyt begreb (2010), som handler om, hvordan man kan udvikle RWD handler om at udvikle ens webkode til alle klienter og deviceswebløsninger, som er funktionsdygtige og ser godt ud ikke bare i en almindelig browser, men også på telefoner og tablets. Man skelner mellem Adaptive Web Design (AWD) og Responsive Web Design (RWD)

AWD handler om at udvikle forskellige løsninger til forskellige klienter. Serveren 'sniffer' hvilken klient brugeren benytter og sender den rigtige kode til klienten - kode direkte tilpasset denne klient. Fordelen er, at klienten kun få 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.

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. Som minimum skal du kende HTML4 og CSS. Kurset tager udgangspunkt i Responsive Web Design ved hjælp af HTML5, CSS3, men viser også eksempler på hvordan Responsive Design kan laves i HTML4.

Efter kurset kan du

Kurset er meget praktisk orienteret. Du får vist eksempler på særdeles flotte Responsive Websider, og du får mulighed for at udvikle dit eget site helt fra bunden. Alle responsive teknikkerne beskrives fra bunden. Men kurset tager dig hele vejen, så du efter endt kursus kan 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 fra den virkelige verden, som er lige til at tage 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 hvordan siderne tilpasses. 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.


Del denne artikel på

Mest læste sider

test2.png