Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Sustainable Strategies for the Mobile Web
Search
Jesper Wøldiche
February 26, 2012
Technology
3
70
Sustainable Strategies for the Mobile Web
Jesper Wøldiche
February 26, 2012
Tweet
Share
More Decks by Jesper Wøldiche
See All by Jesper Wøldiche
[da] Designstrategier for Brugerskab Indhold
woeldiche
0
85
{less} is more
woeldiche
9
250
Going Mobile First With Drupal
woeldiche
4
100
Other Decks in Technology
See All in Technology
AOAI をきっかけに 社内の Azure 管理を見直した話
recruitengineers
PRO
1
300
元インフラエンジニアに成る / Human Resources to Human Relations
bobtani
4
930
【NW X Security JAWS#3】L3-4:AWS環境のIPv6移行に向けて知っておきたいこと
shotashiratori
0
350
よく聞くけど使ったことないソフトウェアNo.1 KafkaとSnowflake
foursue
4
360
Compose Compiler Metricsを使った実践的なコードレビュー
tomorrowkey
1
220
データベース02: データベースの概念
trycycle
0
160
Google Cloud Next '24 Recap(Cloud Run/k8s)
mokocm
0
240
エンジニアのキャリアをちょっと楽しくする3本の軸/Three Pillars to Make an Engineer's Career More Enjoyable
kwappa
0
2.7k
Reducing Cross-Zone Egress at Spotify with Custom gRPC Load Balancing Recap
koh_naga
0
210
Tellus の衛星データを見てみよう #mf_fukuoka
kongmingstrap
0
210
LayerXにおけるLLMプロダクト開発の今までとこれから
layerx
PRO
1
370
20240418_Google ColabにLLMが搭載されたようなのでPython x データ分析の勉強方法を考えてみる
doradora09
0
140
Featured
See All Featured
Building Effective Engineering Teams - LeadDev
addyosmani
28
1.8k
Gamification - CAS2011
davidbonilla
76
4.6k
Being A Developer After 40
akosma
57
580k
Bootstrapping a Software Product
garrettdimon
PRO
302
110k
Docker and Python
trallard
34
2.7k
Design by the Numbers
sachag
274
18k
How To Stay Up To Date on Web Technology
chriscoyier
782
250k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
155
14k
Pencils Down: Stop Designing & Start Developing
hursman
117
11k
Fontdeck: Realign not Redesign
paulrobertlloyd
76
4.9k
Fantastic passwords and where to find them - at NoRuKo
philnash
37
2.5k
The MySQL Ecosystem @ GitHub 2015
samlambert
243
12k
Transcript
Sustainable strategies for the mobile web Yes, this is the
User Experience track.
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
None
Overview Present Future Why How Mobile first But Challenges of
the tradition 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
Cindarella 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).
None
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.”
None
The words we use influence our thinking.
The alternative approach
Aim for universal access.
Make no assumptions. Or try to at least.
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
None
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
None
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
None
One shoe never fits all. But try it on first.
You might be Cindarella too.
None
‘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