In this article we’re going to look at CSS design mistakes to avoid when creating your layouts. All of these tips are designed to help you write better code and to make it more effective when working with other people who might have access to your files. So let’s get started.
1. Not Planning Out the Layout in Advance: This error is a common one, yet is easy to avoid, by taking the time to plan out your site – on paper. This will allow you to see how the different elements work, or not. And if something doesn’t work, you have the opportunity to fix it on paper instead of with code, which could be a time-consuming task.
2. Not Using Vendor Prefixes: Since the CSS3 specification hasn’t been finalized it’s necessary to use vendor prefixes when working with CSS3 elements. The down side is that these can be daunting to remember. A solution is to use TopStyle 5, which will automatically add vendor prefixes to your layouts.
3. Not Accounting for Different Browsers: In years past this wasn’t so important, but now with the lines blurring between different devices, it’s wise to build sites with responsive design and use a combination of fluid layouts and media queries. Not only that, but it’s wise to build designs for desktop, tablet and mobile devices. Two programs I recommend for this are TopStyle 5 and Adobe Dreamweaver CS6.
4. Not Spacing Out CSS Definitions: When laying out a CSS document it can be tempting to reduce space with your code because it will help to load the pages faster but the down side is if you have to edit the document later or if you pass on your design to someone else. I recommend spacing out CSS definitions and to use line breaks to make the CSS easier to read and use.
5. Not Making Notes in Your CSS Files: Making meticulous notes in the document is a wise idea. There are several reasons for this: Human memory is fallible. Using commenting will get you back up to speed quickly. It will also help with understanding the code, which is especially important if someone new has to work with your documents. .
Adobe Dreamweaver CS6, uses heavy commenting in it’s template layouts.
While it’s possible to reverse engineer the CSS using a program like Firebug, it’s time-consuming to do so.
6. Don’t Use Animation Without a Clear Purpose: Both HTML5 and CSS3 allow for animation but before you use it, you need to have a good reason for it. As an example, does the animation show off a product or design process? Or is it just a cool effect? If it’s the latter, avoid animation because it will detract from your layout.
7.Not Validating Your Code: This applies to both the CSS and HTML markup you create, whether for a client or yourself. This is an important step because it will fix code errors before they happen and save you time fixing them after the fact.
Bonus Tips
Here are a few extra tips that will make a difference to your layouts.
Avoid Using Large Background Images: While they can look attractive, they also eat up a lot of bandwidth. Instead of large images, make use of CSS3 gradients and use images sparingly. This will allow your pages to load faster.
Lack of Video Controls: While not necessarily a CSS design mistake, this is one topic worth mentioning. As a user, one thing that drives me up the wall is going to a website where the videos are set to play automatically. Worse are videos that you cannot stop once they begin playing. Some designers improve the user experience by allowing you to stop the video but they compound that mistake by not including navigation that will allow you to move forwards and backwards in a video if you wish to do so.
Too Much CSS: While CSS3 allows for a lot of control, it’s possible to go overboard. Sometimes it’s better to use images instead of creating the layout with CSS, simply because it will take too much time to do it with code.
Conclusion
This gives you a few design issues to watch out for when creating your code. In combination with Tip 5, I recommend you go one step further and document everything. This accomplishes several things: It gives you a logical flow; it’s also useful when a challenging task takes place. If you document everything, and you have to revisit the tast at a later date, it will be easy to get back up to speed. If not, you might have to relearn a complicated process all over again, which could waste a great deal of time.
About the Author:
Nathan Segal has been working as a Freelance Writer for 14 years. In that time, he has written 527 articles and published six books.
His articles been published in many popular magazines, including: CE Tips (Consumer Electronics), Computer Graphics World, Database Journal, Mac Design, Photoshop User, Rangefinder, Smart Computing, The Computer Paper, Streaming Media World and Windows Expert.
He worked as an Associate Editor at WebReference.com for five years. He also wrote several feature columns on 3D and video tutorials.
If you love to travel in Canada, the United States and Mexico, check out Nathan’s travel blog at: TravelswithNathan.com. There are many stories here for you to enjoy about travel, how to protect yourself from online fraud, photography and more.
