Mobilizing websites with responsive design and HTML5 tutorial

This is a blog post series tutorial for adapting your existing websites for mobile devices without building a separate mobile site. It shows, with examples, how with little changes in your HTML, CSS and Javascript code you can deliver much nicer user experience for small screen and mobile devices. You can make existing HTML designs more mobile friendly with selective CSS loading and HTML5 tags. Selective CSS loading with CSS3 media queries allow you to change layout depending on the browser screen size: this kind of layout is called responsive design.

The tutorial is divided to several, functionality specific, blog posts, each with screenshot examples, explanations and links for more in-depth information.

The tutorial was written in a conjunction with a consulting project for a Finnish public sector organization. As the one of the funding sources is Finnish tax money, including some of my very own pennies, it was a common interest to get the information born in the consultation project published.

Below is an example what one can accomplish.

The site landing page before any mobilization was done; the site is using the default desktop styles on mobile devices:

The site after HTML and CSS adjustments:

1. Prerequisites

Prerequisites for understanding this tutorial are

2. Table of contents

The tutorial contents is outlined below. I’ll keep linking to new blog posts as I finish writing them. Stay tuned, by following the RSS feed or Twitter.

Buy open source friendly bitcoins  Subscribe to this blog in a reader Follow me on Twitter Follow me on Facebook Follow me Google+

10 thoughts on “Mobilizing websites with responsive design and HTML5 tutorial

  1. Pingback: Working on HTML(5) for mobile sites (Mobilizing websites with responsive design and HTML5 part II) | Open Source Hacker

  2. Pingback: Stuff I’m reading (weekly) | Jon Stahl's Journal

  3. Wow, very comprehensive review. I’m thinking about learning HTML5. I’m seeing more and more job/freelance listings asking for html5 media playerknowledge and so along with reading some of the online references you listed, I’m going to have to pick up the book as well. Really appreciated the chapter breakdowns.

  4. Pingback: Are You Ready To Mobilize Your Existing Website — Gene De Libero - Digital Marketing Strategist

  5. Pingback: 17 Fresh New HTML5 Tutorials | InspireMonkey - Neverending Web Curiosity!

  6. Pingback: 30 Tutoriais HTML5 para ajudar você a impressionar o seu público | Site para Empresas – Blog sobre Internet e Criação de Site

  7. Pingback: Best HTML5 Tutorials to Help You Impress Your Audience | HueDesigner

  8. Pingback: HTML5 Exclusive Tutorials Collection For Beginners | Creative Verse

  9. Pingback: Top 30 HTML5 Tutorials | Web Hosting Secret Revealed

  10. Pingback: 20 Free Responsive HTML5 CSS3 Website Templates & Tutorials

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>