D276 Chapter 6 — Mobile Web Development

67 cards for WGU D276 zyBooks Chapter 6 (Mobile Web Development): every key term from 6.1-6.5 plus concept, vs, scenario and code-reading cards. Each back cites its section (6.x).

mobile web browser

A web browser designed for mobile devices that can display webpages using HTML, CSS, and JavaScript. | The iPhone's introduction in 2007 began the smartphone era and led to mobile browsers that render the same webpages designed for desktop browsers. Mobile browsers often lack the ability to use plugins developed for desktop browsers. (6.1)

mobile website

A website that is designed for mobile devices with smaller screen sizes and touch interfaces. Mobile and desktop websites are created with the same technologies: HTML, CSS, and JavaScript. (6.1)

separate websites (mobile technique)

Two different websites are created, one for desktop and one for mobile, each using its own set of URLs. Ex: http://example.com/ vs. http://example.com/mobile | Straightforward and easy to implement. (6.1)

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. The server decides by examining the request's User-Agent string. (6.1)

responsive web design (RWD)

A collection of techniques to create webpages that adapt to the browser's size. The web server sends back the same HTML to both desktop and mobile browsers, but the browsers alter the appearance of the webpage to match the device size. (6.1)

adaptive website

A website that adapts to the width of the browser at specific widths. Ex: a container is 400 pixels wide when the browser is wider than 500 pixels, but shrinks to 200 pixels when the browser is less than 500 pixels wide. | A responsive website instead smoothly adjusts the container's width to fit the browser width. Even seasoned designers debate the difference. (6.1)

User-Agent string (user agent string)

The part of an HTTP request that indicates which browser made the request. In dynamic serving, the web server examines it to decide which page to return: | User-Agent: Chrome/47.1 → a desktop Chrome browser → desktop page | User-Agent: Mozilla/5.0 (iPhone) → an iPhone browser → mobile page (6.1)

screen emulator

Software that simulates how mobile device screens operate. Chrome DevTools' screen emulator can mimic a wide range of smartphones and tablets: open DevTools with Ctrl-Shift-I (Windows) or Command-Option-I (Mac), then click the "toggle device" button in the toolbar. (6.2)

device pixel ratio (DPR)

The ratio between device pixels and logical pixels. Ex: a DPR of 2 means 1 logical pixel is 2 device pixels wide and 2 device pixels tall, 4 device pixels altogether. | DPR values of 2 and above are common on high-end mobile devices, where the viewer is close to the screen; most desktop monitors have a DPR of 1 because the viewer is farther away. (6.2)

logical pixel

Also called a device-independent pixel (DIP). The CSS "px" unit is a logical pixel unit. Ex: <div style="width:20px"> makes the div 20 logical pixels wide (which is 40 device pixels wide on a 2 DPR screen). (6.2)

device-independent pixel (DIP)

Another name for a logical pixel. The CSS px unit measures logical pixels; the device pixel ratio says how many device pixels each one covers. (6.2)

device pixel

The pixels the device's screen actually draws with. The DPR gives how many device pixels make up one logical pixel in each direction: 1 logical pixel = 1 device pixel at 1 DPR, 2 × 2 = 4 at 2 DPR, 3 × 3 = 9 at 3 DPR. | Ex: a 2px × 2px box (4 logical pixels) is 4, 16, or 36 device pixels at 1, 2, or 3 DPR. (6.2)

Caching (Network conditions tab)

A Chrome DevTools Network conditions setting: disabling the cache forces the browser to download all webpage resources every time. (Press Esc in DevTools to show the Network conditions tab.) (6.2)

Network (Network conditions tab)

A Chrome DevTools Network conditions setting that simulates slower networks like 3G, or simulates being offline. (6.2)

User agent (Network conditions tab)

A Chrome DevTools Network conditions setting that changes the user agent string to any number of browser user agents. Ex: uncheck "Use browser default" and choose Safari — iPhone iOS 13.2. (6.2)

viewport

