Responsive Web DesignVelg riktig løsning!

2

Agenda for dagen Definisjoner og bakgrunn Responsive nettsider – forskjellige teknikker Hva forventes av et CMS i forhold til responsive websider Nettbrett – trenger man en egen løsning for det? Apps eller mobilvennlige websider

– hva er forskjellen?

3

Kort om CoreTrek Etablert i 2000 Egenutviklet publiseringsløsning, CorePublish CMS 23 medarbeidere Sandefjord og Sandnes Alt fra design til komplette løsninger

4

CoreTrek Hva gjør vi?

• Rådgivning• Forprosjekt

(CorePhases)• Webdesign

• Utvikling• Integrasjoner• Spesial-

utvikling

• Webhotell• Vaktordninger• Fjerndrift

• Telefonstøtte • Supportsystem• Supportavtaler

• CorePublish kurs• Individuelle kurs• Andre kurs

• Nettstedsrevisjoner• Søkemotoroptimalisering• Brukertester

CorePublish

5

6

side 7

Definisjoner og bakgrunnUlike teknikker

Responsive nettsider

8

Definisjoner1

CMS (Content Management System)• Programvare som brukes til å administrere innhold som publiseres

på nett CSS (Cascading Style Sheet – no: Stilark)

• CSS er et språk som brukes til å definere utseende på innhold laget i HTML

HTML (HyperText Markup Language)• HTML er et språk for formattering av nettsider• HTML brukes til å strukturere informasjon, gjerne i sammenheng

med CSS HTML5 – Neste generasjon HTML, som tilbyr nye funksjoner

innen en rekke områder som media, semantikk, navigasjon og hardwaretilgang (kamera)

9

Definisjoner2

Kanal – forskjellige kanaler som innhold i et CMS kan distribueres til f.eks. mobil, nettbrett, TV

RWD (Responsive Web Design)• RWD er en teknikk som gjør at websider i frontend tilpasser visnigen av

siden til skjermens størrelse RESS (REsponsive Web Design + ServerSide)

• RESS er en teknikk som gjør at server detekterer enhetstyper og sender nettsider tilpasset enheten som besøker nettløsningen

APP - et program som lastes ned på en smarttelefon eller nettbrett

Bakgrunn Mobil, nettbrett og TV blir de nye PC’ene Mobil surfing øker kraftig Brukere forventer brukervennlige websider uansett hvilken enhet de

bruker Brukere vil ha tilgang til alt innhold Mange vet ikke forskjell på en app eller en mobiltilpasset webside Mange vet ikke hva som er fordeler og ulemper med de ulike måtene

å lage responsive nettsider på

10

11

Slik var det før…

InternettNettløsning

PC/Mac

12

Så kom mobilen…

Nettløsning

Mobil

PC/Mac

13

Flere enheter (multikanal)

Nettløsning

Nettbrett

Mobil

PC/Mac

side 14

Hva og hvorfor?CMS ift Responsive Web Design

CMS

15

Maler og brikker

Aenean non dolor sed orci semperiaculis. Sed adipiscing. PellentesQue adipiscing. Vivamus est libero.

Aenean auctor

Aenean non dolor sed orci semperiaculis. Sed adipiscing.Pellentesque adipisc. Vivamus est libero.

Nunc urna leo

Informasjon Administrasjon NettstedByggeklosser

16

CMSHva er det og hvorfor har man det? CMS er for de som ønsker å administrere sine websider selv Man skal kunne lage artikler med bilder og tekst Arbeidsflyt og rettighetsstyring er sentralt

• Skal alle ha lov til å lage innhold til alle kanaler? Visningsmaler kan administreres uten programmering

17

Multikanal i CMS Å styre det samme innholdet

med CMS’et til ulike kanaler Automatisert styring via CMS

bør være mulig for kanaler som skal ha likt innhold

Avvik for deler av innholdet hvis ønskelig

Brukerstyrte visningsmaler per kanal

Responsive nettsiderUlike teknikker – hvilken er rett for deg?

18

19

Ulike teknikkerFor å kunne vise nettsider på ulike enheter (lage responsive nettsider) har man utviklet flere teknikker

De to vanligste er: RWD - Responsive Web Design RESS - Responsive Web Design + Server Side

20

Responsive Web Design - RWD Visning av innhold styres på klientsiden med CSS og Javascript Samme innhold må sendes til alle enheter, kan kun skjule deler

av innholdet CMS’et som benyttes behøver ikke støtte RWD Breakpoints Alt innhold lastes i alle enheter, også det som ikke vises

