Mobile Web Basics Joan Boone jpboone@email.unc.edu Slide 1 Topics - - PowerPoint PPT Presentation

Slide 1

Mobile Web Basics

Joan Boone

jpboone@email.unc.edu

INLS 573

Mobile Web Development

Slide 2

Topics

Part 1: Viewports Part 2: Responsive Web Design Patterns Part 3: CSS Media Queries Part 4: Breakpoints, Best Practices

Slide 3

What is a Viewport?

• Viewport refers to the size of the window, or the area visible on

the screen

• In general, this term refers to displays on mobile devices with

small screens

• Problem: How to ensure your content is displayed with the

same readability and accuracy on screens of different sizes

Viewport Sizer: What is a Viewport?

Slide 4

Screen size, resolution, and viewports

Source: Vexing Viewports (2012, dated but historically useful) 320x480 pixels 640x960 pixels

In addition to different screen sizes (or viewports), devices often have different screen resolutions. Both devices have the same 2” wide screens, but different resolutions

• Resolution (or pixel density) problem: the one on the right would pack in

4 times as many pixels into the same space as the one on the left

• Consider fonts sized in pixels: more pixels in a smaller space results in

text that is small and difficult to read without zooming

Slide 5

Viewport and mobile browsers

By default, mobile browsers will scale down an entire web page to fit the viewport of the device.

w3schools: The Viewport

Without viewport meta tag With viewport meta tag

Recall Hillsborough BBQ...

Solution: viewport meta tag

Slide 6

Setting the Viewport

<meta name=”viewport” content=”initial-scale=1.0, width=device-width” />

Handles the resolution problem by setting the zoom level when page is first loaded. Defines a 1:1 relationship between CSS pixels and device-independent pixels. Handles the screen size problem by telling the browser to set the width of the page to the screen width of the device in device-independent pixels. Source: web.dev: Responsive Web Design Basics

A pixel is not a pixel...

• Hardware/device pixel is a physical pixel on the display
• Device-independent pixel maps to one or more physical pixels depending on

the screen resolution (or pixel density). These pixels allow for UI elements to look uniform on screens with different resolutions

• CSS pixel is the unit used by developers for page layout

The ratio of CSS pixels to device independent pixels is the page's scale factor, or zoom.

Slide 7

Viewing websites on a small screen

Several ways...

• Resize the window on your laptop/desktop
• View it on your phone (the best approach)
• Use the 'Responsive Design Mode' in

Chrome/Firefox Developer Tools

More information on setting the viewport

• w3schools: Responsive Web Design – The Viewport
• MDN: Using the viewport meta tag to control layout on mobile browsers

Slide 8

Responsive Web Design Basics: Size content to viewport

Avoid usability issues

• Having to zoom to more easily view content
• Having to scroll horizontally to view content (vertical is ok)

Additional rules

• Don't use large fixed width elements
• Don't let content rely on a particular viewport width to render well

– screen dimensions and widths vary widely across devices

• Use CSS media queries to apply styling for different screen sizes
• Use relative units – a relative unit gets its sizing from something

else, e.g., the container for an element. Examples include em, rem, and percentages. Use the PX to EM conversion tool.

Slide 9

Topics

Part 1: Viewports Part 2: Responsive Web Design Patterns Part 3: CSS Media Queries Part 4: Breakpoints, Best Practices

Slide 10

Responsive Web Design Patterns

Higher Education

Source: Media Queries

Slide 11

Responsive Web Design Patterns

Government and Article Aggregator

Source: Media Queries

Slide 12

Responsive Web Design: Mobile-first, Simple to Complex

Slide 13

Topics

Part 1: Viewports Part 2: Responsive Web Design Patterns Part 3: CSS Media Queries Part 4: Breakpoints, Best Practices

Slide 14

CSS Media Queries

• Media queries are simple filters that can be applied to CSS styles. If a

device has the characteristics specified by the query, then change the style rules used to render the content.

• For responsive web design, the most common device characteristic

