New Feature: Playlist Center! Pick a topic and let our playlists guide the way.

Start learning with our library of video tutorials taught by experts. Get started

Mobile Web Design & Development Fundamentals
Illustration by

A survey of mobile sites


From:

Mobile Web Design & Development Fundamentals

with Joe Marini

Video: A survey of mobile sites

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.
Expand all | Collapse all
  1. 2m 48s
    1. Welcome
      1m 2s
    2. Using the exercise files
      1m 46s
  2. 29m 25s
    1. Understanding the mobile context
      8m 5s
    2. A survey of mobile sites
      11m 44s
    3. Targeting mobile browsers
      4m 31s
    4. Previewing a complete mobile site
      5m 5s
  3. 27m 20s
    1. Designing for one web
      3m 43s
    2. Using well-defined web standards
      3m 45s
    3. Designing mobile-friendly pages
      3m 40s
    4. Being crisp, clean, and succinct
      5m 45s
    5. Minimizing input where possible
      6m 47s
    6. Focusing on the core scenarios
      3m 40s
  4. 1h 13m
    1. Installing the tools
      3m 52s
    2. Setting up a local web server
      9m 13s
    3. Installing device emulators
      17m 5s
    4. Using device emulators
      13m 9s
    5. Downloading Modernizr and Mobile Boilerplate
      6m 22s
    6. Building a first mobile web page
      5m 43s
    7. Developing mobile pages with desktop browsers
      8m 6s
    8. Exploring useful mobile web development resources
      10m 23s
  5. 53m 26s
    1. Reviewing mobile markup languages
      5m 10s
    2. Understanding content adaptation approaches
      10m 32s
    3. Controlling the viewport layout
      12m 50s
    4. Designing forms
      13m 30s
    5. Using CSS media queries
      11m 24s
  6. 1h 11m
    1. Detecting client capabilities with script
      10m 8s
    2. Caching information with local storage
      9m 16s
    3. Determining position with geolocation
      12m 52s
    4. Minimizing HTTP requests with data URLs
      7m 39s
    5. Understanding user agent detection
      9m 8s
    6. Using server-side detection with PHP
      6m 52s
    7. Using server-side detection with ASP.NET
      4m 54s
    8. Using HTML5 Boilerplate for mobile
      11m 6s
  7. 39m 22s
    1. Measuring performance
      7m 41s
    2. Creating full-screen web apps
      6m 30s
    3. Customizing the user interface
      5m 14s
    4. Detecting orientation changes
      3m 58s
    5. Detecting device movement
      5m 21s
    6. Using touch events
      10m 38s
  8. 47m 14s
    1. Taking a look at the finished site
      7m 40s
    2. Examining the header and background image style on the Home page
      10m 10s
    3. Examining the hover effect and layout styles on the Tours page
      6m 42s
    4. Examining mobile forms on the Contact page
      9m 45s
    5. Viewing and testing the mobile site on emulators
      8m 11s
    6. Viewing the site on devices
      4m 46s
  9. 2m 34s
    1. Goodbye
      2m 34s

Watch this entire course now—plus get access to every course in the library. Each course includes high-quality videos taught by expert instructors.

Become a member
please wait ...
Mobile Web Design & Development Fundamentals
5h 47m Beginner Jul 20, 2011

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.

Topics include:
  • Implementing well-defined web standards
  • Working with Modernizr and Mobile Boilerplate
  • Building a first mobile web page
  • Understanding content adaptation strategies
  • Designing forms for mobile
  • Detecting client capabilities with script
  • Using server-side detection with PHP and ASP.NET
  • Working with mobile browser capabilities
  • Viewing and testing the mobile site on device emulators
Subjects:
Developer Web Web Foundations Mobile Web
Software:
HTML
Author:
Joe Marini

A survey of mobile sites

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.

 
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.
Upgrade now


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

join now Upgrade now

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed Mobile Web Design & Development Fundamentals.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

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.

Are you sure you want to delete this note?

No

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.