Responsive Web Design | Latest Design Trend | Things to create mobile web

1. Responsive Web Design : To create a responsive web design we need to kept few things in mind. I have mentioned those thing in my article below.
   
   i) Design Architecture : Found this informative Article on http://webdesignerwall.com/tutorials/setting-breakpoints-in-responsive-design where they point for creating media queries for different screen sizes. According to its article we need to write CSS on basis of 5 different screen sizes. These are 1000 larger then, 1000px,760px, 600px, 480px, and 320px.
   
   

   Screen Size	HTML Architecture
   Larger then 1000px	3-column with fixed side header
   1000px to 760px	2-column with top header
   Below 760px	single column layout

   
   It covers all types of machines used to browse the web. To full fill this approach we can use common pattern of design the web layout.
   
   
   ii) Meta Tag : Mobile browsers render pages in a virtual "window" (the viewport), usually wider than the screen, so they don't need to squeeze every page layout into a tiny window (which would break many non-mobile-optimized sites). Users can pan and zoom to see different areas of the page.

   <meta name="viewport" content="width=device-width, initial-scale=1.0

   
   
   iii) Media Query : Web layout can appear to be restricted, sometimes unreadable on small mobile devices, and at other times too large on large wide screen displays. This is where media queries come in. Using this we can create different CSS attribute for specific class for different resolution. So they are still readable in small screen too.
   
   Media query comprises of a media type and one or many expressions to limit the scope of style sheets. Inside the media library, you can establish media queries such as "width," "height," or "color." With the help of the media queries, you can customize presentations to a specific range of output devices without actually changing the content.
   Below is example of writing media query.
   
   

   <link rel="stylesheet" media="(max-device-width: 320px)" ref="mobile.css" /> <link rel="stylesheet" media="(min-width: 1600px)" href="widescreen.css" /

   
   
   
   iv) Relative Font Size : don't use font size in Pixels (px) as its is used for fixed. Instead of using pixels use em or %. Here is table of selecting font-size of EM equivalent to PX .
   

   Pixels	EMs	Percent	Points
   6px	0.375em	37.5%	5pt
   7px	0.438em	43.8%	5pt
   8px	0.500em	50.0%	6pt
   9px	0.563em	56.3%	7pt
   10px	0.625em	62.5%	8pt
   11px	0.688em	68.8%	8pt
   12px	0.750em	75.0%	9pt
   13px	0.813em	81.3%	10pt
   14px	0.875em	87.5%	11pt
   15px	0.938em	93.8%	11pt
   16px	1.000em	100.0%	12pt
   17px	1.063em	106.3%	13pt
   18px	1.125em	112.5%	14pt
   19px	1.188em	118.8%	14pt
   20px	1.250em	125.0%	15pt
   21px	1.313em	131.3%	16pt
   22px	1.375em	137.5%	17pt
   23px	1.438em	143.8%	17pt
   24px	1.500em	150.0%	18pt

   
   
   v) Relative Padding / Margin / Line-Height / Width : As like Font-size we also avoid using Pixels for Padding / Margin / Line-Height / Width etc.. Use % instead of pixels for proportional space and gaping.
   
   
   vi) Word-Break Property : Don't forget to use word-Break CSS property. Because in small devices we have small screen to as a view area and if we need to give any URL or TEXT have no space and bigger length then device screen it will break out your design. So using word-Break property is safe side.
   Its a part of CSS3 which is not supported by all browsers but its good to be in practice. Here is example to use
   
   

   .break-word { word-wrap: break-word; }

   
vii) Flexible images : You should practice setting the max-width 100%, which means that an image will never exceed the size of its containing element. You can also apply this rule to other forms of embedded media like videos.