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.
So you download this and you include it in your web pages, and you can see it's about 42K. And once you've included it in your web pages, you can use it to check to see if certain technologies are present or not. And then when you are ready to go use it, you click on this right here, the PRODUCTION link, which allows you to customize Modernizr to just the tests that you need, so that you don't have to download a giant library and waste all that space with tests that you don't actually use.
So let's go ahead and click on the DOCUMENTATION link first, and you can see that the documentation for Modernizr is pretty extensive. And over here in the Table of Contents, we have some text that explains what Modernizr is, how you install it, and so on and so forth. I am going to click on this link right here, Features detected by Modernizr, and you can see it's broken to various categories. There is CSS3, HTML5, and Miscellaneous. So if I click on that link, we scroll down on the page to the part where it talks about what features that Modernizr detects.
So let's click the Back link. Essentially, what you need to do is download Modernizr. Let's go back to the Download page. Okay, so this is the Download page, and you can see that there is a link right here to the development version. Now what you are going to want to do is download the development version and save it to the root level of the Exercise Files folder, and the reason for that is because that is where the exercise files are expecting to find the Modernizr library. So once you've done that, you can follow along with me in my examples using the development version and then when you're ready to go production, you simply come back to this download page and then you click off the check boxes that represent the tests that you care about.
And once you've done that, you click the Generate button right here. The Generate button will then generate this custom-built version of Modernizr-- you can see the code right here. This is the version of Modernizr that will be downloaded for you and once you've done that, you can click on the Download button right here. It will download the custom-built version of Modernizr, and you can use it in your web pages. All right, the other tool that we are going to need to download is called HTML5 Mobile Boilerplate and that is this tab right here, and you can see that the address is html5boilerplate.com/mobile.
Mobile Boilerplate is essentially a collection of best practices for building mobile web pages. It's important to understand what Mobile Boilerplate is and what it is not. It is a simple template. It's a collection of best practices. It's not a framework that will make your web site magically work across thousands of mobile browsers. It's simply a collection of settings and page starting points that you can use to build mobile web pages that work well on modern smartphones.
So let's scroll down a bit. Okay, so just like in Modernizr, there is two versions that you can use. There's the development version, which contains all the documentation and all the information embedded in the file, or there's the Boilerplate "Stripped" version, which is the version that you would use in your production web site. So if we scroll down a little bit more, you can see the support that is currently provided by HTML5 Boilerplate for mobile and going from left to right, you can see over here, this is what looks like Opera, this one over here looks like it's Android, this one right here looks like it's iPhone and that's Windows Phone right there.
And you can see down here in this list there is a couple of other ones that are supported. There is webOS, there is Symbian, and so on. And if we scroll down a little bit, these are all the features that are supported by HTML5 Boilerplate for Mobile. So there are certain things like iOS start screen for full-screen mode. There is home screen icons that are provided. There is low-end device style sheets. All of this stuff is included with Boilerplate for Mobile. It really is a great library for providing a starting point for building mobile web pages, and it provides a lot of settings that you are going to find yourself using over and over again across multiple mobile browsers anyway.
Now later on in the course, we're going to have an individual movie that shows how to use html5boilerplate.com for mobile. What you're going to do is download this, save it somewhere, and then when we get to that movie, you'll see where I place the folder and what it is named, and again, that's where the examples that use this library expect to find it.
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.