responsivt - inte bara för mobilen + webbdagarna växjö, 04 dec 2014
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.TRANSCRIPT
-
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