6. Moment06 - Responsiv design

I det förra momentet så märkte vi att det ställs en del krav på oss att skapa webbsidor som ser bra ut i flera olika användaragenter. Vi skall nu lära oss responsiv design för att kunna styra hur webbsidor skall visas upp på en laptop, en tablet och en smartphone.

Exempeluppgiften

Genom hela detta moment kommer jag visa hur de olika teknikerna används genom att använda en exempeluppgift. Denna exempeluppgift har några år på nacken och har följt med från en tidigare skola där jag jobbade då. Sidan kommer i uppgiften refereras till samlingssidan.

Jag skulle vilja bygga om denna uppgift så att den blir mer generell men det innebär också att alla exempel måste göras om vilket jag är tveksam till att jag är färdig med redan v43 när detta moment körs för första gången. Jag hoppas kunna ha ersatt denna exempeluppgift inom kort.

6.1 Momentets mål

I varje moment så jobbar vi mot ett eller flera mål som skolverket har satt upp i varje kurs.

6.1.1 Centralt innehåll

  • Processen för ett webbutvecklingsprojekt med målsättningar, planering, specifikation av struktur och design, kodning, optimering, testning, dokumentation och uppföljning.
  • Märkspråk och deras inbördes roller, syntax och semantik – där det huvudsakliga innehållet är standarderna för HTML och CSS samt orientering om Ecmaskript och dokumentobjektsmodellen (DOM).
  • Teckenkodning, begrepp, standarder och handhavande.
  • Bilder och media med alternativa format, optimering och tillgänglighet.
  • Riktlinjer för god praxis inom webbutveckling.
  • Interoperabilitet genom att följa standarder och testa på olika användaragenter.
  • Applikationer som fungerar oberoende av val av användaragent, operativsystem eller hårdvaruplattform och hur tillgänglighet uppnås även för användare med funktionsnedsättning.
  • Kvalitetssäkring av applikationens funktion och validering av kodens kvalitet.
  • Terminologi inom området webbutveckling.

6.2 Responsiv design

Responsiv design handlar om att anpassa webbsidorna till olika användaragenter. Tidigare har utvecklare byggt olika sidor för olika enheter, kanske har du någon gång blivit överflyttad till m.coolasidan.nu när du går in på coolasidan med en mobiltelefon. Det där är en rest från hur det såg ut tidigare när det tekniskt var svårare att utveckla för flera olika enheter samtidigt. Idag är det inte speciellt svårt och idag strävar man efter mer och mer sömlösa övergångar mellan olika agenter. Dessutom kan vi se att appar allt oftare får ge vika för välutvecklade sidor för webben.

En stående smartphone har en ganska smal bild, en liggande smartphone är nästan lika bred som en stående tablet och en liggande tablet kan visa lika många pixlar som en laptop. Detta innebär att vi måste ta hänsyn till vårt förändrade förhållningssätt till hur vi använder webbsidor.

Som så mycket inom webbutveckling så går utvecklingen väldigt fort. De som jobbar i branschen är ofta väldigt insatta i teknikerna och vet precis vad som är det senaste och det som är mest effektivt för tillfället. Det jag vill att du lär dig i detta moment är själva konceptet kring responsiv design. De tekniker jag använder i övningarna kommer säkerligen fungera i flera år framåt men de kommer hela tiden nya tekniker och lösningar. Förstår du dock varför och hur du behöver tänka så är du mottaglig för den nya tekniken.

6.2.1 Övning genom exempel

Jag visar med ett exempel. För några år sedan så startade vi kursen Webbutveckling01 med att gemensamt bygga det vi då kallade för en samlingssida. Denna samlingssida skulle bli en utgångspunkt för att redovisa uppgifter i flera olika kurser inom webb/programmering. Här hittar du min version av denna filen. Naturligtvis har jag skruvat till den lite extra så att vi har lite jobb att göra för att få sidan att bli responsiv. Validering av html- och css-kod går utan problem, tillgänglighetsvalideringen går också bra. Om vi gör ett test på mobilvänligheten så får vi däremot underkänt.

