Mobile Web Applications/Ch01

Chapter 1: Building a mobile web page with HTML5

Chapter Author: Peter Rawsthorne

Criteria: for building a mobile web page

Evidence: showing your ability to build a mobile web page

Section 1. Building a Mobile Web Page

During this lesson we will be building a mobile web page using HTML5, CSS and JavaScript. These three technologies we will be used for displaying the user view of the web page. In this first example we will display the available screen size and UserAgent of the current device.

The Challenge

The challenge within this lesson is to get the web page to display correctly in each different device. This rendering for each device will be done without any special coding beyond using standard HTML5 and CSS.

A simple HTML5 page

The displayed web page follows the HTML5 syntax and keeps the same content within the web page regardless of viewing device. The assigned cascading style sheet layout is determined by new HTML5 features. The two images below show the same page displayed in two different devices. The difference between the two displays is the desktop browser has margins of 160px where the mobile device has margins of 5px.

displayed in desktop browser

displayed in mobile device

The code

The HTML5 and JavaScript within the web page is very bare bones and only the tags necessary are included. The CSS is contained in two different files each utilized depending on which device is accessing the web page. HTML5 has features for using different style sheet depending on what size of screen is accessing the website.

The HTML5, CSS and JavaScript

What's changed with HTML5

!DOCTYPE only requires 'html' to be entered
<link> tag has been extended

What's new within the HTML5

meta tag name="viewport" allows the screen size to be set or determined. It can be set to an absolute value (ie. 600px) or the preferred device-width set by the manufacturer can be utilized. Setting the viewport is important for the subsequent application of the style sheet. Using the manufacturer preferred width can also be useful as devices often have optimum screen sizes and this also sets the screen size to remain constant in situation where the device allows zooming. Keep in mind zooming can be quite annoying (particularly when zooming out) as the screen size may grow and assign a different style sheet.
the <link> tag has the addition of media queries, "media="only screen and (min-width:0px) and (max-width:399px)". This addition allows a different style sheet to be assigned depending on the screen size. There are many features to media queries and it is best to review these features in resources already written. http://www.w3.org/TR/css3-mediaqueries/

pseudocode

Rendered the web page in a similar way as previous versions of HTML.
Set the name="viewport" meta tag to the desired screen size.
Add the media= media queries to provide the ability to load different CCS depending on the screen size (mobile device).
Display the screen height, width and useragent
Alter the default margins from 160px for the default screen size (desktop browsers) to 5px for screen size < 400px (smartphones).

device.html

<!DOCTYPE html>
<head>
<title>Device Attributes</title>

<!-- meta tags -->
<meta name="viewport" content="width=device-width">

<!-- stylesheets -->
<link rel="stylesheet" href="/css/default.css" type="text/css">
<!-- phone -->
<link rel="stylesheet" href="/css/phone.css" type="text/css" media="only screen and (min-width:0px) and (max-width:399px)">

</head>
<body>

<h1>Device Attributes</h1>

<script type="text/javascript">
  document.write("<h2>" + screen.availHeight + " x " + screen.availWidth + "</h2>");
  document.write("<b>UserAgent:</b><br>" + navigator.userAgent.toLowerCase());
</script>

</body>
</html>

default.css

body {
	width: auto;
	margin-right: 160px;
	margin-left: 160px;
}

phone.css

body {
	width: auto;
	margin-right: 5px;
	margin-left: 5px;
}

source code

http://books.bit.bc.ca/mwa/ch01/intro/

Summary

In this lesson we have explored the two new HTML5 features that allow a different style sheet to be assigned depending on the size of the devices screen. It is important to both set the screen size using the meta tag "name=viewport" and set the style sheet depending on the screen size. The <link> attribute of "media=" allows for the different style sheet assignment.

Project 1: Mobile Web Page

Build your own web page and use the correct HTML5 tags to utilize different cascading style sheets depending upon which device is accessing the page. Remember the key is with using both the viewport and media queries.

Business Value

The business value is it enables the page content to remain the same regardless of device (and screen size). Over the long term this will save money and allow you to display existing content to new devices and screen sizes with very little effort.

Test your understanding

Please take this quiz

