Archive for the ‘Visual Design’ Category

The Two Flavors of a ‘One Web’ Approach: Responsive vs. Adaptive

[Editor’s note: The following is a guest post from Igor Faletski, CEO of Mobify, which provides tools for adapting web sites for smartphones and tablets.]

You’ve probably heard people say we’re living in a “post-PC world.” What does that mean for web developers? It means that 30% to 50% of your website’s traffic now comes from mobile devices. It means that soon, desktop and laptop users will be in a minority on the web.

How do we deal with this tectonic shift in user behavior? We’ve moved beyond the era of m-dot or t-dot hacks, into one where responsive and adaptive design techniques rule the day — what the W3C calls a One Web approach. The key part of the W3C’s recommendation is that “One Web means making, as far as is reasonable, the same information and services available to users irrespective of the device they are using.”

For developers that means that taking a One Web approach ensures that not only does your site work on the smartphones and tablets of today, but it can be future-proofed for the unimagined screens of tomorrow.

There are currently three popular approaches to developing a One Web site: using a responsive design; client-side adaptive designs; and server-side adaptive designs.

One is not better or worse than the other; each has its own strengths and weaknesses and the wise web developer will consider the benefits and drawbacks of each before picking the one that works for their next project.

Responsive Web Design

Responsive web design is the most common One Web approach. The approach uses CSS media queries to modify the presentation of a website based on the size of the device display. The number of responsive sites is rapidly increasing, from the Boston Globe to Disney to Indochino.

A key advantage of this approach is that designers can use a single template for all devices, and just use CSS to determine how content is rendered on different screen sizes. Plus, those designers can still work in HTML and CSS, technologies they’re already familiar with. Additionally, there’s a growing number of responsive-friendly, open-source toolkits like Bootstrap or Foundation which help simplify the process of building responsive sites.

On the other hand, there are few shortcuts to a sound responsive design. To go responsive, organizations often have to undertake a complete site rebuild.

The design and testing phase can be quite fussy, as it can be difficult to customize the user experience for every possible device or context. We’ve all seen responsive site layouts that look like a bunch of puzzle pieces that don’t quite fit together. Responsive web design works best in combination with a mobile-first approach, where the mobile use case is prioritized during development. Progressive enhancement is then used to address tablet and desktop use cases.

Performance can also be a bugbear for responsive sites. At Mobify, we recently completed an analysis of 15 popular responsive e-commerce sites. Among these sites, the home pages loaded an average of 87 resources and 1.9 MB of data. Some responsive pages were as big as 15MB.

The numbers are that high because a responsive approach covers all devices. Your user is only using one device, but they have to wait for all of the page elements and resources to load before they can use it. Put simply, performance affects your bottom line. On smartphones, the conversion rate drops by an extra 3.5 percent when users have to wait just one second. By the three second mark, 57 percent of users will have left your site completely.

While responsive design is fast becoming the de facto standard, it also creates new challenges for online businesses, including how to handle images, how to optimize mobile performance and often means sites need to be rebuilt from the ground up with a mobile first approach.

Client-Side Adaptive

Adaptive design builds on the principles of responsive design to deliver user experiences that are targeted at specific devices and contexts. It uses JavaScript to enrich websites with advanced functionality and customization. For example, adaptive websites deliver Retina-quality images only to Retina displays (such as the new iPad) while standard-definition displays receive lower-quality images.

There are two approaches to adaptive design — one where the adaptations occur on the client side, in the user’s browser, and another where the web server does the heavy lifting of detecting various devices and loading the correct template. Examples of client-side adaptive sites include Threadless and ideeli. One of the strengths of the adaptive templating approach is the ability to reuse one set of HTML and JavaScript across devices, simplifying change management and testing.

A client-side adaptive approach means you don’t have to rebuild your site from the ground up. Instead you can build on existing content while still delivering a mobile-responsive layout. For expert developers, this approach also enables you to specifically target particular devices or screen resolutions. For example, for many of Mobify’s online fashion retail clients, 95% of their mobile traffic comes from iPhones. Client-side adaptive means they can optimize specifically for Apple smartphones.

