-
Notifications
You must be signed in to change notification settings - Fork 2
/
mobile-web-design-is-so-different-from-the-desktop-web.html
227 lines (178 loc) · 13.9 KB
/
mobile-web-design-is-so-different-from-the-desktop-web.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Mobile web design is so different from the desktop web — Martin Kleppmann’s blog</title>
<link rel="stylesheet" type="text/css" media="screen, print, handheld" href="/css/typography.css" />
<link rel="stylesheet" type="text/css" media="screen" href="/css/style.css" />
<link rel="stylesheet" type="text/css" media="all" href="/css/pygments-default.css" />
<link rel="stylesheet" type="text/css" media="all" href="/css/ansi2html.css" />
<link rel="stylesheet" type="text/css" media="all" href="/css/customizations.css?2" />
<!--[if lt IE 8]>
<link rel="stylesheet" href="/css/ie.css" type="text/css" media="screen" charset="utf-8" />
<![endif]-->
<link rel="alternate" type="application/rss+xml" title="RSS" href="http://feeds.feedburner.com/martinkl?format=xml" title="Martin Kleppmann's blog" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
<script src="http://downloads.mailchimp.com/js/jquery.form-n-validate.js" type="text/javascript"></script>
<script src="/form.js" type="text/javascript"></script>
</head>
<body class="wordpress">
<div id="page">
<p id="top">
<a id="to-content" href="#content" title="Skip to content">Skip to content</a>
</p>
<div id="header">
<div class="wrapper">
<strong id="blog-title">
<a href="/" title="Home" rel="home">Martin Kleppmann</a>
</strong>
<p id="blog-description">Entrepreneurship, web technology and the user experience</p>
</div>
</div>
<div id="sub-header">
<div class="wrapper">
<div id="navigation">
<ul>
<li class="page_item"><a href="/contact.html" title="About/Contact">About/Contact</a></li>
</ul>
</div>
</div>
</div>
<hr class="divider">
<div class="wrapper">
<div id="content">
<h1>
<div style="float: right; padding: 0 0 10px 20px;">
<script type="text/javascript">
tweetmeme_source = 'martinkl';
</script>
<script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"></script>
</div>
Mobile web design is so different from the desktop web
</h1>
<p>About a month ago Victor Keegan of the Guardian wrote: <a href='http://www.guardian.co.uk/technology/2007/oct/25/comment.mobilephones'>“The mobile web is finally getting started”</a>. He points out both some of the benefits…</p>
<blockquote>
<p>“It is interesting why so few of us use one of the breakthroughs of recent years: the ability to search the web from wherever we are with a mobile phone. This ought to be hugely empowering, enabling us to answer any question from wherever we happen to be instead of having to wait until we are within reach of a computer.”</p>
</blockquote>
<p>…as also the main reasons for its slow start:</p>
<blockquote>
<p>“There are a number of reasons why this hasn’t happened and why it may be about to change. It is partly because the operators have been shamefully greedy in trying to raid our pockets by charging for all the data we download […] the user experience is still not good enough. Mobiles were designed to make telephone calls. Now things are changing.”</p>
<p>– Victor Keegan, <a href='http://www.guardian.co.uk/technology/2007/oct/25/comment.mobilephones'>“The mobile web is finally getting started”</a></p>
</blockquote>
<p>I recently came across some great examples demonstrating why for complex web sites, there is no alternative to designing a specifically mobile version. This is not so much for technical reasons, as rather that mobile users may have totally different requirements. It’s not so important to be able to access every single bit of content; instead those things which mobile users do require need to be instantly accessible. After all, think why a user may want to use the mobile web rather than the desktop web: it’s very much tied to now, an instantaneous requirement. In the words of Sarah Lipman, from an interesting paper on mobile search paradigms:</p>
<blockquote>
<p>“‘Mobile Search’ = I want it NOW. I can’t wait, I won’t wait.</p>
<p>When a user gets the sense that ‘I’m not going to find what I want right now’ he stops looking, because that is almost always the path of least resistance. At the same time, he will also have a small sense of failure. […] If search cannot deliver on the promise of ‘I want it NOW’, it won’t be utilized.”</p>
<p>– Sarah Lipman, <a href='http://www.mobileuserexperience.com/mex-sarahlipman.pdf'>“Search patterns in nature: Informing computer search interfaces”</a></p>
</blockquote>
<p>For mobile users it is even more important than for normal web users that the designer has figured out exactly what the most frequently needed aspects of his site are, and made those aspects immediately and very easily accessible. This means that a mobile page can contain far fewer navigational elements (links) than a page intended for desktop viewing. Going from desktop to mobile therefore involves prioritising links in a page – some of them are going to have to go (moved into a sub-page, or removed entirely). This is not something which software can do automatically – a human editor or information architect has to sit down and decide.</p>
<p>Two examples to clarify:</p>
<ul>
<li>Nigel Choi and <a href='http://www.passani.it/'>Luca Passani</a> have <a href='http://wurfl.sourceforge.net/vodafonerant/vodawsj/nigel.html'>produced an impressive example</a> contrasting the <a href='http://mobile2.wsj.com/'>mobile-specifically designed version of the Wall Street Journal</a> with its <a href='http://online.wsj.com/'>desktop version</a> when automatically adapted for mobile use. (The purpose of the article is actually to criticise <a href='http://www.vodafonebetavine.net/web/guest/forums/message_boards/message/478'>Vodafone UK’s approach to content adaptation</a>, but it serves very well as a general example of the limitations of automatic adaptation versus manual redesign.) The mobile-designed version even goes as far as offering all content without requiring login (as opposed to the desktop version, a lot of which is subscription-only access), because WSJ recognise that people don’t like typing in user names and passwords on a phone keypad! <a href='http://wurfl.sourceforge.net/vodafonerant/vodawsj/nigel.html'>Go to the article.</a></li>
<li>The BBC News website comes in at least <a href='http://www.bbc.co.uk/mobile/web/versions.shtml'>four different versions</a>: a <a href='http://news.bbc.co.uk/'>desktop version</a>, a <a href='http://news.bbc.co.uk/nolpda/ukfs_news/hi/default.stm?'>PDA version</a>, a <a href='http://www.bbc.co.uk/mobile/bbc_news/'>XHTML phone version and a WAP version</a>. Simply comparing the structure of the news front page in each version gives a very insightful comparison. When I last checked, the front page of the desktop version contained 201 links; the PDA version contained 56 links; and the phone/WAP version contained 24 links. Same site, but different prioritisation of content. That’s the way it should be.</li>
</ul>
<p><a href='http://www.blueflavor.com/'>Blue Flavor</a> has also produced <a href='http://www.scribd.com/doc/39925/Everything-you-wanted-to-know-about-the-mobile-web-but-were-afraid-to-askblueflavorcom'>a presentation on the basics of good mobile web design</a>.</p>
<div id="disqus_thread"></div>
</div>
<div id="sidebar">
<div id="carrington-subscribe" class="widget">
<h2 class="widget-title">Subscribe</h2>
<a class="feed" title="RSS 2.0 feed for posts" rel="alternate" href="http://feeds.feedburner.com/martinkl">
Site <acronym title="Really Simple Syndication">RSS</acronym> feed
</a>
<div id="mc_embed_signup">
<p>
Enjoyed this? To get notified when I write something new,
<a href="http://twitter.com/martinkl">follow me</a> on Twitter,
<a href="http://feeds.feedburner.com/martinkl">subscribe</a> to the RSS feed,
or type in your email address:
</p>
<form action="http://rapportive.us2.list-manage.com/subscribe/post?u=9a1adaf549282981a96e171d1&id=4543b695f6"
method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank">
<fieldset>
<div class="mc-field-group">
<label for="mce-EMAIL">Email:</label>
<input type="text" value="" name="EMAIL" class="required email" id="mce-EMAIL">
<input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="btn">
</div>
<div id="mce-responses">
<div class="response" id="mce-error-response" style="display:none"></div>
<div class="response" id="mce-success-response" style="display:none"></div>
</div>
</fieldset>
</form>
<p class="disclaimer">
I won't give your address to anyone else, won't send you any spam, and you can unsubscribe at any time.
</p>
</div>
</div>
<div id="carrington-about" class="widget">
<div class="about">
<h2 class="title">About</h2>
<p>Hello! I'm Martin Kleppmann, entrepreneur and software craftsman.
I co-founded <a href="http://rapportive.com/">Rapportive</a>
(<a href="http://blog.rapportive.com/rapportive-acquired-by-linkedin">acquired</a>
by <a href="http://www.linkedin.com/">LinkedIn</a> in 2012) and Go Test It (acquired by
<a href="http://www.red-gate.com/">Red Gate Software</a> in 2009).</p>
<p>I care about making stuff that people want, great people and culture, the web and
its future, marvellous user experiences, maintainable code and scalable architectures.</p>
<p>I'd love to hear from you, so please leave comments, or feel free to
<a rel="author" href="/contact.html">contact me directly</a>.</p>
</div>
</div>
<div id="primary-sidebar">
</div>
<div id="secondary-sidebar">
<div id="carrington-archives" class="widget">
<h2 class="title">Recent posts</h2>
<ul>
<li>08 Oct 2012: <a href="/2012/10/08/complexity-of-user-experience.html">The complexity of user experience</a></li>
<li>01 Oct 2012: <a href="/2012/10/01/rethinking-caching-in-web-apps.html">Rethinking caching in web apps</a></li>
<li>18 Jun 2012: <a href="/2012/06/18/java-hashcode-unsafe-for-distributed-systems.html">Java's hashCode is not safe for distributed systems</a></li>
<li>16 Aug 2011: <a href="/2011/08/16/founderly-interview.html">My FounderLY interview</a></li>
<li>24 May 2011: <a href="/2011/05/24/evolution-of-rapportive-new-design.html">Evolution of Rapportive's new design</a></li>
<li><a href="/archive.html">Full archive</a></li>
</ul>
</div>
</div>
</div>
</div> <!-- div.wrapper, started in 'before.html' -->
<hr class="divider" />
<div id="footer">
<div class="wrapper">
<p id="generator-link">
<a rel="license" href="http://creativecommons.org/licenses/by/3.0/"
style="float: left; padding: 0.3em 1em 0 0;"><img alt="Creative Commons License"
src="http://i.creativecommons.org/l/by/3.0/88x31.png" /></a>
Unless otherwise specified, all content on this site is licensed under a
<a rel="license" href="http://creativecommons.org/licenses/by/3.0/">Creative Commons
Attribution 3.0 Unported License</a>.
Theme borrowed from
<span id="theme-link"><a href="http://carringtontheme.com" title="Carrington theme for WordPress">Carrington</a></span>,
ported to <a href="https://github.com/mojombo/jekyll">Jekyll</a> by Martin Kleppmann.
</p>
</div>
</div>
</div>
<script type="text/javascript">
var disqus_shortname = 'martinkl';
var disqus_url = 'http://martin.kleppmann.com/2007/12/02/mobile-web-design-is-so-different-from-the-desktop-web.html';
var disqus_identifier = disqus_url;
(function() {
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
dsq.src = 'http://' + disqus_shortname + '.disqus.com/embed.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
})();
</script>
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-7958895-1");
pageTracker._trackPageview();
} catch (err) {}
</script>
</body>
</html>