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

Mobile browsers have excellent user experience when it comes to `select` fields. Let’s find out how they look compared to desktop browsers.

https://app.egghead.io/api/v1/lessons/css-make-a-select-field-that-takes-advantage-of-native-browser-behaviour/subtitles

Instructor: [00:00] Let's write a select field that's going to contain all of the continents. We'll have Africa, Antarctica, and so on. Let's save this and see what it looks like in a desktop browser. I've got desktop Chrome open here. Here's our little select field. Let's write some styles to make this a bit bigger.

[00:32] Targeting our select field, we'll give it width 100 percent so that it takes up the available width. Font size 30 pixels. Padding five pixels. Border radius five pixels. Let's save and refresh in our desktop browser. Here's our select field.

[00:56] In desktop browsers like this one, when we interact with the select field, we get this drop down menu appear. However, the select field looks different depending on what device and browser you're looking on.

[01:10] Let's head over to our iOS simulator. Here's the select field in our iPhone SE simulator running Safari. Already, we can see differences in the styling. The main difference can be seen when we interact with the select field. Instead of a drop down, this section appears at the bottom of the page. It contains all of the options. This is more suitable for a small screen because there's more screen space available to select an option.

[01:43] Now, let's head over to our Android simulator. Here's our select field in the Nexus 5 simulator running Chrome. This time when we interact with it we get a modal appear. There's even more screen space available to us to select an option.

[02:02] There's nothing fancy going on here. We're just using the native browser capabilities such as this select menu, and we're finding out that the native behavior is actually optimized for the device and the browser that we're using.

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

Share this video with your friends

Course

Optimize User Experience for Mobile Devices and Browsers