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
76
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
95
{less} is more
woeldiche
9
270
Going Mobile First With Drupal
woeldiche
4
110
Other Decks in Technology
See All in Technology
自作LLM Native GORM Pluginで実現する AI Agentバックテスト基盤構築
po3rin
2
120
Tomorrow graphlib, Let us use everybody
hayaosuzuki
0
110
#普通の文系サラリーマンチャレンジ 自分でアプリ開発と電子工作を続けたら人生が変わった
tatsuya1970
0
440
Railsアプリケーション開発者のためのブックガイド
takahashim
5
2.6k
CData MCP ナイト!「CData × Oracleで実現する新しいデータ活用 ― 国産SaaS 連携から MCP Server for Oracle Database まで」
shisyu_gaku
0
110
5年間のFintech × Rails実践に学ぶ - 基本に忠実な運用で築く高信頼性システム / 5 Years Fintech Rails Retrospective
ohbarye
6
2.2k
mypyの10年、pyrightの5年 tyの挑戦 - 型チェッカー進化論 -
byfarsmall
0
120
意外と難しいGraphQLのスカラー型
uhyo
4
240
Go Conference 2025: GoのinterfaceとGenericsの内部構造と進化 / Go type system internals
ryokotmng
3
260
開発用LLMインフラをVSCode内で完結させる
ueponx
1
260
2重リクエスト完全攻略HANDBOOK / Double Request Handbook
shoheimitani
5
4.8k
5000万ダウンロードを超える漫画サービスを支えるログ基盤の設計開発の全て
ldf_tech
0
440
Featured
See All Featured
Raft: Consensus for Rubyists
vanstee
139
7.1k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
3k
Being A Developer After 40
akosma
90
590k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
140
34k
It's Worth the Effort
3n
187
28k
Bash Introduction
62gerente
615
210k
Designing for Performance
lara
610
69k
How GitHub (no longer) Works
holman
315
140k
Building Flexible Design Systems
yeseniaperezcruz
329
39k
4 Signs Your Business is Dying
shpigford
185
22k
Rails Girls Zürich Keynote
gr2m
95
14k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
45
2.5k
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