<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Cloud Four &#187; Top Stories</title>
	<atom:link href="http://www.cloudfour.com/category/top-stories/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.cloudfour.com</link>
	<description>Expert Web and Mobile Design, Development and Strategy</description>
	<lastBuildDate>Tue, 31 Jan 2012 17:22:10 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.1</generator>
		<item>
		<title>Responsive Web Design Business Challenges</title>
		<link>http://www.cloudfour.com/responsive-web-design-business-challenges/</link>
		<comments>http://www.cloudfour.com/responsive-web-design-business-challenges/#comments</comments>
		<pubDate>Sun, 29 Jan 2012 05:19:03 +0000</pubDate>
		<dc:creator>Jason Grigsby</dc:creator>
				<category><![CDATA[Mobile Web and Services]]></category>
		<category><![CDATA[Top Stories]]></category>

		<guid isPermaLink="false">http://www.cloudfour.com/?p=2207</guid>
		<description><![CDATA[During the Future of Mobile Web summit that dotMobi sponsored, I brought up a series of responsive web design (RWD) challenges that I’ve been thinking about that have little to do with technical implementations. John Leonard from dotMobi commented that he hadn’t read any blog posts about them. Time to remedy that. Search Engine Optimization [...]]]></description>
			<content:encoded><![CDATA[<p>During the <a href="http://mobiforge.com/browsers/blog/future-mobile-web-request-submissions">Future of Mobile Web summit</a> that <a href="http://mtld.mobi/">dotMobi</a> sponsored, I brought up a series of responsive web design (RWD) challenges that I’ve been thinking about that have little to do with technical implementations. John Leonard from dotMobi commented that he hadn’t read any blog posts about them. Time to remedy that.</p>
<h3>Search Engine Optimization</h3>
<p>Google, Bing and Yahoo all have <a href="http://searchengineland.com/5-tips-for-optimal-mobile-site-indexing-107088">different search bots for mobile</a>. Google’s recommendations on <a href="http://googlewebmastercentral.blogspot.com/2011/02/making-websites-mobile-friendly.html">how to make sites mobile friendly</a> are all based around building separate sites and then ensuring that the Google mobile bot is redirected to the mobile version. Matt Cutts has talked about this in a <a href="http://www.youtube.com/watch?v=mY9h3G8Lv4k">video answer</a> and Google has gone so far as to describe <a href="http://googlewebmastercentral.blogspot.com/2009/11/running-desktop-and-mobile-versions-of.html">how you should redirect the Google mobile bot</a> in some detail.</p>
<p>What does this mean for sites using responsive web design? Honestly, I don’t know. Nor does anyone else it appears. There is some question about whether or not mobile SEO is even worth pursuing.</p>
<p>But it is worrisome. Google recently announced that <a href="http://googlemobileads.blogspot.com/2011/09/mobile-website-optimization-now-factors.html">mobile website optimization now factors into mobile search ads quality</a>. I’ve seen no indication that Google is considering responsive web design in its definition of mobile optimization. The announcement linked to several case studies and articles illustrating separate sites as the approach.</p>
<p>This is probably a problem with the search engines and not with responsive web design as a technique, but if a company relies on search engine traffic for revenue, it likely won’t matter who is to blame.</p>
<h3>Advertising</h3>
<p>There’s been a lot written about the difficulty of incorporating advertising into responsive design. Most of the focus has been on the fact that ads aren’t designed to be responsive breaking responsive layouts.</p>
<p>But there is another more structural issue: sometimes advertisers just want to advertise on one form factor and not another. App developers who want to drive app store purchases may not be interested in advertising on desktop. An advertiser interested in location-based advertising is also unlikely to consider responsive advertising desirable.</p>
<p>Will responsive web designs be able to participate in the growing mobile advertising opportunity?</p>
<h3>Analytics</h3>
<p>Most web analytics tools that support mobile provide an option to use a server side way of tracking instead of tracking via JavaScript. This is offered because many older devices either don’t support JavaScript or support it so poorly that using JavaScript-based tracking code is problematic.</p>
<p>Bryan and Stephanie Rieger have talked about how in their experience switching to the server-side code will show a lot more mobile traffic from a wider variety of devices than if you stick to the JavaScript version.</p>
<p>The problem is that you can’t run both the JavaScript and the server-side (mobile) variant on the same page. The analytics vendors recommend using the server-side code on your mobile site and the JavaScript one on your desktop site because the JavaScript version has a lot more data and features than the server-side one.</p>
<p>Sites using responsive web design will need to choose between more accurate data about the total mobile traffic (server-side tracking code) or deeper information about a small set of visitors (JavaScript tracking code).</p>
<h3>Content Delivery Networks (CDNs)</h3>
<p>On a responsive web design that takes care to provide only the assets that are appropriately sized for the device requesting the page, the images will vary based on the device. This causes problems with content delivery networks that have become accustomed to being able to cache a single asset for all devices or at worst caching a desktop and a mobile version of the asset.</p>
<p>As <a href="https://twitter.com/xbs">Ronan Cremin</a> put it, CDNs may now need to cache different images based on the entire spectrum of devices accessing a site. FWIW, depending on how they are implemented, this can be a problem for separate sites as well.</p>
<h3>One way in which RWD does not resemble the transition to standards</h3>
<p>The move towards responsive web design has been compared by many to the changes that happened when web design went from being table-based to using web standards and CSS layouts. The Boston Globe’s new site has been compared to the impact that the ESPN and Wired redesigns in proving the value of web standards.</p>
<p>It may be that my faulty memory, but I don’t remember a similar list of potential drawbacks from a business perspective to making the change to CSS-based layouts. If anything, things standards-based layouts had great business benefits because of the increased semantic markup leading to better search rankings and the leaner code helping with page performance and bandwidth costs. Yes, like responsive web design, retraining staff and changing infrastructure could be a major undertaking, but there wasn’t concern that making a change would negatively impact search rankings or make analytics more difficult.</p>
<p>And I honestly don’t know how big of a problem any of these things are with the exception of the analytics problem which seems clearly to be a pickle. It may be that search engine rankings aren’t impacted at all. But the fact that we don’t know seems like something that should be sorted out and considered if those things are critical to the success of a given project or client.</p>
<p>And to be 100% clear, I’m not saying people shouldn’t do responsive web design. Even if you were to build separate sites, you should still do responsive web design for the separate sites.</p>
<p>I’m simply saying these are challenges and concerns that I don’t think we’ve currently got good answers for.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.cloudfour.com/responsive-web-design-business-challenges/feed/</wfw:commentRss>
		<slash:comments>12</slash:comments>
		</item>
		<item>
		<title>Mobile web workshop in New York — We need your help</title>
		<link>http://www.cloudfour.com/mobile-web-workshop-in-new-york-%e2%80%94-we-need-your-help/</link>
		<comments>http://www.cloudfour.com/mobile-web-workshop-in-new-york-%e2%80%94-we-need-your-help/#comments</comments>
		<pubDate>Thu, 12 Jan 2012 17:41:58 +0000</pubDate>
		<dc:creator>Jason Grigsby</dc:creator>
				<category><![CDATA[Cloud Four Stories]]></category>
		<category><![CDATA[Conferences & Speaking Engagements]]></category>
		<category><![CDATA[Mobile Web and Services]]></category>
		<category><![CDATA[Top Stories]]></category>

		<guid isPermaLink="false">http://www.cloudfour.com/?p=2189</guid>
		<description><![CDATA[Lyza and I are giving a mobile web workshop next week at WebVisions NYC. We’re preparing an outstanding workshop for web designers and developers who want to learn how to build for mobile devices. We’re very excited about the workshop. It’s going to rock, but we need your help! But we’ve got a problem. We [...]]]></description>
			<content:encoded><![CDATA[<p>Lyza and I are giving a <a href="http://www.webvisionsevent.com/new-york/workshops/workshop-jason-grigsby/">mobile web workshop</a> next week at <a href="http://www.webvisionsevent.com/new-york/">WebVisions NYC</a>. We’re preparing an outstanding workshop for web designers and developers who want to learn how to build for mobile devices. We’re very excited about the workshop. <strong>It’s going to rock, but we need your help!</strong></p>
<p>But we’ve got a problem. We came up with a fun theme (Zombie Apocalypse!) to make the workshop interesting, but we’ve heard people were reluctant to register for the workshop because they didn’t get it. <img src='http://www.cloudfour.com/wp-includes/images/smilies/icon_sad.gif' alt=':-(' class='wp-smiley' /> </p>
<p>Since we heard about the registration problem, we’ve lept into action:</p>
<ul>
<li>We’ve rewritten the <a href="http://www.webvisionsevent.com/new-york/workshops/workshop-jason-grigsby/">workshop description</a> so it is clearer what people will learn at the workshop.</li>
<li>We’ve posted a <a href="http://www.cloudfour.com/wvnyc-zombie/">fun preview</a> of the talk. The preview made me giggle multiple times when I read what Lyza had wrote.</li>
<li>We’re here asking for your help.</li>
</ul>
<p><strong>We need your help getting the last minute word out</strong>. If you can take a moment to share the event, we would appreciate it. Particularly if you know people in New York who would benefit, we would be grateful if you pass the word onto them directly.</p>
<p style="text-align:center"><a href="http://www.cloudfour.com/wvnyc-zombie/"><img src="http://www.cloudfour.com/wp-content/uploads/2012/01/zombie.png" alt="Zombie Apocalypse of Devices Preparedness 101 Workshop Preview" title="Workshop preview" /></a></p>
<h3>And of course we have discounts to share</h3>
<p>WebVisions has provided us with a way to save 40% on conference passes. There are two options:</li>
<ol>
<li>Save 40% off a conference pass, get a FREE pass to Thomas Phinney’s “Web Typography Best Practices” workshop ($250 value) and a 60-day unlimited WebINK account (register at <a href="http://wvnyc-webink.eventbrite.com/">http://wvnyc-webink.eventbrite.com/</a>), OR</li>
<li>Save 40% on conference passes to WebVisions NYC and receive a FREE Workshop pass ($250 value) to Kevin Hoyt’s “Web Standards Playground” (register at <a href="http://wvnyc-adobe.eventbrite.com/">http://wvnyc-adobe.eventbrite.com/</a>).</li>
</ol>
<p>I honestly had to read that a few times to make sure I understood the deal correctly. Seriously, 40% off and you get a free workshop? My guess is that Adobe and WebINK are helping sponsor the discounts which is pretty cool way to get into a workshop and save money.</p>
<h3>WebVisions is a fantastic event</h3>
<p>WebVisions is new to New York, but it has been going on in Portland for several years now. It always has fantastic speakers and the line up in New York is no different. Please help us make the event a success.</p>
<p>Thanks in advance for spreading the word. We greatly appreciate it and promise we’ll be less cutesy and more descriptive in our workshop abstracts from now on. <img src='http://www.cloudfour.com/wp-includes/images/smilies/icon_smile.gif' alt=':-)' class='wp-smiley' /> </p>
]]></content:encoded>
			<wfw:commentRss>http://www.cloudfour.com/mobile-web-workshop-in-new-york-%e2%80%94-we-need-your-help/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Responsive IMGs Part 3 — Future of the IMG Tag</title>
		<link>http://www.cloudfour.com/responsive-imgs-part-3-future-of-the-img-tag/</link>
		<comments>http://www.cloudfour.com/responsive-imgs-part-3-future-of-the-img-tag/#comments</comments>
		<pubDate>Fri, 07 Oct 2011 17:54:14 +0000</pubDate>
		<dc:creator>Jason Grigsby</dc:creator>
				<category><![CDATA[Mobile Web and Services]]></category>
		<category><![CDATA[Top Stories]]></category>

		<guid isPermaLink="false">http://www.cloudfour.com/?p=2044</guid>
		<description><![CDATA[The conversation in the comments on part 1 and 2 of this Responsive IMGs series have been exceptional. If you read the articles, but didn’t read the comments, I encourage you to go read them. There are people much smarter than me in those comment threads. One of common conclusion from the commenters is that [...]]]></description>
			<content:encoded><![CDATA[<p>The conversation in the comments on part <a href="http://www.cloudfour.com/responsive-imgs/">1</a> and <a href="http://www.cloudfour.com/responsive-imgs-part-2/">2</a> of this Responsive IMGs series have been exceptional. If you read the articles, but didn’t read the comments, I encourage you to go read them. There are people much smarter than me in those comment threads.</p>
<p>One of common conclusion from the commenters is that our current IMG tag isn’t going to cut it. That we need some sort of replacement that is <a href="http://futurefriend.ly">future friendly</a>. This isn’t the first time the idea of expanding or replacing the IMG tag has come up.</p>
<p>I promised to collect some of these proposals so we can discuss their relative merits.</p>
<h3>Current proposals and discussions to replace or extend the IMG tag</h3>
<p>As far as I know, there hasn’t been a formal proposal submitted to any standards bodies, but there have been several conversations worth highlighting. I was going to try to summarize the various proposals, but there hasn’t been a lot of consensus. I’m afraid that to get up to speed, you’re going to have to read the threads.</p>
<dl>
<dt style="margin-bottom:8px"><a href="http://lists.w3.org/Archives/Public/public-html/2011May/0386.html">Adaptive Images</a> on W3C HTML mailing list</dt>
<dd>
<p>At the end of May, <a href="http://twitter.com/dontcallmedom">Dom Hazael-Massieux</a> kicked off a lengthy thread talking about <a href="http://lists.w3.org/Archives/Public/public-html/2011May/0386.html">Adaptive Images</a> with two ideas: a srclist attribute and new image file format that would be a text file containing a list of images.</p>
<p>The thread continues with many other ideas including new http headers, progressive image formats, and general media formats with queries.</p>
<p>BTW, Adaptive Images has been added as a placeholder on the <a href="http://www.w3.org/wiki/HTML/next#Adaptive_Images">HTML.next</a> list.</p>
</dd>
<dt style="margin-bottom:8px"><a href="http://robertnyman.com/2011/05/30/discussing-alternatives-for-various-sizes-of-the-same-image-introducing-src-property-in-css-as-an-option/">Discussing Alternatives For Various Sizes Of The Same Image &#038; Introducing src Property In CSS As An Option</a> by <a href="http://twitter.com/#!/robertnyman">Robert Nyman</a></dt>
<dd>Robert asks the question, “whether various sizes of the same image is really content or presentation?” If it is presentation, then it should be in CSS. Again, great discussion in the comments.</dd>
<dt style="margin-bottom:8px"><a href="http://nicolasgallagher.com/responsive-images-using-css3/">Responsive images using CSS3</a> by <a href="http://twitter.com/#!/necolas">Nicolas Gallagher</a></a></dt>
<dd>“This method relies on the use of @media queries, CSS3 generated content, and the CSS3 extension to the attr() function.” This means it relies on already existing standards without creating anything new. Unfortunately, it doesn’t prevent multiple images from being downloaded and currently only Opera supports the CSS3 content property. That said, if we could get browser makers to change download behavior, this could work with existing standards.</dd>
<dt style="margin-bottom:8px"><a href="http://blog.yoav.ws/2011/05/My-take-on-adaptive-images">My take on adaptive images</a>, <a href="http://blog.yoav.ws/2011/07/Responsive-images---hacks-won-t-cut-it">Responsive images &#8211; hacks won&#8217;t cut it</a>, and <a href="http://blog.yoav.ws/2011/07/Simpler-responsive-images-proposal">Simpler responsive images proposal</a> by <a href="http://twitter.com/#!/yoavweiss">Yoav Weiss</a></dt>
<dd>
<p>No one has been blogging more about the need for a better solution than Yoav. His proposals have changed over time. The simpler responsive images proposal is his latest version, but they are all worth reading to see his thoughts and the feedback on each post.</p>
</dd>
<dt style="margin-bottom:8px"><a href="http://old.nabble.com/add-html-attribute-for-%22responsive-images%22-td32324865.html">add html-attribute for &#8220;responsive images&#8221;</a> on WhatWG mailing list</dt>
<dd>
<p><a href="https://twitter.com/#!/anselmhannemann">Anselm Hannemann</a> started a recent thread on the WhatWG mailing list proposing using media- and inline media queries to provide different images. One of the things notable about this thread is that there are some on the list who don’t think the current situation is a problem or if it is a problem, that it is a niché use case. We have some education to do.</p>
<dt style="margin-bottom:8px">Comments on Responsive IMGs <a href="http://www.cloudfour.com/responsive-imgs/#comments">Part 1</a> and <a href="http://www.cloudfour.com/responsive-imgs-part-2/#comments">Part 2</a></dt>
<dd>
<p>It seems weird to link to my own posts, but the comments on each post contain some good suggestion. Scott Jehl <a href="http://www.cloudfour.com/responsive-imgs-part-2/#comment-33692">said</a>, “It’s unfortunate the comment streams of these images posts are separated. Good stuff going on in both.” I agree. Best I can do is link them up with this post.</p>
</dd>
</dl>
<h3>What are our goals for a replacement for the IMG tag?</h3>
<p>As I read through the conversations about the potential replacements or extensions for the IMG tag, I’m struck by the fact that people seem to all see the same problem, but haven’t yet come up with common criteria that could be used to evaluate different potential solutions. Until that exists, we won’t have consensus.</p>
<p>For example, I would love to have the browser send more data via HTTP headers that would allow us to make determinations on the server about what size image to send. But I don’t think that will work as a replacement for the IMG tag because we need something that will work for HTML widgets where the server isn’t part of the picture.</p>
<p>(Psst&#8230; but seriously browser makers, more headers would be great!)</p>
<p>So what should be our criteria. Here is start from my perspective:</p>
<ul>
<li>It should be an HTML element and not solely CSS because IMGs are often part of the content. IMGs are semantic.</li>
<li>The solution should work without server content negotiation so that it can be used for HTML widgets. This doesn’t preclude servers being part of the solution, but we need a solution that will work if servers aren’t in the mix.</li>
<li>Current caching and proxy strategies cannot be ignored. Because of this, different image sizes likely need to be at unique URLs or the wrong size image for a given user will end up cached at the edge of the network.</li>
<li>It should support <a href="http://www.cloudfour.com/responsive-imgs/#arbitrarysize">arbitrary image sizes</a> and <a href="http://www.cloudfour.com/responsive-imgs/#highres">pixel density</a>.</li>
<li>It should support <a href="http://www.cloudfour.com/responsive-imgs/#artdirection">art direction</a> decisions to change the image at different sizes.</li>
<li>It should be a framework that will allow for future expansion based on factors beyond screen size. For example, if the browser provides information about the speed of the network connection, the designer or developer should be able to decide on the most appropriate image. We don’t have to define this now, but we shouldn’t box ourselves in to only looking at screens size.</li>
</ul>
<p>That’s my start on criteria. What did I get wrong? What would you add? And of the various IMG tag replacements that have been suggested, which do you think holds the most promise?</p>
]]></content:encoded>
			<wfw:commentRss>http://www.cloudfour.com/responsive-imgs-part-3-future-of-the-img-tag/feed/</wfw:commentRss>
		<slash:comments>22</slash:comments>
		</item>
		<item>
		<title>Responsive IMGs Part 2 — In-depth Look at Techniques</title>
		<link>http://www.cloudfour.com/responsive-imgs-part-2/</link>
		<comments>http://www.cloudfour.com/responsive-imgs-part-2/#comments</comments>
		<pubDate>Fri, 30 Sep 2011 08:14:18 +0000</pubDate>
		<dc:creator>Jason Grigsby</dc:creator>
				<category><![CDATA[Mobile Web and Services]]></category>
		<category><![CDATA[Top Stories]]></category>

		<guid isPermaLink="false">http://www.cloudfour.com/?p=1977</guid>
		<description><![CDATA[In Responsive IMGs Part 1, I took a high-level look at what responsive IMGs are, the problem they are trying to solve, and the common issues they face. In this post, I’m going to take a deeper look at the specific techniques being used to provide responsive IMGs and try to evaluate what works and [...]]]></description>
			<content:encoded><![CDATA[<p>In <a href="http://www.cloudfour.com/responsive-imgs/">Responsive IMGs Part 1</a>, I took a high-level look at what responsive IMGs are, the problem they are trying to solve, and the common issues they face. In this post, I’m going to take a deeper look at the specific techniques being used to provide responsive IMGs and try to evaluate what works and doesn’t. If you haven’t read <a href="http://www.cloudfour.com/responsive-imgs/">part 1</a>, you may want to do so before reading this post as it will help explain some of the terms I use.</p>
<p>When I started working on this project two months ago, I thought I would get to the end and be able to say, “Here are the three approaches that work best. Go download them and figure out how to integrate them into your systems.” Oh naivety!</p>
<p>What I’ve found is that there is no comprehensive solution. Instead, we have several months of experiments. Each experiment has its own advantages and disadvantages.</p>
<p>Because of this, the best thing we can do is understand the common elements and challenges so that we can start to pick the best parts of each for building our own solutions.</p>
<p>So um… this is a long post. Sorry. <img src='http://www.cloudfour.com/wp-includes/images/smilies/icon_smile.gif' alt=':-)' class='wp-smiley' /> </p>
<h2>Abandoned approaches</h2>
<h3>Dynamic Base Tag</h3>
<p>Many of the early techniques used javascript to dynamically change the base tag. The new base tag would add directories into the path that would be used to indicate what size image should be retrieved. After the document loaded, the base tag would be removed.</p>
<p>Unfortunately, this approach ran into <a href="http://www.cloudfour.com/responsive-imgs/#raceconditions">race conditions</a> that I described in part 1. I found that Google Chrome was downloading both the mobile and desktop images. <a href="http://twitter.com/scottjehl">Scott Jehl</a> found the problem to be a difference between how inline and external javascript is handled. He submitted a <a href="https://bugs.webkit.org/show_bug.cgi?id=66474">bug</a> to webkit which has been marked as “won’t fix” because:</p>
<blockquote><p>Inserting base element effectively changes all the subsequent URLs on the page. Any script may insert one so to avoid double loads we could never load anything else as long as there is a pending script load. This would mean disabling preloading, which is out of the question.</p></blockquote>
<p>In theory, you could still use a dynamic base tag inline, but the Filament Group has been primarily using a cookies-based approach instead which seems safer.</p>
<h3>Temporary images</h3>
<p>Another early technique was to have the src of imgs pointing to a temporary image and then having javascript replace the source with the correct file path. In most cases, the image was an one pixel transparent gif set up with caching which would hopefully prevent the browser from requesting it more than once no matter how many times it was referenced in the page.</p>
<p>The problem with this technique is that if javascript isn’t present, the browser will never download the images.</p>
<h2 id="js-based">Javascript-based solutions</h2>
<h3 id="altpaths">Where do you store the path to alternate versions of an image?</h3>
<p>If the the img points to ‘small.jpg’, where do you put the information that ‘large.jpg’ is what should be loaded on larger screens?</p>
<h4 id="url_parameters">URL parameters</h4>
<p>One solution is to put the path to alternate versions of the image in the src attribute as url parameters. In its simplest form:</p>
<p><code>&lt;img src="small.jpg?full=large.jpg"&gt;</code></p>
<p>If you have multiple sizes of images, they simply get added as additional values on the url. The key to making this work is coupling it with an <a href="#htaccess">.htaccess</a> file.</p>
<h5>Potential CDN, proxies, and caching issues</h5>
<p>The big drawback to using URL parameters is that it may cause problems with content deliver networks and proxies that doesn’t pay attention to url parameters when caching content. Some caching algorithms ignore anything that has a URL parameter on it which means that pages will slow down because images aren’t cached.</p>
<p>Others will simply cache the first version of the image they see. If the first person behind a proxy cache happened to view the page on a mobile phone, then every subsequent user sees the mobile size image until the cache expires.</p>
<p>How likely is this to be an issue? I had the same question so I asked Steve Souders. He says that it is <a href="http://twitter.com/#!/souders/status/118912008098811905">enough of a problem that you can’t ignore it</a>. This echoes comments by Bryan and Stephanie Rieger at Breaking Development about problems with caching and CDNs.</p>
<p>Therefore, I think we should be looking for techniques that don’t use url parameters.</p>
<h5>Examples of this approach:</h5>
<ul>
<li><a href="https://github.com/filamentgroup/Responsive-Images">Responsive Images JS Master Branch</a></li>
<li><a href="https://github.com/allmarkedup/responsive-images-alt">Responsive images alt</a></li>
<li><a href="http://www.craig-russell.co.uk/responsive-images-and-context-aware-image-sizing/">Responsive Images and Context Aware Sizing</a></li>
<li><a href="http://www.grahambird.co.uk/lab/doubletake/">Responsive images with Doubletake.js</a></li>
<li><a href="http://www.jamesfairhurst.co.uk/posts/view/responsive_images_with_php_and_jquery/">Responsive images with PHP and jQuery</a></li>
<li><a href="http://blog.keithclark.co.uk/responsive-images-using-cookies/">Responsive images using cookies</a></li>
<li><a href="https://github.com/ahume/Responsive-Images">Context aware responsive images</a></li>
</ul>
<h4 id="data-attributes">Data attributes</h4>
<p>Instead of putting the file path into the url parameters, the information is put in one or more data- attributes. For example:</p>
<blockquote><p>&lt;img src=&#8221;small.r.jpg&#8221; data-fullsrc=&#8221;large.jpg&#8221;&gt;</p></blockquote>
<p>Which element has data attributes added to it and how many are added depends on the technique.</p>
<h5>Looping through every img tag</h5>
<p>The only disadvantage to this technique that I’m aware of is the fact that the javascript has to loop through every image, check for data attributes, and then modify the src attribute depending on screen size. This is probably not a big problem on desktop browsers which is where the loop is mostly to be used.</p>
<h5>Examples of this approach</h5>
<ul>
<li><a href="https://github.com/filamentgroup/Responsive-Images/tree/data-attribute-based">Responsive Images JS data-attribute-based branch</a></li>
<li><a href="http://www.monoliitti.com/images/">Testing Responsive Images</a></li>
<li><a href="http://www.headlondon.com/our-thoughts/technology/posts/creating-responsive-images-using-the-noscript-tag">Creating responsive images using the noscript tag</a></li>
</ul>
<h4 id="filestructure">Assumed file structure</h4>
<p>In this variation, the file path isn’t included in the HTML document. Instead, it is assumed that the images are put on the server in a regular fashion. For example, all small images might be in /images/sml/ whereas large images are in /images/lrg/.</p>
<p>If this is true, then the html doesn’t need to provide both paths. It just needs to provide the image filename (e.g., boat.jpg) and then let javascript modify the src to be appropriate for the size of the screen (/images/lrg/boat.jpg for desktop).</p>
<h5>Examples of this approach</h5>
<ul>
<li><a href="https://github.com/allmarkedup/responsive-images-alt">responsive-images-alt</a></li>
<li><a href="http://adaptive-images.com">Adapative images</a></li>
</ul>
<h4 id="dynamic-filenames">Dynamic file names</h4>
<p>One of the things that I suggested in part 1 was that we might need <a href="http://www.cloudfour.com/responsive-imgs/#arbitrarysize">arbitrary image sizes</a>. Some of the solutions are built around the assumption that you can pass the dimensions that you want in the url and get back an image at that size.</p>
<p>Because the images are resized on the fly, there is no need to store alternative file paths in the HTML document. Javascript will modify the filename from something like ‘boat.jpg’ to ‘boat-480&#215;200.jpg’. There is no issue with caching or CDNs because each image is unique.</p>
<h5>Some images cannot simply be resized</h5>
<p>This approach doesn’t provide a good solution for <a href="http://www.cloudfour.com/responsive-imgs/#artdirection">manually choosing images at different sizes</a>. It assumes that resizing images will work in all cases which we know is not true.</p>
<h5>Examples of this approach</h5>
<ul>
<li><a href="https://github.com/filamentgroup/Responsive-Images/tree/meaningful-base">Responsive Images JS meaningful branch</a></li>
<li><a href="http://blog.trasatti.it/2011/05/responsive-images-and-tinysrc.html">Responsive images and tinySrc</a></li>
</ul>
<h3 id="htaccess">Role of .htaccess (or similar rewrite rules)</h3>
<p>Many of the solutions rely on server rewrite rules. The examples are usually written using Apache .htaccess files, but they could be any sort of rewrite rule.</p>
<p>Lets look at a snippet of the .htaccess file from <a href="https://github.com/filamentgroup/Responsive-Images/tree/cookie-driven">Responsive Images JS cookie-based branch</a> to see how rewrite rules are being used:</p>
<p><code>RewriteEngine On<br />
#large cookie, large image<br />
RewriteCond %{HTTP_COOKIE} rwd-screensize=large<br />
RewriteCond %{QUERY_STRING} large=([^&#038;]+)<br />
RewriteRule .* %1 [L]<br />
</code></p>
<p>The first line turns rewrite rules on. Next comes a couple of conditions (RewriteCond). The first checks to see if there is a cookie called rwd-screensize that has the value of large. The second checks to see if the query string for the url contains a value for large. This .htaccess file is looking for something like:</p>
<p><code>&lt;img src="small.jpg?large=large.jpg"&gt;</code></p>
<p>If both conditions are met&mdash;the cookie is set to large and there is a large value in the query string&mdash;then the rewrite rule will send the file that was specified in the query string (in the example above, that would be large.jpg).</p>
<p>The rwd-screensize cookie is set by javascript after it tests for the screen size.</p>
<h3 id="preventdownload">How do you prevent the browser from downloading multiple images?</h3>
<p>With the basics out of the way, we can now get to the tricky part. As mentioned in part 1, intercepting the browser before it starts downloading images so that you can evaluate and possibly change the source of those images is tricky and may result in race conditions.</p>
<p>Now that the dynamic base tag has been ruled out, there are two main techniques that remain.</p>
<h4 id="cookies">Set a cookie</h4>
<p>This is the method that the Filament Group settled on for the Boston Globe. Javascript is inserted into the head of the document so that it evaluates as soon as possible.</p>
<p>After it determines the screen size, it sets a cookie. Every subsequent image request sent from the browser will include the cookie. The server can use the cookie to determine the best image to sent back to the user.</p>
<h5>Potential problems</h5>
<p>If the browser doesn’t support cookies or the user blocks them, then the javascript will have no effect.</p>
<p>Also, Yoav Weiss has done some testing and <a href="http://blog.yoav.ws/2011/09/Preloaders-cookies-and-race-conditions">shared results</a> that indicate that duplicate files will be downloaded by IE9. Firefox will download duplicate files if the script is external, but not if it internal. This suggests that cookies may also be subject to the race condition problem that caused us to abandon the dynamic base tag approach.</p>
<h5>Examples of this approach</h5>
<ul>
<li><a href="https://github.com/filamentgroup/Responsive-Images/tree/cookie-driven">Responsive Images cookie branch</a></li>
<li><a href="http://blog.keithclark.co.uk/responsive-images-using-cookies/">Responsive images using cookies</a></li>
<li><a href="https://github.com/allmarkedup/responsive-images-alt">responsive-images-alt</a></li>
</ul>
<h4 id="noscript">Noscript tag</h4>
<p>Within the last couple of months, new techniques have emerged that use the noscript tag as a way to prevent extra downloads. The first post I saw describing this technique was by <a href="https://twitter.com/#!/tiny_m">Mairead Buchan</a>. She describe it as having “<a href="http://www.headlondon.com/our-thoughts/technology/posts/creating-responsive-images-using-the-noscript-tag"> the elegance of a wading hippo</a>”. Despite that description, I think this technique holds promise.</p>
<p>A <a href="http://www.monoliitti.com/images/">cleaner implementation of the noscript approach</a> was created independently by <a href="http://twitter.com/#!/apeisa">Antti Peisa</a>. Here is the html:</p>
<p><code><br />
&lt;noscript data-large='Koala.jpg' data-small='Koala-small.jpg' data-alt='Koala'&gt;<br />
&lt;img src='Koala.jpg' alt='Koala' /&gt;<br />
&lt;/noscript&gt;<br />
</code></p>
<p>The values for the various sizes of image tags are stored in the data attributes on the noscript tag itself. Antti then provides sample jQuery code used to process the image:</p>
<p><code style="white-space:nowrap;overflow:scroll;"><br />
$('noscript[data-large][data-small]').each(function(){<br />
&nbsp;&nbsp;&nbsp;&nbsp;var src = screen.width >= 500 ? $(this).data('large') : $(this).data('small');<br />
&nbsp;&nbsp;&nbsp;&nbsp;$('&lt;img src="' + src + '" alt="' + $(this).data('alt') + '" /&gt;').insertAfter($(this));<br />
});<br />
</code></p>
<p>These lines go through the document to find noscript tags with the appropriate data attributes. It tests for the screen size and then inserts a new img tag with the appropriate image path and alt tag.</p>
<h5>No race conditions!</h5>
<p>When using the noscript tag, there are no rendering race conditions. The image in the noscript tag never starts downloading. Mairead explained that “<a href="http://www.headlondon.com/our-thoughts/technology/posts/creating-responsive-images-using-the-noscript-tag">it works because children of the &lt;noscript&gt; tag are not added to the DOM</a>”.</p>
<p>This makes sense. The browser knows if javascript is available before it starts rendering a page. If javascript is available, there is no reason to worry about doing anything with items inside the noscript tag. If they aren’t getting added to the DOM, they certainly aren’t going to get downloaded.</p>
<p>This technique also has fallbacks if javascript isn’t enabled and doesn’t rely on cookies or htaccess files.</p>
<h5>Potential gotchas</h5>
<p>The biggest gotcha will be devices that profess to support javascript, but have poor implementations. For example, Blackberry 4.5 has javascript, but javascript cannot manipulate the DOM. Ergo, the noscript tag will not get used because scripts are available, but the script won’t successfully add a new img tag so no images will show.</p>
<p>Please note, this is speculation on my part. I know how Blackberry 4.5 behaves, but I haven’t tested this particular approach on a 4.5 device.</p>
<p>Even though this approach does not create a race condition, it is important that the javascript execute as quickly as possible. Inserting all of these images may require the browser to reflow the page. It also may cause the browser to load assets less efficiently because it cannot start prefetching assets.</p>
<p>Because of the need to execute as quickly as possible, it makes sense to remove the jQuery dependency from Antti’s javascript and put the code in the head of the document.</p>
<h5>Examples of this approach</h5>
<ul>
<li><a href="http://www.headlondon.com/our-thoughts/technology/posts/creating-responsive-images-using-the-noscript-tag">&#8220;Creating responsive images using the noscript tag</a></li>
<li><a href="http://www.monoliitti.com/images/">Testing Responsive Images</a></li>
<li><a href="https://gist.github.com/1200270">Responsive context aware images without cookies or server logic</a></li>
</ul>
<h4>Is screen size the right thing to look at?</h4>
<p>Most of these techniques rely on the size of the screen to determine what the image size should be. Andy Hume points out that the size of the screen may be misleading. He <a href="http://blog.andyhume.net/content-aware-responsive-images">writes</a>:</p>
<blockquote><p>The content driven approach to fixing this is to decide which image to load based on whether the image will be stretched beyond its true pixel width. If you stretch an image beyond its true width it begins to look pixelated or blurry. In this scenario, we want to load in a higher resolution version of the image.</p></blockquote>
<p><a href="https://github.com/ahume/Responsive-Images">Andy’s fork of the Responsive Images JS</a> tackles this problem (and adds support for nginx).</p>
<h3>Boston Globe Responsive IMGs are Busted</h3>
<p>I’ve been looking forward to the Boston Globe’s launch for quite some time. It is a tremendous feat of engineering and design. It has the volume of traffic necessary to test different approaches to responsive IMGs and see what works and what doesn’t.</p>
<p>The technique that they chose to use combines data attributes with cookies. Unfortunately, responsive IMGs are currently broken on the Boston Globe site. This is a known problem and they are working on fixing it.</p>
<p>The upshot is that we don’t yet have a large scale deployment of any of these techniques that we can interrogate and point to as validation that a particular combination is battle-hardened.</p>
<h3 id="mostpromising">Most promising javascript only techniques</h3>
<p>In my mind, cookies plus data-src and noscript are the two most promising techniques. Both have problems, but they have far fewer gotchas than other approaches.</p>
<h2 is="serverside">Server side solutions</h2>
<p>Most of the javascript techniques require little, if any, support from the server. There are alternate approaches that leverage the server for a bunch of the heavy lifting.</p>
<h3 id="uasniffing">User agent string parsing</h3>
<p>A few people have demonstrated solutions that do light-weight user agent string parsing to identify various mobile phones. If the user agent can be identified as iPhone or Android, then declare the device mobile and set the image size appropriately.</p>
<p>Unlike a lot of developers, I don’t have a problem with device detection based on user agent string. But if you’re going to start doing it for mobile, you have to take on real device detection via WURFL, Device Atlas, etc. Simplistic regular expression matching and assumptions about screen sizes isn’t going to work.</p>
<h3 id="devicedetection">Device detection</h3>
<p>There are a couple of different approaches that rely on device detection to determine the screen size and deliver an appropriate image back. Device detection databases are pretty good about having basic information like screen size.</p>
<h4 id="tinysrc">Sencha.io Src (formerly called TinySRC)</h4>
<p><a href="http://twitter.com/jamespearce">James Pearce</a> created a fantastic service called TinySRC. He later went to work for Sencha and TinySRC became Sencha.io Src. <a href="http://www.sencha.com/products/io/">Sencha.io Src</a> automatically resizes images for you. You reference Sencha.io Src in your img stag like this:</p>
<p><code>http://src.sencha.io/http://www.myapp.com/myimg.jpg<br />
</code></p>
<p>When a browser requests the url above, Sencha.io Src will look up the user agent of the device making the request to determine what size image is appropriate. It will then grab the image from your server and resize it. It then caches the resized image so that subsequent requests can be served quickly.</p>
<p>In addition to the automatic mode, Sencha.io Src will also allow you to specify specific sizes that you would like the image resized to.</p>
<h5>Combining Responsive Images JS with Sencha.io Src</h5>
<p><a href="http://twitter.com/#!/andreatrasatti">Andrea Trasatti</a> forked Scott Jehl’s Responsive Images JS to <a href="http://blog.trasatti.it/2011/05/responsive-images-and-tinysrc.html">combine responsive IMGs with TinySRC</a>. The script finds the screen size using javascript and then uses htaccess to request the image at the correct size from Sencha.io Src.</p>
<p>Andrea’s version was written fairly early. It still uses dynamic base tags, url parameters, and results in “1 HTTP request for every image that we might avoid”. But all of these problems could be remedied by combining what Andrea started with some of the newer approaches.</p>
<h5>Potential drawbacks</h5>
<p>First, if you have a religious aversion to device detection, then you probably don’t want to use Sencha.io Src or you need to use it in a scenario where can specify the image size that you want.</p>
<p>As an aside, I’ve found it funny to see people who speak ill of device detection and user agent strings suggest that people use TinySRC. I once saw a slide deck that dismissed device detection and then a couple of slides later talked about how great TinySRC is. If only they knew. <img src='http://www.cloudfour.com/wp-includes/images/smilies/icon_smile.gif' alt=':-)' class='wp-smiley' /> </p>
<p>On a more practical level, you have to evaluate whether or not the service will remain up and what happens if all of your content points to sencha urls that suddenly go away. I don’t think Sencha is going to go anywhere anytime soon. I know James well enough to know he’ll want to keep this service running forever if he can. But even all that said, looking at the long term availability of a service is something that needs to be considered.</p>
<h4 id="wurfl">WURFL-based solution</h4>
<p>WURFL is the largest open source device database. After attending the <a href="http://bdconf.com">Breaking Development</a> conference earlier this month, Carson McDonald was inspired to develop a <a href="https://github.com/carsonmcdonald/ServerSideResponsiveImageExample#readme">WURFL-based solution for images</a>. It’s awesome to see something come together so quickly after the conference.</p>
<p>(BTW, <a href="http://bdconf.com">Breaking Development</a> is the best conference in North America for web on mobile. Registration for the next event opens today. You should attend!)</p>
<p>Carson notes that his approach will likely have the same problems with CDNs and caching because different size images come from the same url.</p>
<h2>Image resizing services</h2>
<h3>Google’s mod_pagespeed</h3>
<p>Google’s <a href="http://code.google.com/speed/page-speed/docs/payload.html#ScaleImages">mod_pagespeed Apache module</a> automates many performance tasks and includes an option to scale any images on the fly. There are many ways to scale images (GD, ImageMagick, etc.). I decided to call out mod_pagespeed because it was one I hadn’t considered until I saw it suggested in a forum. I don’t know of anyone who has explored how it might be used in an responsive IMGs solutions.</p>
<h2>Combining client and server approaches</h2>
<h3 id="adaptiveimages">Adaptive Images</h3>
<p>As you can probably tell by now, there are few solutions that you can simply install and forgot about. Most require at minimum changes to the way you mark up the page. The two solutions that come closest to be plug and play are Sencha.io Src and <a href="http://adaptive-images.com/">Adaptive-Images.com</a>.</p>
<p>Adaptive images was developed by <a href="http://twitter.com/responsiveimg">Matt Wilcox</a>. It turns the premise of Responsive IMGs on its head by assuming that the markup on the page will contain the large versions of images and will not start with the mobile versions.</p>
<p>The solution consists of three pieces:</p>
<p>1. A small snippet of javascript placed in the head that sets a cookie with the screen width and height.</p>
<p><code>&lt;script&gt;document.cookie='resolution='+Math.max(screen.width,screen.height)+'; path=/';&lt;/script&gt;</code></p>
<p>2. A .htaccess that rewrites all requests for images to a php file. You declare directories that you want to exempt from this rewrite. For example, you don’t want your media query savvy CSS background images getting routed through the php file.</p>
<p>3. The php file which resizes the image based on breakpoints that you can configure.</p>
<p>The best part of Matt’s solution is that as long as you can separate out your image files so you can exclude ones that shouldn’t be resized, you can implement this technique without making any changes to your existing markup. Existing pages and posts will suddenly have different image sizes.</p>
<h5>And now for the problems</h5>
<p>Come on, by now you weren’t expecting it to be that simple did you?</p>
<p><strike>Because the images start with the large size, if javascript is not available, the large size will be delivered. The most common devices to not have javascript support are older feature phones. The type of devices that will choke and even crash on large images are older feature phones.</strike></p>
<p><strike>This technique also suffers from the same race conditions that most of the javascript solutions do. The cookie has to be set early to avoid extra downloads.</strike></p>
<p>Update: <a href="http://www.cloudfour.com/responsive-imgs-part-2/#comment-33653">Matt commented below</a> and points out that the default settings will result in a small image being delivered if javascript isn’t present. The markup will point to a large version, but the php file returns a small version. All of this is configurable.</p>
<p>Also, he is right that the result of the race condition <a href="http://www.cloudfour.com/responsive-imgs-part-2/#comment-33660">would not be multiple downloads</a>. I think the race condition still exists with different drawbacks, but I’m going continue the conversation in the comments where Matt and I can converse.</p>
<p>I also missed the fact that the url will stay the same regardless of the size of image which can cause issues with CDNs and proxy caching as noted earlier.</p>
<h3 id="yiibu">Yiibu profile approach</h3>
<p>Brian and Stephanie Rieger presented the work they did for <a href="http://browser.nokia.com">browser.nokia.com</a> at Breaking Development conference. For that project, they invented a new way to combine client side information with device detection.</p>
<p>When a browser first requests something from the server, they don’t know anything about the device. So they check with a device detection database to see what they can find out about the size of the screen (and other details). They then check their own local database of tacit knowledge. This a database of things they’ve learned about how specific browsers work and any overrides they want to use. They use the combination of this information to deliver the appropriate HTML, javascript and images.</p>
<p>Once the browser gets this information, a javascript runs that tests the various aspects of the browser including screen size. It then stores this information in a profile cookie.</p>
<p>On the second request, the server receives the profile cookie and compares it to the information it has in its tacit database. It may update the tacit database. It combines the information into a revised profile combining server side information with client feature detection data.</p>
<p>I’m likely doing a poor job of describing the solution. Your best bet is to look at their slides:</p>
<ul>
<li><a href="http://www.slideshare.net/yiibu/adaptation-why-responsive-design-actually-begins-on-the-server">Adaptation: Why responsive design actually begins on the server</a></li>
<li><a href="http://www.slideshare.net/yiibu/pragmatic-responsive-design">Pragmatic Responsive Design</a></li>
</ul>
<p>This combined technique mitigates the problem of first load without any of the race conditions or potential problems that the client-only solutions have. It also extends beyond images to other content and javascript.</p>
<h5>Sounds great. What’s the catch?</h5>
<p>It is a complex system and requires significant changes to infrastructure to support. Bryan and Stephanie have published the approach, but the code isn’t available for download. It may be coming, but they took a well-deserved vacation after spending most of the summer working on the Nokia Browser project.</p>
<p>Probably the biggest problem with this approach is that most of us are not the Riegers. They have been doing mobile web for years. Their tacit knowledge of devices is exceptional. Freaking geniuses. That’s hard to replicate.</p>
<p>The same is true of the Boston Globe project. The team working on that included significant portions of the jQuery Mobile team and the <a href="http://twitter.com/beep">guy who coined the phrase responsive web design</a>. Few of us are going to be so lucky on our next project. <img src='http://www.cloudfour.com/wp-includes/images/smilies/icon_smile.gif' alt=':-)' class='wp-smiley' /> </p>
<h2>Summary</h2>
<p>As I’ve reviewed the various techniques, I keep thinking back to something Andy Hume <a href="http://www.cloudfour.com/responsive-imgs/#comment-33388">said</a> in response to part 1:</p>
<blockquote><p>Our current solutions are hugely dependant on the current (and undefined) behaviour of browsers in regard to the page-load race conditions you mention. For example, most responsive image implementations would be compromised if a particular type of look-ahead pre-parser (<a href="http://goo.gl/TyzTi">http://goo.gl/TyzTi</a>) began to speculatively download images before actually parsing the HTML or executing any script. (<strong>I half expect us to get bitten by this any day.</strong>) One way or the other we need to consort with browser makers to get future-friendly.</p></blockquote>
<p>That’s the truth of it. Most of these techniques are based on our hope that browsers continue to download assets in the order we have observed to date. If the the order changes or if browsers start pre-parsing more aggressively, the whole house of cards may fall down.</p>
<p>In part 3 of this series, I’m going to look at the conversations going on about ways to change the img tag or replace it with something that will work better with multiple file sources.</p>
<h4>Sources and Acknowledgments</h4>
<p>I reviewed 18 different techniques for this post. My notes are captured in a <a href="https://docs.google.com/spreadsheet/ccc?key=0AisdYBkuKzZ9dHpzSmd6ZTdhbDdoN21YZ29WRVdlckE&#038;hl=en_US">Google spreadsheet</a> that you are welcome to review for detailed comments on each library. Thanks to everyone for publishing their thoughts and experiments. I learned a lot from each one.</p>
<p>This series wouldn’t have been possible without the assistance of <a href="http://twitter.com/scottjehl">Scott Jehl</a> and <a href="http://twitter.com/byranrieger">Bryan</a> and <a href="http://twitter.com/stephanierieger">Stephanie Rieger</a>. Scott in particular helped me sort out the problems with the main Responsive Images JS library. Thanks to all three of you for putting up with my many naive questions and for taking the time to explain all of the work you’ve been doing!</p>
]]></content:encoded>
			<wfw:commentRss>http://www.cloudfour.com/responsive-imgs-part-2/feed/</wfw:commentRss>
		<slash:comments>37</slash:comments>
		</item>
		<item>
		<title>Responsive IMGs &#8212; Part 1</title>
		<link>http://www.cloudfour.com/responsive-imgs/</link>
		<comments>http://www.cloudfour.com/responsive-imgs/#comments</comments>
		<pubDate>Tue, 27 Sep 2011 23:08:10 +0000</pubDate>
		<dc:creator>Jason Grigsby</dc:creator>
				<category><![CDATA[Mobile Web and Services]]></category>
		<category><![CDATA[Top Stories]]></category>

		<guid isPermaLink="false">http://www.cloudfour.com/?p=1918</guid>
		<description><![CDATA[In my post “Where are the Mobile First Responsive Web Designs”, I noted that one of the first things I look for when trying to determine whether or not a responsive web design is “mobile first” is whether or not it has a strategy for handling the IMG tag. A recent Smashing Magazine round up [...]]]></description>
			<content:encoded><![CDATA[<p>In my post “<a href="http://www.cloudfour.com/where-are-the-mobile-first-responsive-web-designs/">Where are the Mobile First Responsive Web Designs</a>”, I noted that one of the first things I look for when trying to determine whether or not a responsive web design is “mobile first” is whether or not it has a strategy for handling the IMG tag.</p>
<p>A recent Smashing Magazine <a href="http://www.smashingmagazine.com/2011/07/22/responsive-web-design-techniques-tools-and-design-strategies/">round up of responsive web design techniques</a> included several new approaches for handling IMG tags which makes it the perfect time to dig into this problem and the potential solutions in more depth.</p>
<h3>Why IMG Tags Suck for Responsive Web Design</h3>
<p>If you want your site to load as quickly as possible, you do want to deliver larger files than are needed. Many responsive web design sites provide mobile devices images at sizes appropriate for desktop and ask the mobile device to resize the image.</p>
<p>In my research, I found nearly <a href="http://www.cloudfour.com/css-media-query-for-mobile-is-fools-gold/">80% decrease in file size by delivering images at the actual size</a> they were going to be used on a mobile device.</p>
<p>So what’s the problem with the IMG element in responsive designs? Unlike CSS images which can provide different source files based on screen resolution using media queries, IMGs have a single source attribute.</p>
<h3>What are Responsive IMGs?</h3>
<p>Responsive IMGs are images delivered using the HTML IMG tag that come from different sources depending the screen size. There are many different techniques for accomplishing Responsive IMGs.</p>
<p>As far as I can tell, Scott Jehl first coined the phrase <a href="http://filamentgroup.com/lab/responsive_images_experimenting_with_context_aware_image_sizing/">Responsive Images</a> to describe a javascript solution to the img source problem. He also referred to Responsive IMGs as a general term <a href="http://twitter.com/#!/scottjehl/status/95505111572418561">recently</a> so I’m hopeful he doesn’t mind the fact that I’m extending his definition to describe any technique that attempts to provide images at an appropriate size for a responsive design.</p>
<h3 id="challenges">Responsive IMGs Challenges</h3>
<p>There are some common challenges that any Responsive IMG technique will face. As we review the various techniques that have been proposed, we need to keep these challenges in mind.</p>
<h4>Minimum Bar: Start with Mobile, No Extra Downloads</h4>
<p>Scott Jehl set a <a href="http://twitter.com/#!/scottjehl/status/95505111572418561">minimum bar for Responsive IMGs</a> by stating they must do the following:</p>
<ol>
<li>Start with mobile img</li>
<li>Upgrade to larger size without downloading both</li>
</ol>
<p>Both of these are worthy and necessary goals.</p>
<h4 id="firstload">The First Page Load Problem</h4>
<p>Any solution that relies on client-side scripting to make a decision about what image source to display will suffer from a first page load problem. The first time someone visits a site, the server won’t know what size image to provide.</p>
<p><a href="http://www.cloudfour.com/wp-content/uploads/2011/09/unknown-vessel-full.jpg"><img src="http://www.cloudfour.com/wp-content/uploads/2011/09/unknown-vessel.jpg" alt="Hmm, Huston - we have a problem... no idea what we can deliver to this client" /></a></p>
<p class="caption" style="font-size:x-small">Image from Bryan Rieger’s <a href="http://www.slideshare.net/yiibu/muddling-through-the-mobile-web">Muddling Through the Mobile Web</a> presentation, photo by <a href="http://www.flickr.com/photos/wscullin/3770015203">wscullin</a>, licensed under <a href="http://creativecommons.org/licenses/by/2.0/">Creative Commons</a>.</p>
<p>If javascript is added that determines what image size is appropriate, then this information can be retained for the user session via cookies or similar techniques. In theory, on subsequent requests the server can make a decision about what size image to include in IMG tag.</p>
<p>FWIW, the speed of first load is a big deal. The speed of a person’s first experience can dictate their impression of a product and company. Google, Yahoo and others have talked about how minor speed differences makes a big difference in usage of their products.</p>
<h4 id="raceconditions">Rendering Race Conditions</h4>
<p>Techniques that rely on adjusting the image source attribute via javascript need to make sure that the modification happens before the image requests start.</p>
<p>Browser makers have done a lot of work to download as many assets as possible at the same time. Usually this is a good thing. But in the case of responsive imgs, the javascript needs to evaluate what size image to retrieve before any image requests start.</p>
<p>A lot of earlier work was done using dynamic base tags. This worked when the javascript was inline in the head tag, but failed to prevent images from downloading twice when an external javascript file is used.</p>
<p>The upshot is that nearly every client side technique requires deep understanding of the order in which different browsers process and download assets. Or more realistically, each approach needs to be tested extensively.</p>
<h4 id="cdn_caching">Content Delivery Networks and Caching</h4>
<p>When you deliver different size images at the same url, you can run into problems with CDNs and other caching at the edge of the network. If the first person to request an image is on a mobile phone, people who follow via the same CDN or cache will also see the mobile-optimized image even if they are on desktop unless consider CDNs in your strategy.</p>
<h3 id="futurefriendly">Future Friendly Responsive IMGs</h3>
<p>If we accept that the “quantity and diversity of connected devices—many of which we haven&#8217;t imagined yet—will explode”, then we need to consider look for solutions that are <a href="http://futurefriend.ly/">future friendly</a>. In addition to the current experimentation, we need to start thinking about what a long term solution might look like.</p>
<p>For example, many of the early solutions for Responsive IMGs consist of two size images: one for desktop and one for mobile screen sizes. Will two image sizes really suffice for all of the devices that are coming?</p>
<p>Also, a lot of the solutions right now tackle one part of the problem. They may tackle the client side changes to switch the image source, but leave as an exercise for the developer to figure out how image resizing will be handled. For shared libraries, limited scope makes sense.</p>
<p>But as we look at what systems will need to do to be successful in the future, we need to think about what we want out of both the server and client side.</p>
<p>Here are some of the things that I think a future friendly technique will need to consider:</p>
<ul>
<li id="arbitrarysize"><strong>Support arbitrary image resizing</strong> &mdash; We cannot anticipate what screen sizes may be coming. We need systems that handle image resizing automatically and support any arbitrary size needed for a particular page.</li>
<li id="artdirection"><strong>Art direction can override automatic resizing</strong> &mdash; Not every image can be resized without losing the meaning of the image. Sometimes cropping an image may work better than resizing it. Automatic tools need to easily support manual override.</li>
</ul>
<p style="text-align:center">
<a href="http://www.cloudfour.com/wp-content/uploads/2011/09/unreadable-image-full.png"><img src="http://www.cloudfour.com/wp-content/uploads/2011/09/unreadable-image.png" alt="automagically scaling detailed images isn’t ideal" /></a>
</p>
<ul>
<li id="highres"><strong>Support for higher resolution displays</strong> &mdash; What do we do with the iPhone 4’s <a href="http://www.apple.com/iphone/features/retina-display.html">retina display</a> and other devices sharing similar high resolution screens? It is an open question about whether we should deliver higher resolution images to those devices given the performance hit that will occur if the person is on a slow connection.<br />&nbsp;<br />
But regardless of how we chose to handle it right now, it is clear that the trend towards more pixels per inch on displays is not going away. If anything, we’re seeing indicators that higher density will soon be available on desktop displays as well.</p>
<p>This means that our current definition of what is a large image for web is probably too small for future devices. With that in mind, it probably makes sense for systems to accept the highest resolution image possible&mdash;even if that resolution isn’t currently being used&mdash;so that when new devices become available the high resolution source is already available and hasn’t been lost.</li>
<li id="speed"><strong>Connection speed should be part of the criteria</strong> &mdash; We can be much smarter about the size of the image we deliver if we can tell something about the network connection. We need an easier way to get at this information.</li>
<li id="new-img-tag"><strong>A replacement for the IMG tag?</strong> &mdash; All of the responsive image solutions are attempting to deal with the fact that the image tag has only a single source. There have been various proposals recently to take a new look at what the tag should be and see if we can find a long term replacement.</li>
</ul>
<p>That’s my short list. <strong>What would you add?</strong></p>
<p>In <a href="http://www.cloudfour.com/responsive-imgs-part-2/">part 2</a>, I’ll take a closer look at the current alternatives for responsive imgs and which ones hold the most promise.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.cloudfour.com/responsive-imgs/feed/</wfw:commentRss>
		<slash:comments>22</slash:comments>
		</item>
		<item>
		<title>Links Don’t Open Apps</title>
		<link>http://www.cloudfour.com/links-do-not-open-apps/</link>
		<comments>http://www.cloudfour.com/links-do-not-open-apps/#comments</comments>
		<pubDate>Tue, 17 May 2011 05:47:35 +0000</pubDate>
		<dc:creator>Jason Grigsby</dc:creator>
				<category><![CDATA[Mobile Web and Services]]></category>
		<category><![CDATA[Top Stories]]></category>
		<category><![CDATA[links]]></category>
		<category><![CDATA[mobile]]></category>
		<category><![CDATA[mobileweb]]></category>
		<category><![CDATA[web]]></category>

		<guid isPermaLink="false">http://www.cloudfour.com/?p=1641</guid>
		<description><![CDATA[Why do you need a mobile web site? Because links don't open apps.]]></description>
			<content:encoded><![CDATA[<p>Are you having trouble convincing people that they need to develop a mobile web site as part of their overall mobile strategy?</p>
<p>I have a solution for you. Ask the people you need to convince if they do any of the following:</p>
<ul>
<li>Send email to their customers?</li>
<li>Participate in social media?</li>
<li>Search engine optimization?</li>
<li>Advertise online?</li>
</ul>
<p>Each one of those marketing efforts is based on links. <strong>And links don’t open apps.</strong></p>
<p>It seems like a basic concept, but the fact that links can only reliably open web pages is often forgotten.</p>
<p>This is one reason why mobile web has to be part of every company’s strategy. When someone encounters a link via an email newsletter or shared via a social network, they should be able to view that link no matter where they are and no matter what device they are using.</p>
<h3>Technically True vs. Practical Reality</h3>
<p>Inevitably, when I talk about how links don&#8217;t open apps at a conference, someone who wasn&#8217;t in the audience will point out that on some platforms like iOS, you can <a href="http://developer.apple.com/library/ios/#featuredarticles/iPhoneURLScheme_Reference/Introduction/Introduction.html#//apple_ref/doc/uid/TP40007891-SW1">register URL schemes</a> to open apps.</p>
<p>While this is technically true, it isn&#8217;t practical for most communication because:</p>
<ul>
<li>Not every platform offers equivalent functionality. On Android, the way to invoke applications is intents which works very differently.</li>
<li>Even if you could somehow create the same url scheme on every mobile platform, the url would only work if the user had your application installed which you can&#8217;t guarantee nor control.</li>
</ul>
<p>While saying that links don’t open apps isn&#8217;t “technically” true, it is a practical reality.</p>
<h3>Power of Hyperlinks</h3>
<p>The realization that links don&#8217;t open apps has triggered for me a renewed appreciation of the power of hyperlinks. When people talk about the differences between native apps and mobile web, they usually talk about difference like performance, cross platform development, and other technical factors.</p>
<p>Rarely do we talk about hyperlinks and the power it provides the web. No native platform will be able to replicate the universal utility of links any time soon.</p>
<p>We should stop worrying about whether or not native apps can do certain things better than web technology, and instead talk about what makes the web unique, powerful, and universal.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.cloudfour.com/links-do-not-open-apps/feed/</wfw:commentRss>
		<slash:comments>15</slash:comments>
		</item>
		<item>
		<title>We&#8217;re Hiring for a Mobile Developer</title>
		<link>http://www.cloudfour.com/hiring-mobile-developer/</link>
		<comments>http://www.cloudfour.com/hiring-mobile-developer/#comments</comments>
		<pubDate>Wed, 23 Mar 2011 22:00:59 +0000</pubDate>
		<dc:creator>Jason Grigsby</dc:creator>
				<category><![CDATA[Cloud Four Stories]]></category>
		<category><![CDATA[Top Stories]]></category>
		<category><![CDATA[hiring]]></category>
		<category><![CDATA[mobile]]></category>

		<guid isPermaLink="false">http://www.cloudfour.com/?p=888</guid>
		<description><![CDATA[Are you emphatically excited about mobile technology? Do you build iPhone apps in your spare time? Not sure if Androids dream of electronic sheep, but you’re working on an HTML5-based app that will answer the question definitively? We’re looking for an enthusiastic mobile developer to join our team: someone who falls on the engineering side [...]]]></description>
			<content:encoded><![CDATA[<p>Are you emphatically excited about mobile technology? Do you build iPhone apps in your spare time? Not sure if Androids dream of electronic sheep, but you’re working on an HTML5-based app that will answer the question definitively?</p>
<p>We’re looking for an enthusiastic mobile developer to join our team: someone who falls on the engineering side of the development spectrum, but is also comfortable with front-end technology.</p>
<p>We’re a small agency focused on building mobile and web solutions for our customers. We believe in cross-platform solutions and advocate a mixture of mobile web, native, and hybrid approaches to mobile development depending on the project objectives.</p>
<p>Our ideal candidate is someone who is flexible, open to new technologies, and a quick learner. Mobile is fast-paced and constantly changing. We’re looking for someone who sees opportunities and challenges amongst the many different mobile devices and their inconsistent behavior.</p>
<p>Cloud Four was founded in November 2007 by four mobile and Web enthusiasts. Our mission is to create usable, inspired mobile and web applications using standards-based technologies. Our clients range from Fortune 500 companies to local businesses, and our projects vary in audience and scope accordingly.</p>
<p>This is a full time position on-site in lovely Portland, Ore. We offer benefits including medical, dental, vision, and IRA.</p>
<h4>Job Description</h4>
<ul>
<li>Research, identify and document client technical requirements.</li>
<li>Determine and identify appropriate technologies to be used.</li>
<li>Assist with developing technical project schedules, plans, task assignments and time estimates.</li>
<li>Assist in strategic planning and requirements gathering.</li>
<li>Program mobile applications and build mobile web sites.</li>
<li>Be a positive and enthusiastic contributor to our team.</li>
<li>Actively, consistently communicate with team members about project process and progress.</li>
</ul>
<h4>Our ideal candidate is:</h4>
<ul>
<li>able to create a concise, clear plan of action from multiple input sources and stakeholders; flexible and responsive to changes in requirements and scope.</li>
<li>self-directed; takes an ownership role of complex projects.</li>
<li>strategy-focused and creative; excited to face new challenges and learn new skills.</li>
<li>deadline-driven and steadfast about meeting commitments to customers.</li>
<li>invigorated by learning new technologies and solving new problems.</li>
<li>an excellent communicator, with the ability to comprehend and articulate technical concepts, both verbally and in writing.</li>
<li>an independent learner who can quickly apply new skills productively.</li>
<li>enthusiastic about the job; enjoys solving customer needs.</li>
<li>a straightforward, honest, team player.</li>
<li>able to effectively prioritize multiple task.</li>
<li>comfortable working in a small, start-up environment.</li>
</ul>
<h4>Skills and experience we’re seeking:</h4>
<ul>
<li>3-5+ years of relevant technical experience or related background</li>
<li>Extensive experience with cross-platform JavaScript and DOM scripting</li>
<li>HTML5, XHTML, CSS</li>
<li>Server- and client-side web site or application programming (more engineering than design)</li>
<li>device detection for mobile web</li>
<li>PhoneGap or other hybrid mobile app development</li>
<li>iPhone and/or Android development</li>
<li>Strong problem solving and analysis skills</li>
<li>Strong competency in web technologies and development</li>
<li>BA/BS or equivalent</li>
</ul>
<h4>To Apply</h4>
<p>Email your cover letter and resume to <a href="mailto:jobs@cloudfour.com">jobs@cloudfour.com</a>. No recruiters please.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.cloudfour.com/hiring-mobile-developer/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>We&#8217;ll Know the Mobile Web is Ready When&#8230;</title>
		<link>http://www.cloudfour.com/well-know-the-mobile-web-is-ready-when/</link>
		<comments>http://www.cloudfour.com/well-know-the-mobile-web-is-ready-when/#comments</comments>
		<pubDate>Fri, 18 Mar 2011 18:40:50 +0000</pubDate>
		<dc:creator>Jason Grigsby</dc:creator>
				<category><![CDATA[Mobile Web and Services]]></category>
		<category><![CDATA[Top Stories]]></category>

		<guid isPermaLink="false">http://www.cloudfour.com/?p=1564</guid>
		<description><![CDATA[A recent chat with Ethan Marcotte and Scott Jehl about how they&#8217;re handling switching between desktop and mobile views led to an epiphany about mobile web and our comfort with it. We all agreed that when a mobile web site is well-design and contains all of the functionality needed, the need to switch to the [...]]]></description>
			<content:encoded><![CDATA[<p>A recent <a href="http://www.exquisitetweets.com/collection/grigs/274">chat</a> with Ethan Marcotte and Scott Jehl about how they&#8217;re handling switching between desktop and mobile views led to an epiphany about mobile web and our comfort with it.</p>
<p>We all agreed that when a mobile web site is well-design and contains all of the functionality needed, the need to switch to the desktop site goes away.</p>
<p>However, as users of sites, we don&#8217;t like it when the link to the desktop version isn&#8217;t present. Providing a link to switch to the desktop view is a safety blanket for both developers and users. </p>
<p>As users, we don&#8217;t want to see others remove the link to switch to the desktop site because we don&#8217;t yet trust people to create mobile web experiences that contain everything we need. </p>
<p>As a developers, mobile is still new enough that we&#8217;re not 100% confident that we&#8217;ve thought of everything. In some cases, we know that there are aspects of a site that could not be converted to mobile for some insurmountable reason.</p>
<p>The existence of desktop toggle is good test for when our industry has really nailed mobile. When we collectively feel the toggles are unnecessary in most cases, then we&#8217;ll know that we as web practitioners have raised the collective knowledge and skill set sufficiently.</p>
<p>We&#8217;ll know the mobile web is ready when links to the desktop version disappear.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.cloudfour.com/well-know-the-mobile-web-is-ready-when/feed/</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
		<item>
		<title>2011 is not the Year of the iPad 2. It is the Year of the Cheaper iPhone.</title>
		<link>http://www.cloudfour.com/2011-is-not-the-year-of-the-ipad-2-it-is-the-year-of-the-cheaper-iphone/</link>
		<comments>http://www.cloudfour.com/2011-is-not-the-year-of-the-ipad-2-it-is-the-year-of-the-cheaper-iphone/#comments</comments>
		<pubDate>Fri, 04 Mar 2011 00:48:32 +0000</pubDate>
		<dc:creator>Jason Grigsby</dc:creator>
				<category><![CDATA[Mobile Web and Services]]></category>
		<category><![CDATA[Top Stories]]></category>
		<category><![CDATA[android]]></category>
		<category><![CDATA[apple]]></category>
		<category><![CDATA[google]]></category>
		<category><![CDATA[ios]]></category>
		<category><![CDATA[iphone]]></category>
		<category><![CDATA[marketshare]]></category>
		<category><![CDATA[price]]></category>

		<guid isPermaLink="false">http://www.cloudfour.com/?p=1432</guid>
		<description><![CDATA[Yesterday, Apple declared that 2011 is the Year of iPad 2. Calling 2011 the year of anything other than transformation in the Middle East is crazy. But if we&#8217;re going to limit ourselves to Apple products, I think it is more likely to be the Year of the Cheaper iPhone than the iPad 2. Before [...]]]></description>
			<content:encoded><![CDATA[<p><a href="http://www.macdaddynews.com/2011/03/02/live-coverage-of-apples-ipad-2-event/"><img src="http://www.cloudfour.com/wp-content/uploads/2011/03/year-of-ipad2-225.jpg" style="float:right;border:0;margin:0 0 10px 10px;" alt="Steve Jobs on stage announcing 2011 as the year of the iPad2" /></a>Yesterday, Apple declared that 2011 is the Year of iPad 2. Calling 2011 the year of anything other than transformation in the Middle East is crazy.</p>
<p>But if we&#8217;re going to limit ourselves to Apple products, I think it is more likely to be the Year of the Cheaper iPhone than the iPad 2.</p>
<p>Before the first rumors of a cheaper iPhone surfaced, I&#8217;d been talking to friends about demographic and sales information that indicated to me that the tech press was too focused on high-end devices and missing the lower end of the market. </p>
<p>Because of this, I&#8217;m bullish on the impact of a cheaper iPhone and what it would mean for Apple&#8217;s smartphone market share. Let me explain why.</p>
<h3>The Real Reason Why Android is Successful: It&#8217;s Good Enough and Cheaper</h3>
<p>It seems like I&#8217;ve spent most of my life rooting for companies who made products that were superior in design, but lost to products that were good enough and cheaper.</p>
<p>I was flabbergasted that people would buy inferior products that promised headaches instead of joy. I thought people just didn&#8217;t understand how these inferior products were going to cost them much more in the long run with the thousand cuts of poor user experience and design.</p>
<p>At some point I realized that I wasn&#8217;t giving people enough credit. They knew that Tivo was a better product, but the DVR that the cable company gave them for free was good enough and cheaper. The same has long been true of Windows machines.</p>
<p>The problem for a lot of Apple fans is that they still can&#8217;t understand why someone would chose the obviously inferior product. M.G. Siegler of TechCrunch wrote an article entitled, &#8220;<a href="http://techcrunch.com/2010/09/05/apple-android/">Is Android Surging Only Because Apple Is Letting It?</a>&#8221; His thesis was that Android was only winning because the iPhone wasn&#8217;t available on Verizon. In the article, he wrote:</p>
<blockquote><p>
Now, don’t get me wrong, almost all Android phones are a million times better than the phones we had just a few years ago before the iPhone burst onto the scene. And if the iPhone didn’t exist, there is no question that I would use an Android phone and would probably be very happy with it. But the iPhone does exist. <strong>And I simply can’t bring myself to use an Android phone when I know a superior device is out there. That’s my only requirement for me to use a product: it has to be the best.</strong>
</p></blockquote>
<p>Most people don&#8217;t require their phones to be best. They simply want something that&#8217;s good enough to get email, text message, and browse the web. Oh and cheaper is better.</p>
<p>BTW, the predictions of <a href="http://daringfireball.net/2010/08/n92">big lines</a> to buy the Verizon iPhone <a href="http://daringfireball.net/linked/2011/02/10/verizon-iphone-lines">hasn&#8217;t panned out</a> and sales have thus far been &#8220;<a href="http://www.bgr.com/2011/02/16/exclusive-verizon-iphone-sales-fail-to-meet-expectations/">disappointing</a>.&#8221; So much for the theory that carrier exclusivity is why Android passed iPhone in market share.</p>
<h3>But Isn&#8217;t Android the Same Price as the iPhone?</h3>
<p>A common misconception about the smartphone market is that Android phones and iPhones are essentially the same price. Both the Samsung Fascinate (Galaxy S) and the iPhone 4 cost $199 with a two-year contract.</p>
<p>But the Android phones don&#8217;t stay at their launch price point. Verizon had a large television campaign last fall that offered a buy one get one free offer for the Fascinate. Verizon&#8217;s site currently lists 13 different Android models for under $100.</p>
<p>That&#8217;s why the <a href="http://www.cloudfour.com/the-importance-of-average-selling-price/">average selling price (ASP) is so important</a>. On average, the iPhone costs twice as much as its nearest rival:</p>
<p style="text-align:center"><a href="http://www.cloudfour.com/wp-content/uploads/2011/02/asymco-asp-full.png"><img src="http://www.cloudfour.com/wp-content/uploads/2011/02/asymco-asp-500.png" style="width:500px;height:358px;border:none;" alt="Chart comparing handset ASP" /></a></p>
<p style="text-align:center;font-size:90%">Q2 2007 to Q2 2010 Average Selling Price. Source: <a href="http://www.asymco.com/2010/08/11/is-an-iphone-worth-8-nokia-phones-or-2-blackberries/">Asymco</a></p>
<p>The lower ASP for Android devices is what allows carriers and retailers to offer steep discounts on these devices. And cheaper phones are important because there is a lot of growth at the lower ends of the market.</p>
<h3>Have you heard of the Samsung Freeform?</h3>
<p>No? I hadn&#8217;t either until I noticed it was the number three phone in terms of impressions in <a href="http://www.millennialmedia.com/wp-content/images/mobilemix/MM-MobileMix-March2010.pdf">Millennial Media&#8217;s March 2010 mobile mix report</a>.</p>
<p style="text-align:center"><a href="http://www.millennialmedia.com/wp-content/images/mobilemix/MM-MobileMix-Dec2010.pdf"><img src="http://www.cloudfour.com/wp-content/uploads/2011/03/freeform.jpg" style="border:none"; alt="Table of top phones in Dec 2010 on Millennial Media network. Freeform is number six." /></a></p>
<p>Millennial Media&#8217;s report tracks the number of ad impressions delivered to a given phone. As you might expect, the top phone is the iPhone and the top ten list contains a mix of Android, Blackberry and iOS devices. </p>
<p><img src="http://www.cloudfour.com/wp-content/uploads/2011/03/samsung-freeform-metropcs-sml.jpg" style="float:left;margin:0 10px 10px 0;" alt="Photo of Samsung Freeform w/ MetroPCS on screen." />But amongst those well-known devices is the Samsung Freeform. The Freeform was still the number six phone in the report as late as December of last year. </p>
<p>The inclusion of the Samsung Freeform on this list stood out like a sore thumb. I had to know more about this phone.</p>
<p>It turns out that the Samsung Freeform is one of those feature phones that start to edge into smartphone-like capabilities. It has a keyboard for texting and a reasonably capable browser.</p>
<p>The phone is only available through MetroPCS. Right now, you can get it for $49 unsubsidized.</p>
<p>But more importantly, you can get <strong>unlimited voice, text and web on the Samsung Freeform for only $40 per month</strong>.</p>
<h3>Growth at the Low End of Smartphone Market</h3>
<p>Around the same time I learned about the Freeform, a <a href="http://www.comscore.com/Press_Events/Press_Releases/2010/3/UK_Leads_European_Countries_in_Smartphone_Adoption_with_70_Growth_in_Past_12_Months">Comscore survey in Europe</a> found that &#8220;smartphones are generally seen as luxury devices that come with big price tags and high monthly tariffs, yet the largest segment of the market and the one demonstrating greatest momentum is actually the low to mid tier.”</p>
<p>I haven&#8217;t found a similar study of growth rates in the United States, but I have found other evidence that seems to support the theory that significant growth in smartphone market is happening at the low price points.</p>
<h4>U.S. Minorities Lead Caucasians in Mobile</h4>
<p>Over the last year, there have been numerous studies showing that minority adoption and usage of mobile is outpacing caucasians:</p>
<p style="text-align:center"><a href="http://blog.nielsen.com/nielsenwire/consumer/among-mobile-phone-users-hispanics-asians-are-most-likely-smartphone-owners-in-the-u-s/"><img src="http://www.cloudfour.com/wp-content/uploads/2011/03/smartphone-race-ethnicity-recent1-500.png" style="border:none;" alt="Smartphone Penetration by Race/Ethnicity"/></a></p>
<p>Pew Internet Research found that <a href="http://www.pewinternet.org/Reports/2010/Mobile-Access-2010/Summary-of-Findings.aspx">African-Americans and Latinos use more mobile data applications</a>. Nielsen found that a higher percentage of minorities both <a href="http://blog.nielsen.com/nielsenwire/consumer/among-mobile-phone-users-hispanics-asians-are-most-likely-smartphone-owners-in-the-u-s/">own smartphones and recently acquired smartphones.</a></p>
<p>It probably goes without saying, but <a href="http://en.wikipedia.org/wiki/Affluence_in_the_United_States#Race">census data</a> shows that minority populations still have lower household incomes than caucasians. Obviously, lower prices will be an important feature for people with less discretionary income.</p>
<h4>Android Growth Due to Lower Prices</h4>
<p>As I stated above, I believe Android&#8217;s skyrocketing growth can be attributed to being good enough and cheaper. The last comparison of income levels for Android and iPhone owners is from Q1 2010. At the time, <a href="http://blog.nielsen.com/nielsenwire/online_mobile/iphone-vs-android/">36% of Android owners had household incomes of less than $50,000 versus only 22% of iPhone owners</a>. I suspect the difference is more exaggerated now.</p>
<p>Therefore, Android&#8217;s success is further proof that growth is happening at the lower end of price spectrum.</p>
<h3>The Rational for the Cheaper iPhone in a Single Chart</h3>
<p>A couple of weeks ago, I came across a pie chart from Comscore that clearly explains why Apple was rumored to be making a cheaper iPhone:</p>
<p style="text-align:center;"><a href="http://blog.comscore.com/2011/01/verizon_iphone_mobile_market.html"><img src="http://www.cloudfour.com/wp-content/uploads/2011/03/iphone-household-income.png" style="border:none" alt="Comscore pie chart showing household income of iPhone users" /></a></p>
<p>If you read the <a href="http://blog.comscore.com/2011/01/verizon_iphone_mobile_market.html">Comscore blog post</a> that this chart comes from, you won&#8217;t find anything about the cheaper iPhone. The post focuses on how valuable iPhone subscribers will be to Verizon compared to other smartphone owners because iPhone owners have higher household incomes.</p>
<p><strong>According to Comscore, 81% of iPhone owners have household incomes greater than the U.S. median household income (<a href="http://en.wikipedia.org/wiki/Household_income_in_the_United_States#Household_income_in_the_U.S.">$44,389</a>)</strong>.</p>
<p>TNS Global found <a href="http://www.tnsglobal.com/news/news-EBE5DD9AE77B4A09AB7FA6B1AF0E4BE2.aspx">similar results</a> in a survey noting that &#8220;iPhone users are also younger, but the most highly educated, employed as a manager or professional and earning more than $100K per year.&#8221;</p>
<h3>Does Apple care about the low end of the market?</h3>
<p>When I <a href="http://twitter.com/#!/grigs/status/38080115149766656">tweeted about the above chart</a>, I got a lot of feedback from people who were confused about what I thought the chart meant. My friend Jonathan Stark <a href="http://twitter.com/#!/jonathanstark/status/38114490054742016">jokingly asked</a> if BMW was going to announce a car for under $10k? The implication being that Apple stakes out the high end and doesn&#8217;t care about the low end of the market.</p>
<p style="text-align:center;"><a href="http://twitter.com/#!/jonathanstark/status/38116602323009537"><img src="http://www.cloudfour.com/wp-content/uploads/2011/03/stark-tweet.png" style="border:none;" alt="@grigs I think we're in agreement... Apple don't give a crap about the low end of the market (other than perhaps to block competitors) --@jonathanstark" /></a></p>
<p>I have always thought that Apple cared about market share, but that it wasn&#8217;t the top goal for Apple. Apple seems to value:</p>
<ol>
<li>Building the best product they can</li>
<li>Selling products with a high profit margin</li>
<li>Gaining market share</li>
</ol>
<p>In that order. They won&#8217;t compromise their design ideals, brand or margins to chase the low end.</p>
<p>But if they can create an cheaper iPhone that lives up to Apple&#8217;s brand promise and sustains their margins, I see no reason why they wouldn&#8217;t pursue the low end of the market given the growth opportunities there.</p>
<p style="text-align:center;"><img src="http://www.cloudfour.com/wp-content/uploads/2011/03/10ipodnano_lineup.jpg" alt="iPod Nanos" /></p>
<p>Until recently when people brought up the idea of Apple pursuing an iPod Nano and iPod Shuffle like approach to the smartphone market, I didn&#8217;t think Apple could do it. It didn&#8217;t seem like there was enough room to differentiate the iPod Touch from a low end iPhone.</p>
<p>I also had my doubts they could build a product at the low price point without compromising. They can&#8217;t decrease the screen size like they did for the iPod Nano or remove it entirely like they did for the iPod Shuffle.</p>
<p>However, I now believe there is a lot of room for Apple to explore the low end market. There are a lot of premium features on the iPhone 4, like the retina display, that could be removed on a low end phone without compromising the quality of the design.</p>
<p>But no matter what I think, we should <a href="http://blogs.forbes.com/ericsavitz/2011/02/28/apple-plots-move-to-expand-iphones-market-share/">listen to what Apple COO Tim Cook said about the low end market</a>. Cook recently told an analyst that &#8220;Apple did not want its products to be &#8216;just for the rich,&#8217; and that the company is &#8216;<strong>not ceding any market</strong>.&#8217;&#8221;</p>
<h3>Will a Cheaper iPhone Make a Difference? The Biggest Cost of a Phone is the Carrier Subscription</h3>
<p>When rumors of the cheaper iPhone first surfaced, many people commented on the fact that reducing the cost of the phone won&#8217;t help Apple unless they do something to reduce the monthly subscription cost. I disagree.</p>
<p>The success of Android indicates that even if the monthly costs are the same, that many people will chose the slightly less expensive phone. While consumers in carrier subsidized markets never see the full average selling price of phones, it does seem to make an impact in market share.</p>
<p>Second, if Apple is able create an iPhone that is relatively inexpensive without a carrier subsidy, then people can choose to buy it without a contract or go prepaid. In fact, a cheaper iPhone may be the best way to force lower prices by increasing competition between carriers.</p>
<p>There are nuggets that hint at this strategy in quotes from the recent analyst briefing:</p>
<ul>
<li>Tim Cook says &#8220;<a href="http://www.businessinsider.com/prepaid-iphone-2011-2">Apple is doing &#8216;clever things&#8217; to attack the prepaid market</a>.&#8221;</li>
<li>&#8220;Apple CFO Peter Oppenheimer said Apple would <strong><a href="http://www.businessinsider.com/prepaid-iphone-2011-2">not let carriers dictate terms</a></strong>, which [Bernstein analyst Toni] Sacconaghi says reinforces, &#8220;the notion that <strong>Apple might be willing to act to disintermediate carriers with a soft-SIM</strong>.&#8221;</li>
<li>&#8220;<a href="http://blogs.forbes.com/ericsavitz/2011/02/28/apple-plots-move-to-expand-iphones-market-share/">Carrier expansion is a priority for Apple</a>. Oppenheimer noted that Apple has only 175 carriers today, versus 550 for Research In Motion (RIMM).&#8221;</li>
</ul>
<p>A cheaper iPhone available without a contract and with a soft SIM allowing people to switch networks would force carriers to compete on price. If Apple also expands into the prepaid market and signs up lower priced carriers like MetroPCS and Virgin Mobile, <strong>the impact on carriers could be as large as the impact of the original iPhone</strong>.</p>
<p>But even if they cannot lower the carrier costs, making a cheaper iPhone is the only thing they have full control over if they want to expand the iPhone and reach people with lower household incomes.</p>
<h3>A Cheaper iPhone Will Be a Smash Hit</h3>
<p>Those who have followed me on twitter or seen me speak at conferences knows that despite the fact I love Apple products, I haven&#8217;t been bullish on its prospects of Apple dominating mobile market share. The main reason for my pessimism had been based on other platforms being good enough and cheaper.</p>
<p>Horace Dediu of Asymco recently wrote that he still holds &#8220;<a href="http://www.asymco.com/2011/02/01/the-iphone-share-17-25-of-smartphones-4-2-all-phones/">that 20% smartphone share is possible for the iPhone.</a>&#8221; This was my best guess for where Apple would end up as well.</p>
<p>The news that Apple will be releasing a cheaper iPhone changes my view substantially. If Apple is aggressive about the low end of the market, and it sounds like they may be, then the limitation on their market share will likely be their ability to keep up with demand. My off-the-cuff guess is a cheaper iPhone puts Apple at 30 to 40% of the market when the dust settles.</p>
<p>But we don&#8217;t need to look that far into the future to know that a cheaper iPhone is going to be a big hit. It is going to be huge this year.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.cloudfour.com/2011-is-not-the-year-of-the-ipad-2-it-is-the-year-of-the-cheaper-iphone/feed/</wfw:commentRss>
		<slash:comments>12</slash:comments>
		</item>
		<item>
		<title>A &#8220;Comprehensive&#8221; Guide to Mobile Statistics</title>
		<link>http://www.cloudfour.com/a-comprehensive-guide-to-mobile-statistics/</link>
		<comments>http://www.cloudfour.com/a-comprehensive-guide-to-mobile-statistics/#comments</comments>
		<pubDate>Fri, 18 Feb 2011 05:47:42 +0000</pubDate>
		<dc:creator>Jason Grigsby</dc:creator>
				<category><![CDATA[Emerging Technology]]></category>
		<category><![CDATA[Mobile Web and Services]]></category>
		<category><![CDATA[Top Stories]]></category>

		<guid isPermaLink="false">http://www.cloudfour.com/?p=1259</guid>
		<description><![CDATA[There are two things you need to know in order to effectively use statistics on mobile: 1. What statistics are available and where to find them. 2. What question about mobile that you're seeking to answer.]]></description>
			<content:encoded><![CDATA[<h2>Table of Contents</h2>
<ol>
<li><strong><a href="#introduction">Introduction</a></strong></li>
<li><strong><a href="#bias">How the sources were selected</a></strong></li>
<li><strong><a href="#types-of-stats">Types of Statistics Available</a></strong>
<ul>
<li><a href="#sales">Sales market share</a></li>
<li><a href="#base">Installed base market share</a></li>
<li><a href="#financial">Financial information</a></li>
<li><a href="#platform">Platform breakdowns</a></li>
<li><a href="#carriers">Carrier data</a></li>
<li><a href="#demographics">Demographic surveys</a></li>
<li><a href="#mobileweb">Mobile web metrics</a></li>
<li><a href="#advertising">Advertising networks reports</a></li>
<li><a href="#appstores">App store metrics</a></li>
<li><a href="#other">Other fun sources</a></li>
</ul>
</li>
<li><strong><a href="#what-matters">Which stats should you care about?</a></strong>
<ul>
<li><a href="#developers">App developers</a></li>
<li><a href="#web">Web developers</a></li>
<li><a href="#business">Marketing</a></li>
<li><a href="#investors">Investors</a></li>
<li><a href="#you">Your role here</a></li>
</ul>
</li>
</ol>
<h2 id="introduction">Introduction</h2>
<p>At least once a week, I see people arguing over mobile statistics. Usually, they&#8217;re not even arguing about the same thing.</p>
<p>The arguments go something like this:</p>
<blockquote><p>
<strong>iPhone fan:</strong> Apple is totally kicking ass. The only thing holding it back is the fact it is stuck on this crappy AT&#038;T network.</p>
<p><strong>Android fan:</strong> Take off your iPhone blinders. Android has passed the iPhone in market share in the whole world, not just the U.S. The Verizon iPhone won&#8217;t make a difference.</p>
<p><strong>iPhone fan:</strong> That&#8217;s not a fair comparison. You should be looking at all iOS devices, not just the iPhone. If you don&#8217;t count the iPod Touch and the iPad, you&#8217;re missing the point.</p>
<p><strong>Android fan:</strong> Whatever. You&#8217;re comparing apples to oranges. Besides, there will be at ton of Android tablets in the next year. This is Windows vs. Mac all over again.</p>
<p><strong>iPhone fan:</strong> Whatever. I&#8217;ll be sitting here laughing my way to the bank with my Apple shares as Apple gobbles up all of the profits.
</p></blockquote>
<p>Typically, the people arguing aren&#8217;t even talking about the same thing. They probably aren&#8217;t even asking the same questions or if they are, they are asking questions that are too simplistic like &#8220;Who&#8217;s going to win?&#8221;</p>
<p>There are <strong>two things you need to know</strong> in order to effectively use statistics on mobile:</p>
<ol>
<li><strong>What statistics are available and where to find them.</strong></li>
<li><strong>What question about mobile that you&#8217;re seeking to answer.</strong></li>
</ol>
<p>Until you understand these two things, you can&#8217;t use mobile stats to inform your decisions. Worse yet, you may end up fruitlessly arguing with people about mobile only to realize later that you&#8217;re not even talking about the same thing.</p>
<h2 id="bias">How the sources were selected</h2>
<p>When you have the audacity to call something a &#8220;comprehensive guide,&#8221; you know the moment you hit the publish button that someone is going to point out something you&#8217;ve missed. I not only expect that to happen, I&#8217;m hoping it does. <strong>I&#8217;m looking forward to learning new sources from people who comment on this post.</strong></p>
<p>My bias is for finding free or inexpensive sources of data. We&#8217;re a small company and can&#8217;t afford expensive reports. That said, many of the sources listed provide their free information as a teaser for more in depth reports that they you can buy.</p>
<h2 id="types-of-stats">Types of Statistics Available</h2>
<h3 id="sales">Sales market share</h3>
<p>Sales market share is the most common statistic used to track the current trends in the mobile market. This information usually comes out a month or so after the end of a quarter and tells you how many products a company or platform sold in the previous quarter.</p>
<h4>What this stat is good for</h4>
<ul>
<li>Following the trends in success of the various platforms and manufacturers to see where the market is headed. This can help you anticipate what platforms or handsets you need to watch next.</li>
<li>When the entire market is growing as fast as mobile is, a company can have record sales and still lose ground to its competition. You&#8217;ll see it here first.</li>
</ul>
<h4>What to watch for when you use this stat</h4>
<ul>
<li>Sales numbers are not the same as installed base numbers. A new platform may sell well in the previous quarter, but it will take some time before the sales of new products exceed the existing devices that people already own.</li>
<li>Know whether or not the statistic is measuring platform sales or manufacturer sales. Some analysts only look at manufacturer sales which will tell you how HTC is doing in comparison to Apple, but won&#8217;t tell you how Android is doing compared to iPhone.</li>
<li>It helps to understand the seasonal nature of sales. Apple historically releases a new iPhone model in late Q2 or early Q3. Ergo, Apple sales historically jump in Q3.</li>
<li>Understand what market is being defined. Most of what I look at is smartphone market share. Some people believe that you should look at the entire sales of a platform. So market share for the iOS platform should include iPhone, iPad and iPod Touch. Even if this argument was correct, you&#8217;ll find that it is next to impossible to find data that looks at the world that way.</li>
</ul>
<h4>Sales market share sources</h4>
<dl>
<dt><a href="http://www.gartner.com">Gartner</a> <span>( <a href="http://www.gartner.com/it/products/newsroom/index.jsp">Press releases</a> | <a href="http://www.gartner.com/it/page.jsp?id=1543014">Recent example</a></span> ) </dt>
<dd>Gartner is my favorite source. They have a good reputation and they include both overall device sales and smartphone platform market share. They also have begun tracking tablet market share. Gartner&#8217;s data comes out every quarter about a month after the quarter ends. It is usually the last of the big analyst firms to release their numbers. Free information can be found in their press releases or you can pay for detailed reports.</dd>
<dt><a href="http://www.idc.com">IDC</a> <span class="stats-links">( <a href="http://www.idc.com/research/searchresults.jsp?sid=0">Press releases</a> | <a href="http://www.idc.com/about/viewpressrelease.jsp?containerId=prUS22689111">Recent example</a> )</dt>
<dd>IDC also has a great reputation. I find their numbers a little less useful because they focus on manufacturers not platforms. However, their press releases will often mention the relative success of the platforms in the prose just not in the breakdown tables.</dd>
<dt><a href="http://www.canalys.com">Canalys</a> <span>( <a href="http://www.canalys.com/pr/index.html">Press releases</a> | <a href="http://www.canalys.com/pr/2011/r2011013.html">Recent example</a> )</span></dt>
<dd>Canalys has been monitoring mobile for quite some time. They are usually one of the first to report the results for the previous quarter. They were also one of the first to start looking at smartphones instead of PDAs. Others have <a href="http://communities-dominate.blogs.com/brands/2011/02/paging-stats-police-canalys-jumped-gun-rather-badly-android-is-not-yet-ahead-of-symbian-but-will-be-.html">complained</a> that their definition of Android in their <a href="http://www.canalys.com/pr/2011/r2011013.html">Q4 2010 report</a> was including Android forks (OMS and Tapas) that shouldn&#8217;t be included. My main beef with Canalys is superficial—the typeface on their site is too small and the site is difficult to read.</dd>
<dt><a href="http://www.strategyanalytics.com/">Strategy Analytics</a> <span>( <a href="http://www.strategyanalytics.com/default.aspx?mod=pressreleasesviewer">Press releases</a> | <a href="http://www.strategyanalytics.com/default.aspx?mod=pressreleaseviewer&#038;a0=5001">Recent example</a> )</span></dt>
<dd>Strong focus on mobile, but less well known compared to Gartner and IDC. Does not include platform numbers. They have started covering <a href="http://www.strategyanalytics.com/default.aspx?mod=pressreleaseviewer&#038;a0=5005">tablet market share</a> and have some info on <a href="http://www.strategyanalytics.com/default.aspx?mod=pressreleaseviewer&#038;a0=5009">mobile internet usage</a>.</dd>
<dt><a href="http://www.abiresearch.com">ABI Research</a> <span>( <a href="http://www.abiresearch.com/news/media.jsp">Press releases</a> | <a href="http://www.abiresearch.com/press/3605-Apple,+RIM+and+HTC+Win+Big+in+2010+Mobile+Handset+Race,+Says+ABI+Research">Recent example</a> )</span></dt>
<dd>ABI has an extensive mobile research component. Much of the value is only available to people who sign up for their research service.</dd>
<dt><a href="http://www.npd.com">NPD Group</a> <span>( <a href="http://npd.com/corpServlet?nextpage=press-releases-wireless_s.html">Press releases</a> | <a href="http://www.npd.com/press/releases/press_110131.html">Recent example</a> )</span></dt>
<dd>Focuses on the US market. Uses large online surveys weighted to match US demographics and asks recent smartphone buyers what they bought. Often includes information on top five handsets in the US. First analyst to report that Android had passed iPhone which prompted Apple PR, which normally doesn&#8217;t comment, to <a href="http://www.reuters.com/article/2010/05/11/apple-android-idUSN1110556820100511">criticize the report</a>. Later analysts validated NPD&#8217;s early numbers.</dd>
<dt><a href="http://communities-dominate.blogs.com/">Tomi Ahonen</a> <span>( <a href="http://www.google.com/search?sourceid=chrome&#038;ie=UTF-8&#038;q=site:communities-dominate.blogs.com+smartphone+blood+bath">Search for smartphone blood bath articles</a> | <a href="http://communities-dominate.blogs.com/brands/2011/02/smartphone-bloodbath-2010-now-final-numbers-q4-and-full-year-2010-and-each-rival-awarded-their-final.html">Recent example</a> )</span></dt>
<dd>Tomi provides quarterly analysis in his bloodbath series. He has his own models, but always incorporates the numbers from the major analyst firms. Tomi&#8217;s name might as well be Tome based on the fact his posts are always epic in length. As a former Nokia executive, he has soft spot for Nokia which can <a href="http://communities-dominate.blogs.com/brands/2011/02/the-nokia-ceo-burning-platform-memo-at-engagdget-doesnt-ring-true-to-my-ears.html">blind him on occasion</a>, but there is a reason why Tomi is someone the mobile industry continues to read. He also self publishes the <a href="http://www.tomiahonen.com/ebook/almanac.html">TomiAhonen Almanac</a> and <a href="http://www.tomiahonen.com/ebook/phonebook.html">TomiAhonen Phone Book</a>.</dd>
<dt id="sales-share-asymco"><a href="http://www.asymco.com/">Asymco</a> <span>( <a href="http://www.asymco.com/category/market/">Posts tagged with market</a> | <a href="http://www.asymco.com/2011/02/07/smartphone-users-prefer-brands/">Recent example</a> )</span></dt>
<dd>A relative newcomer, Asymco is a blog run by Horace Dediu. As far as I can tell, Horace isn&#8217;t a source of new statistics even though the first place you can hear of new research is often his blog. Instead of new research, Horace provides insightful analysis of the market. He often hightlights aspects of the data that others ignore. He provides great graphs to accompany his pieces and you can <a href="http://www.asymco.com/2010/08/26/announcing-asymco-data-downloads/">download data from the blog</a> into an <a href="http://www.roambi.com/">iOS app</a> where you can manipulate the data. He has a soft spot for Apple, but has a realistic view of the market having recently said that he &#8220;<a href="http://www.asymco.com/2011/02/01/the-iphone-share-17-25-of-smartphones-4-2-all-phones/">still holds that 20% smartphone share is possible for the iPhone</a>.&#8221; Asymco is a must read blog.</dd>
</dl>
<h3 id="base" >Installed base market share</h3>
<p>Whereas sales market share looks at what was sold recently, the installed base market share—sometimes called subscriber market share—attempts to figure out what percentage of each type of phone is currently in use in the real world. These numbers don&#8217;t change as rapidly as the sales numbers.</p>
<p>Because phones will eventually be lost, stolen, broken or replaced, you can&#8217;t simply add up all of the phones sold in the past to find out how many phones are currently being used. For that reason, information on the installed base comes from surveying end users.</p>
<h4>What this stat is good for</h4>
<ul>
<li>If you can find a match between installed base and a market that you want to target, it can help you determine what devices you need to worry about.</li>
<li>It helps you understand how quickly changes in the sales numbers are resulting in changes in the number of people using new devices.</li>
</ul>
<h4>What to watch for when you use this stat</h4>
<ul>
<li>Almost all of the numbers are based on a particular geographic area and not worldwide data.</li>
<li>Just because someone has a phone, doesn&#8217;t mean they are likely to use the capabilities of that phone in a way that makes sense for your business. For example, if someone has a feature phone, they are less likely to have a data plan and thus less likely to browse the web.</li>
</ul>
<h4>Installed base market share sources</h4>
<dl>
<dt><a href="http://www.comscore.com">Comscore</a> <span class="stats-links">( <a href="http://www.comscore.com/Press_Events/Press_Releases?year=225&#038;keywords=mobile&#038;location=0&#038;searchBtn=Search">Mobile press releases</a> | <a href="http://www.comscore.com/Press_Events/Press_Releases/2011/2/comScore_Reports_December_2010_U.S._Mobile_Subscriber_Market_Share">Recent example</a> )</dt>
<dd>Comscore and Nielsen are my go to sources for current information on the installed base of phones in the United States. Comscore reports include both handset and platform percentages. They also include information on mobile content usage. In 2011, they released their first annual report<a href="http://www.comscore.com/Press_Events/Presentations_Whitepapers/2011/2010_Mobile_Year_in_Review"Mobile Year in Review report</a> which looks at U.S., Europe and Japan.<?a></dd>
<dt><a href="http://www.nielsen.com">Nielsen</a> <span>( <a href="http://blog.nielsen.com/nielsenwire/category/online_mobile/">Blog</a> | <a href="http://blog.nielsen.com/nielsenwire/consumer/among-mobile-phone-users-hispanics-asians-are-most-likely-smartphone-owners-in-the-u-s/">Recent example</a> )</span></p>
<dd>I like Nielsen&#8217;s blog posts better, but the information they highlight varies which is why makes following trends more difficult. (Comscore has the same data from month to month so it is easier to compare). They also highlight interesting information like the fact that &#8220;<a href="http://blog.nielsen.com/nielsenwire/consumer/among-mobile-phone-users-hispanics-asians-are-most-likely-smartphone-owners-in-the-u-s/">Hispanics, Asians are Most-Likely Smartphone Owners in the U.S.</a>&#8221; Bonus points for using a blog format and being easy on the eyes.</dd>
</dl>
<p>Other than Comscore and Nielsen, I don&#8217;t have good sources for the installed base of phones. It would be nice to add to this list some sources for data in other countries.</p>
<h3 id="financial" >Financial information</h3>
<p>I&#8217;m the first to admit that I&#8217;m not someone you want to take financial advice from. But as I mentioned above, at some point in a debate about mobile phones, someone will issue the trump card that while Apple may not be dominating in market share, that they dominate in profits. Where does that information come from?</p>
<p>The simple answer is that it comes from each companies quarterly financial reports. It&#8217;s not hard to find the financial reports of each company so I&#8217;m going to leave that as a exercise for the reader. Instead, I&#8217;ll want to highlight a few sources that talk a bit about the profit breakdown of the market.</p>
<h4>What this stat is good for</h4>
<ul>
<li>If you&#8217;re investing, this is obviously critical to make sure you make smart stock decisions.</li>
<li>Most companies provide some information about the units sold in their financial statements or their earnings phone calls.</li>
</ul>
<h4>What to watch for when you use this stat</h4>
<ul>
<li>Unless you own stock in these companies, I&#8217;m not sure what good this information does for you. Obviously if a company is in dire financial trouble, that will impact the longevity of a platform. There are theories that we misunderstand the lesson of the pc market and that market share doesn&#8217;t matter as much as we think. That we should be watching profits instead. Others say the only thing matters is market share because it has it own momentum. That companies should stomach lower profit margins for a few years while the gold rush is on to secure a large market share that will drive long term value. Who&#8217;s right? I don&#8217;t know.</li>
<li>When you compare RIM financials to other companies, note that their financial quarter is one month off from everyone else&#8217;s. It makes direct comparisons more difficult.</li>
</ul>
<h4>Financial information sources</h4>
<dl>
<dt><a href="http://seekingalpha.com/">Seeking Alpha</a> ( <a href="http://seekingalpha.com/tag/transcripts">Earnings calls transcripts</a> | <a href="http://seekingalpha.com/article/247197-apple-management-discusses-q1-2011-results-earnings-call-transcript">Recent example</a> )</dt>
<dd>I often find little gems come out during the earnings calls for various mobile companies. Whenever I&#8217;ve searched for transcripts of those calls, I often end up on sites where I have to pay to read the transcript. Seeking Alpha usually has the transcripts available free of charge.</dd>
<dt><a href="http://www.asymco.com">Asymco<a> <span class="stats-links">( <a href="http://www.asymco.com/category/financial/">Posts tagged financial</a> | <a href="http://www.asymco.com/2011/01/28/summary-view-of-apples-cash-flows/">Recent example</a></dt>
<dd>I talked in more detail about Horace Dediu in the <a href="#sales-share-asymco">sales market share section</a>. His blog is the place I see the most information on profit share breakdowns.</dd>
</dl>
<h3 id="platform" >Platform breakdowns</h3>
<p>Sometimes you need to find information within a given platform. Maybe you want to know how many handsets are still using a particular version of an operating system to determine if you need to support it.</p>
<h4>What this stat is good for</h4>
<ul>
<li>Determining what versions you need to support.</li>
<li>Understanding how OS version plays into any platform fragmentation</li>
</ul>
<h4>What to watch for when you use this stat</h4>
<ul>
<li>Data is usually extremely high level. When you encounter a bug in a particular point release of an OS, it is hard to figure how may people are currently using that point release.</li>
</ul>
<h4>Sales market share sources</h4>
<dl>
<dt>Android <span>( <a href="http://developer.android.com/resources/dashboard/platform-versions.html">Versions report</a> )</span></dt>
<dd>Google provides up to date information on Android versions.</dd>
<dt>Bada <span>( <a href="http://static.bada.com/contents/docs/resources_1.2.0/com.osp.differentdevices.help/FramesetMain.html?menu=MC01010906&#038;mtb1=&#038;mtb2=">Developing Applications for Different Device Model</a> )</span></dt>
<dd>Bada is too new to have much fragmentation, but they do describe how to plan for different models. Hopefully they will add platform percentages when they release newer versions of their OS.</dd>
<dt>Blackberry <span>( <a href="http://us.blackberry.com/developers/choosingtargetos.jsp">Choosing a target OS</a> )</span></p>
<dd>Decent high level numbers, but doesn&#8217;t distinguish between 5.x and 6.x. Also, there can be significant differences between point releases and the inability to know how many people are using a particular point release can be frustrating.</dd>
<dt>iOS versions  <span class="stats-links">( <a href="http://www.readwriteweb.com/mobile/2011/01/what-percentage-of-iphone-owners-are-on-ios4.php">ReadWriteWeb article from August 2010</a> )</dt>
<dd>There is no official source for iOS version breakdowns and no third-party that releases the information on a regular basis.</dd>
<dt>S40 / Symbian / Nokia <span>( <a href="http://www.forum.nokia.com">Forum Nokia</a> | <a href="http://www.forum.nokia.com/Devices/">Device breakdown</a> )</span></dt>
<dd>With Nokia&#8217;s recent decision to move to Windows Phone 7 and the dismantling of the Symbian Foundation, I&#8217;m not sure how you find good information for existing market of handsets.</dd>
<dt>Windows Phone 7 <span class="stats-links">( <a href="http://create.msdn.com/en-US/">App Hub</a></dt>
<dd>So new that all of the phones are on the same version. When it does publish data, it will likely be on App Hub.</dd>
<h3 id="carriers" >Carrier data</h3>
<p>There is a lot of information available about carrier market share, average revenue per user (ARPU), and what services are being used on each carrier. I generally don&#8217;t find this information as useful for our business or customers. That said, some of the information on how phones are being used can be fascinating.</p>
<h4>What these stats are good for</h4>
<ul>
<li>Looking for other ways to augment your plans with services like SMS and MMS.</li>
<li>Understanding the total market for something like location based services.</li>
<li>Random information to wow your friends at dinner parties (Did you know the average teenager in the U.S. sends and receives 3,338 text messages per month?)</li>
</ul>
<h4>What to watch for when you use these stats</h4>
<ul>
<li>General data may not be indicative of what your customers are going to do or the services they use.</li>
</ul>
<h4>Carrier data sources</h4>
<dl>
<dt><a href="http://www.abiresearch.com">ABI Research</a> <span>( <a href="http://www.abiresearch.com/press/3607-One+Billion+Mobile+Broadband+Subscriptions+in+2011:+a+Rosy+Picture+Ahead+for+Mobile+Network+Operators">One Billion Mobile Broadband Subscriptions in 2011: a Rosy Picture Ahead for Mobile Network Operators</a> )</span>
<dt>
<dd>ABI is often quoted when people are looking for the number of mobile phone subscribers in the world.</dd>
<dt><a href="http://www.chetansharma.com/">Chetan Sharma</a> <span>( <a href="http://www.chetansharma.com/blog/">Blog</a> | <a href="http://www.chetansharma.com/blog/2010/11/07/us-mobile-data-market-update-q3-2010/">US Mobile Data Market Update Q3 2010</a> )</span></dt>
<dd>Chetan has a long history in the U.S. mobile industry. His consulting practice helps large organizations understand the mobile market. Every quarter he publishes a market update that contains information comparing the carriers, the services that are being consumed, and the average revenue per user. His blog is also a great source of information on U.S. carriers and wireless usage.</dd>
<dt><a href="http://www.ctia.org">CTIA</a> <span>( <a href="http://www.ctia.org/advocacy/research/index.cfm/AID/10538">CTIA Reports</a> )</dt>
<dd>CTIA is an international organization, but its main focus appears to be on the U.S. They survey U.S. carriers every six months and publish a report showing revenue, average call time, number of text messages, etc.</dd>
<dt><a href="http://www.netsize.com">Netsize</a> <span>( <a href="http://www.netsize.com/Ressources_Guide.htm">Netsize Guide 2010</a> )</span></dt>
<dd>Netsize publishes an annual look at the worldwide mobile industry. It contains market data on 41 countries as well as interviews with thought leaders.</dd>
<dt><a href="http://www.itu.int">UN&#8217;s International Telecommunication Union</a> <span>( <a href="http://www.itu.int/net/pressoffice/stats/listing.aspx?lang=en">Stats Index</a> | <a href="http://www.itu.int/net/pressoffice/stats/2011/01/index.aspx">Jan 2011 Statshot</a> | <a href="http://spreadsheets.google.com/pub?key=tUzZsw5SoG_jXRDl6p8tRCg&#038;single=true&#038;gid=0&#038;output=html">Country Mobile Penetration Level Over Time</a> )</dt>
<dd>The UN&#8217;s ITU tracks access to mobile networks and competition in mobile across the globe. The Google spreadsheet is very cool.</dd>
<dt><a href="http://mobileactive.org">Mobile Active</a> <span>( <a href="http://mobileactive.org/countries">Mobile Data by Country</a> )</span></dt>
<dd>Mobile statistics by country. BTW, Mobile Active is an amazing non-profit worth your support.</dd>
</dl>
<h3 id="demographics" >Demographic surveys</h3>
<p>Demographic information is one of my favorite areas of mobile statistics. I believe there are trends in mobile that the tech press misses because they aren&#8217;t able to step outside the tech bubble and see how the demographics of smartphone users is shifting from the early adopter tech enthusiast to the general population and what that change means.</p>
<h4>What these stats are good for</h4>
<ul>
<li>If you know the demographics of your customer base, it can help ensure your mobile strategy lines up with how your customers are likely to be using mobile devices.</li>
</ul>
<h4>What to watch for when you use these stats</h4>
<ul>
<li>The survey methodology is always important, but it is particularly important for demographic information. It is easy to find surveys that claim to have some demographic insight that have sample bias (e.g., only asking people who respond to mobile advertising).</li>
</ul>
<h4>Demographic information sources</h4>
<dl>
<dt><a href="http://www.pewresearch.org">Pew Research Center</a> <span>( <a href="http://pewresearch.org/topics/internetandtechnology/">Publications on Internet and Technology</a> | <a href="http://pewresearch.org/pubs/1887/latinos-digital-technology-internet-broadband-cell-phone-use">Cell phone activities by race and ethnicity</a> )</dt>
<dd>Every time Pew releases new information related to use of mobile phones, I find something interesting. They&#8217;ve researched app usage, teens, race, and age differences.</dd>
<dt><a href="http://www.nielsen.com">Nielsen</a> <span>( <a href="http://blog.nielsen.com/nielsenwire/category/online_mobile/">Nielsen Wire Blog</a> | <a href="http://blog.nielsen.com/nielsenwire/consumer/among-mobile-phone-users-hispanics-asians-are-most-likely-smartphone-owners-in-the-u-s/">Among Mobile Phone Users, Hispanics, Asians are Most-Likely Smartphone Owners in the U.S.</a> )</span></dt>
<dd>In addition to the market share information, Nielsen also provides information on demographics. The latest report even included smart phone operating system share by race / ethnicity.</dd>
<dt><a href="http://www.tnsglobal.com/">TNS Digital Life</a> <span>( <a href="http://discoverdigitallife.com/">TNS Digital Life Data Explorer</a> )</span></dt>
<dd>Global study of almost 50,000 consumers in 46 countries. Website has really cool data exploration tool.</dd>
<dt><a href="http://mmaglobal.com">Mobile Marketing Association</a> <span>( <a href="http://mmaglobal.com/research">Research</a> | <a href="http://mmaglobal.com/about/content_category/story/7/312">Press Releases</a> )</dt>
<dd>The Mobile Marketing Association (MMA) keeps track of data and surveys by others in their research section in addition to conducting their own research. They publish report called the US Mobile Consumer Briefing which is supposed to come out monthly (<a href="http://mmaglobal.com/research/mma-luth-october-2010-us-mobile-consumer-briefing-holiday-shopping-mobile-november-2010">November 2010 Report</a>). I say &#8220;supposed to&#8221; because I can&#8217;t find the more recent reports on their site which I find confusing. The MMA also often issues press releases containing interesting information like the the fact that <a href="http://mmaglobal.com/news/more-half-us-consumers-plan-use-their-mobile-phone-holiday-shopping-november-2010">over half of U.S. consumers planned to use their mobile phone for holiday shopping last year</a>. </dd>
</dl>
<h4>Demographic articles I find interesting</h4>
<p>I don&#8217;t have very many reliable sources of demographic data. I went through my bookmarks and nearly every link came from Pew or Nielsen. So instead of listing more sources that may not have a lot of demographic data, I thought it might be interesting to look a some demographic articles that I find fascinating.</p>
<dl>
<dt><a href="http://blog.comscore.com/2011/01/verizon_iphone_mobile_market.html">How the Verizon iPhone Announcement Could Influence the Mobile Market</a></dt>
<dd>While this Comscore blog post is primarily about the impact of the Verizon iPhone on the smartphone market in the United States, it contains information about iPhone users including age, gender, and household income.</dd>
<dt><a href="http://www.tnsglobal.com/news/news-EBE5DD9AE77B4A09AB7FA6B1AF0E4BE2.aspx">TNS survey: Smartphones gain traction for both businesses and consumers</a></dt>
<dd>Details on smartphone platforms in the United States by race and income.</dd>
<dt><a href="http://blog.nielsen.com/nielsenwire/online_mobile/african-americans-women-and-southerners-talk-and-text-the-most-in-the-u-s/">African-Americans, Women and Southerners Talk and Text The Most in the U.S.</a></dt>
<dd>Voice and texting numbers organized by state.</dd>
<dt><a href="http://www.clickz.com/clickz/stats/1721987/early-us-ipad-users-mostly-male-aged-21-44">Early U.S. iPad Users are Mostly Male, Aged 21 to 44</a></dt>
<dd>This information came out shortly after the iPad was released. I&#8217;m very interested in seeing newer data. Lots of people say that the iPad is the computer for people who don&#8217;t work on computers, but the only data I&#8217;ve seen says that the people buying iPads are the same people who buy tech overall. I don&#8217;t think it will remain that way, but I&#8217;m curious how far the iPad has gone beyond early adopters.</dd>
<dt><a href="http://blog.nielsen.com/nielsenwire/consumer/among-mobile-phone-users-hispanics-asians-are-most-likely-smartphone-owners-in-the-u-s/">Among Mobile Phone Users, Hispanics, Asians are Most-Likely Smartphone Owners in the U.S.</a></dt>
<dd>There is a lot of information that indicates that minority populations are using phones to access the Internet in greater number than caucasians. Mobile phones are being used as leap frog technology for those with lower incomes. Because of this, I believe we will find a lot of hidden innovative uses of mobile phones within these populations. When you don&#8217;t have a computer to fall back to, you look at the phone in a different way.</dd>
<dt><a href="http://www.usatoday.com/tech/news/2011-01-10-minorities-online_N.htm">For minorities, new &#8216;digital divide&#8217; seen</a></dt>
<dd>This article in USA Today talks about the negative implications of the fact that minorities are increasingly using mobile phones to access the Internet. On the one hand it is good because they didn&#8217;t have ready access before. On the other hand, it presents challenges like filling out job applications on mobile phones and dealing with web sites that are only designed for desktop.</dd>
<dt><a href="http://pewresearch.org/pubs/1879/gadgets-generations-cell-phones-laptops-desktop-comupter">Generations and Gadgets</a></dt>
<dd>Pew Research study on technology ownership among age groups.</dd>
<dt><a href="http://pewresearch.org/pubs/1727/cell-phone-apps--popular-download-demographics">Rise of the &#8216;Apps Culture&#8217;</a></dt>
<dd>App usage demographics</dd>
</dl>
<h3 id="mobileweb" >Mobile web metrics</h3>
<p>Back in early 2008 when Google created an iPhone optimized version of their search engine, one of the Google representatives justified the decision to develop a special version by saying, &#8220;It&#8217;s about usage. Not unit.&#8221;</p>
<p>When you&#8217;re looking at mobile web statistics, you&#8217;re looking at usage patterns to try to make decisions about what you need to support.</p>
<p>Unfortunately, nearly every public source of data about mobile web usage is problematic for reasons I&#8217;ll list below. The only data that is really useful is your own data about what your customers are using and what traffic your web site gets. And even the latter can be problematic.</p>
<p>If your site has a crummy mobile experience because it is slow or has requires flash, then current traffic to your site is likely not indicative of what will happen when you have a mobile optimized site.</p>
<h4>What these stats are good for</h4>
<ul>
<li>Trying to understand what phones and browsers are being used on the mobile web.</li>
<li>Understanding how people are using the mobile web.</li>
</ul>
<h4>What to watch for when you use these stats</h4>
<ul>
<li>Technical problems may cause mobile usage to be under reported. Many web analytics packages require javascript to function. Many mobile phones don&#8217;t support javascript or even if they do, the javascript can be take too long to process on a device and fail before it can report back to the analytics server.
<p>Nearly every analytics engine provides a server side alternative that should be used to get accurate mobile information, but many sites owners don&#8217;t implement them or don&#8217;t implement them correctly. When looking at aggregate data about mobile usage, you have to wonder how much the data is skewed by this fundamental problem.</li>
<li>To expand on that previous point for a moment, PPK has been providing reports from StatCounter which is mentioned below. On a mailing list for mobile web, Luca Passani, the lead developer of WURFL, said that he had &#8220;4 million lines of logs from a major social network&#8221; and that his analysis of those logs showed <a href="http://tech.groups.yahoo.com/group/mobile-web/message/337">Openwave at 8% of traffic and NetFront at over 12%</a>. Unfortunately, he can&#8217;t share the source of the logs. What do you do with this information? I think you have to look at multiple sources for common elements and then get your own data from your own site and customers.</li>
<li>Mobile web usage of non-mobile optimized sites is unlikely to tell you much about what the usage will look like when a site is mobile optimized. Most of the aggregate analytics information lumps desktop and mobile web sites together in the reports.</li>
<li>And to beat a dead horse, here is a great article on <a href="http://blog.wapreview.com/9157/">Why You Should Take Mobile Web Traffic Statistics With A Grain of Salt</a></li>
</ul>
<h4>Mobile web metrics sources</h4>
<dl>
<dt><a href="http://www.statcounter.com">StatCounter</a> <span>( <a href="http://gs.statcounter.com">StatCounter Global Stats Reports</a> | <a href="http://gs.statcounter.com/press">Press releases</a> )</span></dt>
<dd>The <a href="http://gs.statcounter.com/">interactive reporting tool</a> for StatCounter allows you to look only at mobile browser usage. You can narrow the usage by country. For all of its flaws, it is only one of two sources that allows you to look at real time data over a large numbers of sites in every geography.</dd>
<dt><a href="http://www.quirksmode.org">Quirksmode</a> <span>( <a href="http://www.quirksmode.org/blog/archives/mobile/market_share/index.html">Market share blog posts</a> | <a href="http://www.quirksmode.org/blog/archives/2011/02/mobile_browser_5.html">Jan 2011 data</a> )</span></dt>
<dd>Quirksmode is the blog of web guru PPK. PPK publishes monthly reports based on StatCounter data. Every quarter he will dig into the data deeper to compare countries. His recap on <a href="http://www.quirksmode.org/blog/archives/2011/01/2010_mobile_bro.html">2010 mobile browser stats</a> explains his plans.</dd>
<dt><a href="http://getclicky.com">Clicky Web Analytics</a> <span>( <a href="http://getclicky.com/#/marketshare/global/web-browsers/mobile/">Mobile web browsers market share</a>)</dt>
<dd>Clicky is the other source in addition that StatCounter that allows you to inspect traffic by mobile browser. Unfortunately, it doesn&#8217;t identify as many browsers so 14% of traffic falls into the &#8220;other&#8221; browser category. I also suspect the service requires javascript and suffers from the same problem as StatCounter. I believe StatCounter has a wider reach and more accurate numbers.</dd>
<dt><a href="http://percentmobile.com/">Percent Mobile</a> <span>( <a href="http://mobileanalyticssimplified.com/">Blog</a> | <a href="http://mobileanalyticssimplified.com/post/1242673634/usa-mobile-web-overview-sept-2010">USA Mobile Web Overview &#8211; Sept 2010</a> )</span></dt>
<dd>Percent Mobile is a cool mobile web analytics service. They occasionally publish numbers and infographics from their aggregate data. They also have a good post explaining <a href="http://mobileanalyticssimplified.com/post/568616404/in-defense-of-blackberry">why Blackberry web usage in the USA is often underreported</a>.</dd>
<dt><a href="http://bango.com">Bango</a> <span>( <a href="http://news.bango.com">Press releases</a> | <a href="http://blog.bango.com/">Blog</a> |  <a href="http://news.bango.com/2010/08/24/web-browsing-from-android-phones-grows-400-percent/">Q2 2010 Mobile Web Statistics</a></dt>
<dd>Bango provides analytics and payment systems for mobile. They&#8217;ve been at it for quite some time. While they don&#8217;t publish aggregate data all of the time, when they do publish it, I pay attention. My assumption is that because the value of their analytics comes from being able to identify mobile traffic and their relationship with carriers, that their analytics data is dominated by mobile sites and not desktop sites. BTW, Bango is a service more people should consider because of the relationship with carriers. That relationship allows them to uniquely identify users in a way that other analytics services cannot.</dd>
<dt><a href="http://www.opera.com">Opera</a> <span>( <a href="http://www.opera.com/smw/">State of the Mobile Web Monthly Report</a> )</dt>
<dd>Opera publishes monthly information on usage of the Opera Mini browser.</dd>
<dt><a href="http://www.quantcast.com">Quantcast</a> <span>( <a href="http://www.quantcast.com/inside-quantcast/">Inside Quantcast (Blog?)</a> | <a href="http://www.quantcast.com/inside-quantcast/2010/09/august-2010-mobile-os-share/">August 2010 Mobile OS Share</a> )</dt>
<dd>Quantcast is an audience measurement company. They have a helpful post that explains their <a href="http://www.quantcast.com/inside-quantcast/2010/09/mobile-measurement-methodology/">mobile web measurement methodology</a>. Quantcast also provided an extremely detailed look at <a href="http://www.quantcast.com/learning-center/mobile2009/">2009 mobile web traffic in a 35 page report</a>. Let&#8217;s hope they do the same for 2010.</dd>
<dt><a href="http://www.groundtruth.com">Ground Truth</a> <span>( <a href="http://www.groundtruth.com/719">Mobile Internet Usage Builds Throughout the Day</a> )</span></dt>
<dd>Ground Truth provides mobile measurement tools by gathering data from carriers. They occasionally publish data on their blog. For example, a recent post showed that &#8220;<a href="http://www.groundtruth.com/719">32 percent of page views occur between 7 p.m. and midnight, peaking at 9 p.m.</a>&#8220;</dd>
<dt><a href="http://deviceatlas.com">Device Atlas</a> <span>( <a href="http://deviceatlas.com/explorer">Device Atlas Data Explorer</a> )</span></dt>
<dd>Device Atlas doesn&#8217;t provide usage data, but what does provide is a data explorer that can be used to look at the characteristics of mobile devices. What to know what percentage of Blackberry phones have a 240 pixel screen? Match those two properties in the data explorer to find out. Keep in mind that Device Atlas is telling you how many Blackberry models have a 240 pixel screen, not how many people are using those phones right now. Still, this is great resource if you&#8217;re trying to determine mobile device classes.</dd>
<dt><a href="http://www.tera-wurfl.com">Tera-WURFL</a> <span>( <a href="http://www.tera-wurfl.com/explore/">Tera-WURFL Explorer</a> )</span></dt>
<dd>This isn&#8217;t strictly a metrics resource. Instead, it allows you to enter a user agent string and see what information WURFL has on file for that device. </dd>
<dt><a href="http://www.comscore.com">Comscore</a> <span>( <a href="http://www.comscore.com/Press_Events/Press_Releases/2011/2/comScore_Reports_December_2010_U.S._Mobile_Subscriber_Market_Share">Dec 2010 Market Share Report</a> )</span></dt>
<dd>With every survey that Comscore publishes, they also publish information on the percentage of mobile phone subscribers in the United States that are accessing the mobile web.</a></dd>
</dl>
<h4>Mobile web articles I find interesting</h4>
<p>Like the demographic information, I&#8217;ve bookmarked some one off articles that are interesting, but I can&#8217;t call them a source for mobile web data because they&#8217;ve only published one or two pieces of information.</p>
<dl>
<dt><a href="http://www.msearchgroove.com/smartphone-market-drives-600-growth-in-mobile-web-usage/">Mobile Web Usage: Smartphone Drives 600% Growth; BlackBerry Takes Lead, Wi-Fi Access Going Strong</a></dt>
<dd>This is interesting to me because Bango has always shown more Blackberry usage than other analytics companies. This was from Feb 2010, but at that time, Blackberry was the top web browser client in their network which you don&#8217;t see in other reports. Also, 600% growth is insane.</dd>
<dt><a href="http://gs.statcounter.com/press/blackberry-overtakes-apple-in-mobile-wars">BlackBerry overtakes Apple in Mobile Wars</a></dt>
<dd>More recent data from StatCounter indicating that Blackberry caught up in web browsing. Blackberry has always had a fairly large base and unlimited data plans. The only thing holding people back from browsing the web more was the horrid browser. With Blackberry 6, the browser is now webkit-based and consequently Blackberry usage has gone up.</dd>
<dt><a href="http://mobileanalyticssimplified.com/post/568616404/in-defense-of-blackberry">In Defense of Blackberry</a></dt>
<dd>Percent Mobile explains why Blackberry is often under reported. If you can&#8217;t tell, I like articles that make you question conventional wisdom.</dd>
<dt><a href="http://www.mobiadnews.com/?p=5133">Mobile Web Surfers Visit 24 Sites Per Day!</a></dt>
<dd>Also talks about time of day and what types of sites were visited.</dd>
<dt><a href="http://mobileanalyticssimplified.com/post/867369699/percentmobile-maps-2nd-quarter-2010">PercentMobile Maps &#8211; 2nd Quarter 2010</a></dt>
<dd>Cool maps showing what devices are being used in what parts of the world.</dd>
<dt><a href="http://www.marketingweek.co.uk/disciplines/digital/news/orange-say-uk-mobile-users-prefer-browsers-to-apps/3018951.article">Orange says UK mobile users prefer browsers to apps</a></dt>
<dd>I&#8217;ve tired of the mobile web vs. native debate, but I like to keep stuff like this around for when people claim that apps are all that matter and that the web is dead.</dd>
<dt><a href="http://www.readwriteweb.com/mobile/2010/10/adobe-says-people-prefer-mobile-web-not-apps.php">Adobe Says People Prefer Mobile Web, Not Apps</a></dt>
<dd>&#8220;Respondents favored mobile Web experiences over apps in the products &#038; shopping and media &#038; entertainment categories. 66% said they prefer mobile Web to apps (34%) in these categories.&#8221; <a href="https://www1.scene7.com/registration/s7adobemstudy.asp?src=AdobeB2CMobile_PR&#038;id=70180000000fy80">Download the full report</a>.</dd>
<dt><a href="http://www.groundtruth.com/ground-truth-lack-of-standardization-around-mobile-web-conventions-presents-hurdles-for-mobile-publishers">Lack of Standardization Around Mobile Web Conventions Presents Hurdles for Mobile Publishers</a></dt>
<dd>Talk about an understatement. Everything on the mobile web lacks standardization. This report though looks at mobile web domain naming conventions.</dd>
<dt><a href="http://www.marco.org/616147756">Tumblr Mobile OS web-browsing share</a></dt>
<dd>Marco published some data on what Tumblr sees on its network. Data is from May 2010</dd>
</dl>
<h3 id="advertising" >Advertising networks reports</h3>
<p>A few of the mobile advertising companies publish reports on what devices they see on their networks. There are some interesting things that can be found in these reports. At the same time, I feel like the data from these reports is commonly either misunderstood or misused.</p>
<p>The reports are most useful when people take them for what they are. They have inherent sampling bias because every advertising network has some sort areas where they do better and where they don&#8217;t. When they offer ads both on the mobile web and inside native apps, the reports are going to skew heavily towards platforms with robust app ecosystems.</p>
<p>The worst data comes from when people try to infer more from the reports than is possible or when the advertising networks use their own networks to do a survey of users.</p>
<p>BTW, two of the ad networks that used to provide information on a regular basis—AdMob and Quatrro Wireless—no longer provide reports as they&#8217;ve been bought by Google and Apple respectively.</p>
<h4>What these stats are good for</h4>
<ul>
<li>Some sense of the relative numbers of devices being used in different geographies.</li>
<li>The reach of advertising networks if you&#8217;re trying to decide which to use.</li>
</ul>
<h4>What to watch for when you use these stats</h4>
<ul>
<li>As mentioned above, the networks all have some sort of bias. Figuring out what it is can be difficult.</li>
<li>Beware networks that offer advertising both inside apps and on the mobile web. Usually these networks will only offer advertising inside apps on a couple of platforms (e.g., iPhone and Android) which means those platforms will account for more impressions.</li>
<li>Surveys that solicit participants via the ad network that don&#8217;t have someone working to balance the data with known demographics are likely to be inaccurate. This is why when companies do any sort of surveying, they have to know the demographics and weight the results to match the complexion of the audience. I&#8217;ve seen studies that ask people who responded to ads inside apps how many apps they had installed. By definition, this excludes people who either don&#8217;t use apps or don&#8217;t use apps that feature advertising on that network.</li>
</ul>
<h4>Advertising network report sources</h4>
<dl>
<dt><a href="http://www.millennialmedia.com/">Millennial Media</a> <span>( <a href="http://www.millennialmedia.com/research/mobilemix/">Mobile Mix</a> | <a href="http://www.millennialmedia.com/research/smart/">S.M.A.R.T. Report</a> | <a href="http://www.millennialmedia.com/research/stateoftheapps/">State of the Apps Industry</a> )</span></dt>
<dd>Millennial Media is my favorite advertising network report. They are independent. They claim to reach of <a href="http://www.millennialmedia.com/about-millennialmedia/">80% of the mobile web</a>. And they publish reports monthly. Plus, there are interesting things to find in the reports. For example, the number 9 mobile device in their January 2011 Mobile Mix report is the Samsung Freeform. What&#8217;s that device? Well, it&#8217;s not Android, Blackberry, or Symbian. It&#8217;s a feature phone with a decent browser available with unlimited voice, text and web on MetroPCS for $40/month. Interesting, huh?</dd>
<dt><a href="http://www.jiwire.com">JiWire</a> <span>( <a href="http://www.jiwire.com/insights">JiWire Mobile Audience Insights Report Quarterly</a> )</span></dt>
<dd>JiWire provides ads for WiFi hotspots. Lots of traffic through the network.</dd>
<dt><a href="http://www.inmobi.com">InMobi</a> <span>( <a href="http://www.inmobi.com/research/">InMobi Research</a> )</span></dt>
<dd>Reports on their network separated by region. Top platforms, devices, and manufacturers.</dd>
<dt><a href="http://mobclix.com">Mobclix</a> <span>( <a href="http://blog.mobclix.com/index/">Moblix Index</a> )</span></dt>
<dd>Monthly infographics based on Mobclix data.</dd>
<dt><a href="http://www.chitika.com">Chitika</a> <span>( <a href="http://insights.chitika.com/">Chitika Insights</a> )</span></dt>
<dd>Chitika&#8217;s research group chimes in on a lot of different topics. Recent posts have covered the <a href="http://insights.chitika.com/2011/the-googlebing-search-bar-brouhaha/">Google/Bing search bar controversy</a> and whether or not <a href="http://insights.chitika.com/2011/chrome-os-a-viable-desktop-operating-system/">Chrome OS is a viable desktop operating system</a>. They look for ways to test these theories using their ad network data. This can lead to good insights, but it can also lead to high profile mistakes such as when they attempted to use their ad network to estimate the number of iPad purchases—even going so far as to create a <a href="http://labs.chitika.com/ipad/">real time tracker</a>—only to find <a href="http://insights.chitika.com/2010/meet-the-ipad-with-real-time-stats/">the numbers were way off</a> when Apple announced real sales numbers.</dd>
<dt><a href="http://www.flickr.com/photos/fidelman/5282509966/">Mobile Advertising Networks Compared</a></dt>
<dd>Infographic comparing the various networks in December 2010.</dd>
<dt><a href="http://mobithinking.com/mobile-ad-network-guide">mobiThinking guide to mobile advertising networks (2011)</a></dt>
<dd>Data and profiles on the various networks to help you pick a network.</dd>
</dl>
<h3 id="appstores" >Apps metrics</h3>
<p>Because of the popularity of app stores and the success developers have had selling apps, there is a LOT of information about app usage. Much of it comes from services providing analytics to app developers.</p>
<h4>What these stats are good for</h4>
<ul>
<li>Understanding how people are using apps..</li>
<li>Helping to determine your app strategy.</li>
</ul>
<h4>What to watch for when you use these stats</h4>
<ul>
<li>Like all of the other statistics, understanding the source of the data. Is it a survey? What was the methodology? What platforms were included in the source data?</li>
</ul>
<h4>App metric sources</h4>
<dt><a href="http://www.distimo.com/">Distimo</a> <span>( <a href="http://www.distimo.com/publications">Publications</a> | <a href="http://www.distimo.com/appstores/">App Stores</a>)</span></dt>
<dd>Most comprehensive monthly report covering the major mobile app stores. They also keep track of all of the <a href="http://www.distimo.com/appstores/">available app stores</a>.</dd>
<dt><a href="http://www.wipconnector.com/">Wireless Industry Partnership (WIP)</a> <span>( <a href="http://www.wipconnector.com/appstores/report">App Store Reports</a> )</span></dt>
<dd>WIP helps connect developers with carriers and handset manufacturers. They recently started tracking all of the app stores available. In addition to being able to find app store info on the WIP site, they provide a monthly report.</dd>
<dt><a href="http://www.flurry.com">Flurry</a> ( <a href="http://blog.flurry.com/">Flurry Blog</a> | <a href="http://blog.flurry.com/bid/54035/Android-Special-Report-Is-Samdroid-the-new-Wintel">Android Special Report: Is Samdroid the new Wintel?</a></dt>
<dd>Flurry provides analytics for iOS, Android, Windows Phone, Blackberry and Java ME apps. They also survey developers that are using their analytics on a regular basis and publish the results.</dd>
<dt><a href="http://www.localytics.com/">Localytics</a> <span>( <a href="http://www.localytics.com/blog/">Localytics Blog</a> )</span></dt>
<dd>Competitor to Flurry. Their blog has had some great insights lately including the fact that &#8220;<a href="http://www.localytics.com/blog/post/first-impressions-matter-26-percent-of-apps-downloaded-used-just-once/">26% of apps downloaded in 2010 were used just once</a>.&#8221;</dd>
<dt><a href="http://www.xyologic.com/">Xyologic</a> <span>( <a href="http://www.facebook.com/pages/Xyologic-Mobile-Analysis-GmbH/179733222056925">Facebook</a> | <a href="http://twitter.com/xyologic">Twitter</a> )</span></dt>
<dd>Xyologic provides insight for developers and businesses. Unless you are a customer, it is easiest to follow them on Twitter or Facebook to learn about new articles or research.</dd>
<dt><a href="https://www.mylookout.com/appgenome">App Genome Project</a></dt>
<dd>This is a fairly new report. It says, &#8220;The App Genome Project is the world’s largest mobile application dataset created to map the anatomy of mobile applications across multiple mobile platforms and app markets. To date, the project has analyzed more than 500,000 Android and iOS applications.&#8221;</dd>
<dt><a href="http://www.chetansharma.com/mobileappseconomy.htm">Sizing up the Global Mobile Apps Market</a></dt>
<dd>Report by Chetan Sharma on the app market.</dd>
<dt><a href="http://www.androlib.com">AndroLib</a> <span>( <a href="http://www.androlib.com/appstats.aspx">Android Marketplace Metrics</a> )</dt>
<dd>Number of apps, paid vs. free, total downloads in the Android Market.</dd>
<dt><a href="http://148apps.biz">148Apps.biz</a> <span>( <a href="http://www.androlib.com/appstats.aspx">iPhone App Store Metrics</a></dt>
<dd>Number of app, paid vs. free, total downloads, most popular categories, etc.</dd>
<dt><a href="http://urbanairship.com">Urban Airship</a> <span>( <a href="http://urbanairship.com/blog/2011/01/06/urban-airship-2010-mobile-app-developer-survey-results/">2010 Mobile App Developer Survey Results</a> )</span></dt>
<dd>Urban Airship provides push notification and in app purchasing tools. They published a developer survey in December that was interesting. They also have a unique perspective on what is happening when it comes to push notifications and in app purchases. Thus far they haven&#8217;t published an reports, but I&#8217;m keeping my eye out for them. [Full disclosure: I'm on the board of advisors for Urban Airship and keep bugging them to publish data. <img src='http://www.cloudfour.com/wp-includes/images/smilies/icon_smile.gif' alt=':-)' class='wp-smiley' />  ]</dd>
<dt><a href="http://www.pewresearch.com">Pew Research</a> <span>( <a href="http://pewresearch.org/pubs/1727/cell-phone-apps--popular-download-demographics">Rise of the &#8216;Apps Culture&#8217;</a> )</span></dt>
<dd>Pew research into app usage and culture</dd>
<dt><a href="http://www.comscore.com">Comscore</a> <span>( <a href="http://www.comscore.com/Press_Events/Press_Releases/2011/2/comScore_Reports_December_2010_U.S._Mobile_Subscriber_Market_Share">Dec 2010 Smartphone Report</a> )</span></dt>
<dd>Each smartphone report contains a note on the percentage of US phone users who download apps.</dd>
<dt><a href="http://www.mobclix.com">Mobclix</a> <span>( <a href="http://blog.mobclix.com/index/">Mobclix Index</a> )</span></dt>
<dd>Mobclix monthly infographics have recently included the Monthly Value of an App User and the Android Marketplace.</dd>
</dl>
<h3 id="other" >Other fun sources</h3>
<p>There are some resources that span multiple categories but need to be included somewhere. They go here.</p>
<dl>
<dt><a href="http://www.kpcb.com/team/index.php?Mary%20Meeker">Mary Meeker&#8217;s Internet Trends</a> <span>( <a href="http://www.slideshare.net/kleinerperkins/kpcb-top-10-mobile-trends-feb-2011?from=ss_embed">Top 10 Mobile Internet Trends Feb 2011</a> )</span></dt>
<dd>Mary Meeker was a long time analyst for Morgan Stanley and published yearly reports on Internet trends. She now works for venture capital firm Kleiner Perkins. Her slide decks are legendary for their density and information. Must read.</dd>
<dt><a href="http://communities-dominate.blogs.com/">Tomi Ahonen</a> <span>( <a href="http://communities-dominate.blogs.com/brands/2010/07/an-8-segment-model-to-analyze-smartphone-market-consumers-and-handsets.html">An 8 Segment Model to Analyze Smartphone Market, Consumers and Handsets</a> | <a href="http://communities-dominate.blogs.com/brands/2011/02/all-the-numbers-all-the-facts-on-mobile-the-trillion-dollar-industry-why-is-google-saying-put-your-b.html">All the Numbers, All the Facts on Mobile the Trillion-Dollar Industry.</a> )</span></dt>
<dd>I listed Tomi in the market share section because he talks about market share most often. But Tomi covers a lot of other areas when it comes to mobile. He is some times crazy and always too verbose, but there is a lot of good stuff on his blog. In particular, I wanted to highlight his post called <a href="http://communities-dominate.blogs.com/brands/2010/07/an-8-segment-model-to-analyze-smartphone-market-consumers-and-handsets.html">An 8 Segment Model to Analyze Smartphone Market, Consumers and Handsets</a> There are few things more frustrating for me than reading someone write about the mobile market assuming that everyone is evaluating phones the same way there are. I&#8217;m not saying Tomi&#8217;s model is correct, but reading it helps you understand that a certain percentage of people are going to make finding a phone with the best possible keyboard a priority even if the keyboard doesn&#8217;t matter to you.</dd>
<dt><a href="http://www.mobilephonedevelopment.com">Mobile Phone Development by Simon Judge</a> <span>( <a href="http://mobilephonedevelopment.com/market-information/">Mobile Market Research</a> )</dt>
<dd>Simon&#8217;s blog tracks many of the studies that come out. His Mobile Market Research page contains an archive of market share and other information going back several years.</dd>
<dt><a href="http://yiibu.com">Yiibu</a> <span>( <a href="http://yiibu.com/articles/mobile-web-reference/">Mobile Web Reference</a> )</span></dt>
<dd>Yiibu is a small development company led by Stephanie and Brian Rieger. Their Mobile Web Reference page contains quite a few resources. In fact, had I remembered they had this page, I might have been saved from writing this epic post.</dd>
<dt><a href="http://pinboard.in/u:grigs">My Pinboard Bookmarks</a> <span>( <a href="http://pinboard.in/u:grigs/t:statistics/">Statistics</a> | <a href="http://pinboard.in/u:grigs/t:demographics/">Demographics</a> )</span></dt>
<dd>I&#8217;ve bookmarked a lot of mobile articles. You can follow new entries on Pinboard.</dd>
</dl>
<h2 id="what-matters">Which stats should you care about?</h2>
<p>Depending on what type of business you have and your role, the mobile statistics that you care about are different. Figuring out what questions matter to you is the first step in finding the statistics that will help you make decisions.</p>
<h3 id="developers">App developers</h3>
<p>App developers need to figure out where they have the best chance to sell their apps or make money from advertising. In particular, developers are often trying to determine which platform to develop for first.</p>
<p>Because the factors that make an app successful are not necessarily the same ones that make a platform dominate, market share and sales numbers don&#8217;t matter as much. Developers will probably weigh the benefits of building something for an established market like iOS where development is easier but the competition is more intense with the opportunities of new markets like Windows Phone 7.</p>
<p>App developers need to look at the <a href="#appstores">app store metrics</a>, <a href="#advertising">advertising data</a> and <a href="#demographics">demographic information</a> (particularly for things like adoption of location-based services).</p>
<h3 id="web">Web developers</h3>
<p>Web developers are accustomed to being able to look at high-level statistics on browser market share and screen resolution and make educated decisions about what platforms they need to support. If they are working on an existing site, there is likely existing analytics that can be used.</p>
<p>When it comes to mobile web, there aren&#8217;t the same easy answers. Existing analytics on a desktop site are not going to provide much insight into how a site will be used once it is mobile optimized. Some analytics systems don&#8217;t even handle mobile web very well.</p>
<p>Aggregate information on mobile web usage is also problematic because it requires site owners to add server side alternatives to the normal javascript-based analytics code. Finally, global numbers on mobile browser usage may not match the target customer base.</p>
<p>In addition to reviewing <a href="#mobileweb">mobile web metrics</a>, web developers should also look at <a href="#demographics">demographics</a> to try to match their target audience to the devices they are likely to use. The <a href="#base">installed base</a> of phones can also be useful.</p>
<p>The ultimate data comes from the customers of a web site or service. The more you can learn about what devices they are using and how they are using them, the better you can target your efforts. </p>
<h3 id="business">Marketing</h3>
<p>From a pure marketing perspective, you&#8217;re going combine your objectives with <a href="#demographics">demographics</a>, <a href="#base">installed base</a> and <a href="#advertising">advertising</a> information to determine where to spend your money.</p>
<h3 id="investors">Investors</h3>
<p>They should obviously look at <a href="#financial">financial</a> information, but looking at trends in <a href="#sales">sales market share</a> also makes sense as an indicator of how companies are competing against others in the market.</p>
<h3 id="you">Your role here</h3>
<p>The point of this list wasn&#8217;t to be definitive about what anyone in particular should be concerned with. The data that matters to you should be determined by your interest and objectives when it comes to mobile.</p>
<p>I track a lot of mobile statistics, but I know the ones I care about and why I care about them. They matter because of the type of work I do and my theories on what will happen in the mobile market. (And yes, I&#8217;ll write about them in a separate post soon).</p>
<p>But the data that matters to you may not be the ones that matter to someone else. Assuming they should care about the same things you do is the most common mistake I see people make when trying to understand what is happening in the mobile market.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.cloudfour.com/a-comprehensive-guide-to-mobile-statistics/feed/</wfw:commentRss>
		<slash:comments>6</slash:comments>
		</item>
	</channel>
</rss>

<!-- Dynamic page generated in 0.611 seconds. -->
<!-- Cached page generated by WP-Super-Cache on 2012-02-03 22:51:30 -->

