Responsive Web Design??

What is this responsive web design guys..why 2013 is named for responsive web design?? lets study about this.. 😉

Will update you very soon guys..keep following 🙂

What is RWD in simple words?? Clickhere

RWD:

Responsive web design (RWD) is a web design approach aimed at crafting sites to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from desktop computer monitors to mobile phones).
Mashable called 2013 the Year of Responsive Web Design.

Elements of responsive web design

A site designed with RWD uses CSS3 media queries, an extension of the @media rule, to adapt the layout to the viewing environment—along with fluid proportion-based grids and flexible images.
Media queries allow the page to use different CSS style rules based on characteristics of the device the site is being displayed on, most commonly the width of the browser.
The fluid grid concept calls for page element sizing to be in relative units like percentages or ems, rather than absolute units like pixels or points.
Flexible images are also sized in relative units (up to 100%), so as to prevent them from displaying outside their containing element.

I found a few examples for RWD. Lets browse the following sites to understand what is RWD basically..

http://www.designweekportland.com/

http://www.webdesignerdepot.com/

http://www.thesearethings.com/

http://www.humaan.com.au/

http://rallyinteractive.com/

http://earthhour.fr/

Tutorial Links:

http://webdesignerwall.com/tutorials/responsive-design-in-3-steps

http://www.1stwebdesigner.com/css/responsive-website-tutorial/

http://www.youtube.com/watch?v=Jdf_0AFR1hM

Will explain the process soon once i do practically 🙂

Responsive data tables: Clickhere

Convert Menu to a dropdown: Clickhere

CSS Media-Queries: Clickhere

Fluid-Images: Clickhere

Responsive_images_experimenting_with_context_aware_image_sizing: Clickhere

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s