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.
I will be right upfront with you on something: there is no magic bullet that will make your web pages automatically work great on both mobile and desktop devices. However, one of the best ways to make your job easier when designing web pages for the mobile context is to follow the basic principle of design for one web. Designing for one web means building your pages in a way that makes it easier to provide the same content to a wide range of users regardless of the device they are using to access your site. Now note that I didn't say the same experience for multiple devices and form factors, just that the content is accessible.
In other words, don't just exclude users from accessing your site because they aren't using a specific device or browser. This just takes us back to the bad old days of 'this site best viewed in browser X,' and those days were not fun for users or for developers. In fact, the situation is worse with mobile devices because some manufacturers don't give the user the option of using a different browser on their phone. At least on the desktop users usually have the ability to download a different browser, but many mobile users don't have that option. So if you require a particular browser, you're just turning potential customers away from your site.
So here I'm using my Nexus S, which has the WebKit browser in it. This is Chrome on Android, and you can see that here on the Wells Fargo homepage I have some nice styling. I have got some side links with some rounded corners. When I click on the Sign On link I get this animation, it goes from the right to the left, and that lets me sign on. And if I go back, I get the same kind of animation. I can click on a link to search for ATMs and so on. So this is a richer-capability browser. Let's see how the site looks on another browser. So here, this is a Windows phone, and the current release of this browser is based on IE7, and you can see that while the styling is a little bit different, the access to the content is all the same.
I still have a place where I can sign on, I have a place where I can search for ATMs and so on, and all the links of the same features are here on the homepage, just as they were for the richer--class browser. Now the way the Wells Fargo is accomplishing this is by making their markup in such a fashion that the content is delivered to the same devices, but it's styled in each case for each browser, one which understands some which are styling commands and one which doesn't. Building pages such as this that are compact and yet information rich and easy to navigate is not particularly difficult. It just takes some planning.
By following these guidelines, your pages can also be crisp, clean, and succinct.
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.