(You will also learn HTML5 Boilerplate, Modernizr, and Twitter Bootstrap 3.0 responsive website layout)

Prerequisite: Familiarity with basic HTML and CSS
Duration: 2 – 3 days (about 18 hours)

We have learned quite a bit of JavaScript, but we must take a break from JavaScript briefly and learn HTML5 and CSS3, because we need both, along with JavaScript of course, to build modern web applications and websites.

[sc:mongodb-book]

Both CSS3 and HTML5 are just about fully supported in all modern browsers, and we there are techniques in place to patch old browsers that lack support. So there is no disadvantage to using CSS3 and HTML5 today. The opposite is true, however: there are many painful, frustrating disadvantages with forgoing HTML5 and CSS3.

You may already “know” a bit of HTML5 and a touch of CSS3 (or perhaps you probably know enough old-school HTML and CSS), and with this knowledge, you might have thought you needn’t learn HTML5 and CSS3 fully.

The crux of the matter is that after you complete this course, you will make faster, more user friendly, highly adaptive websites and web applications. And you will learn a number of other very exciting modern web development techniques.

Responsive Web Design is becoming increasingly essential (we are probably a few months away from responsive being mandatory) with the ubiquity of the myriad screen sizes available today. As a result, modern web developers are expected to understand and implement responsive web designs.

What You Will Learn?

  • HTML5 Core (HTML5 semantics, video, and audio; and later, Advanced HTML5 APIs)
  • Responsive Web Design (create fluid, responsive layouts from scratch and from static, pixel based layouts; responsive images, icons, and videos; and more)
  • Tools and Strategies for Designing the user interface and static comps for responsive websites
  • HTML5 Boilerplate, Modernizr, and Initializr
  • Twitter Bootstrap 3.0 Responsive Layout and Best Practices


Resources

  • Get the following book (it is a very short read):
    Responsive Web Design with HTML5 and CSS3. As with the other books I have recommended, in my humble opinion, this book is the best of the lot (I have done the research), so get it knowing you will get your money’s worth.

    Note that this book does not cover all the materials below, so you have to read the sections below in addition to the outlined chapters in the book.

    In the rest of this article, I will henceforth refer to this book as “RWD with HTML5 and CSS3.”

  • Downloads (including JS Libraries, module managers, and git): See the relevant sections below.

Day 1

1. Introduction and Overview

  • Overview of HTML5, CSS3, and Responsive Web Design

    It is important to know that just about all the often-used HTML5 features and most CSS3 features are supported by all modern browsers, and developers use polyfills to patch old browsers that lack the HTML5 and CSS3 features we need to use. As a result, HTML5 and CSS3 are in widespread use on modern websites and web applications.

    HTML5 is an enormous standard with an extraordinary list of features, and there are many features and standards that will not be standardized by W3C and not fully implemented in most modern browsers for years to come. However, today there are many HTML5 features that developers are using to develop modern web applications.

    We will conceptually divide HTML5 into two parts: HTML5 Core (the semantic elements and video and audio— the HTML markup you see on the page), and HTML5 Web Application API (features such as canvas, web sockets, server-sent events, and more—mostly the JavaScript-based aspects of the HTML5 API). In this post, we will focus on the former, and in part 2 (a follow-up post), we will focus on the latter. We will use HTML5 to markup our web page and add video and audio.

    We can use most CSS3 features today, because they are supported by all the modern browsers (IE9 is not a full modern browser, yet it still supports much of CSS3). And for browsers that don’t support the wildly adopted CSS3 features, we will use a JavaScript library like Modernizr to detect the missing parts, and we will use polyfills to patch the browsers accordingly, as I noted earlier. We use CSS3 for styling our website to add specialized CSS rules for detecting screens via the virtuous CSS media queries feature.

    Responsive Web Design is the notion that modern websites should adapt to, and display optimally on any, indeed all, screen sizes. This is accomplished by fluid layouts using formulaic (a specific formula) percentages for CSS measurement instead of pixels, and using CSS media queries to target different screen sizes (viewports).

    There are generally two principal ways for developing websites to specifically target multiple devices: develop separate websites for mobile and desktop, or develop responsive websites that adapt to all screen sizes. We will only discuss the latter, since the former is a costlier alternative that has some specific use cases depending on the target audience and the purpose of the website. Here is a brief article on Responsive website design versus Separate websites.

    Most online resources cover only the development of responsive website design, but we will also touch on, though briefly, the UI design and the static comp design, in addition to the development.

    Modernizr is a JavaScript library that detects which CSS3 and HTML5 features are not supported in browsers, and it facilitates adding targeted CSS and JavaScript for browsers lacking core HTML5 and CSS3 feature support. It also provides (inject) semantic HTML5 elements into the page, for old browsers that natively lack HTML5 support.

    Lastly, HTML5 Boilerplate is simply a template (with HTML, CSS, and a bit of JavaScript, among a few other options like .htaccess and robots.txt) that provides some standard, best practice functionality for developing modern websites and web applications.

    We use Modernizr to add HTML5 and CSS3 support in old browsers, and HTML5 Boilerplate to provide a bevy of essential web development best practices.

  • Read Chapter 1 of Responsive Web Design with HTML5.

2. Design Strategies and Tools for Responsive UI Design and Layout

Before we read chapter 2 in the book and start developing a responsive website with HTML and CSS, let’s briefly touch on UI design tools and strategies for responsive websites.

If you are not a designer, you should still read this section.

