Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Using HTML5 Boilerplate for mobile

From: Mobile Web Design & Development Fundamentals

Video: Using HTML5 Boilerplate for mobile

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.

Using HTML5 Boilerplate for mobile

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.

HTML5 Boilerplate is not a framework, or a magical way to get your site to automatically work great on thousands of different devices; it's just a starting point and a collection of best practices for you to build on top of. It provides both client-side code in the form of CSS, HTML, and JavaScript, and so on, and server-side settings that help your pages work well on modern mobile devices--and by modern mobile devices, I mean ones that support HTML5. It can be found at html5boilerplate.com/mobile.

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.

This is on by default in the newer versions. And they've included a link to the default style sheet. We will go back and look at that in a moment. There is an automatic include for modernizer, which is included with the HTML5 Boilerplate for Mobile download, so you don't have to go get it separately. So that completes the head section. Let's take a look at the body. They've included a default set of HTML5-ready structure for you to just plug your content into. There's the header section right here, there's a footer section, and here there is a section in the body for you to put your main content. And they've placed all the JavaScript at the bottom of the page for fast loading.

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.

Show transcript

This video is part of

Image for Mobile Web Design & Development Fundamentals
Mobile Web Design & Development Fundamentals

46 video lessons · 24375 viewers

Joe Marini
Author

 
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

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold
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.


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.

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

Your file was successfully uploaded.

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.