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

Many tools can be utilised in our desktop environment to develop our app for mobile devices. We’ll take a look at some mobile-specific features in Chrome Dev Tools to emulate devices.

Instructor: [00:00] Desktop browsers have great facilities on offer for us to develop Web apps for mobile devices. Let's take a look at what Chrome Dev Tools has to offer. We're going to open this index.html file. Let's inspect the page.

[00:17] When we use the device toolbar, we can emulate devices inside the browser. Currently I'm emulating an iPhone 5, but I have many more to choose from. I can adjust the scale. All the resources that available to us when we debug desktop applications are still available to us now.

Course

Optimize User Experience for Mobile Devices and Browsers

Use Chrome Developer Tools to Emulate Different Mobile Devices

Share this video with your friends