Mobile Web Design

Overview

This course explains how to create mobile web pages from scratch using different techniques, such as HTML5, CSS3 and Javascript. After completing our mobile web design courses you would be able to create HTML websites yourself. The complete course is hands-on based. A practical mobile web design project at the end of the course will ensure that you go through mobile website creation process by planning, creating structure, coding, using different mobile web design software, buying you mobile website a domain name, hosting and uploading mobile website to a live server.

This short mobile course is hands-on, instructor-led and classroom based. This training can be taken as a part-time evening course or even on the weekends.

Who is it for?

This course is for you if you are interested in creating or maintaining mobile website for yourself or for others. This course also helps business owners to get more control and insight into their mobile website.

Description

Mobile Web Design Course Contents Mobile website for different devices

• Apple iPhone iOS
• Google Android
• RIM BlackBerry
• Windows Mobile
• Nokia Symbian
• Palm web OS

Search Engine Optimisation for Mobile websites

• What to consider for mobile phone SEO

Detection

• Device detection scripts
• Detecting mobile device
• Creating different version of a site

Viewport

• Colour and Screen size
• Screen resolution
• CSS pixels vs device pixels
• Colour depth
• Orientation: landscape and portrait mode
• White space
• Fluid and background images
• Font sizes, faces and spacing
• Spacing links

Mobile Browser Capabilities

• Detecting orientation changes
• Detecting device movement
• Using touch events

W3C best practices for mobile websites

• W3C guidelines

Mobile Forms

• Creating forms on mobile website

Use of HTML5 in Mobile web design

• Add e-mail
• Control web addresses
• Date pickers
• Add a map
• Add directions
• Autofocus fields
• Add a phone number
• Display a keyboard

Use of CSS3 in Mobile web design

• Applying a Cascading Style Sheet to mobile web page
• The native user interface and CSS3
• Selecting style sheets based on device orientation
• Manipulating layout dynamically with transitions and animations
• CSS3 extensions for mobile
• Mapping phone wiewports to style sheets
• Text-size-adjust for enhancing text readability
• Tap-highlight-colour for touch content

Website design for tablets

• Difference between Mobile Phone and tablet UI
• Create website that works on tablets as well.
• Create tablet style two column views

Adding Images to mobile site

• Sizing and optimising images for small screens
• Image formats
• Maximising screen real estate with jQuery Carousel

Adding videos to your mobile web site

• Video formats for mobile website
• Creating video suitable mobile phone bandwidth
• Hosting mobile video on YouTube
• Inserting video hosted on your server into a mobile Web page
• HTML5 video element
• Activating video content from JavaScript

JavaScript in Mobile websites

• The use of JavaScript
• Employing Modernizr library

Geolocation on mobile websites

• Determining device position
• Determining device location with GPS

Local storage

• Saving data onto the device
• Managing locally stored data

Working offline

• Enabling disconnected Web applications
• Detecting network status
• Synchronising offline data to enterprise databases

Integrate with Mobile phone native extensions

Integrate your mobile website with Address Book
Integration with native Maps
Integration with Accelerometer.
use of camera
use of compass
Integration with home screen
Using and hiding the standard browser UI
Using PhoneGap to accessing native mobile hardware

Testing Mobile Web Sites

Installing device emulators
Downloading SDKs
Adobe’s Device Central
Downloading Modernizr and Mobile HTML5 Boilerplate
Desktop browsers for mobile website design
Testing Your Site Code with the W3C Tools Mobile Domain Purchasing a mobile domain
Using a mobile sub-domain Publishing your mobile web site Things to consider before publishing
Tools required for publishing Steps to work on a mobile website project Creating wireframes
Convert wireframes into HTML5 and CSS3 coding
Test mobile website
Publish Mobile website