Going Mobile

Things learnt from taking whatznear.com into responsive one.

Transcript

1. GOING MOBILE
2. ABOUT Rubyist / JavaScripter Team Member / / Works at Blog at Twitter/Github - Google+: Yeoman @keralarb @keralajs @whatznear blog.revathskumar.com @revathskumar +RevathSKumar
5. MEDIA QUERIES
6. 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 ) { }
7. 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 ) { }
8. 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 ) { }
9. AVOID TABLES Difficult to make responsive
10. IN DESKTOP
11. < 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 >
12. 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 ; }
13. IN MOBILE http://jsbin.com/deziyo/2
14. 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 " >
15. TEXT
16. NUMBER
17. TEL
18. EMAIL
19. 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 % ; }
20. TOOLS
21. CHROME DEVTOOLS
22. MIH TOOL http://www.iunbug.com/mihtool
23. USE MINIMUM NO.OF INPUTS
24. PREFILL THE FORM IF POSSIBLE
25. ICON'S SIZE : ENSURE OPTIMAL LEGIBILITY
26. 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 >
27. THANK YOU.