How to design a webpage Pt I: Images

Following on from my earlier post How not to design a webpage, here's some tips for people making a webpage/blog/MySpace profile to follow to make things look a little better. I want to cover as much ground as possible, but I'll take things in small chunks, this time I'll concentrate on how to make the images on your site look as good as possible.

• If you're using an image on your site that was originally a different size to what you're going to be using it at, don't just code the different size into your HTML, use an image editing program to actually resize the image. This is a good idea for 2 reasons: It will look better, as image editing software will resample the image (a bit complicated to explain, but it basically means that your image will end up looking clearer than just giving the image different dimensions in HTML). Also, it will mean that people will not have to download a 1.5Mb image just to see the thumbnail size you've coded into your webpage, therefore the page will load faster.
• Anti-Alias your images. This is a basic function of most image editors, and makes the edges of text and graphics smoother. This is done at the pixel level, but you wouldn't believe how much of a difference it makes in terms of making your site feel more professional. Have a look at the image below:

• GIF images are best for images with large areas of solid colour - diagrams and cartoons are good examples of what to use GIF images for. You can only have a maximum of 256 colours in a gif image, but to make your file size smaller, you should set the number of colours in your image to be as low as possible. One of the benefits of using GIF images is that you can set one colour to be transparent, allowing anything behind the image to show thorough, this can be useful, although unless you know what colour is going to be behind your image, it can be difficult to make this look smooth. In this situation it would probably be better to use a PNG.
• JPEGs are better for photographs - anything where there's going to be smooth gradations from one colour to the next. You can set a level of compression for JPEG images - the more you turn the compression up, the smaller your file size will be, but the more 'blurred' your image will look. JPEG images have no transparency, so they will always be rectangular.
• PNGs are useful where you need an image to smoothly blend with it's background. This is the filetype you'd get if you cross-bred a GIF with a JPEG. It achieves this smoothness by allowing you to set each pixel to be any one of 256 levels of transparency, from totally transparent (you can totally see what's behind the image) to totally opaque (you can totally see the image). The downsides to this are that the filesizes tend to be bigger because of this, and not all browsers support this transparency effect. Internet Explorer 6 will show the image, but anything even slightly transparent will show as grey. Firefox 1+ and Opera will both show these images correctly, as will Internet Explorer 7. If you've still got IE6, I strongly suggest you upgrade to Firefox.

Daft Searches

It never ceases to amaze me how people end up at my site, using Google Analytics, I can see exactly what people searched for on Google to find me, sometimes you have to wonder what people were actually looking for with these searches - here's just a few of the stranger ones...

• girls on tractors
  I told you it was a big turn on for some people. This is one of the top searches that ends people up on my blog.
• naked girls on tractors
  It just gets better.
• frankie says your gay shirt
  Ahem. Does he?
• avril lavigne shoes
  Obviously I'm not the only one that wants them. Why stop at the shoes though? They really aren't her best feature.
• bamboo yellow shoe
  Even the Dutch aren't that daft.
• blindfolded gang
  I don't ever remember writing that blog - I must have been very fucked up...
• classy hen do in leeds
  There's no such thing.
• hiccuping podcast
  Somebody was actually expecting to find a podcast about hiccuping??
• how to make ninja shoes
  Everyone's after a pair of these bad boys.
• kidman compass
  It's mine and no-one else can have it.
• middle age woman feels ugly
  Have a Hen party, everyone else is doing it.
• mixer+shoe
  There's better ways to DJ
• naked indian guy
  That was just a rumor, it never actually happened.
• party threesome leeds gem
  You can get anything on Google these days.
• shoes tiesto
  More Dutch shoe madness. Those crazy Dutch.
• shoes to go on your myspace page
  Err. It's a webpage, and therefore not strictly necessary to dress it. It will look crap all season all by itself.
• sperm on shoes
  Easily done.
• sugar paste shoes step by step
  ?
• ugly fat middle-aged people
  Surely you don't need to search on Google to see these? If that's your thing, just come to Leeds.
• ultra-power gay
  That's a super-hero I hope they never make a comic about. Perhaps you can buy gay electricity now. Gives a whole new meaning to the phrase "turn on the light".
  
• washing up as lube sex
  That's just NASTY! Extra points if you can blow bubbles with it though.
• what biscuits do old people like
  Stale ones.
• website with nothing but yellow shoes
  There's a market to be cornered, clearly.

I kid you not, these were all things that people have searched for and ended up at my site - that list is only from the last month!

Silly Putty, but painful Silly Putty

First of all, I'd like to thank everyone that's commented on the new design for Yellow Shoes - the general consensus seems to be that people like the new design, which makes me happy, thanks so much everyone :)

This week the blogs have been a bit sparse - first of all I've been dashing round like a blue-arsed fly driving DJ equipment round for Rod, who is not able to drive at the moment, which has meant that I've been dashing round Yorkshire with huge speakers and lights in the back of the van. The only upside to this has meant that I don't have to worry about world war 3 potentially breaking out every time I try and get the keys off my sister for the car.

