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.

Mere fra ZoomTek...

K9133 BootStrap 4 Framework BootStrap er det mest benyttede framework til udvikling af Responsive Web Design - RWD. BootStrap er let at arbejde med og kan benyttes gratis. Boot...
K9122 HTML5 Grundkursus HTML5 absolut grundkursus HTML5 er standarden for udvikling af hjemmesider. Du får her en blid introduktion, som gør dig i stand til at designe din...
K9108 Apache Server Konfiguration Apache webserveren er den mest udbredte webserver i verden. Det siges, at over 50% af alle websider er hostet på en Apache Server... Apache virker ...
K9141 Django Web Framework Kursus Hvad er Django web framework ? Django er et high-level Python web framework. Som udvikler kan man hurtigt lave effektive og sikre websites, som er le...
K9139 Performance optimering af websider Website Performance er afgørende for Google Ranking Kunder foretrækker et hurtigt site - ellers er de videre, Google forventer hurtig performance - e...
K9112 JQuery Udvikling Grundlæggende Om JQuery Det er nemt at copy/paste JQuery fra internettet. Men lærer du JQuery rigtigt og får styr på selectors, arrays og parametre-i-parametre, ka...
K9121 JSON JavaScript Object Notation JSON er en standard, der benyttes til dataoverførsel af objekter ved hjælp af attribut-value par. Data benyttes ofte på websites og er implementeret i...
K9126 LESS Leaner CSS Med LESS kan man udvikle CSS smartere og bedre. LESS er i virkeligheden et Javascript bibliotek. LESS Leaner CSS Når du laver din LESS kode, compi...
K8242 Idéer til Webdesigneren Målgruppe Kurset henvender sig til webudviklere, marketingfolk, designere o.l., som ønsker at få idéer til opsætning af et website. Kurset gennemgår ...
K9135 HTML5 Udvidet Html5 er standard markup sproget til udvikling af websider og applikationer til browser- og mobilløsninger. Html5 har været brugt i flere år, men ...
K9119 HTML5, CSS3, JavaScript API Kursus Kurset omhandler HTML5 inklusive JavaScript API. Tæt forbundne teknologier som CSS3 og Geolocation er også en del af kurset Målgruppe for HTML5, CS...
K9107 CSS – Cascading Style Sheet Målgruppe Webudviklere, som ønsker at supplere deres HTML kundskaber med Cascading Stylesheet. Kurset gennemgår både CSS1, CSS2 og hvis det er ønsket...
K9127 SASS Syntactically Awesome Stylesheets Om SASS Der findes mange CSS Frameworks - også kaldet CSS preprocessors. De mest brugte er Sass, Less, Emastic, 960.gs, Compass, Unobtrusive, Bluepri...
K9129 Søgemaskineoptimering SEO Kursus Hvorfor søgemaskineoptimere? Internettet bør i dag være en væsentlig parameter i virksomhedens marketing. Rigtig mange virksomheder ofrer formuer på ...
K9132 Underscore.JS UnderScore.JS siges at være en JQuery wannabe. Det er ikke korrekt. UnderScoreJS giver ekstra muligheder og kan benyttes sammen med JQuery. UnderScore...
K9131 BackBone JS Grundlæggende Vi afholder kursus i BackBoneJS. Kurset er grundlæggende og henvender sig til webudviklere, der står over for at skulle gennemføre projekter med BackB...
K9138 ASP.NET MVC Framework udvikling ASP.NET MVC - framework til udvikling af websider ASP.NET MVC er en helt ny måde at udvikle websider på.  ASP.NET MVC (herefter MVC) kan udvikles ind...