1. Responsive Web Design
Velg 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?
2

3. Kort om CoreTrek
 Etablert i 2000
 Egenutviklet publiseringsløsning, CorePublishCMS
 23 medarbeidere
 Sandefjord og Sandnes
 Alt fra design til komplette løsninger
3

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
4

5. CP
Nyhets-
brev
Skjema
Ordliste
Avansert
språk
URL alias
Mobil
Ekstern
bruker-
katalog
Intra/
Ekstranet
t
RSS
Tags
Relasjon
Kommen-
ter/
ranger
Videolab
Statistikk
CorePublish
5

6. 6

7. 7
Definisjoner og bakgrunn
Ulike teknikker
Responsive nettsider

8. Definisjoner1
 CMS (Content Management System)
• Programvare som brukes til å administrere innhold som publiseres
på nett
 CSS (CascadingStyleSheet – no: Stilark)
• CSS er et språk som brukes til å definere utseende på innhold
laget i HTML
 HTML (HyperTextMarkupLanguage)
• 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)
8

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
9

10. 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
11
PC/Mac

12. Så kom mobilen…
Nettløsning
12
Mobil
PC/Mac

13. Flere enheter (multikanal)
Nettløsning
13
Nettbrett
Mobil
PC/Mac

14. 14
Hva og hvorfor?
CMS iftResponsive Web Design
CMS

15. 15
Maler og brikker
Aenean non
dolor sed
orci semper
iaculis. Sed
adipiscing. Pellentes
Que adipiscing.
Vivamus est libero.
Aenean auctor
Aenean non
dolor sed
orci semper
iaculis. Sed
adipiscing.
Pellentesque adipisc.
Vivamus est libero.
Nunc urna leo
Informasjon Administrasjon NettstedByggeklosser

16. CMS
Hva 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
16

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
17

18. Responsive nettsider
Ulike teknikker – hvilken er rett for deg?
18

19. Ulike teknikker
For å 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
19

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
20
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
D1
E1
Logo
F1
B
skalert

21. Responsive Web Design - RWD
21

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
22

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å
23

24. Responsive Web Design Server Side - RESS
24

25. HTC Wildfire
240x320
Iphone 3
320x640
HTC Desire
480x800
Iphone 4
640x960
HTC Desire HD
480x800
 I tilleggtilskjermoppløsningmå man ogsåtahensyntilandreegenskaper for
åoppnå en god visning
 Etterhvertsomskjermoppløsningenblirhøyereoghøyereuansettenhetsåblirs
kjermensfysiskestørrelseviktigereennoppløsningen
 En god RESS løsninghåndtererdetteiCMSet
25
Mobile skjermstørrelser

26. Sende
optimalt
innhold
Velge mal
Finne
størrelser, o
ppløsning, e
tc.
EgenskaperWURFL
RESS – hva skjer per sekvens?
URL-kall
26

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 «devicedetection»
• Teknikken består i å bruke tilgjengelig informasjon til å slå opp i en
database som beskriver enhetens egenskaper. En slik database blir ofte
kalt «DeviceDescriptionRepository (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-sidedevicedetection er man får tilgang
på langt mer detaljert informasjon om enheten enn hva man klarer i RWD
• Fysisk skjermstørrelse
• Operativsystem
• Produsent
27

28. Detektering av enheter
 CorePublish bruker WURFL, som blir regnet som det ledende rammeverket
for devicedetection
 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-
sideog 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
29

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
30
Visningslogikk
CSS og Javascript
Visningslogikk
PHP + visningsmaler
+ WURFL

31. Innholdsstruktur
Innholdsbehov
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
32

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
33

34. Samme innhold til alle enheter
3434
Nettbrett
Mobil
PC/Mac

35. Forskjellige innhold til ulike enheter
3535
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
36

37. Innhold RWD
På 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
37

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
38

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
39

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
40

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.eksFacebook, 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
41

42. 42
Designmaler
RWD – 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
43

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
nedskalert
utgave av
nettversjonen.
Du kan ikke
presentere
annet innhold
på mobil.
44

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
45

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 46

47. RESS og stilark
Oppdelingiflerevisningsmalerbetyrsjeldensærligmerkode,
men ertilgjengjeldoppdeltimindre, meroversiktligekodefiler
.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;
} 47

48. Hvem har kontroll over malene?
48
 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 – hvemharkontrollen
Brikkesystemet gjør at kunden selv endrer malene
CMS
Webredaktør
49

50. Nettbrett
Mobil
PC/Mac
Maler – hvem har kontrollen
Med RWD flytter du mye av kontrollen tilbake til utvikleren
fordi mange av malreglene ligger hardkodet i CSS og
Javascript
Visnings-
logikk CSS og
Javascript
CMS
Webredaktør
Utvikler
50

51. En visningsmal per enhetstype
I CorePublish (med RESS) blir det lagt opp en visningmal per enhetstype som
webredaktøren selv kan endre uten å involvere utvikler
51
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”)
52

53. 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
54

55. Frustrasjon
55
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 tar
mer enn 5 sekunder å laste
 Med andre ord bør ikke sidene være større enn
maksimum 150 KB
56

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
57
Visningslogikk
CSS og Javascript
Visningslogikk
PHP + visningsmaler
+ WURFL

58. 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
59

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!
60

61. 61
RESS
RWD
Kombinasjonsløsninger
Hva passer for sitt behov?
Varianter

62. 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
63

64. Karrieresenteret Vestfold RESS
64

65. «Ren» RWD
En «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
65

66. Haugaland
Kraft RWD
66

67. Byfjordparken RWD og RESS
67

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
68

69. Bodø kommune RWD og RESS
69

70. Bodøsjøen Barnehage Bodø kommune RWD
70

71. Hunstad ungdomsskole Bodø kommune RWD
71

72. 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
73

74. Oppsummering
Ja, 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 
74

75. Kontakter
Line Eintveit
Rådgiver Stavanger
line@coretrek.no
Mobil: 97 18 18 66
75

76. Apps eller mobilweb
Hva er forskjellen?
76

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 forAndroid, windows ++
• Krever godkjenning fra Apple/google
for å bli tilgjengelig iApp store
 Kan kjøre lokalt uten nettilkobling, men
de fleste Apps krever i praksis nettilgang
77

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
78