Vi har opbygget en nem, hurtig og overskuelig guide, til hvordan du hurtigt og nemt selv kan blive en responsiv ninja.
Du kan både læse guiden til hurtig at få forståelsen af, hvordan et responsivt design fungerer, og hvorfor det er så vigtigt. Du kan også gennemgå en række opgaver vi har lavet, så du selv kan blive en responsiv ninja.
Vi har lavet en række opgaver, som du kan downloade længere nede på siden, som er til for at lære dig at blive en responsiv ninja.
Opgaverne gennemgår alle steps lige fra fluid grid, meta tags, media queries, JavaScript, animationer osv. Du bygger hele tiden videre på opgaverne, indtil du opnår et fuldt responsivt design.
Smartphones og mobile enheder er blevet en stor del af vores hverdag. Stort set alle ejer i dag en smartphone, og det betyder, at det er en platform, man er nødt til at forholde sig til. I 2014 overhalede sidevisninger fra mobile enheder nemlig sidevisninger fra traditionelle desktops og laptops. I dag er det derfor vigtigere end nogensinde før, at ens hjemmeside er tilpasset en smartphone skærm, mere end det er vigtigt, at den er tilpasset desktop- eller laptopskærme
Som udgangspunkt vil en browser på en smartphone og tablet forsøge at vise en hjemmeside som desktop version. Det vil sige den mobile enhed vil simulere en opløsning, som er samme bredde som selve sidens indhold. Det vil snyde CSS'en til at tro, at opløsningen/bredden er større end den reelt er, og kan derfor risikere ikke at aktivere media queries. Det gør, at hele siden kan ses indenfor den mobile skærms bredde, men vil være zoomet så meget ud, at teksten vil være ulæselig. Det resulterer i, at brugeren aktivt er nødt til at zoome ind og flytte rundt på viewet, hvilket resulterer i en dårlig brugeroplevelse
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">Efter meta tagget er tilføjet i headeren på HTML siden, vil mobile enheder tilpasse sig til en mere passende bredde. F.eks. en iPhone 5 (320px), iPhone 6 eller 7 (375px), Galaxy S7 (360px) osv.
Det andet step i udviklingen af et responsivt design er at opbygge et dynamisk gitter til indholdet på siden. Førhen brugte man fastdefinerede pixels-bredder på objekter, som f.eks. en container med en bredde på 990px. For at opnå indhold på siden, som tilpasser sig en browser og/eller skærm størrelsen, skal man opbygge sit grid i bredder på containere, kolonner, osv. i procent i stedet. Det bibeholder et dynamisk grid, som tilpasser sig afhængig af bredden på containeren.
Media queries er en slags betingelser, som skal være opfyldt for, at sektionen og stylingen i media query bliver aktiveret. En af de grundlæggende betingelser, man gør brug af i responsivt design, er når browser-vinduet eller skærmen når en hvis brede, så skal noget specifik styling aktiveres, og overskriver anden style i vores stylesheet.
Et eksempel kan være, når browser vinduet når under 900px, så skal de to kolonner, som står ved siden af hinanden med en bredde på 50% tildeles et nyt style, som indikerer, at de skal være 100% i bredden, så de kommer til at ligge under hinanden.
Javascript er ikke et must for at lave et responsivt design, men har nogle gode features, som ikke er tilgængelige ved HTML og CSS. En ofte brugt funktion er muligheden for at tilføje en klasse til et element, når man klikker på et andet element, så man ved hjælp af CSS kan ændre på stylingen. Et godt eksempel på sådan en situation er mobil navigation. Her har man som regel foldet navigationen væk på en smartphone for at spare plads. Når man klikker på menu-knappen skal man bruge javascript for at tilføje en klasse til den skjulte navigation, så man ved hjælp af den ekstra klasse kan vise den frem ved hjælp af CSS.
Bootstrap er et af de meste populære HTML og CSS frameworks, som er bygget til mobile first websites. I Bootstrap følger der Stylesheet og Javascript filer med, som gør det muligt, nemt og hurtigt at lave et dynamisk grid, baseret på Bootstraps 12 kolonner. Samtidig følger der andre smarte features, som f.eks. en slider, avanceret navigation, modal pop-ups og mange flere ting med. Bootstrap har deres egen guide til alle deres funktioner, som er nem og overskuelig at følge.
link Læs mere om BootstrapVi har lavet en række opgaver, som skal hjælpe dig med at blive en responsiv ninja.
Zip-filen består af 8 opgaver, som gennemgår alle steps, lige fra meta viewport, fluid grids, media queries, JavaScript og CSS animation. Du arbejder hele tiden videre med opgaverne, indtil du opnår et fuldt responsivt design. Så klik på knappen, og du vil i løbet af ingen tid være en responsiv ninja.
Vi anbefaler du benytter Chrome som browser, der indeholder et suverænt debugging tool til responsivt design, samt et editerings program som f.eks. Notepad++ til, at skrive HTML, CSS og JavaScript i.
I dag har vi nogle udfordringer med, hvordan man laver layouts med HTML og CSS. Det kræves derfor, man kender nogle h4x for at løse følgende problemer:
Men frygt ej! En ny display property i CSS er kommet ud i det fleste browsere, som vil løse alle nuværende layout problemer med HTML, CSS og responsivt design generelt. Layout opbygning vil blive lidt anderledes, end det bliver gjort i dag.
Den nye CSS property er Flexbox, men er desværre ikke særlig udbredt endnu. Det skyldes, at IE9 slet ikke har nogen form for Floxbox support. IE10 understøtter kun enkelte dele og IE11 har nogle bugs, som gør nogle enkelte elementer ubrugelige uden crazy h4x. Microsoft nye Edge browser understøtter dog Flexbox fuldt ud. Andre browsere som Chrome, Safari, Opera, Firefox har længe understøttet Flexbox. Men indtil der stadig er nogle brugere på nogle af Internet Explorer browserne, er de desværre uhensigtmæssige at benytte.
Du kan lære mere om den nye CSS Flexbox property på nedenstående links: