Course Introduction: Optimize User Experience for Mobile Devices and Browsers

Use Chrome Developer Tools to Emulate Different Mobile Devices

Use Remote Sources to Debug a Web App on an Emulator, Simulator, or Physical Device

Scale a Page Correctly for Small Viewports with a <meta> Tag

Make a horizontal-scrolling Menu

Make a <select> Field that Takes Advantage of Native Browser Behaviour

Make a nav Menu Available from a fixed-position Header

Use Sticky Positioning for Section Headers

Show Images of Differing Resolutions Depending on the Viewport Width with srcset

Show Different Variations of Images Depending on the Viewport Width using Art Direction

Optimize User Experience for Mobile Devices and Browsers

We can take advantage of sticky positioning to keep a section header at the top of the page while the user scrolls. This is useful for neat categorisation of sections on the page.

Instructor: [00:01] Let's start by setting up a description list element. Inside the description list, we're going to have sections comprising a section header and content underneath. The section header is going to be a DT tag or description term. The content will comprise description details tags or DD.

[00:23] In this example, we're going to use results of soccer matches for our data. The title of our first section header is going to be premier league, and within each DD is going to be a soccer result. For example, Brighton and Hove Albion two, AFC Arbor with two. Let's pad this out with some more results and let's save and visit our page on iPhone 5s Safari 11.

[00:54] Here's our description list with a description term and description details here. Let's add some more sections to our code. Now, we have a section for championship results and league one results. Save and refresh. Here's our description list with more data inside of it.

[01:17] Let's change the appearance of our description list a little by heading to our CSS. Targeting the description list element, we'll give it font size 30 pixels. We'll give every description term element a background color. We'll give some padding to each description details element. Let's see how that looks.

[01:43] Now, everything is a bit bigger and spaced out. Currently, we can only see our description term element when we get to the section that we're looking at, but a common situation would be that we want this description term, or this header, to be fixed at the top of the page during the time that we're scrolling that section. This could be especially useful when there is a lot of data and it may be easy to forget which section we're actually looking at.

[02:12] There's an easy way to implement this. Let's head back to our description term in our CSS. We're going to add position sticky, and we'll need position webkit sticky to target webkit browsers. We're also going to use top zero. Let's save and refresh and see how that changes our page.

[02:36] Now when we scroll down the page or up the page, the description term-the header-stays fixed at the top of the page. As we scroll down and we get to the next section, it takes over like this. This is particularly useful for small viewports because if there's a lot of data, or data taking up a lot of room, our users will still be able to get the context of what section they're looking at.

[03:08] Before jumping in and using position sticky, it's definitely worth checking first that it's supported on the devices or operating systems that you need to support.

Course

Optimize User Experience for Mobile Devices and Browsers

Use Sticky Positioning for Section Headers

Share this video with your friends