Responsive Design in a Nutshell

One of our forthcoming tasks is to create an application that works on multiple platforms. Our aim is to create suitable design for our app so it can be operated smoothly on laptops, pc´s, smartphones and other touch screen devices. We also have to remember the basic laws of web design and UI design. 

What is Responsive Design?

Responsive design is a web design approach aimed at crafting sites to provide an optimal viewing experience from desktop computer monitors to mobile phones.

 

BBC hits the age of Responsive Design.
http://thenextweb.com/dd/2013/01/13/30-new-inspiring-responsive-design-websites/2/

Elements of responsive web design

A responsive web site uses CSS3 media queries, an extension on the @media rule, to adapt the layout to the viewing environment. Plus fluid proportion-based grids and flexible images.

• Media queries allow the page to use different CSS style rules based on the device.
• The fluid grid concept calls for page element sizing to be in relative unites like percentages or EMs, rather than absolute units like pixels or points.
• Flexible images are also sized in relative units (up to 100%).

Creating and updating multiple parallel web sites or apps is laborious and impractical. Responsive web design means that “website should have the technology to automatically respond to the user´s preferences”. In this case one good design is enough!

resources&inspiration: 
 
Responsive Web Design: What It is and How To Use It (Smashing Magazine)
url: http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/#more-75660

Design Guidelines and Tutorials
url: 
http://www.smashingmagazine.com/responsive-web-design-guidelines-tutorials/

Showcases of Responsive Web Design


http://artequalswork.com/
http://blog.teamtreehouse.com/
http://informationarchitects.net/

http://en.wikipedia.org/wiki/Responsive_web_design