K9124 Responsive Web Design RWD

Lær responsive webdesign (RWD). Med responsive webdesign skal man kun programmere en hjemmeside én gang. Hjemmesiden tilpasses automatisk de forskellige skærmstørrelser og events…

| 2 dage | Afholdes i hele Danmark | Firmakursus | Online-kursus | Åbent kursus |

Langt de fleste hjemmesider er bygget op omkring et CMS-system, som igen er bygget op omkring et tema. CMS-systemet i kombination med teamet sikrer oftest, at websitet er responsive. Benytter man f.eks. WordPress, vil de mest kendte temaer sikre et korrekt opbygget website, der overholder RWD-principperne.

Men der findes temaer (og CMS-systemer), som ikke automatisk er responsive. Ofte er det også nødvendigt at lave ekstra kode, som indlejres på et eksisterende site. Det kan være i form af moduler og plugins. Eller det kan være som tilretninger, hvor man lige skal have en formular presset ind i højre side af skærmen. Her opstår problemerne, hvis sådanne elementer ikke indsættes med respekt for RWD.

Målgruppe for RWD-kurset

Kurset henvender sig til alle frontend- og 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 efter principperne for responsive webdesign (RWD).

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 trykke CTRL-+ flere gange. Fremkommer der en vandret scrollbar nederst på skærmen er siden ikke responsive.

Fold ud

Grundkursus og Udvidet kursus

Kursusbeskrivelsen nedenfor kan ændres og tilrettelægges både opad og nedad i niveau. Derfor tilbydes både et grund- og udvidet kursus. Inden kurset tager instruktøren et webmøde, så alt bliver timet og tilrettelagt - og deltagere og instruktør får hilst på hinanden. Jeres emner kan inddrages i kurset.

Kursus i Jeres virksomhed er nemmest

For alle parter er det nemmest at holde kurset i et mødelokale på jeres adresse. ZoomTek tilbyder også online kurser/fjernkurser eller kurser afholdt på et hotel. Kurser laves i hele Danmark.

Få rabat med klippekort

Du kan få rabat, hvis du bestiller et kursusklippekort. Klippekortet kan bruges af alle medarbejdere.

Ring 4250 5040 og lad os finde en dato

Kurset holdes, når det passer i jeres kalender. Kom gerne med datoforslag. På den måde kan der komme skub i jeres projekter, og I behøver ikke vente unødigt på et kursus.

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 og indlæres med hands-on-øvelser. Men kurset tager dig hele vejen, og efter endt kursus kan du lave dit eget professionelle responsive site. ZoomTek har også et kursus i CSS3, som fokuserer bredt CSS3s mange muligheder.

Indhold af kurset i Responsive webdesign RWD

1 | Introduktion til Responsive Webdesign

  • Eksempler på site, som overholder RWD-principperne

2 | Værktøjer

  • Testværktøjer til simulering af enheder

3 | CSS – Cascading Style Sheets

  • CSS3 Transition
  • CSS3-introduktion til grid-modellen, flexbox-modellen, box-pack, box-align, box-orient m.fl.
  • Standard CSS i forhold til Media Queries – upsize og downsize dit site. Skal man starte oppefra? eller nedefra?

4 | Media Queries

  • Forskellige Media Queries til forskellige enheder
  • Best Practices
  • Media Queries – grundstruktur
  • Media Queries i forhold til width, height, orientation af device
  • Hvilke pixelopløsninger skal man angive i Media Queries?

5 | Flytning af elementer

  • Flytning af emner på skærmen

6 | Avanceret brug af CSS3

  • Grid-metoden
  • Flexbox-metoden

7 | Billeder og grafik

  • Flexible Images
  • Flexible Images – hvordan kan billeder bliver gradvist større/mindre, når viewport (indre skærmstørrelse) ændres