A browser's visible area of a webpage, not including the address bar, bookmark bar, tabs, etc. | Before smartphones, many webpages were designed for browsers nearly 1,000 pixels wide, so mobile browsers pretended the viewport was 980 pixels wide; users then had to zoom in to read the text. (6.3)

viewport meta element

Specifies viewport properties that affect what the browser's viewport displays. The properties go in its content attribute, separated by commas. Standard form: <meta name="viewport" content="width=device-width, initial-scale=1"> | Without it, a mobile browser uses a 980px default viewport and shrinks the page to fit. (6.3)

viewport unit (vw and vh)

A percentage of the browser viewport's width or height: 1vw = 1% of viewport width, 1vh = 1% of viewport height. Ex: width: 80vw = 80% of the viewport width, so the element widens as the viewport widens. (6.3)

vmin

The minimum viewport unit: 1vmin = 1vw or 1vh, whichever is smaller. Ex: width: 50vmin is 50% of the viewport width when width < height, and 50% of the viewport height when width > height. (6.3)

vmax

The maximum viewport unit: 1vmax = 1vw or 1vh, whichever is larger. Ex: in a 400px-wide, 800px-tall viewport, 1vmax = 1vh = 8px. (6.3)

width (viewport property)

The viewport width, which is typically set to device-width, the device's screen width. Ex: content="width=device-width, initial-scale=1" (6.3)

initial-scale (viewport property)

The initial zoom level, which is typically set to 1 so the webpage is initially zoomed in at 100%. (6.3)

user-scalable (viewport property)

A boolean value that, when set to no, prevents the user from zooming in and out. (6.3)

graceful degradation

Design the desktop website first and modify the design to fit smaller screens. (6.4)

progressive enhancement

A "mobile first" design methodology that begins with designing the website for the smallest device and then adapts the design for larger screens. | Good practice: use progressive enhancement to build websites that show equivalent text and images and provide the same functionality on all platforms. (6.4)

media query

A combination of a media type and optionally one or more media feature expressions that evaluate to true or false. Webpages using responsive web design adapt to different viewport sizes using media queries. Ex: @media screen and (max-width: 800px) { … } (6.4)

media type

A device category that a media query applies to: | all = all devices (the default if no media type is listed) | print = printers, and documents viewed on screen in print preview mode | screen = intended for screens (6.4)

media feature

A characteristic of a browser, device, or environment. Ex: | aspect-ratio = viewport's width-to-height aspect ratio | height / width = viewport's height / width | orientation = portrait or landscape | resolution = device's pixel density (6.4)

media attribute

Specifies a media query in a <link> element. When the media query matches (evaluates to true), the link's stylesheet is downloaded. Ex: <link rel="stylesheet" media="print and (min-width: 400px)" href="styles.css"> (6.4)

@media

The at-rule that specifies a media query in a stylesheet. When the media query matches, the @media's inner rules are defined. Ex: @media screen and (max-width: 800px) { .proposal { width: 350px; } } (6.4)

at-rule

A CSS statement that starts with the @ character and instructs the CSS engine how to behave. Ex: @media (6.4)

breakpoint

The screen width that activates a media query. Ex: in @media screen and (max-width: 800px), 800 is the breakpoint. | Good practice: use breakpoints that target the content rather than a specific device (hide a div when the width is larger than 700px, not when the page is viewed on an iPhone X). (6.4)

min- and max- prefixes (media features)

Some media features may be prefixed with min- or max- to express ≥ or ≤ constraints. | min-width:200px means width ≥ 200px | max-width: 800px means width ≤ 800px (6.4)

responsive image

An image that scales to fit different layouts in a responsive website. Issues to consider: | Scale to various sizes without looking pixelated or blocky | Use higher-resolution images for devices with higher DPRs | Use images with the minimum DPR a device supports, to avoid sending larger files that waste network bandwidth (6.5)

Scalable Vector Graphics (SVG) image

A vector image that is defined with XML. SVG images are ideal for responsive images. An SVG may be stored in a .svg file and displayed with an <img> tag, or its parts may be defined in the HTML document with an <svg> element. (6.5)

vector image

An image defined with lines, curves, and points that scale nicely at any resolution and always appear crisp. Ex: SVG images. (6.5)

