Websites need to change because the Internet and how we view it has changed

Chances are your website was probably built and designed back when the only place anyone was going to look at it was on a desktop computer or laptop.

So how does your website shape up today when viewed on a mobile or on a tablet?

Your information probably does still display OK, but especially mobile users might be seeing a very small-scaled website that they perhaps have to double tap for areas to be readable, font sizes may be varying, and all in all the experience of viewing a ‘made for Desktop’ website is probably less than impressive and not very easy to navigate.

We’ve seen amazing advances in the last couple of years with how mobile phones can make it easy to view websites on the go, and when at home a lot of people are now using tablets to couch surf the Internet.

The number of people who regularly view the Internet on mobile devices in the UK is set in 2013 to exceed desktop users, so wouldn’t it make sense if a website layout could respond differently to users viewing on different devices?

Welcome to Responsive Web Design.

Can you show me an example?

Twentyfourten’s Creative Director Simon Knight has a Responsive website: simonknight.co.uk. Take a look at how a different layout is delivered across desktop, tablet and mobile.

How does Responsive Web Design work?

It’s still only one website. You are only maintaining one single website — but your audience are given a different layout based on how they are currently viewing your website. We know which layout to give the visitor because we can detect their screen size, and therefore give them the most suitable viewing experience.

What are the benefits?

Because Responsive Web Design is based on screen widths, then it not only suits the varied viewing methods of todays audience, but any new devices that come onto the market will always have a certain screen width and will always fall in to a layout that we have predetermined — it future-proofs our websites more than ever before.

Is this more difficult or more expensive than producing a regular Desktop website?

It’s certainly more time-consuming to build a Responsive Website, and a quote would reflect that in costs, but there is also more thought and planning that needs to go into your Responsive website.

Typical considerations;

• Does the information that my audience is looking for differ if they visit on Desktop or Mobile?
• Is all my website content relevant no matter what device it is viewed on?
• With charges for mobile data-plans should I consider the amount of images and media file size that the user has to download to view my site?

Can I make my old website Responsive?

You probably could, it depends how old the website is and how it has been built, but it could potentially take longer than building a new site from scratch in a lot of cases.

With Responsive Web Design we have to tell the visitors browser how wide it should render any element such as columns etc depending upon the screen width being used.

For ‘desktop’ layouts for example there might be a ‘two thirds’ wide main content area which sits next to a side column that is ‘one third’ wide, both columns then are told to be ‘one whole’ width on a mobile device and to sit one above the other.

With older websites those two adjacent columns may not be in the reading order we want them to be, the content of the two columns may not make linear sense, and it can be that existing content structure of an older website that can easily cause a problem when displayed in a mobile single column layout.

With a new Responsive Web Design website, considering content structure and how it fits together and flows is part of the increased planning time required.

Talk to us

If you’d like to discuss Responsive Web Design and how it can work for you and best serve your website visitors — just get in touch.

Put the squeeze on website images

We always try and explain to our clients the benefits of optimising images for the web, but It’s not unknown for our clients to happily upload images to their websites that can weigh up to 10MB in file size.

For anyone in any doubt 10MB is an ENORMOUS size for an image!
10MB is the equivalent to 2 or three songs downloaded as MP3s from iTunes.
10MB is just way too large for an image, It might be a fantastic image, that’s no excuse! It’s just not a good idea to upload an image that weighs so much.

But my site’s performance doesn’t seem to be suffering?

We used to be able to say that heavy file size was detrimental to a site’s performance, visitors drumming their fingers waiting for the images to load up wasn’t unknown — but if you are using a platform like WordPress for your website that isn’t the case anymore.

WordPress creates all the multiple versions of an image it might need (from your uploaded original image) to display on your website, and so the original image is never actually used within the page, which is great — especially if your original image weighs 10MB!

So what’s the real problem with uploading large image files?

Server-space — don’t expect it to last very long. You will burn through it in no time.
If your server has to accommodate massive images, hosting packages are going to max out very quickly.

Also, if you are uploading excessive sized images and backing up your site, you are backing up a bloated site — your backups become a problem to host and things can easily become a major headache and can get very costly in hosting.

Do the right thing, think lean and mean