En viktig sak att tänka på när du jobbar med de olika tjänsterna är att de är en vägledning, ibland så visar de upp sidan fel och du kan inte återskapa exakt samma utseende i din mobil, din tablet eller i ett utvecklarläge. Det ger dock bra hjälp för det mesta.

Validering av mobilvänlighet

bild

Webben vimlar av mer eller mindre bra tjänster, här vill jag visa en som inte validerar koden men som på ett enkelt sätt visar hur din sida ser ut i fyra olika agenter på samma gång, ami.responsivedesign.is. Extra smidig blir tjänsten då du kan köra direkt från din egen dator. Bild på hur min samlingssida ser ut hittar du nedan, länken hittar du här.

Am I responsive?

bild

6.3 Relativa enheter

På samlingssidan så har jag använt mig av enheter som har absoluta längder, i mitt fall px som står för pixlar. Jag har t.ex. talat om att bredden på main-elementet skall vara 1200px vilket den alltid kommer vara oavsett hur bred skärmen är. Pixel är ju ett mått på den minsta enhet som kan visas på en skärm. Beroende på upplösningen på skärmen så kan det visas fler pixlar i bredd. Fler absoluta enheter är cm (centimeter), mm (millimeter) och pt (points).

Alternativet till absoluta längder är att använda relativa längder. Exempel på relativa enheter är % (procent av skärmen), vw (motsvarar 1% av bredden på viewport, vilket motsvarar browserns bredd), vh (motsvarar 1% av höjden på viewport) sedan finns det em och rem som båda är storleken i relation till ett elements font-size. Em står för elementets font-size medan rem står för root-elementets font-size. Mer info om de olika enheterna kan du hitta här. Em och rem är lämpligast att använda för att bestämma storlek för text och % har varit den vanligaste enheten för övriga elements storlek även om vw och vh blir mer och mer populära allt eftersom webbläsare stödjer dessa enheter, i dagsläget stödjer alla moderna webbläsare vw och vh.

6.3.1 Övning genom exempel

Dags att ge sig på samlingssidan, jag kommer att ersätta alla storlekar med vw, vh och rem. Det jag vill få fram är att sidan skall se likadan ut i fullskärm som tidigare men att den skall skalas ner och behålla proportionerna även på en mindre skärm. Jag är medveten om att mobilvänligheten kanske inte blir så mycket bättre på en väldigt liten skärm men jag vill inte att någon del av sidan skall befinna sig utanför skärmen som det är just nu.

Borders, padding och margin har ofta små värden och här kan det vara aktuellt att använda px. Det gäller att prova sig fram lite. Våra koder är ju validerade så vi har inte gjort något fel så här långt, nu gäller det bara att skapa den upplevelsen av sidan som vi vill åt.

Den uppdaterade filen hittar du här. Välj att visa sidkällan för att se all kod, vill du på ett enkelt sätt se skillnaden på den tidigare koden så använd tjänsten diffnow.com.

När vi testar mobilvänligheten så får den nya sidan grönt ljus.

Validering av mobilvänlighet

bild

Det går naturligtvis att se att sidan inte är helt perfekt men det som vi ser är att på smalare skärmar så byter våra section-element rad när de inte får plats vilket gör att hela sidan aldrig blir bredare än skärmens bredd. Vi ser också på bilden nedan att på smartphonen så visas bara ett section-element i bredd eftersom det inte får plats med två stycken i bredd som det gör på skärmen för en tablet. Utseendemässigt är jag inte helt nöjd med hur header-elementet visas upp på en smartphone, men det får vara så för tillfället.

Am I responsive?

bild

Uppgift: Använda relativa enheter

Gör uppgiften genom att förändra din landing page, något av dina tidigare projekt (undvik Paolos webb), eller en helt ny applikation. Fokus ligger på att du jobbar med tekniken.

Det är inte helt säkert att denna tekniken räcker för att göra exakt det du vill, jobba då vidare med nästa avsnitt som heter media query för att få större möjligheter att lösa designen som du vill.

6.4 Media queries

