Willans.net

Over A Year has Passed

Simon — Sun, 07 Aug 2011 07:44:37 +0000

I last blogged on 6th June 2010. A lot has changed in such a short time. As I blogged back in April 2010, I am now working for Strawberry, in Hull, and my skills have drastically improved.

Having being working on designing and building websites for over 8 years now, I have seen the web change at a very fast pace. Now, it seems to be gaining more and more momentum as more and more people get online. It’s an exciting career to be in. As things are changing so rapidly, it has definitely been a huge benefit being a part of a larger web team. At the time of writing this, there are six web developers/designers at Strawberry; Jamie Wright, Stu Greenham, Matt Woods, Adam Gilleard and James Greenwood. Although not necessarily a competition, it is always good to try strive to be the best you can be. And with the rest of the team picking up new skills, it’s always encouraging to try and keep up with the pace. If you fall asleep in the web industry for even a month, you’ll fall behind.

Working as a Part of a Team

The biggest change I found when moving to Strawberry was the diverse skill set. Rather than having one or two people who are really good at everything, it’s a case of having many people who are good at a lot of things, and really awesome in certain specialised areas. Of the various times I’ve been unable to do something to the best it could be, I know there’s someone else there who can do a kick-ass job.

I’ve always been more of an all-rounder when it comes to my skillset. Over the last couple of years however, my skills in CSS, HTML, jQuery and PHP have grown at a fairly decent pace. Since being interested in web design since the age of 15, I stepped in to the developing stage straight off the bat. Although I don’t think that a web designer should be able to do everything, I disagree that someone can call themselves a web designer if they can’t write CSS and HTML. It can play a vital role when designing your site in Photoshop.

As I mentioned above, my jQuery skills have grown at a decent pace. When I joined Strawberry, Adam was pretty much the jQuery wizard. As I had only been writing jQuery goodness for a few months I was often pestering him for help. He then went back to university for a year, so it was the perfect time to just dive right in. As much as I like to use tried and tested plugins, I’ve never been a fan of the copy and paste method of ‘coding’. I like to learn, experiment and create. I’m now at a stage where I’ve begun writing my own jQuery plugins and slideshow functions. Sometimes, if time permits, it’s better to write your own code. You get a better understanding of how everything works. Plus, if you want to add features, you know your code so you know what everything does (hopefully).

ExpressionEngine

I’ve been a huge fan of WordPress since it first came out. It still powers this site and will continue to do so for the foreseeable future. When I started working in Hull, I met the giant that is ExpressionEngine (EE). Learning a whole new Content Management System (CMS), which wasn’t small by any means, led to a fairly steep learning curve. For certain commercial projects, it’s definitely a contender for top-dog CMS. Over the past year, my skills in EE have developed nicely. I’m now at a stage where I’m easily coming up with solutions to complex problems, and really pushing the boundaries of what the CMS can do; from e-commerce-like set-ups to multi-language websites. I wouldn’t have even considered anything like that possible about a year ago. As with jQuery, I’m now at a stage where I’ve written a few plugins. The latest one being a Twitter plugin that uses the OAuth authentication method to pull in Tweets (hopefully the blog post will be available on the Strawberry website very soon).

All in all, my skills as a web designer have drastically improved over the past year. Even a year ago I thought I was good at what I did. I’ve always liked looking back at my old work and having the thoughts of, “what was I thinking?” If you can look back at your work from a year ago and can’t do better now, there is a problem. Can’t wait to see what the future holds in the beautiful web.

Switching to Google Chrome

Simon — Sun, 06 Jun 2010 17:29:01 +0000

A few weeks ago, I finally made the switch to Google Chrome from Mozilla Firefox, after several failed attempts. Previously, I’d tried making the switch, but as a web design and developer, the tools and extensions available for Chrome were so inferior to their Firefox counterparts. A few weeks ago, I found appropriate plugins to help make the switch a lot more pleasant. These were the plugins that allowed me to do so.

MeasureIt

Because I’m usually a pixel-perfect designer and developer, I like to know the widths and heights without too much hassle. MeasureIt allows me to easily determine the size of any section of a web page. Download extension

Web Developer Toolbar

One of my favourite extensions. This is the official port of the much-loved Web Developer extension for Firefox. The Web Developer extension adds a toolbar to the browser that allows to check and modify the current web page. Download extension

Webpage Screenshot

Needs no explanation. Takes screenshots of websites. Download extension

SEO Site Tools

