Responsive Web Design, written by Ethan Marcotte, is the fourth book to be published by A Book Apart. For those who don’t know, Ethan is a contributing author and technical editor at the renowned industry website A List Apart. He also speaks at conferences such as An Event Apart, Future of Web Design and SXSW.

We are increasingly accessing the web from a myriad of devices including desktop PCs, smart phones and tablets, yet the vast majority of websites are still being designed with popular desktop PC monitor resolutions in mind. Responsive Web Design attempts to address this by advocating websites that are designed and built to adapt to the device they are rendered on.

Ethan defines the three key ingredients of Responsive Web Design as:

• Flexible, grid based layouts
• Flexible images and media
• CSS Media queries

The book covers each of these subjects in easy to understand detail with clear illustrations and code examples where required.

The final chapter of the book focuses on how we can apply these techniques to build responsive websites, discussing some of the finer points and approaches to Responsive Web Design such as designing for context, Luke Wroblewski’s Mobile First design philosophy, responsive workflow and collaborative design.

Contents

Our Responsive Web

Outlines the Responsive Web Design philosophy with comparisons to Responsive Architecture.

The Flexible Grid

Techniques for creating layouts based on a flexible grid system.

Flexible Images

How to implement flexible images that expand and contract with a flexible grid system.

Media Queries

Using media queries to make webpages respond to the capabilities and resolution of the device they are viewed on.

Becoming Responsive

Verdict

One of the things that attracts me to the A Book Apart series of books is their brevity. At 150 pages, this book can be read within the space of an hour or two. This is not to say that the book skimps on important information, I found the book to contain all the detail required without the unnecessary time-wasting “fluff”. What is apparent reading the book is that we are still at the early stages defining the techniques and best practices behind Responsive Web Design. For instance we still require Javascript to deliver the appropriately optimised images and other media to the appropriate devices and require proprietary “fixes” for older versions of Internet Explorer. However, the book clearly demonstrates Responsive Web Design is a viable methodology now and it does so in a way that is very accessible and easy to understand. I would go as far as saying this is the most vitally important web design book I’ve read (and I’ve read a few). If you are a Web Designer or Developer you owe it to yourself to read this book!

Did you find this review useful? Do you have any books you would like to recommend?  Say hello and let me know by leaving a comment below.

And while you are at it, why not follow me on Twitter and subscribe to my RSS feed.

I'm going to show you how to create a browser testing environment using VirtualBox, Oracle's free virtualisation software.

Creating a browser testing environment can be fraught with difficulty. There are a number of options available including having multiple test machines, multiple VMs, IEtester, IEcollection and so on, but these solutions are not without their problems. Having to keep multiple test machines around is rather cumbersome, installing multiple VMs takes up large amounts of disk space and the accuracy of IEtester and the like is questionable.

Jonathan Snook wrote an article entitled How I use VMWare Fusion and snapshots back in December 2010 outlining how to set up a browser testing environment using VMWare snapshots. However, I wondered if the same could be achieved using the snapshots feature in Oracle’s free VirtualBox virtualisation software. After a bit of experimentation I confirmed that it was possible. This walk-through applies to Mac OS X but I would imagine the same principals can be applied in the Windows and Linux versions of VirtualBox.

Setting up browsers with VirtualBox snapshots

1. First of all you'll need to download Oracle VirtualBox and install it.

2. Create a new VM and install your operating system on it. I installed Windows 7.

   

3. Once you have the operating system installed take a snapshot by clicking the snapshot icon (the one that looks like a camera) and give it a name. I've called it “Original state (IE8)” because IE8 is installed along with Windows 7.

   

4. Now boot the VM by clicking the “Start” icon. Start up the web browser (in this case Internet Explorer) and download and install a browser of your choice. I chose Chrome 9.

5. Once the browser has finished installing, open the VirtualBox window again. Select the current state then take a snapshot. Give your snapshot a name (in my case I named the snapshot “Chrome 9”) and click OK. VirtualBox will now take a few seconds to save the snapshot. Once the snapshot has been saved shutdown the VM. That's the first browser set up!

   