Unlike responsive design, adaptive templates ensure that only the required resources are loaded by the client’s device. Because device and feature detection is shifted to the mobile device itself, CDN networks like Akamai and Edgecast can use most of their caching functionality without disrupting the user experience.

The client-side adaptive approach has a higher barrier to entry than responsive design. Developers need to have a solid grasp of JavaScript to use this technique. It also depends on a site’s existing templates as the foundation. Finally, because the client-side adaptations are a kind of layer on top of your existing code base, you need to maintain them as your site as a whole evolves.

Server-Side Adaptive

We can achieve the server-side adaptive approach in a variety of ways, through server-side plugins and custom user agent detection. Sites that use server-side adaptive include Etsy, One Kings Lane and OnlineShoes.com.

Why choose server-side adaptive? It typically offers distinct templates for each devices, enabling more customization, and it keeps device-detection logic on the server, enabling smaller mobile pages that load faster. Additionally, there are numerous server-side plugins available for common CMSs and eCommerce systems such as Magento.

This approach isn’t for the faint of heart–it typically requires significant changes to your back-end systems, which can result in a lengthy (and costly) implementation. The requirement to manage multiple templates raises ongoing maintenance costs. Finally, this approach can encounter performance issues when servers are under heavy load. When mobile user agent detection is performed on the server, a lot of common caching mechanisms deployed by CDNs like Akamai need to be turned off. This can result in a slower user experience for mobile and desktop visitors.

Of course, many companies are still wrestling with the basics of responsive, and they’re not ready to confront the more sophisticated flavors of adaptive. Increasingly, competition and mobile traffic, however, will drive more and more organizations to kick the tires on all three approaches, and pick the one that works best for their users.

File Under: Browsers, Humor, Visual Design

It’s the End of the ‘Blink’ Tag as We Know It

The end is nigh. Image: Almita Ayon/Flickr.

Mozilla developers are currently debating how to drop support for the much-maligned <blink> tag.

With Opera moving to Google’s new Blink rendering engine, which, despite the name, does not support the blink tag, Mozilla finds itself in the strange position of having the only rendering engine that does in fact parse and display blinking text like it’s 1996.

Originally conceived (and implemented) as a drunken joke, blinking text isn’t just bad usability — usability guru Jakob Nielsen famously called <blink>simply evil” — it can potentially induce seizures. Even if you aren’t prone to seizures, blinking text is downright annoying.

But while few may mourn the passing of the <blink> scourge, really, where would we be without it? Despite never being part of any HTML specification the blink tag managed to take the early web by storm, driven especially by the design prowess of early Geocities homepage creators.

Indeed without <blink> would there have been a Geocities? And without Geocities would there have been a MySpace? And without MySpace would there have been, well, let’s stop there.

Sadly, the end of the blink tag will not mean the end of blinking text on the web. It will ruin this fabulous Twitter Bootstrap theme we’ve had our eye on, but there are still plenty ways to get text to blink — CSS and JavaScript are both, regrettably, up to the task.

So far there’s been little protest about removing <blink> support from Firefox. There’s been some debate as to where or not the CSS 2.1 text-decoration: blink; rule should go with it (yes!), but the tag itself is most likely headed for the dustbin of web history.

File Under: UI/UX, Visual Design

You Suck at Search

Image: Screenshot/Webmonkey

Even if you’re pretty good at searching, the majority of your website’s users are probably not. In fact, user experience expert Jakob Nielsen thinks most people are so bad at searching that site-specific search engines would do better to return navigation elements rather than actual search results.

Nielson’s research reveals that while more people reach for the search box to find what they’re after on a site, few of them “know how to use it.” The normally more prosaic Nielson writes:

It would certainly be nice if schools would get better at teaching kids how to search. But I don’t hold out much hope, because most people have the literary skills of an anteater (I was going to say, “a chimpanzee,” but these animals are too smart for my metaphor). Having new and varied vocabulary words spring from their foreheads wasn’t a survival skill for ice age hunters, so most people today can’t think up good queries without help.