Nästa teknik vi skall kolla på är att jobba med Media queries vilket gör att vi kan styra så att olika delar av css-koden skall användas beroende på bredden av skärmen. På detta sätt kan vi styra fler saker än vi gjorde tidigare när vi bara använde oss av relativa enheter. Kika på bilden ovan där jag visar den nya sidan på olika skärmar. De tre rutorna för olika kurser ser olika ut på olika enheter, på de två stora skärmarna så visas alla tre rutor på en rad, på smartphonen så visas alla rutorna under varandra och på tableten så bryts raden med rutor så att det visas två rutor på första raden och en ensam på andra raden. Detta skall vi åtgärda lite senare.

För att tala om för webbläsaren att den behöver ta hänsyn till webbläsarens storlek så skriver vi följande html-kod.

Kodexempel: deklarera viewport i html

<meta name="viewport" content="width=device-width" />

Nedan ser du grundsyntaxen för hur @media query skrivs i css. Argumentet screen and (max-width: 599px) innebär att detta skall gälla på alla skärmar där bredden är max 599px, vilket då gäller smartphones och eventuellt mindre tablets. Inne i @media-elementet så skriver du nu argument precis som vanligt. På detta sätt kan du sedan skapa olika regler som gäller generellt eller när skärmen har en viss storlek (eller webbläsarens bredd).

Kodexempel: använda @media query i css

@media screen and (max-width: 599px) { }

Tutorial: Skapa flera regler för media queries

6.4.1 Övning genom exempel

Jag skall visa ett exempel på hur man kan jobba med @media-elementet. Jag skall ändra bakgrundsfärg på header&footer-elementen beroende på skärmens storlek och sedan ta hand om hur kursrutorna visas upp i tabletmode, jag vill att de hamnar under varandra på samma sätt som de visas i en smartphone. En sista sak är storleken på texten inne i header-elementet på en smartphone som just nu är för stor, det behöver fixas till.

Am I responsive?

bild

Den uppdaterade filen hittar du här. Välj att visa sidkällan för att se all kod, vill du på ett enkelt sätt se skillnaden på den tidigare koden så använd tjänsten diffnow.com.

Om du testar förminska webbsidan som visar mitt exempel så kommer du se att designen hoppar lite vilket den gör eftersom det finns lägen mellan de olika skärmstorlekarna där vi inte har styrt designen perfekt. Detta är lätt hänt när det finns många inställningar som gäller vid olika tillällen. Ett sätt att få bättre koll på detta är att utgå från mobile first vilket innebär att du börjar designa webbsidan för den minsta skärmstorleken och sedan förändrar designen när bredden överstiger ett visst värde, precis tvärt om mot hur vi har gjort med andra ord. För att se vilka problem du själv får i designen så behöver du öka och minska storleken på webbläsaren för att se hur den reagerar vid olika storlekar.

Ett vanligt problem man gör i början

Det är inte helt ovanligt att när man börjar med @media queris överarbetar denna delen. Om vi utgår ifrån att du skall göra tre versioner av din webbsida så lägg inte all kod i varje villkor. De css-instruktioner som är identiska för alla olika villkor skapar du först och sedan ändrar du endast det som skall ändras. Att inte skriva dubbel kod har två syften;

  • Koden blir mindre vilket gör att sidan laddar snabbare.
  • Behöver du ändra något i din design så behöver du förhoppningsvis ändra detta på färre ställen.

Det kan vara svårt att veta hur många olika @media-regler du skall sätta upp och allt beror ju naturligtvis på vilken typ av applikation du skapar. Men det vanligaste är iaf att jobba med minst tre olika skärmbreddar, exakt var du skall sätta dina brytpunkter kan bero på vilka användaragenter du förväntar dig att användaren använder, eller inte använder, samt vilka upplösningar som är aktuella för tillfället. Mobilerna har en tendens att bli större och större samtidigt som tablets både blir större och mindre på samma gång. Att försöka ta hjälp av vilka upplösningar som används mest hjälper oss inte alls (se diagrammet nedan). Bättre då att se hur andra gör, följ länken med sökning på bilder för olika förslag på responsive breakpoints och ta ditt egna beslut om hur du vill sätta dina breakpoints i ditt projekt.

StatCounter Global Stats - Screen Resolution Market Share

Source: StatCounter Global Stats - Screen Resolution Market Share

Uppgift: Använda media queries

