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.
During the movie on setting up the development environment, one of the things I had you download was the HTML5 Boilerplate for Mobile Library. In this movie, we're going to see how to use this library as a starting point for creating mobile web pages. HTML5 Boilerplate for Mobile is a collection of best practices and a cross-browser starting point for building mobile-optimized web pages. These best practices have come from across the community and collected together by a couple of developers and published as a free, open-source project.
Let's take a look at the folder, and then we'll take a look at some of the code that it provides. So in your Example Files folder, in the 05_creating folder is where I've moved the folder that we downloaded for HTML5 Boilerplate for Mobile. So I've put it in here, and I've renamed it for simplicity's sake html5bm, rather than having to refer to it by its big long name. So I suggest you do that, and then once you've done that, let's go explore the folder. So inside the folder, you'll see a whole bunch of contents. There are folders here at the top, and there labeled all kinds of different things, some of which you're probably familiar with, like CSS, and JS, and so on.
You'll also see some files in here, and some of these might look familiar to you as well, like an htaccess file. This is a file that's used to configure Apache web servers. Here's a 404 file, which is a way of customizing 404 error pages. There's a crossdomain.xml file. This appcache file is used for offline web apps. There is a robots.txt file, which tells bots how to crawl your site, and there's an index.html file. So let's take a look at some of the code that HTML5 Boilerplate for Mobile provides for us as a starting point.
So I am going to go over into the code. Here in the code I've opened up the index.html file that is inside my HTML5 Boilerplate for Mobile folder. Let's go ahead and explore this file and see some of the things that it provides for us. So it starts off right at the top with a document type for HTML5, and you can see here that there are also some conditional comments to handle older versions of IEMobile on Windows Phone. So if there is a version number of 7 for IEMobile, it defines this HTML5 tag with a class for no-js and IEMobile 7; otherwise, it uses this HTML tag instead.
So I am going to scroll down a little bit. There is a default collection of tags. So for example, they include the character set tag, which is set to utf-8. There is an empty place for me to put a title. There are some meta tags for me to put description and author. They've already included the mobile viewport optimization stuff that we've talked about before, using the older tags as well as new Viewport tag. There is also a set of links included for the home screen icons on iPhones. In fact, if we go back and look at the folder really quick, you'll see that in here in the image folder they've provided default icons for Apple Touch Icon and Splash pages.
That's for high-resolution. Here is the low-resolution versions, and here is the medium-resolution version. So you can customize these if you're going to be using home screen icons on either iOS or Android devices. Scroll down a little bit more. They've included the meta tags that we looked at earlier for doing mobile web apps on iOS platforms. And it's commented out, so if you don't want to use it, you can just go ahead and delete it. They've included a tag that turns on ClearType Rendering in older versions of Windows Phone.
They grab the jQuery library from Google CDN by default, and if for some reason that doesn't work, there is a fallback here to load the local version of jQuery. There are also some helper scripts that they include which they have built for you, and it's automatically included here at the bottom, and then there is some code down here to fix some known bugs. There is an iPhone Scale bug that they automatically fix. There's a Media Query Polyfill. All the stuff is included for you, but if you don't want it, you can just go ahead and delete it. Then down here they have the Google Analytics code included for you by default.
What you can do is change this into whatever your Google Analytics code is if you happen to use it. If you don't want to use it, you can just delete it. Let's go back up and look at the CSS style sheets. I'm going to scroll back up here, and we'll open the CSS file. This is the style.css file that's also included with the mobile boilerplate. So in the mobile boilerplate they provide a whole bunch of CSS defaults for you to use that are known and have been tested in the community to produce pretty good-looking web pages on mobile devices.
So they start right off with a Reset Stylesheet and this is the Reset Stylesheet that's come from HTML5 Doctor, and it's based on Eric Meyer's Reset Reload. And you can see that they have a whole bunch of resets for pretty well-known HTML elements, and that just continues down here. This is basically just setting up the styles to look good on mobile devices, and you can tweak any of this to fit your own needs. If we scroll down a little bit more, you can see that they've got some other interesting tags in here. These CSS styles right here, -webkit- text-size-adjust and -ms-text-size-adjust, prevent the mobile browsers from zooming text when viewed on mobile devices while retaining the ability to zoom text on desktop devices.
So, sometimes mobile browsers will try to be intelligent and make text look better and more readable on desktop web sites when they're loaded in a small screen. This tag right here basically prevents that from happening. Usually, what you'll do is you'll set up font sizes on your own and you'll tweak them till they look good, and you don't want the mobile browsers to go messing with your text sizes, so that's what this tag does right here. If we scroll down a little bit more, we can see some other styles being defined for navigation and some other stuff here, like superscript and subscript.
This right here, this textarea, the overflow is auto. This prevents scrollbars from showing up on IE when the content overflows the text area. This code right here automatically aligns text inputs with their labels, so that's all done for you. And if we scroll down a little bit here, this code right here sets the text selection color, so when the user selects texts, this is the color it's going to show up in. You can customize that to your heart's delight. If we go down here, now we get into to the section where they're defining default colors and sizes for things like headers and links and body text, and this is an area where you might want to make some changes, and that's up to you.
And if we scroll down a little bit more, we can see that there is a whole bunch of more styles that they're setting based upon some well-known workarounds and practices the industry has pulled together. And in many cases you can see that they're including links. So if you want to read more about why that CSS was put there or what it does, you can go read more about it by following that link. So we can see another example of that right here. So they've done a pretty good job of commenting the file to explain why this works. What we're going to do now is just take the starting point they've given to us and build a really quick index page and try it out.
So, I am going to go ahead and open up the file. So I've opened up my index_joe file, which I've based off the index file that was given to me by Boilerplate for Mobile, and if we scroll down, can see that I've done some editing on this. So I've commented out, or cut out entirely, some of the header stuff that I didn't need. So I took out the Apple mobile-web-app capable stuff. I've put in my own local stylesheet.
I cut out some of the other stuff, like I had cut out the jQuery loading from Google CDN. I am just going to use the local version right here. And if we scroll down a little bit, you'll see I also cut out the Google Analytics code. I cut out the iPhone Scale Bug Fix code. I didn't really want any of that. I just wanted a simple web page to test out the Boilerplate template. So what I am going to do now is scroll back up, and I am going to give this a title. I am going to call it Joe's Titles, and if we scroll back down, you can see that what I've done is I've used the structure that was provided for me in HTML5 Boilerplate for Mobile just to fill out some information in a simple web page, and this web page just lists some of the titles that I've published here so far at lynda.com.
So I've put in a title in the header section, I've put some text in the footer section, and I've just put a simple list here in the main body. So I am going to save this, and I am going to copy it up to our web server. So let's copy the file to the web server, and I am going to go in here and I am going to take this and copy it into my HTML5 Boilerplate for Mobile folder. Now, let's go look at it in the emulators. So let's start off in the Android emulator, and I am going to rename this right here. I'm going to make that index_joe.
So that's going to load. You can see when it loaded I get a pretty nice-looking page, very nice and clean. You can see that the default favorite icon is showing up here in the title bar. Let's see how it looks in Opera. Same thing. And let's see this in Windows Phone as well. So you can see that just by using the HTML5 Boilerplate for Mobile library and using some of the files that they give you as a default, just by filling out some content I get a pretty nice-looking web page across a variety of mobile browsers.
You can use HTML5 Boilerplate for Mobile for new pages. You can take existing content and fit it into the template. You can edit the template any way you want to. It's just a nice little starting point that collects a variety of best practices that have been gathered from across the industry and puts them in a template form that you can use for your own projects.
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.