10 Tips to Create Effective CSS Layouts

In this article we’re going to look at ten tips to help you create effective websites, using CSS and CSS3 elements. CSS3 has made a huge difference in web design, offering greater flexibility and options for designers. As the specification continues to evolve, designers will need to make use of vendor prefixes to ensure compatibility with different browsers.

Step 1. Plan out the site first: Plan out your entire site in storyboard fashion on paper, plotting out all the screens and elements for each screen. When you encounter design problems, you can solve them on paper, first. When you’ve finished this process, you’ve built your site. The only other thing is to make it real.

Another design option is to make use of Adobe Edge Reflow, which can be used for creating a site protoype. After you design the site, you can extract the CSS for use in your layout.

Step 2: Consider your audience. Who are you trying to reach? What is the purpose of your site? Do you need animation to make your point? Are most users on desktops, tablets, or mobile? Knowing this will determine whether you start with a mobile first design and scale up from there or whether to build a responsive design for all platforms. If you build a responsive design, it’s important to use fluid grids which will allow your layout to scale your layout for different devices. In combination with fluid grids, Media Queries deliver different styles to different devices to give users the best viewing experience possible. As an example, you could create a group of styles that would only begin to function when the screen size is larger than 800 pixels.

Step 3: Whenever possible, use templates, scripts and software programs to reduce your workload. Generally, I use ><a href=”http://www.adobe.com/products/dreamweaver.html” target=”_blank”>Adobe Dreamweaver CS6</a> for most of my design work, though for certain tasks such as creating menus, I’ll use another program, like <a href=”http://css3menu.com/” target=”_blank”>CSS Menu 3.3</a>. I also like <a href=”http://www.topstyle4.com/” target=”_blank”>TopStyle 5 Pro</a> for creating gradients because the TopStyle offers visual feedback in dialog boxes, giving you an immmediate sense of whether the gradients will work (or not). While Dreamweaver offers the capability of creating the effects mentioned above, the included tools might not give you the effect that you want. Third party tools allow you to fill in this gap.

Step 4: When laying out the site, organize the CSS into easy to navigate sections with comments on the design that’s easy to read and understand, especially if you’re building the template for someone else. This will make life easier for the end user.

Step 5: Take advantage of CSS3 in your layouts for effects such as box shadow, gradients, text shadows, etc. TopStyle 5 is good for this because it makes use of dialog boxes for gradients and text shadows, which give you immediate feedback. You’ll also need to add the relevant vendor-prefixed properties with CSS3, to make sure it works properly with the various browsers. TopStyle 5 allows you to add those prefixes automatically and frees you, as the designer, from having to remember what these vendor prefixes are.

Step 6: When using images for responsive design, be careful. Images will retain their integrity when being reduced in size, but they will begin to pixelate if they’re enlarged too much. 20% enlargement is a safe figure. Any more than that invites trouble. I recommend using three different images for desktop, tablet and mobile sites. In addition, set the height and the width of images to auto. Don’t use a fixed size, like pixels.

Step 7: When using fonts, make sure to let the browser choose the font size. This is because fonts on Windows don’t appear the same as font sizes on other platforms, such as a Mac. This could cause problems with being able to read the text. If you do need to use a font size, make sure to use em, instead of an absolute size, such as px or small.

Step 8: Be careful with your design and allow all elements room to “breathe.” This is especially important with mobile site layouts. While the temptation is to place many elements on the interface, these will create clutter, interfere with the site viewing experience and detract from the look and feel. Make sure to allow for white space in your designs. Also, avoid the use of white text on black. This makes the text harder to read.

Step 9: Test all aspects of your code, one piece after another. Firebug for Firefox is one good way of testing your code and allows for non-destructive editing so you can test different aspects of your code, turn elements off, change settings and more.

Step 10: Validate both your HTML and CSS. A number of software programs, such as Dreamweaver CS6 and TopStyle 5 have validation options built into their software programs.

Conclusion

You now have an overview of steps you can take to build effective sites with CSS/CSS3. This is by no means a complete list. Many more steps could be added, though this will give you a foundation to work with. Happy coding.