Start small, think big - Responsive Web Design
-
Upload
intuio-user-experience-consulting -
Category
Design
-
view
1.695 -
download
1
description
Transcript of Start small, think big - Responsive Web Design
Responsive Web DesignWUD 12
Big
StartSmallThink
Thomas Piribauer
CEO / UXDintuio User ExperienceConsulting GmbH
Twitter@tpiribauer
Webhttp://intuio.at
Stmk
Rockstar
Erfinder
not me
Mensch Maschine Kommunikation
usable
experience
Use rExpe r i ence !
AmsterdamSchiphol
- 80%
Spaß
You can't just ask customers what they want and then try to give that to them.By the time you get it built, they'll want something new.
”
© 2012 www.intuio.at
viele
jederzeit
überall
jede(r)
http://www.mequoda.com/articles/new-media-trends/web-usage-prediction-when-mobile-and-desktop-collide/
0
500
1000
1500
2000
2007 2008 2009 2010 2011 2012 2013 2014 2015
Mobile Internetnutzer Desktop Internetnutzer
2013
2015
http://bdconf.com/docs/convince_your_boss.pdf
There will be one mobile phone for every person on earth.
1. Nichts
a1.net oebb.at omv.com orf.at
1. Nichts
halten die mobile Nutzbarkeit ihrer Website für wichtig
81%
Fonda 2010
aller österreichischen Unternehmen
8haben eine mobile Website
%
Fonda 2010
aller österreichischen Unternehmen
E ine App fü r s
iPad 1 ,2 , 3 ,
M in iE i ne App fü r a l l e And ro i d Tab le t s
E ine App fü r
W indows
PhonesE ine iPhone
App
E ine B lackbe r r y
App
E ine
And ro i d App
E ine App fü r
Symb ian
Smar tphones
2. Apps
150x täglich schaut eine Person im Durchschnitt auf ihr Handy.
Was sieht sie sich an?
Selten eine App.68% aller Smartphone-Besitzer nutzen nur 5 oder weniger Apps regelmäßig.
http://www.lukew.com/!/entry.asp?1501
48%
26%
26%
App wird nur 1 mal genutzt
App wird 11 mal oder mehr genutzt
App wird nur 2-10 mal genutzt
Wie häufig werden Apps genutzt?
Mobile Webseite
SMS Service
App für iPhone
App für Blackberry
37,9%
21,6%
21,6%
18,9%
http://www.lukew.com/!/entry.asp?1413
Mobile Webseite
App für iPhone
App für Android
App für Blackberry
60%14%
12%
14%
@jamespearce #qconsf 07.11.2012
https://twitter.com/firt/status/266278622376099841
Von allen Smartphone Nutzern
95%auf ihrem Telefon nach einem Produkt oder einer Dienstleistung gesucht.
haben
50%Unternehmen mit einem schlechten mobilen Webauftritt nicht an Freunde weiter.
empfehlen
79%Werbung auf mobilen Webseiten wahr, jedoch nur 38% in einer App.
nehmen
Google Studie zusammen mit Ipsos OTX MediaCT, Mai 2012Compuware "What Users Want from Mobile" 2011
mobil.derstandard.at mobil.zeit.de mobil.post.at m.sparkasse.at
3. Sites
op t im ie r t f ü r
Smar t phones
j edoch n i ch t
op t im ie r t f ü r
Tab le t s
post.at
s ta t t dessen w i r d d i e he r kömml i che Webse i t e angeze ig t
mobil.post.at!
Zwe i ve r sch i edene Webse i t en
3. Sites
mobil.post.at
3. Sites
zeit.de spiegel.de
3. Sites
zeit.de m.spiegel.de
Fü r Desk tops
abe r auch f ü r Tab le t s
und f ü r Smar t phones
. . . und e i gen t l i ch f ü r a l l e ande ren
Ge rä te auch .
Eine Webseite,
die sich jeder Größe anpasst
http://www.bostonglobe.com
und dabei auf jedem Display gut aussieht.
bostonglobe.com
=bostonglobe.com
bostonglobe.com
=
Nur e i ne Webse i t e !
So wie diese
clearairchallenge.com dribbble.com
und natürlichunsere eigene.
Only the true Messiah denies His divinity
1. Users First
2. Content First
Content precedes design. Design in the absence of content is not design,it‘s decoration.
”— Jeffrey Zeldman
3. Mobile First
Client, sei flexibel
CSS Mediaqueries / Flexibles LayoutGrößere Anpassungen werden an definierten Breiten vorgenommen
Fluid ImagesBilder füllen den maximal verfügbaren Platz
Responsive TypographySchriften werden relativ in em oder rem definiertund für alle Displaygrößen optimal angepasst
Wireframes do not work anymore.”
— Mark Boulton @ Fronteers 12
Design WorkflowAlles auf PapierDie Content- und Layout-Struktur mit möglichen Breakpoints wird grob gezeichnet, am besten mit Papier und Bleistift oder auf Whiteboards
Mobile-First im BrowserSemantische HTML-Struktur, Echtdaten und keine Lorem Ipsums, CSS Stile und Animationen, Interaktivität mit JavaScript / jQuery
Style-Tiling im GrafikprogrammDer visuelle Stil für die verwendeten Elemente wird in einem Grafikprogramm gestaltet und schrittweise via CSS in den HTML-Prototyp integriert
4. Performance First
60%
Compuware "What Users Want from Mobile" 2011
< 3 sec.
Server, sei wachsam
Feature Detection / CookiesDer Server identifiziert die Features von Gerät und Browser z.B. via DeviceAtlas
Scaled MediaBilder werden entsprechend der erwarteten Bildschirmgröße skaliert und dann erst verschickt
Custom HTML, CSS & JavaScriptDer Server liefert die notwendige HTML Struktur und nur tatsächlich benötigte CSS und JavaScript Dateien
SMACSS
Tech Slide
future friendly
Stay
http://futurefriend.ly
future friendly
Stay
http://futurefriend.ly
@xon1c@tpir ibauer @intuio
Say hi.
Danke.Pre
senta
tion S
lides
Sleeping Audience Members© Jessica Hagy
http://www.mequoda.com/wp-content/uploads/ui/2testing.gif
http://fc08.deviantart.net/fs50/f/2009/276/1/c/VectorLandscape_by_Kara1984.jpg
http://fc08.deviantart.net/fs50/f/2009/276/1/c/VectorLandscape_by_Kara1984.jpg
http://www.extremetech.com/wp-content/uploads/2012/10/felix-baumgartner-standing-in-his-capsule-about-to-dive.jpg
http://markgorman.files.wordpress.com/2008/07/who-are-they.gif
http://www.shugarecords.com/Images/Products/Large/429506b6-6687-490a-9a9e-26f41ec6a660-0.JPG
http://stigmalitia.com/blog/wp-content/uploads/2011/09/nevermind-then1.jpg
http://tabtimes.com/sites/default/files/jakob_composite%20(1).jpg
http://www.leadership-with-you.com/images/stevejobs.jpg
http://www.urinal.net/schiphol/Slovenia015.med.jpg
http://www.urinalfly.com/images/easy.gif
http://ecx.images-amazon.com/images/I/51TEZZT9YQL._SL500_AA300_.jpg
http://www.flickr.com/photos/brad_frost/7387560446/sizes/l/in/photostream/
http://www.flickr.com/photos/naturestenacity/7290398164/sizes/l/in/photostream/
http://www.flickr.com/photos/cozyta/6646234513/sizes/l/in/photostream/
http://i.telegraph.co.uk/multimedia/archive/02023/followers_2023036i.jpg
http://www.flickr.com/photos/9038210@N07/2088573006/sizes/z/in/photostream/
http://images4.fanpop.com/image/photos/23400000/KISS-kiss-guitarists-23448774-1024-768.jpg
http://smashed.by/davidjones
http://www.flickr.com/photos/lyza/49545547
http://www.flickr.com/photos/hermida/5442243540/sizes/l/in/photostream/
http://www.touchtip.com/iphone/quickly-email-a-task-using-iphone-highrise/
http://rallyhaus.com/the-cars-of-agent-007-james-bond
http://www.flickr.com/photos/bluesoft/4765555124/sizes/l/in/photostream//
http://www.flickr.com/photos/henrybloomfield/6772345145/sizes/l/in/photostream/
http://bukk.it/obama.png
Image Credits