Adaptive Design Techniques for Tablets, Smart Phones, and other Mobile Devices

By: Daniel Imbellino
June 02, 2013

When it comes to designing for mobile devices such as smart phones and tablets, example smart phone display the design principals aren’t always straight forward, and there are many technical and device specific aspects that must be taken into account when developing for these devices. For one, when developing page layouts with media queries for smart phones like the Galaxy SII, you can simply code for the phones native resolution, but when it comes to most Apple devices this practice does not work since iphones and ipads tend to have higher pixel density’s, and these devices also display content at the same resolution in both portrait and landscape modes, so simply developing media queries based on the device specs doesn’t work with Apple devices, and you’ll soon see why.

Before we get started there are a few things you need to keep in mind in terms of adaptive design techniques. For starters, it’s best to tie your elements together as much as possible, and this means designing with margins and or relative positioning. In either case, designing web based content in this manner forces one elements position and layout to be become dependent upon the other elements that surround it. If you aren’t familiar with the positioning properties of CSS you can touch up on those subjects in this tutorial: Positioning elements in CSS .

Here we’re going to cover some of the proper design practices for a number of mobile devices with the use of media queries. We’re also going to cover some of the design techniques to avoid that may actually do more harm than good. One thing to keep in mind here, unless you have the device at hand, then you have no way to know if your coding practices worked or not! No exceptions!

Let’s start with designing for Apple devices:

Like many other mobile devices, Apple iphones and ipads tend to have varying degrees of pixel densities, with the newer versions representing higher density’s than their older counterparts once did. Pixel density is merely the measure of “pixels per inch” on a given digital screen, it also takes into account how closely packed pixels are, as well as their size and shape. The iphone versions 4 and 5, as well as the ipad 3, all have higher pixel density’s of 2, meaning that these devices displays actually crunch 2 CSS pixels into 1 device pixel. For instance, Apple touts in its specifications for the iphone 4 to have a resolution of 640x960px, but the actual physical screen only has a resolution of 320x480, that’s only half its stated resolution. The 640x960 resolution is specified in terms of CSS pixels only, and not the actual physical dimensions of the devices screen itself.

Thanks to the power of media queries we can effectively measure using either the physical dimensions or logical (CSS Pixels) measurement values of a device, but there’s a few things you need to keep in mind. When measuring for the physical dimensions of any device, you must use the “device-width” or “device-height” declarations; and if you’re measuring in terms of CSS pixels, then you need to specify measurements using “width” or “height” values only, since you are effectively measuring the dimensions of the browser window itself. Failure to do follow this protocol will result in code that does not function properly.

You can use “min-device-width”, “max-device-width”, “min-width”, “min-height”, etc, when implementing your media queries.

To code for the physical screen of the iphone4:

@media screen and (device-width: 320px) and (device-height: 480px) and (orientation: portrait) {
Styles
}
Keep in mind, again, most Apple devices have the same resolution both vertically (portrait mode) and horizontally (landscape mode), so you will need to use the same width and height for both dimensions:

@media screen and (device-width: 320px) and (device-height: 480px) and (orientation: landscape) {
Styles
}

You can now style accordingly for each dimension, despite the fact both use the same resolutions since we signaled to the browser pre-processor what orientation each set of code relates too.

To code for the browser window with iphone4:

@media screen and (width: 640px) and (height: 960px) (orientation: landscape) {
Styles
}

Keep in mind, since the older Apple devices have a pixel ratio of 1, the same content rendered at the same physical resolution for earlier versions and newer versions of the iphone won’t render content the same! For the newer versions you can use the “(-webkit-min-device-pixel-ratio: 2)” declaration in order to differentiate between older and newer Apple products. In this case, this set of code would be effective for the iphone 4 or 5:

@media screen and (device-width: 320px) and (device-height: 480px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait or landscape) {
Styles go here
}

Note: it’s best to code for the physical dimensions of the screen and not in terms of CSS pixels whenever possible, since not all browsers will display content in the same manner on a given device!

Other Apple devices with a pixel density of 2:

Iphone5: Has a physical screen size of 320x568px, and a logical resolution of 640x1136px. Has the same resolution in both portrait and landscape modes.

Ipad3 and 4: Has a physical device resolution of 768x1024, and a logical resolution of 1536x2048. Also has the same resolution for both portrait and landscape modes! So the 768x1024 would be used with “device-width:” and “device-height”, while the 1536x2048 would be used for “width” and “height” values that are geared towards the CSS pixel.

Older versions of the ipad 1 and 2 both have resolutions of 768x1024, but both have a pixel density of 1, meaning 1 device pixel maps out to 1 CSS pixel. They also map to the same resolutions in both portrait and landscape modes.

ipad 1 and 2:

@media screen and (device-width: 768px) and (device-height: 1024px) (orientation: landscape){
Styles here
}

Ipad 3 and 4:

@media screen and (device-width: 768px) and (device-height: 1024px) and (orientation: landscape or portrait) and (-webkit-min-device-pixel-ratio: 2) {
Style here!
}
OR:

@media screen and (width: 1536px) and (height: 2048px) and (orientation: again, either landscape or portrait) {
CSS Styles (stick with device specific code if you can)
}

Older versions of the iphone have a screen density of 1 and have a resolution of 320x480 in both dimensions, just as the others did, again, mapping 1 CSS pixel to one device pixel accordingly.

Just remember to take into consideration pixel densities as well as testing when coding out your websites. If you’re not designing for older Apple phone devices then you do not need to implement the “device-pixel-density” rule. The ipad 1and 2 have the same physical resolution as the ipad 3 and 4, but the later have higher logical resolutions of 1536x2048px. The older ipads have the same physical and logical resolutions of 768x1024px.

You may have seen media queries described with the use of “min-device-width” or “max-device-width”, or “min-width” or “max-width”, in other tutorials online. Don’t do this! This makes no sense, since the code you are designing for a specific device or resolution could then render on the wrong device at the wrong resolution, or for the completely wrong aspect ratio! Don’t use varying resolutions for one statement unless you have access to every device in existence that will render at those variations so you can test them. Otherwise this is total quackery! People tend to think this makes your content more scalable, when in fact it does not! Using variations of “max-width:” or “max-height”, etc, will not make your content any more scalable. Scalability is defined within CSS, and some instances javascript, which I would avoid.

The ipad mini has a pixel density of 1, so the physical device pixel maps out to a single CSS pixel. As with the other Apple products, the portrait and landscape modes both share the same resolutions, in this case 768x1024px.

Samsung phones:

Unlike the Apple devices, Samsung devices do not share the same resolution in both portrait and landscape modes. For instance, the Galaxy S2 has a device resolution vertically of 480x800px, which is inverted horizontally to 800x480px. This means you will need to code for each dimension at the resolution shown for all Samsung devices.

The Galaxy S2 in both portrait and landscape modes:

@media screen and (device-width: 480px) and (device-height: 800px) and (orientation: portrait) {
Style
}
@media screen and (device-width: 800px) and (device-height: 480px) and (orientation: landscape) {
Your style info
}
The S2 has a pixel density of 1.5, however you don’t need to state a pixel density when coding for this device.
Galaxy S3 in both portrait and landscape modes:
@media screen and (device-width: 720px) and (device-height: 1280px) and (orientation: portrait) {
Styles here
}
@media screen and (device-width: 1280px) and (device-height: 720px) and (orientation: landscape) {
}

Other Samsung device Resolutions:

Galaxy S4: 1080x1920px
Galaxy Nexus: 720x1280px
Galaxy Note: 800x1280px
Galaxy Note 2: 720x1280px
Galaxy Note 10.1: 1280x800px
Nexus 10: 2560x1600px

What is the viewport meta tag and why I don’t use it:

The viewport meta tag was originally designed by Apple in order to give developers a way to scale their non responsive websites, Apps, and content for mobile devices. In the earlier days of web design with mobile devices, the viewport tag was seen as a way to better scale non-responsive websites to better fit into the viewport of Apple devices. Simply put, the viewport is actually the viewable area of the screen. You can define viewport settings using width, height, device-width, or device-height characteristics, etc, when coding for Apple devices. Apple defines the viewport area as being the entire viewing area of the screen, not including scroll bars or address bars. By the way, the meta viewport tag is NOT a standard, nor will it ever be.