A, C, G og H er ikke tatt med i mobilvisningen, men de lastes likevel opp.

Logo

A C

F G H

Topp

D E

B

D1E1

Logo

F1

Bskalert

21

Responsive Web Design - RWD

22

Bilder med RWD De fleste nettsider laget med RWD sender

samme bilder til alle enheter• Også mobiler mottar store bilder, som blir

prosentvis nedskalert i nettleseren etter at de er lastet ned

Unødvendig båndbredde blir brukt på å laste ned større bilder enn man trenger

Det finnes teknikker og muligheter for bildehåndtering med RWD (Lazy loading), men mange velger å ikke benytte dette pga høye implementeringskostnader

23

Responsive Web Design Server Side - RESS Visning av innhold styres i CMS’et sine maler Serveren kan sende forskjellig innhold og design til forskjellige

enhetstyper• Enten bruke samme menystruktur og innhold til samme enhet• Eller bruke separat menystruktur og innhold til ulike enheter

Detektering av enhet skjer på server før innhold sender til klienten Krever at CMS’et gjenkjenner enheter (Device detection) Dette betyr at CMS’et som benyttes må støtte RESS

Må ikke forveksles med separate mobilsider laget i et annet CMS eller manuelt og som det redirectes til kun på toppnivå

24

Responsive Web Design Server Side - RESS

25

HTC Wildfire240x320

Iphone 3320x640

HTC Desire480x800

Iphone 4640x960

HTC Desire HD480x800

I tillegg til skjermoppløsning må man også ta hensyn til andre egenskaper for å oppnå en god visning

Etterhvert som skjermoppløsningen blir høyere og høyere uansett enhet så blir skjermens fysiske størrelse viktigere enn oppløsningen

En god RESS løsning håndterer dette i CMSet

Mobile skjermstørrelser

26

Sende optimalt innhold

Velge mal

Finne størrelser,

oppløsning, etc.

EgenskaperWURFL

RESS – hva skjer per sekvens?

URL-kall

27

RESS og detektering av enheter Når man bruker RESS så finner man server-side ut hvilken enhet som besøker

nettsidene• Denne teknikken kalles «device detection»• Teknikken består i å bruke tilgjengelig informasjon til å slå opp i en

database som beskriver enhetens egenskaper. En slik database blir ofte kalt «Device Description Repository (DDR)»

En god og oppdatert DDR er essensielt for en god RESS-løsning Man må gjenkjenne enheten som besøker nettsiden, og hvilke egenskaper

den har, slik at man sender optimalisert innhold og design En av de store fordelene med server-side device detection er man får tilgang

på langt mer detaljert informasjon om enheten enn hva man klarer i RWD• Fysisk skjermstørrelse• Operativsystem• Produsent

Detektering av enheter CorePublish bruker WURFL, som blir regnet som det ledende

rammeverket for device detection WURFL har eksistert i over 10 år, men blir nå levert av Scientia Mobile Scientia Mobile ble etablert sensommeren 2011

• CoreTrek var aller første signerte kunde i dette selskapet. • Grunnlagt av Luca Passani - “mobilguru”• Scientia Mobile har flere store kunder – blant annet Facebook

WURFL blir oppdatert ukentlig, og inneholder flere hundre egenskaper per enhet

CorePublish laster automatisk ned siste oppdateringen direkte fra Scientia Mobile

29

Bilder med RESS CMS’et detekterer enhetstype server-side

og sender så automatisk bilder som er skalert slik at de passer til enheten

Dette gjør at mobiler får små bilder som bruker mindre båndbredde og lastes mye raskere

CMS’et kan benytte spesielle verktøy (jpegtran) for å optimalisere bilder

Et mobilbilde kan være 4 Kb mot 40 kb for et desktopbilde

30

600 KB

Full nettside+ store bilder 60 KB

Liten nettside+ små bilder

300 KB

Medium nettside+ medium bilder

RWD RESS

600 KB

Full nettside+ store bilder

VisningslogikkCSS og Javascript

VisningslogikkPHP + visningsmaler

+ WURFL

Den st

ore f

orsk

jelle

n

InnholdsstrukturInnholdsbehov

RWD - RESS

Innhold

32

Innhold – hva må man tenke på? Innhold er det viktigste på et nettsted Oppdatert innhold er essensielt Brukervennlig og enkelt administrasjon er en forutsetning Det bør ikke være nødvendig å skrive samme innhold flere

ganger• Automatisk publisering til flere kanaler bør være mulig

