Mobile Web 1: Best Practices

Acclaimed course — read the latest feedback from our students!

“I have been using media queries for the last year but I have found this lesson pretty useful learning new things about good practices”

“The idea of designing for mobile first is completely changing my way of give structure and organize contents layout on the Web page”

Why attend?

The Mobile Web 1: Best Practices (formerly “Introduction to W3C Mobile Web Best Practices”) online course will help Web designers and content producers who are already familiar with the desktop world to become familiar with the Web as delivered on mobile devices. It is based entirely on W3C standards, particularly the Mobile Web Best Practices.

DURING THIS COURSE YOU WILL:

learn about and use the recommended versions of HTML and CSS to use for mobile today

understand the constraints of working on mobile and how to overcome them to deliver the best possible experience to the widest range of users

practice client side and server side content adaptation techniques

Course Outline

Getting Ready…

After registering and before the course begins you will have access to some preliminary materials that set out the challenges and opportunities of the mobile Web. You are strongly encouraged to try browsing on your mobile device and to introduce yourself to everyone in the group.

Week 1 – Coding for the Mobile Web

Web technologies and devices are evolving all the time. As a developer, you’re probably keen to use at least some of the latest HTML and CSS techniques, but which ones are supported by the devices in common usage? In this first week we explore the key idea of progressive enhancement: that is, using a safe set of core technologies and then using, but not relying, on further techniques.

The week ends with a practical assignment.

Week 2 – Basic Design Principles of a Mobile Web Page

This week focuses on the essential factors that lead to good layout for the small screen as opposed to desktop monitors. We’ll look at things like scrolling, images, navigation and the viewport (when is a pixel not a pixel!).

Again, there’s a practical assignment at the end of this week but it continues into week 3.

Week 3 – Using CSS to Adapt Styles to Different Viewports

This is an area where there has been significant change in only a few years. The original idea for client-side style adaptation have been replaced and improved so that now it’s possible to apply the same concept of progressive Web design as we introduced in week 1.

The assignment begun in week 2 is completed this week.

Week 4 – Using JavaScript to Enhance the User Experience

JavaScript is the key technology behind user interaction. In this module we look at a variety of best practices including checking for feature support, clean separation of script and HTML, use of JSON and the best way to manipulate the DOM.

Unsurprisingly, the week ends with an assignment that asks you to put what you’ve learned into practice.

Week 5 – Small is beautiful

This week helps you to understand more about the specific differences between the Web as accessed on desktop and mobile devices. We look at:

the limitations of mobile networks;

techniques for reducing the page weight (i.e. the amount of markup and number of external elements);

avoiding useless network usage;

the tools that are available to help you;

limitations imposed by battery life.

Week 5 is about the techniques you need to use to minimize the impact of these limitations. A short assignment asks you to put these techniques into practice by editing HTML and CSS.

Week 6 – Server-side Content Adaptation

You can achieve a great deal with client-side content adaptation but many applications need, or can be made more efficient, with server-side adaptation. This week we look at server side techniques for:

getting to know the requesting device;

lightweight mobile detection;

using a Device Description Repository;

content adaptation and caching.

Not all of these techniques require you to have access to the server configuration, although some are a lot easier if you do.

Rather than a practical assignment, the week ends with a quiz, but you’ll be able to put the techniques into practice directly before the end of the course.

How do I get a certificate of completion and a badge?

The course includes one quiz and four practical tutor-marked assignments (TMAs) that all need to be completed satisfactorily if you want to receive a certificate of completion and a badge*.

* What is a badge? A digital badge is an online representation of a skill you’ve earned. Using Mozilla’s Open Badges infrastructure, W3DevCampus issues badges backed by our own seal of approval. Learners can then collect badges from different W3C courses and display them across the Web — on their resumes, Web sites, social networking profiles, job sites and more. Create your backpack and start collecting badges from W3C Training.

Who should attend?

The course is for you if:

you already create Web content with a desktop presentation in mind and want to add to your skills by making it work well on mobile devices too;

you are able to understand basic JavaScript and recognise its importance although advanced proficiency is explicitly not required and the course does not require you to write any scripts;

you want to know more about the opportunities and challenges that the mobile channel presents;

This course is not for you if you are an experienced mobile Web developer looking for training in advanced techniques.

What do I need?

Ideally, as well as a desktop or laptop computer, you should have access to:

A Web-enabled mobile device with a suitable data plan. In the absence of this, it is possible to rely on emulators, however, an actual mobile device is a better option*.

A means to edit HTML and CSS.

At least basic image editing software.

Facilities for putting documents online. If you don’t have a Web server through which you can easily do this, we recommend you consider using one of the many free web hosting services available such as x10hosting and Free Web Hosting Area (there are many others to choose from too). These are limited accounts (they’re free!) but they should allow you sufficient flexibility to complete the course.

* If you have a choice of such devices, so much the better. State-of-the-art high-end devices are not the most suitable devices for use during the course as they give a user experience that is often substantially better than many of the mobile devices in use today.

Terms and Conditions

W3C will deliver the course in line with the published description for the advertised fee.

Payment must be made, in full, at the time of registration.

Payment is processed using either a credit card or a PayPal account.

Refunds will only be made if the participant withdraws up until the end of the first week of the online course.

W3C intends to continue to make the course material available to registered participants for at least 2 months after the course has ended.

All material, including that produced by participants, in assignments and correspondence is copyrighted property and cannot be copied, duplicated, posted on another Web site, or otherwise used without the original author’s consent. Conversations and posted messages are private and cannot be copied, duplicated, forwarded, or conveyed to anyone else without the original author’s permission.