On Saturday night, after playing at a Wedding in the arse-end of nowhere, I drove back to take over another gig from Rod in a big marquee at the end of my road, and played a pretty blinding House set (even if I do say so myself), and kept the party going all night. It was weird that although the set couldn't really have gone much better, all it did was prove how much I'm missing Ibiza to me :(

On Monday, I started my new job at the garage, where I'm designing the website, and doing engine re-mapping - this is all part of my cunning plan to get myself a new laptop and then get a little place for me and Marisa in the centre of town. The job's ok, but I'm in the grottiest office in the world, currently my only amusement is the fact that the floor slopes down 30 degrees to my desk, and that there's a woodlouse with Wobbly Hedgehog Syndrome trying to get into the light-switch. Sigh. To make up for it, me and Marisa went to see the Transformers movie, which I've been losing sleep over for a long time, I've been so excited about. I wasn't let down - the movie was amazing, and was even genuinely funny (which I wasn't expecting at all). The only thing I was a little disappointed about (apart from the obvious changing of BumbleBee from a VW Beetle to some daft American car) was that the robots changed so fast you didn't have chance to savour the moment, but it really was a minor gripe.

Last night was the one that really stood out though, and not in a good animated talking robot kind of way, either. After Mum going on about it for about 52 years, I finally went to Chai, the Thai Back Guy, to see if he could make my back any better. I can honestly say it was the most painful experience of my life. He made me scream like a little girly at several points in the proceedings, and when he'd finished, I felt dead. Just dead. Today I'm still dead, and my back is still in agony. I don't think I want to see Chai the Thai Back Guy ever again. I want to slap him, but I know he could probably do some Matrix-type kung-fu on my ass, and I'm already dead because of him, so it's probably not worth it. Owwwwwww!

How not to design a webpage

While I'm in a designy kind of mood, I thought I'd write a few articles on web page design. Now I'm not professing to be the best designer in the country or anything, but I do know what works and what doesn't, so first of all here's a few tips on what not to do when designing a web-page. These are things most commonly done by people making their very first web-page or blog, and go overboard with everything, which invariably results in a nasty, unreadable mess. Some people still do this when making web-pages, after years of doing it.

1. Animated GIFs
   When considering using any kind of animation, you should think about what it's actually going to add to the design of your site. 99 times out of 100 including an animated GIF in your site design only serves to make your design look cheap and tacky, and draws the readers focus away from the actual content of the site. Likewise with any image you use on your site, it should be there only if it lends extra context and understanding to your content. You can do a lot without any images at all these days - just look at the "Minimal" designs for blogger - a great example of really good design without using any images at all.
   
2. Frames
   I can't remember the last time I saw a commercial site that used frames, but there's still a lot of personal sites that use them. Frames were really popular in the late 90's, and everyone was using them at this time. They allowed you to split your content up into areas, some of which stayed permanently on screen while the reader scrolled through the main content. If you really want to split your design up into areas that don't scroll, it's much better to do this using CSS and DHTML, this way search engines point you to the exact page needed, and your users are not left floundering without any navigation links. If you really have to use frames (and I can't think of a single instance where you would), include a script so that if a page is loaded from a search engine, and doesn't include it's navigation links, the page gets reloaded with them. This is not hard to do, and not including a script of this kind is just plain lazy.
   
3. Page Counters
   I don't want to see that your page has had only 20 people visit it, that doesn't fill me with a lot of confidence. This is information only you, as the page designer needs to know. You'd be much better off using a stats website like Google Analytics, which will give you a better picture of who visits your site, where they are from, what browser they use, among a million other things.
4. Unreadable Text
   What's this all about?? I've never once understood the need to give your page a white background and yellow (or lighter) text. If you use a background image, make sure that you set the bgcolor property of <body> to the colour closest to the background image. This will make it so that people who've chosen not to see background images can at least still read your text.
5. Nasty Background Images
   While we're on the subject of backgrounds, if you're going to have a background texture behind your text, make sure people can still read your text. There's nothing worse than having a stupidly complicated background image and having to decipher the text through it. Even worse: animated backgrounds - just don't do it.
6. Really Wide Pages
   Make sure the part that will contain the main content of your page will end up being no larger than around 600 pixels wide. Keeping track of what line of text you're on becomes more and more difficult the longer the line is. Look at just about any book published throughout history, and you'll notice they keep their line width quite thin for this very reason. Also the further your eyes have to scan from left to right, the more tired they will become.
   
7. Slow loading times
   This is generally down to large or un-optimized images on the site. People will not wait forever for a page to load, and generally will navigate away from your page if they can't find what they're looking for within 10 seconds. Where possible, try and make sure your text loads before your images, this way people will at least have something to be keeping them occupied with while your images load. Optimize your images as much as possible so that they still look fairly decent, whilst taking much less time to load. My favorite program for Image Optimization is Adobe Fireworks, but Photoshop is also good these days.
   