Store nettsted med mye innhold og mange redaktører har andre behov for innholdsadministrasjon og fleksibilitet enn mindre nettsted med mer statisk innhold

Vurder om du kan leve med likt innhold, eller om du ønsker mulighet for å ha avvikende innhold pr kanal

33

Innholdsstruktur Ved utarbeidelse av responsive nettsider må du ta et viktig

valg angående innhold (menypunkter, innhold og maler): Du kan velge å ha samme menystruktur og innhold til alle

enheter• Bruker du RWD, må du velge dette alternativet• Bruker du RESS, kan du velge dette alternativet

Du kan velge å ha forskjellige menystruktur og innhold til ulike enheter• ”separate sites”• Du må bruke RESS for å kunne velge dette alternativet

34

Samme innhold til alle enheter

34

Nettbrett

Mobil

PC/Mac

35

Forskjellige innhold til ulike enheter

35

Nettbrett

Mobil

PC/Mac

36

Innholdsstrukturer De tre vanligste variantene er altså: RWD – må alltid ha samme innhold til alle enheter RESS med samme innhold til alle enheter RESS med forskjellig innhold til ulike enheter

37

Innhold RWDPå RWD nettsteder blir det samme innholdet vist på forskjellige enheter. Dette betyr at: Alt innhold skal være tilgjengelig på alle enheter Det er enklere for forfattere å forholde seg til en struktur Innhold og menypunkter kan fjernes men ikke være forskjellig

Ulempen med dette er: Alle forskjeller blir et avvik

• Ofte må utviklere inn i bildet selv for trivielle ting som å skjule et menypunkt

Dersom man ønsker avvikende budskap/tekst i en spesiell kanal er det ikke mulig fordi innholdet er det samme

38

Innhold RESS Med RESS kan man lage flere innholdsstrukturer

hvis man ønsker Dette gir mulighet til forskjellig struktur og innhold Automatikk rundt oppdatering av likt innhold er

viktig for å unngå dobbeltarbeid• Krysspublisering og automatiske koblinger• Forfatteren gjør “ingenting” før han vil lage forskjellig

innhold Alt innhold kan finnes i alle innholdsstrukturer Om man ønsker kan man med RESS benytte kun en

innholdsstruktur, men da har man ikke mulighet til avvikende budskap/innhold per kanal

39

Innholdsbehov Ulike brukerbehov og bruksmønster kan medføre behov for

forskjellig innhold Ofte vil man ha behov for å skjule innhold på en viss type enheter Noen typer innhold fungerer ikke bra på små enheter

• Tabeller • Komplekse skjemaer• Eksterne systemer som ikke støtter mobil• Integrasjoner• Iframes

Her må man tilby alternativt innhold basert på enhet

40

Eksempel på brukerbehov Noe av det viktigste for denne kunden er at de som besøker nettstedet

med mobil, skal kunne ringe dem enklest mulig Desktop-brukere sendes til et bestillingsskjema

41

Videresending Bruker du RESS med forskjellige menystrukturer, vil du også benytte

forskjellige URL'er for ulike enheter. Da er det viktig med en god håndtering av videresending mellom de ulike URL'ene

Bruker du mobilen og treffer en artikkel på web, som er publisert både på www og m.-nettstedet, skal du bli videresendt og lese artikkelen på mobilnettstedet

Typisk scenario ved søk og direkte linking (f.eks Facebook, twitter, mail )

Merk at CorePublish også videresender motsatt vei, og at artikler med forskjellig innhold også er koblet sammen

Også viktig at SEO blir håndtert riktig slik at Google-rankingen blir ivaretatt

42

DesignmalerRWD – RESS

Hvem har kontrollen?

Visningsmaler

43

Visningsmaler Tradisjonelt har man laget ett sett visningsmaler – tilpasset en PC-skjerm Lager du responsive nettsider, må du utarbeide visningsmaler for ulike

skjermstørrelser• Du får flere ”sett med maler”• Uavhengig av om du har valgt RWD eller RESS må du like fullt designe de ulike

visningene• Store variasjoner i skjermstørrelse

44

Designmaler i RWD

Man lager 3 ulike design, der man er bundet opp til å

gjenbruke samme komponenter og innhold.

Innholdet på mobil/tab

må være en nedskalertutgave av

nettversjonen.Du kan ikke presentere

annet innhold på mobil.

45

