Website design

Scale is the operating word in web design today. Advancements in CSS, HTML, and other web languages have enabled graceful scaling to new display resolutions and sizes, but website design entails much more than graphics and layouts. Designers are challenged to think of how the whole web experience might adapt for users of various devices. This chapter discusses how designers think about the web today, and how contemporary principles and methodologies affect every aspect of web design.

Principles and methodologies

The principle of progressive enhancement dictates that we start with the peanut! Source: Understanding Progressive Enhancement by Aaron Gustafson.
Progressive enhancement

Progressive enhancement is the idea that websites should be simple and functional at their core, with layers of complexity added for browsers that can handle it. In other words, a well-designed website is still usable even when CSS and Javascript are stripped away because it is built with semantic markup and leans on native browser functionality.

The principle that all users should have the best experience possible given their set-up applies to mobile, with this amendment: A website should look good and function well on small devices and scale for larger ones.

This handbook is readable and functional even when CSS and Javascript are turned off.
Responsive Web Design (RWD)

Ethan Marcotte wrote an article in 2010 that had a profound impact on web design. In it, he explains a technique that would extend the principle of progressive enhancement to mobile in a practical, efficient way. Basically, media queries, or conditional CSS, can be used to create flexible and fluid layouts that adapt to any screen. Sites that utilize this functionality are called responsive. Responsive websites are gradually replacing old-school designs that only take desktops into account. Surfing the web with a smartphone is becoming increasingly pleasurable as responsive websites grow in number.

Mashable redesigned their website so that it would be responsive.
Responsive Design + Server Side Components

Soon after Ethan Marcotte's article made its splash, Luke Wroblewski and others pointed out that responsive web design doesn't have to lean entirely on front-end code (HTML, CSS, and Javascript). Server-side scripts can boost website performance by serving up content appropriate to the device in use. In this way websites not only adapt to display size, but receive device-specific optimizations as well.

In Rethinking the Mobile Web Bryan Rieger describes why Yiibu decided to optimize their responsive web designs with server-side components.

Responsive websites

And here we are. Responsive websites adapt to make their content accessible to the majority of site visitors. Not only does the layout start small and scale up, but device-specific optimizations are layered on as well. To pull this off, every aspect of website design is progressively enhanced. In other words, websites aren't just built, but bloomed. Let's take a look at how they bloom in a few specialty areas.

Visual design

Media queries make it possible for visual designers to finesse the layout and appearance of the website conditionally, based on the width of the browser viewport. For example, the designer can style the website such that it is clean and linear at a smartphone-sized width, organized into a banner and columns at a laptop-sized width, and framed in graphical flourishes at an HDTV-sized width.

This handbook, for example, is designed to always read comfortably. If you are on a desktop or laptop, try resizing the browser window to see how the layout adapts in real-time. No programming was required to do this, just simple CSS.

The Treehouse blog is lovely, even on a little Palm Pre.

Information architecture

Four seconds is the maximum amount of time site visitors will wait for a page to load. Smartphones do not necessarily have the processing power or signal strength to serve up large webpages in a tolerable amount of time. Information architects aggressively reduce the number of clicks to navigate, which ultimately benefits users of every device type. Well-designed websites employ search, filters, and AJAX, a technique in which content is added to the page in response to an interaction. These all increase users' control over the content presented and decrease waiting.

Clicking "Show more results" on Google Image Search reveals more muffins without reloading the page.
Smartphone users are only one page load away from browsing product images (the fun part) thanks to Zappos' thoughtful site architecture.

Starting with the smarphone experience, as opposed to the desktop experience, helps architects enforce prioritization: there is only room at the top of the page for one #1 piece of content. Also, since smartphones are generally less forgiving than desktops, bad architecture is hard to miss. This pushes architects to innovate from a foundation of creative problem-solving, which benefits even the desktop experience.

Zurb has provided sketchsheets to help information architects plan their responsive website.

Development

Media queries allow designers to approximate the device in use, but exact information can be queried with AJAX and server-side scripts like PHP and Ruby. Developers use exact device-type information in two ways. First, throttling the amount of content sent to each user ensures people with slow devices see less content fast, while people with fast devices see more content fast. Fast! People really hate to wait.

Mike Tuupola's lazy load demo loads images only after they've come into view. In other words, images are loaded as the user scrolls down the page instead of all at once.

Second, conditionally omitting or swapping out interactions can prevent confusion and enhance the overall experience. For example, people with old iPhones are not offered file upload functionality because their version of iOS doesn't support it. Modular architecture makes it possible for the website to receive device-specific optimizations as it adapts from smartphone to tablet to desktop.

Google.com/calendar is one web application (with one URL) composed of responsive components that are swapped out depending on the device detected.

The concepts discussed so far are not all that novel for today's generation of web designers. There are a lot of templates and resources circulating within the design community that make it fairly easy for techies to join the bandwagon. A more complex subject is the decision to build a web experience as an application instead of a website. In the next chapter, we'll talk about how websites and web applications differ and how to approach web application design.

comments powered by Disqus