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.
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.
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.