Upload
jesper-woldiche
View
108
Download
1
Tags:
Embed Size (px)
DESCRIPTION
Citation preview
Sustainable strategies for the mobile web
This session
Strategy,
not <code />.
Designers & developers beware.
Internets, not intranets.
Slides available online.
Jesper Wøldiche Rahkonen Municipality of Aarhus
designer / markup marine / project lead /
woeldiche on twitter / quora / linkedin / etc.
About me
Overview
Present
Future
Why
How
Mobile first
But
Challenges of the traditional model.
Overview
Present
Future
Why
How
Mobile first
But
A responsive alternative.
Overview
Present
Future
Why
How
Mobile first
But
The benefits of a universal web.
Overview
Present
Future
Why
How
Mobile first
But
A look at the techniques.
Overview
Present
Future
Why
How
Mobile first
But
Why you should design mobile first.
Overview
Present
Future
Why
How
Mobile first
But Really? I’m Cinderella too?
The traditional model
‘Desktop’ + ‘mobile’ version
The traditional model
‘Desktop’ + ‘mobile’ version
+ iPhone optimized
The traditional model
‘Desktop’ + ‘mobile’ version
+ iPhone optimized
+ App
The traditional model
Content duplication
Challenges
Content duplication
Version specific links
Challenges
Content duplication
Version specific links
SEO issues
Challenges
Unsustainable costs
Desktop version
Unsustainable costs
Desktop version
‘Mobile’ version
Unsustainable costs
Desktop version
‘Mobile’ version
iPhone optimized version
Unsustainable costs
Desktop version
‘Mobile’ version
iPhone optimized version
Large tablet (iPad) version
Unsustainable costs
Desktop version
‘Mobile’ version
iPhone optimized version
Large tablet (iPad) version
Small tablet version (Galaxy)
Unsustainable costs
Desktop version
‘Mobile’ version
iPhone optimized version
Large tablet (iPad) version
Small tablet version (Galaxy)
Internet enabled TV version?
Unsustainable costs
Desktop version
‘Mobile’ version
iPhone optimized version
Large tablet (iPad) version
Small tablet version (Galaxy)
Internet enabled TV version?
Internet enabled fridge version?
Unsustainable costs
You want updates with that?
(I know, you get the point).
Don’t assume context from device.
There is no mobile web.
(But it makes for great presentation titles).
@stephenhay
“There is no Mobile Web. There is only The Web, which we view in different ways. There is also no Desktop Web. Or Tablet Web. Thank you.”
The words we use influence our thinking.
The alternative approach
Aim for universal access.
Make no assumptions.Or try not to.
That goes for accesibility too.
Design and build for everything in between.
Design and build for everything in between.
Including the next device.
Lancaster University
Wide screen
Narrow
Tablet sized
Smartphone
Why?
Reduced costs for multiple platforms.
Benefits
Reduced costs for multiple platforms.
Sustainable.
Benefits
Reduced costs for multiple platforms.
Sustainable.
Future proof.
Benefits
Reduced costs for multiple platforms.
Sustainable.
Future proof.
Works on iPhone 5.
Benefits
One article = one url.
Solves our challenges.
One article = one url.
Update content once.
Solves our challenges.
One article = one url.
Update content once.
Maintain one platform only.
Solves our challenges.
34% more buzzwords per project.
Nah, not really.
How?
A combination of techniques and web standards
Flexible grids
Responsive webdesign
Flexible grids
+ media queries
Responsive webdesign
Flexible grids
+ media queries
+ adaptive media
Responsive webdesign
Flexible grids
+ media queries
+ adaptive media
+ web standards
Responsive webdesign
Adaptive webdesign?
A design approach
Design for mobile first.
Mobile extends your capabilities.
Mobile is exploding.
Mobile first provides focus.
Expand from that focus.
I’m Cindarella too, really?
Different context (might) require different solutions.
An example: The event site
One shoe never fits all.
But try it on first.
You might be Cindarella too.
‘Responsive Webdesign’, Ethan Marcotte.
‘Mobile First’, Luke Wroblewski.
‘A New Canon’, Mark Boulton.
Links online.
More sources
Thank you.
slideshare.net/woeldiche
Stone tablet: http://www.flickr.com/photos/mendhak/2181341370/
1984: http://www.flickr.com/photos/colindunn/4229983412/
Superheroes: http://www.flickr.com/photos/ari/2567524938/
Why: http://www.flickr.com/photos/tonikaarttinen/5687056556/
Cindarella: http://www.flickr.com/photos/tonyj1961/6047893889/
Nightclub: http://www.flickr.com/photos/30691679@N07/4423432834/
Another Cindarella: http://www.flickr.com/photos/tonyj1961/6036010920/
Photos
Links
http://www.abookapart.com/products/responsive-web-design
http://www.alistapart.com/articles/responsive-web-design/
http://www.zeldman.com/2011/07/06/responsive-design-i-dont-think-that-word-means-what-you-think-it-means/
Responsive web design
Links
http://www.lukew.com/ff/entry.asp?933
http://www.lukew.com/ff/entry.asp?1137
http://www.lukew.com/ff/entry.asp?1393
http://www.abookapart.com/products/mobile-first
Mobile first
Links
http://2011.newadventuresconf.com/audio/mark.html
http://vimeo.com/29991675
http://www.netmagazine.com/interviews/in-depth/mark-boulton-layouts-and-grid-systems
A New Canon