CS 102 Lecture 22: Mobile Web CS102: Monsoon 2015 1 Updates - PowerPoint PPT Presentation

CS 102 Lecture 22: Mobile Web CS102: Monsoon 2015 1

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

Recap ICTD Lecture: comments? 3 CS102: Monsoon 2015 CS102: Monsoon 2015

Mobile web 4 CS102: Monsoon 2015

Browser rendering engines Rendering engines are the core of a browser: execute HTML, CSS, Javascript A browser = rendering engine + more Webviews can embed web pages in native apps CS102: Monsoon 2015 CS102: Monsoon 2015 5

Browser rendering engines Rendering 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 CS102: Monsoon 2015 CS102: Monsoon 2015 6

Proxy browsers e.g., Opera Mini A server fi rst 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) CS102: Monsoon 2015 CS102: Monsoon 2015 7

Pixels and viewports CSS Pixels (Logical - used in HTML/CSS) Device pixels (Physical) Usually device pixels scaled linearly into CSS pixels Can be di ff erent due to display resolution (e.g. retina display) or zoom factor CS102: Monsoon 2015 CS102: Monsoon 2015 8

Viewports Layout viewport Visual viewport Browser renders according to layout viewport Device displays what is in visual viewport CS102: Monsoon 2015 CS102: Monsoon 2015 9 The mobile web handbook

2 types of zoom Page zoom changes layout viewport Screen zoom changes only visual viewport CS102: Monsoon 2015 CS102: Monsoon 2015 10 The mobile web handbook

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 CS102: Monsoon 2015 11

Best practices Try to not use (large) absolute width blocks Do not depend on a particular viewport width; test at di ff erent widths (use a mobile/responsive web design testing plugin) Can fi nd layout viewport width/height in JS with document.documentElement.clientWidth CS102: Monsoon 2015 12

Media queries @media all and max:width: 400px { /* do something */ } Check: http://cs.ashoka.edu.in/cs102/mobile CS102: Monsoon 2015 13

Geolocation navigator.geolocation.getCurrentPosition gets current location (with permission of user) returns lat/long/accuracy high resolution can be requested timeouts can be speci fi ed Can also watch for changes in position with navigator.geolocation.watchLocation CS102: Monsoon 2015 14

Compatibility checking Use 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 CS102: Monsoon 2015 15