specified in media queries is min-width. Many other media features: Media Queries specification (Level 4)

• In a mobile-first style sheet, the rules for the device with the smallest

width are defined first, followed by one or more media queries for progressively larger screen widths.

• The media queries typically override (or replace) the style rules previously

defined in the style sheet.

• Rules that are not replaced by the media queries remain unchanged, and

will apply to any screen width.

Responsive Web Design by Ethan Marcotte “Fluid grids, flexible images, and media queries are the three technical ingredients for responsive web design”

Slide 15

No Responsive Layout

no-layout.html

Without any responsive layout rules, elements are laid out in the normal source order defined by the HTML. In other words, they are laid out in the same order as specified in the HTML.

Slide 16

Responsive 3 Column Layout

In a responsive layout, we want our content to be

• rganized vertically on the small screen, as in the

“no layout” example. For the larger screen, we want to spread the same content across 3 columns. To do this, add a media query to the style sheet that modifies the layout when the min-width is 64em (or 1024px). In other words, when the screen (or browser window) is wider than 64 em, change the layout to 3 columns.

Slide 17

Responsive 3 Column Layout

The style sheet is mobile-first because the first set of style rules are for the small screen, and the media query that follows these rules handles the layout for the larger screen.

@media (min-width: 64em) { /* style rules go here */ }

Slide 18

Responsive 3 Column Layout (HTML)

<div class="wrapper"> <aside class="side1"> <p>ASIDE1: Sed ut perspiciatis ...</p> </aside> <section> <p>MAIN SECTION: Lorem ipsum ...</p> </section> <aside class="side2"> <p>ASIDE2: Sed ut perspiciatis ...</p> </aside> </div>

Slide 19

Responsive 3 Column Layout using Flexbox

/* mobile-first */ .wrapper { display: flex; flex-direction: column; } responsive-flex-layout.html @media (min-width: 64em) { /* 1024px */ .wrapper { flex-direction: row } }

Slide 20

In this example, the content appears evenly distributed – both <asides> are the same size and the middle section takes up the remaining space

Reminder: Content can determine space allocation

But, the browser will allocate as much space as needed to ensure your content is readable, unless you override the proportions.

Slide 21

Topics

Part 1: Viewports Part 2: Responsive Web Design Patterns Part 3: CSS Media Queries Part 4: Breakpoints, Best Practices

Slide 22

CSS Media Query Breakpoints

Media queries define breakpoints – points at which you want the style rules for presentation and/or layout of your page to change based on device characteristics. How to set breakpoints? Not based on device characterstics!

• Create breakpoints based on content, never on specific devices
• Design for the smallest mobile device first; then progressively enhance

the experience as more screen real estate becomes available

• When the page begins to look bad, add a breakpoint

web.dev: How to choose breakpoints

• Pick major breakpoints by starting small: design content for the small

screen first, then expand the screen until a breakpoint becomes

• necessary. Major breakpoints usually apply to layout.
• Pick minor breakpoints when necessary: padding, margins, font size

Slide 23

CSS Media Queries

Do you need a media query at all?

• Flexbox and Grid, and Multi-column layouts, are responsive by default

Media Queries Best Practices

• Don't target devices, add breakpoints when the design breaks
• It's not all about pixels – use relative units such as the em unit to provide

a more consistent result if the user has larger text than you expected.

• Relative units allow browsers to adjust the design based on the user

zoom level, resulting in better readability and accessibility.

• Take extra care when reordering Flex and Grid items. Screen readers

follow the document source order, so it may be confusing for those with poor vision Sources:

• A quick intro: w3schools CSS Media Queries
• Using Media Queries for Responsive Design 2018 by Rachel Andrew

Slide 24

Media Queries can't solve all of your responsive layout challenges

Source: Mobile first (Zurb University)

The Woes of Developing from the Top-Down The Smartness

• f Building from

the Bottom-Up Book: Mobile First by Luke Wroblewski (2011) Too much content, too many images, hero images, too much text,...