Hour 3

The Growth of Mobile

What You’ll Learn in This Hour:

  • How to support several mobile devices
  • The size and resolutions of smartphones and tablets
  • How Retina screens are changing the way pages are designed
  • Why you should consider RWD for supporting mobile devices

Responsive web design (RWD) came about because of mobile devices. Before RWD existed, web designers had few options for creating a website that worked reliably on both small devices like cell phones and large screens like HD monitors. You could use the tools described in Hour 2, “Alternatives to Responsive Web Design,” but they were never intended for the vast number of changes that mobile devices added to the landscape.

Designers used to often design pages which assumed that if a browser is “modern,” it should support all modern HTML, CSS, and JavaScript (or DOM) features. But mobile browsers often don’t support all the features that modern computer browsers do.

In this hour you will learn more about the basic differences between mobile devices. There is more to mobile design than just responsive design. You will also learn more about how to support specific devices.

Basic Cell Phones

Just a few years ago, most people with cell phones had basic cell phones. And while basic phones are not as popular in the West, there are still a lot of countries in the world where simple cell phones are still popular. But many web designers completely discount them.

These phones have the following features:

  • They are very small. Some of the older phones have screens 320px wide or even smaller. But they can still browse web pages.
  • They don’t scroll horizontally. Most basic cell phones that can display web pages only scroll vertically down the page. This means that wide layouts don’t display well on these phones, and customers on these phones will never see any content that is on the right of the main content.
  • They don’t display tables and other complicated HTML and CSS. While some of the later-model flip phones do support tables and advanced HTML, the majority of these phones either don’t support them or do so poorly. Table-based layouts don’t display correctly on these phones.
  • They have limited scripting capabilities. This is one of the most serious issues with these phones because without scripting, it is very difficult to use fallback options for them.