Det här är lite svårare än den förra uppgiften och det kan ofta kännas lite pilligt att anpassa webbsidan på flera olika sätt. Men det är också bra träning och om du vill nå de högre betygen på denna kursen så behöver du behärska detta arbetet.

Gör uppgiften genom att förändra din landing page, något av dina tidigare projekt (undvik Paolos webb), eller en helt ny applikation. Fokus ligger på att du jobbar med tekniken.

6.5 Ramverk

Vi skall avsluta med att kolla på ett ramverk som hjälper oss väldigt mycket när vi skall göra responsiva webbsidor. Det mest populära ramverket för detta heter för tillfället bootstrap och det är både kraftfullt och omfattande. För många känns det dock som ett väl stort steg att ta direkt och då finns det ett enklare ramverk som heter Materialize css. När jag pratar om ett enkelt ramverk så är det naturligtvis relativt. Alla ramverk har sin uppsättning av regler och så länge man följer dessa så kommer sidan fungera som det är tänkt. Nackdelen med ramverk är ofta att de kräver lite arbete och tid att komma över tröskeln för att få allt att fungera. Alla regler gör det enkelt att tappa bort sig och gå vilse om man inte är strukturerad i sitt kodande.

På ramverkets hemsida så finns all info som kommer behövas. Den grundläggande html-strukturen finns att hämta och sedan handlar det om att hämta kod för olika komponenter och pussla ihop din sida. Det tar en liten stund att komma in i det men när du förstår hur det är uppbyggt så handlar det om att klippa, klistra och ändra. Ett tips från coachen är att se till att koden är korrekt indenterad annars kommer du gå vilse när du skall flytta element eller placera ut nya element i din befintliga struktur.

6.5.1 Övning genom exempel

Jag kommer bygga om samlingssidan med hjälp av Materialize css och det finns en film som gör nästan samma sak som jag vill göra.

Tutorial: Introduktion till Materialize.css

Samlingssidan skapad med Materialize css hittar du här och så här ser sidan ut när jag är klar. Det mesta ser bra ut förutom kursrubriken Webbserverprogrammering01 som har blivit för lång. Detta lägger jag ingen energi på nu, men hade jag lämnat in denna uppgift så hade det inte varit godkänt.

Am I responsive?

bild

Uppgift: Använda ramverk

Det här är ännu lite svårare än de tidigare uppgifterna men om du tycker att det är kul med webbutveckling och vill lära dig att arbeta med ramverk för att snabbt bygga snygga webbsidor så är det värt att göra denna uppgiften.

Gör uppgiften genom att förändra din landing page, något av dina tidigare projekt (undvik Paolos webb), eller en helt ny applikation. Fokus ligger på att du jobbar med tekniken.

6.5.2 Andra ramverk

Jag har i det tidigare avsnittet nämnt två ramverk, bootstrap och materialize.css, men det finns naturligtvis många fler. Ju mer van du blir med att skapa webbsidor desto mer troligt är det att du väljer att lägga grunden med något css-ramverk. Letar du en stund kommer du med stor sannolikhet hitta ett ramverk som blir din nya favorit. Vissa ramverk är väldigt grundläggande och ofta enkla att jobba med. Dessa ramverk har ofta lagt fokus på att få till en bra grund när det gäller responsivitet. Det går naturligtvis bra att lägga ett ramverk som grund och sedan lägga på egen css.

Söker du efter best css framework så kommer du få träff på mängder av sidor som rankar och visar olika css-ramverk.

Att hitta ditt favoritramverk som du behärskar hyggligt gör att du snabbt kan skapa en webbsida eller en webbsite ganska snabbt. Enhetligheten med en stabil cssgrund skall inte underskattas.

6.5.3 Fler CSS-tekniker

Webbsidorna som byggs idag blir mer och mer avancerade och det ställer allt högre krav på responsivitet vilket ställer ganska stora krav på de css-instruktioner vi behöver skriva. Att använda ramverk är ett smidigt sätt att få hjälp med detta men i grunden är det ju endast css som tar hand om utseendet på webbsidan.

Vi har ju använt olika typer av display och du har kanske märkt att problemet är att de är ganska många och att de alla har sina begränsningar. Just pga dessa begränsningar så utvecklas nya CSS-tekniker och här tänker jag nämna två av dessa tekniker; Flexbox och CSS Grid.

