Kæl for ordet Ordet bor i et nyt hus - SDU · Om responsive web design . Illustration: NN Group...
Transcript of Kæl for ordet Ordet bor i et nyt hus - SDU · Om responsive web design . Illustration: NN Group...
![Page 1: Kæl for ordet Ordet bor i et nyt hus - SDU · Om responsive web design . Illustration: NN Group Responsivt princip - fra vandret til lodret design – ’Stabling’ ... user first](https://reader033.fdocument.pub/reader033/viewer/2022060604/605881f53bb3b91ca6145207/html5/thumbnails/1.jpg)
Kæl for ordet Ordet bor i et nyt hus
![Page 2: Kæl for ordet Ordet bor i et nyt hus - SDU · Om responsive web design . Illustration: NN Group Responsivt princip - fra vandret til lodret design – ’Stabling’ ... user first](https://reader033.fdocument.pub/reader033/viewer/2022060604/605881f53bb3b91ca6145207/html5/thumbnails/2.jpg)
![Page 3: Kæl for ordet Ordet bor i et nyt hus - SDU · Om responsive web design . Illustration: NN Group Responsivt princip - fra vandret til lodret design – ’Stabling’ ... user first](https://reader033.fdocument.pub/reader033/viewer/2022060604/605881f53bb3b91ca6145207/html5/thumbnails/3.jpg)
A4 format iPhone 4S
![Page 4: Kæl for ordet Ordet bor i et nyt hus - SDU · Om responsive web design . Illustration: NN Group Responsivt princip - fra vandret til lodret design – ’Stabling’ ... user first](https://reader033.fdocument.pub/reader033/viewer/2022060604/605881f53bb3b91ca6145207/html5/thumbnails/4.jpg)
Budskaber
• Smartphones og tablets fjerner det sidste argument for trykte publikationer: At de kan tages med overalt og er komfortable at læse på
• A4 dur ikke på mobil. Den trykte skriftkulturs reminiscenser – PDF, livepaper, epaper, eaviser, ISSUU – kommer under pres
• Kultur er en supertanker: Forandring tager tid
• Dog: Ser vi begyndelsen til en ny, original digital skriftlig kultur – hvor det at ’kæle for ordet’ vil foregå på nye måder?
![Page 5: Kæl for ordet Ordet bor i et nyt hus - SDU · Om responsive web design . Illustration: NN Group Responsivt princip - fra vandret til lodret design – ’Stabling’ ... user first](https://reader033.fdocument.pub/reader033/viewer/2022060604/605881f53bb3b91ca6145207/html5/thumbnails/5.jpg)
1. Apparateksplosion: Internet overalt (hardware)
2. Åben eller lukket infosfære: Full site, M-dot, App, RWD? (software)
3. Skriftsprog under forandring: Moderne digital tekst – udfordringer, principper, modeller (content)
Program
![Page 6: Kæl for ordet Ordet bor i et nyt hus - SDU · Om responsive web design . Illustration: NN Group Responsivt princip - fra vandret til lodret design – ’Stabling’ ... user first](https://reader033.fdocument.pub/reader033/viewer/2022060604/605881f53bb3b91ca6145207/html5/thumbnails/6.jpg)
Nils Ulrik Pedersen
Underviser, rådgiver, indehaver
Siteways Web Content Specialists
Tidligere internetprojektleder
hos Berlingske
Siden 1999 kursusleder på Danmarks Medie- og Journalisthøjskole
• 4088 4758
• http://siteways.dk
6
Om foredragsholder
![Page 7: Kæl for ordet Ordet bor i et nyt hus - SDU · Om responsive web design . Illustration: NN Group Responsivt princip - fra vandret til lodret design – ’Stabling’ ... user first](https://reader033.fdocument.pub/reader033/viewer/2022060604/605881f53bb3b91ca6145207/html5/thumbnails/7.jpg)
1. Apparateksplosionen (hardware)
7
![Page 9: Kæl for ordet Ordet bor i et nyt hus - SDU · Om responsive web design . Illustration: NN Group Responsivt princip - fra vandret til lodret design – ’Stabling’ ... user first](https://reader033.fdocument.pub/reader033/viewer/2022060604/605881f53bb3b91ca6145207/html5/thumbnails/9.jpg)
Smarte telefoner før iPhone – 2000’nullerne
![Page 10: Kæl for ordet Ordet bor i et nyt hus - SDU · Om responsive web design . Illustration: NN Group Responsivt princip - fra vandret til lodret design – ’Stabling’ ... user first](https://reader033.fdocument.pub/reader033/viewer/2022060604/605881f53bb3b91ca6145207/html5/thumbnails/10.jpg)
Smarte telefoner før iPhone
1994 Simon Personal Communicator fra IBM. Emails og kalender. Batteritid 30 minutter. Vægt 0,5 kg.
1996 Nokia 9000 Communicator, første mobiltelefon m. internet. 8 Mb hukommelse og 33 MHx processor. Udfoldeligt tastatur.
1999 Ericsson R380 smartphone, den første smartphone. Betjenes med en pen (’Stylus’). Håndterer browser og email. Skærm på 3,5 tommer (120x360 pixels)
![Page 11: Kæl for ordet Ordet bor i et nyt hus - SDU · Om responsive web design . Illustration: NN Group Responsivt princip - fra vandret til lodret design – ’Stabling’ ... user first](https://reader033.fdocument.pub/reader033/viewer/2022060604/605881f53bb3b91ca6145207/html5/thumbnails/11.jpg)
Smarte telefoner før iPhone
”Plastic keybords take up 40 percent of space whether you need them or not.”
![Page 12: Kæl for ordet Ordet bor i et nyt hus - SDU · Om responsive web design . Illustration: NN Group Responsivt princip - fra vandret til lodret design – ’Stabling’ ... user first](https://reader033.fdocument.pub/reader033/viewer/2022060604/605881f53bb3b91ca6145207/html5/thumbnails/12.jpg)
iPhone – ”A giant screen” with multi-touch interface
iPhone – ”A giant screen” with multi-touch interface
![Page 13: Kæl for ordet Ordet bor i et nyt hus - SDU · Om responsive web design . Illustration: NN Group Responsivt princip - fra vandret til lodret design – ’Stabling’ ... user first](https://reader033.fdocument.pub/reader033/viewer/2022060604/605881f53bb3b91ca6145207/html5/thumbnails/13.jpg)
Mediet: Fra trykpresse og bog til computerskærm til ……
![Page 14: Kæl for ordet Ordet bor i et nyt hus - SDU · Om responsive web design . Illustration: NN Group Responsivt princip - fra vandret til lodret design – ’Stabling’ ... user first](https://reader033.fdocument.pub/reader033/viewer/2022060604/605881f53bb3b91ca6145207/html5/thumbnails/14.jpg)
…. Apparateksplosionen- hundredevis af apparater for indhold og læsning
Foto: Brad Frost
![Page 15: Kæl for ordet Ordet bor i et nyt hus - SDU · Om responsive web design . Illustration: NN Group Responsivt princip - fra vandret til lodret design – ’Stabling’ ... user first](https://reader033.fdocument.pub/reader033/viewer/2022060604/605881f53bb3b91ca6145207/html5/thumbnails/15.jpg)
Web og indhold overalt – apparater (hardware)
Traditionel Desktop, laptop
Håndholdt Mobil, tablet,
eboglæser
Kropsnær Ur, brille, bånd,
Hjelm
Indbygget Hvidevarer, målere,
møbler, transport
Underholdning TV, spilstationer
Offentlige Infoskærm,
infostander
smartboard
![Page 16: Kæl for ordet Ordet bor i et nyt hus - SDU · Om responsive web design . Illustration: NN Group Responsivt princip - fra vandret til lodret design – ’Stabling’ ... user first](https://reader033.fdocument.pub/reader033/viewer/2022060604/605881f53bb3b91ca6145207/html5/thumbnails/16.jpg)
Web og indhold overalt i to faser (hardware)
Desktop Laptop Mobil
Tablet
Spilstation
Fitness Ur Køkkenbord
Køleskab
Smartboard
Infotavle
2015
2020
![Page 17: Kæl for ordet Ordet bor i et nyt hus - SDU · Om responsive web design . Illustration: NN Group Responsivt princip - fra vandret til lodret design – ’Stabling’ ... user first](https://reader033.fdocument.pub/reader033/viewer/2022060604/605881f53bb3b91ca6145207/html5/thumbnails/17.jpg)
233 anvendte mobile enheder – VIA juli-august 2014
![Page 18: Kæl for ordet Ordet bor i et nyt hus - SDU · Om responsive web design . Illustration: NN Group Responsivt princip - fra vandret til lodret design – ’Stabling’ ... user first](https://reader033.fdocument.pub/reader033/viewer/2022060604/605881f53bb3b91ca6145207/html5/thumbnails/18.jpg)
Apparatbrug professionshøjskolen VIA (Aarhus) 2011-2015 – Responsiv web 1. februar 2015
![Page 19: Kæl for ordet Ordet bor i et nyt hus - SDU · Om responsive web design . Illustration: NN Group Responsivt princip - fra vandret til lodret design – ’Stabling’ ... user first](https://reader033.fdocument.pub/reader033/viewer/2022060604/605881f53bb3b91ca6145207/html5/thumbnails/19.jpg)
Apparatbrug professionshøjskolen VIA – Siden responsiv lancering 2. februar – 24. maj 2015
![Page 20: Kæl for ordet Ordet bor i et nyt hus - SDU · Om responsive web design . Illustration: NN Group Responsivt princip - fra vandret til lodret design – ’Stabling’ ... user first](https://reader033.fdocument.pub/reader033/viewer/2022060604/605881f53bb3b91ca6145207/html5/thumbnails/20.jpg)
Apparateksplosionen
Foto: Brad Frost
Megatrends • Overalt internet og indhold – møde kunden, borgeren, medlemmet 24/7 • Comfy computing – internet ud af kontoret og ind på sofaen • Disruption – fx Apple som bank , mobilen som betalings-’kort’
• 91% af US mobilbrugere har mobilen inden for
1 meters afstand altid • Mobile on the go – men over
70 procent af brug foregår i hjemmet eller på kontoret
![Page 22: Kæl for ordet Ordet bor i et nyt hus - SDU · Om responsive web design . Illustration: NN Group Responsivt princip - fra vandret til lodret design – ’Stabling’ ... user first](https://reader033.fdocument.pub/reader033/viewer/2022060604/605881f53bb3b91ca6145207/html5/thumbnails/22.jpg)
http://shop.volkswagen.dk/shop/golf-smartphone-handsker-642p.html
![Page 23: Kæl for ordet Ordet bor i et nyt hus - SDU · Om responsive web design . Illustration: NN Group Responsivt princip - fra vandret til lodret design – ’Stabling’ ... user first](https://reader033.fdocument.pub/reader033/viewer/2022060604/605881f53bb3b91ca6145207/html5/thumbnails/23.jpg)
![Page 24: Kæl for ordet Ordet bor i et nyt hus - SDU · Om responsive web design . Illustration: NN Group Responsivt princip - fra vandret til lodret design – ’Stabling’ ... user first](https://reader033.fdocument.pub/reader033/viewer/2022060604/605881f53bb3b91ca6145207/html5/thumbnails/24.jpg)
Luke Wroblewski, One Design, 2013
PORTABLE COMPUTER DESKTOP COMPUTER
Apparater og spredning af skærmstørrelser
![Page 25: Kæl for ordet Ordet bor i et nyt hus - SDU · Om responsive web design . Illustration: NN Group Responsivt princip - fra vandret til lodret design – ’Stabling’ ... user first](https://reader033.fdocument.pub/reader033/viewer/2022060604/605881f53bb3b91ca6145207/html5/thumbnails/25.jpg)
Luke Wroblewski, One Design, 2013
Iphone 4 Iphone 6 Juni 2010 Oktober 2014
Apparater og spredning af skærmstørrelser
![Page 27: Kæl for ordet Ordet bor i et nyt hus - SDU · Om responsive web design . Illustration: NN Group Responsivt princip - fra vandret til lodret design – ’Stabling’ ... user first](https://reader033.fdocument.pub/reader033/viewer/2022060604/605881f53bb3b91ca6145207/html5/thumbnails/27.jpg)
SAMTALE
APPARATERNE
5 minutters snak: Hvad betyder apparaterne for din dagligdag, privat og professionelt?
Kort opsamling i plenum
Foto: Flickr
![Page 28: Kæl for ordet Ordet bor i et nyt hus - SDU · Om responsive web design . Illustration: NN Group Responsivt princip - fra vandret til lodret design – ’Stabling’ ... user first](https://reader033.fdocument.pub/reader033/viewer/2022060604/605881f53bb3b91ca6145207/html5/thumbnails/28.jpg)
2. Åben eller lukket infokultur (software)
28
![Page 29: Kæl for ordet Ordet bor i et nyt hus - SDU · Om responsive web design . Illustration: NN Group Responsivt princip - fra vandret til lodret design – ’Stabling’ ... user first](https://reader033.fdocument.pub/reader033/viewer/2022060604/605881f53bb3b91ca6145207/html5/thumbnails/29.jpg)
29
Fra 21. april 2015: Google straffer ikke-mobilvenlige sites
http://googlewebmastercentral.blogspot.dk/2015/02/finding-more-mobile-friendly-search.html
![Page 37: Kæl for ordet Ordet bor i et nyt hus - SDU · Om responsive web design . Illustration: NN Group Responsivt princip - fra vandret til lodret design – ’Stabling’ ... user first](https://reader033.fdocument.pub/reader033/viewer/2022060604/605881f53bb3b91ca6145207/html5/thumbnails/37.jpg)
Sdu.dk Apps
37
![Page 38: Kæl for ordet Ordet bor i et nyt hus - SDU · Om responsive web design . Illustration: NN Group Responsivt princip - fra vandret til lodret design – ’Stabling’ ... user first](https://reader033.fdocument.pub/reader033/viewer/2022060604/605881f53bb3b91ca6145207/html5/thumbnails/38.jpg)
Danske universitets mobilvenlighed
38
Uni Full site App M-dot RWD
AU X X
DTU X
KADK X
KU X X
RUC X
SDU X X X
![Page 39: Kæl for ordet Ordet bor i et nyt hus - SDU · Om responsive web design . Illustration: NN Group Responsivt princip - fra vandret til lodret design – ’Stabling’ ... user first](https://reader033.fdocument.pub/reader033/viewer/2022060604/605881f53bb3b91ca6145207/html5/thumbnails/39.jpg)
App som lukket infosystem
• Unlike web pages, mobile apps do not have links. They do not have web addresses. They live in worlds by themselves, largely cut off from one another and the broader Internet. And so it is much harder to share the information found on them.
• New York Times
• http://www.nytimes.com/2015/01/06/technology/tech-companies-look-to-break-down-walls-between-apps.html?_r=0
![Page 40: Kæl for ordet Ordet bor i et nyt hus - SDU · Om responsive web design . Illustration: NN Group Responsivt princip - fra vandret til lodret design – ’Stabling’ ... user first](https://reader033.fdocument.pub/reader033/viewer/2022060604/605881f53bb3b91ca6145207/html5/thumbnails/40.jpg)
M-dot – mobilt website - med reduceret indhold
xxx
![Page 41: Kæl for ordet Ordet bor i et nyt hus - SDU · Om responsive web design . Illustration: NN Group Responsivt princip - fra vandret til lodret design – ’Stabling’ ... user first](https://reader033.fdocument.pub/reader033/viewer/2022060604/605881f53bb3b91ca6145207/html5/thumbnails/41.jpg)
App
![Page 42: Kæl for ordet Ordet bor i et nyt hus - SDU · Om responsive web design . Illustration: NN Group Responsivt princip - fra vandret til lodret design – ’Stabling’ ... user first](https://reader033.fdocument.pub/reader033/viewer/2022060604/605881f53bb3b91ca6145207/html5/thumbnails/42.jpg)
Appsurd2 – investering og driftsøkonomi. Eksempel Københavns Kommune
Eksempel: Anti-diskriminations-app, Københavns Kommune, 2014. 25. Januar 2015,downloadet 1.529 gange og benyttet 176 gange til en pris pr. anmeldelse på 6.500 kr. Samlet investering 1,15 million kroner.
![Page 43: Kæl for ordet Ordet bor i et nyt hus - SDU · Om responsive web design . Illustration: NN Group Responsivt princip - fra vandret til lodret design – ’Stabling’ ... user first](https://reader033.fdocument.pub/reader033/viewer/2022060604/605881f53bb3b91ca6145207/html5/thumbnails/43.jpg)
M-dot – mobilt website – Eksempel: Udenrigsministeriet
Eksempel: Mobile sites har begrænset indhold målrettet til travle brugere ’on the go’. Udenrigsministeriets mobilsite – mobil.um.dk - har to typer af indhold, rejsevejledninger og nyheder. Ved ønske om andet henvises til um.dk
![Page 44: Kæl for ordet Ordet bor i et nyt hus - SDU · Om responsive web design . Illustration: NN Group Responsivt princip - fra vandret til lodret design – ’Stabling’ ... user first](https://reader033.fdocument.pub/reader033/viewer/2022060604/605881f53bb3b91ca6145207/html5/thumbnails/44.jpg)
Responsive web design
• Præsenteret af Ethan Marcotte i artikel 2010 – mere på http://responsivewebdesign.com/
• Anvender kendte html-teknologier:
• Flydende design (fluid grid)
• Fleksible billeder
• Mediaforespørgsel (Media queries)
• Udgør én, skalérbar, dynamisk løsning til alle apparater og skærmstørrelser – alternativ til apparatspecifikke løsninger som m.dot og App
• Samme indhold – ’content parity’, indhold på PC = Tablet = Mobil
Om responsive web design
![Page 45: Kæl for ordet Ordet bor i et nyt hus - SDU · Om responsive web design . Illustration: NN Group Responsivt princip - fra vandret til lodret design – ’Stabling’ ... user first](https://reader033.fdocument.pub/reader033/viewer/2022060604/605881f53bb3b91ca6145207/html5/thumbnails/45.jpg)
Illustration: NN Group
Responsivt princip - fra vandret til lodret design – ’Stabling’
![Page 46: Kæl for ordet Ordet bor i et nyt hus - SDU · Om responsive web design . Illustration: NN Group Responsivt princip - fra vandret til lodret design – ’Stabling’ ... user first](https://reader033.fdocument.pub/reader033/viewer/2022060604/605881f53bb3b91ca6145207/html5/thumbnails/46.jpg)
Vandret/lodret princip RWD - KU
http://kommunikation.ku.dk/medarbejderoversigt/
![Page 48: Kæl for ordet Ordet bor i et nyt hus - SDU · Om responsive web design . Illustration: NN Group Responsivt princip - fra vandret til lodret design – ’Stabling’ ... user first](https://reader033.fdocument.pub/reader033/viewer/2022060604/605881f53bb3b91ca6145207/html5/thumbnails/48.jpg)
Responsiv web design: Menu - Slut med ’højre’ og ’venstre’
48
![Page 50: Kæl for ordet Ordet bor i et nyt hus - SDU · Om responsive web design . Illustration: NN Group Responsivt princip - fra vandret til lodret design – ’Stabling’ ... user first](https://reader033.fdocument.pub/reader033/viewer/2022060604/605881f53bb3b91ca6145207/html5/thumbnails/50.jpg)
Platforme – overblik
Web, traditionel
App
M-dot (mobilsite)
Web, responsiv
IOS Android Windows
IOS Android
+
+
![Page 51: Kæl for ordet Ordet bor i et nyt hus - SDU · Om responsive web design . Illustration: NN Group Responsivt princip - fra vandret til lodret design – ’Stabling’ ... user first](https://reader033.fdocument.pub/reader033/viewer/2022060604/605881f53bb3b91ca6145207/html5/thumbnails/51.jpg)
ANBEFALING OG DISKUSSION AF PLATFORM
http://www.responsinator.com/?url=rss-odense.dk http://www.responsinator.com/?url=dennyefriskole.dk
• Anbefaling: App kun hvis der kan findes en hidtil overset funktion at tilbyde
• Indhold tilbydes bedst på web
• Web bedst for ’discovery’
• App generelt ikke relevant – ’at skyde gråspurve med kanoner’
• Anbefaling: Responsiv web
• Alt indhold til alle apparater (frit apparatvalg for brugere)
• Kan let håndtere de informations/transaktionsformål, som friskoler har – på brugervenlige måder
• Enkelt, økonomisk og mindst time-ressourceforbrugende
![Page 52: Kæl for ordet Ordet bor i et nyt hus - SDU · Om responsive web design . Illustration: NN Group Responsivt princip - fra vandret til lodret design – ’Stabling’ ... user first](https://reader033.fdocument.pub/reader033/viewer/2022060604/605881f53bb3b91ca6145207/html5/thumbnails/52.jpg)
SAMTALE
SOFTWAREN
5 minutters snak: Hvad skal vi vælge? Hvorfor? For og imod full site, apps og responsiv …
Kort opsamling i plenum
Foto: Flickr
![Page 53: Kæl for ordet Ordet bor i et nyt hus - SDU · Om responsive web design . Illustration: NN Group Responsivt princip - fra vandret til lodret design – ’Stabling’ ... user first](https://reader033.fdocument.pub/reader033/viewer/2022060604/605881f53bb3b91ca6145207/html5/thumbnails/53.jpg)
3. Skriftsprog under forandring (indhold og form)
53
![Page 54: Kæl for ordet Ordet bor i et nyt hus - SDU · Om responsive web design . Illustration: NN Group Responsivt princip - fra vandret til lodret design – ’Stabling’ ... user first](https://reader033.fdocument.pub/reader033/viewer/2022060604/605881f53bb3b91ca6145207/html5/thumbnails/54.jpg)
Program for afsnit 3: Skriftsprog under forandring
http://www.responsinator.com/?url=rss-odense.dk http://www.responsinator.com/?url=dennyefriskole.dk
• Udfordringer på små skærme
• Principper: Enkelt, prioriteret, struktureret, tydeligt
• Responsive modeller
• Indholdsmodellering (Content modelling)
• Billeder
![Page 55: Kæl for ordet Ordet bor i et nyt hus - SDU · Om responsive web design . Illustration: NN Group Responsivt princip - fra vandret til lodret design – ’Stabling’ ... user first](https://reader033.fdocument.pub/reader033/viewer/2022060604/605881f53bb3b91ca6145207/html5/thumbnails/55.jpg)
Udfordringer på små skærme
55
![Page 56: Kæl for ordet Ordet bor i et nyt hus - SDU · Om responsive web design . Illustration: NN Group Responsivt princip - fra vandret til lodret design – ’Stabling’ ... user first](https://reader033.fdocument.pub/reader033/viewer/2022060604/605881f53bb3b91ca6145207/html5/thumbnails/56.jpg)
Mobile udfordringer
• Arbejdshukommelse belastes – (korttidshukommelse) – man skal huske mere
• Opmærksomhed udfordres – urolig, presset brugersituation, ude i det virkelige liv
56
![Page 57: Kæl for ordet Ordet bor i et nyt hus - SDU · Om responsive web design . Illustration: NN Group Responsivt princip - fra vandret til lodret design – ’Stabling’ ... user first](https://reader033.fdocument.pub/reader033/viewer/2022060604/605881f53bb3b91ca6145207/html5/thumbnails/57.jpg)
Skærmstørrelse er lille – man ser kun et fragment af site og side, slagsmål mellem indhold og navigation
Brugere kan
• se mindre på ethvert givet stadie af læsning
Brugere er
• huske mere, når de skal prøve at forstå noget, som ikke klart fremgår af den synlige del af teksten
Brugere må
• bevæge sig mere rundt på sider ved at scrolle til næste del af teksten i stedet for at flytte blikket
Udfordringer på den lille skærm
![Page 58: Kæl for ordet Ordet bor i et nyt hus - SDU · Om responsive web design . Illustration: NN Group Responsivt princip - fra vandret til lodret design – ’Stabling’ ... user first](https://reader033.fdocument.pub/reader033/viewer/2022060604/605881f53bb3b91ca6145207/html5/thumbnails/58.jpg)
Pres på arbejdshukommelsen
Brugere skal huske:
• Opgaven de kom for – fx booke en rejse – det er sværere, hvis det går langsomt
• Kontekstuel information
• Navn, logo: Hvilket site er jeg på?
• Side, emne: Hvilken side er jeg på?
• Tekst, indhold: Hvad var det, jeg lige læste?
58
![Page 59: Kæl for ordet Ordet bor i et nyt hus - SDU · Om responsive web design . Illustration: NN Group Responsivt princip - fra vandret til lodret design – ’Stabling’ ... user first](https://reader033.fdocument.pub/reader033/viewer/2022060604/605881f53bb3b91ca6145207/html5/thumbnails/59.jpg)
Principper for responsiv web: Enkelt, prioriteret, struktureret, tydeligt
59
![Page 60: Kæl for ordet Ordet bor i et nyt hus - SDU · Om responsive web design . Illustration: NN Group Responsivt princip - fra vandret til lodret design – ’Stabling’ ... user first](https://reader033.fdocument.pub/reader033/viewer/2022060604/605881f53bb3b91ca6145207/html5/thumbnails/60.jpg)
60
Lang tekst – lang tekst er en udfordring for svage eller langsomme læsere Principper for digitalt indhold og udgivelse
Principper for responsiv web:
• Enkelt – kun det nødvendige (brugerperspektiv)
• Prioriteret – ordnet efter vigtighed
• Struktureret – fast, genkendelig form
• Tydelig – altid forståelig
![Page 61: Kæl for ordet Ordet bor i et nyt hus - SDU · Om responsive web design . Illustration: NN Group Responsivt princip - fra vandret til lodret design – ’Stabling’ ... user first](https://reader033.fdocument.pub/reader033/viewer/2022060604/605881f53bb3b91ca6145207/html5/thumbnails/61.jpg)
61
Lang tekst – lang tekst er en udfordring for svage eller langsomme læsere Enkelt
• Digitalt indhold vokser – næsten af sig selv – til informationsbjerge. Indhold medtages for ”at være på den sikre side”
• Problem: Unødvendigt, irrelevant indhold står i vejen for og forstyrrer nødvendigt, relevant indhold
• Du kan i de fleste tilfælde øge kvalitet og brugervenlighed i dit indhold ved at tage noget væk
![Page 62: Kæl for ordet Ordet bor i et nyt hus - SDU · Om responsive web design . Illustration: NN Group Responsivt princip - fra vandret til lodret design – ’Stabling’ ... user first](https://reader033.fdocument.pub/reader033/viewer/2022060604/605881f53bb3b91ca6145207/html5/thumbnails/62.jpg)
62
Lang tekst – lang tekst er en udfordring for svage eller langsomme læsere Enkelhed – den omvendte U-kurve
![Page 64: Kæl for ordet Ordet bor i et nyt hus - SDU · Om responsive web design . Illustration: NN Group Responsivt princip - fra vandret til lodret design – ’Stabling’ ... user first](https://reader033.fdocument.pub/reader033/viewer/2022060604/605881f53bb3b91ca6145207/html5/thumbnails/64.jpg)
64
Fokus på brugerne?
![Page 65: Kæl for ordet Ordet bor i et nyt hus - SDU · Om responsive web design . Illustration: NN Group Responsivt princip - fra vandret til lodret design – ’Stabling’ ... user first](https://reader033.fdocument.pub/reader033/viewer/2022060604/605881f53bb3b91ca6145207/html5/thumbnails/65.jpg)
Fokus og enkelhed – Programleder Merete Ravn, Sorø Kommune
Før: Hjemmeside i traditionel samt 20 institutions-hjemmesider med i alt cirka 2.500 sider
Nu: En enkelt hjemmeside med cirka 380 sider.
Problem med gamle hjemmeside: Den ville alt og intet og var vokset alt for stor.
Mål:
1) Bedre og billigere service til borgerne (via selvbetjening),
2) Effektiv digital branding. Målet er at flytte henvendelser til kommunen fra den fysiske verden (brev, telefon, skranke, email) til den digitale verden.
![Page 66: Kæl for ordet Ordet bor i et nyt hus - SDU · Om responsive web design . Illustration: NN Group Responsivt princip - fra vandret til lodret design – ’Stabling’ ... user first](https://reader033.fdocument.pub/reader033/viewer/2022060604/605881f53bb3b91ca6145207/html5/thumbnails/66.jpg)
66
Lang tekst – lang tekst er en udfordring for svage eller langsomme læsere Prioriteret
”Put the most important features in front of the user first and let others take a lower priority.”
Will Hacker
• Prioritering vil sige at rangordne emner, indhold, informationer, budskaber og handlinger ud fra vigtighed, relevans og betydning
• De vigtigste informationer og budskaber skal springe i øjnene, mindre vigtigt indhold kan have en mindre fremtrædende placering
• Det lodrette designprincip, som gælder for små skærme, øger behov for skarp prioritering
• Ikke alt kan vises straks = ’progressive disclosure’ (trinvis visning)
![Page 67: Kæl for ordet Ordet bor i et nyt hus - SDU · Om responsive web design . Illustration: NN Group Responsivt princip - fra vandret til lodret design – ’Stabling’ ... user first](https://reader033.fdocument.pub/reader033/viewer/2022060604/605881f53bb3b91ca6145207/html5/thumbnails/67.jpg)
67
Lang tekst – lang tekst er en udfordring for svage eller langsomme læsere Prioritering
• Rangering håndteres i praksis ved indkredsning af primært og sekundært indhold
• Primær information er nødvendig, basal information, som angår alle
• Primær information gør brugere i stand til at løse en opgave eller udføre en handling
• Sekundær information omhandler detaljer og uddybende, supplerende eller særlig information
• Sekundær information er rettet til særlige målgrupper. Sekundær information fjerner tvivl
![Page 68: Kæl for ordet Ordet bor i et nyt hus - SDU · Om responsive web design . Illustration: NN Group Responsivt princip - fra vandret til lodret design – ’Stabling’ ... user first](https://reader033.fdocument.pub/reader033/viewer/2022060604/605881f53bb3b91ca6145207/html5/thumbnails/68.jpg)
Struktur i tekst - Klassisk site på mobil
68
![Page 69: Kæl for ordet Ordet bor i et nyt hus - SDU · Om responsive web design . Illustration: NN Group Responsivt princip - fra vandret til lodret design – ’Stabling’ ... user first](https://reader033.fdocument.pub/reader033/viewer/2022060604/605881f53bb3b91ca6145207/html5/thumbnails/69.jpg)
69
Lang tekst – lang tekst er en udfordring for svage eller langsomme læsere Struktureret
• At strukturere indhold betyder at tilføre indholdet orden
• En struktur er logisk, genkendelig og genanvendelig
• Strukturer er grundlaget for standarder, som sikrer, at indhold, som er designet, produceret og leveret som enkelte elementer, kan fungere i en større helhed af indhold og på tværs af apparater og kanaler
• Struktur findes på to niveauer, mellem indhold og i indhold
![Page 70: Kæl for ordet Ordet bor i et nyt hus - SDU · Om responsive web design . Illustration: NN Group Responsivt princip - fra vandret til lodret design – ’Stabling’ ... user first](https://reader033.fdocument.pub/reader033/viewer/2022060604/605881f53bb3b91ca6145207/html5/thumbnails/70.jpg)
http://www.nytimes.com/2013/12/01/us/politics/inside-the-race-to-rescue-a-health-site-and-obama.html?hp
Hvad er den rigtige længde af et afsnit?
http://www.bbc.co.uk/news/world-europe-25290959
![Page 71: Kæl for ordet Ordet bor i et nyt hus - SDU · Om responsive web design . Illustration: NN Group Responsivt princip - fra vandret til lodret design – ’Stabling’ ... user first](https://reader033.fdocument.pub/reader033/viewer/2022060604/605881f53bb3b91ca6145207/html5/thumbnails/71.jpg)
http://www.b.dk/politiko/radikale-topministre-i-opgoer-med-offentligt-lighedsmageri
Nyhedstekst: Hvad er den rigtige længde af et afsnit?
http://www.vg.no/rampelys/artikkel.php?artid=10148049
![Page 72: Kæl for ordet Ordet bor i et nyt hus - SDU · Om responsive web design . Illustration: NN Group Responsivt princip - fra vandret til lodret design – ’Stabling’ ... user first](https://reader033.fdocument.pub/reader033/viewer/2022060604/605881f53bb3b91ca6145207/html5/thumbnails/72.jpg)
72
Afsnit
Afsnit
Afsnit
Afsnit
Webnyhedsformat Multi: Eksempel BBC News – korte afsnit
Afsnit
![Page 73: Kæl for ordet Ordet bor i et nyt hus - SDU · Om responsive web design . Illustration: NN Group Responsivt princip - fra vandret til lodret design – ’Stabling’ ... user first](https://reader033.fdocument.pub/reader033/viewer/2022060604/605881f53bb3b91ca6145207/html5/thumbnails/73.jpg)
Tydelig overskrift √
Manchet √
Korte afsnit √
Mellemoverskrifter √
Lang tekst – lang tekst er en udfordring for svage eller langsomme læsere Struktureret tekst – med korte afsnit og mellemoverskrifter
73
![Page 74: Kæl for ordet Ordet bor i et nyt hus - SDU · Om responsive web design . Illustration: NN Group Responsivt princip - fra vandret til lodret design – ’Stabling’ ... user first](https://reader033.fdocument.pub/reader033/viewer/2022060604/605881f53bb3b91ca6145207/html5/thumbnails/74.jpg)
http://www.sikkertpatientflow.dk/om-projektet/
Lang tekst – lang tekst er en udfordring for svage eller langsomme læsere Struktureret tekst – med korte afsnit og mellemoverskrifter
74
![Page 75: Kæl for ordet Ordet bor i et nyt hus - SDU · Om responsive web design . Illustration: NN Group Responsivt princip - fra vandret til lodret design – ’Stabling’ ... user first](https://reader033.fdocument.pub/reader033/viewer/2022060604/605881f53bb3b91ca6145207/html5/thumbnails/75.jpg)
Afsnit
• Et afsnit er en afgrænset tekstenhed, der indeholder en eller flere sætninger
• Skriv afsnit på maksimalt 3 weblinjer (eller cirka 250 tegn)
• Husk at en linje i Word = 2 linjer på en webside
• Skriv om ét emne eller én slags information i hvert afsnit
• Indled om muligt afsnit med nøgleord.
• Variér nøgleordene, så afsnit og mellemoverskrifter begynder med forskellige ord
• Afsnit skal være tydeligt adskilt fra hinanden med luft
75
![Page 76: Kæl for ordet Ordet bor i et nyt hus - SDU · Om responsive web design . Illustration: NN Group Responsivt princip - fra vandret til lodret design – ’Stabling’ ... user first](https://reader033.fdocument.pub/reader033/viewer/2022060604/605881f53bb3b91ca6145207/html5/thumbnails/76.jpg)
Afsnit
• Korte afsnit gør det lettere at læse og forstå en tekst
• Korte afsnit får brugere til at læse mere, fordi teksten ser luftigere og lettere ud
• Lange afsnit ’skjuler’ information, der er placeret sidst i afsnittet, fordi brugere har tendens til ikke at læse lange afsnit færdige
• Skriv et afsnit, så det kan læses og forstås ’alene’
• Fordi brugere ofte læser afsnit som løsrevne enheder og ikke som del af en sammen-hængende tekst
76
![Page 77: Kæl for ordet Ordet bor i et nyt hus - SDU · Om responsive web design . Illustration: NN Group Responsivt princip - fra vandret til lodret design – ’Stabling’ ... user first](https://reader033.fdocument.pub/reader033/viewer/2022060604/605881f53bb3b91ca6145207/html5/thumbnails/77.jpg)
Sætningsstruktur: Nærhed mellem grundled og udsagnsled i sætning
77
![Page 78: Kæl for ordet Ordet bor i et nyt hus - SDU · Om responsive web design . Illustration: NN Group Responsivt princip - fra vandret til lodret design – ’Stabling’ ... user first](https://reader033.fdocument.pub/reader033/viewer/2022060604/605881f53bb3b91ca6145207/html5/thumbnails/78.jpg)
Sætningsstruktur: Højrevægt i sætning*
Højrevægt i sætninger
• Skriv sætninger hvor grundled og udsagnsled står tæt sammen i begyndelsen af sætningen
• Alle de understøttende elementer i sætningen findes til højre
Fordele ved højrevægt i sætninger
Tidligt grundled og udsagnsled
• gør sætningens mening tydelig fra start
• forebygger tvivl og forvirring om hvad der kommer – i venten på udsagnsordet
• etablerer et mønster af støt fremdrift i læsning og forståelse af en tekst
* 7 Tools for Next Level Writing, webinar med Roy Peter Clark, marts 2014
![Page 79: Kæl for ordet Ordet bor i et nyt hus - SDU · Om responsive web design . Illustration: NN Group Responsivt princip - fra vandret til lodret design – ’Stabling’ ... user first](https://reader033.fdocument.pub/reader033/viewer/2022060604/605881f53bb3b91ca6145207/html5/thumbnails/79.jpg)
79
Lang tekst – lang tekst er en udfordring for svage eller langsomme læsere Tydelig
• Konteksten er udskiftelig, indholdets emne og udsagn understøttes ikke nødvendigvis af denne
• Indhold må være selvberoende, herunder tydeligt, endda overdrevent tydeligt, hvad angår site, sted, emne, genre, titel, udsagn, budskaber og handlinger
![Page 80: Kæl for ordet Ordet bor i et nyt hus - SDU · Om responsive web design . Illustration: NN Group Responsivt princip - fra vandret til lodret design – ’Stabling’ ... user first](https://reader033.fdocument.pub/reader033/viewer/2022060604/605881f53bb3b91ca6145207/html5/thumbnails/80.jpg)
Tydelig overskrift? - KU
http://studier.ku.dk/kandidat/agronomi/faglig-profil-og-job/
![Page 81: Kæl for ordet Ordet bor i et nyt hus - SDU · Om responsive web design . Illustration: NN Group Responsivt princip - fra vandret til lodret design – ’Stabling’ ... user first](https://reader033.fdocument.pub/reader033/viewer/2022060604/605881f53bb3b91ca6145207/html5/thumbnails/81.jpg)
81
Lang tekst – lang tekst er en udfordring for svage eller langsomme læsere Eksempel tydelig? – Kdak.dk
![Page 82: Kæl for ordet Ordet bor i et nyt hus - SDU · Om responsive web design . Illustration: NN Group Responsivt princip - fra vandret til lodret design – ’Stabling’ ... user first](https://reader033.fdocument.pub/reader033/viewer/2022060604/605881f53bb3b91ca6145207/html5/thumbnails/82.jpg)
Eksempel VIA University College - http://www.via.dk/uddannelser/sundhed-og-omsorg/bioanalytiker
Utydelige overskrifter
Teaser / underoverskrift √
Ingen synlig tekst – Al
information findes i harmomika √
Harmonika √
Overskrifter √
Overskrift for harmonika √
![Page 83: Kæl for ordet Ordet bor i et nyt hus - SDU · Om responsive web design . Illustration: NN Group Responsivt princip - fra vandret til lodret design – ’Stabling’ ... user first](https://reader033.fdocument.pub/reader033/viewer/2022060604/605881f53bb3b91ca6145207/html5/thumbnails/83.jpg)
Rubriktydelighed: Metodebeskrivelse (DR.dk)
![Page 84: Kæl for ordet Ordet bor i et nyt hus - SDU · Om responsive web design . Illustration: NN Group Responsivt princip - fra vandret til lodret design – ’Stabling’ ... user first](https://reader033.fdocument.pub/reader033/viewer/2022060604/605881f53bb3b91ca6145207/html5/thumbnails/84.jpg)
Overskrift
• Overskriften er den vigtigste tekst
• Overskriften fortæller, hvad en side handler om
• Skriv en klar og præcis overskrift, ikke en smart og kreativ
• Brug så mange ord i overskriften, at det er tydeligt, hvad den handler om = 55 tegn
• Begynd overskriften med tekstens vigtigste nøgleord
• Skriv gerne overskriften som en sætning
• Undgå ens overskrifter på websitet
84 http://www.copenux.dk/skriveguidelines
![Page 87: Kæl for ordet Ordet bor i et nyt hus - SDU · Om responsive web design . Illustration: NN Group Responsivt princip - fra vandret til lodret design – ’Stabling’ ... user first](https://reader033.fdocument.pub/reader033/viewer/2022060604/605881f53bb3b91ca6145207/html5/thumbnails/87.jpg)
Tydelighed: Side og emne - overskrift – Eksempel: Kk.dk
Prisliste for kørekort
Prisliste for kørekort
87
![Page 88: Kæl for ordet Ordet bor i et nyt hus - SDU · Om responsive web design . Illustration: NN Group Responsivt princip - fra vandret til lodret design – ’Stabling’ ... user first](https://reader033.fdocument.pub/reader033/viewer/2022060604/605881f53bb3b91ca6145207/html5/thumbnails/88.jpg)
Tydelighed: Site - overskrift og mellemoverskrifter – Eksempel: Apotekerforeningen.dk
Om Apotekerforeningen
Apotekerforeningens medlemmer og bestyrelse
Apotekerforeningens sekretariat
![Page 89: Kæl for ordet Ordet bor i et nyt hus - SDU · Om responsive web design . Illustration: NN Group Responsivt princip - fra vandret til lodret design – ’Stabling’ ... user first](https://reader033.fdocument.pub/reader033/viewer/2022060604/605881f53bb3b91ca6145207/html5/thumbnails/89.jpg)
Tydelighed: Overskrift og mellemoverskrifter – Eksempel: Apotekerforeningen.dk
89
Helsidesvisning Swipe/scrolle af
midterfelt
Om Apotekerforeningen
Apotekerforeningens medlemmer og bestyrelse
Apotekerforeningens sekretariat
Om Apotekerforeningen
Apotekerforeningens medlemmer og bestyrelse
Apotekerforeningens sekretariat
Apotekerforeningens sekretariat
Zoom midterfelt
![Page 90: Kæl for ordet Ordet bor i et nyt hus - SDU · Om responsive web design . Illustration: NN Group Responsivt princip - fra vandret til lodret design – ’Stabling’ ... user first](https://reader033.fdocument.pub/reader033/viewer/2022060604/605881f53bb3b91ca6145207/html5/thumbnails/90.jpg)
Underoverskrift (manchet)
• Underoverskriften skal give essensen af teksten
• En underoverskrift giver en god indgang til læsning og forståelse af teksten
• Brugere, der ikke læser hele teksten, får alligevel det vigtigste med
• Brug underoverskrift til at resumere teksten, introducere dens emne eller give overblik over dens indhold
• Skriv en underoverskrift i maksimalt 2 linjer eller cirka 140 tegn
90
![Page 91: Kæl for ordet Ordet bor i et nyt hus - SDU · Om responsive web design . Illustration: NN Group Responsivt princip - fra vandret til lodret design – ’Stabling’ ... user first](https://reader033.fdocument.pub/reader033/viewer/2022060604/605881f53bb3b91ca6145207/html5/thumbnails/91.jpg)
Underoverskrift (manchet)
• Undgå at formulere underoverskrift som en teaser (’drilletekst’)
• Indled underoverskriften med et andet nøgleord end det, der er brugt i overskriften
• Udelad alt for specifikke detaljer, fx tal, datoer - men husk dem i selve teksten
91
![Page 92: Kæl for ordet Ordet bor i et nyt hus - SDU · Om responsive web design . Illustration: NN Group Responsivt princip - fra vandret til lodret design – ’Stabling’ ... user first](https://reader033.fdocument.pub/reader033/viewer/2022060604/605881f53bb3b91ca6145207/html5/thumbnails/92.jpg)
Mellemoverskrift
• Mellemoverskrifter hjælper brugere med at orientere sig i teksten
• De viser tekstens struktur, så det bliver lettere at få overblik og finde et bestemt emne
• En mellemoverskrift kan knytte sig til et enkelt afsnit eller til flere
• Skriv lange mellemoverskrifter på op til 45 tegn
• Skriv alle mellemoverskrifter i samme tekst i samme stil, fx som sætning, enkeltord, spørgsmål eller bydeform
92
![Page 93: Kæl for ordet Ordet bor i et nyt hus - SDU · Om responsive web design . Illustration: NN Group Responsivt princip - fra vandret til lodret design – ’Stabling’ ... user first](https://reader033.fdocument.pub/reader033/viewer/2022060604/605881f53bb3b91ca6145207/html5/thumbnails/93.jpg)
Mellemoverskrift
• Brug mellemoverskrifter til at vise, hvordan teksten er struktureret
• Fortæl tekstens hovedbudskaber i mellemoverskrifterne
• Indled mellemoverskrifter med nøgleord
• Variér nøgleordene, så mellemoverskrifterne begynder med forskellige ord
• Alle tekstens afsnit skal høre under en mellemoverskrift, også første afsnit
93
![Page 94: Kæl for ordet Ordet bor i et nyt hus - SDU · Om responsive web design . Illustration: NN Group Responsivt princip - fra vandret til lodret design – ’Stabling’ ... user first](https://reader033.fdocument.pub/reader033/viewer/2022060604/605881f53bb3b91ca6145207/html5/thumbnails/94.jpg)
SAMTALE
PRINCIPPER
5 minutters snak: Giver principper for responsiv tekst mening?
Kort opsamling i plenum
Foto: Flickr
![Page 95: Kæl for ordet Ordet bor i et nyt hus - SDU · Om responsive web design . Illustration: NN Group Responsivt princip - fra vandret til lodret design – ’Stabling’ ... user first](https://reader033.fdocument.pub/reader033/viewer/2022060604/605881f53bb3b91ca6145207/html5/thumbnails/95.jpg)
Responsive tekstmodeller
95
![Page 96: Kæl for ordet Ordet bor i et nyt hus - SDU · Om responsive web design . Illustration: NN Group Responsivt princip - fra vandret til lodret design – ’Stabling’ ... user first](https://reader033.fdocument.pub/reader033/viewer/2022060604/605881f53bb3b91ca6145207/html5/thumbnails/96.jpg)
Progressive disclosure – definition
• "Make more information available within reach, but don't overwhelm the user with all the features and possibilities".
• Eksempel Kdak.dk forside
http://www.nngroup.com/articles/mobile-accordions/
![Page 97: Kæl for ordet Ordet bor i et nyt hus - SDU · Om responsive web design . Illustration: NN Group Responsivt princip - fra vandret til lodret design – ’Stabling’ ... user first](https://reader033.fdocument.pub/reader033/viewer/2022060604/605881f53bb3b91ca6145207/html5/thumbnails/97.jpg)
Progressive disclosure – definition
• En teknik til at håndtere kompleksitet i navigation og indhold
• Teknik anvendt i interaktionsdesign til at hjælpe brugere til ved udeladelse og forenkling at fastholde opmærksomhed og fokus
• Kun det miniminalt nødvendige til at løse en opgave præsenteres
• Derved reduceres uorden, forvirring og kognitiv overload
• Information præsenteres i trin – information ’afsløres’/præsenteres progressivt / successivt
• I praksis: Fokus i første omgang på primær information, sekundær information er tilgængelig med brugerens næste klik
http://www.nngroup.com/articles/mobile-accordions/
![Page 98: Kæl for ordet Ordet bor i et nyt hus - SDU · Om responsive web design . Illustration: NN Group Responsivt princip - fra vandret til lodret design – ’Stabling’ ... user first](https://reader033.fdocument.pub/reader033/viewer/2022060604/605881f53bb3b91ca6145207/html5/thumbnails/98.jpg)
Tekstmodel harmonika
![Page 99: Kæl for ordet Ordet bor i et nyt hus - SDU · Om responsive web design . Illustration: NN Group Responsivt princip - fra vandret til lodret design – ’Stabling’ ... user first](https://reader033.fdocument.pub/reader033/viewer/2022060604/605881f53bb3b91ca6145207/html5/thumbnails/99.jpg)
Harmonika (eng. accordion) – definition
• Kan trækkes ind og ud som en harmonika
• Et designelement der kan udvides og vise skjult indhold
• Kan bidrage til at løse problemet med at vise meget indhold på lille plads
• Giver overblik og tillader brugeren at gå i detaljer, efter eget valg (progressive disclosure)
• Kræver en interaktionsomkostning: Klik for at åbne skjult indhold
• Men overflødiggør en anden interaktions-omkostning: Scroll
http://www.nngroup.com/articles/mobile-accordions/
![Page 100: Kæl for ordet Ordet bor i et nyt hus - SDU · Om responsive web design . Illustration: NN Group Responsivt princip - fra vandret til lodret design – ’Stabling’ ... user first](https://reader033.fdocument.pub/reader033/viewer/2022060604/605881f53bb3b91ca6145207/html5/thumbnails/100.jpg)
Harmonika (eng. accordion)
Harmonikaens fordele:
• Overblik – fortæller brugeren i eet blik hvad en side indeholder
• Direkte adgang – til indhold af særlig interesse for brugeren
• Mental model – viser tydelig struktur, som letter navigation af indhold, og som let kan huskes
Harmonikaens ulempler:
• Skjult indhold – hvad der ikke ses øjeblikkeligt, ses slet ikke
• Kræver aktiv brugermedvirken – der er altid et klik mellem bruger og indhold
http://www.nngroup.com/articles/mobile-accordions/
![Page 101: Kæl for ordet Ordet bor i et nyt hus - SDU · Om responsive web design . Illustration: NN Group Responsivt princip - fra vandret til lodret design – ’Stabling’ ... user first](https://reader033.fdocument.pub/reader033/viewer/2022060604/605881f53bb3b91ca6145207/html5/thumbnails/101.jpg)
Eksempel VIA University College - http://www.via.dk/uddannelser/sundhed-og-omsorg/bioanalytiker
Tekstmodel (indholdstype): Ren harmonika
Teaser / underoverskrift √
Ingen synlig tekst – Al
information findes i harmomika √
Harmonika √
Overskrifter √
Overskrift for harmonika √
![Page 102: Kæl for ordet Ordet bor i et nyt hus - SDU · Om responsive web design . Illustration: NN Group Responsivt princip - fra vandret til lodret design – ’Stabling’ ... user first](https://reader033.fdocument.pub/reader033/viewer/2022060604/605881f53bb3b91ca6145207/html5/thumbnails/102.jpg)
Tekstmodel harmonika sorø
![Page 103: Kæl for ordet Ordet bor i et nyt hus - SDU · Om responsive web design . Illustration: NN Group Responsivt princip - fra vandret til lodret design – ’Stabling’ ... user first](https://reader033.fdocument.pub/reader033/viewer/2022060604/605881f53bb3b91ca6145207/html5/thumbnails/103.jpg)
Tekstmodel (indholdstype): Kombineret harmonika: Primær og sekundær information
Eksempel Sorø Kommune - http://soroe.dk/affald,-kloak-og-miljoe/bjoerneklo
![Page 104: Kæl for ordet Ordet bor i et nyt hus - SDU · Om responsive web design . Illustration: NN Group Responsivt princip - fra vandret til lodret design – ’Stabling’ ... user first](https://reader033.fdocument.pub/reader033/viewer/2022060604/605881f53bb3b91ca6145207/html5/thumbnails/104.jpg)
Harmonika (eng. accordion)
Anbefaling vedrørende harmonika:
• Overskrift – beskrivende, lang overskrift med nøgleord (op til 55 tegn)
• Underoverskrift/resumé – sammenfatter sidens indhold og budskab (120-140 tegn)
• Eller:
• Primær information – vigtigste informationer og budskaber i synlig tekst i 3-7 punkter (Sorø-model)
• Harmonika
• Klart afgrænsede, ikke overlappende emner
• Kort tekst med struktur
• Beskrivende, lange mellemoverskrifter med nøgleord (op til 40 tegn)
![Page 105: Kæl for ordet Ordet bor i et nyt hus - SDU · Om responsive web design . Illustration: NN Group Responsivt princip - fra vandret til lodret design – ’Stabling’ ... user first](https://reader033.fdocument.pub/reader033/viewer/2022060604/605881f53bb3b91ca6145207/html5/thumbnails/105.jpg)
105
Lang tekst – lang tekst er en udfordring for svage eller langsomme læsere Eksempel harmonika – Kdak.dk
![Page 106: Kæl for ordet Ordet bor i et nyt hus - SDU · Om responsive web design . Illustration: NN Group Responsivt princip - fra vandret til lodret design – ’Stabling’ ... user first](https://reader033.fdocument.pub/reader033/viewer/2022060604/605881f53bb3b91ca6145207/html5/thumbnails/106.jpg)
Tekstmodel Sorø – Bliv medlem - Finansforbundet
![Page 107: Kæl for ordet Ordet bor i et nyt hus - SDU · Om responsive web design . Illustration: NN Group Responsivt princip - fra vandret til lodret design – ’Stabling’ ... user first](https://reader033.fdocument.pub/reader033/viewer/2022060604/605881f53bb3b91ca6145207/html5/thumbnails/107.jpg)
Tekstmodel Sorø – landingsside - Friskoler
![Page 108: Kæl for ordet Ordet bor i et nyt hus - SDU · Om responsive web design . Illustration: NN Group Responsivt princip - fra vandret til lodret design – ’Stabling’ ... user first](https://reader033.fdocument.pub/reader033/viewer/2022060604/605881f53bb3b91ca6145207/html5/thumbnails/108.jpg)
Tekstmodel udvidelse
![Page 109: Kæl for ordet Ordet bor i et nyt hus - SDU · Om responsive web design . Illustration: NN Group Responsivt princip - fra vandret til lodret design – ’Stabling’ ... user first](https://reader033.fdocument.pub/reader033/viewer/2022060604/605881f53bb3b91ca6145207/html5/thumbnails/109.jpg)
Tekstmodel udvidelse
![Page 110: Kæl for ordet Ordet bor i et nyt hus - SDU · Om responsive web design . Illustration: NN Group Responsivt princip - fra vandret til lodret design – ’Stabling’ ... user first](https://reader033.fdocument.pub/reader033/viewer/2022060604/605881f53bb3b91ca6145207/html5/thumbnails/110.jpg)
Tekstmodel plus (+)
![Page 112: Kæl for ordet Ordet bor i et nyt hus - SDU · Om responsive web design . Illustration: NN Group Responsivt princip - fra vandret til lodret design – ’Stabling’ ... user first](https://reader033.fdocument.pub/reader033/viewer/2022060604/605881f53bb3b91ca6145207/html5/thumbnails/112.jpg)
Tekstmodel plus (+)
![Page 113: Kæl for ordet Ordet bor i et nyt hus - SDU · Om responsive web design . Illustration: NN Group Responsivt princip - fra vandret til lodret design – ’Stabling’ ... user first](https://reader033.fdocument.pub/reader033/viewer/2022060604/605881f53bb3b91ca6145207/html5/thumbnails/113.jpg)
SAMTALE
RESPONSIVE MODELLER
5 minutters snak: Kan du bruge disse modeller? Fordele – ulemper
Kort opsamling i plenum
Foto: Flickr
![Page 114: Kæl for ordet Ordet bor i et nyt hus - SDU · Om responsive web design . Illustration: NN Group Responsivt princip - fra vandret til lodret design – ’Stabling’ ... user first](https://reader033.fdocument.pub/reader033/viewer/2022060604/605881f53bb3b91ca6145207/html5/thumbnails/114.jpg)
Indholdsmodellering Content modelling
114
![Page 115: Kæl for ordet Ordet bor i et nyt hus - SDU · Om responsive web design . Illustration: NN Group Responsivt princip - fra vandret til lodret design – ’Stabling’ ... user first](https://reader033.fdocument.pub/reader033/viewer/2022060604/605881f53bb3b91ca6145207/html5/thumbnails/115.jpg)
Content modelling som et hus Indholdsmodel = hus Indholdstype = rum Indholdselement = møbel
Indholdsmodel – vi bygger et hus
![Page 116: Kæl for ordet Ordet bor i et nyt hus - SDU · Om responsive web design . Illustration: NN Group Responsivt princip - fra vandret til lodret design – ’Stabling’ ... user first](https://reader033.fdocument.pub/reader033/viewer/2022060604/605881f53bb3b91ca6145207/html5/thumbnails/116.jpg)
Indholdsmodel – ’huset’ = Om virksomheden
http://c2it.dk/om-c2it/medarbejdere.aspx
Indholdsmodel – Om virksomheden
• Medarbejdere (indholdstype)
• Socialt ansvar
• Fakta
• Support
• Salgsbetingelser
• Nyheder
![Page 117: Kæl for ordet Ordet bor i et nyt hus - SDU · Om responsive web design . Illustration: NN Group Responsivt princip - fra vandret til lodret design – ’Stabling’ ... user first](https://reader033.fdocument.pub/reader033/viewer/2022060604/605881f53bb3b91ca6145207/html5/thumbnails/117.jpg)
Indholdstype - Rummet – Om en medarbejder
http://c2it.dk/om-c2it/medarbejdere.aspx
![Page 118: Kæl for ordet Ordet bor i et nyt hus - SDU · Om responsive web design . Illustration: NN Group Responsivt princip - fra vandret til lodret design – ’Stabling’ ... user first](https://reader033.fdocument.pub/reader033/viewer/2022060604/605881f53bb3b91ca6145207/html5/thumbnails/118.jpg)
Indholdselementer - Møbler – Fakta i bestemt form og format
http://c2it.dk/om-c2it/medarbejdere.aspx
Indholdselementer:
• Billede
• Navn
• Kontaktdata
• LinkedIn-link
• Beskrivelse
![Page 119: Kæl for ordet Ordet bor i et nyt hus - SDU · Om responsive web design . Illustration: NN Group Responsivt princip - fra vandret til lodret design – ’Stabling’ ... user first](https://reader033.fdocument.pub/reader033/viewer/2022060604/605881f53bb3b91ca6145207/html5/thumbnails/119.jpg)
Indholdsmodel består af moduler (’LEGO-klodser’) = fleksibilitet
http://c2it.dk/om-c2it/medarbejdere.aspx
Elementet ’beskrivelse’
er koblet af ved mobil
visning?
Ja og nej! Det ’gemmer’
sig fleksibelt - og kan
kaldes frem ved et tryk
![Page 120: Kæl for ordet Ordet bor i et nyt hus - SDU · Om responsive web design . Illustration: NN Group Responsivt princip - fra vandret til lodret design – ’Stabling’ ... user first](https://reader033.fdocument.pub/reader033/viewer/2022060604/605881f53bb3b91ca6145207/html5/thumbnails/120.jpg)
Eksempel webnyhedsmodel (SDU.dk)
http://www.sdu.dk/nyheder/nyt_fra_sdu/ny+rektor
![Page 121: Kæl for ordet Ordet bor i et nyt hus - SDU · Om responsive web design . Illustration: NN Group Responsivt princip - fra vandret til lodret design – ’Stabling’ ... user first](https://reader033.fdocument.pub/reader033/viewer/2022060604/605881f53bb3b91ca6145207/html5/thumbnails/121.jpg)
![Page 122: Kæl for ordet Ordet bor i et nyt hus - SDU · Om responsive web design . Illustration: NN Group Responsivt princip - fra vandret til lodret design – ’Stabling’ ... user first](https://reader033.fdocument.pub/reader033/viewer/2022060604/605881f53bb3b91ca6145207/html5/thumbnails/122.jpg)
Indholdstype med mindre fleksibilitet – Eksempel: Universe.ida.dk
https://universe.ida.dk/event/saadan-virker-deleoekonomi-i-den-digitale-fremtid/
Emne og fakta
er begge synlige
i top af siden ved
visning på
computer
Emne og fakta
er begge synlige
i top af siden ved
visning på
computer
![Page 123: Kæl for ordet Ordet bor i et nyt hus - SDU · Om responsive web design . Illustration: NN Group Responsivt princip - fra vandret til lodret design – ’Stabling’ ... user first](https://reader033.fdocument.pub/reader033/viewer/2022060604/605881f53bb3b91ca6145207/html5/thumbnails/123.jpg)
Indholdstype med mindre fleksibilitet – Eksempel: Universe.ida.dk
https://universe.ida.dk/event/saadan-virker-deleoekonomi-i-den-digitale-fremtid/
Emne og fakta
er begge synlige
i top af siden ved
visning på
computer
Fakta rykker ned
under den lange
beskrivelse ved
mobil visning –
fordi indholdet
ikke er findelt
![Page 124: Kæl for ordet Ordet bor i et nyt hus - SDU · Om responsive web design . Illustration: NN Group Responsivt princip - fra vandret til lodret design – ’Stabling’ ... user first](https://reader033.fdocument.pub/reader033/viewer/2022060604/605881f53bb3b91ca6145207/html5/thumbnails/124.jpg)
Indholdstype med stor fleksibilitet – Konstrueret eksempel: Universe.ida.dk
https://universe.ida.dk/event/saadan-virker-deleoekonomi-i-den-digitale-fremtid/
Emne og fakta
er begge synlige
i top af siden ved
visning på
computer
Mere hensigts-
mæssig visning på mobil – Fordi
indholdet er
organiseret i
fleksible elementer,
der kan kombineres
på flere måder
![Page 125: Kæl for ordet Ordet bor i et nyt hus - SDU · Om responsive web design . Illustration: NN Group Responsivt princip - fra vandret til lodret design – ’Stabling’ ... user first](https://reader033.fdocument.pub/reader033/viewer/2022060604/605881f53bb3b91ca6145207/html5/thumbnails/125.jpg)
Fremtid: Modulært indhold i forhold til apparater
https://universe.ida.dk/event/saadan-virker-deleoekonomi-i-den-digitale-fremtid/
Indholdstype komplet til desktop, laptop, mobil, tablet
Indholdselementer ’overskrift’ + ’fakta’ fx til ur og infoskærm
og køleskab
+
![Page 126: Kæl for ordet Ordet bor i et nyt hus - SDU · Om responsive web design . Illustration: NN Group Responsivt princip - fra vandret til lodret design – ’Stabling’ ... user first](https://reader033.fdocument.pub/reader033/viewer/2022060604/605881f53bb3b91ca6145207/html5/thumbnails/126.jpg)
Modulært indhold i forhold til kanaler
https://universe.ida.dk/event/saadan-virker-deleoekonomi-i-den-digitale-fremtid/
Indholdstype komplet til website + elevintra + skoleintra +
forældreintra + bestyrelsesintra
Indholdselementer ’overskrift’ + ’resumé’ + link til …
Indholdselementer ’overskrift’ + link til …
![Page 127: Kæl for ordet Ordet bor i et nyt hus - SDU · Om responsive web design . Illustration: NN Group Responsivt princip - fra vandret til lodret design – ’Stabling’ ... user first](https://reader033.fdocument.pub/reader033/viewer/2022060604/605881f53bb3b91ca6145207/html5/thumbnails/127.jpg)
Billeder i responsiv web
127
![Page 128: Kæl for ordet Ordet bor i et nyt hus - SDU · Om responsive web design . Illustration: NN Group Responsivt princip - fra vandret til lodret design – ’Stabling’ ... user first](https://reader033.fdocument.pub/reader033/viewer/2022060604/605881f53bb3b91ca6145207/html5/thumbnails/128.jpg)
Billeder i responsivt design
http://www.smashingmagazine.com/2013/07/08/choosing-a-responsive-image-solution/
![Page 129: Kæl for ordet Ordet bor i et nyt hus - SDU · Om responsive web design . Illustration: NN Group Responsivt princip - fra vandret til lodret design – ’Stabling’ ... user first](https://reader033.fdocument.pub/reader033/viewer/2022060604/605881f53bb3b91ca6145207/html5/thumbnails/129.jpg)
Foto – Donate – Obama presidential campaign 2012 (Adaptive) Rullebillede i responsivt design
![Page 130: Kæl for ordet Ordet bor i et nyt hus - SDU · Om responsive web design . Illustration: NN Group Responsivt princip - fra vandret til lodret design – ’Stabling’ ... user first](https://reader033.fdocument.pub/reader033/viewer/2022060604/605881f53bb3b91ca6145207/html5/thumbnails/130.jpg)
Tabel – valutakurser – Jyske Bank (reduktion)
http://www.jyskebank.dk/produkter/valuta/kurser
![Page 131: Kæl for ordet Ordet bor i et nyt hus - SDU · Om responsive web design . Illustration: NN Group Responsivt princip - fra vandret til lodret design – ’Stabling’ ... user first](https://reader033.fdocument.pub/reader033/viewer/2022060604/605881f53bb3b91ca6145207/html5/thumbnails/131.jpg)
Informationsgrafik og tabel - Eksempel
http://www.informed-design.com/responsive/chart/