If you’re guilty or uploading excessive image sizes, let your web development company know, ask them for advice on how to optimise for web.

If you need to crop or edit your images then you need to be using photo-editing software of some kind, this can range from open-source and free to use, to reasonably priced ‘lite’ versions of professional software such as Photoshop.

• Photoshop Elements
• Gimp
• Picasa

If you are only trying to reduce the weight of your images then you don’t need to look any further than this great free software;

• Shrink-O-Matic

Good luck with the file size reductions and keeping those web hosting expenses down to a minimum!

Daley Golf Holidays

Recently launched is a new website we have designed and built for Daley Golf Holidays.

It offers Golf Holidays around the world and has many great destinations to choose from. The visitor chooses a ‘Resort’ or a ‘Course’ by drilling down through ‘Countries’ and ‘Regions’, or by searching ‘Destinations’ or by looking through ‘Special Offers’.

Each ‘Resort’ or ‘Course’ has it’s own gallery, unique information and dedicated enquiry form — and of course, all site content is updated via WordPress.

For our more technical followers you’ll be interested to know that this website features Custom Post Types and Custom Taxonomies, quite a programming challenge!

Visit Daley Golf Holidays website.

You look smarter on a smartphone

We are probably all pretty familiar with using our mobile phones to access websites these days. It’s convenient and quick and we don’t have to be at our desks to get the information we want. We want that information right now, wherever we are — and why shouldn’t we?

The experience of reading websites on a mobile phone is of course different device to device, but on the whole it’s not perfect. Websites themselves don’t help, usually we are looking at the regular desktop version of a website — it probably seems really small and thumbs mistakenly click the wrong navigation tabs and we’re tapping and zooming and pinching to get the website to be legible.

Wouldn’t it be great if the website content and images could fit your mobile phone better?

Well now the Twentyfourten website does just that, and your website can too.

Delivering to the right device

If you view the Twentyfourten on an iPad/tablet and anything larger then you still get the full desktop version. The website is providing a better reading experience based on the mobile device it is being viewed on.

It’s still only one website

The website has a full desktop style and now a mobile look and feel, but the website is still just one site that gets updated — you need only maintain your website in the same way you always have.

A step towards responsive web design

Technically what we have created is a look and feel targeted at smartphones, this is a good fix before we build a Twentyfourten website which will be built using Responsive Web Design techniques, put simply our next version of the website will adapt it’s flexible layout to change at certain pre-defined widths.

If you are planning a new website it’s a good idea to discuss Responsive Web Design with us, sure there is more planning, design and build time involved, but in a world where devices come along all the time that will be viewing your website, having a flexible and adaptable layout will be what your audience comes to expect.

Constantly improving

We have taken a pragmatic approach to developing our mobile website for it’s initial launch, it’s a numbers game really ;

• How many of your websites visitors view your site on a mobile device/smartphone?
• Of that percentage, what is the split by device? (iPhone, Blackberry etc…)

Designing for every type of mobile/smartphone/browser can be very demanding time-wise, we have tested on the most popular initially, and will improve coverage in updates.

Size is everything …

Get in touch if you’d like to discuss a mobile child theme for your website or find out more about Responsive Web Design.

A Labour of love

Twentyfourten have been producing the Gerry Sutcliffe MP website since 2006, it has always been well received — a website we have always been congratulated on, and within it’s sector has set a standard that other Member of Parliament websites have been measured against. It’s had a couple of make-overs during that time; it had a widening for bigger browser resolutions, it added in a bit more functionality here and there, but the same carefully constructed, hand built, bespoke CMS has run the website for the last six years.

This year, Gerry and his team recognised the need to look at their News output and to think carefully about what they do with News. How best could they raise its importance and prominence on the website? How could feedback on News be incorporated easily?

Along with being able to Comment on articles and give their Feedback, a method also needed putting in to place for visitors to be able to distribute Gerry’s News through their own Social Media Networks. Gerry’s own Social Network postings needed bringing in to the website too, with the purpose of the site now becoming more about providing a central hub for all of Gerry’s communication channels.

Gerry’s existing website couldn’t meet the new requirements without quite a lot of work. We had to assess how wise it would be building on top of old technology, and whether there wasn’t a more future-proof and cheaper option that would be better than upgrading the existing website.

