Building fast and responsive websites

This excerpt is Chapter 4 of the HTML5 Mobile Development Cookbook by Shi Chuan, out at Packt Publishing.

On mobile devices, bandwidth is not always as good as on a desktop computer. If you are on a slow 3G network, things can get loaded much slower than on a Wi-Fi hotspot. Even for Wi-Fi connections, many mobile browsers process slower than desktop computers. So when we create mobile sites, they have to be fast and responsive.

<!doctype html> <html> <head> <title>first.fm</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <style> </style> </head> <body> <header> <h1>first.fm</h1> </header> <div id="main"> <h2>Pages</h2> <nav> <ul> <li class="list"><a href="music.html">Music</a></li> <li><a href="radio.html">Radio</a></li> <li><a href="events.html">Events</a></li> <li><a href="charts.html">Charts</a></li> <li><a href="community.html">Community</a></li> <li><a href="help.html">Help</a></li> <li><a href="about.html">About</a></li> </ul> </nav> </div> <footer> <small>&copy; 2011 first.fm</small> </footer> </body> </html>

<header></header>

<nav> <ul class="list"> <li class="list"><a href="music.html">Music</a></li> </ul></nav>

<footer> <small>&copy; 2011 first.fm</small></footer>

<small>&copy; 2011 first.fm</small>

Semantics is more than just a richer set of tags. What we need is more than just more meaningful tags. To extend beyond tags, we could also add extra semantics that are machine-readable; data that browsers, scripts, or robots can understand, enabling a more useful, data-driven web for both programs and your users. These semantics are: RDFa (Resource Description Framework – in – attributes), Microdata, and Microformats.

