DO: Keep your page structured In the recent months we’ve seen an explosion of great grid layouts and css files. The most famous (in my opinion) being 960.gs and one of the cooler, more light weight grid systems being the 1kb grid. Following after the structure and balance of a great magazine/newspaper, these grid systems help lay out information in a structured and easy to follow format. DONT: Just place boxes everywhere We’ve all seen these types of websites before – 20+ boxes, all different sizes, nothing lining up properly and not on piece that actually grabs your attention because you’ve just ran into a whirlwind of craziness. if you’re a web designer and you cannot properly place items in a structured environment, well, I would’t really call yourself a web designer. DO: Focus on what’s important Are you building a website for a business that sells one specific product? If so, make sure that’s the focus of the home page. Allow yourself space on the inner pages to place calls to action for that specific item. If you’re building a blog that gives out freebies or writes tutorials, make sure they’re getting the proper amount of focus and attention. Websites like WOO Themes do a great job and putting forward what their main focus is – wordpress themes. DONT: Place irrelevant ads across your page If you’re going to try and make money from your website/blog, do yourself a favor and lay off the excessive advertisements. If your page loads and has 70% ads and only 30% content, odds are high that people will leave and never come back. Making your ads the #1 priority is a bad idea. Try blending them in and making sure they don’t take away from the content. DO: Choose the right color scheme Knowing what your readers emotions are will help you in choosing the proper color scheme. You won’t want a bright and ‘loud’ color scheme if your website is in the meditation niche. You’ll notice that most punk rock bands have CMYK color schemes (pink, yellow, black and blue), while a doctor/medical website will generally stick with a lighter, more ‘open’ color scheme DONT: Overdo it with 20 different colors Having every color that is inside the 64 set of crayons on your screen will not only look bad, but it will annoy your readers and drive them away. Your colors should blend well together, not clash. If you’re not good at picking color schemes, I’d suggest a site like Colour Lovers which has user generated color schemes posted. Find the right color scheme (at most, 5 colors) and see how much better your designs turn out. DO: Make it easy to scan your pages People will not spend 5 minutes trying to figure out what your website is about and what it has to offer. The best way to ensure you’re getting the right information out to your reader is to make the page easy to scan. Use proper H tags (similar to how this post is using h3 tags) to focus on the important items. You can also use pull quotes, block quotes and images. DONT: Write one paragraph per page that is 1,000+ words long If there’s one thing that stops me from subscribing to a blog is that the posts are literally 1,000+ words and have no paragraph breaks. This, and they normally don’t even have blog words or any indication that there’s anything important inside their content. Break your content up and make it easier to read – please, and thank you. DO: Keep it simple stupid It’s a proven fact that sign up forms with more than 3 items (usually – name, email & one other item) will have a significantly lower sign up rate than the easier forms. People HATE doing things for too long – so don’t over complicate things. Make things as easy as possible for your readers by pretending a 4 year old will be viewing it. It definitely helps get things out in the open where they need to be. DONT: Go on and on (and on) about nothing Rambling, excessive LOL’s, too many smiley faces and random dribble will drop attention spans of your visitors. You want them to stay – act like it. If you have a personal blog where you write about your life, thats one thing, but to randomly post about what you ate, or where you went yesterday on your business website will definitely drive people away. DO: Focus on killer copywriting Words matter. Keep them short, sweet and to the point. If you have trouble writing copy that attracts the readers attention to where you need it to go, hire someone. Copy is just as important as the design of your website. Choosing the right words for sign up buttons, page headings, navigation items and calls to action can be the difference between 50% sign up rate and a 90% sign up rate. DONT: Stuff your pages full of keywords Google isn’t stupid. Neither are your readers. If your page has the main keyword for your site stuffed into each paragraph 30-40 times, it will not only read very poorly, but you’ll be penalized. Writing should flow naturally and should only mention your keywords where they fit. DO: Set your navigation up properly If you’ve got a sign up page on your website, maybe you’ll have your main navigation in a blue color, while the sign up button is in a green color. Regardless, you’ll want to make your navigation easy to spot and easy to use. DONT: Make your readers search to find something Your readers shouldn’t spend 30-40 seconds trying to find a contact or about page. They also shouldn’t have to click through three pages just to get to a sign up form. Get the important things out in the open. For the items that aren’t required to have a strong focus on your website, you might want to invest in a search box – I HATE when websites don’t have a search box. Web design 101 maybe? DO: Optimize your load times If there’s one recurring theme in this entire article it is the fact that visitors are impatient. You need to build your website with optimal speeds and allow your page to load in around 1-2 seconds. You can do this by making sure your css files are compressed, using the google hosted javascript files and ensure your page is coded and designed with optimal speeds in mind. DONT: Make everything on your page an image Text on a website is there to be exactly what it is -text. There is no need to make the text blocks of your site jpg images. Also, making your website background 1MB or more in size will also cause your page to load very slow. I’ve seen websites also use 2 different javascript libraries and load 10+ plugin scripts for them in the headers and their websites took around 20 seconds to fully load. DO: Choose the right fonts and sizes I’ve only recently got into typography and have realized that it is a highly important aspect of web design. Making your section titles the right size and making sure the fonts you’re using will greatly effect the experience your visitors have when viewing your websites. Generally speaking, you should use one main font for the content and then you may switch the titles of the pages to a different font. DONT: Have 5 different fonts in 10 different sizes Picture this: Page titles are in times new roman, content for those pages are in Arial, navigation links are in comic sans and the sidebar is in impact (yes, that impact). How ugly does that look? Now, remember that vision the next time you want to build a website with 5 different fonts. DO: Make your page visually appealing The world may tell you that people don’t judge a book by its cover, but thats a lie. The first thing people see is the web design you’re branded with. That first impression better be a good one. Utilize textures/gradients that give your website depth and draw attention to the beauty of your design. I would strive to ensure each of your website designs are accepted to galleries like css mania. DONT: Throw a bunch of crap together and think you’ll do well Animated gif’s are your first no-no. After that comes the marquee scrolling text and the jumbled mess of text and graphics that resemble a 13 year olds myspace page. It isn’t cute and in case you’re not aware of it, it’s no longer 1980. Things have changed and people don’t expect to see something that looks like a 7 year old made it. If you’re a professional, act like it and make sure your designs are up to par. Source
Awesome post! While most of this should be common sense, all too often do we this not being the case. Hopefully people will see this and improve their web sites accordingly. +REP Added.
Some good points. Stuff people SHOULD know but often forget or don't encounter until it's too late. BUT, I do take issue with ONE of them To which I reply: DON'T : Use off the shelf CSS frameworks. They invariably rely upon presentational class-names and methodologies that defeat one of the reasons you should be using CSS in the first place: separation of presentation from content. YUI, 960 - they're rubbish that result in rubbish markup. Classes and ID's should say what things are, NOT how they are going to appear, and CSS frameworks do the exact opposite of that. However, the following are all an amen. Great example of this is how sourceforge was set up five years ago, where by the time you landed on the third page you were effectively screaming "Oh for **** sake, just let me download the **** file already!". Links that say "Download now" or "Download here" should download NOW and/or HERE, not three pages later!!! This one you see many 'designers' pretty much ignoring these days with the websites that are over a megabyte in size and built from 200 separate files. The separate files thing is particularly annoying since it means two or three handshakes for every file at anywhere from 150ms to 2 seconds per depending on latency (aka ping time) to/from the server. I've seen so many websites that are under 200k in total size that still take a minute to load on my 22mbps connection JUST becuase they use hundreds of tiny images, tens of javascript, and a whole host of other nonsense. Sliding doors, Eight corners under one roof, CSS sprites - these all let you use single images in the place of dozens reducing that overhead, and are techniques any serious developer should know... Gets even worse when they use 'javascript for nothing' thanks to garbage frameworks like mootools or jquery to either do CSS' job for it, or for goofy animated crap that just gets in the way. In that way these "gee ain't it neat" technologies are just as big a pile of /FAIL/ as using flash for navigation or even banners... after all, there's a reason it's called flash and not substance. ... and I don't care how 'pretty' it is, a 256k bodyBackground.jpeg is still 40% larger than the UPPER LIMIT I's allow all files for a single page on a website total, and three times my usual target. If you have a website that's half a megabyte or larger in more than 60 files - this is directed at you! This one is sometimes not what the client wants for appearance, so there are times you will replace text with images - this shoud be restricted to small elements like headings or buttons where possible and not any flow text. WHEN you resort to using an image for text, use an image replacement technology like gilder-levin so that people browsing with images disabled and search engines have something to look at! You can use images for buttons/headers, but you have to know HOW to do it. If it's text, it should be text in the markup, not an IMG tag. (oh, and text-indent:-999em; for image replacement is also a miserable /FAIL/) This is one that it often seems most people fail to grasp. Screens come in different sizes, resolutions and dot-pitch, operating systems come with different font rendering engines, and some operating systems like windows even allow the user to change the default size - your pages should obey all that. A windows user sets their browser to 120dpi/large fonts (win7 125%) then your pages should AUTOMATICALLY increase the font size accordingly, which means %/EM or PT. Content/flow text should be in %/EM whenever possible. PX should not be used except when interacting with images, and even then 12px should be considered the smallest acceptable size, and I get jittery below 14px. If you are using 10px or 11px, you are alienating a large portion of potential viewers and if I meet you in a dark alley... well, those of you in the first few rows will get wet. Which is why 99% of the time my preferred setting on body is font:normal 85%/130% arial,helvetica,sans-serif; That's a perfect size for just about everybody. You forgot splash pages, auto-playing music, and asshat **** like building entire websites out of flash.
Excellent do's and donts. I'm aware of a lot of what you mentioned above, but you also enlightened me on some thing I didn't know.
I have gained great ideas from the outstanding Do's & Don'ts of Web Designing displayed above. Although I am already aware some of them but still I am so thankful.
Some of them are actually kind of funny to read knowing that I've done some of those don't in the past when i first started designing
I strongly suggest to optimize your page load time and it should be MUST done job. Truly, no one waits so longer to get your website loaded. Additionally, Google is to look for page load time too for rankings.