Creative Hat » Web Design

One Stop Motoring

Ferg — Fri, 11 Dec 2009 09:51:15 +0000

Creative Hat were approached by One Stop Motoring Centre to design and build an e-commerce system to sell their many motoring products online. Part of the brief was to brand the company in keeping with their existing businesses. This system has bespoke custom modules and was designed entirely in-house. Click on image below to view.

Sorrells Naturally

Ferg — Fri, 11 Dec 2009 09:32:02 +0000

Creative Hat are working with Sorrells Naturally to give their online shop a more elegant look. We also take care of their online promotion and SEO to make their business of selling anti-ageing products more profitable.

To view the site, click on the image below:

The Cufflink Store

Ferg — Thu, 10 Dec 2009 22:44:13 +0000

Creative Hat were asked to build an e-commerce site for The Cufflink Store.

The Cufflink Store sells a wide variety of cufflinks, and wanted to offer the biggest choice available online, so we were commissioned to design and build a site that would be both functional and attractive, reflecting the high quality of the company.

You can view the site by clicking on the image below:

Entelesyn Goes Live

Ferg — Wed, 21 Oct 2009 14:12:34 +0000

…“The scale of the Global challenges that are confronting humanity in the 21st Century will require individuals, groups, and societies to fully engage their talents and potentials to co-create a sustainable future that benefits all life.” Mick Collins – Entelesyn View Site

Working from a sketch provided by client, creative Hat came up with a brand identity that adequately represents the vision of Entelesyn. We worked closely with the client on layout and design for the website, to achieve a crisp corporate look, yet something unusual was required in order to convey the client’s own creative temperament.

The design for the site and accompanying stationary was based around a honeycomb theme, to convey synergy, co-operation and unity of purpose. These core principles are part of the ethos of Entelesyn, whose vision is primarily concerned with ecology and the future of the planet.

The CMS used for this site was open source Joomla; a first for Creative Hat, as we generally build bespoke CMS systems. However, the complex functionality requirements from the client (including video upload capability) meant that Joomla was the ideal choice for this site.

This was a great project to work on, and the creative collaboration with the client went very smoothly indeed.

Does Validation Affect Ranking?

Ferg — Thu, 27 Aug 2009 08:57:29 +0000

Does validating your code improve your ranking? The short answer is no. In fact, Google’s website doesn’t even validate.

They don’t care, and in general, it won’t affect rankings, though this depends on the type of error we are talking about. Google’s website (at the time of writing), has 65 Errors & 8 warnings.

There used to be a directive in Google’s content guidelines that they wanted “valid code”. Many people understood this to mean “validated code” however, and started panicking; editing their sites to make them validate. This fear was compounded by unethical or ignorant web designers, who jumped on the band wagon and started making erroneous claims about validation to sell SEO.

Google simply wouldn’t waste their resources to validate the html of each page in their index. This would take an extremely long time to process, and each page would have to be processed again when any changes are made. It would be a waste of time and resources for them to do this.

Nonetheless, it is still a good idea to validate your HTML code though. This ensures that your pages are accessible to everyone, despite what browser or operating system they use. It also ensures that the search engine spiders won’t have any problems crawling and indexing your pages.

Here are some genuine positive and negative ranking factors:

Top 5 Ranking Factors

Keyword Focused Anchor Text from External Links
73% very high importance

External Link Popularity (quantity/quality of external links)
71% very high importance

Diversity of Link Sources (links from many unique root domains)
67% very high importance

Keyword Use Anywhere in the Title Tag
66% very high importance

Trustworthiness of the Domain Based on Link Distance from Trusted Domains 66% very high importance

Top 3 Negative Ranking Factors

Cloaking with Malicious/Manipulative Intent
68% very high importance

Link Acquisition from Known Link Brokers/Sellers
56% high importance

Links from the Page to Web Spam Sites/Pages
51% moderate importance

The Mighty PNG

Ferg — Thu, 20 Aug 2009 10:23:09 +0000

The PNG format has many advantages over the GIF and TIFF image formats for web designers. If you’ve been using GIF’s rather than PNGs, perhaps this article will be of some help to you.

The gradual phasing out of the GIF format in mainstream development is inevitable, and will ultimately enhance everyone’s web experience, especially with the inclusion of alpha transparency support in web pages. For detailed information on the PNG format, you can visit the Official PNG Home Page.

