Save 45% for a limited time.

Get access to all courses and lessons on egghead today.

Autoplay

    Course Introduction: Optimize User Experience for Mobile Devices and Browsers

    Rory SmithRory Smith

    A lot of the time, web apps are built primarily with the desktop layout in consideration, and the mobile layout suffers as a result. In this course we are going to discuss using features of user interface which are optimised for mobile devices.

    We are going to discuss CSS features that make a big difference and build entire components that work great on mobile devices and browsers. We are going to take into account browser support to ensure our users are getting the experience we want them to.

    More and more of our users depend on their mobile device to use our web apps. With this in mind, we are going to look at how to optimise the components we build for smaller viewports, and how to ensure our customer gets an optimised version of our web app for their device.

    We are going to discuss different ways we can view, test, and debug our web app in a mobile setting so that we know what we are seeing is what our user is seeing, because sometimes a desktop browser emulating a mobile device just isn’t enough.

    htmlHTML 5
    cssCSS
    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Transcript

    Transcript

    Instructor: 00:00 In this course, we're going to build UI features optimized for small viewports. More and more of our users depend on their mobile device to use our web apps.

    00:10 With this in mind, we're going to look at how to optimize the components we build for smaller viewports, and how to ensure our customer gets an optimized version of our web app for their device.

    00:20 Throughout the course, we'll discover how to test our implementations effectively on native device simulators, which, when compared with developing on a desktop browser, can give us the confidence that what we are seeing is what the user is seeing on their device.

    00:35 We're going to discuss CSS features that make a big difference, as often, some small stylistic changes can play a key role in how our page works on small viewports.

    00:47 Whether you're looking to refactor components built for larger screens or start from scratch, you'll find some key features to be incorporated on your web app, and find new approaches to web development for phones and tablets.

    Discuss

    Discuss