recent work
that's me

And of course my buddy Ben.
He's half my age now so I can finally keep up in a race.

I

live and work in Edinburgh, Scotland
at a small but perfectly formed graphic
design agency called H&A.

I am a passionate web/interactive/graphic
designer, and I relish every opportunity I get
to flex my creative muscle.

I also sing and play guitar in a band called To Catch
a Thief
. We have three records out and we tour the
UK pretty regularly so come check us out!

email : ali [at] drippinginsunshine.com
rss : feed
twitter : ali_in_sunshine

October 30th, 2009

Sharing is Caring.

There are so many things I’ve learnt over the last few years which, when I figure them out for myself, I wish someone had shown me ages ago. As with everything in life, there are some things you have to figure out for yourself, but I thought I’d put together a series of blog’s sharing a few bits and pieces that I use every day and I thought other people might be glad of.

Media TempleHosting
I’ve tried countless hosts over the last few years. I’d always known about media temple but I’d been slightly put off by the intital set up cost for my own work. The more sites that H&A were hosting, the more I could see the value in investing in their Grid Service Package. Once I’d experienced their awesome control panel and their super quick call centre service, I decided to use them for my personal projects. It sounds like I’m writing a press release for them but I can’t recommend them enough. They offer a ‘lite’ version of their GS-Package which you can find here.

FTPFTP
I used to use a dedicated FTP client to upload my sites. While this is useful for certain tasks, I’ve taken to using Dreamweaver’s FTP facility. Massively improved my workflow.

Little SnapperInspiration Gathering
This is something I’ve always struggled with. How best to bookmark the great pieces of work I find every day on the web. Littlesnapper is a piece of software built entirely for this purpose, and it does it’s job incredibly well.

Smooth photo animation in Flash.
If you’re animating images in flash, particularly if you’re adjusting their dimensions, you’ll get a horrible choppy effect when you export your movie.
Smoothing
To get yourself some nice slick and smooth animations, all you have to do iiiis – Open your library, right click the image you are animating, click on properties and tick ‘allow smoothing’. Simples ;]

Pen ToolUsing the Pen Tool.
I didn’t bother learning how to use the pen tool for quite a while cause I couldn’t get my head around it. The only advice I can offer when starting to learn how to use it is don’t have big gaps in between your anchor points, and to make anchor points adjustable you need to click, hold and move your mouse. There are plenty of in depth tutorials out there describing how to use the pen tool. All I can say is, if you don’t use it, spend an hour trying to get your head around it. You’ll be glad you did.

Use Starkers as a basis for your wordpress theme
Elliot Jay Stocks has done a lot of hard work for you here. His starkers theme is totally stripped back containing just the bare bones of what you need. A great starting place for any project.

The Firebug plugin for Firefox
If you regularly work with HTML & CSS, and you don’t use firebug, I can’t explain how much easier it’s gonna make your life if you do.
Firebug
Basically, it allows you to inspect elements on your page, and shows you what css properties (amongst other things) are affecting those elements. You can even adjust them in firebug if you want to and it will affect the page.

Optimising for IE6
I have never read any helpful blog posts about optimising for IE6 because everyone hates it so much. I’m no different, but it’s often a necessary evil. For the record, my opinion on IE6 optimisation is that the users who browse using IE6 often don’t have a choice, and it’s not fair that they are punished for having to use a crappy browser. Having said that, I don’t optimise for IE6 as part of my basic cross browser optimisation anymore – I offer it as an additional service as it is a heritage browser.
Anyway, on to the helpful tip.
You ready?
Any margins you have – half em.
So, if you have <div class=”logo”></div> and in the css you’re applying margin-right:20px to it in your stylesheet. Change it to 10px in your IE6 stylesheet. Apply that rule to all of your elements that have margins on them and you’ll go a long way towards getting your layout sorted in IE6.

Wordpress
Wordpress

Since I joined H&A a year ago, I have started using wordpress a lot. The following two techniques for customising it as a blogging platform are the probably the coolest adjustments I’ve applied to it to date.

Wordpress Categories
The home page and the portfolio page of my blog are both dynamic pages, updated through the posts section of wordpress. I dictate what appears on each page and how by doing the following:

- I have installed the ‘Advanced Category Excluder’ plugin. It allows you to mark certain categories as hidden in specific sections. So on this blog, I have chosen to hide any posts marked as ‘portfolio’ from the home page.
- You upload a php file into your theme folder for the category that you want to display differently. In the case of my blog, my portfolio is category-4. So I upload a file called category-4.php into my theme and it modifies the layout of those posts accordingly. A full explanation of how this works can be found in the wordpress documentation. To find out how to get the ID of your category, read on.

Wordpress – Different templates, for different categories.
This is a technique I’ve used in a few projects now. Put this bit of code into your ’single.php’ file:
<?php
$post = $wp_query->post;
if (in_category(’1′)) {
include(TEMPLATEPATH.’/news.php’);
} elseif (in_category(’11′)) {
include(TEMPLATEPATH.’/portfolio.php’);
} else {
include(TEMPLATEPATH.’/news.php’);
}
?>

What it does, is says, if the post is in category 1, then use news.php to layout the post. If it’s in category 11, use portfolio.php
Pretty straight forward? One thing wordpress makes really difficult is figuring out the ID’s of your categories. Here’s how to do it:
- Go to Posts
- Click on Categories
- Hover over the category that you want to know the ID for.
- It’ll show you in the status bar at the bottom of your browser.

An example of where this would be useful would be if I had an ‘inner’ page to my portfolio. All I would do is mark a post as a portfolio post in the categories section in wordpress and it would lay it out as per the portfolio.php layout dictated. To really make this work for you, you’ll need to use custom fields which can be called in your templates.

Both Together
Use the two techniques explained above together and you could go really far with it. Your client could have a news page, an events page and a courses page. They could update them all from the posts section in wordpress, dictating which section they ended up in using the category selector. Each of these post types could be laid out differently with different types of content (thanks to the custom fields) and their parent pages can also be laid out individually.

That’s all for now
I’ve decided to I’m going to do a few posts on this subject. The next one should be up within the month. Hopefully this helps someone out there learn a little something, or adapt their workflow for the better. Make sure you follow me on twitter if you wanna stay up to date with the blog. Super. x

Leave a Comment

twitter

you'll find me on twitter as @ali_in_sunshine

music

the records i'm rockin just now

flickr

possibly my face...possibly just pretty pictures i like

'friends'

i like to get about the internets pay these guys a visit