helipad.me blog

One of the hardest decisions when designing a website is choosing a layout, when all you have is a blank screen in front of you. Nowadays there are lots of good grid patterns for laying out websites, but they mostly focus on making sure everything is aligned vertically.

I wanted to find out how successful business websites were made up & structured, so I went over to ThemeForest, and sorted the results by those templates with the most sales.

Using the printable A4 design sheet from 960.gs, I was able to quickly sketch out the design structure of the best-selling templates on the web. What were previously a mix of gradients, colors, expensive looking photos and fancy plugins, were now a collection of surprisingly similar blocks.

It quickly became clear that there was a very normal pattern to almost all the designs.

• A logo or business name in the top left
• Navigation in the top right
• A “hero” section underneath, usually with a large photo
• An introductory paragraph
• 3 sections of content
• A footer, containing links & contact information

Within each template there were a few positional differences, but the basic flow is almost always the same.

Does this mean that there is a lack of originality in designs, or that simply by iteration and imitation we’ve stumbled across a standard way of designing websites for businesses?

Either way, businesses would do well to keep to recognised layouts such as these, which are easily accessible and understandable for visitors.

Search for news on Google, and you might notice this peculiar Google Ad. The strange headline and capitalisation is enough to make you wonder if it does come from Telegraph.co.uk or Sky.com (below) at all.

Click the link, and you see it goes to a site that looks like a fake news channel but is actually just a landing page to sell a beauty cream.

The first problem is that the green text underneath the title is supposed to show you the domain you will reach - in this case sky.com. In fact it goes to beautyhealthsmarts.com.

But hover over the Instant Preview provided by Google, and you see the real Telegraph.co.uk or Sky.com homepages. In Google’s own words for Instant Preview, “perhaps you’re looking for an official website—look for a logo and formal style and you’ll probably be able to identify it”. Indeed, the Instant Preview does show today’s Sky.com homepage with the day’s top stories.

Or put another way - advertisers can use the confidence generated by showing an Instant Preview to make you click a link to a page.

This doesn’t just work for Sky.com. The same advertiser is also using Telegraph.co.uk with the same loophole.

Spammer: http://beautyhealthsmarts.com/

Search for a restaurant on Google and you’ll soon be seeing result from their latest local business solution, Business Photos. Google’s commitment to local businesses is admirable, but they still haven’t yet figured out how to deal with the #1 problem: businesses without premises.

Imagine La Piazza restaurant. It can make use of Google Places to create a local business listing with address and opening hours, provide offers and allow people to submit reviews. La Piazza will appear on a Google Map where for their address. These results will appear right at the top of searches, so you have a good chance of being found. Google Places will even send you a QR code, which passers by can use to check reviews of your restaurant on the move. The problem with finding local businesses isn’t those with premises, it’s those without.

There are countless businesses that are run from the owner’s home, van or at an office that isn’t set up for visitors. What use are local listings on a map? Do photos help? If a business owner submits a listing to Google Places, will they be excluding themselves from potential business outside of Google’s perceived radius?

Accountants, builders, plumbers, mobile hairdressers, graphic designers, removal businesses, dog walkers and consultants still don’t have a great solution for helping their business get found online. As more and more business take up remote work, the likes of Google will need to find a way to add visibility to non-premises businesses.

When I first set my eyes on GBBO.co.uk, the initiative set up by Google and BT to get local businesses online for free, my heart sank a little. Here were two huge companies offering free websites and domains to any UK business.

Sadly for UK business, and good for the rest of us, the initiative falls way short of what it could have been.

The problem with GBBO is that it doesn’t properly solve any of the problems it correctly identifies. Its 5 main selling points:

• A free .co.uk address
• A free customisable website
• Free unlimited website updates
• Easy to set up business email
• Built-in online payments

I did my own research, with a sample size of 275 GBBO websites. The findings?

A free .co.uk address

Granted, useful. But they cost less than £5/year these days.

A free customisable website

A limited number of years old templates. The designs are outdated, typography non-existant and navigation pointless. As mentioned by others, these were intended as intranets, not business websites.

I found only 50% of websites used their own images, 11% used stock photos presumably taken from Google Images, and 14% used clip art. Of 275 sites, not one appeared to have used a professional photographer (or SLR camera).

Free unlimited website updates

Just 6% of GBBO websites showed any kind of updated activity. This included news, upcoming events or a feed of some kind. In other words, site owners aren’t especially bothered about updating their site.

Easy to set up business email

The biggest issue. Only 16% of GBBO websites used an email address which matched the website’s domain. The rest were GMail, Hotmail, Yahoo, BT internet and so on. Some were even domains of other websites e.g. davetheplumber.com - asking non-techies to update MX records is utterly pointless.

Built-in online payments

Being very generous, I counted 8% of GBBO sites using eCommerce. Sadly, most of these were links to pay an invoice or purchase a gift voucher for a friend. Very, very few sold actual products.

Anything else?

Google Sites includes an option to include a map showing your location. Many of these were just home or postal addresses. Whilst 53% of sites included a map, only 18% had any kind of premises.

Final thoughts

Whilst the thought of getting local businesses to set up a website is laudable and should be encouraged, the sites themselves fall short, the processes are too complicated and the initiative doesn’t even solve the problems it correctly identifies.

Typekit should be the first port of call for local businesses looking to spruce up their websites.

Recently I wrote an article asking “When is a picture not worth a thousands words?” for local businesses, the answer is surprisingly often. Low quality, amateur photos (not that kind), stock images, clip art, shoddy cropping and squashing are a turn-off to potential visitors.

Using Typekit or similar service to display sexy fonts lets local businesses look credible, very simply and with little outlay.

Which fonts to choose?

It’s tempting to pick any font that looks great. If you’re on a Mac, for example, the fonts look superb. But try it on an old PC with Internet Explorer, and the edges appear grainy and disappointing. There’s not much point being all font elitist about it, so what to do?

Helpfully, Typekit has tagged the most appropriate fonts either “headline” or “paragraph”. These fonts work best across most browsers. Choose one headline font for your headlines, and, well, one paragraph font for your content. I did say it was simple.

For our latest design, Flump, we chose Bello Pro and Rooney Web. For seemingly “fancy” fonts, they stand up to testing.

Weights and styles

Fonts like Rooney Web make typography enthusiasts giddy at the knees. Choose different weights and styles and you end up with completely different effects. Again, Typekit handily lets you know which weights to use, and how to avoid breaking the Internet when you use Internet Explorer.

How easy is it?

If you’re vaguely familiar with CSS, it’s super easy. Even if you’re not, ask a tech savvy friend to do it for you and they could add a nifty font to your website in minutes.

What’s not to love?

For the technical bods, Typekit uses Javascript and @font-face. For the rest of us, this has the potential to mess around with other bits of code flying around a website. In our case, Typekit threw something of a hissy fit when asked to play nicely with the Facebook ‘Like’ button code.

We sat the offending Facebook code down, gave it a stern telling off, and let it know that if it played up again we’d make them go play with Google. Problem solved.

Also, be careful of pretty fonts. And girls. But mostly fonts. It’s easy use Typekit’s font preview for different browsers and think the world is such a lovely place. It’s not always the case. Test your fonts for real and you’ll be all the better for it.

Looks good? Try it for free

Typekit lets you choose from a selection of free fonts, whilst Internet overlords Google have their own free fonts system. It’s broadly similar and features many of the same fonts.