Yesterday I launched the brand new homepage of my portfolio. It was a long time in the making trying to get everything looking good and now I’m going to explain the reasons behind the design, how I came to it and how you can apply the same techniques.

Keep it simple

It’s a portfolio right? When people visit your site what do you want them to see? If you’ve not said “my portfolio” then your wrong. If someone is looking for a web designer they need to see your work. How can anyone gauge your quality if they don’t see it!?

According to the analytics on this site just under 9% of people visiting the site in September went to the Portfolio page after visiting the homepage. That’s pretty poor in anybody’s book. It means they saw the homepage, scanned it and decided it wasn’t for them. Keep it lite, simple and clear to distinguish what you want people to actually see. I decided that instead of hoping people would visit the portfolio I’d make it the first thing they see.

Think of it as a CV (Resume)

You don’t need to put your qualifications on there or anything detailed but imagine it’s a CV dropped on someones desk. Are they going to see the information they need to see? Critical things to put on a homepage at minimum include;

• Examples of recent work completed.
• A short bio on yourself (including a personal photo to “connect” with the visitor)
• Contact information

They need to see who you are, what you do, and an example of what you’ve done. They also need to get in touch with you if they like what they see.

Personalise it

This is where my original homepage initially went wrong. It looked too professional and didn’t feature any personal touches. It now features my Twitter posts, which is great if your twitter posts are acceptable for the public, and a short description on who I am, what I do and what I like to do. Visitors can then “connect” by reading your tweets or even following you.

You could also include your LinkedIn profile, flickr photos (I include TwitPic photos), blog posts, journal entries, Google Maps (when I tweet I can select to locate, which updates the Google Maps in the top blue bar) practically anything personal. It can give your work that extra edge in helping people remember you.

Try something different

If someone sees a neat little feature of your website that they like they’re probably more inclined to remember you. I’ve really wanted to tinker with the Last.FM API for a while now but have never needed to. I decided to implement it onto the homepage so people can see what I like to listen to. It’s always nice to know if someone listens to a lot of Slipknot or a bit of Robbie Williams. It could be that extra connection your looking for. Kean Richmonds site explores this perfectly on his about page and was recently showcased on CSS Mania.

Subtlety is the key

It’s the latest web trend. Not everything has to be black on white or yellow on black. Take it down to a pixel level as it definately makes a difference.Try using gentle shadows, 1 pixel width highlights, 1 shade different hovers on hyperlinks, subtle backgrounds, light colours and small gradients to take your design to the next level.

Take Adii Rockstars website for example. If you look closely at the edge of elements you’ll see the 1px wide shadows and highlights and very simple gradients which make this a very nice design.

Check out my homepage for another example. I tried to stick to as little amount of colours as possible to keep consitency. By using very light shadows I was able to re-use the same colour to create a border around the images without including an extra colour such as white. It really simplifies the design and keeps it clean.

Don’t pretend

Like to think of yourself as a company, rather than a freelancer? Think again. If your a freelancer exploit it! You’ve done all this work yourself, don’t let people think for a second that it’s a company behind the brand, it’s you, and your visitors should know that from the get-go.

To sum up…

Don’t be afraid to…

• try something different. If your stuck, look deep into some of the greater designs you like.
• be personal, most people are more willing to employ you if they already know who you are
• think outside the box, how do you display your CV? Can you take some pointers from that?
• show off! It’s your work, your visitors should be able to see it straight away!
• open up a bit. Having a blog or a Twitter feed can enforce that connection

I hope you like the design as much as I enjoyed building and researching it. If you have any questions or opinions please feel free to air them!

Every web developer should (and probably does) use these tools on a daily basis. They streamline your development and help speed up little niggles with your site.

Web Developer Toolbar

This handy toolbar includes features such as in browser CSS editing which lets you see CSS changes live, the ability to disable Javascript, Cookies, CSS and Images (for usability testing) and includes many handy features.

Some fancy tricks also include:

• Element outlining
  This allows you to see which <div/input/anything> tags are lining up wrong and combined with the CSS editor proves a powerful tool in element alignment.
• Disabling CSS
  This allows you to see how your layout holds up with browsers which don’t support CSS (such as screen readers). If your content is laid out poorly, it. will. be. read. out. loud. poorly.
• Browser Resizing
  Want to see how your site looks in a 1024×768 browsers? Click the re-size button and the toolbar will set your browser window to any size you specify!
