Over the past few weeks I’ve been helping other students with the various problems they’ve encountered while trying to learn CSS. A lot of the time, the problems are easy to solve when using the correct tools, but without these tools, it becomes a long and complex process of trial and error to try and fix the problem.

Because of this, in an effort to help the rest of the class, the purpose of this post is to provide some information and links to some of the tools that I use for web design, with a quick explanation of why I use them, and how they help.

Software

• PortableApps – As already highlighted by Rowland, this lets you install copies of various applications on to your memory stick, meaning you’ll always have the software you want to use available to you. Although this is not strictly required for web design, it’s included here because each of the applications listed below can be installed to your memory stick via it.
• Firefox – The king of browsers. Not only is FF one of the more secure browsers available, the ability to extend it using community grown add-ons (highlighted below) makes it an invaluable tool for any and all web designers. The only additional advice I would give about browsers is that you should be sure to test that your designs work in all browsers, including Internet Explorer, Opera, Safari and Google Chrome (most of which can also be installed to your memory stick.)
• Notepad ++ – This is a very versatile text editor designed to replace Windows Notepad while including a lot of features useful to web designers. Specifically, for HTML and CSS editing, it uses syntax highlighting, which uses different colours to highlight the different elements within the source code, making the code easier to read. It also features syntax matching, which highlights where chosen tags start and end.
• FileZilla – A powerful – yet lightweight – FTP client. Use this to upload files to a remote server.

Firefox Add-ons

• Web Developer – Provides a range of tools useful to web designers. Using it you’re able to do things like disable CSS, outline specific elements, test forms, and a whole range of other useful features.
• HTML Validator – Lets you check if your source code validates correctly within your browser without needing to visit the W3C validation site. It also explain why the code isn’t valid, and teaches you how to fix it.
• ColorZilla – Not strictly required, but is a useful tool if you want to know what colour something within a web page is. Just click on the button – click on the colour you want to know about – and it’ll give you the hex code and RGB values for that specific colour.
• Firebug – This add-on lets you explore your design – element by element – displaying all the relevant information you could need, including what style formatting it has applied to it, and letting you edit elements to see what the changes look like in real-time. Very useful for debugging a site.

Advice

When you open a <div> tag, and choose to close it further down the page, make sure that you put a HTML comment next to it indicating which tag you are closing. This makes it much easier to see where your <div> tags start and finish, i.e:

<div id="wrapper">
	<div id="header">
	text and stuff
	</div><!-- /header -->
	<div id="content">
	text and stuff
	</div><!-- /content -->
	<div id="menu">
	text and stuff
	</div><!-- /menu -->
</div><!-- /wrapper -->

Anyone else?

That’s all I have for now, but if you have any killer apps or add-ons that help with web page design, please feel free to comment. Thank you.

I’ve decided, due to my existing knowledge of CSS, that I’m going to skip forward by a few sessions and start tackling some of the more advanced techniques discussed in the later sessions. I’m going to start with Activity 503 as I’ve actually completed both the tutorials shown in activities 501 and 502 previously.

Linked to this post is my example of a well designed web page. The purpose of this activity was to explore my CSS skills, and to produce a suitable design for a site using them.

Although basic (and probably not as good looking as it could be), I think this is a fairly good example of a well designed page because of the logical position of elements such as the navigation and main content area, and the size – and resize-ability – of the text on the page, allowing for easy reading. It is also deliberately thin, to aid in the ability to read the text (having no more than about 12 words across each line), and to ensure that even machines with lower resolution monitors can view everything without needing to scroll horizontally.

I do feel, however, that my design could be easily improved upon, as it feels a little claustrophobic and cluttered, probably because, in an effort to show off my CSS ability, I’ve added features which are not truly needed, such as the right-hand-side column (convention suggests that comments are often better positioned underneath posts, rather than to the side).

Linked in this post is a very quick and simple My First CSS Page site that I created for this, the second activity of the day.

I decided to use an external CSS file for this example as it will allow me to add additional pages to the site, each of which can use the same external CSS style information – although as this is just a single page used to demonstrate CSS knowledge, I could have got away with including the style information within the <head> tags of the site.

What I specifically decided not to do was to use inline styles as – although they do provide the fill power of CSS styling – they’re no better than the old-style <font> tags when it comes to using their power.

Just for experience sake, after my initial draft, I included the Eric Meyer’s Reset CSS to see how it would affect my initial design. I found that, in addition to ‘resetting’ some of the font sizes, it also removed a lot of padding and borders from some of the block elements, such as the <h1> tag. Based on this, I now know that if I’m to use the Reset CSS file again, I need to take things like this into account.