6. To begin installing the next browser, select the root snapshot (in my case “Original state (IE8)”) and click the “Restore snapshot” icon (the one that looks like a terminal with an upwards arrow inset).

7. Simply repeat steps 4 to 6 until you have finished installing all the browsers you need in your browser testing environment.

Solutions for Internet Explorer

Internet Explorer isn't as straight forward. One of the simplest solutions was to test with the virtualised versions of IE on Spoon.net. Unfortunately, Microsoft asked Spoon to take down the IE browsers in November 2010. However Spoon have announced they will return on 2nd March 2011 (2 weeks away at the time of writing) so look out for their return.

Of course you can always use the Microsoft compatibility testing VHDs which should work with VirtualBox, although I was unable to get them working with VirtualBox for Mac OS X.

An alternative solution for IE 7 and IE 8

If you have setup a Windows 7 VM, as I have here, you will have IE8 installed. You can switch IE8 to IE7 rendering by switching the Browser Mode of IE8 to IE7.

1. Go to the “Tools” menu and select “Developer Tools”.
2. In Developer Tools go to the “Browser Mode” menu and select “Internet Explorer 7”.

See Testing sites with Browser Mode vs. Doc Mode on the IE Blog for more details.

…and here's one I prepared earlier

Once you have all your browsers and snapshots set up you should have something resembling this.

Loading a snapshot

You should now have all your browsers and snapshots set up. To load a snapshot simply select the snapshot you require from the snapshots list and click the “Restore snapshot” icon. It will take a few seconds to restore the snapshot. Once the snapshot has been restored, start the VM by clicking the “Start” icon. The great thing about snapshots is that the VM will restore in only a few seconds, rather than having to reboot the whole operating system.

Useful links

• How I use VMWare Fusion and Snapshots by Jonathan Snook
• IEtester
• IEcollection
• Oracle VirtualBox
• Internet Explorer comapatibility VHD images
• Spoon.net browsers
• Testing sites using browser mode vs docmode

Did you find this article useful? Why not say hello and let me know by leaving a comment below.

And while you are at it, why not follow me on Twitter and
subscribe to my RSS feed.

I'm also available for guest posts, get in touch for more details.

Okay, I know what you're thinking. Why do I need another article on creating buttons with CSS? Well there are a few out there already but I think this one offers a few unique features I haven't come across in other
button articles.

View the demo

NB. Best experienced in Internet Explorer 9 beta, Firefox 4, Safari 4+, Opera 10.5+, Chrome 4+

Button features

• IE9 and Opera gradient support using SVG.
• CSS3 box-shadow highlighting on hover state (where supported).
• CSS3 gradients for normal and hover states (where supported).
• CSS3 transitions to animate button states (where supported).
• Just CSS and SVG. No images used.
• Flexible and scalable to accommodate longer labels and resizing.
• Progressive enhancement for a better experience in more capable browsers.
• They look cool!

Just about every website has buttons right? So you can probably never have enough articles on creating buttons with CSS at your disposal!

Okay so now that is settled, let us begin…

Browser support

Browser support for the CSS3 features such as box shadow, rounded corners, gradients and transitions varies, but apart from IE8 and below, all the major players now have good enough support for the features used here to enable us to create the buttons with CSS (and SVG in the case of IE9 and Opera gradients). Yes, the buttons will look plainer in less capable browsers but the consensus of opinion in the web design community is that websites do not need to look the same in every browser. You can always use gradient images or the proprietary IE gradient filter if you need the buttons to look similar in IE6-8.

CSS3 supporting browsers including IE9 beta, Firefox, Chrome,
Safari and Opera.

Non CSS3 supporting browsers including IE6-8.

How it's done

The main CSS styles for the buttons are remarkably simple. We utilise a handful of CSS3 properties to create the look of the button—box-shadow to create the glow, border-radius to create the rounded corners and transitions to animate the box-shadow glow and other properties.