This plugin provides a lot of information about the website you are currently viewing. Some (far from all) of the information includes: Search engine rankings, Alexa rankings, markup information, links to social media services and domain information. Download extension

Delicious Bookmarks Extension (Beta)

I frequently use the Delicious web service for saving my bookmarks, so without this plugin, I’d find saving websites a bit of a laborious task. One thing that I instantly missed was the suggested tags feature that was in the Firefox version of the plugin. Download extension

Some final notes

I’m still actually undecided about whether I’m happy with the switch. There are some things that I miss about Firefox. The ability to right-click and view background images is one of them. I don’t know why I like this feature so much – it just seems really useful.

The major thing I miss is Firebug. Firebug lite isn’t up to those standards. However, I’m slowly getting used to Chrome’s inspect element development area.

Site Focus: Three.co.uk

Simon — Mon, 17 May 2010 17:28:28 +0000

Recently, Three.co.uk (the mobile and broadband provider) got a big facelift and had their website redesigned. In this article I describe key elements of this redesign.

When you first load the page, your eyes are not drawn strongly to any particular section of the screen. The design is very flat, something which I will raise further on. The only reason I was drawn to the middle of the screen was because of the movement of the images (the fading slideshow).

Being a wearer of glasses, I tried something different this morning. Visual hierarchy can be determined through colour, shading, whitespace, font sizes and various other things. So I took my glasses off, and saw what stood out the most. The main things that stood out were the logo, the large image in the fading slideshow and then the large ‘The Three Network’ banner a little further down the page. My eyes were not drawn to any other elements on the page on the way down – so many missed opportunities to utilise space.

Now let’s take a quick look at some other elements of the page:

To me, the yellow banner seems too much like an advert and makes me want to ignore it. When you hover over it, you will find the package builder tool. Now in the current global situation, everyone wants the most they can get out of as little money as possible, with little waste. Why would you hide a tool which would aid the buyer in such a way?
Search is an important feature of any larger website. People do not have the time to find things manually. The search box is very small in comparison to the surrounding elements – and may be overlooked by the average user.
The title on each slide of the fading slideshow has impact and draws the eye. This is the key area for pushing latest offers and it’s where Three want to make their sales.
The only reason this call-to-action button works is because of the colour contract. There’s a lot of black and white, but no colour. However, this button brings green in to the design. It still doesn’t however shout ‘Click me!’ A more prominent call-to-action is needed here.
Large imagery that is colourful and simple can often stand out very easily, especially when surrounded by details images, such as mobile phone shots.
This carousel shows the latest handsets being pushed by Three. This area seems very tight, with not much space between the phones and their titles. Another issue with this area, and with the larger slideshow, is the inability to stop the slideshows (by hover would even do) or go back to a previous slide. The user must wait for it to come back around again.
Importance can be determined by colour and contrast very easily. It’s easy to see that the title is more important than the text below it. However, this has been done fairly poorly. The contrast of the grey text on the white background is bad from an accessibility point of view; users with visual impairments may struggle to read this text.
The words ‘Find’ do not look like clickable buttons or links (no-underline). The design team behind this seems to be taking for granted that the average user knows more than they think. Another issue with this is the spacing between the input field and these ‘buttons’ – the spacing is too much, causing them to look unrelated.
As mentioned in previous points, spacing makes another issue here. In the top part of the website, there’s a mix of good whitespace use and bad whitespace use. This spacing here doesn’t make much sense and conflicts with the rest of the design. The other spacing seems in proportion, but this seems like wasted space.
So it looks like a movie poster. I like the imagery, but it doesn’t really seem to fit in with the rest of the branding.
The space to the left of the SIM card looks like something is missing. They should have had the Three SIM card laying horizontally. The Three logo on a real SIM card is actually in the horizontal orientation anyway.
In contrast with issue 9 and too much whitespace, this area of the homepage seems far too tight, possibly overwhelming the user.
Users have the ability to search phones by brand, and to find out more about these brands. However, these two blocks of information seem very irrelevant from each other in terms of the design. Bringing these elements closer together may show more connectivity.
Nearly finishing off the body of content is an unusual empty area. It doesn’t look tidy, and looks more like they ran out of things to put there so left it at that. Or, there used to be something there in the initial design, but it was removed last minute.
The footer is basically a reverse of the top half of the website. It’s white text on a black background. It fits in, it’s clean and informative. Everything the user may want to find, it is here.
Maybe they weren’t comfortable with such an open design. An ugly shadow has been added to either side of the layout. This boxes everything in. This doesn’t convey the message of open, free and mobile. To me it says boxed-in, physical connection and wires.

