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

Using well-defined web standards

From: Mobile Web Design & Development Fundamentals

Video: Using well-defined web standards

One of the most effective ways to make sure that your mobile web pages will work correctly across a variety of mobile devices is to adhere to a baseline of well-defined web standards. Standards are of course important for any web-related project, but even more so on mobile due to the higher number of, and greater variance between, the web-capable devices that are in use today. A good place to start is to use some widely supported technologies for rendering web pages, such as XHTML 1.0 or HTML 4, along with CSS 2 and JavaScript 1.4.

Using well-defined web standards

One of the most effective ways to make sure that your mobile web pages will work correctly across a variety of mobile devices is to adhere to a baseline of well-defined web standards. Standards are of course important for any web-related project, but even more so on mobile due to the higher number of, and greater variance between, the web-capable devices that are in use today. A good place to start is to use some widely supported technologies for rendering web pages, such as XHTML 1.0 or HTML 4, along with CSS 2 and JavaScript 1.4.

These standards have been in place for several years, and many of today's web-capable phones and other mobile devices have good support for them. Some of them support older standards, such as WAP and WML, but those are rapidly being phased out in favor of standards that are more in line with the general web. Some mobile devices, usually the more recent smartphones and devices such as mobile tablets, support more advanced standards and specifications like CSS3, HTML5, and AJAX. You can use these within your mobile web pages too, as long as you know how to properly detect support for them and provide fallback options in the cases where they are not supported.

Generally speaking, you should try to use client-side script to detect support for particular features on a given mobile device before trying to use that feature. Up until recently, you would have to write such scripts yourself, but now there are some pretty good third-party tools available, such as modernizer, which is a JavaScript library that detects support for many different client features, and we'll take a deeper look at that later on in the course. Sometimes however, client-side feature detection isn't enough and your site needs to detect an incoming mobile device in order to redirect the user to a mobile-specific set of pages that you've created.

In cases such as this, your site should use server-side detection but only to detect general classes of mobile devices and not specific browsers, and only then to send the user to a mobile page instead of using this information to work around browser-specific bugs or issues. We'll examine how to go about that process later on in the course. There are some web standards available today that are particularly well suited for use on mobile devices. Perhaps the most important among these are the viewport, handheld friendly, and MobileOptimized META tags.

These tags are used to help the device's mobile browser determine how best to lay out the page on the device that it's being rendered on, and we'll see specific examples of these later. CSS media queries are another important web standard that is really useful on mobile devices. Media queries enable you to deliver specific style sheets to the browser based upon information such as the width of the screen, whether it can support color, and other useful properties. Later in the course, we'll see how to use media queries to build a web page that renders well on the desktop and on a mobile device.

Of course, HTML5 is an exciting and relevant topic and there are technologies in HTML5 that are also very useful on mobile devices. HTML5 local storage is one of them, and it allows your web pages to store data locally on the user's device without having to rely on cookies. And finally, there's geolocation, which allows your web pages--with the user's consent of course--to determine the physical location or area that they're being accessed from. The ability for web sites to determine their location is a great new development that only native apps have been able to do for some time now, and enables all kinds of potential location-based services.

By sticking to a baseline of widely accepted web standards while adding in more advanced functionality when the device supports it, you can build web applications that address a wide range of devices, while providing leading-edge features to users who have more highly capable mobile browsers.

Show transcript

This video is part of

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

46 video lessons · 24599 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.