8 months ago


36 The Principles of

36 The Principles of Beautiful Web Design Masonry Layout Figure 1.38. An example of masonry layout Another popular trend is to create what is called a masonry layout. A masonry layout makes content stack vertically to fit in the best way possible. An example website for this type of layout is Pinterest 30 , shown in Figure 1.38 . Images and text fit vertically and horizontally to fill the browser. There is no focus on vertical alignment, because the point is for everything to fit as closely together as possible. Parallax Figure 1.39. An example of parallax 30

Layout and Composition 37 Parallax scrolling has exploded in popularity. The concept is that a stationary image is placed in the background, but that the rest of the site scrolls over the top of it, creating a dimensional effect. TEDxGUC 31 , shown in Figure 1.39, is a example of parallax scrolling at its best. As you scroll, some objects scroll, while others stay stationary. This effect is popular because it gives a feeling of being immersed in the site. Resizing: Fixed, Fluid, or Responsive Layouts Back when we were drawing our first layout blocks with pencil and paper, I explained that the outer rectangle we were designing within was the containing block. In print design, the containing block is a physical object like a business card or a billboard. On the Web, our container is the browser window. Should the design fill the browser window, or should it have a set width? This decision is one that has plagued web designers since the very beginning—all the way back to the days when we used tables and spacer.gif files to lay out web page content. Fixed Width Layouts I mentioned the 960 Grid system earlier, which is used to create a fixed width layout. A layout is termed “fixed width” when the overall width of the website is a set number of pixels. The example 960 grid layout is 960 pixels wide, and centered in the browser. If the user resizes their browser window to be wider than 960 pixels, the space from the edge of the browser on the right and left sides of the website will grow equally. This is fine for larger displays, but when the user has a browser window smaller than 960 pixels wide (such as could be the case on mobile or tablet displays), the site is clipped, and scrollbars will appear. It is generally considered to be acceptable for users to scroll vertically to view more content, but having them scroll in all four directions is undesirable. Fixed width layouts used to be commonplace, because the fixed dimensions meant that layouts originally designed in Photoshop could easily be rendered in the browser, but have been overtaken by fluid and, increasingly, responsive layouts. Fluid Layouts A fluid or liquid layout is designed with percentage-based widths, so that the container stretches when you resize the browser window. These layouts take more thought to plan, as you have to foresee problems that might occur at every possible width. Sometimes pixel-width columns are mixed with percentage-based columns in a fluid layout, but the idea is to show the user as much horizontal content as will fit on their screen. Typically, fluid layouts take advantage of the minwidth and max-width properties of CSS, ensuring the container doesn’t become ridiculously narrow or wide. One reason some designers reject fluid layouts is because they think it impedes them when using a grid to create their designs. There are several resources available for designing fluid layouts on a 31

Layout and Design - In Easy Steps
Boot Camp
The Complete Guide to a High Converting Website
Web Site Design & Usability Testing - HIPNet
30 ways to create amazing web experiences on tablets
Download PDF -
How to build a department web site (starter pack) - University of ...
Responsive Email Design Guide - e-Dialog
Visual Design for Library Websites - WebJunction
Creative Services - Keiger Graphic Communications
slides - HTML5 Developer Conference