Conclusions

This design has a lot of potential, but there are a lot of things that need re-thinking about. It’s not too late for this to be salvaged. Maybe fixing an element each week, and the public would be non-the-wiser, but getting a more pleasant experience each time without knowing why.

Rating: 5/10.

Create an HTML email signature for Mac Mail

Simon — Fri, 14 May 2010 17:27:31 +0000

Recently, I tried to create an HTML email footer and attach it to a Mail account for the the Apple Mac (OS X). It isn’t as simple as linking to an HTML file like in my much preferred mail client Thunderbird. So how do you do it?

Step 1

The first step is to create your HTML footer. Below is the HTML used to create my signature at Save9.



Regards


Simon Willans



	
		
			
		
		
			Simon Willans, Web Designer
			
				
					
					simon.willans@save9.com
					 
					
					www.save9.com
					 
					
					@save9
					 
					
					linkedin.com/in/willans
				
			
			Telephone: 0845 0299999 or 01723 384555 | Fax: 01723 384556
			


			Save9 Limited, Woodend Centre, The Crescent, Scarborough, North Yorkshire. YO11 2PW. United Kingdom.
			
Company Registration No. 4351548 | Registered in England and Wales | VAT Registration No. GB 789 4011 03
			


			Web Design & Development  |  IT Products & Support  |  Cloud Computing  |  Telecoms

You can ignore the formatting, this is just to give you an idea. Save this is as an HTML file (extension .html or .htm will do just fine).

Step 2

Open the Mac Mail application. Then go to the ‘Mail’ menu, and select ‘Preferences’ (cmd + ,).

In the preferences windows, select the ‘Signature’ tab.

Create a new signature. It should probably look like the one below:

Finally, quit Mail – this is important.

Step 3

Open up your HTML file (the one you created in step 1) in Safari (do not do this in a text editor, it will not work).
Go to the File menu and select ‘Save as’ (cmd + shift + s).
In the window that pops up go to your home folder (your username usually) > Library > Mail > Signatures.
Overwrite this file.

Note: If several signatures already exist, it will be the newest file created.

Step 4

Open up Mail again
Select Preferences from the menu
Select the Signature tab
Your new HTML email signature should now have replaced the old one.

Site Focus: Jon Brousseau

Simon — Mon, 03 May 2010 17:26:08 +0000

All too often in the web design world, usually from a client perspective, web sites must have flashy animations, glossy buttons and other “Web 2.0″ style graphics. It is often overlooked that some of the most beautiful designs are the simple ones – usually created by a charming colour scheme alongside some kickass typography. In this site review I take a brief look at Jon Brousseau’s portfolio.

Typography

When you go to any new website, the visitor should instantly be told what the website is or what it is about. Jon Brousseau does this extremely well – and if you miss this intro, I think a trip to the opticians is in order. From the off you can tell that Jon is an interaction and print designer. As you go through the website, the headings are set up correctly and perform a level of hierarchy. But to me, it seems that it has been done in a very thoughtful way. The title “some work samples” is a lot bigger than the individual project titles, but the project titles stand out a lot more, showing more importance – purely through colour.

Layout

After the introduction, the layout is simple. Large portfolio screenshot, a brief summary of the project and a link to the live version (if applicable). This is purely a portfolio site, so attention must be given to the work. If this were a freelancers website or agency website, it may be more worthwhile given more information about the project.

Extras

You may notice that when you scroll down the page, the portfolio item screenshots fade in. A subtle effect, but it gives the page so much more life.

In the opening paragraph there are some tooltips that appear when you hover over any of the three links. I do feel however that the only link that may need a tooltip (or further explaination) is the ‘experience’ link. The other two (view work and get in touch) are very clear and do not really require extra information.

Conclusions

This site is very minimal but has so many hidden gems throughout the design. An excellent portfolio site for showing a few select items of work.

Rating: 8/10.

Using WordPress to Track Marketing Campaigns

Simon — Mon, 26 Apr 2010 17:25:12 +0000

Marketing is a crucial aspect of any product, whether it’s a website or the latest George Foreman grill. If done right, it can lead to huge conversion rates. But how can you track such campaigns on the web?

When people receive brochures, read articles in magazines or view other printed marketing material they may typically see a URL they are supposed to type out. This URL should typically be as short and as meaningful as possible; nobody wants to type out www.willans.net/amazing-website-strategy-guidelines. They are more likely to go to the website if the URL was shown as www.willans.net/web-strategy.

