1. When you miss what looks like a perfect wave there is often a better one right behind it.

When you miss out on winning what looked like the perfect job, you’ll be surprised how often something else will present itself, something that actually suits you better. So keep your chin up and your eyes open.

2. Even if you paddle hard and take off perfectly you can still wipe out because you chose the wrong wave.

It looked like the opportunity of a lifetime, but sooner or later you realise you’ve taken on a job that ends up costing you time, money and all creative integrity, or – even worse – the client leaves you high and dry after hours of work.

3. You have to go out in conditions that are a little above your ability, otherwise you’ll never improve.

Don’t be afraid to step up to the next level and take on a job that pushes you to the next level. If you don’t, you’ll never grow your business.

4. When you get caught inside you have to be able to go with the flow.

If something goes wrong and a big job falls through, make sure you’ve got something backing you up to help you get through difficult financial times.

5. It’s always more fun when you have a friend along to share the ride.

Starting a business is like anything in life: better when you have a good companion to help, encourage and inspire you.

6. You learn quicker by practicing with people better than you.

Seek out the best people to work with you, either full time or on a contract basis. It’s always worth spending more money to get someone with talent, knowledge and dedication, because they will help you to build something of value.

7. Confidence and dedication are key to overcoming your fears.

Never stop learning or pushing yourself, it will give you the confidence and ability to take on any opportunity.

8. You should always use a leg rope.

Plan ahead to ensure your projects can’t spiral out of control and damage anyone else’s business.

9. You have to look both ways before you take off.

Make sure you know what you’re taking on with any new project. Remember the old adage: if something looks to good to be true, it probably is.

10. It’s worth the difficult paddle out when you’re sat out the back in calm waters with the sun on your face.

No matter how many times you’re pushed back or think you won’t make it, you have to remember the reward at the end, and that you are on the right path – the one you’ve chosen.

Safari and Chrome have a bit of trouble with text-shadow..

So there I was, merrily developing a new site for a client.

The three product panels were fine, but I wanted to add a little animation to reveal further information, so I turned to my favourite javascript library, jQuery.

Using jQuery to move things around, fade them in and out and generally spice things up is pretty common these days, so I was surprised when I ran into a few performance issues testing the site in Webkit-based browsers Safari and Chrome that I hadn’t heard about. Both were having a big problems with all the motion and fading, with some serious and unacceptable lag. Firefox and IE didn’t share these problems, so I wracked my brains trying to work out what might be the cause.

Usually Webkit-based browsers hold up as well, if not better than the other big-names. I checked if it was a problem with transparent .png elements or overlaid background graphics – nothing. I tried changing my jQuery code to use other methods instead of .fadeTo and .animate, but that didn’t fix it either.

Throughout the site I’m using the CSS3 text-shadow property to give the copy a nice finish against the background, making it stand off in a more interesting way.

text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.8);

This is something that IE doesn’t even support, and which is rendered differently depending on the browser platform – I realised that the way Webkit and Gecko (which Firefox is built on) render this is probably quite different, and tried removing the property from my panel <li>.

Voila.

This seems to be a pretty major issue for what is likely to be a much-used property over the coming years. Testing further, it seems that Safari (Windows) has particular trouble with this, even slowing on pages that contain no animation, effects or otherwise – it’s simply a bit slow at rendering text-shadow..

For now it seem I’ll have to set this property just for Firefox, which is not really ideal. But we live and learn, and that’s yet another thing to keep in mind when designing for the web.

UPDATE: I also note that Chrome makes a meal of kerning when text-shadow is applied. This can be resolved by using a 0px blur.

Hench ♥ Wordpress.

At Hench we’re massive fans of Wordpress. In fact, the majority of our client sites are built on the Wordpress platform. Why? Well for one thing Wordpress is free, so the saving is passed directly on to our client.

But we don’t use it just because it’s free.