@media only screen and (max-width: 1180px) {.left, .right, .focus .quote .image, .focus .outskirtImage {

display: none;}.focus, .home .focus {

background-image: none;}.home .focus h1 {

font-size: 20px;}

}@media only screen and (min-width: 767px) and (max-width: 1040px) {

.row {width: 98%;

}.head h3 {

font-size: 14px;line-height: 19px;

}.focus .quote .body {

border-left: 1px solid #E7E7E4;}.helpAndSearch .search {

width: 180px;}

}@media only screen and (min-width: 767px) and (max-device-width: 1024px) {

.home .focus h1 {font-size: 20px;

}.focus h2 {

font-size: 25px;}.row {

width: 1010px;}

}

Et RWD stilark inneholder i realiteten ofte flere forskjellige seksjoner myntet på hvert sitt

breakpoint, og blir fort uoversiktlig

RWD og stilark

46

Designmaler i RESS

I RESS lages det ofte 2 separate maler som er fristilt fra hverandre når det

gjelder struktur og oppsett. Dette kan gi større frihet til å lage et design mer tilpasset den aktuelle enheten, og

innholdet trenger ikke være det samme

47

RESS og stilarkOppdeling i flere visningsmaler betyr sjelden særlig mer kode,men er til gjengjeld oppdelt i mindre, mer oversiktlige kodefiler

.left, .right, .focus .quote .image, .focus .outskirtImage {

display: none;}.focus, .home .focus {

background-image: none;}.home .focus h1 {

font-size: 20px;}

.focus .row {width: 95%;border-width: 4px;

}.focus {

background-image: none;padding-bottom: 20px;

}.left, .right, .home, .path {

display: none;}

48

Hvem har kontroll over malene? Da vi startet CoreTrek i 2000, ble alle maler kodet for hånd av en utvikler Hver gang kunden ønsket en endring, måtte utvikleren kontaktes og gjøre

endringen Heldigvis har verden gått videre siden den gang...

49

Maler – hvem har kontrollenBrikkesystemet gjør at kunden selv endrer malene

CMS

Webredaktør

50

Nettbrett

Mobil

PC/Mac

Maler – hvem har kontrollenMed RWD flytter du mye av kontrollen tilbake til utvikleren fordi mange av malreglene ligger hardkodet i CSS og Javascript

Visnings-logikk CSS og

JavascriptCMS

WebredaktørUtvikler

51

En visningsmal per enhetstypeI CorePublish (med RESS) blir det lagt opp en visningmal per enhetstype som webredaktøren selv kan endre uten å involvere utvikler

Nettbrett

Mobil

PC/Mac

52

Oppsummering – visningsmaler RESS Man står friere til å utforme helt forskjellige design for de

ulike enhetene Kan skille på innhold og form mellom kanalene fordi de

ikke deler maler eller innhold Lettere å lage funksjonalitet og innhold myntet f.eks. bare

på telefoner (“ring oss”)

Brukeropplevelse

53

54

””

Sannhetens øyeblikk

74% av mobilbrukere vil forlate en nettside dersom den tar mer enn 5 sekunder å laste.

Med andre ord; du har 5 sekunder for å skaffe deg brukerens oppmerksomhet.

Utnytt sekundene. Kilde: Smashingmagazine.com

55

Frustrasjon

Kilde: Modapt, Inc/Morrissey & Company Mobile Survey, juli 2011

56

Hastighet Det reklameres med storstilt utbygging av 3G og 4G i mediene Men i praksis har mange mobilbrukere i Norge fremdeles bare EDGE-

hastighet tilgjengelig når de ikke er på trådløst nett EDGE blir i praksis sjeldent blir raskere enn 200 kbit pr sekund i Norge.

Dette vil si at: • 600 KB tar ca 24 sekunder• 300 KB tar ca 12 sekunder• 150 KB tar ca 6 sekunder• 50 KB tar ca 2 sekunder

Husk at du mister 74% av brukerne hvis siden tarmer enn 5 sekunder å laste

Med andre ord bør ikke sidene være større enn maksimum 150 KB

57

600 KB

Full nettside+ store bilder 60 KB

Liten nettside+ små bilder

300 KB

Medium nettside+ medium bilder

RWD RESS

600 KB

Full nettside+ store bilder

VisningslogikkCSS og Javascript

VisningslogikkPHP + visningsmaler

+ WURFL

Den st

ore f

orsk

jelle

n

side 58

Egen designvariant?Kombinasjoner?

Nettbrett

59

Egen designvariant for nettbrett ? For hver skjermstørrelse eller sidevisningsvariant må det lages et eget