Det är inget obligatorisk moment att lära sig att använda dessa tekniker i denna kursen men att kika lite på teknikerna är ju inte förbjudet och att veta om att de finns kan hjälpa er vid tillfälle då framförallt Flexbox är relativt enkelt att komma igång med särskilt som att det går att använda olika online-generatorer för att ta fram den CSS-kod som behövs. Kika gärna på några av länkarna nedan. Som vanligt finns det många olika tutorials på ämnet på Youtube.

6.5.4 DOM

Svårare avsnitt

Detta avsnitt är av lite svårare karraktär och är inte obligatoriskt för något betyg på kursen. Det du kommer lära dig i avsnittet kan dock hjälpa dig om du vill bygga applikationer med ett css-ramverk som grund men ändå ha möjligheten att lägga till egna css-instruktioner i den befintliga koden.

Du har tidigare lärt dig att skapa klasser och id'n till våra html-element för att kunna formatera dessa med css-instruktioner. Nät vi jobbar med ramverk så finns det ju redan klasser skapade från ramverket. Du kanske har märkt att det ofta anges flera klasser till de olika elementen, detta beror på att man väljer att lagra lite instruktioner i varje klass och anropar flera klasser för att få till designen som vi vill ha den. Alternativet är att skapa fler specialicerade klasser men det skulle också innebära att det skulle växa och bli oändligt många klasser med instruktioner i vårt ramverk.

Hur skall vi tänka när vi skall lägga till egna instruktioner tillsammans med de instruktioner som redan finns. Ett alternativ är att skapa egna klasser och sedan lägga till dessa ihop med de klasser som redan används. Ett annat alternativ är att lära sig använda DOM-strukturen.

6.5.4.1 DOM-strukturen