Wordpress is a brilliant CMS backbone for any small-medium sized website in it’s own right. It has an intuitive user interface, it’s easy to implement, and you can pretty much build anything imaginable thanks to the extensible nature of the platform. On that note, let us introduce you to a few of our favourite Wordpress customisations and plugins.

More Fields

› http://labs.dagensskiva.com/plugins/more-fields/

This is probably the most important plugin on this list when it comes to building client sites.

More Fields allows you to add extra boxes of user-editable content to the Wordpress “Post” and “Page” interface.

Realisitcally, it does nothing more than to style the manner in which Custom Fields are shown in the Wordpress interface, but in doing so it allows you to create much more complex websites without confusing you client with the mumbo-jumbo that is the standard Custom Field dialogue.

This is further improved by the ability to include things like checkboxes, select lists and WYSIWYG panels, making More Fields greater than the sum of its parts.

This functionality is something which I feel should be added to the Wordpress core – when adding a Custom Field you should be able to define the Label for that field, and where it appears in the interface. Add it to your wish-list, too, and let’s see if we can get it into WP 3.0.

FLIR for Wordpress

› http://www.23systems.net/plugins/facelift-image-replacement-flir/

FLIR is a server-side image-replacement technology that allows you to render text in any typeface of your choosing. It uses the PHP GD library to replace any element you define with a custom font, much the same as Cufon and SiFR, but directly through the Wordpress interface.

It is not without its flaws, and should only be used sparingly for things like dynamic page headings, but it is a powerful solution to the problem of custom fonts on the web.

The most important thing to note when working with FLIR is that the appearance of your text will depend on the GD version running on your server, so be sure to test thoroughly on your live server rather than your dev server, as the results can differ quite widely.

One thing that you may need to do is to edit your chosen typeface in order to adjust the spacing around each character, as FLIR has a habit of cutting off parts of letters if the following letter overlaps. This can be a bit tricky at times – other times it all works right out of the box. It really depends on the typeface.

Wordpress Lite

› http://mahalkita.nanogeex.com/wplite/

Wordpress Lite is a great little app that allows you to tidy up the Wordpress backend by removing sidebar links such as “Appearance”, “Settings” etc. This is great if you’re building a site for a client and you don’t want to overwhelm them.

There are currently a few problems with the latest version of WP Lite and WP 2.9, so we’ll have to wait and see if there is an updated version to fix this – a shame, because it really is a useful tool.

Platinum SEO

› http://techblissonline.com/platinum-seo-pack/

It used to be that the All-in-One SEO Pack ruled the roost, but recently Platinum SEO has stolen it’s thunder a little.

This is a straightforward plugin that dynamically generates Meta tags, generally using the_excerpt as a basis for descriptions and categories for keywords, but which can be customised for every single post and page.

It also allows you to set noarchive and nofollow tags where required, which can be useful in certain circumstances.

On top of this, it will automatically generate 301 redirects when you’ve changed a post permalink, saving you problems with dead links and search engine placement.

Custom WP the_excerpt Hack

› http://pastebin.com/8TGtyzWM

This hack allows you to customise the appearance of the_excerpt in your theme. I’ll break down the important points.

The following changes the way in which Wordpress strips tags from the_excerpt, preventing it from removing the listed tags. You can add to this in order to include things like links by including <a>. The benefit here is that your excerpt can retain paragraph breaks and other formating:

$text = strip_tags($text, ‘<p>,<strong>,<br />’);

This line controls the number of words you’d like to appear in your excerpt:

$excerpt_length = 35;

A second function customises the appearance of the “Read More” link, which is usually nothing more than an ellipses (&hellip;):

return ‘&hellip; <p><a href=”‘. get_permalink($post->ID) . ‘”>’ . ‘Read more&hellip;’ . ‘</a></p>’;

This can be really handy for magazine-style themes, or anywhere where you want to control the amount of space used listing blog posts.

Check if a User is logged in

› http://pastebin.com/Umk8qE34

One of the most basic loops, but very useful in many situations.

