ARISE writes adverts and point them at pages on their website, on which they have products — books and training courses — to sell. But visitors aren’t sent to a normal website page: they’re directed to a “landing page”, a page with text and images related to the specific advert.

I designed and coded a landing page template for ARISE, which they can use to create their own pages. I’d like to show you how this design evolved in three stages.

Version 1 : The original landing page

This is what the landing page looked like before I started work on the design. At this point I’d only given them a little advice and coding help.

What was wrong with this design?

• The typography was unattractive.
• Video was embedded using Flash, didn’t always work.
• The sign up button looked like a big red warning button, giving the wrong impression!
• Some text was underlined but not actually clickable.
• Phone details weren’t prominent enough – and that’s a problem on a sales page.
• Prices were hidden below the fold.
• The html and css code did not validate.

What was right with it?

• The two column layout would be simple to work with, and flexible enough for a template
• There was only one link – the button to go to a purchasing page. Visitors could go forward or back, but not leave for other pages.
• Video is a great idea when you’re selling training packages, and it doesn’t take up much room.
• A quote from a satisfied customer can be persuasive. Especially when it’s a testimonial from Arnold Schwarzeneggar!

Version 2 : My first draft of the landing page

Keeping the two column layout, how could I improve the presentation?

What’s been improved?

• The header is less cluttered, and the title for the landing page has been incorporated into it to save space.
• Typography uses Google Web Fonts, with attention paid to font sizes and line heights.
• The video is now embedded via YouTube and works reliably.
• The sign-up button is a friendly green, with wording specific to the product being advertised. It’s an obvious call to action.
• Prices have been moved nearer to the sign-up button, to be more up-front about what’s on offer.
• Red is used to emphasise a few important facts: the product’s name, prices and phone number.
• The contact phone number is now a prominent feature of the design, with a phone icon beside it. Some people like to talk it over before they make a purchase.
• The HTML code validates 100%, the CSS is carefully thought out and PHP includes are used to avoid repetition of code.

Version 3 : My second and final draft of the landing page

Since books are going to be the most common product sold on the website, how should the design be adjusted?

I made these changes:

• The book’s thumbnail image is neatly aligned to the left of its title and short description.
• There’s some fancy CSS used on the book cover image, to rotate it 1 degree and put a drop shadow on it to give it more depth. It now looks more like a book than just a scanned image.
• The green call to action button now includes the price – making it even clearer that this is how you make a purchase.
• The layout will allow for multiple books to be put one above the other in the left column; and for multiple quotes in the right column.

There are some nice touches to the design. For example the blue and pink colour scheme that both mirrors their logos and makes it clear this is an issue that affects men and women. I like the way that text has a white space margin to its sides, but photos don’t.

The main feature of the website is its blog, which keeps marathon runners and supporters informed. There’s also a Twitter widget in the right column, which they keep very up-todate.

When the website first went live it also had application forms for the marathon. I built these using the Gravity Forms WordPress plugin because it enables complex, flexible online forms to be created with a minimum of fuss.

The TeamPB website can be seen at www.teampb.org.uk

Complex online forms

The website’s most important feature is perhaps its membership forms. The Association is on a drive to expand its membership and has three separate forms.  They’re all quite long, so we split the forms into sections, filled in over several pages. When the forms are submitted they send an email notification to the Association; they also send the data to a client relationship database called Salesforce.  A WordPress plugin called Gravity Forms enabled us to build such complex forms.

Displaying staff and trustees’ details

SIAA wanted their staff and trustees’ names and short biographies beside a photo, which was easy for them to do in WordPress by simply left-aligning the thumbnail images and putting a horizontal rule below each person’s biography. A added sprinkle of CSS code made it look smart.

Visit the website of the Social Impact Analysts Association.

The artwork was sent to the company printing the DVDs, following their guidelines on dimensions and quality.

I also built a landing page on Stuart’s website to advertise the DVD, with a PayPal form to take payments.

Whenever he tells people about the DVD, or advertises it on the Internet, he gives the address of this landing page instead of his usual website address.

Many WordPress plugins are free but BackupBuddy is a premium plugin