Document Object Model, förkortat DOM, är ett plattforms- och språkoberoende gränssnitt för åtkomst och dynamiskt uppdatering av ett dokuments innehåll, struktur och formatering.
(Wikipedia, 2015-02-03, http://sv.wikipedia.org/wiki/Document_Object_Model)

För att förstå uppbyggnaden så kikar vi på hur en tidgare version av kursolle var strukturerad.

Kursolle tidig version

DOM-modell för denna sidan.

De gula <section>-elementen finns inte i dokumentet men vi behöver använda dem för att förstå upplägget med DOM, vi antar att de finns i vår sida.

Nu ser vi att <section>-taggen är "child" i olika parent-selektorer. Vi kan nu välja att formattera dessa på olika sätt.

Flera selektorer med samma inställningar

section, p, .enKlass, #ettId { }

Alla dessa selektorer kommer nu att formateras på samma sätt oavsett var i DOM-strukturen de befinner sig.

En selektor som är barn inuti en annan selektor, oavsett nivå

article header { }
aside section { }

Här styr man specifika selektorer som kan finnas på olika "barnnivåer" inom en viss selektor. Tänk att <nav> också har en selektor som barn, då kommer båda <section>-elementen inom <aside class="sidebar1"> att påverkas.

En selektor som är direkt barn till en annan selektor, dvs endast nivån under

article > header { }
div > h2 { }

Här är det viktigt att elementet/selektorn är direkt underställd ett annat element/selektor, alltså en ren förälder-barn-relation.

Dubbel klasselektor

html
<div class="card-content white-text"></div>
css
.card-content.white-text { }

Om man väljer att anropa två klasser i samma element så kan vi skapa en selektor för detta. Då är det viktigt att denna selektorn skrivs ihop, annars anses den andra selektorn vara ett barn till den första.

Pseudoklasser

a:hover { }
tr:nth-child(even) { }
article > div:first-of-type { }

En pseudo-class används för att definiera ett speciellt tillstånd för ett element tex när musen förs över ett element samt att besökta och ej besökta länkar visas på olika sätt.

Pseudoelement

div > h1::first-letter {font-size: 2em; }
Ett pseudo-element används för att styla en specifik del av ett element. Det kan tex användas för att formatera den första bokstaven av ett element.

Om vi vill förlita oss på bara DOM så skapar du så "rena" taggar som möjligt utan att skapa en mängd klasser och id:n. Exempeluppgiften lite längre fram i avsnittet bygger bara på rena taggar. Ramverken bygger ju oftast på en stor mängd klasser. Hur du väljer att bygga upp dina projekt avgör du själv, men oavsett hur du tänker och väljer så är det viktigt att ha en bra struktur och att vara konsekvent.

Ju fler sätt du lär dig desto enklare är det att välja rätt sätt vid rätt tillfälle.

Uppgift: Designa sida med DOM [klicka för att visa]

Här finns ett kodexempel som du kan spara på din egen dator och genom att ändra i css-filen få en känsla för vad som händer om du ändrar denna. Kolla främst på de taggar som finns flera gånger och som påverkas olika beroende på vilken föräldertagg den har.

dom.html [klicka för att visa]

<!DOCTYPE html>
<html lang="sv">
  <head>
    <meta charset="UTF-8">
    <title>Domexempel</title>
    <link rel="stylesheet" href="dom.css">
  </head>
  <body>
    <article>
      <header>
        Header i article
      </header>
      <h1>h1 i article</h1>
      <div>
        <h1>h1 i div</h1>
      </div>
      <section>
        <header>
          Header i section
        </header>
        <h1>h1 i section</h1>
        <div>
          <h1>h1 i div</h1>
        </div>
        <div>
          <h1>h1 i div</h1>
          <div>
            <h1>h1 i div-div</h1>
          </div>
        </div>
      </section>
      <section>
        <h1>h1 i section</h1>
        <div>
        </div>
      </section>
      <section>
        <h1>h1 i section</h1>
        <div>div!
        </div>
      </section>
      <section>
        <h1>h1 i section</h1>
        <section>
          <h1>h1 i section-section</h1>
          <div>Div</div>
        </section>
      </section>
    </article>
  </body>
</html>

dom.css [klicka för att visa]

@charset "UTF-8";

article {
    background-color: white;
    border: 1px solid black;
    padding: 10px;
    float: left;
}

h1 {
  text-align: center;
}

section {
    width: 120px;
    border: 2px solid red;
    float: left;
    padding: 10px;
    margin-left: 10px;
}

section > section{
  padding: 0px;
  margin: 0px;
}

article div {
    background-color: #CCC;
}

body, section>div {
    background-color: #DDD;
}

article header {
    text-align: left;
    font-weight: bold;
}

article > header {
    text-align: center;
    color: red;
    font-size: 30px;
}

section:nth-child(even) {
    border-color: lime;
}

article div:first-of-type {
    margin-bottom: 20px;
    padding: 0px;
    font-weight: bold;
    color: orange;
}

div > div > h1 {
    text-transform: uppercase;
}

div > div > h1::first-letter {
    font-size: 2em;
}

Resultatet [klicka för att visa]

Testa nu att ändra bakgrundsfärgen på div:en som ligger i en annan div, eller gör texten blå i den där h1-taggen som ligger i en section-tagg som ligger i en annan section-tagg.

Genom att träna på att använda DOM så kan du sedan lösa det i skarp läge där du behöver in och justera i ett ramverk som du kanske inte har stenkoll på i början.

6.5 Redovisning

Inlämningsuppgift: Redovisning av Moment06

Minst en uppgift skall göras och redovisas. Länka till sidan du har skapat och presentera uppgiften/uppgifterna i inlägg på din wordpressida.

När du redovisar så visa på skärmdumpar för det resultat du fick vid första läget, beskriv kortfattat vad du har förändrat och sedan så gör du en skärmdump som visar att du har löst problemet. Använd båda tjänsterna, googles mobilvänlighetstest och ami.responsivedesign.is.

Om du har använt flera tekniker så beskriv kortfattat hur du uppfattar dem och hur enkla/svåra/kluriga de var att arbeta med.

6.5.1 Frivilliga uppgifter

Nu är du förmodlingen ganska duktig på html och css så nu tror jag att du har lite egna idéer på vad du skulle kunna utveckla vidare. Att testa ett nytt ramverk gör dig både bredare och djupare i din kunskap. Varför inte testa på Flexbox eller CSS Grid. Kanske är det läge att testa att bygga om en befintlig webbsida i ett nytt ramverk?