• Quick Validation links
  Want to know if your XHTML or CSS validates? There’s quick handy links under the Tools drop-down.
• Generated Source vs Source
  Is your Javascript messing up your code? Then view the Generated Source to see what it’s actually doing to your pages.
• Quickly Edit HTML & CSS in-line
  It’s a quick and dirty way to see how your new CSS/HTML code works in your site. Simply open the editor and type away to see your page update live.

There’s many more options you can play with. All you need is Firefox and the Web Developer Toolbar.

Firebug

Firebug is a tool used by almost every web developer in the world. If you’ve not installed it yet, do it immediately as it will save you many man hours fixing bugs in your websites code. It’s had over 19 million downloads and averages 22,000 downloads every day.

Colorzilla

When I can’t remember how to count in hex (which often happens) I use Colorzilla. It makes sure my #009ecc is not #02a4d3 and that my #666 isn’t #999. It’s best to keep consistency and is what separates a good designer, with a great designer.

There’s loads more Firefox Add-ons you could also check out:

• YSlow https://addons.mozilla.org/en-US/firefox/addon/5369
• Pixel Perfect https://addons.mozilla.org/en-US/firefox/addon/7943
• Firecookie https://addons.mozilla.org/en-US/firefox/addon/6683
• PageDiff https://addons.mozilla.org/en-US/firefox/addon/4274

Internet Explorer Developer Tools

On the Internet Explorer front there’s not much for the modern Web Developer. However, using the Firefox tools above covers most if not all of your needs, except for IE8, IE7 and IE6 testing. This is what I’ll go over next.

The best tool is actually one released by Microsoft themselves. The aptly named Internet Explorer Developer Toolbar which gives you a few tools to play with which include a CSS and HTML editor, the ability to disable CSS and images, use a colour picker and outline elements. It’s basically a shorter version of the Firefox web developer toolbar. It also allows you to quickly switch between IE7 and IE8 browser rendering. Simply select which browser mode you need and you can see what your page looks like in IE7.

Now for IE6 (cringe). I know a lot of developer are now dropping support but as previously mentioned sometimes it’s not an option, and we sometimes need to think about this when developing mass market websites.

Spoon.net

It’s a tool I only recently found and because Microsoft won’t properly develop something which lets you run IE6 on your machine, Spoon developed a browser plug-in which lets you run ANY browser, well, IN browser. They call it “App Virtualization” and I call it magic as it let’s you run IE6! (note, as of writing I couldn’t get it to buffer on Windows 7 64-bit but could on Vista (32) and XP (32), let me know, maybe it needs to be XP Virtualized?)

Adobe BrowserLab

This amazing tool lets you preview your pages side by side and even overlay pages (known as onion skin). You can also preview your site in many browsers which include Internet Explorer 6/7/8, Safari 3/4 and Firefox 2/3. The only downside is you can’t preview it as a functional page so can only be used for styling sakes, and it’s a little slow to run sometimes.

I hope you found these tools useful for your web developing needs and good luck (you’ll need it if your working with IE6)

So University is done and dusted for 2009. I won’t be returning until September 2010 which makes for a nice break. In the end I got my grades (A,A,B,B,B,C) which I was very happy with. To top all this off I thought I’d showcase some of the work I did to receive these grades.

Visual Design (B Grade)

I’ll start with a Module I didn’t thoroughly enjoy this year due to boring briefs, however, I did a little bit of illustration for it which included some postage stamps, posters and even included some Video in After Effects. You can see the video, the illustrations and the posters over at http://turnitoff.info/ (the posters reside in the footer of the page)
The site was built using the latest in Javascript and jQuery technology so check it out, hover over the elements, play with the buttons. Your probably better off using FireFox too, as IE couldn’t really handle it’s superior web modernness. Make sure you check out the video at the bottom of the website too (yes that is me speaking sounding common as muck).

For Visual design I also illustrated the stamps shown in the header image. It’s based on Music Technology over the years and I think I captured the best four from the past century or so. You can see them in all their vector glory too.

Multimedia Product (C Grade)

This was a complex one, which also means I can’t demonstrate it online. The idea was simple, Unique Bidding auctions.

The site featured a worlds first in online bidding. Live real time bidding in auctions. You could actually watch LIVE bidders placing their respective amounts on the page as it went along. This meant users could bid against each other based on other users’ bids. Clever eh! It was all jQuery and PHP grabbing the data from a database. It was awfully complex and also included a 10,000 word document explaing the process and research behind it. There was also a very fancy presentation which explains the fundementals if anyone wants to watch it. Its the branding, the functionality and the UI all rolled into a short few slides.

