All you need to do is, whilst in Finder, press alt and click on the `Go` menu. This should show an icon to take you to your Library folder.

The Problem

In short, Aberystwyth Universities webmail was awful.
Therefore, I decided to take the redesigning of webmail on myself, to change the overall look and feel of the webmail app. As soon as I found the time to start and modify the look of it, I found that there were zero, yes, z e r o, stylesheets used, everything was ‘styled’ inline!

Progress

In a half arsed strop I sent a tweet out to the department responsible for Aberystwyth Universities webmail, stating that “it’s embarrassing”. I promptly got a response back, containing a link to a new system they were trailing, to then eventually move to.
The new system was a million times better than the current one. However it still needed a bit of ramping up. I delved into the source code of the new system and found this one actually has stylesheets! I took the default theme stylesheet and chipped at it for a couple few of hours.

Objectives

I needed to keep the design inline with the universities look (clean, with yellow and purple colours).
That was the easy bit. Webmail can be accessed by anyone in the university (I presume). As a consequence of this, it needs to be accessible and usable to everyone, so, things like colour blindness and blurred vision need to be included within the overall design.
You can see what the design looks like against most of the common colour blindness’ here.

The Design

The new design isn’t 100% complete yet, as I’m still finding small things (such as the selected mail folder colour) that need to be changed sightly. I am however happy to release it, just call it a Beta!
I do apologise for the blurring of the names / emails and content, I didn’t want to get in trouble for revealing anything that I wasn’t supposed to be.
Update
I have to point out, I could only use CSS to redesign it, no underlying code could be changed. So major layout changing was near impossible.
Update 2
In regards to the icons, I have a few people say I should change them. I totally agree.
The issue with the icons, are they are img tags, in the HTML source. I only have access to the CSS.
I did think about hiding them and using pseudo elements to put nicer icons in. There are issues with that however, because if the icons in the HTML are replaced, the stylesheet will also have to be amended to not hide them. Meaning my job of designing a quick an easy ‘dag and droppable’ style / theme is done badly.
I would like to clarify however, the icons should be changed.

CLICK ON THE SCREENSHOTS FOR FULL SIZE

Old

New

Right at the bottom of this post is a full (I think) changelog.

Designed With Everyone In Mind

I wanted to / needed to design something which could be used by everyone easily, so making sure it looked correctly with different sight types was essential.
Hat Tip: These screenshots were taken with xScope for Mac, it’s highly recommended for all designers.

Normal Vision

Presbyopia

Protanopia

Deuteranopia

Tritanopia

Protanomaly

Deuteranomaly

Tritanomaly

A Happy Ending

The department which has been working on the new webmail system likes the design and asked for the .css file. However they cannot credit me on the site (but who cares) and can’t pay me. Despite these things, I want the people of Aberystwyth University to be able to read their emails happily. Therefore I have no issues what so ever and have sent the department the .css file and hopefully it will be used, only time will tell.

If you have any feedback on the design, good or bad please either tweet me (@matt_hojo), email me (matthojo [at] gmail [.] com) or leave a comment below. I’d love to know what you think.

Changes

There are quite a few so I’ll start from the top and work down.
Some changes that are really small (or that I’ve forgotten) may not be in this list, others are generalised to save space.

General

• Improved Typography
• Improved look of context windows (Not shown in screenshots)
• Changed default link colour

Sidebar Changes

• Item spacing increased
• Background Colour
• Separator Look
• Separators now go all the way across
• Increased space on the left, top and bottom edges
• Aligned Icons with relative text
• Improved look of hovered links (Not shown in screenshots)
• Increased space between icon and text

Main Mail View

• Top header colour change to match Aberystwyth University colour scheme
• Made the message counter more prominent
• Removed spacing from around the entire frame
• Changed the button bar background and spacing
• Improved buttons look
• Increased spacing of buttons a small bit (buttons now also stack nicely on small screens)
• Changed the look of the search barh bar
• Found hidden buttons …. then hid them again. (See if you can find them)
• Improved look and spacing of table sort header
• Made column name which has been selected for sorting a different colour and underlined
• Increased spacing on message rows to match spacing of the sort header
• Added zebra striping to easily scan messages
• Changed scroll bar to look like the Mac OS X scrollbar (Cant see it on new screenshot)
• Made the section to download text format of email more prominent by making it full width and added nice drop shadow
• Change background colour of text download section
• Increased spacing of text and icons in text download section
• Attachment section is now full width (Not shown in old screenshot, it looked like the text download section)

…. plus small changes like adding / removing borders and making things fancy to the eye with subtle details.

Well, it turns out Automators default ‘Rename Files’ Action cannot accept a variable as an option to rename a file (EH?), I then went on the hunt for an alternative rename Action …. and failed. All the options gave me the same error.

In comes Applescript, a slightly less pretty option but it worked.

The solution I found was here  but I tweaked it ever so slightly so it worked to my liking, here is what I got.

on run {input, parameters}

	-- here the input is a reference to the file passed from the previous action
	set input to item 1 of input
	set defaultName to makeNewName()
	display dialog "Rename File To:" default answer defaultName buttons {"Rename", "Cancel"} default button "Rename" with icon note
	set newName to text returned of the result
	tell application "Finder"
		set ext to name extension of input
		set name of input to newName & "." & ext
	end tell
	return input
end run

to makeNewName()
	set root to "New Picture"
	set {year:y, month:m, day:d, time:t} to current date
	return root & " " & y & "-" & m * 1 & "-" & d & "_" & t
end makeNewName

He’s done it again. Another amazing mix from Scottamin (Scott Rollinson).

If you would like to check out his other stuff head over to his Soundcloud page.

Head Blown.

Alfred is one of the most useful tools I think I own on my Mac it speeds up production speeds like nothing you’ve ever seen.
One of my biggest gripes with Mac OS X though is the faff it takes to show hidden files / folders (including ‘Library’ in Lion). As a result of this I have made an Alfred extension to give you the ability to show / hide hidden files.
All you need to do is open Alfred and enter ‘hiddenfiles show‘ or ‘hiddenfiles hide‘, it’s as easy as that!

Download Here

Thought I’d have ago at doing my own Alfred app theme.
I went for a clean cut look hence the name, Clean.

If you would like to get it, download it here http://cl.ly/521q