0 comments
Various 
Building a website is more than just throwing together a bunch of controls or writing huge amounts of HTML and Javascript. It’s about creating that awesome experience. In this post I will be show you a few tricks that I’ve used to make this weblog a better experience.
A website is all about the content that is on it
The first thing you need to think about when building your next web experience is: What am I going to put up there. The subject or the goal of your website is the most important thing you need to think about. How important the rest of the stuff I tell you may be, it will serve only to reach that goal. It is that simple.
Great websites like StackOverflow.com are great because they offer a substantial amount of content the visitors of that site care about. The builders of the website took great care in researching what exactly they were going to show to their users.
The other thing that makes stackoverflow great is that the users that visit the site make the content. Letting the user create content on your site is notrequired, but it can help to get users back to your site after their first visit.
Another great example of a website that works, is the channel 9 website from Microsoft. The site is all about videos about people talking and showing off Microsoft tech. The thing that makes it great for me is the way the content is organized. I can easily browse the video content by going to the browse button and select the topics I’m interested in. Another good point I think is the fact that the site takes you right to the core content it’s about. No boring introduction texts to keep you busy when you only want to see that video you heard about from a colleague. Lovely.
One of the key things these websites do very well is take you to the high quality material they both have to offer for IT people like myself. There’s some really high quality stuff to be found there. I partially know this because they focus on the content. There are no elements on the site that force me to deal with user interface or stuff that isn’t related to the content.
I know this section isn’t technical at all, but I think it’s important to know what you’re actually doing when building a website. You are not designing a hyper cool javascript based user interface or a next-gen ASP.NET web application with a state of the art navigation framework. No, you’re creating that location where the user can find useful, fun or inspiring stuff.
Navigation is important
Yes, it sounds weird from a developer perspective, not having the goal of building that next-gen navigation framework to make your website more awesome than the sites of other developers. While I encourage experimentation I’m not a huge fan of developers who build a round wheel and say it’s a bit rounder than the one invented by the other guy before him.
In fact when you look at ASP.NET there’s really no need to invent a new navigation framework. Okay, ASP.NET webforms previously had a navigation model that was nowhere as cool as the navigation options offered by PHP based websites and Rails websites. That has changed however and you now have some very cool options to make your navigation better than ever before.
Before I dive right into some of the more technical stuff let me talk a little bit about the importance of a good navigation. The people that do Rails or PHP development will look at me and silently ‘Duh’ me for this, but I think it can’t be explained enough.
A good navigation has two parts. The first part is the menu structure and content organisation. (Yes, that are actually two bits, but I shoved them on one big shiney pile of bits). The user will use the menu on your website to check out how the site is organized and navigate the site through this mechanism to get where he wants to be. The second (Or maybe the 30th) time however he is on your site, he will know where to look and start to use a second form of navigation, the url in the browser.
To make the more advanced navigation possible for visitors of your site you should look into building readable URLs. Here’s a few samples to give you an idea of what I mean:
- http://www.mysite.org/products/garden/tulips
- http://www.mysite.org/shoppingcart
- http://www.mysite.org/products/tools/shovel
I don’t need to explain these as you have probably already worked out what each of these locations are going to lead you to. Some of you may already have figured out that you are probably going to find garden stuff under the url http://www.mysite.org/products/garden and a list of all possible products under the url http://www.mysite.org/products.
So how do you create such a navigation in ASP.NET? To make a navigation like in the sample is to use the ASP.NET routing library. This is a library that’s available since ASP.NET 3.5 and ASP.NET MVC. It allows you to define a number of routes in your website that will get translated to specific actions on a controller in ASP.NET MVC or a specific page in ASP.NET webforms.
There are some good videos on www.asp.net that show off the capabilities of this module, so I’m not going to show the goods here. Instead, check out these links to find more information on this subject:
Getting the layout right
Allowing the user navigate around your website with a good menu structure sounds easy, does it? And it is when you do it right. The first thing is to get the content right. After that you can worry about the technical bits of getting the user to the right location using a proper URL. However I haven’t talked about the layout of the site yet.
A good layout offers the user guidance as the where on the page to look for information. Building a good layout means that you need to pay attention to a couple of things:
- Where do I put what content?
- What’s the size of the different pieces of content on the page?
- What does the user need to do to get to a particular page?
The first two things are related to the page layout, while the third item on the list is actually more about navigation. Or maybe not, because if you do not pay close attention to the size and color of links, people might be unable to find the next page to browse to. Make them too frustrated about that and they will close the browser and forget about your site.
Take a close look at the layout of my weblog. Notice how the content of this article is slightly larger than the stuff at the bottom and the left of the page? Yep, I did that on purpose. I want you to read this instead of looking at all the other silly comments I make on my website. So get back here and continue reading!
The key to have people focus on a particular area of the page is to make the stuff in that area a bit bigger than the other content on the page.
Another thing is to structure the content in a hierarchical structure on the page. This makes it easier for people to get a grip of what’s going on. Divide the page up into sections and subsections. You don’t have to do it in a top-down fashion, multiple columns are fine too. Just don’t make it into one big blob.
A good way to split a web page into multiple sections is to make use of a CSS layout framework. CSS can be quite hard to get right so these things are a big time saver. I’m using 960.gs on this weblog, but there are others that work great too. Here’s a few examples:
- http://960.gs/ – 960 Grid system
- http://www.blueprintcss.org/ – Blueprint CSS framework
- http://developer.yahoo.com/yui/grids/ – Yahoo grid system
Design is more than just layout
The layout bit in combination with color and typography is probably one of the hardest parts of web design. It’s subject to taste and people often have different opinions on that. If you don’t pay close attention you may end up having pointless discussions with clients or colleagues about it.
I’m not here to solve those issues, but with the following set of tips and tricks you might actually save you and your team from having discussions about how ugly your design is. Ooh and for designers reading this. Look away now, I’m not getting very original with this one.
Digital Typography
I am nowhere close to being an expert at this. I do know however a few basics that I want to show you. Although not a complete guide to digital typography, this will help make your site look better.
When choosing fonts for your website you should look for a couple of things. First you need to make sure that the font can be read from the screen. Generally you want a sans-serif font. Serifs are those little lines at the end of the letter you see in books and newspapers. They guide the eye so that you can easily read the letters on the paper. They provide a kind of flow to the text you’re reading. This works great on paper, but not on your LCD monitor.
Another thing you need to keep in mind is that you want a font that is easy to read for the body text of your website. The headings are a different story. For headings you want a font that provides contrast to the font being used in the body text. Headings need to stand out. They provide a guide as to where specific content can be found.
Remember, people don’t read the web. They scan the web, so you will need to use a font for headings that stands out and attracts the eye of the user. At the same time, you can use a font that might not necessarily provide the best ledgibility. Why, you ask? Well, titles aren’t very long and a font with a little flair will make your site look better.
I’m assuming that you don’t have a lot of time on your hand to figure out the ideal cominbations of fonts. That’s okay, most web developers don’t have the time to find the right combination and really, you shouldn’t spend a lot of time on it. Instead I suggest you check out this site to find an excellent set of free font combinations you can use on your site.
Inspring color combinations
My site is pretty in pink. There’s a reason for that too. Most sites about IT are blue or orange and I just wanted something different. Is it a good reason for the color scheme? Probably not, but I don’t care. It’s kind of bright and different, just like me (At least the different part, the rest you will need to find out for yourself).
So what makes a good color combination? Well I don’t know, what I do know is that you will need to look for a combination that works well with the content that you’re showing on the website. At the same time you do want a color combination that works with the logo of the client. You don’t want to go for orange when the logo of the client is purple. It just doesn’t combine very well.
Here’s a list of color groups and what they do to the visitors of your website:
- Cool colors
Colors like blue and green tend to give the site a cooler look. They are calming to the eye and at the same time to deliver a more formal message. Keep in mind that this color scheme makes content smaller, so you might want to beef up the fontsize when using cool color schemes. - Warm colors
Red, yellow and orange are colors that excite. Sometimes they also make users aggressive. Warm colorschemes give the user the idea of happiness and energy. Content also appears larger when using a warm color. Warm colors are informal and give an air creative thinking to a website. So skip these colors if you’re building something that needs to tell the visitors: I’m a professional, you can use my stuff at home. - Neutral colors
You can’t build a website completely out of cool, warm colors or a combination of both. You need some neutral colors to bind the design together. Text for example is better when it’s either black, dark grey or white when using a dark background. You can also add a grey line in an otherwise very bright design to calm things down a bit.
So what is a right color combination? I’m not an expert at mixing colors. Instead if I need inspiration for a good color scheme I browse to the website of colourlovers and see what they have in store.
- Colourlovers website: http://www.colourlovers.com/
Other stuff that I didn’t mention
The observant reader may have noticed that the story about design isn’t complete. I didn’t talk about logo design, navigation buttons, etc. I’m pretty sure that if you know how to design a good logo you’re going to be more than able to come up with a good design for the rest of your website. In case you do need a logo I suggest you check out the guys at Logoyes.com, they have a good system to get a logo fast.
Adding a bit more flair
Websites that follow the principles from the previous sections are perfectly fine. I personally think that website that do a good job at providing high quality content acompanied by good design are a delight. You don’t need the stuff from this section to make your website rock.
However if you must, here’s a few cool things that you can add to make your website look cooler:
- Disqus
These guys did a great job in building a commenting system for weblogs and websites. Simply follow the guide on the website and you have a comment system for your website in seconds. Complete with federated authentication and spam control. - Lazyloading plugin for jQuery
Want to display your weblog fast, but have images? Use the lazy loading plugin for jQuery. It will take care of all the fiddly lazy loading bits. There’s no need to do anything special to your images, which I think is a pre. - Modernizr
Can’t live without this plugin. Older browsers suck less when you use this plugin on your website. For example, it will render your semantic HTML5 content in such a way on IE6 that users can actually read your website as if nothing is wrong with their browser. - IE6Countdown
I mentioned IE6 in the previous section. It’s one of the oldest browsers around on the internet and it simply doesn’t work great. Microsoft screwed it up a bit with this one in the standards department and basically I think it deserves to die. How? Simple, add a banner to your site to help people move on to a better browser. - jQuery
It’s weird to mention a jQuery plugin before actually mentioning jQuery. I think that people should not write any jQuery before trying a Bing/Google search for an existing plugin. There’s so much out there that you only need jQuery to enable the other plugins, most of the time.
Want additional flair? Marco Kuiper has a weblog dedicated to Javascript, CSS3, HTML5 and jQuery. You just can’t beat his samples, so I’m not going to try.
Conclusion
Building this new blog finally gave me an excuse to get back into the HTML5/CSS/Javascript game. It was a blast and with this article I hope you get some inspiration to build a great blog too. Keep checking my blog for more web fun as I show you how I build the whole website in just two 4 hour sessions using Microsoft WebMatrix and Microsoft Orchard.