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

Mobile Web Design & Development Fundamentals

Exploring useful mobile web development resources


From:

Mobile Web Design & Development Fundamentals

with Joe Marini

Video: Exploring useful mobile web development resources

There are some really good mobile-web-related development resources that I use all the time when building mobile web pages, and in this movie I would like to share some of my favorite ones with you, so that you can refer to them during your projects. Now here in the ExampleSnippets file I have provided links to the resources that I use, and I have grouped them according to a couple of genres. So the first set of links are links that you will refer to as references; the second one has to do with standards around HTML5 and related web applications; and in the last group here are resources that are provided by the various mobile browser vendors, such as Apple, Google, Microsoft, and so on.
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

Exploring useful mobile web development resources

There are some really good mobile-web-related development resources that I use all the time when building mobile web pages, and in this movie I would like to share some of my favorite ones with you, so that you can refer to them during your projects. Now here in the ExampleSnippets file I have provided links to the resources that I use, and I have grouped them according to a couple of genres. So the first set of links are links that you will refer to as references; the second one has to do with standards around HTML5 and related web applications; and in the last group here are resources that are provided by the various mobile browser vendors, such as Apple, Google, Microsoft, and so on.

So let's go ahead and take a look at each of these resources, starting with the ones at the top. Okay, so this is the Mobile Web Best Practices specification, and the W3C set down came up with this a couple years ago. And essentially, what it is is a list of best practices to follow when you're developing your web apps. And if we scroll down here you can see here the Table of Contents, and the specification is built using some pretty standard W3C boilerplate that you can skip.

Let's just go ahead and jump down to the Structure of Best Practice statements. So this shows you how each best practice is organized. There is The Heading and what the statements are, and each best practice is highlighted in a blue box like this one. The next section explains what the best practice means, how to do it, and then what to test for. So let's actually scroll down to some of the best practices and you can see that the best practices are organized under a couple of different sections. There is Overall Behavior, Navigation, so on so forth.

So let's go ahead and scroll down to one of my favorite ones. I am going to go back to the Table of Contents here. I am going to jump right down to Style Sheets. So for example, this is the best practice around style sheets, and you can see that there are three of them. The first one says, "Use style sheets to control layout and presentation, unless of course the device is known not to support them." The next one says, "Organize documents so that if necessary they can be read without style sheets," and, "Keep style sheet small." Then there is a good explanation of what it means. Obviously, you should use style sheets rather than embedding stuff directly in your code, so on and so forth, and then how to do it and then what to test for.

So follow these best practices and you will be able to create mobile web pages that will work across a variety of devices. All right! Let's take a look at the next resource that I refer to. This one is the mobile developer table of contents that is put out by the guy who does Quirksmode. His name is Peter-Paul Koch, and he maintains a list of tests of various capabilities across smartphones, and he's got a pretty good list of tests that he does here on his web site.

And if you are a web developer you're probably already familiar with the Quirksmode site for desktop browsers, but he's gotten more and more into mobile lately. So for example, we can take a look at the Touch action compatibility table, and it's organized in a table that looks like this, so basically each one of these is the browser and then there's a related section of capability over here, and then there is color-coded boxes that show you whether or not that browser supports a particular feature.

So you can see, if you scroll through here, there is no different support. This is covering touch events. He has got other stuff on here as well. There's a table that compares the various WebKit browsers across all the known phones, because each phone manufacturer has a slightly different version of WebKit. So anyway, this is a really great resource to refer to when you want to know if a browser supports a certain capability. Okay. The next site I am going to show you is called User Agent String. User Agent String has a list of known user agents across many, many, many different browsers--not just desktop and mobile, but all kinds of browsers.

When you go to the User Agent String web site, it'll show you what the current user agent string for your browser is, but that's not really what's interesting. What's interesting is this list right here. So this list of user agent strings shows you all the browsers that this site has measured user agents for. And I am just going to scroll on down to the MOBILE BROWSERS section right here. So the MOBILE BROWSERS section contains known user agent strings for mobile browsers, and this is important, as you will see later on in the course, especially when we use this in the section for testing mobile web sites on desktop browsers.