The PNG format was designed to replace the limited GIF and TIFF formats. It employs maximum integrity in compression (lossless compression), so that no image data is lost when saving or viewing the image. The PNG format does not have any patent restrictions and can be read and written freely by software developers and webmasters alike. GIF images can only be saved as an 8-bit colormapped image, which limits the user to 256 colors. PNGs on the other hand, can be saved not only as 8 bit, but also 24 bit and higher up to 64 bit. GIF images can only use one out of the 256 colors for full transparency, whereas PNGs have a much higher level of transparency support. PNG filesizes typically come out at around 20% smaller than the equivalent GIF image. The GIF format has patent restrictions with it’s use that the PNG doesnt, however the advantage that GIFs have over PNGs is the animation support. Problems with supporting just one image format for both static and animated capability, has lead to two seperate formats; PNG for static, and MNG for the animated version. Browser support for MNG is practically non existent, so it is not used for the web.

The TIFF Format:
The TIFF format was the cross-platform image format of choice until PNG was introduced. TIFF’s are hardly ever used in web development, as there are around 40 different types of TIFF image, and the compatability ratio for applications to read them is ridiculously low. The most popular TIFF is the 24-bit LZW compressed version, which until PNG, was the only standard lossless compressed format (the standard 24 Bit PNG functionally is very similar to a LZW compressed TIFF). The TIFF format is able to store multiple images in a single file such as are commonly used for FAX images, whereas PNG’s do not have this capability.

The JPEG Format:
Unlike PNG, JPEG employs a degrading compression routine (lossy compression). Loss of integrity in the compression happens each time the file is saved, which means that the filesize is almost always smaller then a PNG, especially for photographic images. Each time a JPEG is re-saved, further compression artifacts are introduced, and loss of integrity occurs. Since PNG uses lossless compression, it is a better format for editing images before saving a final version as a JPEG. JPEG is the most common image format used on the web, and photographic images should always be saved as JPEG as opposed to PNG for viewing on the web, as the filesize is considerably smaller.

The Alpha Channel:
One of the best features that a PNG has to offer is the alpha channel, which employs one byte of extra data per pixel (or palette entry for 8-bit images) that represents the transparency level of a pixel. A PNG image using alpha is capable of 256 levels of transparency. This means that text and images can be antialiased so that sharp curves look good against any background. This means that a true drop shadow can be applied which fades perfectly into the background without loss of integrity. There are many possibilities with alpha transparency, which I will discuss in another post.

Gamma:
Another useful feature employed by the PNG format, is the ability to adjust gamma based on monitor settings. Typically, the same image viewed on a Macintosh will appear lighter than when viewed on a Windows PC. By storing gamma information in an image, the ability to view the original as intended is possible providing that the application reading the PNG takes note of the gamma.

Interlacing:
PNG interlacing starts by reading a small percentage of all the data from a file and filling in the empty spaces with an interpolated color value. For every time step, more information is rendered, replacing the temporary interpolated colors with the actual colors until all of the data is loaded and rendered. The GIF format can also be interlaced, but the quality is not as good, or as fast as a PNG, because GIF interlacing is only one-dimensional.

Electronics Design

Ferg — Sat, 01 Aug 2009 14:27:28 +0000

Rocolec are European sub-assemblies electronics engineers who needed a re-design around their existing brand and colours. They wanted a real simple, minimalistic feel, and wanted the logo big, so we gave them ‘big’. The 3D CAD modelled graphics were created (and photoshop’d) in house.

Website: www.rocolec.com

Quality Cars SEO results

Ferg — Sat, 01 Aug 2009 13:53:58 +0000

P&V Quality Cars wanted a content managed website to showcase their cars online. This is an entirely bespoke system, which incorporates a cross referenced search system, and SEO friendly product implementation. Despite having no SEO contract, the website is performing well in the search engines under the desired keywords, which is a testament to the build.

Website: www.qualitycarsales.org.uk

George Barnsdale SEO

Ferg — Sat, 01 Aug 2009 13:48:40 +0000

This website was designed and developed to give customers in-depth product information. SEO work produced a high increase in traffic with page 1 rankings in google.co.uk for really generic keywords such as: wood windows & stormproof windows.

Website: www.georgebarnsdale.co.uk

Dreamy Design

Ferg — Sat, 01 Aug 2009 13:31:43 +0000

We were approached by Musician Ross Langham to build a really unusual and creative website to tight specs. His website incorporates a flash intro, content managed gig list, newspage, MP3 uploader, and a bespoke XML loading flash player. The site also has a secure payment system for selling his music online.

Website: www.mydreampagoda.com