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

INLS 573 Mobile Web Development Mobile Web Basics Joan Boone jpboone@email.unc.edu Slide 1

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

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 3

Screen size, resolution, and viewports 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 320x480 pixels 640x960 pixels • 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 4 Source: Vexing Viewports (2012, dated but historically useful)

Viewport and mobile browsers By default, mobile browsers will scale down an entire web page to fit the viewport of the device. Recall Hillsborough BBQ... Solution : viewport meta tag Without viewport meta tag w3schools: The Viewport With viewport meta tag Slide 5

Setting the Viewport <meta name=”viewport” content=”initial-scale=1.0, width=device-width” /> Handles the resolution problem by setting Handles the screen size problem by the zoom level when page is first loaded. telling the browser to set the width of the page to the screen width of the Defines a 1:1 relationship between device in device-independent pixels. CSS pixels and device-independent pixels. 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. Source: web.dev: Responsive Web Design Basics Slide 6

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 7

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 8

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

Responsive Web Design Patterns Higher Education Source: Media Queries Slide 10

Responsive Web Design Patterns Government and Article Aggregator Source: Media Queries Slide 11

Responsive Web Design: Mobile-first, Simple to Complex Slide 12

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

CSS Media Queries Responsive Web Design by Ethan Marcotte “Fluid grids, flexible images, and media queries are the three technical ingredients for responsive web design” • 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. Slide 14

No Responsive Layout 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. no-layout.html Slide 15

Responsive 3 Column Layout In a responsive layout, we want our content to be organized 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 16

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 17

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 18

Responsive 3 Column Layout using Flexbox /* mobile-first */ .wrapper { display: flex; flex-direction: column; } @media (min-width: 64em) { /* 1024px */ .wrapper { flex-direction: row } } Slide 19 responsive-flex-layout.html

Reminder: Content can determine space allocation In this example, the content appears evenly distributed – both <asides> are the same size and the middle section takes up the remaining space But, the browser will allocate as much space as needed to ensure your content is readable, unless you override the proportions. Slide 20

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

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 22

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 23

Media Queries can't solve all of your responsive layout challenges The Woes of Developing from the Top-Down The Smartness of Building from the Bottom-Up Source: Mobile first (Zurb University) Too much content, too many images, hero images, too much text,... Book: Mobile First by Luke Wroblewski (2011) Slide 24