Sam Sam

11/11/2013 Responsive web design

Other articles by:Sam Sam

Responsive web design (RWD) is a technique which uses fluid layouts (which "stretch" to as much screen real estate as possible) in addition to the CSS "@media queries," which apply different style sheets (CSS) based on the current screen size of the device.

With responsive design, a website will fit virtually any device with a full browser: smartphones, iPad + other tablets (both landscape and portrait modes), and even TVs. The Responsive Design Style Guide describes a responsive, proportional, nestable, and mobile-first framework and associated components that are designed in a way that allows developers to quickly prototype (or build) what is needed to develop device-independent applications. The general guidelines below are intended to assist Web developers in preparing desktop and mobile-friendly content and applications.

Below is the list of components that will covered in this style guide
The Grid
- Grids should be responsive
- Grids should be flexible and nestable
- Grids should be proportional
Media Queries
- Flexible media will proportionally scale down when larger than the parent tag
- Use media queries that create breakpoints at: 240px, 320px, 480px, 600px, 769px, and 992px
Typography
- Below 12 pixels serifed typefaces will not render sharply enough; use sans serif
- Normalize perceived distance. Tablets are held at a great distance than smart phones. - When screens are smaller begin with a smaller line height and adjust character spacing, delicately
Navigation
Scaling down can render navigation unreadable or inaccessible. Main Navigation Switch enables users to access navigation by making changes to #main and aside sections and switching them to one column.
Forms
- On mobile devices, placing the label above the form field will ensure maximum width for the user input
- Use inline labels only when there are few fields to complete
- For more than a handful of fields (checkout process or signup) follow common field usability guidelines

Rated 4.25, 4 vote(s). 

Comments

ahmad

ahmad

Excellent one

11/12/2013 4:10:16 PM
Notify me when new comments are added to this post
Save comment