So what if you already have a page URL of ‘amazing-website-strategy-guidelines’? Renaming the file/path isn’t an option because it will mess about with SEO rankings, and anyone who has this page bookmarked would no longer be able to find it if it were to be changed. The solution is page redirects (or technically speaking, 301 permanent redirects).

You could either change amazing-website-strategy-guidelines to web-strategy and have web-strategy redirect to amazing-website-strategy-guidelines or vice-versa. But, if you use any analytical tool (such as Google Analytics) to track what pages the user has been on, it won’t track 301 redirects (because these tools rely on the page actually being loaded). To get around this, you can simply append a query string to the end of the URL. For example, www.willans.net/web-strategy would redirect to www.willans.net/amazing-website-strategy-guidelines/?campaign=my_facebook_campaign, which would show up in Google Analytics.

So how easy is setting up a 301 redirect? For a webmaster with access to Apache (or the Windows Server equivalent) it is relatively straightforward. But what if you want an even more hassle-free way (even if you are a webmaster)?

If you use WordPress then you’re in luck. John Godley created a plugin for WordPress that allows you to easily manage your 301 redirects (it also handles 404 error pages too). With no server knowledge required, you can easily redirect one page to another, and append query strings to URLs. It gets even better than that too – it also has it’s own built in stat counters so you can view the results even quicker.

This is the most efficient way I found of setting up campaign tracking. There may be better solutions, but this worked for me.

Off to Strawberry Street

Simon — Sun, 25 Apr 2010 17:24:35 +0000

After 2 years of working with the guys at Save9, it has come to the time in my life where I need to progress with my career and move on to bigger and better things. As of the backend of May I will be a web designer/developer at Strawberry, in Hull. I did get a job offer in Durham too, but decided that Hull was a much more suitable location.

I got the impression that the people who I did meet on my interview day were all very laid back and it looked a good work environment – and the chairs looked pretty comfy too.

What really drew me to Strawberry was the amount of work they had coming in to the company, the calibre of work they were producing and the array of different designs they product.

Funnily enough too, one of the concerns that cropped up in the interview was whether I actually knew anyone in and around the Hull area (which I do) – since then, I have only just realised I know even more people than I thought in Hull.

Site Focus: Woodend Creative Workspace

Simon — Mon, 19 Apr 2010 17:23:53 +0000

The building in which I work (for Save9), Woodend Creative Workspace, recently had a bit of a facelift for its website. The work was undertaken by Colour Creation, one of its many tenants. This project wasn’t a completely new design. It was a transformation of a simple information based website, in to a website driven by a CMS – so the admins of the building can update their information a lot quicker and painlessly.

Fresh imagery

Upon first glance, I like the new rotating banner. It provides a much needed uplift to the old imagery (which showed the building still in its development stage). It really does sell the building well.

I was a fan of the older version. It was super minimal and possessed a very clean and elegant feel. Now however, I feel the new version of this site brings with it some awful design traits and some rather baffling design decisions.

Hyperlinks

First of all, by default, the main body hyperlinks are black and bold. This is an issue for one main reason – they also use the same sized and weighted font for headings. A person with a poor quality monitor or anyone with colour impairments will have difficulty distinguishing between the two. On a further note about the hyperlinks is the visited state (i.e. what a link looks like if the user has been on the target page before) – they are underlined. If anything, the links should be underlined by default, then maybe have no underline after they’ve been visited (an underlined link stands out a lot more, and is obviously a link). On a final note about hyperlinks, the use of ‘click here’ links baffles me. It’s bad for SEO and is just generally an outdated practice.

Use of Flash

The rotating imagery on the website is powered by a Flash script. I don’t have anything against Flash on the web, although it may be departing us in the not so distant future. But for such a simple effect, a bit of JavaScript would suffice – and would be iPhone/iPad friendly – which quite a few tenants use.

Contact Form Submission

On submission of the form, when unsuccessful, the page is reloaded and the browser skips straight to the top of the page. 2005 called – it wants its lack of form validation back. End harshness.

Some other tiny little gripes

You may notice down the bottom of the page some irregularities with the pipelines and the Colour Creation link. The anchor tag has been placed in the wrong place within the text. I feel this reduces quality by showing lack of concentration.

Why is the address separated by pipelines? This will be an interesting experience for people who depend on screen reading software.

Why have HTML lists not been used for displaying lists? I haven’t seen this done in a while, and I’m quite amazed people still do this.