Section 2. How cascading style sheets work

A strong understanding of Cascading Style Sheets is important when developing mobile, aesthetically pleasing and media rich web sites. Style sheets provide the ability to set and change the web sites style through global attributes. Explaining Cascading Style Sheets (CSS) is hard. They are a very important part of web development, yet as a basic concept, there isn't a good analogy to ground the concept into non-computer science language. CSS are about immediately changing the look of something without changing the underlying elements that it was created upon. One analogy that works fairly well is the idea of a skin. Changing a skin over an existing item, leaves the underlying item the same while changing the way it looks. The word skin has become the standard way of describing the assignment of different CSS to the underlying web page or web site.

The above description of assigning different CSS files to a web page or site to change its look has become common practice. Having multiple CSS files assigned depending on context is a practice used extensively with formatting web pages for different mobile devices (particularly with HTML5). CSS can also be used the other way, where there is one CSS assigned across all web pages of a web site. This single CSS file approach allows making style changes across the whole site by only altering the single CSS file.

So far we have looked at two scenarios when using CSS. First, changing the CSS file based on some external factor, like a mobile device. Second, having one CSS span all HTML files within a website. Either way the CSS provides a skin or look for a web page or web site. Both approaches have their benefits, most often both scenarios are used together. Some CSS elements should be global, regardless of external factor. Where some CSS elements should change. The mobile device serves as a good context for when both approaches should be used together. There are elements that you may want to be global across all devices, like font or background colour. And other elements that should change for each device, like number of columns or the right and left margins. In this situation you could have one CSS file for global elements and CSS files for each different device type.

The Challenge

The challenge of this lesson is to organize and build a collection of Cascading Style Sheets (CSS) to accommodate for three different devices while keeping the global look or branding of the site consistent. The files should be organized in a way where branding changes will automatically cascade through-out the site and across all devices.

one global and two mobile style sheets

When building out the style sheets, one should be used as the global style sheet that defines all the global attributes of the site. Things like fonts, background color, bullet styles, etc... The other style sheets should be specific to the device where the font size may be smaller or the borders narrower. All the HTML pages should first reference the default style sheet, and changes for each device should be in subsequent style sheets. Remember tags in the style sheets are overridden. So if an attribute is defined in both the default and device style sheet the last loaded instance of the style will be the active instance. In the following code the the default.css would be loaded first and any duplicate tags found in either the desktop.css or phone.css would override the tags in the default.css.

<link rel="stylesheet" href="default.css" type="text/css">
<link rel="stylesheet" href="desktop.css" type="text/css">
<link rel="stylesheet" href="phone.css" type="text/css" media="only screen and (min-width:0px) and (max-width:399px)">

the code

Some very basic css to serve an example. the default.css defines the width of the page as automatically sized and the font from three possible families. The desktop page would be rendered with 160px margins where the phone page would be rendered with 5px margins and a smaller image. Note: just resizing an image with a % may not be the best approach for mobile, as the same image is downloaded just rendered smaller. This may have an unnecessary bandwidth cost.

default.css

body {
	width: auto;
	font-family: arial, helvetica, sans-serif;
}

desktop.css

body {
	margin-right: 160px;
	margin-left: 160px;
}

phone.css

body {
	margin-right: 5px;
	margin-left: 5px;
}

img {
	height: 30%;
	width: 30%;
}

Summary

In this section we explored how to organize css style sheets. The main point is some css tags should be global to the whole site where others tags are device specific. Organizing in this manner will ease changes to the site.

Project 2: Cascading Style Sheets

Create three different css files and link to them in an HTML page. I suggest the different css are assigned based on screen size. Change some of the attributes in the different css files. Play around, have fun...

Business Value

having well organized css files will lessen site maintenance effort and allow for global and device based style changes. In the end a well organized site save maintenance costs and allows for greater nimbleness.

Test your understanding

Please take this quiz

	True.
	False.

	Algorithms for scaling images by % use considerable CPU time and should be reduced for mobile devices.
	Server side caching for images to be displayed on mobile devices cannot be larger than 1 MB in size.
	When developing for mobile you should reduce the bandwidth used by full sized images by creating smaller image files.
	The mobile networks that support mobile devices have less data storage capacity. Reduced image file sizes is a requirement of mobile web applications.

	True.
	False.