Apple defines the original default viewport width as being 980px. Using the viewport meta tag you would effectively have the option of changing the viewport size so that your content would better fit the viewable area of the screen. Several years ago the viewport tag was a decent option to consider when web designers wanted to scale a desktop version of a webpage to fit on Apple devices, such as the iphone, or to better scale a mobile version of a site. However, today designers have much better design options than they did a few years ago, thanks to advanced design technologies with CSS3 that allow for the ability to create physical screen size specific, or logical resolution specific rules in your designs. Even today, the viewport meta tag serves a great purpose when designing apps for Apple devices, but when it comes to web design for mobile devices as a whole, its use is pointless and makes no reasonable sense at all, unless you are employing a separate scaled down mobile version of your website, which many still are.

Again, the whole point of the viewport meta tag was to help scale a webpage to better fit the viewable area of an Apple mobile device. Honestly, considering the technology that is available today with media queries and javascript for creating a responsive or adaptive design, then why are people still using this tag? Some developers are touting this tag as a “one size fits all” approach to designing for mobile, when in fact it is not! Many designers claim that you should design at a base starting point of 980px for this reason. But the question is, how is that 980px development going to scale to all those desktop browsers and devices that render them? Designing your site for one resolution and relying on a meta viewport tag to scale it is ridiculous.

Today’s mobile devices, including Apple products scale large desktop sites much better than they used to, thanks to higher pixel densities, and better scalability that modern mobile devices now incorporate. The most often used variation of the viewport tag is to set the width of content rendering of a given webpage to the width of the physical devices screen itself:

<meta name=”viewport” content=”width=device-width” />

Here we’re setting the viewable area of the browser window to fit within the total width of the physical screen itself. Apple states you should set your viewport width to the actual width of your webpage itself:

<meta name=”viewport” content=”width=1024” />

Instead of using this meta viewport nonsense, why not just design your content using media queries in order to get that content to display properly to begin with? The viewport meta tag actually broke my styles when coding this website for the Samsung Galaxy S2 and iphone4! Why? Because it rescaled my content to 100%, which would have broken my code since the content was already scaled appropriately using the media queries with percentages I had in place. It broke the media queries for Samsung phones altogether! The other reason being, I don’t use a separate mobile version for my site, as I serve the same content to all users, a best practice today, and a concerted recommendation by all major search engines!

You can set the initial and maximum scale of a webpage with the meta viewport tag as well:

<meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1” />

What does this initial scale value of 1 represent? It means to scale the content to 100% of its initial size. Likewise a scale of 0.5 would equal to 50%, and 0.25 would equal 25%, etc. 1.5 would equal 150% scaling. You should be doing this with CSS already! Know when to use this tag and when not too.

The real problem I have with using the meta viewport tag to decide on initial scaling is that you should be using adaptive design techniques with media queries to decide the scaling of your webpage’s content, since the viewport meta tag does not take into account other factors, such as aspect ratios, which can easily cause elements to not appear in the proper order they were originally designed too! Another argument I would like to debunk is that many designers are claiming you need to implement the viewport tag so that users don’t have to zoom to see text or images. Again this makes no sense since this is easily achievable with CSS alone, without the use of any meta anything! Ever heard of percentages or em’s? Also, mobile devices today have great functionality already in place for zooming into content online, so there is no need to alter this property at all.

Another problem the viewport tag presents is the fact that not all mobile devices have the same resolution, aspect ratios, or screen sizes. Either way it goes, the viewport tag is likely to break down somewhere along the way, and often it does.

The solution:

Use percentages and media queries! Create a fluid and adaptive design that can easily adapt to various resolutions, aspect ratios, and screen sizes. Either way it goes you cannot design for any device you cannot see! If you haven’t tested it, then assume it does not work. It appears that what many people are doing is designing a separate mobile site, and using the viewport tag to scale content appropriately, or creating the “one size fits all garbage” using a simple design that looks like crap on any device it’s rendered on. Yes, simple layouts can render much better than complex layouts, they also have no design to them either, featuring a white background with a few elements and black text. Excitement! If you designed your site properly to begin with using percentages, then there would be no reason for anyone to have to zoom in extraneously to view your content to begin with. Also, mobile devices today do a great job of scaling objects larger when a user needs them too. Why fix something that ain’t broken?

You can use percentages to help properly render your content on mobile devices. Doing otherwise you will run into a million problems since there are now a huge plethora of mobile devices hitting the market today that vastly different pixel densities, screen sizes, resolutions, and aspect ratios for that matter. Why on earth would you want to set the initial scale of your content to be the same on all devices? Well, if you had a simple layout, tested that layout properly starting with the smallest screen sizes imaginable, then this fine, so long as you don’t mind the fact that you now have a separate mobile website, and 2 times the headaches! Sometimes a scaled down version of your site is not a bad idea, but this is the only time you should be using this tag!

Google and Microsoft’s recommendations is for developers to start designing single webpage’s that will render on all devices without implementing a separate mobile site, and using just CSS to cause webpage’s to render appropriately across those devices! If you have a scaled down mobile version of your site, then the viewport tag is fine, otherwise I would ditch it! Stick with adaptive and responsive techniques instead to begin with, and test on all devices you plan to support! If you don’t have a particular device, buy it, borrow it, or rent it! Many companies rent out mobile devices for a fee these days. I myself have struggled with designing for all the devices in the digital mobile world, but there are ways to achieve this. Either way it goes, simply assuming that your content is going to scale the same way on all mobile devices is quite ridiculous really.

Designing for Nook HD and Kindle Fire:

The Nook HD comes in two variations. The HD version has a resolution of 1440x900px, and the HD+ has a resolution of 1920x1280px. Both of these resolutions are stated in terms of landscape mode (horizontally). You will need to invert the dimensions when coding to cover for portrait modes as well (900x1440 and 1280x1920 respectively). These resolutions are stated in terms of device pixels only. The devices have a pixel density of 2? Something to keep in mind. When I coded for the Nook HD standard version I didn’t have to specify a pixel density at all.

Kindle Fire HD 8.9in: 1920x1200 resolution in landscape mode, and 1200x1920 in portrait mode. Has a pixel density of 1.5. That’s 1.5 CSS pixels to one device pixel.
Kindle Fire HD 7in: 1280x800 resolution landscape, and 800x1280 portrait mode. Has a pixel density of 1.5.
Standard Kindle Fire: 1024x600 landscape, and 600x1024 portrait mode.
Kindle DX: 824x1200 824x1200 portrait, and 1200x824 landscape mode.

Designing for the Microsoft Surface Tablets:

Surface Tablet: 1366x768 landscape, and 768x1366 portrait mode.
Surface Pro: 1920x1080 landscape, and 1080x1920 portrait mode.

Apple Macbook Resolutions:

Macbook Air 11in: From late 2010 to mid 2012. Has a resolution of 1366x768px
Macbook Air 13in: Also from late 2010 to mid 2012. Has a native resolution of 1440x900px.
Macbook Pro 13in: Has a native resolution of 1440x900px.
Macbook Pro 13in: with Retina Display: Has a native resolution of 2560x1600px
Macbook Pro 15in: Has a native resolution of 1440x900px.
Macbook Pro 15in with Res-screen: Has a native resolution of 1680x1050px.
Macbook Pro 15in with Retina Display: 1880x1800px.

If you’re caught between making the choice to either develop a separate mobile website, or create an adaptive design that renders the same content across all devices, I would personally go with the latter. Why? Because search engines recommend it, and it staying within their recommendations is a best practice. In fact, Bing is now penalizing websites that cannot be displayed on mobile devices by returning them in less search results. Microsoft has even gone as far as to state that websites have about another year in which they will be expected to have adaptive designs without the use of a separate mobile website! No joke either. While I feel this is unfair, as do many others, the search engines are the masters of our domains, and we must heed to their rules and constraints.