Explore

Web Development: Foundations - D276

Mobile Web Development

Makiel [Muh-Keel]

Last edited 457 days ago by Makiel [Muh-Keel].

Implementing mobile websites

Developers implement mobile websites using three main techniques:

Separate websites: Two different websites are created, one for desktop and one for mobile.

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.

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 webpage to match the device size.

⁠

Mobile Development Tools

Screen emulator

Developers must test their mobile websites on a variety of mobile devices to ensure the websites work properly for all users. However, many desktop browsers contain development tools that aid mobile website development without using a mobile device.

A screen emulator is software that simulates how mobile device screens operate. Developers access the DevTools screen emulator by typing Ctrl-Shift-I in Chrome (Windows) or Command-Option-I (Mac).

⁠

Device Pixel Ratio

Chrome's screen emulator allows developers to view or change the device pixel ratio. The device pixel ratio (DPR) is the ratio between device pixels and logical pixels.

⁠

A logical pixel is 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.

⁠

Emulating network conditions

Pressing Esc in DevTools shows "Network conditions" and "Sensors" tabs. If the tabs are not visible, clicking the ⋮ button to the left of "Console" reveals a menu of extra tools that includes "Network conditions" and "Sensors". The Network conditions tab allows the browser to modify the following:

Caching - Disabling the cache forces the browser to download all webpage resources every time

Network throttling - Simulate slower networks like 2G or 3G or simulate being offline

User agent - Change the user agent string to any number of browser user agents

⁠

Viewport

Viewport meta element

A browser's viewport is the visible area of a webpage, not including the address bar, bookmark bar, tabs, etc.

⁠

The viewport meta element specifies viewport properties that affect what the browser's viewport displays. Some common viewport properties include:

width - The viewport width, which is typically set to device-width, the device's screen width.

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

user-scalable - A boolean value that, when set to no, prevents the user from zooming in and out.

⁠

Ape129811

Viewport units

Developers frequently want the content of a webpage to occupy a fixed percentage of the viewport. Most desktop and mobile browsers support CSS viewport units.

A viewport unit (vw and vh) is a percentage of the browser viewport's width or height, where 1vw = 1% of viewport width and 1vh = 1% of viewport height.

CSS also defines minimum and maximum viewport units vmin and vmax where 1vmin = 1vw or 1vh, whichever is smaller and 1vmax = 1vw or 1vh, whichever is larger.

⁠

Media Queries

Designing for different screen sizes

Web developers typically design websites to make optimal use of the entire viewport. Viewports vary widely in size, so three platforms developers consider are: desktop, tablet, and mobile. Developers follow two general strategies to design websites for all three platforms:

Graceful degradation: Design the desktop website first and modify the design to fit smaller screens.

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.

Webpages using responsive web design adapt to different viewport sizes using media queries. A CSS media query is a combination of media type and optionally one or more media feature expressions that evaluate to true or false.

A media type is a device category that a media query applies to. Ex: all, print, and screen.

A media feature is a characteristic of a browser, device, or environment. Ex: aspect-ratio, height, and orientation.

Some media features may be prefixed with "min-" or "max-" to express ≥ or ≤ constraints. Ex: min-width:200px means width ≥ 200px.

⁠

Breakpoints

Developers choose "breakpoints" to determine when content should be displayed, resized, or hidden in a webpage. A breakpoint is the screen width that activates a media query.

Ex: In the media query @media screen and (max-width: 800px), 800 is the breakpoint. Good practice is to use breakpoints that target the content rather than a specific device.

Ex: Using a breakpoint to hide a <div> when the device width is larger than 700px is better than a breakpoint to hide a <div> when the page is viewed on an iPhone X.

⁠

Responsive Images

A responsive image is an image that scales to fit different layouts in a responsive website. Web developers must consider several issues when using responsive images:

Responsive images need to scale to various sizes without looking pixelated or blocky.

Higher resolution images should be used for devices with higher DPRs to avoid images looking pixelated or blocky.

Images with the minimum DPR supported by a device should be used to avoid sending larger image files that waste network bandwidth.

SVG images

SVG images are ideal for responsive images. A Scalable Vector Graphics (SVG) image is a vector image that is defined with XML. A vector image is an image defined with lines, curves, and points that scale nicely at any resolution and always appear crisp.

srcset attribute

To display raster images like JPEG and PNG 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. The <img> srcset attribute specifies which image should be displayed for specific DPR values.

⁠

The image's sizes attribute specifies one or more pairs of media conditions and relative image sizes. Ex: (min-width: 400px) 30vw specifies a media condition (viewport width must be at least 400px wide) and a relative image size (30% of the viewport width).

The media condition must be omitted for the last (default) image size.

<picture> element

Art direction is 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 is more appropriate for portrait mode.

The <picture> element contains one or more <source> elements that specify a media condition and image.

Bootstrap

Bootstrap is one of the most popular frameworks for creating responsive websites because Bootstrap simplifies the task of creating fluid layouts and provides many common website components. Bootstrap includes:

Numerous CSS classes that aid in styling text, tables, images, etc.

A grid system for designing layouts that work on mobile, tablet, and desktop screens.

Reusable components like dropdowns, alerts, navigation, modal dialogs, etc.

Alternatively, Bootstrap can be downloaded from a CDN. A Content Delivery Network (CDN) hosts popular web files around the globe and automatically routes requests to the closest server, thus speeding up delivery of the files.

Grid system

Bootstrap uses a responsive grid system that allows developers to create layouts for a variety of screen sizes. The grid system is divided into 12 columns or less that fluidly resize as the browser size changes. The grid system is applied to a block element using one of two classes:

container - Creates a responsive fixed-width container with a max-width that changes at various breakpoints.

container-fluid - Creates a responsive container with a 100% width.

⁠