It also had it’s own iPhone web application which tied into the whole site shwoing live bids from anywhere in the world at any time.

Web Programming (A grade)

Another interesting one. And one which I actually really enjoyed.

Assignment one involved building a file based Guestbook with full admin features, the ability to edit posts and delete them, a swear word filter to stip out those naughty words and a slick simple UI. It also had AJAX editing of comments right in the page. No loading, no navigating, just click and change! I think you can guess what Lady Part and Ping Pongs were supposed to say! It maybe available as a free download if anyone is interested in the future.

Assignment two was a dog database website. Very similar to Battersea dogs homes website. It needed full admin controls and the ability to save dogs as favourites and have the ability to search the dogs too. The brief was very extensive, and I covered everything. Check it out online right now. I ended up building a commercial site based on this for Cliffe Kennels.

Authoring (B Grade)

It was basically Actionscript 3.0 work. For assignment 1 I had to develop an interface which included an animation, using the drawing API and the components within Flash 8. I ended up building a Spirograph kind of application which allowed you to colour it yourself and watch the application build it for you. Very nice! Have a look at it. I also built a flash gallery using XML and class files. But it’s not something I have online at the moment.

Multimedia Design & Production (A Grade)

This is a group project, and something which is a real challenge working with four different creative minds. My University chum Chris Kovalenko was part of our A grade group which created a chairty website and CDROM called the West Yorkshire Autistic Society (completely fake). Check out the site.

Intro to Video (B Grade)

My mate Adam Fisher helped me out with this one as I couldn’t star, edit and film the whole video. He rode the bike, I edited it, The Chemists supplied the music. It actually works quite well for my first every video. So I’m quite happy with it as a 2nd year project.

That’s it! I hope this gives someone some kind of inspiration either for university or for their next project. If it did help you in any way shape or form, drop me a comment!

There were loads and loads of error messages reporting that there were “undefined variables” throughout every script on the server. Strange!

It ended up being very easy to fix…

The errors displayed:

[Thu Feb 19 14:35:37 2009] [error] [client xx.xx.94.2] PHP Notice:  Undefined variable: page2 in /xxx/xxx/xxx/0100.tv/httpdocs/xxx/xxx.php on line 3
[Thu Feb 19 14:35:37 2009] [error] [client xx.xx.94.2] PHP Notice:  Undefined variable: page3 in /xxx/xxx/xxx/0100.tv/httpdocs/xxx/xxx.php on line 4
[Thu Feb 19 14:35:37 2009] [error] [client xx.xx.94.2] PHP Notice:  Undefined variable: page4 in /xxx/xxx/xxx/0100.tv/httpdocs/xxx/xxx.php on line 5
[Thu Feb 19 14:35:37 2009] [error] [client xx.xx.94.2] PHP Notice:  Undefined variable: page5 in /xxx/xxx/xxx/0100.tv/httpdocs/xxx/xxx.php on line 6
[Thu Feb 19 14:35:37 2009] [error] [client xx.xx.94.2] PHP Notice:  Undefined variable: page6 in /xxx/xxx/xxx/0100.tv/httpdocs/xxx/xxx.php on line 8

This was awfully confusing considering that every variable was working. However, it comes down to sloppy coding/PHP’s error reporting settings. You could define every variable by typing var $variable; before using it but that’s a silly idea. Instead….

Reading through the error reporting description at the top of php.ini we read:

By default, PHP surpresses errors of type E_NOTICE.  These error messages
    are emitted for non-critical errors, but that could be a symptom of a bigger
    problem.  Most notably, this will cause error messages about the use
    of uninitialized variables to be displayed.

To stop there errors you can change error reporting php.ini by doing the following:

change

error_reporting  =  E_ALL

to

error_reporting = E_ALL & ~E_NOTICE

This will then only show the relevant error messages and supresses non-critical errors. Sorted.

The web has changed a lot and web designers (of all people) know about the need to keep up to date with the latest design “trends”.

This short 10 point guide will hopefully help some people understand the minor problems website design (and content) brings when being viewed by a potential customer.

1. Pointless Flash Animation
   I’m all up for interactive flash in websites, but only use it if it’s necessary. Many a web developer will say “try doing the same in javascript, it’s better”, which is usually true, but animations which have no purpose other than to distract the user are pointless, bandwidth consuming and damn irritating.
   Check out Avistar’s Globe Animation. It’s awful to look at, and awfully slow.
