Advertise here with BSA

Writing your first piece of css code can seem really weird if you’re used to working with tables, or just haven’t written code before. In this article I want to talk about 10 different ways you can write proper and clean css code as well as streamline the process and ensure you’re getting the job done as quickly and efficiently as possible.

1. Always start with a CSS Reset

Writing CSS code can become a bit mundane when you’re having to write specific code over and over again just to get various browsers to display your layout the same. That is where CSS Reset’s come into play. With industry leaders like Eric Meyer releasing a pretty kick ass css reset stylesheet, there’s really no reason to not get all of your browsers ‘back to zero’ and build off of it. Some people have said that css reset stylesheets aren’t needed (Jonathan Snook being one of them), but once you get used to the reset and what items you’re coding, it becomes much easier to ensure that every browser is displaying items properly.

2. Indent your css rules for easier scanning

When you’ve got 500 lines of css code to sift through, it can become straining on the eyes. So, instead of writing out the css code like this:

.classname {
background: #FFF;
border: 0;
color: #252525;
float: left;
margin: 0;
padding: 0;
}

You can indent the rules to make scrolling through the file and finding the proper css classes and ID’s easier.

.classname {
	background: #FFF;
	border: 0;
	color: #252525;
	float: left;
	margin: 0;
	padding: 0;
}

3. Comments are your very best friend

In the spirit of keeping your stylesheets clean and easy to read, comments are going to be a great way for you to keep things structured and clean. By commenting out blocks of code, the scanning process we mentioned above becomes another 10X easier because you can scan and look for items such as the header, sidebar, content and footer code because you have each section of code commented like below.

 /********** HEADER code here **********/

Doing this will not only save you time scanning but will be great for your clients when you pass along the code – they’ll be able to find items easier, fix items themselves and not have to email you 4-5 times a week for simple 1-2 minute changes. The benefits of clean css code goes much deeper than making the file look pretty.

4. One Rule = One Line … Multiple Rules = Multiple Lines

Following the simple rule above, you can cut down on the clutter in your css files drastically. Below you will see the two different ways you can write your css code out – some people swear by putting everything on a single line, but I tend to believe in the above mentioned rules: one rule = one line, while multiple rules = multiple lines.

.classname { border: 0; }

.classname {
	background: #FFF;
	border: 0;
	color: #252525;
	float: left;
	margin: 0;
	padding: 0;
}

5. Stay consistant with your code

I’ve not only stayed cosistant in my css styles throughout stylesheets I’ve written, but if you look at the various css code I’ve displayed in this article, you’ll see I have actually stayed consistant with them. It isn’t something you’ll tend to visually notice on a daily basis, but over time you’ll begin to pick up patterns on how you write specific lines of code and it will throw you off if you ever write something different. It makes things harder to find and runs your time up when you could have easily cured the problem by sticking to a specific style of writing for your css stylesheet files.

For instance, if you’re writing everything in blocks of code to separate different items of the page for easy editing, keep with it. Don’t change the way you write your code every time you write a new stylesheet. It’s just not practical.

6. Separate your hacks and conditional elements

Some people will swear against using any css hacks and scream something like “if the user can’t upgrade his browser, to hell with him!” – which we all know is not something everyone is in the position to say. So, writing conditional elements and various css hacks in your files becomes pretty much routine. But the idea that all of it needs to be in one file is wrong (in my opinion). Separating them from your main style.css file will allow you to make edits and adjustments to the hacks and conditional elements easier, without effecting your main css code.

A sample of how to separate your files could be like the code below, which would give you a separate stylesheet if your viewer is using any internet explorer browser less than IE8, along with your main style.css file and a print.css file (make sure you add the proper “” characters at the beginning and end of each line in the code below):

     link rel="stylesheet" type="text/css" href="/css/style.css" media="screen, projection"
     !--[if lt IE 8]
       link rel="stylesheet" type="text/css" href="/css/ie.css" media="screen"
       ![endif]--
       link rel="stylesheet" type="text/css" href="/css/print.css" media="print"

7. Learn (and use) shorthand code

Shorthand css code will allow you to speed up the writing process, cut down on clutter in your stylesheets and will allow you to find things much easier. So, why do so many people still write out their css in a long hand format like this?!?!

.classname {
	margin-left: 1px;
	margin-right: 2px;
	margin-bottom: 4px;
	margin-top: 1px;
}

Writing the above code in shorthand format allow things to look so much cleaner. Shorthand code also follow the clockwise writing format – so each number (as seen below) goes like this: top, right, bottom, left.

.classname { margin: 1px 2px 4px 1px; }

8. Create and use a table of contents

Writing in a table of contents in the beginning of your stylesheet will allow you, as well as anyone else viewing your css file, to find where the specific items in your code are before they even have to scroll. Need to find and edit your content code to change a color of a specific piece of text? Looking at the table of contents shows you that it’s the third header down in the css file. Coupled with the rule from above about adding in commented areas to separate blocks of code, this will help keep your code lean and mean – plus, very easy to edit.

