Slide 1

Slide 1 text

GOING MOBILE

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

MEDIA QUERIES

Slide 6

Slide 6 text

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 ) { }

Slide 7

Slide 7 text

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 ) { }

Slide 8

Slide 8 text

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 ) { }

Slide 9

Slide 9 text

AVOID TABLES Difficult to make responsive

Slide 10

Slide 10 text

IN DESKTOP

Slide 11

Slide 11 text

< 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 >

Slide 12

Slide 12 text

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 ; }

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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 " >

Slide 15

Slide 15 text

TEXT

Slide 16

Slide 16 text

NUMBER

Slide 17

Slide 17 text

TEL

Slide 18

Slide 18 text

EMAIL

Slide 19

Slide 19 text

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 % ; }

Slide 20

Slide 20 text

TOOLS

Slide 21

Slide 21 text

CHROME DEVTOOLS

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

USE MINIMUM NO.OF INPUTS

Slide 24

Slide 24 text

PREFILL THE FORM IF POSSIBLE

Slide 25

Slide 25 text

ICON'S SIZE : ENSURE OPTIMAL LEGIBILITY

Slide 26

Slide 26 text

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 >

Slide 27

Slide 27 text

THANK YOU.