2. Highlight too many elements
   The best designs usually incorporate a small colour palette. It’s more pleasing to the eye and makes navigation a lot easier. Try sticking to 2 or 3 colours for each design. Use our site for example, which colours do you see? Blue? White? If glance at the information on the page you will also notice that the navigation links are highlighted while the background image “points” towards the content.
3. Mystery Meat Navigation
   MMN is an aspect of web design which looks good, but is generally not functional. It forces the user to wave their mouse around the screen to find what they are looking for. It usually ends with them leaving the site and visiting a competitor or even scrapping the reason they visited your website all together.
4. Develop for one browser, and block the rest…
   Microsoft has done it a lot of times. Either to spite Firefox/Opera/Safari users, to promote it’s own IE or even due to laziness, either way it’s the wrong way to do things. Every website should at least be usable by every web browser (even if not fully supported) otherwise you are shutting off a large percentage of users. The new Beijing olympics site does it. Try viewing it in Firefox.
5. Rely on Javascript for basic interface and functional design
   It’s all well and good building applications which rely on Javascript, because most of the time these need to be complex, fast and reliable. But to build a site design which relies on the use of Javascript can be a big mistake. Most browsers support Javascript, but most search engines don’t. This means your website may not be indexed correctly and inevitably lose you visitors. Always ensure that if Javascript is disabled, your website is still viewable. Try installing NoScript (FF) or Turning it off in IE to see how your site behaves without it.
6. Build a site out of sliced images
   It maybe an easy thing to do in Photoshop/ImageReady but it usually involves the site being built using tables and large uncompressed images. It looks rather strange sometimes when the page loads slowly (as the layout moves with the images loading) and because of the images the file size of the website will be significantly larger.
   Because these images are not CSS images they are part of the document and are the first thing to be loaded. If they were included as CSS images the document XHTML (the content) would load first (and the layout too) with the CSS images coming afterwards. It’s a better way to build things. A good example to check out is the Mystery Jets website. It’s slow, ugly and made from sliced images as mentioned. Don’t even bother looking at the HTML, as it’s horrible to look at and very very invalid.
7. Fight with the web…
   Make sure your sites inviting, and doesn’t scare customers away. By divulging too much information, or even the incorrect information clients may go elsewhere when searching for a developer. A great example of this would be to over announce that your a freelancer, or making out your always busy. Many bloggers divulge this information in their droves, and it can be very off putting to read.
   Try inviting users to view your portfolio, if it’s good enough, throw it all over your website! Potential clients like to see past work to gauge how good you actually are.
8. Bombard the user with information
   Sometimes you visit a website and get information thrown all in your face. It can be very time consuming and uncomfortable to visit these web pages.
9. Restrict your visitors input
   How often do you visit a website, register, then come to make up your password only to receive a message like:
   “Your password must be between 6-8 characters and contain at least one number and any of the following characters %$£^&””
   Why 6-8 characters? I understand the numbers and punctuation requirement but it’s still awfully annoying. Expand the password criteria a little more, 6-8 characters is very short and when there are extra requirements it can be very easy to forget your password.
   Another great example is restricting input boxes and textarea boxes too much. If you get it wrong, it can be hugely annoying.
   You need gto let the user do what they feel best with, if they want to enter their phone or credit card number with spaces then so be it, don’t put the restriction on the input boxes, make the software work for them. A simple preg_replace() would fix that problem.
10. Give your lovely visitors a seizure
    By using animated GIFs, horrible design, bad layout and disastrous interface design your faithful visitors could become disorientated. Ok so a seizure is over the top however, this Jesus website may change your mind…be patient for it to load, it’s a good one! (if it doesn’t work and flash funny colours then try the web archive)

And that’s a wrap. Some of those points you may not agree with and some you may, it’s all a matter of opinion. It’s just a collection of thoughts which seems to annoy the hell out of me, and a lot of other people too.

The Moscow Times (you did read that correctly) has just reported on a Russian DDoS attack on Georgian Government servers.

The attack came days before the Russians entered Georgia taking down many of the Governments websites.

“Cyber-attacks are part of the information war,
Making your enemy shut up is a potent weapon of modern warfare.”

Alexander Denezhkin of Cybersecurity.ru

An interesting concept of war.

To read the full article head on over to the Moscow Times’ website.