Going Mobile

Going Mobile

Things learnt from taking whatznear.com into responsive one.

Fb7edc7cc7a53c903af74d07dcecf9dc?s=128

Revath S Kumar

July 26, 2014
Tweet

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
  3. None
  4. None
  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.