The purpose of this exercise is to test global access to files uploaded to my server. For this purpose, the linked file needs to be checked as accessable by one of my peers.

useit.com

This might be a bit cheeky, to evaluate the site of the world-respected Jakob Nielsen, but I thought it might be a good idea to see just how good his site is, compared to Krug’s rules. (I was going to bring the book with me today, but decided not to, so I’m mostly working from memory).

When you first approach the site, it feels a bit bland – but with a site of this nature, where the important part of it is the information it contains, blandness is very soon forgotten.

Within seconds of first approaching the site it’s obvious that the homepage is split into two diffrent sections – ‘Perminant Content’ on the left with a dirty yellow background, and ‘News’, on the right, with a light blue background. This very quickly allows for a distinction between the two seperate areas of the site, and allows for an easy decision as to where you should look, depending on what want.

As you look further down the page, within the permanent content section, it’s separated by carefully worded headings, each highlighting what content can be found within it. This is not as good as it could be, however, as many of the links listed within the sections lead to different sites, without any notification that the links would do so.

A glance to the top-right hand corner of the site reveals a search box. This is easily identiable because of two reasons – firstly, because it is in the top-right hand corner, a web convention that has existed for a while now – and secondly, because it clearly uses the word “Search”, leaving no cause for confusion.

Finally (as we’re running out of time), if you navitate to a page deeper within the site, such as this one, a breadcrumb at the top of the page clearly indicates that you’re looking at a page about the Macintosh, and the fact it’s been around for 25 years now (happy birthday), which is contained within the Alertbox section of the site.

So that’s a few good things, but I have some gripes about the site too – such as the fact there is no global navigation, meaning if you’re on one page, and want to find another, you’re forced to return to the homepage. It’s also quite hard to find archived content – content which is no doubt not archived, like this – but so far as I can see, the only way it’s accessable is via the search box – which isn’t very good for people that don’t know what they want – until they see it.

The number one rule for easy to use sites: Don’t make me think!

I’ve started to read a book called Don’t make me think by Steve Krug. In the introduction he explains how, as a web designer – his fellow web designers would ask him for his number one tip for making usable sites – the answer of which is highlighted above.

The concept behind the tip (and the book) is that sites should be built to be as intuative as possible. By using convention, recognised keywords, and just a dash of common sense, website designs and layouts should be so comfortable to use, that a new visitor to the site should be able to automatically achieve their aims without even thinking about what they’re doing.

I’m only about a 3rd of the way though the book so far, so I’ve still got a lot to learn – but so far it’s covered some very interesting things, such as:

• Number of words used on a page – as Krug himself says (if I remember correctly) “you should remove about half of the words on every page of the site, and then remove half again”.
• Tabs – people understand tabs and other visual indicators which help highlight where in a site someone currently is.
• Keyword conventions – if people want to search on a site – provide them with a input field labeled “search” – not “quick-search”, not “find”, or anything else.

There is far more to good design than just these examples, but I think that taking a comon sense approach, and trying to not be too flashy, should end with good results.

Here is my sexy blog, ready to be inspected by Rowland and gang!

As you can see, I’ve gone for a self hosted WordPress site – I had one running at this address anyway, so before the session I upgraded it to the latest version, then found a nice theme for it (isn’t it pretty ).

Anyway, I feel that I’m fairly advanced in my general web creation ability. I’ve spent a number of years working with PHP and MySQL, with my current focus on learning concepts such as OOP and MVC via the use of a PHP framework such as CakePHP.

Regarding my client side skills, I’m not great – but I’m not bad. I don’t feel that I’m as good at XHTML and CSS as some people, but am learning new techniques everyday. I’ve just discovered CSS frameworks, and have decided to use BlueTrip as I feel it best fits my needs as a developer.

I’m looking to learn something new in this module. I’ve got basic CSS knowledge already – even a few advanced techniques – so I’m looking to explore other, more advanced, techniques. I’m looking forward to the idea of learning about XML and XSLT as I’ve not yet played with them.

Well… it’s been a VERY long time since I’ve done anything on this site – so I figured I might as well give it another go. (That, and the fact that I need a blog for one of my modules).

I’d not expect too much excitement from this blog if I were you, I’ve tried blogs before, but they’re just not me – oh well – but feel free to check it out of you’re interested in how I’m doing on my Advanced Web Design module.