Notes and news, insights and inspiration from the autonomous collective mind of GS.

As we hurtle at light speed toward mobile overtaking desktop devices, some new philosophies in Web design have surfaced – philosophies that redefine how we approach our clients’ needs.

At GS Design, we’re exploring a new approach to Web design and development called “Mobile First.” Directly related to this strategy are two Web terms to digest: “responsive” and “adaptive.” What do they mean? Aren’t they the same thing? It seems there are as many opinions on the correct definition of these two terms as there are Web developers.

Let’s break it down.

Both terms can refer to allowing a Website to provide the best possible experience on a variety of devices, whether it be mobile, tablet, or desktop.

Responsive

The term responsive design can be credited to Ethan Marcote, who coined the term in his book Responsive Web Design to describe using “fluid grids, fluid images/media & media queries.” This basically speaks to the layout’s ability to respond to the user’s technology (browser or device) to best meet the user’s needs.

Although Marcote is credited with the term, he’s really only describing the most modern incarnation of this Web design strategy. The idea of tailoring a Website based on the user’s technology has been around for quite a while, as developers have always been programming to accommodate different experiences (like our old friend Internet Explorer). After Marcote’s book was published, his publisher later clarified their stance on responsive design to mean any technique used to achieve this end, not just fluid grids and media queries. For example, if we use jQuery or other javascripts to adjust the layout along with CSS media queries, that’s also part of a responsive strategy.

Resolution Independence: 2012.dconstruct.org responsive layout. A “fluid” grid allows the layout to “respond” to its respective device (or browser window) width.

Adaptive

Aaron Gustafson is the author of the book Adaptive Web Design. According to Gustafson, adaptive Web design “is about creating interfaces that adapt to the user’s capabilities (in terms of both form and function).” He also states that “adaptive web design is just another term for ‘progressive enhancement’ of which responsive web design can (and often should) be an integral part, but is a more holistic approach to web design in that it also takes into account varying levels of markup, CSS, JavaScript and assistive technology support.” By these descriptions we can come to the conclusion that adaptive Websites are those that adapt their design, structure, and content to best meet the needs of their user, with responsive design being a subset of adaptive.

Some examples of an adaptive strategy:

• Programming touch event functionality, such as swiping through a gallery, for devices that understand touch events.
• Adding geolocation functionality for devices that can track the user’s location (e.g., “Use my current location”).
• Programming a canvas element to replace an image if the user’s browser supports HTML5.

Basically, responsive and adaptive aren’t mutually exclusive concepts. They go hand in hand. Adaptive is an overall approach, and responsive is sort of a bullet point within that approach. It could be argued that responsive is more about the layout, and adaptive is more about enhancing the experience, but I’ll leave that for you to decide. Combined, they’re part of a strategy to provide the best experience based on the technology being used. It’s all about exploiting the capabilities of the user’s environment to create a more authentic and personalized experience.

You know how different browsers display Web pages differently? From a development standpoint, it takes some massaging and understanding the shortfalls of various browsers to get a page to display the way you would like. When it comes to HTML email, getting your message to display as you would like is a bit more complicated. Web browsers (IE, Firefox, Safari, and Chrome) all use the code you write to display a page verbatim. Email clients, on the other hand (Outlook, Hotmail, Apple Mail, Yahoo Mail, Gmail, etc.), insert, update, and neglect code that the developer writes. Litmus has a great infographic that explains the convoluted process an HTML email takes from designing and coding to the recipient’s inbox.

Scalable Vector Graphic (SVG) files are nothing new; they’ve been around for years. Despite this, we still haven’t seen them used as broadly as they could be. Given that the goal today is to build increasingly responsive and adaptive sites that look great not only on high-res desktop displays but also in the palm of your hand on mobile devices, bypassing SVG is a huge oversight. SVG files shine in this area as they’re completely resolution independent and (typically) have a smaller file size than their bitmapped brethren. If you’re targeting an iPhone with a Retina display, do you really want to make 3G users download a bigger file just to take advantage of that screen? Why not scale a single SVG file without wasting additional bandwidth?

Comparison of PNG scaling versus SVG scaling.

Of course, SVG files aren’t appropriate for every image type. Photography is still in the realm of the JPEG, and many sites use photography as their main graphic elements. Where you don’t need photography, CSS3 is able to fill in a lot of gaps as far as design elements are concerned. So, then, where is SVG appropriate? How about one of the first elements to generally appear on a web page – the logo.

