SLIDE 1
MOOC on M4D 2013
BROWSING WITH MOBILES
Indian Institute of Technology Kanpur Commonwealth of Learning Vancouver
MOOC on M4D 2013
B ROWSING WITH M OBILES Indian Institute of Technology Kanpur - - PowerPoint PPT Presentation
B ROWSING WITH M OBILES Indian Institute of Technology Kanpur - - PowerPoint PPT Presentation
B ROWSING WITH M OBILES Indian Institute of Technology Kanpur Commonwealth of Learning Vancouver MOOC on M4D 2013 T.V. Prabhakar IIT Kanpur MOOC on M4D 2013 When the screen sizes change.. Browser HTTP HTTP Browser Let us see a few sites
SLIDE 2
SLIDE 3
When the screen sizes change..
Browser HTTP HTTP Browser
SLIDE 4
Let us see a few sites first
SLIDE 5
MOOC on M4D 2013
New York Times
- http://www.nytimes.com/
- Horizontal scroll bar if I resize the window
- mobile.nytimes.com
- app
SLIDE 6
MOOC on M4D 2013
SLIDE 7
SLIDE 8
SLIDE 9
MOOC on M4D 2013
gmail
- Gmail desktop version
– Changes the layout according to the size of the window, but not all the way
- Gmail mobile version
- Gmail app
SLIDE 10
SLIDE 11
SLIDE 12
MOOC on M4D 2013
SLIDE 13
MOOC on M4D 2013
SLIDE 14
SLIDE 15
MOOC on M4D 2013 App
SLIDE 16
MOOC on M4D 2013
Boston Globe
- http://www.bostonglobe.com/
- Continuous adjustment
- 3 columns become 2 and then 1
- Displays well on the mobile (all screen sizes)
- There is an app for the mobile
SLIDE 17
SLIDE 18
SLIDE 19
SLIDE 20
SLIDE 21
SLIDE 22
SLIDE 23
MOOC on M4D 2013
When the screen size changes
- Three ways to handle it
- 1. Same code – responsive
- 2. Detect user agent and send different code
- 3. App
SLIDE 24
MOOC on M4D 2013
Home work
- Play with the sites that you visit to see if they
are responsive or not
SLIDE 25
MOOC on M4D 2013