(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)
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.
Topics in This Post
- 1. Introduction and Overview
- 2. Design Strategies and Tools for Responsive UI Design and Layout
- 3. Developing Responsive, Fluid Layout with Percentages and CSS3 Media Queries
- 4. Core HTML5 (Semantic Elements, Audio, and Video)
- 5. All the CSS3 You Need to Know
- 6. Modern Forms with HTML5 and CSS3
- 7. Cross-browser HTML5 with HTML5 Boilerplate and Modernizr
- 8. Twitter Bootstrap 3.0 Responsive Website Layout Tutorial
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
- 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.
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.
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.
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)
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:
- 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:
— Elastic Videos
In addition, I came across this very useful responsive table technique a few days ago:
Responsive Data Tables:
- Read chapter 4, “HTML5 for Responsive Designs.”
- Read chapters 5, 6, and 7.
- Read chapter 8, “Conquer Forms with HTML5 and CSS3.”
- Read chapter 9, “Solving Cross-browser Responsive Challenges.”
- I will publish a post on HTML5 Boilerplate and Modernizr soon.
- Offline Applications and Local Storage
- Web Workers
- History API
- Server Communication (Web Sockets and Server-Sent Events)
3. Developing Responsive, Fluid Layout with Percentages and CSS3 Media Queries
4. Core HTML5 (Semantic Elements, Audio, and Video)
5. All the CSS3 You Need to Know
6. Modern Forms with HTML5 and CSS3
7. Cross-browser HTML5 with HTML5 Boilerplate and Modernizr
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.
In a follow post, we will learn Advanced HTML5 for Modern Web Application Development.
The topics will include: