Tour Glamour

After agreeing down at Ancient People to play at a new night in Ibiza town, I also said I would do the flyers for the night so that I could get my name around the island a little more. After much to-and-froing of proofs, it's starting to get to a point where everyone is happy with it... have a look... I'll post the final version if it changes much from this....

In case you're wondering, those are Marisa's legs lol :)

Wake Up Your Car...

The website I'm doing for my work at Drive-In is finally starting to come together now, I've just uploaded a test version while the domain is being swapped over, there's still a lot to do, but at least people can get at the information now :) Tell me what you think!

Making a 3 Column Blog

Blogger is great, we all know that - you can have a blog set up and running within about 2 minutes, and it'll look great just using the templates that they provide you with. If you're happy with the way things look then everyone will live in peace and harmony for ever and ever and ever. However, if there's something you want to change about the template, blogger can be a complete nightmare. Yes, everything is styled in CSS, which makes things a little bit easier, but if you don't know what's going on, you don't have a hope in hell of getting things to look the way that you want.

A couple of people this week have asked me how to make their default 2-column blogger template into a wider 3-column template - sounds pretty easy, but we are gonna have to get our hands dirty with the actual coding of the page to make it happen. Before we begin, a quick note: The blogger templates are set up so that they will be viewable on the smallest possible screen size (640x480) and people will not have to scroll horizontally. By increasing your width with 3 columns, the people using this resolution will have to do a lot of scrolling to see your content. However, looking at my stats for the last month for my blog, not one person was using this screen resolution (out of over 5,000 visitors), so this is a pretty moot point.

First of all, a bit of explanation on how the default blogger templates are set up. In order to get everything laid out on the page where they want it, they use Divs, and style them using CSS. Divs are a way in HTML of positioning a block of content exactly where you want it on the page. They're a little like tables, but instead of having to make sure that one table cell takes up x amount of space in order for another to appear in your desired position, with Divs, you can tell it an exact coordinate. Here's a diagram showing the Divs (and their names) on a default blogger template:

These are pretty self explanatory - the only one that may cause a bit of confusion is the outer-wrapper - this is basically a hold-all for all the other information contained within the page, and gives the divs contained within a reference for positioning. The divs will have different dimensions, depending on what default template you've chosen. This is how we want the template to look:

Here is where things start to get messy. The first thing we need to do is increase the width of the content-wrapper so that it can accommodate another sidebar on the left. The default sidebar is generally around 220 pixels wide, so we'll need to increase by this amount. Go into the Edit Template HTML page for your blog (dashboard>layout, then choose the Edit Template HTML tab at the top of the page). Now you need to find the part in the code that controls this outer-wrapper width - in the minima template this is about 1/3 of the way down the page - you're looking for:

#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}

This controls all the dimensions, margins and positioning for all your content in your blog. Some of the settings may be a little different, depending on your template, so don't be alarmed if this is the case. Change the width value to 780px. This is the maximum size width that people looking at your blog will be able to see without scrolling horizontally at 800x600 resolution (you need to allow 20px for the scrollbar on the right). While you're here, below the code you just edited, you'll see a section named #main-wrapper - change the float option in this section to center instead of left, so that it looks like this:

#main-wrapper {
width: 410px;
float: center;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

This won't change much when people actually look at your page, but it will help you see things the way they're supposed to be in the layout editor. Now we need to change all the other divs so that they will fit with this new width. We'll deal with the header first, and work down. The header code is actually above the outer-wrapper code. This is what you're looking for:

#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}

Again, change the width to 780px (we want the header to take up the entire width of the page). Same with the footer (further down the code):

#footer {
width:660px;
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
}

Change the width to 780px again. Here's where things start to get interesting. The existing sidebar and the div that will contain the main content, we want to keep around the same size, and just budge them over enough to fit in another sidebar div. We need to copy and paste the existing sidebar-wrapper code to make the new sidebar to the left. Find this near the top of your code:

#sidebar-wrapper {
width: 220px;
float: right;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

Change the width of this sidebar to 200px, then paste your new sidebar code directly underneath this one (it doesn't really matter where you put it, but it helps to keep all the wrappers together so you can find them easily if you need to. Change the values to something like this:

#sidebar-wrapper2 {
width: 170px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

The float value just tells the div which side of the outer-wrapper to go to, you'll see on the other sidebar that this was set to go to the right. Now that we've set the style for our div, we need to actually create the div itself, so we have to move out of the CSS code block, and down to the HTML block, further down the page. Look for a block starting with this code:

<div id='sidebar-wrapper'>

Above this, paste the code for the new left sidebar:

<div id="sidebar-wrapper2">
<b:section class="sidebarLeft" id="sidebarLeft" preferred="yes">
<b:widget id="Profile1" locked="false" title="About Me" type="Profile">
</b:widget>
</b:section></div>

I've just added the "about me" widget to the left sidebar to give you something to fill the space in the layout editor, for when you come to add other widgets to this area, otherwise you'll have nowhere to drag your widgets to to add them to your new sidebar. You can remove this "about me" widget as soon as you've added another widget to the sidebar. Because you now have 2 "about me" sections, you'll need to delete the one for the right-hand sidebar, otherwise blogger will throw a tiz. Just delete this code

<b:widget id="Profile1" locked="false" title="About Me" type="Profile">
</b:widget>

from the right-hand sidebar div, which should now be just under the code you've just inserted.

All that remains is to copy the styles used for the right-hand side bar to the left one, so that they have a uniform style. Go back to the block of CSS code, and somewhere near the bottom you'll see a section specifically for the sidebar, starting with

/* Sidebar Content
----------------------------------------------- */

Here, you should see 4 or more styles relating to the right-hand sidebar, you need to copy these styles to the new left-hand sidebar by just adding the name of the sidebar to the list these styles apply to. So where you see

.sidebar {

replace it with

.sidebar, .sidebarLeft {

and where a certain element of the sidebar is changed, add the same element to the list for the left sidebar, so you might see

.sidebar ul {

change this to

.sidebar ul, .sidebarLeft ul{

likewise

.sidebar .widget, .main .widget {

becomes

.sidebar .widget, .main .widget, .sidebarLeft .widget {

and so on. Once you've copied all the styles for the right-hand side bar to the left-hand one, you should be pretty much done. You might want to fiddle around with the widths of the elements to make them fit better with your design, but apart from that most things should be fine. I would strongly suggest looking for a tutorial on CSS on the internet so that you understand fully what the code in your template is doing, and so you can edit it to look exactly the way you want it to without fear of breaking the template.

I hope you find this tutorial useful, and leave a comment if you have any problems with this or have a tip regarding this code, we're all here to help each other learn!

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.

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.

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!

Knee deep in CSS..

Today I've been helping my good friend Steve (of Podrunner and Groovelectric fame) transfer his email newsletter onto Blogger so that he has a ready-made RSS feed. As always with Blogger, and trying to work an existing design into a new template, there's been a neer-to-do with CSS coding, and getting everything right, but I think the results are starting to look quite pleasing. Take a look yourself at the new site, any design suggestions are appreciated!

Whilst in the process of fiddling with Bloggers innards, I found how to set your own bookmark icon for Blogger sites, which I promptly used for my own site, as you can hopefully see in the URL bar now :)