Responsive Design is a technique where the contents of a web page change depending on the device size and/or viewport width. HTML5 Rocks has a great description of the process. Ethan Marcotte’s A List Apart article is a very good read, too.
If your primary target audience is mobile users, then you should certainly construct your CSS so the “default” styling is for mobile. However, one of my websites was not compatible with either Respond.js nor css3-mediaqueries.js, so I had to create it as a desktop-first site so that it would display on IE8.
A fluid layout is one where all the content flows to fill the whole width of the screen AND a horizontal scrollbar is not generated when the browser width gets narrow. This is is the core of creating a Responsive Design. Here are a few guidelines:
img { max-width:100%; } to create responsive images.<tr>) and the table and cells are sized using percentages.position: absolute;) only as a last resort and its containing element should not be the <html> tag (rather it should be something defined as fixed, absolute, or relative.)Phone-sized browsers usually have a viewport larger than the actual (physical) size of the screen. In other words, if the actual width is 320 pixels, the mobile browser may report that the width is 700 pixels. The web page is the shrunk (scaled) down so everything is very tiny so that the user must now scroll and zoom-in on the content they wish to see.
This head tag will tell iOS (and perhaps other?) devices to size the browser window (viewport) to fit the physical screen.
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes, shrink-to-fit=no">
Media Queries are a CSS technique to (generally) show or hide content, or otherwise format the page, depending on the size of the viewport (screen).
This is the Javascript equivalent of CSS’s @media. Check out caniuse and https://developer.mozilla.org/en-US/docs/Web/API/Window.matchMedia
Text naturally wants to flow within its container; images, on the other hand, will naturally want to stay their original pixel dimensions. You can change images to get smaller as the width of the browser window gets smaller. The key bit of CSS that allows images to shrink is:
img { max-width:100%; }
I have written a description of how to make responsive images.
There is a ton of good information in the 12 HTML5 tricks for Mobile article.
There is an iOS Safari bug where the whole screen is scaled up when rotating from portrait to landscape. First try this:
// Prevent iOS text size adjust after orientation change, without disabling user zoom.
html {
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
If you are still having troubles, give this is shot:
//This makes iOS devices display better.
if (navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPad/i)) {
var viewportmeta = document.querySelector('meta[name="viewport"]');
if (viewportmeta) {
viewportmeta.content = 'width=device-width, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0';
document.body.addEventListener('gesturestart', function () {
viewportmeta.content = 'width=device-width, minimum-scale=0.25, maximum-scale=1.6';
}, false);
}
}
Graphical menus often don’t work for mobile sites; one technique is to hide the menu and then dynamically building a select menu using JavaScript. This is a technique that was used for an eLearning site I worked on.
See Apple doco here.
This feature is enabled by supplying a <link rel="apple-touch-icon" ...> in the <head> section of documents served by the web site.
iOS Note: The Web Clip feature is available in iOS 1.1.3 and later. The apple-touch-icon-precomposed.png filename is available in iOS 2.0 and later. Support for multiple icons for different device resolutions is available in iOS 4.2 and later.
You may want users to be able to add your web application or webpage link to the Home screen. These links, represented by an icon, are called Web Clips. Follow these simple steps to specify an icon to represent your web application or webpage on iOS.
To specify an icon for the entire website (every page on the website), place an icon file in PNG format in the root document folder called apple-touch-icon.png or apple-touch-icon-precomposed.png. If you use apple-touch-icon-precomposed.png as the filename, Safari on iOS won't add any effects to the icon.
To specify an icon for a single webpage or replace the website icon with a webpage-specific icon, add a link element to the webpage, as in:
<link rel="apple-touch-icon" href="/custom_icon.png"/>
In the above example, replace custom_icon.png with your icon filename. If you don't want Safari on iOS to add any effects to the icon, replace apple-touch-icon with apple-touch-icon-precomposed.
To specify multiple icons for different device resolutions—for example, support both iPhone and iPad devices—add a sizes attribute to each link element as follows:
<link rel="apple-touch-icon" href="touch-icon-iphone.png" />
<link rel="apple-touch-icon" sizes="72x72" href="touch-icon-ipad.png" />
<link rel="apple-touch-icon" sizes="114x114" href="touch-icon-iphone4.png" />
The icon that is the most appropriate size for the device is used. If no sizes attribute is set, the element's size defaults to 57 x 57.
If there is no icon that matches the recommended size for the device, the smallest icon larger than the recommended size is used. If there are no icons larger than the recommended size, the largest icon is used. If multiple icons are suitable, the icon that has the precomposed keyword is used.
If no icons are specified using a link element, the website root directory is searched for icons with the apple-touch-icon... or apple-touch-icon-precomposed... prefix. For example, if the appropriate icon size for the device is 57 x 57, the system searches for filenames in the following order:
If you have a web application or a website, you can provide a custom icon that users can display on their Home screens using the web clip feature. Users tap the icon to reach your web content in one easy step. You can create an icon that represents your website as a whole or an icon that represents a single webpage.
If your web content is distinguished by a familiar image or recognizable color scheme, it makes sense to incorporate it in your icon. However, to ensure that your icon looks great on the device, you should also follow the guidelines in this section. (To learn how to add code to your web content to provide a custom icon, see Safari Web Content Guide.)
For iPhone and iPod touch, create icons that measure:
For iPad, create icons that measure:
As it does with application icons, iOS automatically adds some visual effects to your icon so that it coordinates with the built-in icons on the Home screen. Specifically, iOS adds:
Note: You can prevent the addition of all effects by naming your icon apple-touch-icon-precomposed.png (this is available in iOS 2 and later).
iTunesArtwork – Icon for iTunes AdHoc distribution (512×512)
Icon@2x.png – Home screen icon for iPhone 4 (114×114)
Icon-72.png – Home screen icon for iPad (72×72)
Icon-Small@2x.png – Settings/Spotlight icon for iPhone 4 (58×58)
Icon.png – Home screen icon for iPhone 3 (57×57)
Icon-Small-50.png – Spotlight icon for iPad (50×50)
Icon-Small.png - Settings/Spotlight icon for iPhone 3 (29×29)