This allows you to check if the current visitor is logged in and, if they are, to display something specific, such as tools they can use or certain information.

It allows you to use the Wordpress user levels to define exactly what is seen by different user groups, with 10 being the highest level (Administrators) and 0 the lowest (everyone). See the Codex for more information on User Levels: http://codex.wordpress.org/Roles_and_Capabilities

Customised Hello Dolly

We also like to run a customised version of the infamous “Hello Dolly” plugin that is provided with Wordpress, filled with inspirational and ridiculous quotes such as “You walk middle, sooner or later SQUISH! Just-a-like-a-grape”, and “Fight to the end ’cause your life could depend on the strength that you have inside you.”. They’re not all from The Karate Kid. Honestly.

Final Thoughts

This has been just a brief run-through of some of the most useful plugins and hacks we use regularly for Wordpress, but there are many, many more – and that’s what makes Wordpress such a fantastic platform – the community and the ever-expanding capabilities of the software. I hope you’ve found something useful here, and let us know of any tools you think are essential to theme development.

Enter the folding plug, an innovation created for the very purpose of making every single user of the standard UK plug hide with embarrassment and shame, in the knowledge that they didn’t think of it before.

The fact is it’s a fantastic idea. Anything that is space saving and well thought out but yet has the same functionality as the existing technology it replaces gets my vote.

The common british plug that we all know and love was designed back in the 1940’s. It is a great design too, in the respect that if you still have something electric from the 1940’s, it probably won’t work any longer, but the plug will be just fine. More than 60 years on since the original design was launched to the public, a 29 year old design student who has lived in the UK for a mere eight years has finally redesigned the enormous original plug.

Hailing from South Korea, Min-kyu Choi discovered the pain hundreds of other UK plug users have come across in their lifetime, a scratched laptop as a result of the power plug acting like a bed of nails against the laptop. It then dawned on him that the UK plug is an ungainly tool with three great big daggers sticking out in a fixed position, so he set about the task of slimming it down.

In an age filled with slimline laptops such as the Macbook Air or the entire range of various netbooks, it makes complete sense to minimize the space taken up by the power plug. You only need look at the tiny size of modern laptop’s power supply transformers to see that size matters, so the folding plug really does fit in with this general ethos and ensures that there are no changes of standard socket in your home – you keep the sockets just how they’ve always been.

Some more pictures for illustration:

Simple: Twist, Fold & Plug.

There has even been more development on the idea, allowing for a three way multiplug adapter about the same size as the 1940’s device, only with the ability to accept three of the new folded plug design, in their folded position – all with USB docks for charging modern electronic devices.

The most impressive thing about this innovation is that it meets all the necessary safety standards and is even fused and appears, at least from the photos, to be production ready. Happy days for UK plug users, hopefully a lot less laptops will be scratched and a lot of space will be saved in your laptop bag. Here’s hoping that it is accepted by all and fitted to the next electronic device you purchase!

You can read the official article on the designers website here: Folding Plug System

The Impact Soundworks website was running an out-of-date version of Wordpress, and really needed a visual and user experience overhaul. Hench set to work to create a site that remained true to their original brand whilst pushing product sales and information to the fore. The result is an accessible, versatile and feature-laden site, incorporating a seamless e-commerce system, in-page audio demos and clear pathways to important documents and information.

Andrews Aversa, co-founder of ISW, had this to say of the resulting website:

“When we needed a thorough makeover to our company website, we were worried that a designer wouldn’t be able to interpret our vision and meet our requirements, all within a budget. We spoke to many designers who simply didn’t get it and we almost gave up on ever getting the project done. Thankfully, Hench came to our rescue. Daniel provided a simple, concise analysis of our current site and worked with us to create a plan for the new one. After a brief correspondence, he completely nailed our vision on his very first mockup! Within weeks, we had a great-looking, highly-functional website that continues to look as good or better than our fiercest competition. Our new product, which we launched with the website, is on pace to outsell anything we’ve released thus far. I honestly can say this is the best web design experience we’ve ever had, and I can’t recommend Daniel and Hench highly enough.”