/*****************************************************
1. HEADER code
2. NAVIGATION code
3. CONTENT code
4. SIDEBAR code
5. FOOTER code
*****************************************************/

9. Keep your class and ID names easy to follow

There’s nothing worse than going to edit a piece of code, only to find that they named their css code like this:

.wackyblueline5 { ... }
.leftsidesection { ... }
#bodyleftcurve2 { ... }

Picking the proper naming structure for your css classes and ID’s can help you dig through your stylesheet files as well as your html files, to edit the code. I would recommend sticking with names like this, which keep things clear and easy to understand:

.sidebar-title { ... }
.postwrap { ... }
.main-navigation { ... }

10. Alphabetize your css code for easier reading

This is one tip that I’ve just come to realize is actually worthwhile and one that I’m beginning to use on a daily basis when writing css code. Alphabetizing your rules will allow you to easily jump in, find the proper line of code you need to edit, change it and move on. Check out the code below and see how the beginning letters of each line go in alphabetical order, which allows you to easily scan and find the proper line. Looking for font-size? well, you know where F comes in the alphabet, right? So finding it in these lines of code will be much easier.

.classname {
	border: 1px solid #dedede;
	color: #000;
	font-size: 18px;
	line-height: 24px;
	margin: 48px;
	padding: 0;
	position: relative;
	z-index: 101;
}

What about you? Any tips for us?

I know the readers here are highly skilled so I would like to pass the baton on to you and let you weigh in, in the comments section with what your thoughts are on these tips and also share tips of your own. I’m looking forward to finding out what you think works best. I hope you enjoyed the article and would love if you spread the word through your various social media profiles. Thanks!

Advertise here with BSA

When building a new website or re-designing an existing one, web designers are faced with all kinds of significant challenges, including keeping the client happy, creating a site that gets results, and catering to users at the same time. During the design and development process it’s easy to get distracted and overlook the significance of usability. Since we’re the ones creating the site, we know it much better than any visitor will, and sometimes it’s easy to forget about the impact on users.

Building a truly usable website requires the right kind of priorities and testing. With the emphasis only on creating a great-looking site or one that is effectively monetized, usability can easily wind up taking a back seat. Throughout the design and development process, make an effort to view the site as if you were a first-time visitor and see if it changes your opinion on the strengths and weaknesses of the site.

In order to improve the usability of your work, focus on specific aspects of the design that will influence users the most, and make sure that the site holds up in these areas. Here is a look at 10 things to consider.

1. Clear and Logical Navigation

When usability is mentioned, navigation is usually part of the discussion. Without the ability to easily move through the website, visitors are unlikely to find what they want and they’re more likely to leave quickly without really getting to know more about the website or the company. Clear navigation on the other hand will make it simple for visitors to maneuver through the site as they choose.

The navigational approach will greatly depend upon the type of site. Blogs, for example, tend to have navigation that is not quite like any other type of website. The typical blog visitor knows that post titles on the front page are links to full posts, that category links are usually in the sidebar and that date-based archives will allow them to browse through older posts. E-commerce websites will have a different approach entirely, which will focus on helping visitors to find the right products. All of this comes back to usability. When visitors arrive at a specific type of site, they’ll expect certain things, and navigation is a big part of this issue.

2. Clear Communication

Have you ever been to a website where you have spent a few minutes looking at several pages before you could even determine the site’s purpose? I sometimes come across sites that do a poor job of communicating the products or services provided, and I usually wind up leaving if I can’t find something that’s understandable. One of the key issues involved with usability is communication.

There is so much that is involved in communication online. Headlines, taglines, images, colors, design styles, they all say something to visitors. An effective and usable website will clearly communicate it’s message to visitors, and ideally that message should be consistent throughout the website.

3. Targeted, Focused Content

The actual content of the website is often overlooked in discussions on usability, but it will have a strong impact, whether positive or negative, on the experience of visitors. A good website will have a specific audience that it is targeting, and content that is catered to suit this audience. Whether the content consists of blog posts, products for sale, service descriptions, tutorials, videos, or any other type of content, it should be created with the audience in mind.

A website with content that isn’t focused on a particular audience will lack a purpose and will be of little value to visitors. Remember that visitors are coming to a website to find something of interest to them. Hopefully, many of the visitors share similar interests (which will be the case if the audience is appropriately targeted), which makes it fairly simple to provide the right kind of content, you just have to keep the audience in mind.

4. Style that Suits the Audience

Every website will have some people that love the design and others that hate it. No design will ever please everyone, but it should be suited to fit the interests of the target audience. Although no two people will ever have exactly the same opinions on different styles of design, generally people who have similar interests or fit into different demographics will have similar likes and dislikes.

