If you can't read please download the document
Upload
anna-dahlstroem
View
462
Download
0
Embed Size (px)
DESCRIPTION
Slides from my talk at Webbdagarna Växjö on the 4 December 2014. http://www.webbdagarna.se/vaxjo-2014/program Video (in Swedish): http://internetworld.idg.se/2.1006/1.600683/responsivt---inte-bara-for-mobilen Abstract: Responsiv design ses av många som ett sätt att anpassa sina sajter till att användare surfar på mobilen eller surfplattan. Men responsivt är mycket mer än så. Det är ett sätt att framtidssäkra sina digitala tjänster för en framtid med nya enheter av alla olika storlekar.
Citation preview
Image courtesy of Shutterstock
Responsivt - inte bara fr mobilenAnna Dahlstrm | @annadahlstrom Webbdagarna Vxj, 04 december 2014 #webbdagarna
www.flickr.com/photos/activeside/2192411612
Innan 2007 handlade det mest om det hr
Det var nr webblsare var vrt strsta huvudbry
www.flickr.com/photos/jorgeq82/4732700819
Idag r det webblsare & ett ondligt antal enheter
www.flickr.com/photos/adactio/12674602864
For the first time ever there are more gadgets in the world than there are people.
- Source: Independent
http://www.businessinsider.com/vatican-square-2005-and-2013-2013-3
Android fragmentation, Screenshot from OpenSignal http://opensignal.com/reports/2014/android-fragmentation/
Android fragmentation, Screenshot from OpenSignal http://opensignal.com/reports/2014/android-fragmentation/
We have seen 18,769 distinct devices download our app in the past few months. In our report last year we saw 11,868.
- Source: Open Signal
www.flickr.com/photos/exlibris/2552107635
!
!
A third of all smartphone users in the U.K.or 11 million adultscheck their phone within five minutes of waking.
- Source: WSJ
Var som helst & Nr som helst
Det r tack varede hr bovarna
https://www.flickr.com/photos/jfingas/10104822523
https://www.flickr.com/photos/bfishadow/4604166391
Just a giant iPhone.
2010Ethan Marcotte, Responsive Web Design
NuDevice Agnostic Design
(enhetsoberoende design)
https://www.flickr.com/photos/jfingas/10104822523
Todays popular devices arent tomorrow's so building something which works on any device is better than
building something which works on todays devices. - Combined wise words from @oneextrapixel & @trentwalton
!
!
!
!
!
!
Any deviceVad innebr det?
The site you build is not dependent on knowing what device it is being displayed on.
- Sarita Harbour, WDD
Image courtesy of Shutterstock
Varkommer det ifrn?
En vidareutveckling av responsive design
www.flickr.com/photos/adactio/5818096043
FULL WEBSITE
FULL WEBSITE
FULL WEBSITE
Responsiva webblsningar har samma url & r i princip en webbplats
http://desktopwallpaper-s.com/19-Computers/-/Future
DESKTOP
FULL WEBSITE
BESPOKE CUT DOWN
WEBSITE
BESPOKE CUT DOWN
WEBSITE
Separata mobila webblsningar har en egen url & innebr olika webbplatser
http://desktopwallpaper-s.com/19-Computers/-/Future
Android fragmentation, Screenshot from OpenSignal http://opensignal.com/reports/2014/android-fragmentation/
Tar oss tillbaka till det hr
Att underhlla separata mobila webblsningar r kostsamt
www.flickr.com/photos/ericconstantineau/5618576278
Olika kodbaser & tekniska lsningar ska uppdateras
www.flickr.com/photos/nikio/3899114449
fr att inte tala om allt innehll
www.flickr.com/photos/financialaidpodcast/7598618978
samt optimering fr skmotorer
www.flickr.com/photos/financialaidpodcast/7598618978
Realistiskt sett innebr det kompromisser & frustrerade anvndare
www.flickr.com/photos/bulldogsrule/187693681
Menolika innehll r vl ok, eller?
Det bygger p en myt om att mobilanvndare beter sig s hr
Image courtesy of Shutterstock
Mobile Search MoMentSUnderStanding how Mobile driveS converSionS
3 of 4 mobile searches trigger follow-up actions
Mobile searches drive valuable outcomes for businesses
Actions triggered by mobile search also happen very quickly
of conversions (store visit, phone call or purchase) happening within an hour55%
On average, each mobile search triggers nearly 2 follow-up actions
Product & shopping searches have a higher number of outcomesNumber of follow-up actions per mobile search
Mobile search is always on, happening on the go, at home and at work
of mobile searches occur at home or work; 17% on the go77%
2.082.523.56
Travel FoodAutoBeauty Tech
2.072.20
36%
Continued Research
18%
Shared Information
17%
Made a Purchase
25%
Visited a Retailers Website
17%
Visited a Store
7%
Called a Business
0RELOHVHDUFKHVDUHVWURQJO\WLHGWRVSHFLFFRQWH[WVShopping queries are 2x more likely to be in store
Source: http://www.thinkwithgoogle.com/infographics/creating-moments-that-matter-infographic.html
77% av mobilskningar sker i hemmet eller p jobbet
17% av mobilskningarsker on the go
http://www.soi2014.se/internets-spridning-har-inte-helt-stannat-upp/allt-mer-anvandning-av-mobil-teknik-smarta-telefoner-och-surfplattor/
Det kande mobil-anvndandet slr igenom i kad internettid i hemmet och i skolan eftersom en stor del av mobilanvndandet sker i hemmet och skolan via trdlsa ntverk.
Mnga av oss ger fler n en enhet
http://www.soi2014.se/internets-spridning-har-inte-helt-stannat-upp/allt-mer-anvandning-av-mobil-teknik-smarta-telefoner-och-surfplattor/
53% har en surfplatta
73% har en smart mobil
Morgon Pendling Jobb Lunch Mte AW Film
Vi vxlar mellan dem under dagen
Commute
Sequential usage
Morning Work
90% of users start a task on one device and then complete it on another. - Source: Google
Simultaneous usage
+
Multi-taskingOR
Commute
Sequential usage
Morning Work
90% of users start a task on one device and then complete it on another. - Source: Google
Simultaneous usage
+
Multi-tasking
+
Extending
OR
Commute
Sequential usage
Morning Work
90% of users start a task on one device and then complete it on another. - Source: Google
Simultaneous usage
+
Multi-tasking
+
Extending
+
Complementing
OR
www.flickr.com/photos/sixmilliondollardan/2493495506
En dlig upplevelse leder till samma resultat, oavsett var den sker
www.flickr.com/photos/sixmilliondollardan/2493495506
Not having a mobile-friendly site helps your competitors. - Google
Starting today, to make it easier for people to find the information that theyre looking for, were adding a mobile-friendly label to our mobile search results.
- Google, 18 Nov 2014
http://googlewebmastercentral.blogspot.co.uk/2014/11/helping-users-find-mobile-friendly-pages.html
Starting today, to make it easier for people to find the information that theyre looking for, were adding a mobile-friendly label to our mobile search results.
- Google, 18 Nov 2014
http://googlewebmastercentral.blogspot.co.uk/2014/11/helping-users-find-mobile-friendly-pages.html
https://www.google.com/webmasters/tools/mobile-friendly/
https://www.google.com/webmasters/tools/mobile-friendly/
Andvndare frvntar en enhetlig & kontinuerlig upplevelse oberoende av enhet
www.flickr.com/photos/joachim_s_mueller/7110473339
DESKTOP
FULL WEBSITE
BESPOKE CUT DOWN
WEBSITE
BESPOKE CUT DOWN
WEBSITE
http://desktopwallpaper-s.com/19-Computers/-/Future
Separata mobila webblsningar ger generellt inte mening
Huvudinnehllet br vara det samma, fast optimera upplevelsen, layouten & interaktioner
Image courtesy of Shutterstock
http://foundation.zurb.com/docs/layout.php
Design & development should respond to the users behaviour & environment based on screen size, platform & orientation. [Its]...a mix of flexible grids & layouts, images & an intelligent use of media queries.
- Smashing Magazine
www.flickr.com/photos/donsolo/2136923757/
Responsiv design bygger p moduler
och att definera hur de ska anpassas
Home - stor1 Header& Nav
2Hero
11 Footer
3Category
4 Category
6 Categ
6 Categ
10Prod
9 Prod
8Prod
7Prod
1 Header& Nav
2Hero
10 Footer
3 Category
4 Categ
5 Categ
6 Product
7 Product
8 Product
9 Product
Home - liten
www.flickr.com/photos/theaftershock/2811382400
!
!
!
!
!
Content needs to be choreographed to ensure the intended message is preserved
on any device and at any width - Trent Walton
http://thenextweb.com/
NuDevice Agnostic Design
(enhetsoberoende design)
Responsiv design etablerade principen om samma innehll oberoende av enhet
www.flickr.com/photos/joachim_s_mueller/7110473339
Men Sen 2010 har den genomsnittliga page weighten nstan dubblats
www.flickr.com/photos/stankus/3718835245
Smartphones accounted for 57.6% of total sales in fourth quarter of 2013 *
- Source: Gartner
www.flickr.com/photos/aforgrave/6168689222
Internet uppkopplingr inte alla frunnat
http://gizmodo.com/a-map-of-every-device-in-the-world-thats-connected-to-t-1628171291
Visste du Internet sover faktiskt
http://www.wired.com/2014/10/internet-sleeps-night-really
Visste du Internet sover faktiskt
http://www.wired.com/2014/10/internet-sleeps-night-really
och alla uppkopplingar r inte lika
Screenshot from http://opensignal.com/coverage-maps/UK/
Source: http://www.prnewswire.com/news-releases/strategy-analytics-android-captures-record-85-percent-share-of-global-smartphone-shipments-in-q2-2014-269301171.html
Adaptivedesign
Content layerrich semantic HTML markup
Presentation layerCSS & styling
Client-side scripting layer JavaScript eller jQuery
www.thegrid.io
To get response times to a minimum, weve had to develop a system that loads in just the essential components of the page at the right times. Mobile-sized images download first, then when the pages Javascript detects the browsers capabilities, higher-resolution images get loaded in dynamically. - Andrew Pipe, BBC iWonder
Context
Mobile context & mobile use case likstlls ofta, men det r inte det samma
www.flickr.com/photos/icedsoul/2486885051
Image courtesy of Shutterstockwww.flickr.com/photos/jmsmith000/3169546564
I used to think it merely dealt with basing responsive breakpoints on content rather than particular devices, but theres
more to devices than the size of their screens. - Trent Walton, Device Agnostic
www.flickr.com/photos/lokan/8843464852www.flickr.com/photos/jmsmith000/3169546564
A device-agnostic approach also takes into account infinite combinations of screen resolution, input
method, browser capability, and connection speed. - Trent Walton, Device Agnostic
www.flickr.com/photos/66327170@N07/7296381856
!
!
!
!
!
!
New rule: every desktop design has to go finger friendly - Josh Clark
Source & images from UX Matters - www.uxmatters.com/mt/archives/2013/02/how-do-users-really-hold-mobile-devices.php
www.flickr.com/photos/intelfreepress/6837427202
www.flickr.com/photos/johnkarakatsanis/6902407334 www.flickr.com/photos/jorgeq82/4732700819
www.flickr.com/photos/janitors/9968676044
www.flickr.com/photos/vincentsl/3543888150
Designing for touch means designing for fingers, yes, but to be more specific, youre really designing for thumbs.
- Josh Clark
Har konsekvenser fr funktionalitet, placering & interaktion
www.flickr.com/photos/jmtimages/2883279193www.flickr.com/photos/ljrmike/7675757042
Mycket trskert vs. Mindre trskert
The site you build is not dependent on knowing what device it is being displayed on.
- Sarita Harbour, WDD
Image courtesy of Shutterstock
http://foundation.zurb.com/docs/layout.php
Get your content to go anywhere, because its going to
go everywhere. - Brad Frost
http://foundation.zurb.com/docs/layout.php
Your users get to decide how, when, and where they want to read your content.
It is your challenge and your responsibility to deliver a good
experience to them. - Karen McGrane
enhet webblsare skrm input metod uppkoppling
Vilken som helst
nr som helst var som helstAnvnds
Hur gr vi fr att designa enhetsoberoende?
www.thegrid.io
The design adjusts to look good on every browser and every device. Automatically.
- The Grid
Det handlar om innehllet. Inte vilken enhet vi anvnder.
http://foundation.zurb.com/docs/layout.php
It is your mission to get your content out, on whichever platform, in whichever format
your audience wants to consume it.
- Karen McGrane
Mindre fokus p sidor & istllet mer fokus p modulerna som utgr dem
www.flickr.com/photos/boltofblue/4418442567
Rtt likt lego
www.flickr.com/photos/toomuchdew/5243719740
www.flickr.com/photos/toomuchdew/5243719740
Ju mer vi teranvnder,desto bttre
www.flickr.com/photos/toomuchdew/5243719740
www.flickr.com/photos/toomuchdew/5914351500
www.flickr.com/photos/toomuchdew/5148233898
www.flickr.com/photos/toomuchdew/3792159077
www.flickr.com/photos/toomuchdew/3792972952
Ju mer vi teranvnder,desto bttre
www.flickr.com/photos/akrabat/9085299639
Vi ska helst undvika det hr:
Views
Home - large Home - small
Brja med att identificera byggnadsblocken
Views
Home - large Home - small
Brja med att identificera byggnadsblocken
Feature - large Feature - small
Views Modules
Home - large Home - small
Brja med att identificera byggnadsblocken
Feature - large Feature - small
Views Modules
Home - large Home - small
Brja med att identificera byggnadsblocken
Feature - large Feature - small
Featured products - large Featured products - small
Views Modules
Home - large Home - small
Brja med att identificera byggnadsblocken
Feature - large Feature - small
Featured products - large Featured products - small
Views Modules
Home - large Home - small
Brja med att identificera byggnadsblocken
Feature - large Feature - small
Featured products - large
Single product - large
Featured products - small
Single product- small
Views Modules
Home - large Home - small
Brja med att identificera byggnadsblocken
Bygg gradvis upp ditt module library
Feature - large Feature - small
Featured products - large Featured products - small
Single product - large Single product- small
Also used for: Module REL01 - Related products
1
3
4
1
2
3
1
2
1
2
3
4
2
3
1
2
3
1
2
1
1
Bygg gradvis upp ditt module library
Feature - large Feature - small
Featured products - large Featured products - small
Single product - large Single product- small
Also used for: Module REL01 - Related products
1
3
4
1
2
3
1
2
1
2
3
4
2
3
1
2
3
1
2
1
1
http://foundation.zurb.com/docs/layout.php
With thousands and thousands of pages on the Crayola site, it wasnt efficient to wireframe every single page and state. We created a system of components that could be assembled in different configurations to accommodate the unique content needed for each type of page.
- Daniel MallScreenshot: www.crayola.co.uk/
www.flickr.com/photos/jorgeq82/4732700819 www.flickr.com/photos/adactio/6153481666
Webblsare & Enheter
nnu en orsak till varfr vi br undvika The big reveal
www.flickr.com/photos/nataliejohnson/377344806
En anpassning av hur vi redan tar oss an design
www.flickr.com/photos/75905404@N00/7126146307
Hurja, det beror p
DetailedIA & UX deliverablesHigh level
Brand Info or taskAim of experience
Limited Experience in visual design teamExtensive
Less formal UX deliverables but more creatively led
UX led with more formal & extensive IA & UX deliverables
Source: Mark Bell, Dare
Blir bst om vi jobbar ihop, ver jobbtitlar samt med kunden
www.flickr.com/photos/stickkim/7491816206
Det handlar om att gra vad som r bst fr anvndarna, kunden & oss
Testa s tidigit som mjligt
sen ofta & kontinuerligt
enhet webblsare skrm input metod uppkoppling
Vilken som helst
nr som helst var som helstAnvnd
Content =
www.flickr.com/photos/grimsanto/751075283/photos/carlosfpardo/6791950592
Content + Context =
www.flickr.com/photos/grimsanto/751075283/photos/carlosfpardo/6791950592
Screenshot: https://moto360.motorola.com/
Screenshot: Screenshot: http://www.apple.com/uk/
Screenshot: Screenshot: http://www.apple.com/uk/
And just as the first wave of desktop apps ported to mobile were underwhelming and replaced by mobile-first applications, so will companies quickly realize that it isnt just a new screen but a brand-new platform.
- Source: Techcrunch
Responsiv design har lrt oss anpassa layouts & interaktioner
Responsiv design har lrt oss anpassa layouts & interaktioner
Men varje enhet r olika.Anvnd deras fulla potential
Men varje enhet r olika.Anvnd deras fulla potential
Men varje enhet r olika.Anvnd deras fulla potential
Browse
Research
Buy & Pay
Get notified
Men varje enhet r olika.Anvnd deras fulla potential
Browse
Research
Buy & Pay
Get notified
Men varje enhet r olika.Anvnd deras fulla potential
Browse
Research
Buy & Pay
Get notified
Men varje enhet r olika.Anvnd deras fulla potential
Browse
Research
Buy & Pay
Get notified
Men varje enhet r olika.Anvnd deras fulla potential
Browse
Research
Buy & Pay
Get notified
Men varje enhet r olika.Anvnd deras fulla potential
Browse
Research
Buy & Pay
Get notified
Men varje enhet r olika.Anvnd deras fulla potential
Browse
Research
Buy & Pay
Get notified
Men varje enhet r olika.Anvnd deras fulla potential
Egentligen s r det inte s annorlunda
www.flickr.com/photos/visualpunch/7351572896
1. Varje responsivt design projek r ett content strategy projekt
2. Designa ett system av moduler isllet fr fokusera p sidor 3. Stt innehllsbaserade breakpoints istllet fr enhetesbaserade4. Enhetsoberoende design br vara utgngspunkten 5. men anpassa upplevelsen efter enhetens roll & ndaml
Image courtesy of Shutterstock
Tack. Frgor?@annadahlstrom | www.annadahlstrom.com