8 | Andre emner

  • Ændring af farver, position, visibility, opacity og andet i forbindelse med resizing af skærm
  • HTML5-elementer med betydning for Responsive Web Design – herunder især fokus på semantic
  • Fluid Grids – Hvornår skal noget gradvist resizes, ikke resizes eller flyttes/skjules?
  • Sektioner og detaljevisning
  • Progressive Enhancement
  • Gracefully Degrading
  • Web form-elementer, der automatisk tilpasser sig klient, så f.eks. et number-felt automatisk får vist numerisk tastatur på en telefon

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, tablets og andre devices.

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. Denne løsning resulterer i princippet i det samme som RWD, men udviklingsteknisk er den helt omvendt. Fordelen er, at klienten kun får den nødvendige kode, og at man tilpasser koden 100% til denne klient. Ulempen er udvikling af parallelle løsninger til potentielt mange klienter. AWD må antages at være ‘old school’.

RWD er løsningen

RWD er anderledes. Man udvikler én kode, som sendes til klienten. Ved hjælp af CSS3 og kreativ (og dokumenteret) brug af HTML5 indstilles koden automatisk til den klient, brugeren benytter. Men modsat AWD sker det hele på klientsiden.

Kursusinstruktør:

Søren Anderson, KGR

ZoomTek Kurser

Kurset er udviklet 100% af ZoomTek og/eller af kursusafholder.

Kursus hos Jer

Kurset kan køres på jeres adresse. Nemt og praktisk...

I skal blot have et mødelokale og wifi.

Remote via video

Kolleger kan deltage remote via video. Så kan alle deltage, selv om I har afdelinger i hele landet eller udlandet. Kurser kan afholdes på engelsk.

Praktisk information

Ring på telefon 4250 5040 eller skriv til e-mail info@zoomtek.dk . Alternativt kan du udfylde kontaktformularen nederst.

Kursusdatoer aftales med dig som kunde. Sammen med instruktøren finder I nogle passende datoer. Det kan være meget snart eller om noget tid efter jeres ønske.

De fleste kurser afholdes ude hos vores kunder. Et almindeligt mødelokale er helt optimalt. Alternativt holdes kurser også på hoteller og konferencecentre i København, Aarhus, Aalborg, Odense og Trekantområdet.

Prisen afhænger af antal deltagere, geografi og om det er et ZoomTek kursus eller et formidlet kursus afholdt af en af vore partnere.

Ja. Kurser kan holdes på engelsk, og i en del tilfælde også på svensk. Kurser kan holdes i udlandet til standardpris + rejseomkostninger.

Ja. For 2 personer holder vi et lukket firmakursus. Er du kun dig, kan vi tilbyde et Online kursus.

OnLine kurser er meget fleksible, og kan holdes for 1 eller flere personer. Det kan også være en mulighed, hvis I sidder i Herning og den bedste instruktør til opgaven bor i Ballerup. Online kurser giver samme indlæring som almindelige kurser. Det vidner kursisters tilbagemeldinger gennem flere år om.

Ja, alle ZoomTeks kurser er skræddersyede. Kurser kan tilpasses og blandes. Indhold, kursuslængde og kursusform kan tilpasses.

ZoomTek sælger klippekort til kurser. Disse kan benyttes af alle i virksomheden og på tværs af ZoomTek kurser og formidlede kurser.

Kurser på denne side er udviklet eller formidlet af ZoomTek. ZoomTek har ikke 'an affiliation, endorsement, sponsorship, or approval' med Apple®, Adobe®, Microsoft®, IBM® og andre - og deres respektive varemærker. Læs mere om brug af varemærker på ZoomTek.dk her. ZoomTek alene eller de partnere, ZoomTek formidler kurser til, står bag kurserne.

Er du stadig i tvivl om kursusvalg? Lad os tage et uforpligtende webmøde

Kontakt ZoomTek på telefon 4250 5040 eller info@zoomtek.dk.Telefonen er åben alle hverdage mellem kl. 8-17. Webmøder kan også aftales om aftenen.

Du kan også udfylde kontaktformularen nedenfor.






WordPress® (and others) are either registered trademarks or trademarks in the United States and/or other countries. On this page you may find other trademarks and/or registered trademarks that belong to third parties and are the property of their respective owners. ZoomTek does’nt have an affiliation, endorsement, sponsorship, or approval with or by any of these companies and their respective trademarks. ZoomTek has developed all courses on this website or passes the courses on to an external course provider. Read more about the use of trademarks on ZoomTek.dk