Basic cell phones often use web browsers that were built for them by the company that sells the phone. This means there isn’t a lot of information about what the browser can and cannot support. The Opera Mini browser is the browser most commonly used with these phones. And as of August 2014, Opera Mini still had 3.7% of the worldwide mobile browser market, according to NetMarketShare (http://www.netmarketshare.com). That same site said that the market share for other or unrecognized phone browsers was 1.26%.

While the share of Opera Mini and unrecognized browsers has been dropping over the past year or two, 4.96% is still a lot of people on a lot of phones. When you then look at what Opera Mini seems to support on sites like CanIUse.com (http://caniuse.com), this number takes on greater significance. And smart web designers consider these users when building their sites.

How to Support Basic Cell Phones

There are many things you can do to support basic cell phones on your website beyond RWD. These are some of the things that I like to do:

  • Keep the images as small as possible. Large images take longer to download, and most cell phones have expensive data plans or data limits.
  • Use very basic HTML and CSS. As I mentioned above, many of these phones have very basic web browsers that can’t support a lot of the newest features of HTML5.
  • Avoid frames, tables, Flash, image maps, and JavaScript. Many of these features either won’t work well on the phones or won’t fit on the screens.
  • Build the layout small and narrow. Some cell phones have screens that are no more than 150px wide, and as I mentioned above, many can’t scroll horizontally.
  • Don’t use columns. When a web page is only 150px wide, two columns would each be no more than 75px wide, and text that small is almost impossible to read.
  • Test all your pages on a real cell phone. This is a very important step, especially if your website must support basic cell phones. While there are emulators out there you can use, nothing beats trying it out on a real phone to see your site as your customers see it.

The trick to supporting basic cell phones is to keep the sites you build as simple as possible.

Video 3.1. Web Pages Look Different on Different Devices


Smartphones are growing in popularity every day, and more and more people are using smartphones to access the web. In fact, many people would argue that smartphones are the reason we need RWD.

The best thing about most smartphones is that they use browsers that have good support for modern technology like HTML5 and CSS3. They aren’t as large as laptop or desktop computers, but they often have the resolution required to display web pages just as effectively. Table 3.1 shows the resolutions of popular smartphones.


TABLE 3.1 Resolutions of Popular Smartphones (in Early 2014)

When you’re planning an RWD site, you should consider both the screen size and the resolution of the devices you’re targeting. For example, if a device has a high resolution but a small screen size, even though you can fit a multicolumn layout on the page, it might have text that is completely illegible on the small screen.

How to Support Smartphones

Smartphones are much easier to support than basic cell phones because they have much more sophisticated browsers. But there are still things you need to be aware of when you’re designing for smartphones:

  • Even a 6-inch diagonal screen doesn’t give you a lot of real estate to work with, no matter what the resolution. Keep in mind that the best designs are small and don’t require a lot of scrolling.
  • Screen size also comes into play when you’re dealing with clicking links or filling in forms. The easier you can make these tasks for your customers, the more they will like your website.
  • Smartphones are designed to adjust the content display to portrait or landscape mode, depending on the phone’s orientation. But if your web design doesn’t adjust (or adjusts too much), the page can be difficult to read.
  • Font sizes are important, especially on higher-resolution screens. Just because a screen is a Retina display or has a huge resolution doesn’t mean that a 12-point font is going to be legible.

Tip: Some Form Fields Are Ideal for Smartphones

HTML5 brought a lot of new features to HTML, and some of the best new features are related to form input fields. Now web designers can write forms that are easy to fill out even on a small-screen smartphone or tablet. And best of all, these form fields work no matter what browser or device your customers use. I cover this in more detail in Hour 18, “Responsive Web Forms,” but here’s the basic secret: If you start using the <input type="email"> for email addresses and <input type="tel"> for phone numbers in your contact forms today, you will improve them immensely. When you use these two fields on a smartphone or tablet, the input keyboards adjust so that the forms are much easier to fill out. But a customer using even an extremely old browser like Netscape 6 will still see just a text field and will be able to fill it out without issue.

  • Don’t assume that smartphone users are going to be always online. Basic cell phones and smartphones are meant to travel, and while mobile hot spots and cell towers are more widespread today than they used to be, they aren’t everywhere. Web pages that must be always online will be frustrating for your customers on the move unless you use technology to handle the offline times.
  • Download times and page sizes are often more noticeable on a smartphone than on a laptop or desktop computer. Even the most advanced 4G network isn’t as fast as a Wi-Fi cable connection. Pages with huge images or massive text or scripts can take a long time to download, and customers may give up and go elsewhere.
  • As with basic cell phones, you should test your designs on a real smartphone rather than just an emulator. This will give you a much better idea of how a design is going to work.

If you’re going to support smartphones, then you should remember that they are not just miniature computers.


Tablets and tablet computers are where mobile devices have really taken over. Consumers are buying more tablets than they are desktop and laptop computers, and if your website doesn’t work on a tablet, you will be in trouble.

Luckily, the tablets on the market now use web browsers that are just as compatible with HTML5, CSS3, and JavaScript as their desktop computer counterparts. But that doesn’t mean you should treat these devices just like computers.

Like smartphones, tablets have different screen sizes and resolutions, and these can impact your designs, so you need to take them into consideration. Table 3.2 lists some of the popular tablets and their screen sizes and resolutions.


TABLE 3.2 Resolutions of Popular Tablets (in Early 2014)

How to Support Tablets

As with smartphones, the range of sizes and resolutions varies greatly on tablets. When you’re a web designer, it can be tempting to simply assume that if a device has a resolution of more than 1000px wide, it should be able to display web pages without any problem. But there are some aspects of tablets that you need to be aware of:

  • Tablets have touch screens and require tap interfaces. This means that if you’re building clickable interfaces (such as drag-and-drop), you need to create tap-and-drag interfaces, too.
  • Even more importantly, the nature of tapping means that people use their fingers, and not everyone has thin, tiny fingers. You should make sure that your links have sufficient margins and paddings surrounding them so that they are clickable.
  • The processors in tablets aren’t as powerful as those in desktop and laptop computers, so complex pages may take longer to finish loading on a tablet than on a laptop or desktop.
  • Flash is a challenging tool for designers who want to support tablets. Apple has removed all Flash support from iOS, so it won’t work at all on Apple devices. And while it will work on Android devices, it’s not always very stable.
  • Be sure to test your pages on actual tablets. You can do preliminary testing by resizing your desktop web browser down to an approximate tablet size, but this won’t give you the feel of using a real tablet.

Caution: Scrolling Clickable Banners Can Be Extremely Annoying

A very popular feature on web pages right now is the rotating banner image or carousel. These are clickable images that showcase a featured part of the site. On desktop computers where the pages load very quickly, these work really well. But a common problem on tablets is that pages load more slowly, but the rotation on the banner continues. So when a customer clicks on such a banner, the page continues to load, rotating that banner out and the new banner in. The customer ends up at a page other than the one she wants. If you must use these types of banners, it’s best to either give them a very long rotation period (like 60 seconds or more) or to allow customers to rotate them manually.

Many people use tablets as their primary web browsing device, and if your web pages aren’t tablet ready, you will lose customers.

Retina Devices

Retina devices are a special subset of Apple iPhone and iPad devices. A Retina display has a much higher pixel density than other computer screens. The density is roughly 300 pixels per inch, which is comparable to the density of a print document.

Apple first introduced Retina displays in the iPhone 4S in 2011. And since then, Apple has come out with Retina iPads and Retina laptops as well as the iPhones. Retina-like screens will probably start coming out for non-Apple devices sometime in 2014.

This means that anyone using a Retina device to view a website that is not optimized for Retina displays will see images that seem fuzzy or blurry. In some cases, the pixels will be visible, such as in a rounded corner or on transparent edges. Pixels are square, and rounded edges where you can see the pixels make those edges look square and blocky, too.

Why Build Retina-Ready Websites?

As I mentioned above, a website that is not Retina-ready can look blurry and pixelated on a Retina screen. Pixelation may not be obvious to a non-designer, but the reality is that even if users don’t know they are seeing it, their brains do. When a picture is blurry or pixelated, your customers will need to spend more effort to see the page. And this can be tiring. For example, I am prone to migraines, and I notice that if I spend a lot of time on non-Retina-ready sites, I’m much more likely to get eye strain and then a migraine. Websites should not cause their customers pain.

These are some of the reasons to build Retina-ready pages:

  • There are millions of people already using Retina devices. This means that if any of them come to your page and you haven’t optimized the page for Retina, they will find the images blurry or pixelated and quite possibly ugly.
  • Your fonts will be clearer and easier to read. This means that if you want to work with smaller font sizes, you can because Retina devices will be able to see them more clearly.
  • You can get as detailed as you want. I think of this as the fractal method of design. With Retina screens, you can move deeper and deeper into the details of an image or a design element without significant loss of perception.
  • And, of course, for the purposes of this book, building Retina-ready sites is a great way to use responsive design. You can detect whether a device is Retina ready and display Retina-ready images to it. You will learn more about this in Hour 15, “Creating and Using Images in RWD.”

How to Build Retina-Ready Websites

The majority of work you need to do to get a website Retina-ready involves the images. You want to create images that are at least 220ppi and often twice as large as their non-Retina counterparts.

An easy way to include these images only for your Retina customers is to use the retina.js script, which you can find at http://retinajs.com. Then you simply create a graphic and give it a name like image.jpg and then create a Retina version of that graphic and name it image@2x.jpg. When a Retina user visits your page using the retina.js script, the images are automatically replaced with the Retina versions. I discuss this in more detail in Hour 15.

Why Responsive Design Is Important

Responsive design is very important to mobile customers because it allows them to see the same website that non-mobile customers see. Before RWD came along, web designers would often create entirely separate sites for mobile customers, which were typically subsets of the full site.

RWD allows designers to create sites that work on many different devices without requiring them to repost the content multiple times.

The thing to remember is that mobile use and the use of different devices to view web pages is growing and, according to some measures, the use of mobile devices will surpass or already has surpassed desktop use. There are already a lot of people who only go on the web using mobile devices.

RWD lets you as a designer build a website that doesn’t care what device your customer is using. Rather than having to build a site for mobile, a site for desktop, and a site for smart appliances, you build just one site that is flexible enough to support all those devices and more.

And RWD is more future-proof than standard web design. RWD doesn’t look at a device but rather looks at the features. For instance, an RWD site that checks for Retina displays doesn’t care if the device is an iPhone 4S or a Google Nexus 11. It just notices that the screen can handle high-resolution Retina images and displays those.

Many people believe that RWD is not a trend but rather the way websites will be built. The expectation is that a site that isn’t responsive by 2015 will be considered behind the curve and will lose customers.

Video 3.2. How a Responsive Design Looks


This hour you’ve learned about the different devices that RWD tries to respond to. You’ve learned how to support basic cell phones, smartphones, and tablets. And you’ve learned how Retina screens are impacting the mobile device landscape.


Q. I don’t know anyone who browses using a basic cell phone. Is it really important to support those devices?

A. The answer really depends on your website and who your customers are. For some websites, basic phones are a nonexistent part of the customer base, but for others they are critical. If you don’t know, rather than make a guess, you should watch your stats and see who is visiting your site.

When you’re looking at your site stats, bear in mind that if your site focuses on a lot of people from undeveloped countries, you need to support their greater use of basic cell phones.

Also, your site’s topic can have an impact in this area. For instance, I work on a site that is visited by a lot of people who don’t like modern technology. The site’s customers are all from North America, but they tend to use more basic cell phones than do users of my site about HTML5.

Q. Is Retina-ready really as critical as you say? Most of my mobile customers are on Android devices.

A. Again, this is a factor that you’ll need to decide based on your site’s customers. A good tool to use to find out if you’re being visited by a lot of Retina devices is Google Analytics (www.google.com/analytics/). After you know how many people are seeing your site as pixelated and blurry, you can make a better decision.


Quiz Loads Here





Using a basic cell phone, smartphone, or tablet—or all three if you have them—visit the website you chose in Hour 1, “What Is Responsive Web Design?” Evaluate how the site looks in the device. Does it work well? Is it easy to use? What can be improved?