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.
Let's look at some examples of modern web sites, in a variety of mobile browsers, to see how they adapt to the mobile browsing context. Let's start by looking at Twitter's mobile site, and I'll use an iOS device for this one. Okay, so here I am on my iOS device looking at the Twitter homepage, and Twitter's mobile web site is pretty simple when you come right down to it. It's basically just a stream of tweets that people are making about a particular subject. So looking here at the homepage, you can see right at the top are the controls for signing in, and there is a search control also right at the top, and then there is a list of popular topics.
So I can choose a particular topic that's trending right now, and we'll do that in a moment. But notice right away, pretty clean site, minimal use of graphics, consistent use of fonts and font sizes, and a pretty subtle color scheme--it's pretty readable in various forms of lighting. So let's go ahead and click on one of the trending topics, and I'll just go ahead and choose Audrey Hepburn. Okay, so here we are on the screen that shows the posts, or tweets, for that particular topic.
Again, very clean. You see minimal use of graphics, very consistent use of fonts all the way throughout the posts. The links are pretty well highlighted and are large enough to tap on. I have a button to refresh the tweets, and again here's the search control, if I want to refine my search. So if we scroll through the content, all the way down to the bottom, you can see down here I have another search bar and quick links back to the popular topics.
Okay, so that's the Twitter mobile site. Now let's move on to the Yahoo mobile site. Okay, so here is the Yahoo mobile site, and the Yahoo mobile site actually makes quite a bit of content available on the mobile device. Right up here at the top, I have a quick link to my mail, because that's a pretty popular feature of Yahoo. I have links to the popular sections, and below that I've got a search control. Below that, I've got my news for the day, and you'll notice here that the news section actually scrolls left and right, but the site itself is optimized for vertical scrolling. And the way that I scroll through particular stories is by using these links here on the left and right sides marked next and prev.
So instead of having the user scroll left and right using panning, there is pretty obvious controls right here that show the user that they can see more content if they click the previous and next buttons. Let's scroll down through the stories. You can see again, broken into sections that are easy to read, pretty consistent use of fonts, and if we go all the way down to the bottom, there is a link right here at the bottom that lets me choose between the mobile and the desktop sites. Okay, so that's a quick look at the Yahoo mobile site.
Let's move on now to Android and take a look at some mobile sites on an Android device. All right, so here I am on my Android phone and I am taking a look at the eBay mobile web site. So right away notice that the eBay web site is very clean. There is very simple use of fonts, no background images for the page, and minimal use of graphics. Right here at the top I've got my search control, so I can search for a particular item. Also here at the top is a Browse Categories link, so I can browse to all the categories that eBay has listed for sale.
But eBay has gone ahead and made it simple for me by listing popular categories. So to save me from having to manually input data into the device. I can just choose one of the popular categories. So let's go ahead and click on Sporting Goods and you can see that the results page, again optimized for vertical scrolling, don't have to scroll to the left or to the right. Let's go back, so I'll scroll down here. You can see that down here there is a list of products that are the daily deal, and also there is a link to the full web site, should I decide to go there.
So let's just pan through here and take a look at one of these daily deals. Let's click on this one. And here is the page for that particular item for sale. If I scroll down, you can see there is all the relevant information for this particular product, and if I scroll back up, there are the images for this product, and I can just use my finger to swipe through these. Pretty useful, information-rich site on a pretty small screen, really good use of real estate. Let's go back to the homepage. So that's the eBay mobile web site.
Let's now look at the CNN mobile site. Here I see my CNN homepage, and again, notice very clean simple use of graphics and fonts. I can scroll down, optimize for vertical scrolling. Let's go back to the top. So there is a section jump list right here at the top, so I can choose to jump to a particular section of the site. So let's click on that. And you can see that instead of implementing their own selection list inside the browser web page, they are using the built-in platform's select list control to display a list of options.
So this will look different on each smartphone that implements a select list. So I am going to go ahead and click on US, and you can see that once again the results page for that, links are properly spaced to minimize competition for hit targets. Good use of fonts, links are nice and large, easy to click on. Down at the bottom of the page, I have my Search list, and of course there is a link to the full site, should I decide to use it. So that's the CNN mobile web site. Let's move on now to Windows phone and take a look at some mobile sites on the Windows phone.
Now I'm on my Windows phone, and I'm looking at the Wikipedia mobile site. Right away you can see that the Wikipedia mobile site is fairly minimalist. There is very little use of graphics. It's very clean, no background colors. And you can see also right at the top here is the part that most people will use. That's the search box. And below that there are controls for taking me to the homepage and a somewhat whimsical feature for choosing a random article. Now, since most users will come here in order to use the search box to search for something, the Wikipedia site gets a little bit whimsical and just chooses a featured article for the day, and that's right here, and you can see that the site is optimized for vertical scrolling.
There is no side-to-side movement. And then as you scroll down you can see there is the In The News section, and then right down here at the bottom there is a link to use the Desktop version of Wikipedia. So let's scroll back up. Now, ordinarily I would use the search control to enter a search term, but instead I'll just go ahead and click on a term that's here on the page, and that link will take me to the article entry for that particular term here on Wikipedia. I happened to choose Barrister. And again, now you can see that this particular site is optimized for reading.
There is one font used in the page and a couple different point sizes. There is a point size for subheadings and headings and one for reading. You can also see that this is a lot of content. But even though it's a lot of content, it's spaced out correctly, and the page is clean, with nice crisp text, which makes it easier to read. So that's the Wikipedia site. Let's go ahead and take a look at another web site. Let's look at Ars Technica. Here is the Ars Technica web site. Ars Technica is also a news consumption site, but it's focused on technology-industry news.
So right here at the top you can see the logo along with the link to the full site, and then below that there are icons for various news categories that are more specific to areas of the technology industry. Below that, I've got my article summaries, and there is a nice big clickable link for the heading and a concise news summary for that article. And if we scroll down, you can see that this is optimized for vertical scrolling. So let's go ahead and click on one of those icons. I am going to click on the Business section, and that will take me to the Nusiness section of the Ars Technica site. And again, you can see now I've got some focused news here for that particular section.
I'll click on the article title and that takes me to the article. So this is the article layout for a news story on the Ars Technica site. It starts off with a graphic, and once again optimized for vertical scrolling. One font used on the page, one for reading and one for article heading. So let's scroll down a bit, and we can see it's optimized for vertical scrolling, and we come to an example of using a table in the web page for what tables were intended for. This is a table right here displaying tabular data.
Scroll down a little bit more and we can see some embedded graphics in the page. So that's Ars Technica and Wikipedia on my Windows phone. Let's move on now to the tablet form factor and take a look at how a mobile web site looks on a tablet. All right, so here I am on my Motorola Zoom tablet, and we are looking at the Target mobile site. So before I give you a tour of the mobile site for Target, I just want to point out that this is a pretty good example of why it is important to consider mobile device form factors in addition to the user's mobile usage scenario, simply because this is an opportunity to make a web site that works well on a slightly larger form factor than a phone screen.
You can see here that what Target is essentially doing is they are delivering the same mobile web experience they would for a phone form factor, but the screen size is slightly larger and can accommodate some more data. So there is an opportunity here to improve that experience a little bit. But let's just put that aside for a moment and go ahead and take a look at the functionality of the site on the tablet. So up at the top, there is very subtle usage of branding colors. There is the red target color, and there is also the search control, along with two links.
There is one for the shopping cart, and there is a logo up here to go back home with. And down below that there is links for various sections for shopping on the site, and then in the main page there is a link for the daily deal, along with a front-page ad. So let's go ahead and exercise the site a little bit. I am going to search for a store, so I am going to click on the Stores link. That gives me an opportunity to search based on my city and state or ZIP code, and I can also narrow the search to stores that only contain things like a grocery and pharmacy and so on.
So I am going to go ahead and tap there, and I am going to enter a ZIP code for San Francisco and you can see the results come back in distance order, the stores that are nearest to me. So I can click on one of these guys, and now I have the information for the stores nearest to me. And if I so choose, I click on a map, get a map to the store, and so on. Okay, so let's go back to the homepage. What I am going to do now is go ahead and click on that little daily deal icon, and when I do that we see a page that comes up that shows the daily deals for today, and over here at the top there is a little timer that shows you how long you have to buy these.
Let's go ahead and choose one, so I am going to choose the first one here for the shower curtain. And so here is the page for information about the particular product, and I can click on the image, and you can see that I get larger image of the item and click over here to see another image. All right, so let's go back to the item. I am back in the Item page, and you can see that I have certain features available to me. I can add it to my shopping cart. That's the main feature right there, so it's nice and prominently displayed. I can also do things like text or email details of the product to people that I know, or who might be interested in it.
Each one of these web sites exhibit a good set of design and development principles that we are going to examine in depth as we go through this course. We'll also apply these principles and techniques as we build our own mobile version of an existing web site.
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.