No doubt developing a website can be daunting but the real problem arises in its appearance and usability. Although we are human, we all make mistakes and as a web designer, you’ll probably make a lot of mistakes. Many web designers forget that website wasn’t meant for themselves but for users and that’s why their website creates the worst user experience. But, learning from these mistakes makes them a good web designer.
Here we would like to highlight 11 CSS mistakes every newbie, as well as an experienced web designer, must avoid.
Most of the people are using a class which is not a good habit. It is recommended to use IDs instead of class; it helps the browser to access DOM component easier and much faster. Because IDs have special abilities in the browser called “hash value” in the URL.
Use of long selectors is one of the most common mistakes that people made. For example “.blue-with-green-background” selector doesn’t make sense. The naming should be done based on the functionality of the component. For instance, you’d use “.content-title” which is more meaningful and explains all about the selector.
Not all CSS is as easy to understand at first glance. In that case, it is important to include comments in your CSS. If a specific section of your CSS is complex, explain it in short providing comments. It will not only help others to understand also help you to find a particular section in future.
Use of too many Fonts
CSS is not a place to experiment with typography. It’s better to use one or two or maximum three fonts to deliver your message.
It makes your reader more comfortable to read your content. Avoid picking an awesome font or too many fonts for a single page, instead, use web-safe fonts.
Split your stylesheets
It is suggested that do not use a single stylesheet for everything as it will force it to take a long time to load. It would be a good idea to split stylesheets into various portions for better maintenance and modularity. You could make it easier for you to find a specific style if you need to change by splitting it into various divisions like footer.css or header.css.
When you’re writing a CSS for your website, organize your content. A website’s content structure is one of the key factors that will make it a success or failure. You can make your code a little easier by organizing it using HTML (Heading, sub-heading, paragraphs etc) and CSS. It will not only helpful to you also provide the better user experience.
Do not repeat your CSS programming. It is beneficial to use DRY (Don’t Repeat Yourself) approach. In order to do, use CSS pre-processors like LESS and SASS which ensures that there is no CSS repetition made. It allows the web designer to reuse the code without writing it again and again.
Do not let your readers confused regarding where they should go to find appropriate information.
Make navigation a cake-walk using text or images. But make sure it is easy to understand because nobody has enough time to dig through your navigation to find required information.
It’s difficult to make a website that fit every resolution. But, make sure that your website fits inside the standard resolution 1024*768 avoiding horizontal scrolling. It causes a bad impression on visitors.
No doubt use of less whitespace reduces your CSS file’s size. If you are trying to include as much as content into a single page then that will make it massive and unreadable. Appropriate and proper use of whitespace makes it easier for you to present your idea.
As a good web designer, you’ve to make sure that your website is browser-compatible. Is your design appears same in different browsers? How will you know that? The answer is very simple – do some basic testing of your website on a different browser. It’ll be time-consuming but make a great impact on your skills and designing.
Hope you found it worth reading. At Metizsoft Solutions, we try our best to include most common mistakes every web designer make. Undoubtedly, there must be more than above mentioned. Avoiding these mistakes will make you a better designer. If you’ve made any other mistakes, we’d love you to share them with us. Leave your comments below.