8. Bad Navigation
   I want to be able to find the information I want as quickly as possible, and so does everyone else. If you have a lot of content on your site, split it down into logical sections, (You should try and keep your site to between 6 and 10 main sections)and offer a search function. Don't hide your navigation away in the design - it needs to be obvious to people how to get from one area of the site to another. This is one area where even big sites fall down (MySpace is notorious for it).
   
9. Too Much Advertising
   The more advertising people see on your site, the less people want to stick around. If your site has advertising, it should not get in the way of the content - after all, that's what people are there for - they don't come to your site to look at adverts, even if this is what you'd prefer they do. AdSense spamming (putting AdSense advertising all over your site) is frowned upon by Google, and you'll end up with your account deleted if you do this. Pretty much everyone has pop-up blockers these days - pop-ups are annoying and they don't work.
   
10. Hyperlinks
    There's a lot I can say about Hyperlinks - for a start, your links need to stand out from the rest of the text, or people won't know they're links. Keep your links blue if at all possible - people expect links to be in blue. You don't need to say "click here" every time you put a hyperlink - people know how to work them - just link the relevant text. And keep the site you're linking to relevant as well - I should know what content to expect before I even click the link just based entirely on what words you've made a hyperlink.
    

Spangly...

Those not looking at Yellow Shoes on an RSS Feed will hopefully have noticed I've brought the new design into play - there's still a few kinks I need to work out, and I have to put all the sidebar items back to how they were (swapping the design over got rid of them all. Damn blogger! Still, at least blogger lets me play with the design to my heart's content. It makes me happy.

RSS Video tutorial

For people who still browse the web without using RSS, you're seriously missing out! Watch this video to see what it can do for you!

It's a little bit patronizing, but gives a pretty good explanation on what's going on.

How to wear a hat

Since I'm normally sporting a hat when I'm in 'man about town' mode, if not at other times (making a pot of tea, making out, making music and making love are all activities I've scientifically proven to be 30% more amazing when wearing a hat), it was with great interest that I found an article today on how to wear a hat. Until I read this, I was of the impression that wearing a hat was a pretty straightforward thing to do, consisting of a three-step process:

1. Wake up.
2. Discover I have crap hair.
   
3. Put hat on head, being careful to cover as much crap hair as possible.

Apparently though, there's more to it than that. Unless you cock the hat at a wierd angle, and make a pointy gun gesture with your hand, you'll instantly catch chronic gay. I now believe this to be the truth.

I also found this on the same site:

If I ever have a baby, this is the shirt it will wear.

Yellow Shoes new design...

I've been getting a little bored of the Yellow Shoes design lately, and decided it was time for a redesign. I like the grunginess of the current design, but don't like the way the title is blocked in, it seems to cut it off. I also wanted to combine the grunginess with a kind of ornateness, I don't know why. I've set up another blog to test my musings on - have a look and tell me what you think!

You're twisting my melon, man

I've been looking around Virb a bit more today, and so far I've been really impressed - they've made it easy to use, whilst at the same time it's customizable enough to satisfy advanced users. A few features I've noticed that myspace can't touch...

• Keep your CSS styles and page information seperate, so you're not messing about looking through all your code just to change one bit of information.
  
• Drag & Drop layout editor. Put things where you want them.
• Blog importer. Within 30 seconds, my Yellow Shoes posts were all on my Virb profile.
• Random tagline.
• Text-based ads, at the bottom of the page.
  
• Pretty easy to navigate and find what you want.
• "Remove Customization" button on every page - never have to try and squint to read text again!

These pretty much all just serve to show how crap MySpace actually is!

Love, Love, is a Virb, Love is a doing word.

After my huge, plate-throwing big-row with MySpace (with no breakup sex, I'm glad to report), our on and off relationship is now officially ended. I've been looking for something to fill the void, and I think I might have found it just now whilst browsing websites that link to Yellow Shoes. This post mentioned a place called virb, which rang a bell - I was reading Computer Arts in WH Smith about a month ago, and thought I read something about it. Of course by the time I got back home, I'd completely forgotten the name of the website, and after a frantic search through the usual suspects, could find nothing of this amazing place hailed as a designer's dream.

A cursory glance through the site seems to confirm a fairly happy community, and they really do try and promote good design, which is really important to me - I won't lose sleep if I never saw another animated background proclaiming this profile to be "pimped" (which I've accrued enough knowledge by now in my life to know means it will look like a cat shite on it, and that the owner of said "pimped" profile will generally be at best illiterate, and at worst, a scally.)

I'll take a better look around the site when I am less tired and have more time, but it's already looking like Virb could have what I want in a social networking site: a friendly place that's still visionary, and that I can put my own mark on. At first glance it looks like Virb is a MySpace for the grown-up generation.