This is a copy of the original post at Smashing Magazine<\/a>\u00a0I copied it here to keep the great content alive in case they deleted it but all credit goes to Kayla Knight<\/a>.<\/p><\/blockquote>\n In the field of design and development, we\u2019re quickly getting to the point of being unable to keep up with the endless new resolutions and devices. For many apps, creating a version for each resolution and new device would be impossible, or at least impractical. Should we just suffer the consequences of losing visitors from one device, for the benefit of gaining visitors from another? Or is there another option?<\/p>\n Responsive design<\/strong> is the approach that suggests that design and development should respond to the user\u2019s behavior and environment based on screen size, platform and orientation. The practice consists of a mix of flexible grids and layouts, images and an intelligent use of CSS media queries. As the user switches from their laptop to iPad, the app\u00a0should automatically switch to accommodate for resolution, image size and scripting abilities. In other words, the website should have the technology to automatically respond<\/em> to the user\u2019s preferences. This would eliminate the need for a different design and development phase for each new gadget on the market.<\/p>\n Ethan Marcotte<\/a> wrote an introductory article about the approach, \u201cResponsive Web Design<\/a>,\u201d for A List Apart. It stems from the notion of responsive architectural design, whereby a room or space automatically adjusts to the number and flow of people within it:<\/p>\n \u201cRecently, an emergent discipline called \u201cresponsive architecture\u201d has begun asking how physical spaces can respond to the presence of people passing through them. Through a combination of embedded robotics and tensile materials, architects are experimenting with art installations and wall structures that bend, flex, and expand as crowds approach them. Motion sensors can be paired with climate control systems to adjust a room\u2019s temperature and ambient lighting as it fills with people. Companies have already produced \u201csmart glass technology\u201d that can automatically become opaque when a room\u2019s occupants reach a certain density threshold, giving them an additional layer of privacy.\u201d<\/p><\/blockquote>\n Transplant this discipline onto design, and we have a similar yet whole new idea. Why should we create a custom design for each group of users; after all, architects don\u2019t design a building for each group size and type that passes through it? Like responsive architecture, Web design should automatically adjust. It shouldn\u2019t require countless custom-made solutions for each new category of users.<\/p>\n Obviously, we can\u2019t use motion sensors and robotics to accomplish this the way a building would. Responsive design requires a more abstract way of thinking. However, some ideas are already being practiced: fluid layouts, media queries and scripts that can reformat Web pages and mark-up effortlessly (or automatically<\/em>).<\/p>\n But responsive design is not only about adjustable screen resolutions and automatically resizable images<\/strong>, but rather about a whole new way of thinking about design. Let\u2019s talk about all of these features, plus additional ideas in the making.<\/p>\n With more devices come varying screen resolutions, definitions and orientations. New devices with new screen sizes are being developed every day, and each of these devices may be able to handle variations in size, functionality and even color. Some are in landscape, others in portrait, still others even completely square. As we know from the rising popularity of the iPhone, iPad and advanced smartphones, many new devices are able to switch from portrait to landscape at the user\u2019s whim. How is one to design for these situations?<\/p>\n In addition to designing for both landscape and portrait (and enabling those orientations to possibly switch in an instant upon page load), we must consider the hundreds of different screen sizes. Yes, it is possible to group them into major categories, design for each of them, and make each design as flexible as necessary. But that can be overwhelming, and who knows what the usage figures will be in five years? Besides, many users do not maximize their browsers<\/a>, which itself leaves far too much room for variety among screen sizes.<\/p>\n Morten Hjerde and a few of his colleagues identified statistics on about 400 devices<\/a> sold between 2005 and 2008. Below are some of the most common:<\/p>\n Since then even more devices have come out<\/a>. It\u2019s obvious that we can\u2019t keep creating custom solutions for each one. So, how do we deal with the situation?<\/p>\n A few years ago, when flexible layouts were almost a \u201cluxury\u201d for websites, the only things that were flexible in a design were the layout columns (structural elements) and the text. Images could easily break layouts, and even flexible structural elements broke a layout\u2019s form when pushed enough. Flexible designs weren\u2019t really that flexible; they could give or take a few hundred pixels, but they often couldn\u2019t adjust from a large computer screen to a netbook.<\/p>\n Now we can make things more flexible. Images can be automatically adjusted, and we have workarounds so that layouts never break (although they may become squished and illegible in the process). While it\u2019s not a complete fix, the solution gives us far more options. It\u2019s perfect for devices that switch from portrait orientation to landscape in an instant or for when users switch from a large computer screen to an iPad.<\/p>\n In Ethan Marcotte\u2019s article, he created a sample design that features this better flexible layout:<\/p>\n The entire design is a lovely mix of fluid grids<\/a>, fluid images<\/a> and smart mark-up where needed. Creating fluid grids is fairly common practice, and there are a number of techniques for creating fluid images:<\/p>\n For more information on creating fluid app, be sure to look at the book \u201cFlexible Web Design: Creating Liquid and Elastic Layouts with CSS\u201d by Zoe Mickley Gillenwater, and download the sample chapter \u201cCreating Flexible Images<\/a>.\u201d In addition, Zoe provides the following extensive list of tutorials, resources, inspiration and best practices on creating flexible grids and layouts: \u201cEssential Resources for Creating Liquid and Elastic Layouts<\/a>.\u201d<\/p>\n While from a technical perspective this is all easily possible, it\u2019s not just about plugging these features in and being done. Look at the logo in this design, for example:<\/p>\n If resized too small, the image would appear to be of low quality, but keeping the name of the app\u00a0visible and not cropping it off was important. So, the image is divided into two: one (of the illustration) set as a background, to be cropped and to maintain its size, and the other (of the name) resized proportionally.<\/p>\n Above, the This is just one example of the kind of thinking that makes responsive App\u00a0design truly effective. But even with smart fixes like this, a layout can become too narrow or short to look right. In the logo example above (although it works), the ideal situation would be to not crop half of the illustration or to keep the logo from being so small that it becomes illegible and \u201cfloats\u201d up.<\/p>\n One major problem that needs to be solved with responsive App\u00a0design is working with images. There are a number of techniques to resize images proportionately, and many are easily done. The most popular option, noted in Ethan Marcotte\u2019s article on fluid images<\/a> but first experimented with byRichard Rutter<\/a>, is to use CSS\u2019s As long as no other width-based image styles override this rule, every image will load in its original size, unless the viewing area becomes narrower than the image\u2019s original width. The maximum width<\/strong> of the image is set to 100% of the screen or browser width, so when that 100% becomes narrower, so does the image. Essentially, as Jason Grigsbynoted<\/a>, \u201cThe idea behind fluid images is that you deliver images at the maximum size they will be used at. You don\u2019t declare the height and width in your code, but instead let the browser resize the images as needed while using CSS to guide their relative size\u201d. It\u2019s a great and simple technique to resize images beautifully.<\/p>\n Note that While the above is a great quick fix and good start to responsive images, image resolution and download times should be the primary considerations. While resizing an image for mobile devices can be very simple, if the original image size is meant for large devices, it could significantly slow download times and take up space unnecessarily.<\/p>\n This technique, presented by the Filament Group, takes this issue into consideration and not only resizes images proportionately, but shrinks image resolution on smaller devices, so very large images don\u2019t waste space unnecessarily on small screens. Check out the demo page here.<\/a><\/p>\n This technique requires a few files, all of which are available on Github<\/a>. First, a JavaScript file (rwd-images.js<\/em>), the .htaccess<\/em> file and an image file (rwd.gif<\/em>). Then, we can use just a bit of HTML to reference both the larger and smaller resolution images: first, the small image, with an .r<\/em> prefix to clarify that it should be responsive, and then a reference to the bigger image using The The JavaScript file inserts a base element that allows the page to separate responsive images from others and redirects them as necessary. When the page loads, all files are rewritten to their original forms, and only the large or small images are loaded as necessary. With other techniques, all higher-resolution images would have had to be downloaded, even if the larger versions would never be used. Particularly for apps\u00a0with a lot of images, this technique can be a great saver of bandwidth and loading time.<\/p>\n This technique is fully supported in modern browsers, such as IE8+, Safari, Chrome and Opera, as well as mobile devices that use these same browsers<\/strong> (iPad, iPhone, etc.). Older browsers and Firefox degrade nicely and still resize as one would expect of a responsive image, except that both resolutions are downloaded together, so the end benefit of saving space with this technique is void.<\/p>\n One nice thing about the iPhone and iPod Touch is that app\u00a0designs automatically rescale to fit the tiny screen. A full-sized design, unless specified otherwise, would just shrink proportionally for the tiny browser, with no need for scrolling or a mobile version. Then, the user could easily zoom in and out as necessary.<\/p>\n There was, however, one issue this simulator created. When responsive design took off, many noticed that images were still changing proportionally with the page even if they were specifically made for (or could otherwise fit) the tiny screen. This in turn scaled down text and other elements.<\/p>\n Because this works only with Apple\u2019s simulator, we can use an Apple-specific meta tag to fix the problem, placing it below<\/em> the website\u2019s Setting the For extreme size changes, we may want to change the layout altogether, either through a separate style sheet or, more efficiently, through a CSS media query. This does not have to be troublesome; most of the styles can remain the same, while specific style sheets can inherit these styles and move elements around with floats, widths, heights and so on.<\/p>\n For example, we could have one main style sheet (which would also be the default) that would define all of the main structural elements, such as If a style sheet made the layout too narrow, short, wide or tall, we could then detect that and switch to a new style sheet. This new child style sheet would adopt everything from the default style sheet and then just redefine the layout\u2019s structure.<\/p>\n Here is the style.css<\/em> (default) content:<\/strong><\/p>\n Here is the mobile.css<\/em> (child)<\/strong> content:<\/p>\nThe Concept Of Responsive Design<\/h3>\n
Adjusting Screen Resolution<\/h3>\n
![\"Portrait](\"http:\/\/media.mediatemple.netdna-cdn.com\/wp-content\/uploads\/2010\/11\/portrait-landscape.jpg\" "\\"Portrait")
<\/p>\n![\"Sizes\"](\"http:\/\/media.mediatemple.netdna-cdn.com\/wp-content\/uploads\/2010\/11\/sizes.jpg\" "\\"Sizes\\"")
<\/a><\/p>\nPART OF THE SOLUTION: FLEXIBLE EVERYTHING<\/h4>\n
![\"More](\"http:\/\/media.mediatemple.netdna-cdn.com\/wp-content\/uploads\/2010\/11\/moreflexible.jpg\" "\\"More")
<\/a><\/p>\n\n
![\"Cropping](\"http:\/\/media.mediatemple.netdna-cdn.com\/wp-content\/uploads\/2010\/11\/croppinglogo.jpg\" "\\"Cropping")
<\/a><\/p>\n<<\/span>h1<\/span> id<\/span>=<\/span>\"<\/span>logo\"<\/span><\/span>><\/span><\/span><<\/span>a<\/span> href<\/span>=<\/span>\"<\/span>#\"<\/span><\/span>><\/span><\/span><<\/span>img<\/span> src<\/span>=<\/span>\"<\/span>site\/logo.png\"<\/span><\/span> alt<\/span>=<\/span>\"<\/span>The Baker Street Inquirer\"<\/span><\/span> \/><\/span><\/span><\/<\/span>a<\/span>><\/span><\/span><\/<\/span>h1<\/span>><\/span><\/span><\/code><\/pre>\nh1<\/code> element holds the illustration as a background, and the image is aligned according to the container\u2019s background (the heading).<\/p>\nFlexible Images<\/h3>\n
max-width<\/code> for an easy fix.<\/p>\nimg <\/span>{<\/span> max-width<\/span>:<\/span> 100%;<\/span> }<\/span><\/code><\/pre>\nmax-width<\/code> is not supported in IE<\/strong>, but a good use of width: 100%<\/code>would solve the problem neatly in an IE-specific style sheet. One more issue is that when an image is resized too small in some older browsers in Windows, the rendering isn\u2019t as clear as it ought to be. There is a JavaScript to fix this issue, though, found in Ethan Marcotte\u2019s article<\/a>.<\/p>\nFILAMENT GROUP\u2019S RESPONSIVE IMAGES<\/h4>\n
![\"Filament](\"http:\/\/media.mediatemple.netdna-cdn.com\/wp-content\/uploads\/2011\/01\/filamentgroup.jpg\" "\\"Filament")
<\/a><\/p>\ndata-fullsrc<\/code>.<\/p>\n<<\/span>img<\/span> src<\/span>=<\/span>\"<\/span>smallRes.jpg\"<\/span><\/span> data-fullsrc<\/span>=<\/span>\"<\/span>largeRes.jpg\"<\/span><\/span>><\/span><\/span><\/code><\/pre>\ndata-fullsrc<\/code> is a custom HTML5 attribute, defined in the files linked to above. For any screen that is wider than 480 pixels, the larger-resolution image (largeRes.jpg<\/em>) will load; smaller screens wouldn\u2019t need to load the bigger image, and so the smaller image (smallRes.jpg<\/em>) will load.<\/p>\nSTOP IPHONE SIMULATOR IMAGE RESIZING<\/h4>\n
![\"iPhone](\"http:\/\/media.mediatemple.netdna-cdn.com\/wp-content\/uploads\/2011\/01\/iphonescale.jpg\" "\\"iPhone")
<\/a>
\n(Image: Think Vitamin<\/a> | Website referenced: 8 Faces<\/a>)<\/em><\/p>\n<head><\/code>section. Thanks to Think Vitamin\u2019s article on image resizing<\/a>, we have the meta tag below:<\/p>\n<<\/span>meta<\/span> name<\/span>=<\/span>\"<\/span>viewport\"<\/span><\/span> content<\/span>=<\/span>\"<\/span>width=<\/span>device-width; initial-scale=<\/span>1.0\"<\/span><\/span>><\/span><\/span><\/code><\/pre>\ninitial-scale<\/code> to 1<\/code> overrides the default to resize images proportionally, while leaving them as is if their width is the same as the device\u2019s width (in either portrait or lanscape mode). Apple\u2019s documentation has a lot more information on the viewport meta tag<\/a>.<\/p>\nCustom Layout Structure<\/h3>\n
#wrapper<\/code>, #content<\/code>, #sidebar<\/code>, #nav<\/code>, along with colors, backgrounds and typography. Default flexible widths and floats could also be defined.<\/p>\n\/* Default styles that will carry to the child style sheet *\/<\/span>\r\n\r\nhtml,body<\/span>{<\/span>\r\n background...\r\n font...\r\n color...\r\n}<\/span>\r\n\r\nh1,h2,h3<\/span>{<\/span>}<\/span>\r\np, blockquote, pre, code, ol, ul<\/span>{<\/span>}<\/span>\r\n\r\n\/* Structural elements *\/<\/span>\r\n#wrapper<\/span>{<\/span>\r\n width<\/span>:<\/span> 80%;<\/span>\r\n margin<\/span>:<\/span> 0 auto;<\/span>\r\n\r\n background<\/span>:<\/span> #fff;<\/span>\r\n padding<\/span>:<\/span> 20px;<\/span>\r\n}<\/span>\r\n\r\n#content<\/span>{<\/span>\r\n width<\/span>:<\/span> 54%;<\/span>\r\n float<\/span>:<\/span> left;<\/span>\r\n margin-right<\/span>:<\/span> 3%;<\/span>\r\n}<\/span>\r\n\r\n#sidebar-left<\/span>{<\/span>\r\n width<\/span>:<\/span> 20%;<\/span>\r\n float<\/span>:<\/span> left;<\/span>\r\n margin-right<\/span>:<\/span> 3%;<\/span>\r\n}<\/span>\r\n\r\n#sidebar-right<\/span>{<\/span>\r\n width<\/span>:<\/span> 20%;<\/span>\r\n float<\/span>:<\/span> left;<\/span>\r\n}<\/span><\/code><\/pre>\n#wrapper<\/span>{<\/span>\r\n width<\/span>:<\/span> 90%;<\/span>\r\n}<\/span>\r\n\r\n#content<\/span>{<\/span>\r\n width<\/span>:<\/span> 100%;<\/span>\r\n}<\/span>\r\n\r\n#sidebar-left<\/span>{<\/span>\r\n width<\/span>:<\/span> 100%;<\/span>\r\n clear<\/span>