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.
Before we can start building sites that target mobile browsers, we first have to understand three things: what are the most common mobile browsers, what the mobile browser market landscape looks like, and then how to go about building sites that will work across the largest number of browsers. First let's begin by taking a look at what the most common mobile browser rendering engines are. There are four main rendering engines that are prevalent in the mobile space. WebKit is the engine behind browsers such as Safari on the iPhone, Chrome on Android, the newer BlackBerry browser starting with BlackBerry 6, and some other phones.
These technologies enable you to build some pretty advanced mobile web sites. One of the major differences from the Desktop browser market that you will find is that due to the diversity of these rendering engines, the prevalence of each varies throughout the world in each geographic market. Opera, for example, is the leading browser for mobile devices worldwide, followed closely by BlackBerry, iPhone, and Nokia, and then by Chrome on Android. Other browsers like NetFront round out the rest of that lot. In North America, the picture is a little bit different. The WebKit engine is more prevalent, with Android in the lead, followed by iPhone and BlackBerry, and then everyone else.
In Europe, the iPhone has a clear lead, than BlackBerry, Android, Opera, and Nokia, followed by everyone else. And the important point to remember is that the mobile browser landscape is much more diverse and seems to be in much more flux than the desktop market is. Indeed the market positions of these rendering engines may have changed dramatically by the time you are viewing this course. So what does this mean to you as a mobile web developer? Essentially, it means you're going to have to make some important choices about how you deliver your content to your mobile web users.
One choice is to just pick a lowest common denominator among the browsers out there and deliver a common experience to all your mobile visitors. While easy to develop, that clearly doesn't deliver a good experience to users that have more capable phones and who are probably receiving much better support from other sites, including perhaps some of your competitors. Another choice is to pick one or maybe two platforms that you optimize your site's experience for and then deliver either a down-level experience for other browsers, or just hope for the best that the experience turns out well for them.
While that may work for a significant percentage of your users, there are problems with that approach too. The mobile browser landscape changes quickly, and today's popular device might not be the market leader in another year's time. Two years ago who would have guessed that Android would have surpassed the iPhone in market share. One year ago who would have guessed that Windows phone will come out of nowhere to establish a viable platform, or that BlackBerry would get serious about its web browser? Going back to the days of 'this site best viewed in browser X' is clearly not a good solution, especially since some smartphone platforms don't even let you install a competing web browser.
The solution that I recommend is to create a tiered approach to delivering mobile web content. Figure out which features your site will need to use, then use a combination of feature detection, progressive enhancement, and perhaps browser-engine detection to deliver a rich experience to a class of browsers rather than specific browsers. One of the good things about the mobile browser market is that mobile browsers are typically newer and more capable than many desktop browsers that are still in use.
There is also a good set of practices that you can follow to detect the browser capabilities instead of using old- school browser sniffing to determine what level of experience to deliver. For example, based upon your site and your user audience, you might create two or maybe three tiers of support: a rich experience for highly capable modern mobile browsers; a light experience for less capable browsers; and a text-only, or even no experience, for older or far less capable browsers.
This will help you broaden your reach and avoid tying your site to one platform or browser.
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.