The logo

Many logos are already created in vector drawing programs, like Adobe Illustrator. Yet they’re often rasterized and placed on the page as a PNG or GIF file. Why not preserve their original precision?

Consider the following:

• A brand logo is an ever-present element on your site and one that is found on every page. Spending time optimizing global elements is always time well spent.
• A logo isn’t simply some random bit of chrome or graphical glitz. To some extent, it can be considered “content.”
• If you’re into print style sheets, an SVG file’s resolution independence can make your site’s printouts look as good as your company stationary.
• A logo is a key part of your website. It’s your brand. Your identity. Certainly it’s worth a little extra time and effort.

How do I do it?

In Adobe Illustrator you can save SVG files out directly. In the dialog box, choose the profile SVG Tiny 1.2., which is meant for devices with reduced computational and display capabilities. Sounds perfect for mobile devices, doesn’t it? Uncheck the "Include XMP" box (You have to click “More Options” first). Including the XMP data will add a lot of unnecessary metadata making your file size much bigger. Since this data is irrelevant on the web and we really just want the vector info, we can get rid of it.

Once you have your SVG file, you can link to it using image tags or CSS background images. Previously you needed to link them via object tags, but since we’re not looking to add any scripting or interactivity to our SVG files, linking them via a static image method should be appropriate. However, be sure to tell your server admin to set up a mime type for ‘image/svg+xml’ for your SVG files. It may not be set by default.

In your image tags, you can even set a width as a percentage to make your logo perfectly scalable with your responsive layout. You’ll find your logo looks great at all resolutions, with no multiple image swapping and still just a tiny file. Many of the logo files I've used in SVG format have ended up being as small as 2KB with gzipping. For example, the GS logo on the corner of this site.

What about browser support?

All modern browsers have good SVG support. Many have had it for quite some time. Internet Explorer has support as of version 9. Using a JavaScript library called Modernizr, we can easily test for SVG support and swap a vector file for a well-supported bitmap file. Just put Modernizr on your site, and it takes care of most of the work for you. You'll need to create a fallback PNG file, but by using these methods you can avoid the browser downloading both files.

For example, in CSS just use .no-inlinesvg and .inlinesvg before the selector with your background image.

.no-inlinesvg #logo {
	background: url('logo.png');
}

.inlinesvg #logo {
	background: url('logo.svg');
}

For image tags, you can use JavaScript to swap your files.

<script>
$(document).ready(function() {
	if (Modernizr.inlinesvg) {
		//SVG.
		$('#logo').html('<img src="logo.svg" alt="Your Company" />');

	} else {
		//No SVG.
		$('#logo').html('<img src="logo.png" alt="Your Company" />');
	}
});
</script>

<a href="/" id="#">Your Company</a>

While many browsers support SVG files, they don’t all support SVG use in IMG tags or in CSS backgrounds. For example, using SVG inline has only been supported in Firefox since version 4.0. So the venerable Firefox 3.6 would receive the PNG fallback in this case.

What is the payoff?

The mobile space continues to grow. Android and iOS both have devices with scalable high-res displays. Instead of making bigger high-res bitmaps that will inevitably have a larger file size, simply use a single small SVG file that will look great regardless of how large or small displays become.

On the desktop when you use browser zoom, your SVG files will scale just as flawlessly as your HTML text. What’s more, the latest version of Safari allows you to double tap with two fingers (assuming a laptop trackpad or Magic Trackpad) and zoom your viewport much like you do on the iPhone. Again, your SVG files will scale beautifully.

Speaking of Mac OS X Lion, there’s evidence that future versions of OS X will take advantage of high-res displays. You can scale the display up without changing your resolution. There's similar development within Windows 8 as well. While display resolutions are still not high enough to really justify this, you can see a day where we’ll have a Retina caliber display for our desktop machine.

With a combination of web fonts (for greater use of HTML-rendered text), CSS-rendered graphics (rounded corners, gradients, drop shadows, etc.), and SVG files, we can future-proof (or at least future-friendly) our websites by making them more resolution independent. Sure there are a number of steps beyond just linking to a file, but we can start with one of the single most important graphical elements on our site. The logo. It’s an element that will help you dip your toe into the manner in which we may be making websites in the future.