38 The Principles of Beautiful Web Design grid, including a fluid adaptation of the 960 Grid System. 32 Ultimately, though, the decision to use one type of layout over the other should really be determined by the target audience, and the accessibility goals of each individual website. The pros and cons of each layout type are fairly well-defined, as Table 1.1 shows. Table 1.1. Fixed versus liquid layouts: the pros and cons Fixed width Pros ■ gives designer more control over how an image floated within the content will look ■ allows for planned whitespace Cons ■ can appear dwarfed in large browser windows ■ takes control away from the user ■ improves readability with narrower text blocks Liquid width ■ adapts to most screen resolutions ■ challenging to read when text is and devices spanning a wide distance ■ reduces user scrolling ■ harder to execute successfully ■ limits or imposes on whitespace With these pros and cons in mind, I’ve designed more fixed-width layouts than liquid. I like having control over how the content will display, and working with the background space. On the flip side, I sometimes enjoy the challenges that liquid layouts bring to the table. But, regardless of personal preference, it’s important to put the needs of your client first. If you’re deciding on the width of a fixed-width layout, you need to think about the audience for which you’re designing, and create a layout that meets their needs. Responsive Design The established best practice for all websites now, responsive design has become the solution to a problem that was once considered the web designer’s nightmare. With the explosion of mobile technology, gone are the days of designing websites for desktop monitors alone; now we have to deal with smartphones and tablet devices. Businesses don’t want to miss out on those valuable visitors, and so we’re tasked to design web experiences for them, too. Before responsive design, accommodating the growing number of mobile devices meant that web designers were designing multiple versions of the same site for different screen sizes: obviously not an ideal solution. Responsive design is an attempt to create a single site design that can adapt its content to look great on all devices. Below in Figure 1.40 is an example of a responsive website 33 . The site responds to different 32 http://www.designinfluences.com/fluid960gs/ 33 http://d.alistapart.com/responsive-web-design/ex/ex-site-flexible.html
Layout and Composition 39 screen sizes, but the content is still viewable, and the design still looks consistent and beautiful on all three. How it Works Figure 1.40. A layout that adapts to mobile, desktop, and JumboTron Responsive design uses CSS to control how the content will look, depending on the screen size of the device displaying it. One way of doing this is with media queries. The site is instructed to determine a device’s screen resolution. In the stylesheet, you create breakpoints, which are used to specify the size and structure of elements depending on the screen width of the device. These
Novage Communications is a full-service website design agency offering affordable website design and development, ecommerce websites, SEO services, logo design and online marketing solutions. We are working with businesses throughout Singapore. Established in 2010, we are a website design and web development company trusted by leading brands and over 400 established businesses.