Within the last few months there have been a half dozen or more sophisticated UI tools for creating responsive UI layout, wireframes, and even complete HTML/CSS builds. Generally, designers today can follow the conventional route and design static comps in Photoshop, or they can design interactive HTML and CSS interfaces in real time, then export the resulting HTML and CSS code. Either of these methods works today, but over time, as responsive website designs mature, designers and clients will find it too time consuming and costly to design dozens of static comps for numerous pages in different screen sizes using Photoshop, particularly since there is a better alternative.

The two popular methods use today for designing the UI for responsive websites are:

  • Static Comps Design in Photoshop
    You can create the full static design comps in Photoshop and then export the design elements and recreate the design with HTML and CSS—the process we have used for many years. This process will eventually become obsolete because it is becoming counter productive today.

    This it is still the most popular way to design websites, responsive or not. Below are some Photoshop responsive design tools to make designing responsive websites in Photoshop more manageable:

    • Responsive Design Layout Patterns: Here are some examples of responsive design layout patterns that you can consider before you start designing in Photoshop.
    • Rresponsinator: This shows the viewport dimensions for the major mobile devices and desktop computers. Use these dimension along with the Bootstrap grid system to design responsive layouts.
    • This Photoshop Responsive Design template shows 4 designs for 4 separate screen sizes, but it does not have grids.
    • The Photoshop Responsive Design template at the link below uses a grid system, but the designer has rounded the percentage values for the grid system to make the numbers more easy on the eyes and mind. As you will learn in the chapter below, the formula used to calculate fluid, percentage-based layouts results in numbers with lengthy remainders. Here is the link to the design template.
    • FlatUI is a FREE UI kit of PSD templates and HTML/CSS, and it based on the flat design color scheme inspired by Windows 8 UI. I highly recommend this.
    • And there are two great UI frameworks that sell for a few dollars, but worth every penny:
      — The Impressionist UI – User Interface Pack.
      — The Bricks User Interface Framework.
  • Design UI in Real Time with HTML and CSS (the future of designing responsive websites)

    One of the fastest growing patterns for designing responsive web sites is to use of a new genre of tools called “Interface Builders”. These tools are mostly online and they allow you to interactively design responsive interfaces with HTML and CSS live, and you get to output the resulting HTML and CSS, and sometimes even JavaScript, from your designs.

    I use a hybrid of the aforementioned Photoshop static design along with an Interface Builder tool. For example, I would design my overall look and feel for the desktop version of the application (I really should be doing the mobile first bit, but I am yet to transition away from my old habits), and then I use an online InterFace Builder tool to design the full responsive layout with HTML/CSS.

    Some of the best Interface builder tools are listed below. These tools are very similar and I haven’t tried all of them thoroughly enough to make a qualified recommendation, so you have to try them and determine which is best for your needs. They are mostly easy to use.

    Whichever tool you use, make sure you can export the HTML and CSS. Here are the new and exciting Interface Builder tools:

    • 3. Developing Responsive, Fluid Layout with Percentages and CSS3 Media Queries

    • In Chapter 2, which you will read next, the author uses the Columnal CSS Grid system. You should follow along with the book and use the Columnal grid system, so you can acquire the skills and learn the techniques for how to develop a responsive layout from a non-responsive HTML/CSS layout.

      Bonus: I am writing a full Bootstrap 3.0 tutorial, so that you can use a real-world responsive design (mobile first) CSS/HTML framework. You will most likely use (if you aren’t already) Twitter Bootstrap anyway, so it makes sense that you get head start with Bootstrap 3.0 in the context of this article, since are discussing responsive web design.

    • Read chapter 2, “Media Queries: Supporting Differing Viewports” of RWD with HTML5 and CSS3.

      You will learn more about Modernizr in section 7 below and in my Modernizr tutorial I will publish tomorrow.

    • Read chapter 3, “Embracing Fluid Layouts.”
    • More on Fluid Images and Videos
      In chapter 3, you will note that the author discusses an adaptive image technique and a fluid video technique. But since the publication of the book, developers have created some new techniques for fluid images and fluid videos. Here are a few to make note of:
      Fluid Videos:
      — Elastic Videos
      — FitVid

      Fluid Images:
      — Adaptive Images (the technique discussed in the book)
      — Clown Car Technique
      — Fluid Images by Ethan Marcotte

      In addition, I came across this very useful responsive table technique a few days ago:
      Responsive Data Tables:

    4. Core HTML5 (Semantic Elements, Audio, and Video)

    • Read chapter 4, “HTML5 for Responsive Designs.”

    Day 2

    5. All the CSS3 You Need to Know

    • Read chapters 5, 6, and 7.

    6. Modern Forms with HTML5 and CSS3

    • Read chapter 8, “Conquer Forms with HTML5 and CSS3.”

    7. Cross-browser HTML5 with HTML5 Boilerplate and Modernizr

    • Read chapter 9, “Solving Cross-browser Responsive Challenges.”
    • I will publish a post on HTML5 Boilerplate and Modernizr soon.

    8. Twitter Bootstrap 3.0 Responsive Website Layout Tutorial

    I have to complete the Bootstrap tutorial, which keeps growing, but I am taking a little break to complete another project and I will return to the Bootstrap tutorial soon.

    Part 2

    In a follow post, we will learn Advanced HTML5 for Modern Web Application Development.
    The topics will include:

    • Offline Applications and Local Storage
    • Web Workers
    • Canvas
    • History API
    • Server Communication (Web Sockets and Server-Sent Events)
    • Geolocation