Mobile Web Design Training

Users already expect websites to work well on mobiles, and it will soon be an imperative for ALL websites to deliver content well on mobiles. If you don't update to support mobile, you will lose business.

There are over ten different mobile operating systems using over 15 types of browser running on innumerable devices, all with different screen sizes and orientations.

This 1-day Mobile Web Design Course provides a comprehensive introduction to creating and styling mobile web content that is adaptable for all devices and all of your users.

The Mobile Web Design training course is aimed at web designers with existing HTML and CSS experience. However it also forms part of our Mobile Web Design Week package deal...

The Mobile Web Week is a comprehensive 5-day mobile web design course package, incorporating:

• HTML5 Training - 1 Day
• CSS3 Training - 1 Day
• Mobile Web Design Training (this course!) - 1-day
• JavaScript Training - 2 days

We also provide private and in-company Mobile Web Design courses. Call +44 (0) 1273 622272 to discuss.

Mobile Web Design Training Objectives

After this Mobile Web Design Course delegates will have:

• An overview of the current mobile market, mobile devices and mobile browsers 
• Practical knowledge of techniques for styling and delivering mobile device stylesheets
• Knowledge of tools and resources for mobile device design

Read More About Mobile Web Design on our Blog:

• Mobile Web Design: What Developers Need to Know
• Native Apps vs Web Apps: The Rise of HTML5

Download the full Mobile Web Design Course Outline

Mobile Web Design Course Content

Introduction

• Mobile market overview: platforms and browsers
• Browser support 

What phones/devices?

• Smartphones
• iPads and tablets
• Older phones

Getting started

• How mobile devices display web pages
• Progressive Enhancement: different devices, different features
• Media queries and media types
• Responsive web design
• Markup and validation

Scaling the Viewport

• Common screen sizes
• Screen resolution: CSS pixels vs device pixels
• Orientation: landscape and portrait mode
• Units of measurement
• White space 
• Linearizing the layout
• Fluid and background images
• Font sizes, faces and spacing
• Spacing links

Content

• Simplifying content
• Providing an option to view the whole site

Know your Audience

• Targeting specific devices
• Specifications: providing a list of devices you’ll test in
• Plugins, Scripting and Apps
• Native vs web apps – a brief mention
• JavaScript
• JavaScript support for non-supporting browsers
• Flash
• Video and audio

Touch Devices

• Touch events
• Zooming, sliding and scrolling
• Integrating with other services: email, Google maps, making a call from a link

Delivering the page

• User agent detection
• Mobile-specific domains
• MIME types
• Delivery speed

Useful tools

Test, test, test!

• Creating a suite of representative phones 
• Browsers
• Test services
• Online and offline emulators