design/sideoppsett, gjelder både for RWD og RESS Stående og liggende varianter «Fingervennlig» design – ikke for tette eller små lenker og knapper Varianter for nettbrett kan lages både med RWD og RESS Det er mulig å ha RWD for nettbrett versjonen og RESS for mobil Nettbrett blir nok oftere brukt med WiFi enn mobil Skjermstørrelsen er nærmere

normal skjerm enn en mobilskjerm Hvis man vil ha egen visning for

nettbrett må hver sidemal designes,gjelder RESS og RWD

Hver variant koster i design og utvikling

60

Kombinasjoner er mulig Finn.no har en kombinasjonsløsning. Liggende nettbrett som PC-versjon,

stående nettbrett med RWD og mobil med RESS Bruk det beste fra 2 verdener!

RWD

RESS

side 61

RESS RWD

Kombinasjonsløsninger

Hva passer for sitt behov?

Varianter

Hvilke varianter finnes? «Ren» RWD RESS med innholdsstruktur per kanal RWD med utskifting av bilder RESS med felles innholdsstruktur Kombinasjonsløsninger

62

63

Sandnes Sparebank RESS

64

Karrieresenteret Vestfold RESS

65

«Ren» RWDEn «ren» RWD løsning har følgende karakteristika: Felles innholdsstruktur Ett sett med visningsmaler Visninger blir gjort om i CSS og JavaScript

Svakhetene med «ren» RWD er: Ikke mulig med forskjellig innhold per kanal Unødvendig mye data sendes til nettleseren Administrering av visningene skjer i CSS

66

Haugaland Kraft RWD

67

Byfjordparken RWD og RESS

68

Kombinasjonsløsning Kombinasjonsløsning med RWD for

nettbrett og RESS for mobil, har følgende karakteristika• Koster noe mer fordi man velger egen

nettbrett versjon• Tar alle fordeler

fra ren RESS og ren RWD

69

Bodø kommune RWD og RESS

70

Bodøsjøen Barnehage Bodø kommune RWD

71

Hunstad ungdomsskole Bodø kommune RWD

Samme kostnader?

Kostnadsbildet

73

Samme kostnader? I utgangspunktet behøver ikke den ene eller den andre løsningen skille

seg ut når det gjelder kostnadsbildet Det er først når det blir snakk om justeringer eller endringer at det kan

bli forskjell på kostnader Når visningsmaler blir håndtert av CMS’et kan redaktøren selv gjøre

endringer uten bistand fra en som kan kode i CSS/Javascript Antall «breakepoints» / «visningsmaler» betyr mye for kostnadene

74

OppsummeringJa, til mobil-/nettbrett vennlige websider, uansett….

CorePublish løser både RWD og RESS på en god måte Det handler om å velge riktig teknikk for sine behov Vi tror store nettsteder med mye innhold og mange redaktører

trenger et CMS som er fleksibelt og kan styre innhold i flere kanaler Mange store norske nettsteder (VG, Dagbladet, NRK, Aftenposten,

finn.no, klikk.no, m.fl.) benytter RESS Mindre nettsteder med mer statisk innhold kan like gjerne bli laget

med RWD som RESS Kombinasjonsløsninger er mulig, og kanskje det rette i mange tilfeller

Lykke til med valget

75

KontakterLine EintveitRådgiver Stavanger

line@coretrek.noMobil: 97 18 18 66

76

Apps eller mobilwebHva er forskjellen?

77

Mobile applikasjoner – ”Apps”Er et vanlig program som installeres på en mobiltelefon eller nettbrett Fikk sitt gjennombrudd med “apps” til iPhone, men har eksistert

lenge på andre plattformer Brukeren må installere et program (en «app»), på sin telefon App'en må programmeres i et språk tilpasset

hver telefonplattform• Må lage et program for iPhone,

ett for Android, windows ++• Krever godkjenning fra Apple/google

for å bli tilgjengelig i App store Kan kjøre lokalt uten nettilkobling, men

de fleste Apps krever i praksis nettilgang

78

Mobilvennlige nettsider (Mobilweb)Mobilweb er en vanlig nettside tilpasse mobilvisning Programmeres i samme teknologi (HTML) som vanlige nettsider Alt du kan lage på en vanlig web-side kan lages på mobilweb Kan normalt benytte samme tekniske løsning som bedriftens nettsider

(normalt tilpasset visning på mobil) Samme løsning kan brukes på de fleste telefonplattformer (iPhone,

Android, Nokia, Blackberry) med mindre tilpasninger for hver plattform Ingen installasjon på telefonen nødvendig Krever normalt nettilgang for å fungere