CS102: Monsoon 2015

CS 102 Lecture 22: Mobile Web

1

CS102: Monsoon 2015

UpdatesStats quiz next Monday,

Final quiz next Wednesday (covers all the syllabus)

Final reading assignment posted: Choose between Aardvark and Skinput papers (Due next Wednesday Dec. 9)

Guest lecture by Ashish Goel (Zomato) on Thu (Dec. 10, 6pm)

Final expo Dec. 18 Friday morning 9.30-12.30am

2 CS102: Monsoon 2015

CS102: Monsoon 2015

RecapICTD Lecture: comments?

3 CS102: Monsoon 2015

CS102: Monsoon 2015

Mobile web

4

CS102: Monsoon 2015

Browser rendering enginesRendering engines are the core of a browser: execute HTML, CSS, Javascript

A browser = rendering engine + more

Webviews can embed web pages in native apps

5 CS102: Monsoon 2015

CS102: Monsoon 2015

Browser rendering enginesRendering engines

Webkit (Safari, Android, etc)

Blink, a fork of Webkit (Chrome, Silk, etc)

Gecko (Mozilla)

Trident (Microsoft/IE)

All native iOS browsers use the Safari/Webkit rendering engine

6 CS102: Monsoon 2015

CS102: Monsoon 2015

Proxy browserse.g., Opera Mini

A server first receives the page on a user’s behalf

The page is transcoded or even rendered before passing onto the mobile client in a compressed fashion

Can be much faster and saves data bytes (but less secure, and requires server infrastructure)

7 CS102: Monsoon 2015

CS102: Monsoon 2015

Pixels and viewportsCSS Pixels (Logical - used in HTML/CSS)

Device pixels (Physical)

Usually device pixels scaled linearly into CSS pixels

Can be different due to display resolution (e.g. retina display) or zoom factor

8 CS102: Monsoon 2015

CS102: Monsoon 2015

Viewports

9 CS102: Monsoon 2015The mobile web handbook

Layout viewport Visual viewport

Browser renders according to layout viewport Device displays what is in visual viewport

CS102: Monsoon 2015

2 types of zoom

10 CS102: Monsoon 2015The mobile web handbook

Page zoom changes layout viewport

Screen zoom changes only visual viewport

CS102: Monsoon 2015

Sizing content for mobile“Ideal viewport” is the best viewport dimension for the given device (usually ~ 300px width (CSS) or lines of 25-30 characters on mobile screens)

Use this directive for ideal viewport:

<meta name="viewport" content=“width=device-width”>

Without the ideal viewport directive, mobile devices may use a viewport size of ~980px

Check: http://cs.ashoka.edu.in/cs102/mobile

11

CS102: Monsoon 2015

Best practicesTry to not use (large) absolute width blocks

Do not depend on a particular viewport width; test at different widths (use a mobile/responsive web design testing plugin)

Can find layout viewport width/height in JS with document.documentElement.clientWidth

12

CS102: Monsoon 2015

Media queries@media all and max:width: 400px {

/* do something */

}

Check: http://cs.ashoka.edu.in/cs102/mobile

13

CS102: Monsoon 2015

Geolocationnavigator.geolocation.getCurrentPosition

gets current location (with permission of user)

returns lat/long/accuracy

high resolution can be requested

timeouts can be specified

Can also watch for changes in position with navigator.geolocation.watchLocation

14

CS102: Monsoon 2015

Compatibility checkingUse Modernizr library in Javascript

<script src="path/to/modernizr.js"></script>

if ( Modernizr.websockets ) {

/* code that depends on web sockets */

}

Or use device databases like WURFL

15