What is Responsive Design?Responsive Web design is the approach that design and development shouldrespond to the user’s behavior and environment based on screen size, platformand orientation.The practice consists of a mix of flexible grids and layouts, images and anintelligent use of CSS media queries.The website should accommodate for:• Resolution• Image Size• Scripting AbilitiesIn short, a website should have the technology to respond to the user’spreferences.
Taking A Closer LookIn creating a Responsive Website, your goal is to accommodate the user’sviewing device, such as the iPhone. A Responsive Website can be achievedthrough these short features:• The site must be built with a flexible grid foundation.• Images that are incorporated into the design must be flexible themselves.• Different views must be enabled in different contexts via media queries.A responsive web design will usually use CSS media queries to style the pageaccording to specific rules, such as min-width. Google: responsive design http://www.abookapart.com/products/responsive-web-design http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/ http://fuelyourcoding.com/10-tools-frameworks-for-responsive-design/ http://digg.com/newsbar/topnews/70_essential_resources_for_creating_liquid_elastic_layouts
Flexibility• Good web design is a flexible grid.• A variety of browsers already demand flexible and fluid design.
Grid• Defining your own parameters for columns, spacing and containers isoften the best solution for a web design and can be just as flexible as anyexisting system out there.• Size and spacing are the two main components to focus on in creatingyour flexible grid system. mattkersley.com/responsive/
ImagesAnother feature of Responsive Web Design is images that move and scalewith your flexible grid.• To maintain fast loading times, use images of a manageable size. Usingthe width and height attributes to scale them for more text content onsmaller devices isn’t a good usability practice.• An alternative to scaling is cropping. The CSS overflow property (e.g.overflow: hidden) gives us the ability to crop images dynamically as thecontainers around them shift to fit new display environments.• The option is available to have multiple versions available of the sameimage and then serve up the appropriate sized version depending on theuser.• Finally, you have the option to hide images altogether. Media queriesthat serve up a stylesheet which sets the display: none property for imagestakes care of this function.Unstoppable Robot Ninja has a simple script that automatically resizes your images.Zomigi allows you to selectively hide parts of your image dynamically.
Media QueriesMedia queries allow designers to build multiple layouts using the same HTMLdocuments by selectively serving style sheets based on the user agent’s features,such as the browser window’s size.Other parameters Media Queries deal with: • Orientation • Screen Resolution • ColorMedia queries and responsive design allow us to think outside of the constraints ofa screen size or resolution and start building websites that flexibly adapts to allmediums.Adaptive Layouts with Media Queries:NET magazine offers some insightful info on the history of responsive or adaptive website designs and the introduction of the media query modulealong with tips on how to implement such features yourself.Working with Media QueriesNathan Staines has written a great guide to the basics of responsive web design with usable code samples.How to use CSS3 Orientation Media Queries1stWebDesigner has some fun with CSS3 media queries to show what kind of effects can be produced. See how the orientation media query inparticular can be used to change the color of an image based on the orientation of the device or browser.
Understanding Its ValueThere are obviously a lot of benefits towards getting behind Responsive Design asthe number of mobile users continues to rise. It’s important to note, however, thatbefore you go redesigning your website to first evaluate who the current users arethat are coming to your site and what they’re using to access it. ResponsiveDesign may not really be needed for some sites than others, and is best toaddress the topic on a case-by-case basis.