Section 3. Viewing pages without mobile devices

During this module we will create an approach to viewing a mobile web page (with desired CSS formatting) without using an actual mobile device. This is important because there are three main targets for the web pages; phones, tablets and desktops. There is considerable effort in creating the HTML, CSS and JavaScript for the different devices and to have a simple way to "toggle" between the different looks from within a desktop browser will ease software development. Once a web page is in its different formats (phone, tablet, desktop), has been successfully tested within the desktop browser it can then be tested on the target devices, this should be an iterative process.

The Challenge

The challenge of this lesson is to create a simple way to "toggle" between the different style sheets to be applied for the different mobile devices. This "toggling" needs to be implemented in a way that does not impact the HTML and CSS. The files used to implement the final web site need to be left untouched so the testing approach can be easily executed across all the sites website without having to alter the files in preparation for the final release.

Swapping the style sheets (CSS)

Using the URL with some parameters is a very effective way to pass information into a web page as it is loading. The parameters put onto the URL are known as the Query String. To swap the Cascading Style Sheet (CSS) I have added a simple JavaScript to the head of the web page that looks at the parameters and swaps the CSS. The web page will also load normally without having a parameter appended to the URL. All this will be described in greater detail as we explore the actual html, css and javascript. For simplicity the main differences between the three pages is the number of columns being displayed.

page loading with desktop style sheet

http://www.bit.bc.ca/dev/device.html?device=desktop&width=1200

The parameter "device=desktop" was added to force the loading of the desktop.css.

page loading with tablet style sheet

http://www.bit.bc.ca/dev/device.html?device=tablet&width=800

The parameter "device=tablet" was added to force the loading of the tablet.css.

page loading with phone style sheet

http://www.bit.bc.ca/dev/device.html?device=phone&width=320

The parameter "device=phone" was added to force the loading of the phone.css.

thoughts on screen size

Given these three previous screen shots it becomes apparent that with mobile devices in the mix we are dealing with a screen sizes between 320 pixels (smartphones) and over 1600 pixels (desktops). And to have consistency of screen sizes across the different devices is difficult to achieve for people set their screen sizes based on their needs, this is particularly true in the tablet arena where people may set their device to be anywhere between 600 and 1400 pixels wide (and this is will increase). At the edges of screen / device size it becomes easier to make decisions about user interface design. A small screen mobile device where the interface is less than 400 pixels managing the content on the screen is more set, this is the same with larger screen sizes as the space is relatively vast. It is the medium sized screens on the different devices where the challenge presents itself. A tablet where the manufacturer designed the device for a 800 pixel wide display and the user sets it to 960 for they have really good eyesight. How should the content be displayed? In the above example if the screen was less than 400 pixels the content was displayed in a single column, if the screen was less than 800 pixels the content was displayed in two columns, and above 800 pixels three columns were displayed. So deciding on content layout is more dependent on the set screen size than the device.

The code

The HTML5 and JavaScript within the web page is very bare bones and only the tags necessary are included. The CSS is contained in three different files each utilized depending on which screen size is accessing the web page. Some new HTML5 features have been utilized to introduce these features and to better organize the web page. These will be explained later.

The HTML5, CSS and JavaScript

What's changed from the previous lesson

<meta name="viewport" content="width=device-width user-scalable=no initial-scale=1.0">

Additional parameters have been utilized with the viewport meta tag. These are to set the mobile device to remain a consistent size. Devices that allow zooming can be problematic on the smaller to mid-size devices.

What's new within this lesson

The new HTML5 tags of <header> and <section> were added to the HTML page. This organizes the content and simplifies managing the CSS assigned to different areas of the screen.
A block of JavaScript to gather parameters from the QueryString and change the assigned style sheet and screen size.
Styles for the different screen sizes, with a focus on creating columns in the web page.

pseudocode

