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
94
{less} is more
woeldiche
9
270
Going Mobile First With Drupal
woeldiche
4
110
Other Decks in Technology
See All in Technology
プロダクトの成長に合わせたアーキテクチャの段階的進化と成長痛、そして、ユニットエコノミクスの最適化
kakehashi
PRO
1
110
Goss: Faiss向けの新しい本番環境対応 Goバインディング #coefl_go_jp
bengo4com
1
1.4k
事業価値と Engineering
recruitengineers
PRO
6
5k
Kiroと学ぶコンテキストエンジニアリング
oikon48
4
790
そのコンポーネント、サーバー?クライアント?App Router開発のモヤモヤを可視化する補助輪
makotot
4
770
攻撃と防御で実践するプロダクトセキュリティ演習~導入パート~
recruitengineers
PRO
3
1.6k
7月のガバクラ利用料が高かったので調べてみた
techniczna
3
780
Microsoft Fabric のネットワーク保護のアップデートについて
ryomaru0825
1
120
Browser
recruitengineers
PRO
6
1.9k
「魔法少女まどか☆マギカ Magia Exedra」のグローバル展開を支える、開発チームと翻訳チームの「意識しない協創」を実現するローカライズシステム
gree_tech
PRO
0
340
AI時代にPdMとPMMはどう連携すべきか / PdM–PMM-collaboration-in-AI-era
rakus_dev
0
170
つくって納得、つかって実感! 大規模言語モデルことはじめ
recruitengineers
PRO
31
11k
Featured
See All Featured
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
185
54k
How GitHub (no longer) Works
holman
315
140k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Making the Leap to Tech Lead
cromwellryan
134
9.5k
The Pragmatic Product Professional
lauravandoore
36
6.8k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
Docker and Python
trallard
45
3.5k
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.4k
The Straight Up "How To Draw Better" Workshop
denniskardys
236
140k
How to Think Like a Performance Engineer
csswizardry
26
1.8k
Visualization
eitanlees
147
16k
Gamification - CAS2011
davidbonilla
81
5.4k
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