For an annual fee of US $150 I can use it to back up an unlimited number of clients’ website, which makes it great value. I simply wouldn’t have time to backup a couple of dozen sites manually every week.

Once installed on your website, BackupBuddy checks that the hosting server’s settings are conducive to doing a backup, and if there are problems, gives you advice on how to resolve them. In practice, I’ve found that only about one in four hosting packages needs tweaking in some way.

The plugin also runs a check for malware – handy, because if your site has been hacked you can revert to a previous backup.

Unlike some plugins, Backup Buddy backs up everything

That includes your MySQL database, WordPress core files, theme, uploaded images and documents. And it saves it as a single compressed file. If you want to exclude one or more folders, you can.

You can set up a schedule – I tend to do weekly backups but the can be daily, fortnightly or monthly – and BackupBuddy will automatically do the backup and send you an email to tell you it’s ready. Then you can login to WordPress and download the backup. Even better, you can have the backup sent to your Dropbox account, or sent by FTP to another location for safe keeping.

I’ve seen some problems arise but they’ve all been fixable

I’ve got the plugin to work on every single website, on hosting from several different hosting companies. In my experience, on two out of three websites Backup Buddy works correctly first time. Here are some of the more common problems that can arise.

WordPress directories may need permissions changing to 755. Backup Buddy will tell you whether they’re right or not, you’ll need to have FTP access to the website, or know how to login to your hosting control panel to change these folders’ permissions.

Sometimes the amount of memory your site is allowed to run PHP code, has been limited. This can be fixed by adding a line of code to a WordPress file – but it isn’t always so straightforward. Occasionally a website’s PHP.ini file will need to be found and edited, depending on how your hosting company has configured it.

One website wouldn’t back up at all, despite all the server settings looking correct. Switching to Backup Buddy’s alternative method of zipping files, fixed that issue.

All in all, it’s a great plugin. It may need some configuration but usually works with minimal tweaking. It’s a reliable solution to keeping your website safe and secure.

Alternatives to Backup Buddy

VaultPress is a competitor product to Backup Buddy. I’ve not used it but heard good things about it. It’s more expensive, and simply not an option for someone like me with 20+ websites to backup. But if you run only one or two websites, it’s probably the better WordPress plugin to purchase.

A manual backup is preferable to an automated one. Some website professionals would only ever do it manually and don’t trust plugins. Even if you use a plugin to backup your website, schedule the occasional manual backup too.

Here is a selection of well designed favicons. Can you guess which charities’ websites they’re from? Hover over the icon to find out, and click on the icon to visit their website.

The best Favicons are miniature design wonders, summing up a website using only the minimum of space. They are also a test of a good logo: could you reduce your logo to 16 pixels high by 16 pixels wide and still recognise it? Here are some of my favourite Favicons from charity websites: clicking on them will take you to the website itself. You can probably guess the identity of some of these charities just from their icon.

Here is perhaps the most straightforwardly appropriate of all .ico files. It’s the favicon from the website of the Information Commisioner’s Office and yes, it’s simply the acronym ICO.

So, do you want a Favicon? Find out from the Wild Apricot blog how to add a Favicon to your website.

Please note that WordPress may work slightly differently from shown in the video, if your website has additional plugins or has been customised. And WordPress gets upgraded and improved regularly. But most things should still look pretty much same!

The WordPress dashboard

Let’s start with an introduction to the WordPress dashboard, the first thing you see when you login to WordPress.

Writing and publishing a page

How to write a page – pages are a basic, everyday use of WordPress.

Writing and publishing a post

How to write a post – a post is like a news item, content that’s ordered by date and can be categorised.

Excerpts & the More tag

How to give your posts an excerpt – a short bit of text that sums up what the post is about.

Saving and returning to draft posts & pages

How to edit existing posts and pages – saving drafts of your content.

For more video tutorials visit WordPress.tv’s How To section.

This site is built in static html code

I’d not been asked to build a new static website in years, but the department wasn’t using a CMS. There was a large amount of written copy to insert, carefully markup with HTML and style using CSS. Dreamweaver templates were used to ensure the layout remained consistent across the many pages and sections.

Images and captions