It made much more sense to rebuild using WordPress as the framework for the website.

WordPress for Members of Parliament

WordPress allows for articles to have Comments and a moderation system is built in. 3rd Party plugins can provide the Social Network integration and Events plugins can continue to allow Surgery Dates to be presented to the public. Also, using WordPress means all of Gerry’s web pages can be updated.

Building a new version of the Gerry Sutcliffe MP website on top of the WordPress framework has given Gerry and his team the ability to communicate better than ever before with the constituents of Bradford South.

www.gerrysutcliffe.org.uk

Need to form a Creative Coalition?

Twentyfourten can design, customize and build a WordPress website for you too.
If you are a Member of Parliament or an MP Case Worker looking for a low-cost great looking website just get in touch!

Artists will always need somewhere to show off their work. Real world galleries are great, and are of course the perfect setting, but get your gallery online and your work can be seen around the world 24 hours a day by an audience you never imagined.

Leeds artist Simon Dobbs asked Twentyfourten to come up with a single page website gallery that he could easily update for himself. The website should be simple and clean and the paintings should be the focus to the viewer with the website sympathetic to the importance of the artwork.

Take a look at: sidobbs.com

Artist’s Gallery Deal!

If you would like a Gallery site like sidobbs.com take a look at our great offer below;

If you don’t already have a domain name and suitable web hosting (Linux) we can set that up for you (at an extra cost).

Add-ons

You might want to expand upon the one page gallery model and have further functionality and more pages etc, certainly once setup on the WordPress CMS platform expansion isn’t difficult to achieve. Here’s a few possibilities for what’s possible beyond the ‘Basic One Page Gallery’ ;

• Add a Navigation Menu and more pages
• Create individual artwork pages
• Add Social Network integration
• Add Exhibit Calendar
• Sell Artwork via PayPal

If you’d like to talk to us about a Gallery website whether you are an Artist or Designer or Photographer just get in touch.

Easily updated, easily expanded

Compass Executive Travel asked Twentyfourten to create for them a simple website that covered their core services of Corporate Travel and Airport Transfers in the West Yorkshire area. Compass also wanted to have a website that could expand and allow them to add further pages over time. At the heart of their online presence Compass needed a ‘Get a Quote’ form for customers to make contact.

Our solution was to set up a customised WordPress CMS featuring bespoke branding, design and layout. WordPress plugins could of course offer some functionality solutions but they too would need styling and integrating to feel they truly belonged to the website.

Get a Quote form

Compass needed a form that could handle booking inquiries covering any pickup or destination address and also list UK airports too. Dates are selectable from popup calendars.

Events

We suggested to Compass that a new way for them to attract business could come from having an Events Listings / Calendar feature which when combined with another short form could allow the visitor to fill in a quick “I’m interested in transport to this event” submission, with the form pre-filled with the Event title. Compass were thrilled with this idea, as it provides potential for new traffic coming to their website.

Visit the Compass Executive Travel website.

If you are interested in replicating any aspect of the Compass Executive Travel website or any part of it has given you an idea you’d like to include in your own website, just get in touch.

Encouraging people to get fit and join in with outdoor projects

A collaboration project between Walk England, Mind and The Conservation Volunteers. Twentyfourten were asked to deliver an initially small website with project Towns that could expand over time and be easily updated.

WordPress was the natural choice for CMS/platform coupled with the Thesis theme to allow design flexibility and SEO control.

Website Administrators can add ‘Contacts’, ‘Events’ and ‘Maps’ to Town projects and keep people updated.

Read more about Green Exercise in our Portfolio, or visit the Green Exercise website.

WordPress customisation

The Green Exercise Project is built on a WordPress CMS and uses the Thesis theme to allow customisation and superb SEO control. Custom layouts have been created by Twentyfourten to take the website design beyond default WordPress and Thesis styling and into a completely unique ‘look and feel’.

Marrying a free Open-Source CMS like WordPress to update their website content with the ‘one of a kind’ website designs and layouts that Twentyfourten produce has proved to be a winning combination for The Green Exercise Project.

Custom Fields