Presumably Nielsen means literacy skills, not literary skills. That’s a pretty harsh critique, but if you’ve ever watched a less web-savvy friend or family member search for something you might be able to relate.

So how do you design your site’s search tool to help these “mediocre searchers” as Nielsen calls them?

Nielsen is critical of instant search suggestions, currently a popular way to help people using search tools. He claims that, while sometimes helpful, auto-complete tools can also be limiting because “users often view the drop-down as a mini-SERP and assume that it lists everything the site carries.”

The better way to do search according to Nielsen is to simply return product categories. The example in his report cites Costco, which, when searching for “television” will return all of its TV product categories rather than actual individual televisions. The product category links help users refine their choice and get to the televisions they actually want without having to wade through as many individual results.

It’s important to note that Nielsen is only advocating this sort of redirecting when the search term is “unambiguous and exactly matches the category.” As Nielsen notes, “until people begin to grasp the complexities of search and develop skills accordingly, businesses that take such extra steps to help users find what they need will improve customer success — and the bottom line.”

File Under: CSS, HTML, UI/UX, Visual Design

Simplify Responsive Design With ZURB’s ‘Foundation’ Web Toolkit

Foundation 4. Image: Screenshot/Webmonkey.

ZURB has released a major new version of its popular Foundation framework, a web development toolkit for quickly building responsive websites. The new Foundation v4 is a ground-up re-write that sees ZURB taking a mobile-first approach.

Like its erstwhile competitor Bootstrap, Foundation offers a set of HTML and CSS building blocks you can use to quickly develop basic site structure and design — layouts, typography, forms and other common design elements are all available.

There are three ways you can try out Foundation 4. You can download the straight compressed CSS and use that as a starting point for your own customizations. Alternately you can customize your build of Foundation, including only the elements you need; or you can install the SASS version of Foundation and customize it within your SASS code.

If you’re upgrading from Foundation 3 be sure to read through ZURB’s migration guide as the syntax for the grid and other elements has changed.

The real power of Foundation 4 doesn’t really come into play unless you go with the SASS option. Thanks to SASS’s “mixins” concept you can now use the grid tools in Foundation 4 without littering your HTML with the various (purely presentational) grid class names. Using Foundation 4 within your SASS project also makes it dead simple to use only the components you need, for example, you can include the grid mixins, but skip the typography if it’s not to your liking.

Be aware that the new mobile-first approach in Foundation 4 means browsers which don’t support media queries will only get very basic styling for the grid and other UI elements. Yes, that pretty much only affects IE 8. But, if your project needs more robust support for IE 8, there is a modified version of Foundation 4 with support for IE 8 (alternately, you could stick with Foundation 3).

It’s also worth noting that, because Foundation 4 is such a departure from the previous version, ZURB plans to continue supporting Foundation 3 for some time.

If you’ve got questions about Foundation 4, head on over to the official site and check out the documentation. You can also explore the code on GitHub — Foundation is one of the top 20 most-starred projects on the site.

File Under: Visual Design, Web Basics

Learn Typography Basics With ‘On Web Typography’

Web typography has come a long way from the days when the only way to get a custom typeface on a page was with images created in Photoshop. These days, thanks to widespread browser support for CSS @font-face and services like Typekit, a couple lines of code will add actual font files to your pages.

Go back to 2001 with that information and you would blow many a designer’s mind.

Of course if you’re not a designer, today’s overwhelming variety of type possibilities can be overwhelming. For some help deciphering it all and navigating the sometimes complex world of web typography, check out the video above of Typekit’s Jason Santa Maria‘s talk “On Web Typography.” The video comes from An Event Apart Boston in June of last year, but was only recently made available online (note that Santa Maria has since left Typekit).

After a whirlwind tour of the history of online typography, Santa Maria explores typography from a newcomer’s perspective, looking at how typography affects how you read and how to choose and combine typefaces for a better looking, easier to read site. It’s about an hour long, but you’d be hard pressed to find a better intro to and overview of the art of typography.