GOING MOBILE 

ABOUT Rubyist / JavaScripter Team Member / / Works at Blog at Twitter/Github - Google+: Yeoman @keralarb @keralajs @whatznear blog.revathskumar.com @revathskumar +RevathSKumar 

No content

No content

MEDIA QUERIES 

PHONES @ m e d i a o n l y s c r e e n a n d ( m a x - w i d t h : 7 6 7 p x ) { } 

TABLETS @ m e d i a o n l y s c r e e n a n d ( m i n - w i d t h : 7 6 8 p x ) a n d ( m a x - w i d t h : 9 7 9 p x ) { } 

LARGE DESKTOPS @ m e d i a o n l y s c r e e n a n d ( m i n - w i d t h : 1 2 0 0 p x ) { } 

AVOID TABLES Difficult to make responsive 

IN DESKTOP 

< t h e a d > < t r > < t d > I D < / t d > < t d > N a m e < / t d > < t d > S c h o o l < / t d > < / t r > < / t h e a d > < t b o d y > < t r > < t d d a t a - t i t l e = " I D " > 1 < / t d > < t d d a t a - t i t l e = " N a m e " > A < / t d > < t d d a t a - t i t l e = " S c h o o l " > S 1 < / t d > < / t r > < t r > < t d d a t a - t i t l e = " I D " > 2 < / t d > < t d d a t a - t i t l e = " N a m e " > B < / t d > < t d d a t a - t i t l e = " S c h o o l " > s 2 < / t d > < / t r > < / t b o d y > 

t a b l e { w i d t h : 1 0 0 % ; } t h e a d { d i s p l a y : n o n e ; } t d { b o r d e r : n o n e ! i m p o r t a n t ; p a d d i n g - l e f t : 2 0 % ! i m p o r t a n t ; d i s p l a y : b l o c k ; } t d : b e f o r e { c o n t e n t : a t t r ( d a t a - t i t l e ) ; p o s i t i o n : a b s o l u t e ; l e f t : 6 p x ; f o n t - w e i g h t : b o l d ; } 

IN MOBILE http://jsbin.com/deziyo/2 

INPUT TYPES < i n p u t t y p e = " n u m b e r " > < i n p u t t y p e = " t e l " > < i n p u t t y p e = " e m a i l " > 

TEXT 

NUMBER 

TEL 

EMAIL 

DISPLAY : BLOCK . m o s t - e l e m e n t { d i s p l a y : b l o c k ; w i d t h : 1 0 0 % ; } 

TOOLS 

CHROME DEVTOOLS 

MIH TOOL http://www.iunbug.com/mihtool 

USE MINIMUM NO.OF INPUTS 

PREFILL THE FORM IF POSSIBLE 

ICON'S SIZE : ENSURE OPTIMAL LEGIBILITY 

LINK TO : EMAILS & TELEPHONE < a h r e f = " m a i l t o : s u p p o r t @ d o m a i n . c o m " > s u p p o r t @ d o m a i n . c o m < / a > < a h r e f = " t e l : 9 9 9 5 4 3 6 8 6 7 " > 9 9 9 5 4 3 6 8 6 7 < / a > 

THANK YOU.