62
RESPONSIVE DESIGN Hvordan ser dit website ud på en smartphone?

Pentia - Responsive Design

Embed Size (px)

DESCRIPTION

Præsentation fra morgenmøde d. 9. maj 2012 hos Pentia.

Citation preview

Page 1: Pentia - Responsive Design

RESPONSIVE DESIGN Hvordan ser dit website ud på en smartphone?

Page 2: Pentia - Responsive Design

HVORFOR RESPONSIVE DESIGN?

Fakta • App’s hypen er aftagende.

• Det verdensomspændende salg af smartphones overstiger nu antallet af solgte PC’ere.

• Eksperter forudser at i slutning af 2012 kommer 30-40% af internettrafik via smartphones og tablets.

Med andre ord…

Page 3: Pentia - Responsive Design

HVOR ER BRUGERNE?

Page 4: Pentia - Responsive Design

ALLE VEGNE, ALLE DEVICES, HELE TIDEN

Page 5: Pentia - Responsive Design

SITECORE SPECIALISTER MED FORRETNINGSFORSTÅELSE

Markedets bedste kundetilpassede digitale løsninger baseret på Sitecore

Vi forstår også din forretning og har fokus på løsninger, som løfter forretningen og letter arbejdsgange.

Digital

Strategi

Design og IA

Udvikling og

Integration

Service og

Support

Projektledelse

Customer

Engagement

Pentia Professionel Service

Ekspertrådgivning

Page 6: Pentia - Responsive Design

PROGRAM

08.45-09.15 Morgenmad og velkommen

09.15-10.00 Et indblik i Responsive Design

10.00-10.15 Pause

10.15-10.55 Rejsekort.dk fortæller om deres brug af Responsive Design

10.55-11.00 Afrunding

Page 7: Pentia - Responsive Design

RESPONSIVE DESIGN Hvordan ser dit website ud på en smartphone?

Et indblik i Responsive Design

Page 8: Pentia - Responsive Design

Kan dit website overleve Pantheon?

Page 9: Pentia - Responsive Design

HVAD ER RWD?

Et design, der tilpasser sig forskellige skærmstørrelser – defineret af skærmopløsning.

Page 10: Pentia - Responsive Design
Page 11: Pentia - Responsive Design
Page 12: Pentia - Responsive Design
Page 13: Pentia - Responsive Design
Page 14: Pentia - Responsive Design
Page 15: Pentia - Responsive Design

Fincancial Times, 2011

Page 16: Pentia - Responsive Design
Page 17: Pentia - Responsive Design
Page 18: Pentia - Responsive Design

ELLER …

Page 19: Pentia - Responsive Design

Udnyt hardware App Store Meget specifik Push-beskeder Meget specfikke devices

Page 20: Pentia - Responsive Design
Page 21: Pentia - Responsive Design
Page 22: Pentia - Responsive Design

Udvalgt indhold Særlig målgruppe Særlig brug Mobile devices

Page 23: Pentia - Responsive Design
Page 24: Pentia - Responsive Design
Page 25: Pentia - Responsive Design

• Udnytter ikke mobilens hardware • Ikke begrænset målgruppe • Ikke task-specifik

Page 26: Pentia - Responsive Design
Page 27: Pentia - Responsive Design

Udvalgt indhold Særlig målgruppe Særlig brug Mobile devices

Page 28: Pentia - Responsive Design

Samme indhold Samme målgruppe Samme brug Alle devices

Page 29: Pentia - Responsive Design
Page 30: Pentia - Responsive Design
Page 31: Pentia - Responsive Design

Effektivitet Virkelighed

Fleksibilitet

RWD

Page 32: Pentia - Responsive Design
Page 33: Pentia - Responsive Design

Sitecore

Data

Præsentation

Sitecore

Data

Præsentation

Sitecore

Data

Præsentation

Page 34: Pentia - Responsive Design

IA-UDFORDRINGER

… samme kat. Mindre kasse.

Page 35: Pentia - Responsive Design
Page 36: Pentia - Responsive Design

”En bruger googler sig frem til vores side om … ”

Page 37: Pentia - Responsive Design

www.mitwebsite.dk

Page 38: Pentia - Responsive Design

www.mitwebsite.dk

Page 39: Pentia - Responsive Design
Page 40: Pentia - Responsive Design

ORGANISATORISK ANSVAR

• Webstrategien udstikker ansvar

• Har redaktøren mandat til at prioritere?

Page 41: Pentia - Responsive Design

RESPONSIVE DESIGN Hvordan ser dit website ud på en smartphone?

Hvad gør vi i praksis?

Page 42: Pentia - Responsive Design
Page 43: Pentia - Responsive Design
Page 44: Pentia - Responsive Design
Page 45: Pentia - Responsive Design
Page 46: Pentia - Responsive Design
Page 47: Pentia - Responsive Design
Page 48: Pentia - Responsive Design
Page 49: Pentia - Responsive Design
Page 50: Pentia - Responsive Design
Page 51: Pentia - Responsive Design
Page 52: Pentia - Responsive Design
Page 56: Pentia - Responsive Design
Page 57: Pentia - Responsive Design
Page 58: Pentia - Responsive Design
Page 59: Pentia - Responsive Design
Page 60: Pentia - Responsive Design
Page 61: Pentia - Responsive Design
Page 62: Pentia - Responsive Design