CSS3 enhances web applications and websites using a wide range of styles and effects. With CSS3, one can create a set of rich UI that is imageless. On mobile, fewer images means faster loading, which is one way to boost performance. With the wide support of CSS3 on most modern smartphone browsers and polyfills for fallback (polyfills are used as fallback to make HTML5 features work on browsers that don't support HTML5 natively), it's not just safe but necessary to start using CSS3!

<style> body { margin:0; padding:0; font-family: Arial; background:#ccc; } header { text-shadow: 0 1px #000; background: #ff3019; /* Old browsers */ background: -moz-linear-gradient(top, #ff3019 0%, #cf0404 20%,#ff3019 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, leftbottom, color-stop(0%,#ff3019), color-stop(20%,#cf0404), color- stop(100%,#ff3019)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #ff3019 0%,#cf0404 20%,#ff3019 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #ff3019 0%,#cf0404 20%,#ff3019 100%); /* Opera11.10+ */ background: -ms-linear-gradient(top, #ff3019 0%,#cf0404 20%,#ff3019 100%); /* IE10+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff3019', endColorstr='#ff3019',GradientType=0 ); /* IE6-9 */ background: linear-gradient(top, #ff3019 0%,#cf0404 20%,#ff3019 100%); /* W3C */ } h1 { padding:0.5em 0.2em; margin:0; font-size: 18px; color:white; } h2 { text-shadow: 0 1px #FFFFFF; background: #eeeeee; /* Old browsers */ background: -moz-linear-gradient(top, #eeeeee 0%, #cccccc 100%);/* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom,color-stop(0%,#eeeeee), color-stop(100%,#cccccc)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #eeeeee 0%,#cccccc 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #eeeeee 0%,#cccccc 100%); /* Opera11.10+ */ background: -ms-linear-gradient(top, #eeeeee 0%,#cccccc 100%); /* IE10+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#cccccc',GradientType=0 ); /* IE6-9 */ background: linear-gradient(top, #eeeeee 0%,#cccccc 100%); /* W3C */ padding:0.5em 0.2em; margin:0; font-size: 16px; color:#000; } nav ul { border-top:1px solid #fff; list-style-type: none; padding:0; margin:0; } nav li { padding:0.5em 0.2em; margin:0; background:#AFAFAF; border-bottom:1px solid #fff; } nav li a { height:20px; display:block; text-decoration:none; color:white; } </style>

background: #eeeeee; /* Old browsers */ background: -moz-linear-gradient(top, #eeeeee 0%, #cccccc 100%);/* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom,color-stop(0%,#eeeeee), color-stop(100%,#cccccc)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #eeeeee 0%,#cccccc 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #eeeeee 0%,#cccccc 100%); /* Opera11.10+ */ background: -ms-linear-gradient(top, #eeeeee 0%,#cccccc 100%); /* IE10+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#cccccc',GradientType=0 ); /* IE6-9 */ background: linear-gradient(top, #eeeeee 0%,#cccccc 100%); /* W3C */

By looking at each aforementioned rule, we can see that different browsers use different CSS rules for gradients. There are six different variations just to make sure it's cross-browser compatible. You must be thinking: 'Oh, man, it's pretty time consuming to take care of each browser'. Don't worry, this rule isn't typed out manually. The Ultimate CSS Gradient Generator comes to the rescue! A powerful Photoshop-like CSS gradient editor from ColorZilla can help you make it painless to create CSS3 gradients:

-pie-background: linear-gradient(top, #eeeeee 0%,#cccccc 100%); /*PIE*/ behavior: url(PIE.htc);

When we apply fixed layout on a desktop web page, there are often whitespaces on the left or right of the screen depending on the browser screen size. Mobile browsers also come with different sizes, and with limited viewport space, every pixel is vital, so it's important to utilise every pixel available on the screen. To eliminate unnecessary whitespaces on the left or right of the page, responsive design is used.

<!doctype html> <html> <head> <title>first.fm</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="css/style.css?v=1"> <script>Modernizr.mq('(min-width:0)') || document.write("<scriptsrc='js/respond.min.js'>\x3C/script>")</script> </head> <body> <header> <h1>first.fm</h1> </header> <div id="main"> <h2>Pages</h2> <nav> <ul class="list clearfix"> <li class="list"><a href="music.html">Music</a></li> <li class="list"><a href="radio.html">Radio</a></li> <li class="list"><a href="events.html">Events</a></li> <li class="list"><a href="charts.html">Charts</a></li> <li class="list"><a href="community.html">Community</a></li> <li class="list"><a href="help.html">Help</a></li> <li class="list"><a href="about.html">About</a></li> </ul> </nav> </div> <footer> <small>&copy; 2011 first.fm</small> </footer> </body></html>

<script>Modernizr.mq('(min-width:0)') || document.write("<script src='js/respond.min.js'>\x3C/script>")</script>

@media only screen and (min-width: 800px) { }/*/mediaquery*/

<!doctype html> <html> <head> <title>first.fm</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <script src="js/modernizr.custom.54685.js"></script> <style> </style> </head> <body> <header> <h1>Your Location</h1> </header> <div id="main"> Your Geo Location is: <span id="geo"></span> </div> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery. js"></script> <script> yepnope({ test : Modernizr.geolocation, nope : ['js/geolocation.js'], complete: function () { navigator.geolocation.getCurrentPosition(function(position) { document.getElementById('geo').innerHTML = position.coords.latitude+", "+position.coords.longitude; }); } }); </script> </body></html>

At the time of writing, Modernizr 2.0 Preview was in Beta 1. In this beta release, there are two great new features. One is that you can choose to customise the features that you want to detect. The other great feature is that you can have yepnope.js (also known as Modernizr.load by Alex Sexton and Ralph Holzmann). Yepnope.js provides a dynamic JavaScript loader, and you can learn more about it in the There's more section of this chapter.

test : Modernizr.geolocation

yepnope({ test : Modernizr.geolocation, nope : ['js/geolocation.js'], complete: function () { ...});

RewriteEngine On RewriteBase /RewriteCond %{HTTP_USER_AGENT} android|avantgo|blackberry|blazer|comp al|.... |up\.(browser|link)|vodafone|wap|windows\ (ce|phone)|xda|xiino [NC,OR] RewriteCond %{HTTP_USER_AGENT} ^(1207|6310|6590|.... |your|zeto|zte\-) [NC] RewriteRule ^$ http://example.com/mobile [R,L]

if(!jQuery.browser.mobile) { ...}

In the previous chapters, we have talked about the ability to bookmark your site on certain mobile devices. Although this is a pretty cool feature to bring web apps a step closer to native apps, there is one issue with it: there isn't an API you can use to call the bookmark action, so many users simply are not aware of such a feature on their phone. To tackle this issue, a couple of frameworks provide a bookmark bubble using CSS and JavaScript. The script adds a promo bubble to the bottom of your web app page, asking users to bookmark the web app to their device's home screen.

<!doctype html> <html> <head> <title>first.fm</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> #contact {width:220px; height:40px;} </style> </head> <body> <header> <h1>Contact Form</h1> </header> <div id="main"> <p>Type the message to see it autogrow</p> <textarea id="contact"> </textarea> </div> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery. js"></script> <script src="//github.com/shichuan/mobile-html5-boilerplate/raw/ master/js/mylibs/helper.js"></script> <script> var contact = document.getElementById("contact"); MBP.autogrow(contact); </script> </body></html>

<!doctype html> <html> <head> <title>first.fm</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <style> #contact { width:220px; height:40px; } </style> </head> <body> <header> <h1>Contact Form</h1> </header> <div id="main"> <textarea id="contact"></textarea><br /> <button id="btn">INSTANT button!!!</button><br /> <span id="result"></span> </div> <footer> <small>&copy; 2011 first.fm</small> </footer> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery. js"></script> <script src="//github.com/shichuan/mobile-html5-boilerplate/raw/ master/js/mylibs/helper.js"></script> <script> var btn = document.getElementById("btn"); MBP.fastButton(btn,showForm); function showForm() { $("#result").html("Thank you for submitting, we will get back to you shortly!"); } </script> </body> </html>

MBP.fastButton = function (element, handler) { this.element = element; this.handler = handler; if (element.addEventListener) { element.addEventListener('touchstart', this, false); element.addEventListener('click', this, false); }};MBP.fastButton.prototype.handleEvent = function(event) { switch (event.type) { case 'touchstart': this.onTouchStart(event); break; case 'touchmove': this.onTouchMove(event); break; case 'touchend': this.onClick(event); break; case 'click': this.onClick(event); break; }};

MBP.fastButton.prototype.onTouchStart = function(event) { event.stopPropagation(); this.element.addEventListener('touchend', this, false); document.body.addEventListener('touchmove', this, false); this.startX = event.touches[0].clientX; this.startY = event.touches[0].clientY; this.element.style.backgroundColor = "rgba(0,0,0,.7)";};

MBP.fastButton.prototype.onTouchMove = function(event) { if(Math.abs(event.touches[0].clientX - this.startX) > 10 || Math.abs(event.touches[0].clientY - this.startY) > 10) { this.reset(); }};

MBP.fastButton.prototype.onClick = function(event) { event.stopPropagation(); this.reset(); this.handler(event); if(event.type == 'touchend') { MBP.preventGhostClick(this.startX, this.startY); } this.element.style.backgroundColor = "";};MBP.fastButton.prototype.reset = function() { this.element.removeEventListener('touchend', this, false); document.body.removeEventListener('touchmove', this, false); this.element.style.backgroundColor = "";};

<!doctype html> <html> <head> <title>Mobile Cookbook</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <style> html,body,header,footer{ padding:0; margin:0; } header{ height:40px; background:#BFB840; display:block; } #main{ height:350px; background:#F2CB67; } footer{ height:40px; background:#DB5E31; display:block; } </style> </head> <body> <header> header </header> <div id="main"> main </div> <footer> footer </footer> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery. js"></script> <script src="//github.com/shichuan/mobile-html5-boilerplate/raw/ master/js/mylibs/helper.js"></script> <script> //MBP.hideUrlBar(); </script> </body></html>

MBP.hideUrlBar();

MBP.hideUrlBar = function () { var win = window, doc = win.document;// If there's a hash, or addEventListener is undefined, stop hereif( !location.hash || !win.addEventListener ){ //scroll to 1 window.scrollTo( 0, 1 ); var scrollTop = 1,//reset to 0 on bodyready, if needed bodycheck = setInterval(function(){ if( doc.body ){ clearInterval( bodycheck ); scrollTop = "scrollTop" in doc.body ? doc.body.scrollTop : 1; win.scrollTo( 0, scrollTop === 1 ? 0 : 1 ); } }, 15 ); win.addEventListener( "load", function(){ setTimeout(function(){ //reset to hide addr bar at onload win.scrollTo( 0, scrollTop === 1 ? 0 : 1 ); }, 0); }, false ); }};

<?xml version="1.0" encoding="UTF-8" ?> <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:mobile="http://www.google.com/schemas/sitemap-mobile/1.0"> <url> <loc>http://mobile.example.com/article100.html</loc> <mobile:mobile/> </url> </urlset>

Thank you for reading 5 articles this month* Join now for unlimited access

Enjoy your first month for just £1 / $1 / €1

*Read 5 free articles per month without a subscription

Join now for unlimited access

Try first month for just £1 / $1 / €1

The Creative Bloq team is made up of a group of design fans, and has changed and evolved since Creative Bloq began back in 2012. The current website team consists of eight full-time members of staff: Editor Georgia Coggan, Deputy Editor Rosie Hilder, Ecommerce Editor Beren Neale, Senior News Editor Daniel Piper, Editor, Digital Art and 3D Ian Dean, Tech Reviews Editor Erlingur Einarsson and Ecommerce Writer Beth Nicholls and Staff Writer Natalie Fear, as well as a roster of freelancers from around the world. The 3D World and ImagineFX magazine teams also pitch in, ensuring that content from 3D World and ImagineFX is represented on Creative Bloq.

Building pages using HTML5 semantics

Get the Creative Bloq Newsletter

Getting ready

How to do it...

How it works...

There's more...

RDFa

Microdata

Using CSS3 features for progressive enhancement

Getting ready

How to do it...

How it works...

There's more...

Understanding CSS3 gradients

CSS3, please!

Applying responsive design

Getting ready

How to do it...

How it works...

There's more...

Optimising polyfills script loading

Getting ready

How to do it...

How it works...

There's more...

yepnope

Applying user agent detection

Getting ready

How to do it...

How it works...

There's more...

Methods of mobile browser detection

Adding mobile bookmark bubble to the home page

Getting ready

How to do it...

How it works...

Building Contact page with textarea and autogrow forms

Getting ready

How to do it...

How it works...

There's more...

Making buttons with instant response

Getting ready

How to do it...

How it works...

There's more...

Hiding WebKit chrome

Getting ready

How to do it...

How it works...

Building a mobile sitemap

Getting ready

How to do it...

How it works...

There's more...

Google and mobile-friendly site building

Google and mobile site indexing

Related articles