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
- Progressive enhancement
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.
- 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.
- Responsive Design + Server Side Components
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.
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.
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.
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.
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.
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.
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.