Start learning with our library of video tutorials taught by experts. Get started
Viewed by members. in countries. members currently watching.
This course surveys the core principles and techniques essential to building web sites for mobile devices. Author Joe Marini introduces the mobile context, sheds light on its unique coding requirements, and discusses interface design techniques that enhance existing sites for mobile viewing. The course shows how to approach designing for mobile form factors such as smaller screens and finger-based interaction, along with how to incorporate CSS3 and HTML5 capabilities, such as geolocation, local storage, and media queries.
One of the hallmarks of a well-built mobile web site is the relentless focus on really nailing the core scenarios that the site addresses. Before you even begin building your mobile site, ask yourself what the top one to three features are that the site provides to your users and then focus on making those experiences as prominent and easy to use as possible. Remember the mobile user's frame of mind. It's very often someone who is on the go and needs quick access to information and probably doesn't have the time to stop and learn about, or remember how your mobile web site works.
So it's important that your mobile site be simple enough that new users can pick it up quickly and returning users can get straight to what they need. I know it's hard, but it's important to resist the temptation to find some way to provide all the same features that your desktop site provides on your mobile site. Remember, being mobile represents a different usage scenario, in that some of your desktop site's features may not translate well to the mobile context, or maybe difficult to use in that context.
This is why it's so important to really understand the scenarios under which your site's features will be used, so if you need to adapt any of your site's existing features, you can do so with a clear understanding of how they're going to work on mobile. In addition to simplifying and focusing your site's mobile experience, going through the exercise of identifying your site's top features has the added benefit of helping you make the best desktop web site too. Once you decided on the main features of your mobile site, ensure that they are prominently accessible to the user and that they are among the first things the user sees when they load your site or one of its pages.
This kind of focus on your site's core functionality helps the user quickly understand your site, often within a matter of seconds, minimizing the time that a user spends learning or relearning the site, and gets them to their destination faster. Let's take a closer look at the United Airlines mobile web site to see how they focus on their core scenarios. The United Airlines mobile site actually does a pretty good job of following many of the principles we've outlined so far, in addition to focus. First, notice that all the information fits on one page and it's optimized for the vertical scrolling experience.
There is no side-to-side panning that goes on here. Notice also there is minimal use of graphics. It's just their logo and some icons that go down the side of the links over there. There is a very simple background color. It's blue. The links are nice and large, and they are spaced out well to minimize the chance that I'll hit the wrong one. Now as far as focusing on the core scenarios, look at the top three features. These are the first things I see when I load the site, and they are Check-in, Flight status, and My reservations, because chances are someone who is accessing the mobile site of an airline is probably in the back of a taxi or otherwise on their way to the airport, and they either want to check in or check their flight status and may check the status of their reservations.
The next three most important features are the Flight availability, Mileage Plus summary, and Flight notifications. Now, not as important as the top three features, but they are available to me. So, for example, if I want to check my Mileage Plus summary on the go, I can find that information really easily. And finally, down here at the bottom of the page there is a full site link, so the user has access to the full web site, which pretty much covers all the rest of the data access scenarios a user might run into. Having a clear focus on your mobile site's goals and features will enable you to build pages that can be clearly understood very quickly, within a matter of seconds, and give your mobile users the quick access they need to get their tasks done and be on their way.
There are currently no FAQs about Mobile Web Design & Development Fundamentals.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.