Machine learning is changing the way we interact with our mobile devices. Our phones and tablets are now powerful enough to run software...
Designing for 10000 Screens: 4 Layout Tips for Responsive Web DesignKhyati Sehgal
Deciding on a site layout that is responsive and yet simple is challenging. A 2012 Google study speaks about how a website’s first impression makes-or-breaks its page view numbers. And today, responsive web design is a must. Page layouts, usually defined by how visual elements are arranged on a web page, are the easiest route to creating that first impression. A bad layout can compromise the usability of a website, while a good layout ensures that a visitor is quickly directed to what’s important, without having to hunt for it. For instance, consider the images below:
This is an example of bad layout. The site is cluttered with content, link and images. It isn’t clear what action should the user take next. Besides, so many bright color make it difficult for the eye to concentrate on anything at all.
This site, on the other hand, not only has a well-defined layout but has also made a justified use of color contrast. Plus, the clickable links are easily distinguishable, helping users easily navigate through the site. A responsive web design can
Here are four key factors every project manager must consider while dealing with layouts:
1. Choose the Right Layout
Fixed? Fluid? Adaptive? How do you know what works best for you?
Fixed layout restricts the width of a site to certain number of pixels. Usually, designers set the number to 960 pixels.
Using fixed-width layouts has given designers a sense of stability and control. If the width of your site is predictable across all browsers and devices, you can design the graphics with complete precision. However, as the screen sizes and resolutions evolve, the 960 pixels grid system is becoming obsolete and so are fixed-width layouts. In order to make the most of various screen sizes available today, most designers are moving from fixed to fluid, adaptive or responsive layouts.
Fluid or liquid layout, on the other hand, uses percentages instead of fixed pixels to define page width. Defining percentages means you need not worry about the screen sizes any more. Websites built on liquid layouts often fill the entire width of the page irrespective of how wide the browser is. But there are some major drawbacks to designs built on this layout. In case the browser is too wide, the designer may lose control over the content. For instance, a whole paragraph can look like it’s running as a single line across the page. On the other hand, the content might look too crowded on a narrow width page.
The need to establish an optimized presence across multiple devices has led designers to opt for either adaptive or responsive layouts. Adaptive layouts use static layouts that don’t respond until they’re completely loaded. Adaptive works to detect the screen size and load the appropriate layout for it – generally you would design an adaptive site for six common screen widths: 320, 480, 760, 960, 1200 & 1600. Adaptive is useful for retrofitting an existing site in order to make it more mobile friendly. This allows you to take control of the design and develop for specific, multiple viewports. The number of viewports that you choose to design for is entirely up to you, your company and overall budget. It does, however, afford you a certain amount of control (for example over content and layout) that you won’t necessarily have using responsive design. Generally, you would begin by designing for a low resolution viewport and work your way up to ensure that the design doesn’t become constrained by the content. It’s standard to design for six resolutions as mentioned above. However, you can make a more informed decision by looking at your web analytics for the most commonly used devices and then designing for those viewports.
Most modern websites you visit today are adaptive in nature.
Pro Tip: Planning to make your static site adaptive? Don’t miss out on this piece of advice from Google.
2. Distribute Content over Grids
A modular or grid-based structure to distribute content across a website is really popular among web designers. And for a good reason, as it sets rules and brings in a lot of control over content. This just gets more functional when used in the modern responsive web design.
The idea is to build a website with content divided into discrete modules that flex based on screen size. This makes the content easy to view and experience. You can choose from various types of layouts like 12-column, 16-column, 24- column grids or anything in between. Though the width of a grid depends on the overall width of the design, most developers prefer to fit their content using the 12 and 24 -column grids as they offer a variety of choices in terms of layout – 1 block 24-column, 2 blocks 12-column and so on. The options are endless.
Pro Tip: Want to learn the ABC of grid-based layouts? This comprehensive guide by Smashing Magazine lists down some great tips, tricks and resources.
Split the Screen
If you are looking at breaking the conventional moulds of layouts that other websites follow, try experimenting with the content placement but with caution. Try using split screens or a vertical divide, especially if your design has two primary elements of equal importance. The usual approach of structuring the design in the order of importance doesn’t work when you have more than one element to promote. Split screens can emphasize both elements and allow users to select between the two instantly. Take the example of Dewey’s Pizza. The site is neatly split into two halves, one bringing in focus to their brewery services while the other one is highlighting important news about their pizzas.
Another instance where split screens serve the purpose is when you wish to convey equal importance to two elements (?). Take the case of rickanddrew.com. This is a design portfolio site for two brothers Drew and Rick Baker. The split screen on the homepage brings into spotlight the faces of both brothers.
4. Keep Your Content Responsive
In the responsive era, content has become more important than ever. While working on responsive sites, you need to put in deep thought on including effective text, scalable images and possible layout hierarchy. You need to reimagine everything.
The copy you use on your site should be crisp and concise. Your copy must be able to fight distractions like social media, overflowing inboxes and everyday boredom. Users stay on a web page for less than a minute. So, the mantra is to tantalize and hook! Images, on the other hand, should be fluid – something which jumps to life on every screen size. However, unlike content, images are not fluid naturally. One way around this is to specify image size in relative units rather pixels. The most commonly used relative solution is to set the maximum image width at 100 percent. Images with this CSS will automatically scale to fit as the browser window narrows.
<img src=”royal-enfield-motorcycle.jpg“ style=”max-width:100%;height:auto;” alt=”Royal Enfield Motorcycle, photographed by Renjith Sasidharan“>
Another way is to measure the width of the image as a percentage of the overall width of the page. So if you wish to place a 500px X 600px image on a 1200px wide page, simply calculate the percentage of space the image’s width will take up on that page:
So that would be, (500) / (1200) * 100 = 41.66%
Now plug in this value in place of the width of the image
<img src=”mount-mayon.jpg“ style=”float: right; width: 41.66%;” alt=”A photograph of Mount Mayon, Phillipines, with the ruins of Cagsawa belltower in the foreground“>
However, this calculation won’t matter until you’ve got the lighting right. Images on your site must look good when viewed under bright daylight or in dim office lights. Look at images in varying lights and angles and draw contrast for high clarity and tweak them accordingly.
Refer here for more CSS Layout techniques.