-Andrew Aversa, co-founder, Impact Soundworks

www.impactsoundworks.com

iPad: the web isn't designed for it

I’m an iPhone 3G owner, and, it has to be said, a happy one. It makes calls. I can send text messages, email (somewhat dodgy) photos, and catch up with people on Facebook, LinkedIn and Twitter.

I can also use it to browse websites, but I’m under no pretences that the experience is anything other than lacklustre in comparison with my 23” LCD screen and a mouse.

With the iPad, Steve Jobs is actually claiming that this scaled-up iPhone browser is like nothing else, the  “best way to browse the web”. And, sure, the extra square inches look to make a difference – text is actually readable without zooming, and you’re probably not going to be hitting the wrong link quite as often as you stab at the screen with your porky fingers. You still won’t get Flash, but I’ll leave that issue for others to talk out.

I’m happy to concede that for many people using the iPad will be a pleasure, and much more convenient than a laptop. So, I really don’t have too much problem with general use, reading the news or looking up a recipe whilst lounging on the sofa. It’s almost perfect for that.

Touching the Web

So, we come to my major issue with touch devices in general. Sure, the applications built specifically for them are a joy to use, extremely natural, and designed to take advantage of the tactile nature.

The problem is, the web isn’t. We’re all very used to receiving feedback from the web by moving the mouse. Links change colour. Images have hover effects, even animations. Everything is designed to let us know what we can and cannot do, and whilst it’s eminently arguable that any interface that leaves a user guessing is flawed, it’s nice to have this kind of interaction and creativity.

Using :hover is a stock-standard way of ensuring users aren’t confused as to what they can click. It’s reassuring. I know that if my Dad is browsing a real-estate website, he’ll understand that anything he points the mouse at that reacts can be clicked. It’s simple and communicative – a bit like my Dad, apart from the communicative part.

Taking this feature away will limit the average user’s confidence in what they are doing, making for more confusion in an industry where we, the people who drive it, are already light-years ahead in our understanding of the medium.

If anything, touch devices like the iPad and the iPod Touch actually stifle the web as it is, which is no good thing.

How do we solve this problem?

If touch-screen really is the future of browsing the web (and this seems to be almost certain), we’re going to have to set up a new paradigm for interaction.

Standard text links are mostly fine as they are – provided they are underlined. Underlining them does enough to tell most users they are looking at a link. This may be an aesthetic choice we as designers wish to avoid, but with touch, it’s absolutely necessary. Image links are more tricky. It might be appropriate to have a :touch state, which magnifies the image slightly, allowing it to be touched again to continue.

The toughest are things like block elements that, on hover, reveal information – such as drop-down menus, or the main cycling images on the Hench landing page, which reveal project information. These desperately need a :touch state of their own, one that reveals the information whilst again allowing the user to touch again to follow the link.

We also need to be able to escape this action and stay on the same page, perhaps by framing the selection with a darker transparent window, which we can touch to cancel.

In 2008 Apple filed a patent for touchscreen technology that would sense when a user’s hand is hovering over the interface, and whlst this isn’t here yet, it might help, if the technology is good enough. At the moment, any idea of hovering a finger is flawed – it’d be tiring, and the user is likely to accidentally touch the screen.

Conclusions

In all, we are looking at a difficult problem, made all the more pressing by the proliferation of jQuery and other javascript libraries, which promote this kind of interaction.

If touch becomes our primary means of web interaction, we are going to have to really change the way we build websites – each one in itself will need to be touch focused, and we’re going to need a set of tools standardising how multi-touch and gestures work. It’s going to be a huge transition, probably the greatest in the short history of our industry.

So, sorry Steve, but I really don’t think that the iPad will offer the best web experience at launch. We aren’t quite there yet. But I think, if we can nail down the interaction issues, we will be looking at a better web for everyone. It just isn’t going to be built the way it is today.