The style that is used for a site’s design should always be influenced by the target audience. For example, grungy websites are often used for extreme sports and for rock bands, two types of sites that are frequently visited by young people that will appreciate the grunge style. You won’t see an effective website for a retirement home with the same style of design. Similar differences in style can be seen in the likes of various cultures.

The look and feel of a website will have an instant impact on users. It’s possible that the minute they first visit a site they’ll feel more comfortable based strictly on the style of design. When a website uses a style that’s embraced by the visitor, it’s a subtle message telling them that they belong at this website and that they’ll fit in.

5. Lack of Interference

A user-focused website will not include such interferences as flashy or annoying advertisements, intrusively located ads, pop ups or pop unders, or anything else that can damage the ability of the user to read and interact with the site. Yes, some of these items are effectively used for legitimate purposes on many websites, but it’s my opinion that they help to accomplish the goals of the website owner and are not used for the purpose of improving the user experience.

If your priority is to create a site places the user’s needs and interests above anything else, interferences should be minimized or eliminated. In the real world, websites usually have other goals, such as making money, that don’t always match up perfectly with the requirements for maximum usability. In these cases you’ll have to use your best judgment, but be aware that any type of interference can take away from the user’s experience.

6 – Ease of Contact

A percentage of visitors to a website will want to contact the owner for one reason or another. Maybe it is to inquire about services that are offered, or maybe it’s about an issue they’re having with the site. Whatever the case may be, some people will want to contact you, and the ease with which they can do so will have a strong influence on their experience on the site.

Not being able to find a way to contact the owner can be extremely frustrating, and it sends a clear message to the visitor that their feedback is not a priority. A few times when I first started blogging I tried to track down other bloggers that were stealing my content. In most cases these people had no contact form or email address listed on their sites. Often times they had very little information about themselves or about their blog. What they did typically have was AdSense. The lack of a contact form communicated to me that their site was built to make money from AdSense and they didn’t have any interest in other bloggers contacting them about stolen content.

Since visitors will be entering your site on various pages, it’s a good practice to include a link to contact information on every page. Think about where you typically will go on a website to find this information. Many websites include a link to a contact page in their main navigation menu and/or in the footer. If the site is large and a link to the contact page isn’t feasible in the primary navigation, most visitors will go to an About page if they’re trying to make contact.

7 – Readability

The user experience is greatly impacted by the readability of a site’s content, particularly on blogs. Two different websites can provide the same exact content, but if one is formatted well for readability and the other one is not, there is a huge difference between the two for visitors.

Most visitors will have no interest in reading word-for-word all of the content on a page. Being able to quickly scan a page or an article for relevant content is very important. You can make this easier on visitors by using whitespace, bold text, headers and sub-headers, lists, etc.

8 – Not Focused on the Website Owner’s Wants

A user-focused website is, by definition, giving priority to the wants and needs of the users. This means that the priorities of the owner will be secondary. Of course, it’s still important to achieve the purposes for which the website exists, such as selling products, but it needs to be done in a way that focuses on the user. Rather than thinking about a website being created around a product or service, think of it as being created around meeting the needs of the user and allowing the product or service to be a part of that solution.

A website’s visitors will be able to tell when they are not being considered by the owner or developer and when the only priority is to get something from them. Obviously, this is not the way to enhance the user experience and make visitors feel at home on the site. In most cases it’s possible to accomplish the goals and objectives of a website and the company as the same time as meeting the needs of users.

9 – Anticipation of User Issues/Questions

Regardless of how well the designer creates a site to meet the needs of users, some visitors are bound to have questions or issues while on the site. The development of a user-focused website should include consideration of likely issues so that they can be addressed easily. Although you will never be able to avoid all of these situations, minimizing the number of unresolved issues will go a long way in improving the user experience.

If you’re seeing signs of problems, such as an unusually high number of questions through a contact form or a very high exit rate from a particular page, steps should be taken to address the issues that exist and make the site more user-friendly.

10 – Accessibility

The topic of user-focus can never be complete without mentioning accessibility. If a visitor is unable to access the site, it is seen as the ultimate sign of a lack of user-focus. In truth, most websites are not 100% accessible. What’s most important is that your site is built to be accessible to your target audience. For example, a slow-loading, flash-based site with lots of elements to hog bandwidth may not be usable to absolutely every visitor, but they can still be effectively used in some cases where the target audience will have access to the site and all of its features.

The issue of accessibility is obviously too big to cover in depth in this post, but it is extremely significant in the context of user focus. Ideally, a site will be accessible and usable for all visitors, but you certainly want to make sure that it’s at least catering to the target audience.

What’s Your Opinion?

On the subject of user-focused websites, what do you look for as signs of designer and website owner’s priorities? As a designer, what are your goals for creating a website that meets the needs and desires of users?