There were a few unusual features. Photos had to be captioned, with the words appearing when you hover over parts of the image. This wasn’t done using image maps because we wanted the text to be accessible. Instead, CSS was used to position each caption. Note the link to a longer description of the image: not something that most websites bother with, but necessary on this website to maintain accessibility.

Making web content stand out

The department wanted to make particular parts of the content stand out, so I applied a background colour and an icon to text to make it obvious that it’s a case study, research note, or a client’s experience. Quotes were made eye-catching, with links to the citation’s source clearly linked to.

TGV provided me with PSDs, visual designs created using Photoshop. These included mockups for the home page, blog, portfolio, contact us, and other pages, which had a consistent and eye-catching design. It was my job to turn these flat pictures into a working website. I’d like to share with you some of the techniques used to build the website …

How to make WordPress more flexible, and display information more consistently

The TGV website has very few static pages. Apart from a blog, its main feature is a collection of samples of their work, organised into collections according to discipline (branding, web design, exhibitions etc). For each of their clients, there’s a gallery of photos of work done for them.

Because this information needed to be ordered and presented consistently, I opted to use several features of WordPress that enable the creation of non-standard web content. You may have heard people say that WordPress isn’t a fully fledged content management system, that it’s just a blogging tool. Not true! The following three features enable you to create complex websites with information arranged however you want.

1. Custom Post Types :  create new types of content, not just the standard pages and posts. For example, TGV’s website has “work samples”. A literary website I’ve worked on has “authors” and “books” as custom post types. You get a new box on the WordPress dashboard, alongside “Posts”, “Pages”, “Links” etc where you can add and edit your new type of post.

2. Taxonomies :  organise multiple lists of terms to describe and categorise your content. For example, a book can be categorised by language, genre etc. On the TGV Design website taxonomies are used to organise their portfolio according to discipline, client and sector.

3. Custom Fields :  add new types of information to your posts. For example, a book might have publication date, publisher and author as custom fields.

I used WPMU DEV’s CustomPress plugin for WordPress. This plugin makes it easier to create custom post types, taxonomies and custom fields, and integrate them into your website templates, without having to write a lot of code from scratch.

Carousels

An important feature of the TGV Design website is its use of carousels (also called slideshows or sliders). There are lots of carousel plugins to choose from, but I found that only yCyclista could do exactly what was required. There’s a gallery feature built into in WordPress that lets you upload photos and associate them with any page. The yCyclista plugin takes this gallery of photos and turns it into a slideshow, with thumbnails below a large image. Some customisation and styling was required to get it looking right, but the plugin’s code made that easy to do.

Visit the TGV Design website at www.tgvdesign.co.uk.

Disqus

The Disqus commenting system is integrated into the site. Disqus gives the RSA more control over how they moderate conversations, as well as enabling visitors to sign in using their Facebook, OpenID, Twitter or similar logins rather than having to have a password specific to the RSA Comment website.

Despite some initial awkwardness when setting up the Disqus account, it seems to be working well and makes the site more user friendly and flexible.

WordPress plugins

We used a number of WordPress plugins including:

• Add to Any – click to share the post  on Facebook, social bookmarking sites etc
• Configurable Tag Cloud – big improvement over the tag cloud widget included in WordPress
• Google XML Sitemaps – gets your posts noticed almost immediately by search engines
• Theme Switcher – an easy way to enable users to switch to large text and high contrast versions of the site
• User photo – authors can have their photo next to their article
• TweetMeme Retweet button – quick and easy retweeting of posts on Twitter

Some of these plugins I’d used before and recommended, others were already in use on other RSA websites. The plugins we rely on most were all checked to make sure they’re both mature, popular, reliable and regularly updated.

Layout and branding

The site has a non-standard layout for a blog and incorporates multiple columns, multiple sidebars and a box for video. The home page layout was the most challenging aspect of the site, and it took time and effort to make the site properly across a number of browsers including Firefox, IE8, IE7, IE6, Safari, Opera and Chrome.

The branding had to match other RSA websites. Fortunately the RSA were able to give a detailed specification and closely monitored and commented on the look of the site as I was developing it.