Download - Responsive web Design
Contents..
• What is RWD?
• Who and when it is invented?
• Where it is used?
• Why we need RWD?
• How to implement RWD?
RWD is..
A web development approach that creates dynamic changesto the appearance of a website, depending on the screen size and orientation of the device being used to view it.
• Technique of adapting a site’s layout to a device display was first written by Cameron Adams in 2004
• Ethan Marcotte coined the term RWD in May 2010 in an article ‘A List Apart’
• He described the theory and practice of responsive web design in his brief 2011 book titled ‘Responsive web design’
Why we need RWD?
• Growing Demand for smartphones
• Multiple screen sizes and mobile browsers
• Wide usage of mobile internet
• Compulsory for getting good business
• It is a HTML tag describes few aspects of web page
• We use viewport meta tag for making a web page mobile optimized<meta name=“HandheldFriendly” content=“true”/><meta name=“MobileOptimized” content=“320”/><meta name=“viewport” content=“width=device-width, intialscale=1”/>
• A responsive designed needs to add these meta tags to make a website mobile optimized
Meta tags
• Media queries enable us to create a responsive
experience, where specific styles are applied to small
screens, large screens and anywhere in between.
• The media query syntax allows for the creation of rules
that can be applied depending on device characteristics.
Ex:
<link rel="stylesheet" media="(max-width: 640px)"
href="max-640px.css">
@media (query)
{
/*CSS rules used when query matches*/
}
CSS3 media queries
Fluid Grid
• Creating percentage based designs which are known as fluid
designs
• Regardless of what the device or screen size is, components in
fluid designs are going to flow and adapt to the user
environment
• The advantage of fluid grid is that we can adjust the max-width
and it will still work on larger screens due to the percentage
based calculations.
Frame works
• Skeleton
• Foundation
• Bootstrap
Projects
• Bostonglobe.com
• Greygoose.com
• Barackobama.com
• Cleanairchallenge.com
• Foodsense.com
RWD Frameworks &Projects
Resources
1. http://johnpolacek.github.io/scrolldeck.js/decks/responsive/
2. http://alistapart.com/article/responsive-web-design/
3. http://css-tricks.com/snippets/html/responsive-meta-tag/
4. http://www.inmotionhosting.com/support/edu/website-design/create-responsive-template/viewpoint-meta-tag-website-responsive-template
5. http://www.1stwebdesigner.com/tutorials/fluid-grids-in-responsive-design/
6. http://www.responsivegridsystem.com/
More..