Rendered the web page in a similar way as previous versions of HTML.
Add attributes to the name="viewport" meta tag to set the device size and not allow scaling (or zooming).
Add the media= media queries to provide the ability to load different CCS depending on the screen size (mobile device).
Load the querystring parameters into a key value array
Change the assigned style sheet based on the device key value, otherwise use the style sheet assigned by media query
Change the screens display width based on the width key value, otherwise use default values
Display the screen height, width and useragent
Render the web page with the correct style sheet and content width as provided in the key value array
Within the style sheets set the desired margins, column count and formatting for the header and section tags.

device.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Device Attributes</title>

<!-- meta tags -->
<meta name="keywords" content="">
<meta name="description" content="">
<meta name="viewport" content="width=device-width user-scalable=no initial-scale=1.0">

<!-- stylesheets -->
<link rel="stylesheet" href="/css/desktop.css" type="text/css">
<link rel="stylesheet" href="/css/tablet.css" type="text/css" media="only screen and (min-width:400px) and (max-width:800px)">
<link rel="stylesheet" href="/css/phone.css" type="text/css" media="only screen and (min-width:0px) and (max-width:399px)">

<script type="text/javascript" >
	// gather the http parameters from the URL and put them into a key-value pair array for temporary storage
	var args = new Object();
	var query = location.search.substring(1);
	var pairs = query.split("&");
	for(var i = 0; i < pairs.length; i++) {
		var pos = pairs[i].indexOf("=");
		if (pos == -1) continue;
		var argname = pairs[i].substring(0,pos);
		var value = pairs[i].substring(pos+1);
		args[argname] = unescape(value)
	}
	// check the array to determine the device type and screen width requested change the style sheet and width displayed to web page
	// if no width is specified for device type use appropriate defaults
	// if no parameters were specified use the defaults as set in the <meta> and <link> tags
	if(args.device == "tablet") {
		document.write('<link rel="stylesheet" href="/css/tablet.css" type="text/css">');
		if(args.width)
			document.write('<style>body {width: ' + args.width + 'px;}</style>');
		else
			document.write('<style>body {width: 768px;}</style>');
		}
	else if(args.device == "phone") {
		document.write('<link rel="stylesheet" href="/css/phone.css" type="text/css">');
		if(args.width)
			document.write('<style>body {width: ' + args.width + 'px;}</style>');
		else
			document.write('<style>body {width: 320px;}</style>');
		}
	else if(args.device == "desktop") {
		document.write('<link rel="stylesheet" href="/css/desktop.css" type="text/css">');
		if(args.width)
			document.write('<style>body {width: ' + args.width + 'px;}</style>');
		}
</script>
</head>
<body>

<header>
<script type="text/javascript">
// determine the screen height and width and display to web page
document.write("<h1>" + screen.availHeight + " x " + screen.availWidth + "</h1>");
// determine the user agent and display to web page
document.write( navigator.userAgent.toLowerCase() + "<hr>");
</script>
</header>
<section>
The purchase and use of mobile devices has exceeded laptops and desktops combined. The time has come where a mobile first strategy for content deployment should be your organizations default. And the desktop will be relegated to administrative and after-the-fact tasks. The Bowen Institute of Technology focuses its services, research and instructional development tasks in getting your organization to mobile. Not only from a technology perspective, but also from a process improvement and employee and customer education perspective. At the Bowen Institute of Technology we view knowledge management and business intelligence not as bits, bytes, data and stored information. We see it as the knowledge and intelligence stored in peoples heads and within their collaborations. Technology is a great tool for capturing and exchanging peoples knowledge and intelligence while also facilitating the interactions of communities of practice. If you desire a greater understanding of how we can help your organization excel in the world of mobile knowledge and distributed intelligence do not hesitate to contact us; <a href="mailto:info@bit.bc.ca">info@bit.bc.ca</a>
</section>
</body>
</html>

====tablet.css====
The big changes for this style sheet are the margins being set to 10px and the column count being set to 2.
<pre>
* { 	font-family: arial, helvetica, sans-serif; }

body {
	width: auto;
	margin-right: 10px;
	margin-left: 10px;
}
header {
	font-size: 100%;
	font-style: italic;
	color: #000;
}
header > h1 {
	font-size: 150%;
	font-weight: bold;
	font-style: normal;
	color: #000;
	text-shadow: 1px 1px 3px #333;
}
section {
	-moz-column-count: 2;
	-webkit-column-count: 2;
	column-count: 2;

	-moz-column-gap: 1em;
	-webkit-column-gap: 1em;	
	column-gap: 1em;
	
	text-align: justify;
	font-size: 100%;
}