.button {
display: inline-block;
padding: 7px 12px;
width: auto; /* IE 7 input button fix */
overflow: visible; /* IE7 input button fix */
font: bold 14px sans-serif;
text-decoration: none;
outline: none;
cursor: pointer;

-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
-webkit-transition: -webkit-box-shadow 0.3s ease-in-out;
-moz-transition: -moz-box-shadow 0.3s ease-in-out;
-o-transition:  background-color 0.3s ease-in-out;
transition: box-shadow 0.3s ease-in-out, background-color 0.3s ease-in-out;
}

.button:active {
position: relative;
top: 1px;
}

The :active pseudo-class is used to define the CSS that shifts the button down 1 pixel when the button is activated to create the illusion of the button being pressed.

Adding colour and gradients

Next up we add the colour and gradients. We do this by defining a class and associated :hover pseudo-class for each colour required. CSS3 linear gradients are defined for Mozilla and Webkit browsers for both the normal and hover states.

.orange {
border: 1px solid #d19900;
color : #ffffff;
background: #f8b500 url(grad-orange.svg) 0 0 no-repeat;

text-shadow: -1px -1px 0 rgba(0,0,0,0.3);
background: -moz-linear-gradient(top, #fceabb 0%, #fccd4d 50%, #f8b500 51%, #fbdf93 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fceabb), color-stop(50%,#fccd4d), color-stop(51%,#f8b500), color-stop(100%,#fbdf93));
}

.orange:hover {
color : #ffffff;
background: #f7c331 url(grad-orange-hover.svg) 0 0 no-repeat;

background: -moz-linear-gradient(top, #fcf8ed 0%, #fcdb81 50%, #f7c331 51%, #faecc5 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fcf8ed), color-stop(50%,#fcdb81), color-stop(51%,#f7c331), color-stop(100%,#faecc5));
-webkit-box-shadow: 0 0 12px #f7c331;
-moz-box-shadow: 0 0 12px #f7c331;
box-shadow: 0 0 12px #f7c331;
}

NB. Now I know the class names in the example above are presentational rather than semantic but this has been done for the sake of clarity. You can always change the class names as you see fit.

Adding gradients in IE9 and Opera with SVG

While we're at it, why not be a little forward thinking and include support for gradients in IE9 beta and Opera. Well we can do this using a little SVG magic. Why use SVG rather than an image? Well, because SVG is a vector graphics format so it will play nice when scaled, and unlike the proprietary IE gradient filter, it is a W3C recommendation.

We just need to create an SVG file like the one below and save it with a .svg extension.

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <linearGradient id="gradient" x1="100%" y1="100%">
      <stop offset="0%" style="stop-color:#fbdf93; stop-opacity:1" />
      <stop offset="50%" style="stop-color:#f8b500; stop-opacity:1" />
	  <stop offset="51%" style="stop-color:#fccd4d; stop-opacity:1" />
	  <stop offset="100%" style="stop-color:#fceabb; stop-opacity:1" />
    </linearGradient>
  </defs>
  <rect width="100%" height="100%" style="fill:url(#gradient)" />
</svg> 

To use the SVG gradients on our buttons we just add the SVG url to the background property of each button.

background: #f8b500 url(grad-orange.svg) 0 0 no-repeat;

Here it is in situ:

.orange {
border: 1px solid #d19900;
color : #ffffff;
background: #f8b500 url(grad-orange.svg) 0 0 no-repeat;

text-shadow: -1px -1px 0 rgba(0,0,0,0.3);
background: -moz-linear-gradient(top, #fceabb 0%, #fccd4d 50%, #f8b500 51%, #fbdf93 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fceabb), color-stop(50%,#fccd4d), color-stop(51%,#f8b500), color-stop(100%,#fbdf93));
}

.orange:hover {
color : #ffffff;
background: #f7c331 url(grad-orange-hover.svg) 0 0 no-repeat;

background: -moz-linear-gradient(top, #fcf8ed 0%, #fcdb81 50%, #f7c331 51%, #faecc5 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fcf8ed), color-stop(50%,#fcdb81), color-stop(51%,#f7c331), color-stop(100%,#faecc5));
-webkit-box-shadow: 0 0 12px #f7c331;
-moz-box-shadow: 0 0 12px #f7c331;
box-shadow: 0 0 12px #f7c331;
}

Putting it all together

Okay, we've covered the CSS and SVG required to create the buttons but how do you actually use them? Well, it is just a simple a matter of adding two classes to your anchor or button markup.

<a href="#" class="button orange">Link Button</a> 

<input type="button" value="Input Button" class="button orange" />

View the demo

Did you find this article useful? Why not say hello and let me know by leaving a comment below.

And while you are at it, why not follow me on Twitter and
subscribe to my RSS feed.

I’m also available for guest posts, get in touch for more details.

Firefox 4: OpenType font feature support

Great news for typgography buffs, Firefox 4 now has added OpenType feature support. While greater control over fonts will eventually be possible with the CSS3 Fonts module, in the meantime -moz-font-feature-settings can be used to implement ligatures, swashes, small caps and tabular figures in Firefox 4. Great stuff!

Firefox 4: OpenType font feature support

Videos from Fronteers 2010

The Dutch association of front-end developers, Fronteers, held their 2010 conference in October. The conference featured a fabulous line-up of speakers, and what's more, Fronteers have posted full length videos of all fourteen sessions online.

Here's a full list of all the videos but I've also handpicked a few choice video cuts for you below:

• Paul Irish—The state of HTML5
• Jeremy Keith—The design of HTML5
• Stephen Hay—Real-world responsive design

Internet Explorer 9 Beta

Big, big, big news! Internet Explorer 9 is coming so why not get a head start by looking at these resources:

• Internet Explorer Test Drive
• Internet Explorer 9 Beta Guide for Developers

Beware of -webkit-text-size-adjust:none

Many front-end developers use the proprietary Safari CSS property -webkit-text-size-adjust to stop Safari (iOS) arbitrarily resizing text. However, as Roger Johansson points out in this blog post, specifying a value of none also prevents text resizing in the desktop versions of Safari and of course you don't want to do that. I do hope the Safari developers address this.

Beware of -webkit-text-size-adjust:none

New books: Hardboiled Web Design and CSS3 for Web Designers

Web celebrities Andy Clarke and Dan Cederholm have both released new books. I've bought both of these books and I would whole heartedly recommend adding them to your bookshelf.

• Hardboiled Web Design by Andy Clarke (www.fivesimplesteps.com)
• CSS3 for Web Designers by Dan Cederholm (books.alistapart.com)

Example menu bar with dividers.

Now as with many things when dealing with code, there are a number of different ways of achieving the dividers shown in the example. A technique commonly used is to add a class such as .last.

Example 1—Add a class

<ul id="nav">
    <li>
        <a href="/home">Home</a>
    </li>
    <li>
        <a href="/services">Services</a>
    </li>
    <li>
        <a href="/portfolio">Portfolio</a>
    </li>
    <li>
         <a href="/blog">Blog</a>
    </li>
    <li class="last">
         <a href="/contact">Contact</a>
    </li>
</ul> 

li {
float: left;
padding: 0 10px;
border-right: 1px solid #000;
list-style: none;
}
    
.last {
border-right: none;    
}

Sure, this is a perfectly valid way of achieving the desired effect and guaranteed to work cross-browser but that .last class on the last <li> seems a little dirty and superfluous doesn't it? Also, if we wanted to output the list dynamically we would need to programmatically add the class to the last <li>.

Ok then, let's have another look at this.

Example 2—Using the CSS3 :last-child selector

<ul id="nav">
    <li>
        <a href="/home">Home</a>
    </li>
    <li>
        <a href="/services">Services</a>
    </li>
    <li>
        <a href="/portfolio">Portfolio</a>
    </li>
    <li>
         <a href="/blog">Blog</a>
    </li>
    <li>
         <a href="/contact">Contact</a>
    </li>
</ul>

li {
float: left;
padding: 0 10px;
border-right: 1px solid #000;
list-style: none;
}
    
li:last-child {
border-right: none;    
}

The example above uses the CSS3 :last-child selector to target the last <li>. Hurrah, we no longer require the extra class on the last <li> to target that element. Now this is all well and good but the CSS3 :last-child selector isn't supported by all browsers (yes, I'm looking at you Internet Explorer 6–8. Although Internet Explorer 9 Preview does support :last-child).

Alright then, let's think again.

Example 3—Using the :first-child selector

<ul id="nav">
    <li>
        <a href="/home">Home</a>
    </li>
    <li>
        <a href="/services">Services</a>
    </li>
    <li>
        <a href="/portfolio">Portfolio</a>
    </li>
    <li>
         <a href="/blog">Blog</a>
    </li>
   <li>
         <a href="/contact">Contact</a>
    </li>
</ul>

li {
float: left;
padding: 0 10px;
border-left: 1px solid #000;
list-style: none;
}
    
li:first-child {
border-left: none;
}

Here we've turned the problem on its head a little. Instead of adding a right-hand border to the <li>s and then removing the border from the last <li>, we're now adding a left-hand border and using the :first-child selector to remove the border from the first <li> thereby arriving at the same result as the previous two examples.

This poses the question—what is the advantage of using :first-child in this scenario rather than one of the other two methods? Well, again we're keeping the markup clean by not adding an extra class and :first-child also has better browser support than :last-child at present i.e. it is supported by Internet Explorer 7 and above (with certain provisos).

While admittedly this is a simple little CSS technique, I find myself using it on a regular basis so hopefully you may find it useful too.

Why not follow me on Twitter and subscribe to my RSS feed.

HTML5 is one of the biggest things to happen to the web in quite some time and most self respecting web designers will have no doubt been making at least some attempt to keep up with the hype. If you are anything like me, you might sometimes feel a little overwhelmed by the sheer amount of information you have to absorb as a web professional. Do you really have the time or inclination to read the whopping 900 page HTML5 spec? I thought not. Sometimes you just need a succinct overview of a subject from a trusted, authoritative source. In that case, read on.

Written by Jeremy Keith, the book is the first to be published by A Book Apart. For the un-initiated Jeremy is a speaker, author of several books on the web and Technical Director at the prominent UK web design consultancy Clearleft.

One of the refreshing features about this book is its brevity. At 88 pages this is a book that can be read, and the information within absorbed, in a relatively short time. I'm constantly reading books with over four times the number of pages contained in this book and thinking please get to the point. Thankfully Jeremy Keith does with this book. Jeremy also has a knack of presenting what could otherwise be considered rather dry, technical information in an approachable and entertaining way and this book is no exception.

Contents

Chapter 1—A Brief History of Markup

The book starts with a potted history of markup from its origins in SGML right up to the HTML5 status quo.

Chapter 2—The Design of HTML5

An outline of the fundamental guiding principals behind the design of HTML5, the emphasis on the real-world application of HTML5  over theoretical purity and an overview of HTML5's syntax and backwards compatibility with earlier versions of HTML.

Chapter 3—Rich Media

Covers the use of rich media in HTML5 including Canvas, audio and video with details of how to code these elements, potential accessibility pitfalls to watch out for and techniques for providing a fallback for less capable browsers.

Chapter 4—Web Forms 2.0

Describes the new form functionality and enhancements in HTML5 such as the new input types, datalists and client-side form validation. 

Chapter 5—Semantics

A summary of the new HTML5 elements used to define the structural semantics of web page content and how these elements form a document outline.

Chapter 6—Using HTML5 Today

The final chapter provides advice on using HTML5 now including how to declare the new elements for Internet Explorer, adding semantic richness for assistive technologies using ARIA attributes, validating HTML5 documents and a list of useful resources for further learning.

Verdict

As you are reading this review I suspect you will probably be wondering whether you should spend your hard-earned cash on this book. Well, let me first tell you what this book is not—this book is not a comprehensive HTML5 reference book. It isn't meant to be. This book is in fact a very well written and accessible HTML5 primer for web designers that will get you up-to-speed in very little time. If this is the kind of thing you are looking for you could do far worse than buy this cracking little book.

Did you find this review useful? Do you have any books you would like to recommend?  Say hello and let me know by leaving a comment below.

And while you are at it, why not follow me on Twitter and subscribe to my RSS feed.