Mobile Web Development

  1. Overview
    1. Websites designed for desktop browsers are difficult to use on mobile devices
    2. Mobile devices differ from desktop computers in many ways:
      1. Smaller screen size
      2. User interaction is with touch, not a mouse
      3. Mobile devices may have limited or slower Internet connectivity
      4. Many users have data plans that limit how much content can be downloaded
      5. Users might have a different purpose for accessing a website when using a mobile device vs. using a desktop
      6. Limited memory and CPU speed of mobile devices means mobile browsers are not as powerful as desktop browsers
      7. Mobile websites may take advantage of GPS and accelerometer data
    3. Three techniques for delivering web content to mobile devices:
      1. Separate websites: Two different websites are created, one for desktop and one for mobile. (Easy to implement, tough to maintain)
      2. Dynamic serving: The same URL is requested by both desktop and mobile web browsers, but the web server sends back a desktop version to desktop browsers and a mobile version to mobile browsers. (Many CMS support this)
      3. Responsive web design: The web server sends back the same HTML to both desktop and mobile browsers, but the browsers alter the appearance of the web page to match the device size. (Most popular approach)
    4. Design strategies for mobile, tablet, and desktop web pages:
      1. Graceful degradation - Design web page first and modify the design to fit smaller screens
      2. Progressive enhancement - "Mobile first" methodology that begins with designing the web page for the smallest device and then adapting for larger screen sizes (Preferred)
    5. Bootstrap is a popular front-end framework that defines numerous CSS classes for creating mobile-friendly designs
  2. Chrome dev tools
    1. Open with Ctrl-Shift-I in Chrome (Windows) or Command-Option-I (Mac)
    2. Change Responsive view to specific device
    3. Rotate to see landscape vs. portrait view
    4. Device pixel ratio (DPR) - Ratio between device pixels and logical (CSS) pixels
    5. Emulate network conditions: disk cache, network throttling, user agent
    6. Emulate sensors: geolocations, device orientation
  3. Viewport
    1. Viewport is the visible are of a web page
    2. By default, mobile browser shrinks page to fit mobile browser width. Requires user to zoom-in to read small text
    3. Viewport meta tag changes browser from using default 980 pixel-wide viewport to a viewport that matches the device's width
    4. Viewport meta tag is minimum required to create a mobile-friendly web page
    5. CSS viewport units vw and vh are used to set make an element scale to fit a percentage of the viewport's width or height
      div {
      	width: 20vw;   /* 20% of browser width */
      	height: 30vh;  /* 30% of browser height */