Centralt innehåll

Fakta

1. Responsiv webbdesign

1.1 Surf-statistik

I hela världen är det fler personer som surfar från mobilen jämfört med datorn, se statistik från statcounter.
I Sverige använder 85% av befolkningen internet i mobil och 76% av befolkningen gör det dagligen, enligt en undersökning från Internet Stiftelsen i Sverige.
På svenska e-handelsplatser använder 67% av alla besökare mobilen, enligt en undersökning från e-handel.se.

1.2 Utmaningar på den mobila webben

Mobila enheter, mobiler och plattor, är den vanligaste plattformen för att surfa på webben idag. Det är utan tvekan viktigt att designa bra webbplatser och appar anpassade för mobiler. Men det finns en del utmaningar:

1.2.1 Några riktlinjer för en mobil webbplats
1.2.2 Mobile First

Mobile First betyder att man i sin webbutveckling börjar med att designa och utveckla för den mobila upplevelsen först, istället för det som var vanligt förut, dvs att mobila sidor gjordes som nedskalade versioner av dator-designen.
Mobile First bygger på två idéer:
- Mobilt är viktigare än desktop eftersom fler surfar på mobilen.
- Det är lättare att designa för mobilen först och skala upp än tvärtom.

Mobile-first index innebär att Google indexerar (=rankar) webbplatser och appar utifrån hur väl de fungerar i mobilen. Det innebär alltså att ju bättre en webbplats fungerar i mobilen desto bättre google-ranking (SEO) får sidan.

1.3 Tre kategorier

Man brukar dela in mobilappar i 3 olika kategorier:

2. Webb-appar

I den här kursen kommer vi att göra webbappar, som ska fungera på enheter med olika skärmstorlek, t.ex. TV:n, dataskärmar, mobiler och surfplattor. Hur kan webbutvecklare se till att en webbplats är snygg och läsbar på alla enheter, oavsett skärmstorlek?

Responsiv webbdesign är en webbplats förmåga att ändra storlek och organisera om innehållet baserat på:
- Storleken på webbläsarfönstret.
- Storleken på annat innehåll på webbplatsen.
- Skalbara texter och bilder.
Se exempel på www.bostonglobe.com

Vad behöver en webbutvecklare använda för göra för att skapa responsiva webbsidor?
- Relativa måttenheter (t.ex. %, rem, em).
- Media queries för att ändra utseende (layout) beroende på skärmstorlek.

Relativa mått är bättre än absoluta mått, eftersom de tillåter att proportionerna på en webbplats är samma oavsett skärmstorlek eller layout.
Även om relativa mått ger responsiv design kan element på en webbplats bli felaktiga/fula när de blir för små eller stora, men det går att begränsa hur bred ett element kan vara. Minsta och maximala bredden på ett element kan ställas in med min-width och max-width.
min-width ger en minsta bredd för ett element.
max-width ger en maximal bredd för ett element.

Media queries används för att ändra utseende (layout) på en sida beroende på skärmstorleken. 

<!-- Lägg till följande meta-tagg i HTML-koden --> 

<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
/* Lägg till följande i CSS-koden */

/* Extra small devices (phones, 600px and down) */
@media screen and (max-width: 600px) 
{

}
/* Small devices (tablets and large phones, 600px and up) */
@media screen and (min-width: 600px) and (max-width: 991px)
{

}
/* Large devices (laptops/desktops, 992px and up) */
@media screen and (min-width: 992px) 
{

}

Responsiv webbdesign är grunden till en bra mobilapp. Numera ska man inte tänka mobile first eller desktop first utan målet är att få en bra design och användarupplevelse oavsett enhet och skärmstorlek.

3. CSS-Grids

CSS-Grids underlättar designen av responsiva layouter. En bra film om CSS-Grids är CSS-grids introduction.

CSS Grids är
- relativt nytt (mars 2017), men de senaste versionerna av webbläsarna har stöd för CSS Grids.
- en metod för att bygga upp en layout med CSS.
- bra för att strukturera webbsidor med både rader och kolumner (tvådimensionella element).

CSS Grids kan
- användas med en ny måttenhet för bredd och höjd, nämligen fraction (fr), som är en del av helheten.
- döpa rader och kolumner, för att lättare hålla isär dem.
- skapa layouter helt oberoende av ordningen av element i HTML, vilket gör att m.h.a media queries kan layouten se väldigt olika ut för enheter med olika skärmstorlek.

CSS Grids tillsammans med media queries ger förutsättningar för att gör en bra responsiv webbdesign.

Exempel på kod för CSS-Grids

<!-- HTML --> 
<div id="content">
    <section id="skolverket">
    </section>
    
    <section id="innehall">
    </section>
    
    <section id="begrepp">
    </section>
    
    <section id="links">
    </section>
    
    <section id="ovning">
    </section>
    
    <section id="inlupp">
    </section>
    
    <section id="fordjupning">
    </section>
</div>
/* CSS */
section#skolverket {
    grid-area: skolverket;
}
section#innehall {
    grid-area: innehall;
}
section#begrepp {
    grid-area: begrepp;
}
section#links {
    grid-area: links;
}
section#ovning {
    grid-area: ovning;
}
section#inlupp {
    grid-area: inlupp;
}
section#fordjupning {
    grid-area: fordjupning;
}

#content {
    display: grid;
    padding-top: 6rem;
    padding-bottom: 1rem;
    padding-right: 1rem;
    padding-left: 1rem;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-auto-rows: minmax(50px, auto);
    grid-gap: 1rem;
    margin: 0 auto;
    grid-template-areas:
      "innehall      innehall      innehall      links"
      "ovning        ovning        begrepp       begrepp"
      "inlupp        inlupp        fordjupning  fordjupning"
      "skolverket    skolverket    skolverket    skolverket";
}

Begrepp

Mobile first: Webbutveckling som börjar med att designa och utveckla för mobilen.

Mobile-first index: Google indexerar (=rankar) webbplatser och appar utifrån hur väl de fungerar i mobilen.

Native app: App utvecklad speciellt för det operativsystem som mobilen har.

Webb app: App som använder webbteknikerna HTML, CSS och Javascript och körs i webbläsaren.

Hybrid app: App som är en kombination av webb-app och native-app.

Media queries: Används i CSS för att ändra utseende (layout) på en sida beroende på skärmstorleken.

CSS Grid: Teknik som underlättar designen av responsiva layouter.

Responsiv webbdesign: Webbdesign som tillåter att layouten förändras beroende på skärmstorlek och skärmupplösning,

em  Enhet som sätter textstorleken i förhållande till textstorleken för förälder-elementet.

rem  Enhet som sätter textstorleken i förhållande till textstorleken för rotelementet . rem kan också användas för att sätta storlek på andra element som beror på textstorleken.

%  Enhet som används för att sätta storleken på värden som width, height, border, padding och margin.

fr  Enhet som används för att sätta storleken på element i CSS-Grids.

Övningar

Inlämningsuppgift

login     logout    

Exit tickets