This is a great resource to come to when you want to test the layout for how a certain web site is going to respond when a browser such as Blazer or Blackberry hits the server. You simply click on one of these guys-- so I will just click Blackberry right here--and you can see that when I click on Blackberry I get a whole list of user agent strings that correspond to known user agents that Blackberry-based devices send out. So I can just copy one of these and use it in my user agent detection logic. Okay.

Let's move on to the next group of sites. I am going to start off taking a look at the HTML5 specification, HTML5 obviously becoming a very important specification for web development--not just on desktop, but on mobile too. And this is maintained by the W3C. And this is the same HTML5 specification that you would use on desktop development, but it contains a whole bunch of useful information about mobile development as well. So this is the spec that I find myself referring to over and over again especially for things around form input types, working with offline web applications, local storage, that kind of stuff, and in fact I have actually called out those individual specifications right here.

So for example, Geolocation, obviously a very exciting technology for mobile, because Geolocation helps you determine where a device is on the planet. And in fact, we will see an example of this later in the course. So this Geolocation specification, also maintained by the W3C, and I've provided the link here, so you can read it yourself. Another one of course, Web Storage. Web Storage helps you maintain offline data in a mobile web application. It works on both desktop and mobile, but it's extremely useful for mobile because it allows you to store data without using cookies. And again, we'll see an example of that later.

And then of course there's offline web applications, and it is maintained by the whatwg, and I have got the link up here. Now offline web applications help you build web apps that work even when the web site is not connected to the Internet, and that's really useful for mobile devices because mobile devices sometimes have connectivity and sometimes they don't. So I am not going to cover this in this course because Bill Weinman already covered this in his course on HTML5 Local Storage here on the lynda.com web site.

So I'll refer you to his excellent course instead of covering that information here. Let's take a look at the vendor-specific sites. Okay, starting with Mobile Safari. This is the Getting Started with iOS Web Apps section on the Safari Developer Library, and again I have got the link right up here, and it's in the snippets file. And you can see, as we scroll down, there is a Start Here section, and there's a whole bunch of useful information in here like Optimizing Web Content, and this shows you how to get web content optimized for mobile devices.

And if we go back, there is a section on Configuring Web Applications, and we'll take a look at this later on in the course as well, when we get to that section. And if go back here, you see that there's a whole section here on the Safari HTML reference, the Safari CSS reference, and so on. So this is a really good site to refer to when you're building web applications on iOS devices such as the iPhoto and iPad. Next site is for Android, and Android, also from Google, has a Web Apps Overview section, and I have provided the link.

And this is pretty similar to the Safari version. It just shows you how to target screens for web apps, how to debug them, some best practices. And as you might expect, this site covers the best practices for the Android browser. And let's move on now to the IE 9 tab. This is the Internet Explorer 9 Guide for Developers, and this particular web site has information that applies both to the desktop and mobile versions of IE 9 on Windows phone.

And in addition to this particular web site, there is a PDF file that Microsoft has produced--and let me just bring that up so you can see it. That's this file right here, Designing Web Sites for Phone Browsers, and I have included the link to this in the snippets file. And if we scroll down, you can see that there's a whole bunch of information that's specific to designing web sites for browsers on the phone. And a lot of this information is actually not IE specific-- there are just some best practices in here-- although there is information about IE contained in this document as well.

That's pretty useful. So let's go back to the browser. Mozilla also makes a mobile browser, and it's called Fennec, and this is the link to their information page. And you can see here, if we scroll down there, is a section about the Fennec project, there is a Mobile Wiki that you can refer to for questions, and information about developing for the mobile browser made by Mozilla. The last one we are going to look at is the Opera site. Of course, Opera also makes a mobile browser, and this is the section on their site that's dedicated to mobile.

And as you might expect, there's a whole bunch of information in here dedicated to Opera mobile and mobile web development in particular. Okay, so using these resources you can really find out a lot of information about developing for mobile devices. I refer to these sections all the time when I am building mobile web sites because there's a whole wealth of information here about not only targeting specific browsers, but best practices to follow when you're building mobile web sites.

There are currently no FAQs about Mobile Web Design & Development Fundamentals.

Share a link to this course
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

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
Welcome to the redesigned course page.

We’ve moved some things around, and now you can



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.

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