Over the last month I’ve been working a colour manipulation library for PHP called MrColor. Please forgive the American spelling, it is the language of the web after all.
The library is built around the idea of having an easy way to work with colour data. Once a new Color object is created you can populate it with colour values, edit those values, use those values to generate new data, and retrieve the colour in the format you require. You can download it or fork it from GitHub here:
Thanks to all those that attended the responsive web design webinar on Tuesday the 28th of August 2012. It was great to share our understanding and experience of responsive design, thanks for your questions and feedback. We’ll be incorporating some of them in an updated seminar.
Having an aesthetically pleasing website for your company is most definitely a satisfying feeling. However, a lot of websites suffer once you access the CMS (Content Management System) and realise that you need a degree in rocket science to use it. Frustrating in most cases, infuriating in others, your content management system is off putting and tiresome to use.
At Hutchhouse we believe the site administrator should have the ability to manage all of the content on all of the pages without the risk of breaking the site. This is a difficult balancing act between allowing clients the level of control they desire whilst delivering a site with a framework that can cope with most eventualities.
If you believe your site carries a lot of value at the front end and all you lack is the ability to manage the content via a good reliable backend CMS system – Hutchhouse can reverse engineer any website and provide you with a usable, intuitive system that will control the content on your site. We believe in giving clients the ability to make updates and additions as often as it’s required without compromising design or functionality.
With the emergence of mobile web in recent years, having a mobile site for your business or charity is becoming more important than ever. Here’s a couple of reasons why…
“There are currently 14 million mobile internet users in the UK. This figure is expected to rise to 17 million by 2012 and 19 million by 2013.”
“It’s estimated that by 2015 more people will be browsing the web via a mobile device than a desktop PC”
Source: Morgan Stanley
Having been limited to using the ‘web safe’ font set (Arial, Verdana, Courier, Georgia and Times New Roman) since the dawn of time, it’s been refreshing to see the emergence of several font rendering techniques over the past few years. Here’s a summary of the three most popular solutions.
Typekit is a very simple method to implement alternative type as it is provided via a web service. Typekit has a library of fonts which you can license by purchasing an annual subscription to the service (there is a free plan but this is restricted for use on one website with Typekit badge visible on the site). There’s a wide range of typefaces available and the Typekit website allows you to completely configure fonts, font weights and styles using an intuitive interface. However it’s not all plain sailing…
The fonts available on the Typekit Library rarely match with fonts you might have locally for use in Photoshop or Illustrator. Quite often you have to settle for a close match, and this is not good practice with regards to brand guidelines etc. Often takes a fair amount of explaining to the client which is never ideal.
Another issue is that although the fonts render smoothly in modern browsers on Mac OSX, rendering on Windows falls way short with most fonts options. The fonts end up rendering badly and anti-aliased. Although Typekit does provide a good comparison tool to view the fonts using the various operating systems and browsers, this doesn’t help when you’ve designed with a font that Typekit renders badly for the majority of your site users.
The major benefit of Typekit is the freedom to use the font sets available without worrying about licensing. The major drawbacks are the lack of availability of certain ‘standard’ fonts and the render failures in Windows which really let it down. If it wasn’t for these issues it would almost certainly be the perfect choice for most web designers and developers.
The beauty of Cufon is it’s limitations, or lack thereof, when it comes to which fonts it can render. The system works by rendering any specified text configured on the Cufon site. When the page loads the text is transformed using ‘Canvas’, a cross-browser element that looks and acts exactly as you specify in the website’s stylesheet. So far it sounds great doesn’t it.
Unfortunately – like most systems – there is a major drawback. It’s not a technical issue, it’s greyer than that and raises serious concerns over the legitimacy of using Cufon. Although Cufon can render any font using the Cufon configuration tool, site owners need to be assured that they have the right to use the font for this purpose (font embedding without Adobe Flash). Certain fonts require an extended license for this purpose, however it’s important to identify whether you can legitimately use the font or whether you would have to seek an additional license first.
@font-face is a system which actually permits the render of any font from your webserver. Simply add the font files and reference them using ‘@font-face’ syntax and the font will render as expected. There are issues with regard to cross browser compliance, however all the major browsers appear to be addressing this with Safari, Firefox and Chrome having already adopted this method natively. There are other issues around licensing, but these appear to have become less prevalent with the birth of freely available @font-face kits. Such kits can be found at Font Squirrel.
All the libraries mentioned here have their merits and all have their issues. There is, however, one clear winner. As the browser software companies adopt it, the @font-face method is likely to become the norm. That’s why we use it now and will continue until we find a reason not to.
It’s easy to forget some of the impressive, interactive ways in which to wow your users when you are designing a website. Designing in Photoshop or Fireworks (or whatever you design in) does not always give you the scope to easily illustrate how the site actually works, how it feels to use and how to introduce creative elements of interactive design. That’s why we always try to identify ways in which to display and present content and functionality outside of the ‘standard’ toolset of any website designer.
Here are 5 techniques which we love to use:
Background images and illustrations positioned behind your site are great if they are used properly. They provide depth, creativity and a visual richness that a pattern or colour will never achieve. But why not take them one step further. Using a technique known as Parallax you can make the background interact with user controls. Backgrounds can move on top of one another or seem to follow you down the page when the user scrolls or simply moves his/her mouse. It’s an excellent way to provide a subtle but sophisticated effect.
Web Font Rendering
Using a variety of different methods we can now use many more fonts (in a web safe way) than have been previously available, meaning that sites can be ‘on-brand’, more original and less ‘standard’ in appearance. There are very few web safe fonts (Arial, Verdana, Georgia, Times New Roman, Courier to name most of them) which has limited the typography used on websites considerably. Before web font rendering services like Typekit became available if you wanted web safe fonts then you used these. Now we can utilise thousands of fonts and get creative with Typography in a similar manner to that of print designers.
There are a multitude of new styles available with CSS3, however one of the best and useful is ‘text-shadow’. This allows you to specify a drop shadow on system text. Most browsers support it (notably Internet Explorer does not yet support it – even with IE8) and it provides the ability to add extra depth and creativity to site typography. No more flat fonts with boring contrast…
CSS Image Manipulation
Much of the time in order to make you website look fantastic we rely on well thought out and manipulated imagery. however by using techniques with transparent PNGs and new CSS3 values such as gradients we can now perform a lot of the visual ‘rules’ to imagery within the site templates. A typical example would be on a hero image (an attention seeking leaderboard type banner at the top of the page). You could spend your time in photoshop applying whatever effects you like to that image – but more than likely you won’t, so we apply the rules such as any gradients or floating, transparent text areas using images and CSS. It means less work for the content editor and more consistency from the designer’s perspective.
If you like what we are saying here and feel we could help with your web project then please do get in touch..
Giving our clients the ability to manage the content on their website is something we take very seriously and we always go above and beyond to allow them to control as much content as possible. This leads to very happy users, expansive dynamic sites and less involvement from ourselves once the client takes the reigns.
As they say… “With great power comes great responsibility” and when careful thought isn’t given to the creation of content on a site very bad things can happen.
Images seem to be one of the biggest stumbling blocks for clients, contributing to some pretty horrific results when it comes to size, ratio, placement, positioning and cropping. Each of these elements needs careful consideration.
The majority of CMS systems will give you positioning options such as ‘align left’ or ‘align right’, these options add classes to the image container that, when applied, will add styling. Here’s two examples, the first an image with ‘align left’ applied and the second, ‘none’.
This image has a stroke, separating the image from the content. There are margins to the right and bottom to give the image breathing space and the paragraph wraps nicely around the image.
This image has no alignment and therefore no styling. This results in a block element that spans the width of the container forcing the copy below the image with no breathing room.
Scaling of images can also be a problem. All too often we’ve seen images taken from Google that have small dimensions, they are then scaled up and the results can be horrendous. We recommend using stock image sites for professional full size images that can be scaled down without losing any quality. Stock Xchng is a free stock imagery site but has a limited catalogue, for a more complete solution we recommend iStock.
As a side note on this issue, the composition and quality of images is important too. You might have the most fantastic design and awesome CMS but neither will magically improve a poorly taken or badly composed image and make it look great on your site. Poor quality images simply cheapen the investment you’ve made in a new websites, its technology and its design. All for the sake of the price of a stock image.
Pasting-in copy from Word Processing software can be a real problem when creating content. Most commonly, when copy is pasted into a WYSIWYG editor via a Word Processor (Microsoft Word for example) the WYSIWYG will honor the styling that was attributed to it in the original Word Processing software. This is one that will really agitate the designers out there.
For example, if your sites stylesheet dictates that the primary body font should be Arial and you paste in copy from Word that is more than likely the native “Times New Roman” then the WYSIWYG in certain circumstances may honour that and add inline styles to override the CSS styles. Line-height, font-size and font-colour will all be honoured in the WYSIWYG if pasting directly from word processing software.
So how do we prevent this? There are a few methods that ensure that no legacy styles are carried into the WYSIWYG. Firstly, in WordPress for example, there is a small icon (shown below) that is specifically used for pasting in text from a Word document. This opens a modal window that allows you to paste in content from Word without bringing any pre-formatted styles with it. This method is certainly an option but is not always foolproof.
Use this button to paste from word stripping the text of any styling.
The best way to prevent this problem is to either write your content directly in to the WYSIWYG. Obviously this can only be achieved if you’re online so the best solution for when you’re offline is to ensure your Word Processor is in a “Plain Text” mode. This means that no formatting will be applied and you can paste the content into your WYSIWYG without a care in the world.
A well designed site will always have a well thought out stylesheet, that’s why we encourage our clients not to use some of the WYSIWYG styling functions such as font size and font colour, allowing the stylesheet to dictate the look and feel of the site.
Structured content for web please!
Often you’ll load a web page and… wallop!, you’re presented with a full page of paragraph text and no indication what it’s about other than a rather vague title…
Remember that your visitor’s time is precious so make finding the info they require easy. Their time is also fickle and it’s guaranteed that if it’s easier to find somewhere else then that’s where they’ll go. Your website isn’t a book in their hand, they don’t have time to invest in reading everything you have to say – so be helpful and provide content indicators by using sub headings. Try to divide the content into small chunks and make sure you provide simple headings for each section. A page with dozens of paragraphs of text with no sub headings is off-putting to say the least – a page neatly arranged with sub headings appropriately placed means the user can scan and read what’s relevant to the User.
Clients will often take every opportunity to link to other websites on the understanding this is what gives them a google search ranking. This is actually counter-intuitive to your goals (presuming your goals are keep your users on your site) and can have a detrimental effect on your returning visitors. We fully understand the SEO benefits of link building and we are also aware that there are often situations when linking to an external site is warranted. However, that said, it should be a tactical approach.
We always recommend wording links to external sites carefully and if the subject can be talked about on your site as a pre-amble to linking to an external site then this is the way to do it. A page on your site which summarises and puts into context the subject matter is of much more use to your visitors than simply sending them to another site.
This is not something we justify just to keep visitors on your website. Much of the time your visitors don’t expect to be taken to a new site in the first place – so let’s not confuse them.
When it comes to managing your site’s content, the worst results show themselves when the process is rushed and not thoroughly planned. Starting with good relevant content is a must, ensuring that the formatting is correct at all times by using the preview function in your CMS. By all means embellish the site with imagery, but think about the use of the image, how it sits with the content and whether it adds value. Above all remember that your site is for your visitors, so make it easy for them to navigate around, find what they want to read, and then they will actually read it.
Hutchhouse help launch a new charity website which facilitates good practice within fertility. The website also provides a mass of info on the processes and pitfalls.
Founded by Camille Strachan, To Hatch provides support to it’s members via a website (designed and developed here at Hutchhouse). Membership is free and users get access to an online community of advice and resources, including a full database of fertility clinics which can be compared with their local counterparts as well as being rated by members.
There are a few extra special benefits of becoming a To Hatch member – not only the great advice and information on offer, but also access to the To Hatch debate. On becoming a member, you get access to the TH_Community Twitter account which (combined with the live To hatch Twitter feed right on the To Hatch site) provides the ability to chat and debate about the current issues and provide support for other members.
A unique area of the site will also offer a lottery to its members with fantastic prizes that will have everybody excited and taking part.
The charity provides a fantastic service and we hope will be a huge help to everyone out there that needs support and advice on fertility treatments.
Our hats off to Camille on her dedication to the project and overwhelming positivity in the face of sleepless nights whilst pulling all the various parts of the charity together.
Visit the website: to-hatch.co.uk
Communicating with clients during a web project is the most important part of the production cycle. That’s why we use web applications to make our projects as accessible to our clients as we can.
The design and development phase of projects can be hard to communicate to clients using the traditional routes. Whilst emails, meetings and telephone conversations are important it’s also necessary to provide access to the project at every stage of it’s development. This is how we overcome that particular problem and how we keep our clients in touch with progress at every step.
Web design communication
We have taken this so seriously that we’ve developed our own web application to handle it. Allworkedup is a design project management tool which neatly displays flat web design iterations (as they would appear in the browser) as well as providing a forum for comment and feedback. Once our designers have finished a web design iteration they upload it and notify the project stakeholders who are then invited to comment on the design and open up the discussion with others.
It really works for us and bypasses the completely unworkable situation where feedback is via email and iterations are presented over email. The main thing is that whenever is convenient our clients can log in and leave their suggestions and feedback in one place.
Keeping our clients in touch with (web) developments
The web development phase of any project can leave clients feeling like nothing’s happening with periods of ‘quiet time’, but only if we’re not managing it properly. We choose to give the client access to the project progression at every stage of the process so as a task is ticked off – the client is alerted of it.
We use a fantastic web development management tool called Pivotal Tracker which logs all the tasks as User Stories and shows which ones are queued for immediate development, which ones have been started, finished and delivered and which ones are coming up later on. This way our clients are always in-touch with progress and have a real handle on where we are and when we might be finished.