Kæl for ordet Ordet bor i et nyt hus - SDU · Om responsive web design . Illustration: NN Group...
132
Kæl for ordet Ordet bor i et nyt hus
Transcript of Kæl for ordet Ordet bor i et nyt hus - SDU · Om responsive web design . Illustration: NN Group...
Kæl for ordet Ordet bor i et nyt hus
A4 format iPhone 4S
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?
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
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
1. Apparateksplosionen (hardware)
7
Smarte telefoner før iPhone – 2000’nullerne
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)
Smarte telefoner før iPhone
”Plastic keybords take up 40 percent of space whether you need them or not.”
iPhone – ”A giant screen” with multi-touch interface
iPhone – ”A giant screen” with multi-touch interface
Mediet: Fra trykpresse og bog til computerskærm til ……
…. Apparateksplosionen- hundredevis af apparater for indhold og læsning
Foto: Brad Frost
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
Web og indhold overalt i to faser (hardware)
Desktop Laptop Mobil
Tablet
Spilstation
Fitness Ur Køkkenbord
Køleskab
Smartboard
Infotavle
2015
2020
233 anvendte mobile enheder – VIA juli-august 2014
Apparatbrug professionshøjskolen VIA (Aarhus) 2011-2015 – Responsiv web 1. februar 2015
Apparatbrug professionshøjskolen VIA – Siden responsiv lancering 2. februar – 24. maj 2015
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
http://shop.volkswagen.dk/shop/golf-smartphone-handsker-642p.html
Luke Wroblewski, One Design, 2013
PORTABLE COMPUTER DESKTOP COMPUTER
Apparater og spredning af skærmstørrelser
Luke Wroblewski, One Design, 2013
Iphone 4 Iphone 6 Juni 2010 Oktober 2014
Apparater og spredning af skærmstørrelser
SAMTALE
APPARATERNE
5 minutters snak: Hvad betyder apparaterne for din dagligdag, privat og professionelt?
Kort opsamling i plenum
Foto: Flickr
2. Åben eller lukket infokultur (software)
28
29
Fra 21. april 2015: Google straffer ikke-mobilvenlige sites
http://googlewebmastercentral.blogspot.dk/2015/02/finding-more-mobile-friendly-search.html
Sdu.dk Apps
37
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
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
M-dot – mobilt website - med reduceret indhold
xxx
App
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.
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
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
Illustration: NN Group
Responsivt princip - fra vandret til lodret design – ’Stabling’
Vandret/lodret princip RWD - KU
http://kommunikation.ku.dk/medarbejderoversigt/
Responsiv web design: Menu - Slut med ’højre’ og ’venstre’
48
Platforme – overblik
Web, traditionel
App
M-dot (mobilsite)
Web, responsiv
IOS Android Windows
IOS Android
+
+
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
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
3. Skriftsprog under forandring (indhold og form)
53
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
Udfordringer på små skærme
55
Mobile udfordringer
• Arbejdshukommelse belastes – (korttidshukommelse) – man skal huske mere
• Opmærksomhed udfordres – urolig, presset brugersituation, ude i det virkelige liv
56
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
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
Principper for responsiv web: Enkelt, prioriteret, struktureret, tydeligt
59
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
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
62
Lang tekst – lang tekst er en udfordring for svage eller langsomme læsere Enkelhed – den omvendte U-kurve
64
Fokus på brugerne?
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.
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)
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
Struktur i tekst - Klassisk site på mobil
68
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
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
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
72
Afsnit
Afsnit
Afsnit
Afsnit
Webnyhedsformat Multi: Eksempel BBC News – korte afsnit
Afsnit
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
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
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
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
Sætningsstruktur: Nærhed mellem grundled og udsagnsled i sætning
77
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
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
Tydelig overskrift? - KU
http://studier.ku.dk/kandidat/agronomi/faglig-profil-og-job/
81
Lang tekst – lang tekst er en udfordring for svage eller langsomme læsere Eksempel tydelig? – Kdak.dk
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 √
Rubriktydelighed: Metodebeskrivelse (DR.dk)
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
Tydelighed: Side og emne - overskrift – Eksempel: Kk.dk
Prisliste for kørekort
Prisliste for kørekort
87
Tydelighed: Site - overskrift og mellemoverskrifter – Eksempel: Apotekerforeningen.dk
Om Apotekerforeningen
Apotekerforeningens medlemmer og bestyrelse
Apotekerforeningens sekretariat
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
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
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
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
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
SAMTALE
PRINCIPPER
5 minutters snak: Giver principper for responsiv tekst mening?
Kort opsamling i plenum
Foto: Flickr
Responsive tekstmodeller
95
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/
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/
Tekstmodel harmonika
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/
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/
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 √
Tekstmodel harmonika sorø
Tekstmodel (indholdstype): Kombineret harmonika: Primær og sekundær information
Eksempel Sorø Kommune - http://soroe.dk/affald,-kloak-og-miljoe/bjoerneklo
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)
105
Lang tekst – lang tekst er en udfordring for svage eller langsomme læsere Eksempel harmonika – Kdak.dk
Tekstmodel Sorø – Bliv medlem - Finansforbundet
Tekstmodel Sorø – landingsside - Friskoler
Tekstmodel udvidelse
Tekstmodel udvidelse
Tekstmodel plus (+)
Tekstmodel plus (+)
SAMTALE
RESPONSIVE MODELLER
5 minutters snak: Kan du bruge disse modeller? Fordele – ulemper
Kort opsamling i plenum
Foto: Flickr
Indholdsmodellering Content modelling
114
Content modelling som et hus Indholdsmodel = hus Indholdstype = rum Indholdselement = møbel
Indholdsmodel – vi bygger et hus
Indholdsmodel – ’huset’ = Om virksomheden
http://c2it.dk/om-c2it/medarbejdere.aspx
Indholdsmodel – Om virksomheden
• Medarbejdere (indholdstype)
• Socialt ansvar
• Fakta
• Support
• Salgsbetingelser
• Nyheder
Indholdstype - Rummet – Om en medarbejder
http://c2it.dk/om-c2it/medarbejdere.aspx
Indholdselementer - Møbler – Fakta i bestemt form og format
http://c2it.dk/om-c2it/medarbejdere.aspx
Indholdselementer:
• Billede
• Navn
• Kontaktdata
• LinkedIn-link
• Beskrivelse
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
Eksempel webnyhedsmodel (SDU.dk)
http://www.sdu.dk/nyheder/nyt_fra_sdu/ny+rektor
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
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
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
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
+
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 …
Billeder i responsiv web
127
Billeder i responsivt design
http://www.smashingmagazine.com/2013/07/08/choosing-a-responsive-image-solution/
Foto – Donate – Obama presidential campaign 2012 (Adaptive) Rullebillede i responsivt design
Tabel – valutakurser – Jyske Bank (reduktion)
http://www.jyskebank.dk/produkter/valuta/kurser
Informationsgrafik og tabel - Eksempel
http://www.informed-design.com/responsive/chart/
