Having a good UI is possibly one of the most important aspects of any development. It doesn't matter how perfectly the code executes, if the thing looks awful people won't use it. But it is an area that a lot of developers struggle with.

There have always been things like website skins that you can buy, but I've never been a huge fan of these. It's always seemed odd that you can use an open source CMS for free that has had hundreds of man hours put into it, but a decent skin would cost you £100, and even then would still need a lot of work doing on it.

Thankfully there are some free resources that not only help with the css and making a site responsive, but they also include some fairly decent fonts and layouts.

Bootstrap

Bootstrap is possibly the most popular css framework for building sites with right now. Even Microsoft have adopted it into all the templates that ship with Visual Studio 2013.

One of the main things Bootstrap gives you is a standard set of css classes for doing things like grids and responsive layouts. When people start using a common set of classes to achieve the same thing, things get a lot more compatible and you can already see that starting to happen with Bootstrap.

Bootstraps grid system works on having the illusion that your page is divided up into 12 columns. You then have a set of classes to assign to a div that contain a number, that number is how many columns the div should span over. A bit like a colspan on a table.

These grids are responsive though so as your page shrinks down to a tablet and mobile size it will automatically recognise that the columns won't fit horizontally and start rearranging them underneath each other.

As a starting point Bootstrap also has some templates of common layouts to get you started.

Bootstrap also has default classes for forms, form fields, headings and lists that will give your site an initial face lift.

Foundation

Foundation in many ways is very similar to Bootstrap. It also has a grid system for layouts and also helps with making a site responsive. There are also default styles for headings, lists and forms but they have also taken things a step further and started to encroach on jQuery UI's territory with things like tabs and dialog windows.

I haven't heard of as much industry support but there site is full of documentation and videos on how to use the framework.

Pure

Another CSS framework with yet another grid system. Pure appears to be much simpler than the first two and offers many of the same features. Their site has some good templates that in some ways cover more scenarios that Bootstraps. Personally out of the three I would go with Bootstrap as it appears to have a much higher adoption.

Normalize

If the CSS frameworks seem a little overkill for what you're after have a look at Normalize. The concept is simple, by including this CSS file in your site as the first CSS file it will overwrite all the default browser styles to create consistency and something that looks a little nicer.

There's been many incidents where I've seen CSS produced that includes a style for every single html element try overcome the differences on browsers, which is a good idea (this is basically what normalize does except someone's written it for you), but the styles have all been set to the same thing which is generally margin:0, padding:0. On some elements this is fine, on lists though, not so much.

Another option I've seen is to define a style on *.* which is equally as bad.

Fit Text

Like it or not people are accessing sites from all kinds of devices these days with all kinds of screen sizes. If your site doesn't scale then you're going to lose visitors. One issue you will ultimately face at some point is font sizes. These can easily be changed using media queries but another option is to use FitText.

FitText is a really simple bit of JavaScript that will scale your text to fit its containing element. You do have to call a function for each element you want to scale, and it does only work on the width rather than taking the height into account. But it is very cool. Just make sure you have a look at the code because it's so small this isn't something you will want in a separate JS file.

For various reasons at times you may need to create a 301 redirect to another URL. This could be as a result of a page moving or you just need to create some friendly URLS.

As a developer you may be tempted to do something like this in code...

But do you really want your project cluttered up with files who's only purpose is to redirect to another page!

You may also be tempted to try doing something with .NET's RouteCollection. This would certainly solve an issue on creating a redirect for anything without a file extension, but there is a better way.

In your web.config file under the configuration node create something like this

The location path specifies that path on your site that this redirect will apply to. The destination value in the httpRedirect is where the redirect will go to. As well as setting Permanent for the httpResponseStatus you can also specify Found or Temporary depending on your needs.

A users session on an ASP.NET site by default will time-out after 20 minutes. This however can be changed through either the web.config file or IIS.

To edit through the web.config file you need to edit the sessionState tag under system.web

Or through IIS click on your site name and then click Session State under the ASP.NET heading. There will be a field labeled Time-out (in minutes).

The value you enter for time-out must be an integer.

Help it doesn't seem to work!

If your sessions still seem like there timing out after 20 minutes it could be because your site isn't very active.

The application pool for your site also has an idle time-out that is set by default to 20 minutes. When the idle time-out is reached it will cause your application pool to recycle and therefore loose any active sessions (that's assuming you have the session state mode set to In Proc). Therefore it is a good idea to increase this to whatever you have set the session time-out to.

To do this go to your sites application pool in IIS, click advanced settings on the right and then look for the Idle Time-out (minutes) setting and update this to be the same as your session time-out value.

One classic scenario of website speed issues relates to retrieving data from a database and often it is the same data being retrieved over and over again. For example storing some of your site settings in the database was originally a great idea as it meant your admin users could configure them through an admin, but now every request from your real users is doing a database call to look up this information.

A way to reduce these database calls is to create a static object that will keep hold of the information once its been retrieved. This could simply be an int or string or it could be something more complex like a List or Dictionary that we keep adding to.

Lets use an example where we are retrieving details of a room. The room can have multiple properties including Name, Capacity and Description. Or database contains multiple instances of rooms that is repeatedly requested.

Rather than accessing the database directly we can create a function that will first look up the value in a List object and if it is not found then revert to loading the information from the database. If the information was retrieved from a database then we also add it to the list for future use.

code for looking retrieving the data

As the List is a static object it will continue to hold the information of the rooms for the life of the application. Some things to watch out for however:

• Static objects will be the same for all users, they are not related to a session
• Static objects are accessible across all threads so you need to be aware that anything you change in the static object will be changing on all threads
• When you return the object you wanted you will most likely be returning a reference to the existing object not just its value

With these things in mind, whenever you are updating the list (adding, removing etc) make sure you create necessary locks so that only 1 thread executes at a time. In the example this has been done when we check for the existence of the item and then go to load it. Without the lock it would be possible for 2 threads to do the check and then both go to load the values. If this were to happen we would end up with 2 instances of room in our list. Even worse if we were using a dictionary instead of a list the second instance would cause an exception when it tried to add it to the dictionary. With the lock the second thread will wait for the first to finish executing before it runs the code.