The project required Custom Fields creating that WordPress doesn’t offer by default. Custom Fields were set up by Twentyfourten to allow repeating rows of data such as Links and Contacts to be easily added, edited or deleted on a single entry basis. For example, the administrator just adds a ‘New Contact’ and fills in the necessary fields for that new entry; Name, Description, Telephone, E-Mail and image.

Creating Custom Fields like this means there is no messing around for the administrator otherwise having to edit long manual Contact lists within the WordPress WYSIWYG visual editor or HTML editor — it’s a clean, slick way of adding content that saves you time and avoids frustration.

A Closer look

Please take a look at the Green Exercise Project website : www.greenexercise.org.uk

Strategies to reach the top

No-one wants to write content or upload product information for a website that doesn’t get well ranked in Search Engine Results Pages (SERPs), we’ll show you how we reach the top of Google and how we can do it for you.

Example: Here are some tips to show how to rank at the top of Google for the search term “Help with SEO”
(google.co.uk — ‘pages from the UK’)

Keyword Competition

SEO is the bridge between your website content and the potential visitor. You should never write an article, create a page or launch a product and just hope for the best.

You need to choose carefully the keywords that you think a visitor will be using to search for content that matches the type of content you have created.

Don’t just presume that the obvious keywords are the best choice for getting visitors to your site, if the keywords you are thinking of using are too obvious you will find that there is massive competition for those keywords from other websites with similar content.

Use Google AdWords to evaluate how many monthly searches are made for certain words. Also, Google AdWords will tell you the strength of competition for those keywords.

SEO Services — 74,000 monthly UK searches, competition HIGH
Help with SEO — 3,000 monthly UK searches, competition MEDIUM

So faced with high competition for SEO services are we right to decide that they are the keywords we want to target? Are those keywords the best option for the most traffic making it’s way to our site? The lure of so many potential visitors coming our way is definitely appealing.

However, is it realistic with only ten results available per page in Google search results that we are going to beat off all existing, well established competition and rank on the first page of Google for SEO Services? The link to our site being a result on page 2, 12 or 22 won’t see us get much of a share of those 74,000 searches, how many potential visitors will click on our link if we aren’t at the top of Google and on page one? Probably none.

3,000 searches compared to 74,000 is a lot less potential visitors for Help with SEO, but AdWords told us the competition was only medium for the search term. 3,000 seems a better target than the zero visitors we could very easily end up with by using SEO Services.

So we title our web page with our chosen keywords, we use our keywords in our headings, our content is using our keywords but doesn’t feel keyword stuffed and remains natural — and what do you know? We’re now at the top of Google in the UK for Help with SEO.

Hey, I’m an SEO Expert!

Don’t get too excited yet, we’ve shown you how to get to page one, but on page one of Google you still have nine other results vying for the visitors ‘Click Through’.

What if they NEVER pick our link to click on? That could quite easily be the case, so let’s put down our rabbits foot and lucky charms, stop saying “please pick me, please pick me, please pick me…” and let’s do something about it.

Converting Click Through

In a Google search engine result, below the title and URL is a ‘snippit’ or a brief description. Google can take a section directly from your webpage and use it as a ‘snippit’ but that’s not always ideal, not the perfect ‘teaser’ that we need to entice the potential visitor to click our link and not one of the others in the search results page.

The best option is to supply Google with a ‘meta description’ to use as it’s ‘snippit’ text for your result entry, this description text does not show directly within your page and is instead a coded message that Google looks for and uses if it is present.

A well written ‘meta description’ which doesn’t get too spammy, yet entices is exactly what you are looking for in trying to make sure the potential visitor converts into a site visitor.

That’s great — but I need some help implementing this

No problem, we’ve not covered everything there is to know about SEO in a single article, just offered some keyword advice — get in touch with us about managing your SEO and discussing what you’d like to try and achieve.

It’s also fair to say, that control of your websites; titles, tags and meta description down to individual page level might be outside of your present websites technical abilities.

You might be using a bespoke CMS that is getting pretty old now and wasn’t created with the level of SEO control described within this article, and it might be worth looking at options that can empower you with better SEO control for yourself.

We’d recommend WordPress as a CMS, and the brilliant Thesis Theme as it’s perfect partner with it’s built in SEO control.

Our WordPress customisation services offer affordable web design at very competitive entry prices. Find out more in our How much does a website cost article.