<svg> element

Defines an SVG image's parts directly in the HTML document, instead of an <img> that loads a .svg file. Ex: <svg viewBox="15 15 70 70" style="width:10vw"> <circle cx="50" cy="50" r="30" stroke="orange" stroke-width="4" fill="lightblue" /> … </svg> (6.5)

srcset attribute

The <img> attribute that specifies which image should be displayed for specific DPR values. Ex: <img src="dog-small.jpg" srcset="dog-medium.jpg 2x, dog-large.jpg 3x" alt="Dog"> → 1 DPR requests dog-small.jpg (the src), 2 DPR dog-medium.jpg, 3 DPR dog-large.jpg | Used with sizes, it lists each image's actual width instead: fish.jpg 300w = fish.jpg is 300 pixels wide. (6.5)

sizes attribute

The image attribute that specifies one or more pairs of media conditions and relative image sizes. Ex: (min-width: 400px) 30vw = when the viewport is at least 400px wide, the image is 30% of the viewport width. | The media condition must be omitted for the last (default) image size. The browser uses sizes and srcset to calculate the needed image size for its DPR and downloads the best image. (6.5)

art direction

The process of swapping out images with different proportions for different screen sizes. Ex: a wider image may be appropriate for a mobile device in landscape mode, but a skinnier image for portrait mode. The <picture> element is especially useful for art direction. (6.5)

<picture> element

Contains one or more <source> elements that specify a media condition and image. An <img> element must also be specified: the image to download and display if none of the <source> images are selected. Most modern browsers support <picture>. (6.5)

<source> element (in <picture>)

Specifies a media condition and an image inside <picture>. If the media condition is true, the associated image is downloaded and displayed. Ex: <source media="(min-width: 600px)" srcset="dog-wide.jpg"> (6.5)

polyfill

Code that supports some functionality that is missing from a browser. Ex: Picturefill is a polyfill that supports the <picture> element in older browsers. (6.5)

Picturefill

A polyfill available for supporting the <picture> element in older browsers (most modern browsers already support <picture>). (6.5)

raster images (JPEG, PNG)

Images like JPEG and PNG. To display them at the correct resolution, developers create different versions of the same image at different resolutions. | Ex: a 3x device that needs to display a 100 x 75 pixel image needs an image with resolution 300 x 225 (2x: 200 x 150; 1x: 100 x 75). (6.5)

Designing for mobile browsers: what differences from desktops must mobile website designers consider?

Much smaller screen size | Touch interaction, not a mouse | Possibly limited or slower Internet connectivity | Data plans that limit how much content can be downloaded | Users may have a different purpose for visiting than on a desktop | Limited memory and CPU speed, so mobile browsers are less powerful | GPS and accelerometer data that mobile sites may take advantage of (6.1)

Separate websites vs dynamic serving vs responsive web design

Separate websites = two different sites with different URLs (example.com vs example.com/mobile) | Dynamic serving = one URL; the web server examines the User-Agent string and returns a desktop or a mobile version | RWD = one URL and the same HTML for every browser; the browser alters the page's appearance to match the device size (6.1)

What three things characterize responsive web design?

1. Elements are laid out on fluid, proportion-based grids that use relative units like percentages instead of absolute units like pixels | 2. Images are sized with relative units to adapt to various screen sizes | 3. CSS media queries apply different CSS styles depending on the browser's width (6.1)

Scenario: Two requests for the same URL arrive at a server, one with User-Agent: Mozilla/5.0 (iPhone; CPU iPhone OS 9_1 like Mac OS X) … Mobile/13B137 Safari/601.1 and one with User-Agent: Chrome/47.1. The iPhone gets a mobile page and Chrome gets a desktop page. Which technique is this?

Dynamic serving: both browsers request the same URL, and the web server examines each User-Agent string to choose the page. | With responsive web design, both would receive the same HTML; with separate websites, they would use different URLs. (6.1)

How do you test a mobile layout in Chrome without a phone?

