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.
These standards have been in place for several years, and many of today's web-capable phones and other mobile devices have good support for them. Some of them support older standards, such as WAP and WML, but those are rapidly being phased out in favor of standards that are more in line with the general web. Some mobile devices, usually the more recent smartphones and devices such as mobile tablets, support more advanced standards and specifications like CSS3, HTML5, and AJAX. You can use these within your mobile web pages too, as long as you know how to properly detect support for them and provide fallback options in the cases where they are not supported.
In cases such as this, your site should use server-side detection but only to detect general classes of mobile devices and not specific browsers, and only then to send the user to a mobile page instead of using this information to work around browser-specific bugs or issues. We'll examine how to go about that process later on in the course. There are some web standards available today that are particularly well suited for use on mobile devices. Perhaps the most important among these are the viewport, handheld friendly, and MobileOptimized META tags.
These tags are used to help the device's mobile browser determine how best to lay out the page on the device that it's being rendered on, and we'll see specific examples of these later. CSS media queries are another important web standard that is really useful on mobile devices. Media queries enable you to deliver specific style sheets to the browser based upon information such as the width of the screen, whether it can support color, and other useful properties. Later in the course, we'll see how to use media queries to build a web page that renders well on the desktop and on a mobile device.
Of course, HTML5 is an exciting and relevant topic and there are technologies in HTML5 that are also very useful on mobile devices. HTML5 local storage is one of them, and it allows your web pages to store data locally on the user's device without having to rely on cookies. And finally, there's geolocation, which allows your web pages--with the user's consent of course--to determine the physical location or area that they're being accessed from. The ability for web sites to determine their location is a great new development that only native apps have been able to do for some time now, and enables all kinds of potential location-based services.
By sticking to a baseline of widely accepted web standards while adding in more advanced functionality when the device supports it, you can build web applications that address a wide range of devices, while providing leading-edge features to users who have more highly capable mobile browsers.
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.