Last but not least, the amazing badly photoshopped team photo on the about page. I won’t give this away, but what do you think is wrong with this photo?

Conclusions

With a bit of care and attention, the beauty and simplicity of the original design could have been maintained – but all the little issues add up, and result in a poor quality site. The beauty of web design is the little details that most people overlook.

Rating: 3/10

Property Website Content

Simon — Wed, 07 Apr 2010 17:23:26 +0000

Ok, so maybe this doesn’t have to do entirely with the actually property listing websites themselves, but more so in relation to the content they have. I am currently looking at new accommodation and I’m growing increasingly frustrated. I’m not moving out for another few months, but I thought it’d be worthwhile checking out some property rental websites.

Browsing through the likes of Zoopla! and rightmove I noticed one major thing in common. Poor content. Whoever the information is submitted by (likely to be estate agents), they need to take a step back and look at what they are publishing. Some listings have little information about the property, some have lots (which is good) – but most listings fail in one area. Photos. We are superficial creatures, and as much as we’re told not to, we do judge a book by it’s cover. It seems that I’m overlooking the properties that do not have internal photos (some don’t even have an exterior view). Does this mean the publishers of this content are lazy? Or are they trying to hide something. Most people are working full time jobs and cannot spend their time looking at 20 or 30 flats that aren’t suitable for them; judgements which could have been made via simple photographs – Christ, there’s just no excuse for not being able to take some photos when every modern mobile phone has a camera on it. I want photos!

Maybe I’ll just start my own property website and do it right. Yes, that sounds slightly arrogant, but I’m frustrated.

Site Focus: Line25

Simon — Mon, 05 Apr 2010 17:22:50 +0000

Every two weeks I will be reviewing a website of my choosing, and examining certain key aspects of the design. The reason for this? I have grown a little bit tired of seeing website publish lists and lists of websites because they look good. Sure, these posts are popular, but they have little value other than, “look at these pretty websites.”

My first website to be reviewed in Site Focus is Line25.

What is Line25

Line25 is a web design blog written by Chris Spooner (I’m sure many of you in the web design industry will have heard of this cheeky chappy). The main focus points of this design blog is to give ‘inspiration to web creatives’.

The Content

Possibly the most important factor in any website is the content. Line25 divides its postings up in to three categories; Tutorials, Inspiration and Articles. Tutorials can cover anything from Styling Up Your Twitter Profile with a Custom Design to a more technical post about Coding Up a Web Design Concept into HTML & CSS. A wide array of material is covered in the tutorial posts, but the scope is still narrow – which remains key for targeting audiences.

Every Friday, Chris posts a ‘Sites of the Week’ post, showcasing 5 websites that he believes posses outstanding design qualities that may potentially inspire your next design.

Finally, there is the articles category. This is where only gripe about the content comes in with the content categorisation. There are many informative articles such as interviews with designers or tips about design. However, there are a few entries such as 35 Creative Examples of Doodles in Web Design that have crept in to the articles category. Maybe these should be best kept within the inspiration category.

The Design

Upon first glance of this design, you can instantly see a connection between the name and the design – how important this is, is a debate for another day. But I liked that connection – clearly some thought has gone in to it. The design is very minimal, which gives focus to the content. Content is king, and rightly so in a design blog. The header is small, meaning the reader can skip straight to the content without scrolling.

Each individual post sticks out of the content area by about 50 pixels or so – breaking convention, but creating interest. Also, when scrolling down, it’s so easy to see where one entry ends and another one starts. Simple, but so effective. Each post also has a subtle image behind the title, further emphasising the content that is to be found within the article.

Ultimately, careful consideration has been given throughout to make this a light and airy design. Plenty of padding between elements makes this pleasant and easy to digest blog.

There are however a few things that bug me about this design. Firstly, the sidebar is very dark compared to the rest of the design and seems a bit overwhelming. It definitely is distinguishable from the main content column, but maybe for the wrong reasons. Secondly, the alignment of the ads in comparisons to the 3 links (RSS, email and Twitter) and search box is a little uncomfortable. Perhaps if the padding between the ads was increased by about 4 pixels, it would make for a much more flush design.

Finally, something that appears to have been overlooked in the design is the contact form. The elements have not been styled, thus do not fit in with the rest of the website.

A few little tweaks would make this design as good as it can be.

Conclusions

Overall, I’d say a lot of focus has gone in to the layout and presentation of the content, but a few subtle things have been overlooked within the design.

Rating: 7/10.