Open DevTools (Ctrl-Shift-I on Windows, Command-Option-I on Mac) and click "toggle device" | Choose a device from the Dimensions dropdown (each has a set width and height), or "Responsive" to set any width and height | Rotate swaps the width and height | The pointer is a circle simulating a finger: pressing the mouse button = a touch; Shift + drag = a pinch or spread (6.2)

Scenario: How many device pixels does a box with width: 2px; height: 2px; use on 1, 2, and 3 DPR screens? How wide is a 20px-wide div on a 3 DPR screen?

The box is 2 × 2 = 4 logical pixels: | 1 DPR = 2 × 2 = 4 device pixels | 2 DPR = 4 × 4 = 16 device pixels | 3 DPR = 6 × 6 = 36 device pixels | The div is 20 logical pixels = 60 device pixels wide at 3 DPR (each logical pixel is 3 device pixels wide) (6.2)

Scenario: Which Chrome DevTools setting tests (a) a slow 3G connection, (b) no connection, (c) downloading every resource on each load, (d) a user in London, (e) a tilted phone?

Network conditions tab (press Esc in DevTools, or use the ⋮ menu left of Console): (a) Network → 3G | (b) Network → offline | (c) Caching → Disable cache | Sensors tab: (d) Location → London (or enter latitude and longitude) | (e) Orientation → alpha, beta, gamma values, or drag the phone picture (6.2)

Code reading: <meta name="viewport" content="width=device-width, initial-scale=1">

The viewport meta element with standard parameters: | width=device-width sets the viewport width to the device's screen width (instead of the 980px default) | initial-scale=1 starts the page zoomed in at 100% | Properties are separated by commas inside the content attribute | A page not optimized for mobile then shows larger, readable text but may need horizontal scrolling (6.3)

Scenario: A browser viewport is 400px wide and 800px tall. What sizes are 80vw, 20vh, 50vmin, and 50vmax?

80vw = 80% of 400 = 320px | 20vh = 20% of 800 = 160px | 50vmin = 50% of the smaller side (400) = 200px | 50vmax = 50% of the larger side (800) = 400px (6.3)

Graceful degradation vs progressive enhancement

Graceful degradation = desktop website first, then modify the design to fit smaller screens | Progressive enhancement = "mobile first": design for the smallest device, then adapt the design for larger screens | Good practice: progressive enhancement. The chapter's mobile-first band page keeps the mobile styles as the default and adds min-width media queries at 600px and 800px. (6.4, 6.6)

Media type vs media feature

Media type = a device category the query applies to: all, print, screen | Media feature = a characteristic of a browser, device, or environment, tested in an expression: width, height, aspect-ratio, orientation, resolution | Ex: in screen and (max-width: 800px), screen is the media type and max-width: 800px is a media feature expression (6.4)

Code reading: A phone's viewport is 500px wide. Does each media query match? | <link rel="stylesheet" media="print and (min-width: 400px)" href="styles.css"> | @media screen and (max-width: 800px) { .proposal { width: 350px; } }

The link: no. The print media type is false because the page is displayed on a screen, so the query doesn't match and styles.css is not downloaded (even though 500 ≥ 400). | The @media: yes. The screen media type is true and 500px ≤ 800px, so the .proposal class is defined. (6.4)

Scenario: body { font-size: 15px; } @media screen and (min-width: 500px) { body { font-size: 17px; } } @media screen and (min-width: 900px) { body { font-size: 19px; } }. What font size shows at 450px, 700px, and 1200px?

450px: neither query matches → 15px | 700px: only the 500px breakpoint matches → 17px | 1200px: both queries match; their body rules conflict, and the later one in the stylesheet wins → 19px (general background, not from the chapter: with equal selectors, the later rule wins) | This is the mobile-first pattern: default styles for phones, min-width breakpoints for larger screens. (6.4)

Scenario: A developer's (max-width: 600px) breakpoint works when a desktop browser is narrowed, but never activates on real phones. What is the likely mistake?

The page is missing the viewport meta element <meta name="viewport" content="width=device-width, initial-scale=1">. Media query breakpoints don't work properly unless it sets the viewport width to the device width; without it, the phone pretends its viewport is 980px wide, so max-width: 600px is never true. Forgetting it is a common error. (6.4, 6.3)

