Webben består idag av så otroligt många olika enheter(engelska devices)att det inte längre är hållbart att bara skapa en sida som fungerar för desktop-upplösning. Responsiv webbdesign (engelska Responsive Web Design, RWD) är ett koncept som handlar om att skapa en praxis för utvecklingen av webbsidor som fungerar på många olika enheter. Där det som skiljer enheterna är skärmstorleken och upplösningen.
Mediaregler
Det främsta verktyget för att skapa en responsiv design är att använda media regler(engelska och CSS, media queries). Media-regler är en del av CSS som gör det möjligt att ange olika regler baserat på enhetens storlek och typ.
Syntax
@media MEDIATYPE and (condition: breakpoint) {
// CSS regler
}
Media typer
all - för alla olika former av media
print - enbart för skrivare
screen - för skärmar, det kan vara dator eller telefoner och så vidare
speech - för skärmläsare
Breakpoints
Här nedan följer några exempel på vanliga brytpunkter(engelska breakpoints) baserat på pixel-bredd.
320px — 480px: Mobile devices
481px — 768px: iPads, Tablets
769px — 1024px: Small screens, laptops
1025px — 1200px: Desktops, large screens
1201px and more — Extra large screens, TV
X-Small < 576px
Small ≥ 576px
Medium ≥ 768px
Large ≥ 992px
Extra large ≥ 1200px
Extra extra large ≥ 1400px
Meta viewport
En responsiv webbsida behöver följande kod i head elementet. Detta berättar berättar för webbläsaren hur dokumentet ska skalas och det behövs för att sidan ska fungera som menat.
Var noga med att anpassa bildstorleken genom att redigera den. CSS får aldrig ersätta anpassningen av bildens upplösning. Den anpassade bilden behöver sedan CSS-regler för att få den att fungera på sidan.
img {
max-width: 100%;
}
Responsiv typografi
Exempel
En exempel-sida designad utifrån devisen mobil först (engelska mobile first). Här har webbläsarens utvecklarverktyg använts för att skala om fönstret för en mobil upplösning.
Detta blir alltså det första fokuset att arbeta med. Media regler för marginal, text och bilder. Ingen ändring ska göras i HTML koden.
style.css
/* Small devices (tablets, 768px and up) */
@media screen and (min-width: 768px) {
body {
font-size: 1.2rem;
}
h1 {
font-size: 3rem;
}
h2 {
font-size: 2rem;
}
.lead {
font-size: 1.4rem;
}
.container {
max-width: 540px;
}
}
Bildstorleken åtgärdas med att sätta en max-width på innehållets container klass. Innehållet centreras och läsbarheten på texten består. Centreringen och fyllnaden sköts av klassens grundegenskaper. Textens storlek justeras för att vara något större.
Desktop 1200px
Som skärmdumpen visar så är nu sidan svårläst och ful. Det är väldigt tydligt att den mobila designen inte lämpar sig på en dator med webbläsaren i helskärm. Med reglerna på plats för medium-stora skärmar så förbättras sidans utseende något, men det kan fortfarande förbättras. Det som kanske sticker ut mest är att den blir lite för smal och att bilderna inte passar.
Vi kan prova att åtgärda detta med float på bilderna, men ett annat alternativ är att fördela texten i två spalter. Prova det ena eller det andra.
Slutligen uppmanas du att testa sidan, justera storlekar och marginaler tills det ser bra ut och känns rätt. Det kan behövas fler media-regler för att det ska bli riktigt bra.
Navigation
Exempelsidans navigation är väldigt enkel då den bara innehåller en brand länk. Just navigationen är ett stort område inom mobil first då navigation ofta tar mycket plats. Detta har lett till ett otal olika menytyper, mest känd är hamburgaren.
Kolla mer kring navigationen på övnings-sidan, där finns det tre olika exempel som du kan använda och anpassa.
Kort
Kort(engelska cards) är vanligt förekommande i layout-sammanhang på webben. Ett kort är en flexibel container för alla typer av innehåll. Kortet går att återanvända och det visas olika beroende på skärmens storlek.
Ofta samlas flera kort i en behållare som bestämmer dess layout. Sedan används flexbox för att justera layouten med media-regler.
<div class="card-group">
<div class="card">
<img src="https://picsum.photos/500/300" alt="Random picture">
<h3>Lorem ipsum</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam fuga reiciendis velit non est minus, iusto, ipsum ex harum maiores nisi id consectetur repellendus natus reprehenderit error. Animi, iste? Maxime!</p>
</div>
<div class="card">
<img src="https://picsum.photos/500/300" alt="Random picture">
<h3>Lorem ipsum</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam fuga reiciendis velit non est minus, iusto, ipsum ex harum maiores nisi id consectetur repellendus natus reprehenderit error. Animi, iste? Maxime!</p>
</div>
<div class="card">
<img src="https://picsum.photos/500/300" alt="Random picture">
<h3>Lorem ipsum</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam fuga reiciendis velit non est minus, iusto, ipsum ex harum maiores nisi id consectetur repellendus natus reprehenderit error. Animi, iste? Maxime!</p>
</div>
</div>
Det populära ramverket använder följande dimensioner för att specificera sina breakpoints.
Textstorlek angiven i procent är inget som rekommenderas eller fungerar särskilt bra. Istället så bör du skapa media-regler som byter textens storlek vid vissa breakpoints. Här är ledordet prova dig fram, är komplext.
Sidan ger 100 för accessibility score i med bra performance. Funktionsmässigt fungerar det bra i mobil läget. Eftersom sidan är designad för mobile först så är det att förvänta. Nästa steg blir att anpassa den för andra enheter och skärmstorlekar.
Nästa steg är att öka skärmens storlek och studera resultatet. Det mesta fungerar helt okej, men det är tydligt att bildernas upplösning och ratio gör att linjeringen på sidans högra sida blir väldigt hackig. Detta är något som förstärks mer och mer desto bredare sidan blir. Sidans marginal är nu väldigt liten och radlängden i längsta laget (bör vara runt ).