style extensions

The introduction of the -moz and -webkit style extensions that are referenced in the styles being assigned to the section tag. These two prefixes are used for browser specific styles. The -moz extensions are for mozilla browsers and the -webkit extensions are for the safari browsers.

phone.css

The big changes for this style sheet are the margins being set to 5px and the column count being set to 1.

* { 	font-family: arial, helvetica, sans-serif; }
body {
	width: auto;
	margin-right: 5px;
	margin-left: 5px;
}
header {
	font-size: 80%;
	font-style: italic;
	color: #000;
}
header > h1 {
	font-size: 150%;
	font-weight: bold;
	font-style: normal;
	color: #000;
	text-shadow: 1px 1px 3px #333;
}
section {
	-moz-column-count: 1;
	-webkit-column-count: 1;
	column-count: 1;

	-moz-column-gap: 0em;
	-webkit-column-gap: 0em;	
	column-gap: 0em;
	
	text-align: justify;
	font-size: 100%;
}

desktop.css

The big changes for this style sheet are the margins being set to 160px and the column count being set to 3.

* { 	font-family: arial, helvetica, sans-serif; }
body {
	width: auto;
	margin-right: 160px;
	margin-left: 160px;
}
header > h1 {
	font-size: 150%;
	font-weight: bold;
	color: #000;
	text-shadow: 2px 2px 5px #333;
}
section {
	-moz-column-count: 3;
	-webkit-column-count: 3;
	column-count: 3;

	-moz-column-gap: 2em;
	-webkit-column-gap: 2em;	
	column-gap: 2em;
	
	text-align: justify;
}

source code

http://books.bit.bc.ca/mwa/ch01/devices/

Summary

In this lesson we have explored how to add and consume parameters appended to the web site URL. These parameters were parsed by JavaScript and programming logic was developed to assign the correct style sheet and screen width depending on the values found in the parameters. The use of the meta tag "name=viewport" was also further expanded to include attributes to turn off scaling and to prevent zooming. The two new HTML5 tags of <header> and <section> were also added for better formatting of the html and to make specific style sheet changes to different areas of the page.

Project 3: JavaScript Detect

Build a web page with JavaScript to parse the QueryString parameters to change the style sheet dependent on a device parameter and set the HTML width dependent on the width parameter.

Additional Challenge

Add a height parameter to the QueryString and set the HTML page's height based on this parameter.

Business Value

The business value is it quickens the design process and that will save the designers time. It will assist in discussing design and allow demonstration of the site without having all the actual devices present. Mostly, it will ease the design and testing processes.

Test your understanding

Please take this quiz

Mobile Web Applications/Ch01

Chapter 1: Building a mobile web page with HTML5

Chapter Author: Peter Rawsthorne

Criteria: for building a mobile web page

Evidence: showing your ability to build a mobile web page

Section 1. Building a Mobile Web Page

The Challenge

A simple HTML5 page

displayed in desktop browser

displayed in mobile device

The code

The HTML5, CSS and JavaScript

What's changed with HTML5

What's new within the HTML5

pseudocode

device.html

default.css

phone.css

source code

Summary

Project 1: Mobile Web Page

Business Value

Test your understanding

Section 2. How cascading style sheets work

The Challenge

one global and two mobile style sheets

the code

default.css

desktop.css

phone.css

Summary

Project 2: Cascading Style Sheets

Business Value

Test your understanding

Section 3. Viewing pages without mobile devices

The Challenge

Swapping the style sheets (CSS)

page loading with desktop style sheet

page loading with tablet style sheet

page loading with phone style sheet

thoughts on screen size

The code

The HTML5, CSS and JavaScript

What's changed from the previous lesson

What's new within this lesson

pseudocode

device.html

style extensions

phone.css

desktop.css

source code

Summary

Project 3: JavaScript Detect

Additional Challenge

Business Value

Test your understanding

Chapter Resources