Code reading: How does the browser use sizes and srcset to choose an image? | <img src="dog400.jpg" sizes="(min-width: 600px) 25vw, (min-width: 400px) 50vw, 100vw" srcset="dog200.jpg 200w, dog400.jpg 400w, dog800.jpg 800w">

Logical width = viewport width × the first matching size; device width = logical width × DPR; then download the best image at least that wide. | 350px, 2x: default 100vw = 350 → × 2 = 700 → dog800.jpg | 400px, 3x: 50vw = 200 → × 3 = 600 → dog800.jpg | 1000px, 1x: 25vw = 250 → × 1 = 250 → dog400.jpg (6.5)

Scenario: <img src="map600.jpg" sizes="(min-width: 900px) 40vw, 100vw" srcset="map300.jpg 300w, map600.jpg 600w, map1200.jpg 1200w" alt="Map">. Which file does (a) a 1x laptop 1200px wide and (b) a 3x phone 375px wide download?

(a) 1200 ≥ 900, so the size is 40vw: 1200 × 40% = 480 logical px × 1 = 480 device px → map600.jpg (the best image at least 480px wide) | (b) 375 < 900, so the default 100vw applies: 375 logical px × 3 = 1125 device px → map1200.jpg (6.5)

Scenario: A logo displays at 120 x 40 logical pixels. What resolution does a 3x screen need, and how can srcset offer 1x, 2x, and 3x versions?

3x needs 360 x 120 (2x: 240 x 80; 1x: 120 x 40). | Illustration: <img src="logo-120.png" srcset="logo-240.png 2x, logo-360.png 3x" alt="Logo"> → a 1 DPR browser uses the src image, 2 DPR requests logo-240.png, 3 DPR requests logo-360.png | Images need resolutions at least as high as the DPR to avoid looking pixelated, but sending more than needed wastes bandwidth. (6.5)

Code reading: <picture> <source media="(min-width: 900px)" srcset="team-wide.jpg"> <source media="(min-width: 500px)" srcset="team.jpg"> <img src="team-tall.jpg" alt="Team"> </picture>. Which image shows at 450px, 600px, and 1200px?

450px: no media condition is true → the <img> fallback, team-tall.jpg | 600px: only (min-width: 500px) is true → team.jpg | 1200px: both are true; the first matching <source> is used → team-wide.jpg (as in the chapter's example, where a 1000px browser requests dog-wide.jpg) (6.5)

srcset and sizes vs <picture> (when to use which)

srcset with 2x/3x = the same image at different resolutions, picked by DPR | sizes + srcset with widths (300w) = the same image; the browser calculates the width it needs from the layout and DPR | <picture> + <source> = art direction: different images with different proportions, picked by media conditions; the <img> inside is the fallback (6.5)

SVG vs raster images in responsive design

SVG (vector) = lines, curves, and points defined with XML; scales to any size and always appears crisp, so one file works at every DPR | Raster (JPEG, PNG) = needs several versions at different resolutions (1x, 2x, 3x) chosen with srcset, or it looks pixelated or blocky on high-DPR screens (6.5)

Band webpage: what do the 600px and 800px media queries change?

Mobile (default): the body grid places the header and 3 sections in a single column | @media all and (min-width: 600px) (tablets): body grid → 2 columns (Members on the left; Concerts above Contact on the right), and .band-member gets flex-direction: column, so each member's list sits under the photo | @media all and (min-width: 800px) (desktop): .band-member gets flex-direction: row, so each list sits to the right of the photo (6.6)

Band webpage: how can a developer confirm that srcset downloads the right member images for each DPR?

Each member has 150px (1x), 300px (2x), and 450px (3x) images: <img src="singer_150.jpg" srcset="singer_300.jpg 2x, singer_450.jpg 3x" alt="Singer" width="150"> | In the Chrome DevTools screen emulator, set the DPR and reload; the Network tab lists the files downloaded: the _450 images at DPR 3, _300 at DPR 2, _150 at DPR 1. The page looks the same either way. (6.6, 6.2)