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 of responsive web design techniques 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.
Why IMG Tags Suck for Responsive Web Design
If you want your site to load as quickly as possible, you do not 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.
In my research, I found nearly 80% decrease in file size by delivering images at the actual size they were going to be used on a mobile device.
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.
What are Responsive IMGs?
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.
As far as I can tell, Scott Jehl first coined the phrase Responsive Images to describe a javascript solution to the img source problem. He also referred to Responsive IMGs as a general term recently 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.
Responsive IMGs Challenges
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.
Minimum Bar: Start with Mobile, No Extra Downloads
Scott Jehl set a minimum bar for Responsive IMGs by stating they must do the following:
- Start with mobile img
- Upgrade to larger size without downloading both
Both of these are worthy and necessary goals.
The First Page Load Problem
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.
Image from Bryan Rieger’s Muddling Through the Mobile Web presentation, photo by wscullin, licensed under Creative Commons.
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.
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.
Rendering Race Conditions
Techniques that rely on adjusting the image source attribute via javascript need to make sure that the modification happens before the image requests start.
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.
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.
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.
Content Delivery Networks and Caching
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.
Future Friendly Responsive IMGs
If we accept that the “quantity and diversity of connected devices—many of which we haven’t imagined yet—will explode”, then we need to consider look for solutions that are future friendly. In addition to the current experimentation, we need to start thinking about what a long term solution might look like.
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?
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.
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.
Here are some of the things that I think a future friendly technique will need to consider:
- Support arbitrary image resizing — 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.
- Art direction can override automatic resizing — 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.
- Support for higher resolution displays — What do we do with the iPhone 4’s retina display 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.
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.
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—even if that resolution isn’t currently being used—so that when new devices become available the high resolution source is already available and hasn’t been lost.
- Connection speed should be part of the criteria — 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.
- A replacement for the IMG tag? — 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.
That’s my short list. What would you add?
In part 2, I’ll take a closer look at the current alternatives for responsive imgs and which ones hold the most promise.
Are you having trouble convincing people that they need to develop a mobile web site as part of their overall mobile strategy?
I have a solution for you. Ask the people you need to convince if they do any of the following:
- Send email to their customers?
- Participate in social media?
- Search engine optimization?
- Advertise online?
Each one of those marketing efforts is based on links. And links don’t open apps.
It seems like a basic concept, but the fact that links can only reliably open web pages is often forgotten.
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.
Technically True vs. Practical Reality
Inevitably, when I talk about how links don’t open apps at a conference, someone who wasn’t in the audience will point out that on some platforms like iOS, you can register URL schemes to open apps.
While this is technically true, it isn’t practical for most communication because:
- Not every platform offers equivalent functionality. On Android, the way to invoke applications is intents which works very differently.
- 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’t guarantee nor control.
While saying that links don’t open apps isn’t “technically” true, it is a practical reality.
Power of Hyperlinks
The realization that links don’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.
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.
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.
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 of the development spectrum, but is also comfortable with front-end technology.
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.
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.
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.
This is a full time position on-site in lovely Portland, Ore. We offer benefits including medical, dental, vision, and IRA.
Job Description
- Research, identify and document client technical requirements.
- Determine and identify appropriate technologies to be used.
- Assist with developing technical project schedules, plans, task assignments and time estimates.
- Assist in strategic planning and requirements gathering.
- Program mobile applications and build mobile web sites.
- Be a positive and enthusiastic contributor to our team.
- Actively, consistently communicate with team members about project process and progress.
Our ideal candidate is:
- able to create a concise, clear plan of action from multiple input sources and stakeholders; flexible and responsive to changes in requirements and scope.
- self-directed; takes an ownership role of complex projects.
- strategy-focused and creative; excited to face new challenges and learn new skills.
- deadline-driven and steadfast about meeting commitments to customers.
- invigorated by learning new technologies and solving new problems.
- an excellent communicator, with the ability to comprehend and articulate technical concepts, both verbally and in writing.
- an independent learner who can quickly apply new skills productively.
- enthusiastic about the job; enjoys solving customer needs.
- a straightforward, honest, team player.
- able to effectively prioritize multiple task.
- comfortable working in a small, start-up environment.
Skills and experience we’re seeking:
- 3-5+ years of relevant technical experience or related background
- Extensive experience with cross-platform JavaScript and DOM scripting
- HTML5, XHTML, CSS
- Server- and client-side web site or application programming (more engineering than design)
- device detection for mobile web
- PhoneGap or other hybrid mobile app development
- iPhone and/or Android development
- Strong problem solving and analysis skills
- Strong competency in web technologies and development
- BA/BS or equivalent
To Apply
Email your cover letter and resume to jobs@cloudfour.com. No recruiters please.
A recent chat with Ethan Marcotte and Scott Jehl about how they’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-designed and contains all of the functionality needed, the need to switch to the desktop site goes away.
However, as users of sites, we don’t like it when the link to the desktop version isn’t present. Providing a link to switch to the desktop view is a safety blanket for both developers and users.
As users, we don’t want to see others remove the link to switch to the desktop site because we don’t yet trust people to create mobile web experiences that contain everything we need.
As a developers, mobile is still new enough that we’re not 100% confident that we’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.
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’ll know that we as web practitioners have raised the collective knowledge and skill set sufficiently.
We’ll know the mobile web is ready when links to the desktop version disappear.
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’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 the first rumors of a cheaper iPhone surfaced, I’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.
Because of this, I’m bullish on the impact of a cheaper iPhone and what it would mean for Apple’s smartphone market share. Let me explain why.
The Real Reason Why Android is Successful: It’s Good Enough and Cheaper
It seems like I’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.
I was flabbergasted that people would buy inferior products that promised headaches instead of joy. I thought people just didn’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.
At some point I realized that I wasn’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.
The problem for a lot of Apple fans is that they still can’t understand why someone would chose the obviously inferior product. M.G. Siegler of TechCrunch wrote an article entitled, “Is Android Surging Only Because Apple Is Letting It?” His thesis was that Android was only winning because the iPhone wasn’t available on Verizon. In the article, he wrote:
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. 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.
Most people don’t require their phones to be best. They simply want something that’s good enough to get email, text message, and browse the web. Oh and cheaper is better.
BTW, the predictions of big lines to buy the Verizon iPhone hasn’t panned out and sales have thus far been “disappointing.” So much for the theory that carrier exclusivity is why Android passed iPhone in market share.
But Isn’t Android the Same Price as the iPhone?
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.
But the Android phones don’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’s site currently lists 13 different Android models for under $100.
That’s why the average selling price (ASP) is so important. On average, the iPhone costs twice as much as its nearest rival:
Q2 2007 to Q2 2010 Average Selling Price. Source: Asymco
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.
Have you heard of the Samsung Freeform?
No? I hadn’t either until I noticed it was the number three phone in terms of impressions in Millennial Media’s March 2010 mobile mix report.
Millennial Media’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.
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.
The inclusion of the Samsung Freeform on this list stood out like a sore thumb. I had to know more about this phone.
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.
The phone is only available through MetroPCS. Right now, you can get it for $49 unsubsidized.
But more importantly, you can get unlimited voice, text and web on the Samsung Freeform for only $40 per month.
Growth at the Low End of Smartphone Market
Around the same time I learned about the Freeform, a Comscore survey in Europe found that “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.”
I haven’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.
U.S. Minorities Lead Caucasians in Mobile
Over the last year, there have been numerous studies showing that minority adoption and usage of mobile is outpacing caucasians:
Pew Internet Research found that African-Americans and Latinos use more mobile data applications. Nielsen found that a higher percentage of minorities both own smartphones and recently acquired smartphones.
It probably goes without saying, but census data 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.
Android Growth Due to Lower Prices
As I stated above, I believe Android’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, 36% of Android owners had household incomes of less than $50,000 versus only 22% of iPhone owners. I suspect the difference is more exaggerated now.
Therefore, Android’s success is further proof that growth is happening at the lower end of price spectrum.
The Rational for the Cheaper iPhone in a Single Chart
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:
If you read the Comscore blog post that this chart comes from, you won’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.
According to Comscore, 81% of iPhone owners have household incomes greater than the U.S. median household income ($44,389).
TNS Global found similar results in a survey noting that “iPhone users are also younger, but the most highly educated, employed as a manager or professional and earning more than $100K per year.”
Does Apple care about the low end of the market?
When I tweeted about the above chart, I got a lot of feedback from people who were confused about what I thought the chart meant. My friend Jonathan Stark jokingly asked if BMW was going to announce a car for under $10k? The implication being that Apple stakes out the high end and doesn’t care about the low end of the market.
I have always thought that Apple cared about market share, but that it wasn’t the top goal for Apple. Apple seems to value:
- Building the best product they can
- Selling products with a high profit margin
- Gaining market share
In that order. They won’t compromise their design ideals, brand or margins to chase the low end.
But if they can create an cheaper iPhone that lives up to Apple’s brand promise and sustains their margins, I see no reason why they wouldn’t pursue the low end of the market given the growth opportunities there.
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’t think Apple could do it. It didn’t seem like there was enough room to differentiate the iPod Touch from a low end iPhone.
I also had my doubts they could build a product at the low price point without compromising. They can’t decrease the screen size like they did for the iPod Nano or remove it entirely like they did for the iPod Shuffle.
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.
But no matter what I think, we should listen to what Apple COO Tim Cook said about the low end market. Cook recently told an analyst that “Apple did not want its products to be ‘just for the rich,’ and that the company is ‘not ceding any market.’”
Will a Cheaper iPhone Make a Difference? The Biggest Cost of a Phone is the Carrier Subscription
When rumors of the cheaper iPhone first surfaced, many people commented on the fact that reducing the cost of the phone won’t help Apple unless they do something to reduce the monthly subscription cost. I disagree.
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.
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.
There are nuggets that hint at this strategy in quotes from the recent analyst briefing:
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, the impact on carriers could be as large as the impact of the original iPhone.
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.
A Cheaper iPhone Will Be a Smash Hit
Those who have followed me on twitter or seen me speak at conferences knows that despite the fact I love Apple products, I haven’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.
Horace Dediu of Asymco recently wrote that he still holds “that 20% smartphone share is possible for the iPhone.” This was my best guess for where Apple would end up as well.
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.
But we don’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.
We wrote the book:
Recent Comments