Responsivt - Inte bara för mobilen + Webbdagarna Växjö, 04 Dec 2014
-
Upload
anna-dahlstroem -
Category
Documents
-
view
461 -
download
0
description
Transcript of Responsivt - Inte bara för mobilen + Webbdagarna Växjö, 04 Dec 2014
-
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