Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
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.
There are some basic design guidelines that you can follow to ensure that your pages will have a good solid foundation for working well on mobile devices. To begin with, design your pages to be finger-friendly and not require a highly accurate pointing device like a stylus. Of course there are still plenty of stylus-based devices out there, but designing for the finger will usually result in the design that suits the stylus as well, and the reverse is not true. Fingers can do a lot more than stylus pens. They can easily flick, pinch, stretch, and perform all kinds of gestures that pointing devices like a stylus are not suited for.
Vertical-scrolling web pages are also easily usable with just one hand. While the user is holding the device, they can use their free thumb to scroll up or down on touch-capable devices or use arrow keys, or some other navigation element. The vertical-scrolling mode is one that most users are already familiar with, since they already know how to scroll web pages, and it simplifies the number of gestures that a user has to perform in order to read the content. It also reduces the chance that the user will miss important content that they don't realize they can pan left or right.
Finally, avoid certain technologies that don't work well on mobile browsers or are known to cause problems. Framesets, for example, are just a bad idea on mobile pages. While most mobile browsers can handle them just fine, they take up a lot of screen real estate with their borders and they are hard to read. Scrolling their contents can also be troublesome, since it usually requires a different gesture to scroll within a scrollable page element than to scroll the page itself, and many users may have trouble discovering that. Tables that are used only to achieve layout positioning should also be avoided.
Using tables to layout content is a bad idea in general, even on desktop pages, but they are especially bad for mobile devices since it's harder to adapt to varying screen sizes and the added table code tends to bloat the page size. Nested tables just make the problem even worse. Now to be clear, tables that are used to display tabular data are just fine. That's what the table tag was invented for in the first place, but don't use them to position elements. That's why there's CSS. Image maps also present a usability problem on mobile devices.
Now they work for the most part, but the problem with image maps is that they typically rely on some kind of mouse-over behavior in order to highlight a part of the map that should then be clicked on. Most mobile devices that rely on touch events don't have such support. There's no way for the browser to detect that a finger is hovering over the image map in order to trigger the hover event to highlight the map parts. In fact, for this reason, hover effects such as dropdown menus are a bad idea in general on mobile devices. And lastly, most mobile browsers don't provide support for things like plug-ins or extensions, so don't rely on them, or show the user any pages that prompt them to try to download them.
Following these guidelines will help you establish a solid foundation upon which to build mobile web pages that work well across a variety of mobile devices with varying capabilities that are easy for users to consume and interact with.
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.