Alison's Blog

Content management systems are built in PHP or ASP then held in a database like MySQL.
They have a user-friendly interface which means anyone can use them. they also make developing a website much faster and generate new links, breadcrumbs and other features automatically. Normally accessed by a password protected url such as www.website.com/admin

Types of CMS:

• Expression Engine: (not free. About £60 but you get commercial support)
• WordPress
• Perch: £40
• MODX
• Joomla
• Drupal
• CMS Builder (£125)

Certain CMSs are dedicated to – image galleries (Zenphoto or PixelPost), blogging platforms (WordPress), ecommerce ( Prestashop, Magento, osCommerce, jshop), specialist (Moodle for learning management), Wikimedia (wiki), booking systems for holiday companies etc. There are also enterprise level CMSs, for the likes of huge companies like the BBC, providered by Oracle, Microsoft, Solid State, Claromentis.
CMS Complexity:
1. None needed: You might be working on a project that doesn’t need one, because you are happy hand-coding everything and won’t need to update frequently. But remember they do make development much quicker and they enable non-technical clients to update rather than you!
2. Standard CMS with own theme: the most basic ‘out-of-the-box’ set-up
3. Standard with off-the-shelf plug-ins, when you need to extent functionality.
4. Above with custom-built extensions – you will need knowledge of PHP and poss. MySQL.
5. Custom-built – for unique needs.

Installing:
Need to make sure your host can handle it. All downloads have a list of requirements. You have to consider things like the amount of memory allocated to PHP (especially for image galleries). These days, most hosts support the popular CMSs.
Download the installation files and unzip the package, create an empty database via your hosting control panel, connect to your web space using FTP (you may have to type in database connection details before or after upload), decide on user name and password.
NB. Some web hosting companies do all this for you, aside from user name and password. Sounds Fantastico to me!
Choosing the right CMS:
1. Ease of use – for me! For the client! (Perch and WordPress have ‘undo’ feature. Make a note of that!)
2. Make a list of function requirements eg. gallery, user registration, blog, forum, booking form etc, then make the search.
3. Is there a plug-in that can do the extra job you require?
4. Remember, you can use a second CMS to provide the missing component
Workflow:
Define content strategy
Research and choose your CMS
Install it and check
Work on design – on Photoshop etc
Create HTML and CSS – most CMSs rely on templates
The test it, test it test it!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
Revise
Launch!

Things I learned last week – in no particular order…

How to earn from your website:

1. Direct sales
2. Advertising
3. Affiliate sales (point people to ecommerce sites and profit from referrals)

However, it’s all about the TRAFFIC. Need high volume to acheive high sales. And good quality content and keywords are key!

Advertising might not be appropropriate for your site. It may distract or detract, particularly if your site is funded as a marketing vehicle or is a service of some kind. Advertisements that are in keeping with your site may be appropriate eg. kitchenware for a cookery/recipe site, especially if discreet.

The pop-ups or unders and overlays are known as aggressive ads. You need high traffic numbers to make money from banner ads. The click-through rate is only 0.1%. A pleasing rate of return apparently is £1 per 1,000 ad viewings (impressions). And it works much like newspaper ads, ie. the more visibility, the greater the cost of the ad.

You can integrate Google Adsense ads into your site’s style, so it’s less obvious they are adverts. Could lead to more clicks… They are highly related ads, too.

The publisher’s advertising space is called the Inventory, with zones such as the “sidebar skyscraper” and “leaderboard top” (between masthead and content on web page).

IAB – interactive advertising bureau. Voluntary guidelines for web publishing, sizes, download times etc.

Advertising networks: connect website publishers with advertisers (taking a cut of course, possibly up to 50% of rev). Publisher of website gets paid according to how many impressions were ‘served’ on their site.

User tracking – can even serve up an ad you looked at previously somewhere else, can follow you round the web. Question is whether that’s ingenious or a bit spooky… (example of James and his garden sheds).

• CPC=cost per click
• PPC=pay per click (Google Adwords)
• CPM=cost per 1,000 views
• CPA=cost per action

sponsorship= where a company pays to advertise a section of a site eg. building society on mortgage advice section of a site.

Other ways to make money: affiliate sales, market your own ads (would you like to advertise here..?) blogs, job boards, donations.

Freemium: an internet marketing stategy where a product or service is offered free of charge but a tempting upgrade has to be paid for. The product offered must be useful in it’s own right. “free” and “premium”. Eg. Flickr, SoundCloud

Subscription Content: refers to accessing online content through payment, either ”hard paywall’ (obligatory paid subscription eg. the Times) or “soft paywall” where only some content requires payment eg. Wall Street Journal. Users will pay if it is a brand and content they trust and value.

The web is a different media to print. Explain the considerations when writing for a web audience. How can you capture the audience’s attention and make them more likely to read on/stay on the site? (Find some examples of good web writing, bad web writing and some unusual styles.)
Content is king, apparently. Yet when it comes to website creation, it sometimes feels like more of an afterthought. Just a load of old lorem ipsum. Which is a serious mistake.

According to Brad Shorr, writer on Smashing Magazine: “No matter how brilliant a website’s design, no matter how elegant its navigation, sooner or later visitors will decide whether to take action because of something they read. In the end, the effectiveness with which a website converts visitors hinges on words.” (June 2011)

Good writing is what those top-ranking Google pages have in common and it’s what users want. Words can make or break your website.
How users read web pages:
That said, we do know that people rarely read web pages word by word; instead, they scan the page, picking out individual words and sentences. When researching how people read online, US web usability guru Jakob Nielsen found that 79 per cent of test users always scanned any new page they came across. Only 16 per cent read word-by-word (1997).
His later research with Loranager (2006) showed people spent an average of 27 seconds on each web page. As Nielson explained: “It’s not reading, rather ‘the ruthless pursuit of actionable content’.”
It is not a stationary activity either. Users roam from page to page, collecting salient bits of information from a variety of sources. No wonder – reading from screens is a tiring business and about 25% slower than reading a printed page.
We also know from Nielsen’s research that users scan in an F-shape. He conducted an eye tracking study (2006) with 232 users and thousands of web pages and found behaviour consistent across many different sites and tasks. Eyes are always particularly focused down the left hand side of pages, picking out the salient stuff.
Users do this because they are information foraging, picking up the scent of prey (the desired information) so they can track it down. (How we have evolved!) This theory, using the analogy of animals hunting for food, is the work of Pirrolli, Card and their colleagues at Xerox’s Palo Alto Research Centre (PARC), who focus on understanding web surfers’ basic instincts so searching becomes more intuitive.
Both pieces of research tell us to think scannable text when writing. Start subheads, paragraphs, and bullet points with information-carrying words that users will notice when scanning in their F-shape.
Your first ten words are more important than the next ten thousand:
Given what we know about the fleeting attention of users, it is essential to seize them with the few seconds you have. Elmer Wheeler, America’s celebrated salesman of the 1940s, had some super sales tips that are still relevant for today’s web world.

“You have only ten short seconds to capture the fleeting attention of the other person and if, in those tens short seconds you don’t say something mighty important, he will leave you — either physically or mentally.”

Too true. Headlines are a good way of saying something important. There are proven formulas in existence which psychologically target people’s curiosity, laziness or desire to avoid pain. For instance:
Formula 1: Get (desired result) in (desirable time period)
Eg. Get the beach body you’ve always wanted – lose 2 stone in 3 weeks!
Eg. Get an MA in web design with just 2 hrs study a week!
Formula 2: Avoid (common problem) with (my solution)
Eg. Cut your tax bill in half by using these sneaky loopholes
Eg. Turn your little monsters into angels with these proven parenting tips
Formula 3: are you (provocative question)?
Eg. Are you stuck in a dead end job?
Eg. Can you work full-time and study for an MA?

An example of the formula headline approach

www.pippamiddleton.wordpress.com

There are many more examples but bear in mind that, whilst the formulaic headline approach may be appropriate for keep-fit sites, parenting or finance, it may not be fitting your particular online presence.
Top-loading your content is another excellent way of attracting users and permits efficient scanning. Make your point immediately like a newspaper or broadcast journalist would and use the inverted pyramid style of writing (example) the most important information comes in the first sentence, supporting information in the second and so on – so it is seen and remembered.
Get the ‘who, what, where, when, why’ in straight away. It means visitors can instantly gain an understanding of what the page is about. The structure also places facts and keywords at the head of the page, where they carry more weight in search engine analysis. To help, ask yourself what is the key thing you want your visitor to take away with them when they leave your website – and that’s your lead.
In busy home pages, it’s often good practice to provide only the lead and perhaps a ‘teaser’ sentence, with the rest of the article available through a ‘learn more’ link.
Don’t go into essay or novel mode. As Brad Shorr blogged:

“Online marketers like to sneer at newspapers, but we can learn a lot from print journalists. For instance, they don’t bury the lead.”

Another useful journalistic tool is the hook. Hang content on topical, timely events to keep your content fresh; such as the season, an anniversary of some kind, or current event. Search engines appreciate new angles and so do humans. Use an editorial calendar to remind yourself of relevant dates.
Content has to be quality – well-researched, unique if possible, aimed at your target audience and delivering what you promise – or they will bounce away. Get experts in the chosen field to write for you. It means people will trust your site, it is a great endorsement and enhances credibility.
The most successful web writing is tailored to the target audience:
Ginny Redish, in her book Letting Go Of The Words, says:

“Writing successful web content starts with finding out about your audience and their needs. Who will come to your content and why?”

She suggests getting to know users by:
• Listing your major audiences
• Gathering information about them, by talking to web users, reading the emails they send, talking to the marketing department, interviewing people
• Listing their major characteristics eg. their experience, their emotions when visiting your site , their values, demographics (age, ability) social and cultural environments and their technology
• Gathering their questions, tasks, stories and goals, then using this information to create personas and potential scenarios for your site which will give you an invaluable insight into how it works for others

Ginny says good web writing is like having a conversation – not a rambling dialogue but a focused conversation started by a busy person. However, when having that conversation, remember Nielsen’s advice about how selfish users are.

“They arrive at a website with a goal in mind, and they are ruthless in pursuing their own interest and in rejecting whatever the site is trying to push. Particularly on eCommerce sites. They cherry pick what they need – write accordingly: make your content actionable and focused on user needs.”

Now you know who your audience is, give them what they want:
What they want is concise writing and George Orwell has some top tips:

• Never use a metaphor, simile, or other figure of speech you are used to seeing in print.
• Never use a long word where a short one will do.
• If it is possible to cut a word out, always cut it out.
• Never use the passive where you can use the active.
• Never use a foreign phrase, a scientific word, or a jargon word if you can think of an everyday English equivalent.
• Break any of these rules sooner than say anything outright barbarous.

Nielsen measured the effect of improving web writing and the results speak for themselves. He developed five different versions of the same site – with the same basic information but different wording – then watched users perform tasks. He found that for the concisely written version – measured usability was markedly improved – up by 58%. Not far behind was the scannable version, with 47% better usability. The one with objective language rather than promotional guff was still good – up 27%. But the most dramatic improved was gained when all three improved writing styles were employed, resulting in 124% better usability.
What users do not like is ‘marketese’ or promotional language. Nielsen says it imposes a cognitive burden and valuable resources are spent filtering out the hyperbole to get to the facts.
So how do you avoid this marketese while still convincing readers your site is the one for them? Veteran web writer Larry Asher says:

“Look for the emotional lever. People don’t buy beer, elect candidates or order stock photos for rational reasons. Figure out what emotional fuse your product lights and talk about that.”

While you are at it, introduce just one idea per paragraph as users will skip over any additional ideas if they are not caught by the first few words.
How the writing looks:
The look of text online affects how readers relate to it. The contrast produced by headlines, subheads, lists, and illustrations will provide landmarks to direct the reader through your content. The structure of heading and list mark-up also helps search engine optimization and online content searches, because of the semantic emphasis and the relationship between words.
Use an appropriate font such as Verdana or Georgia, designed specifically for legibility on the computer screen. Make sure it’s easy to read, unlike this example, with no large, boring blocks of text. Create narrow columns so users don’t have to travel right across the screen and be generous with leading. Also avoid capital letters as they are difficult to scan.

Example of text that runs almost the width of the web page. Also check out the 'Easy Read' option - I'm not so sure it is.

www.buildinghistory.org/bath/index.shtml

Links:
Don’t be afraid to use links within your own site. They cannot sustain an argument or deliver facts as efficiently as conventional writing, but they give welcome relief to blocks of text and can help you get rid of the more tedious stuff, such as product information or the background to an issue. No need to summarise as you would have to in print. Also links are good for SEO. Nielsen’s advice on links (2009) is:
• Use plain language
• Use specific terminology
• Follow conventions for naming common features
• Use front-load user- and action-oriented terms
• Make sure your pages share the same graphic design, navigational controls, and overall content theme, so users don’t feel lost
Remember, if you must send your reader away via a hypertext link, make sure the material around the link makes it clear the user will be leaving your site and entering another. Also, provide a description of the linked site, so users understand the relevance.
Put only the most salient links within the body of your text and put the rest at the bottom where they are available but not distracting. Links that appear within body text should be underlined to set them off from the surrounding words. Underlining is a carryover from the days of handwriting and the typewriter, but still works well for accessibility.
Prune aggressively:

“Vigorous writing is concise. A sentence should contain no unnecessary words, a paragraph no unnecessary sentences, for the same reason that a drawing should have no unnecessary lines and a machine no unnecessary parts.”

(William Strunk, Jr. and E B. White, The elements of Style, Allyn and Bacon, 1979)
Beatrix Potter says it even more succinctly. “The shorter and the plainer the better.”
(Don’t Make Me Think!) Steve Krug’s third Law of Usability is: “Get rid of half the words on each page, then get rid of half of what’s left.”
It sounds ruthless but the benefits are:
1. It reduces noise level
2. Make useful content more prominent
3. Makes pages shorter, so users see more of each page
Don’t be afraid to use fragments – they allow you to pull information-carrying words to the front so the user can find a simple path to whatever it is they are looking for. You won’t win prizes for sentence construction but web readers only read 18% of verbiage (Nielsen).
However, don’t dumb down what you have to say either. Make printing easy for those who prefer to read offline, and you can deliver content without cutting the heart out of your copy.

Unforgiveable. Failure to proof read is so unprofffffffffffffffessional.

 www.simonoliver.co.uk

The practical stuff:
1. Keep paragraphs and sentences short.
2. Concentrate on spelling, punctuation and grammar. Mistakes will make your site look unprofessional, irritate readers and send them elsewhere.
3. Proof-read – or get someone else to!
4. Use plain language. It also works best for search engine visibility, providing a literal match between the words in the user’s mind and the words on your site.
5. Keep your most important points above the fold, if possible.
6. Be consistent. Navigation, terminology, tone, and style should be identical throughout the site. Inconsistency tends to confuse and annoy readers. A good tip is to use a style guide, such as The Guardian’s and stick with it. Or write your own.
7. Clarity: make sure everything is straightforward and clear (this is where testing comes in).
8. Don’t use made-up words or your own slogans as navigation options. They may be funny or inventive but they won’t have the scent of the sought-after item.
9. Clear and compelling Calls To Action.
10. Organise your content – break it down into chunks that can be easily accessed. That way, users won’t have to wade through irrelevant material.
11. Tone of voice: Think about the style you will employ. Sassy, satirical or analytical? Humour helps users to identify with you. Use active verbs and first-person language. A unique voice may distinguish your pages, but beware of going too far – there is a fine line between engaging and annoying.
12. Think globally. You are designing documents for the World Wide Web so a percentage of your audience may not understand local conventions or language. Use the international date formula (14 March 2009) and consider metaphors, puns, and popular culture references.

This all applies to every page – not just the Homepage – as users may be landing from a search.

Unusual, but excellent content from JK Rowling's site

 jkrowling.com

All important page titles:
Web page titles are found in the html document head section with the <title> tag. They are enormously important because they are the first thing users see and the first thing users of screen readers hear. It also becomes the text for any bookmarks the reader makes to your pages. In addition, most search engines regard the page title as the primary descriptor of its content, so an informative title increases the chance of your page appearing in a related search. And a great page title can result in someone clicking on your listing in third place, rather than on a poorly described listing at the top.
Use carefully chosen keywords and themes for the page, form a concise, plainly worded, useful description of the contents and be as unique possible. Some organisations incorporate their name into the initial part of the title. This can be useful but consider how some web browsers truncate long page titles (more than 65 characters, including spaces) so they are less legible.
Take care not to defame anyone:
Think carefully before writing anything that would damage someone’s reputation. You can libel someone by writing about them on a personal blog, providing at least one other person accesses the defamatory material.
Examples of the formulations used to define a “defamatory imputation” include words that:

• are likely to lower a person in the estimation of right-thinking people;
• injure a person’s reputation by exposing him to hatred, contempt or ridicule;
• tend to make a person be shunned or avoided.

Libels on high-traffic sites are more likely to be discovered but potential claimants may let a libel pass if it hasn’t been widely seen, as a court case would ensure a much wider audience for the slur. However, it is preferable not to risk defamation in the first place!

OOophs! Forgot about these for the original design site. Just made a couple and have finally twigged why my photos were jumping around. D’oh!

I have made a few adjustments to my sites, to hopefully improve their look and function.

I finished off the second page of Bicycle Doctor that I had created, to see how the style would look on another page and because I wanted to have a go at a table (must get out more!) Tedious but necessary in this case (displaying prices).

I also corrected my floating sale tag problem on the front page, by fixing it to the browser edge. (Think I am still in 1990s newspaper promotions mode!) However, the punters will notice.

Also added a Wowslider to my Three Good Designs page, resized photos so the download is better and tinkered with the css. www.alisonbateman.co.uk

www.sweatybetty.com The typography here is clean, crisp and athletic. The font-family is Arial and Helvetica and it works to sell the work-out gear. The Logo is in the same vein, only slightly more elaborate. It all makes for a pared down, lean look. No fatty fonts here thank you. Buy this gym kit and you’ll end up as slender as the lettering.

The middle two sites – www.castirondesign.com and www.foundationsix.com – I pinched from a forum thread by Aimee, I think it was, which was concerned with gorgeous textures but I got excited about the typography too. I LOVE the different vintage styles on the Castiron site, with their shadowing. I realise there should only be two fonts here but, as it’s a design site, I think the designers get away with it as they are obviously out to showcase what they can do.  The Beauty site is perfection with its combination of simple text and retro serif logo. Beautiful indeed.

www.isleone.co.uk I know this one won’t be everyone’s cup of jellied eels, but I really appreciate the friendly feel of this font – and it is so easy to read. I expect some might argue it’s in the same league as Comic Sans due to the childish nature of the curves, but I think it’s perfect for smaller, less formal sites that need to be more personal. It’s a Typekit font-face called “Coolvetica”.

This site is special on many different levels and I am slightly embarrassed about using it – however did I come across it in the first place? (Didn’t need it in the end. Found something suitable from the era in my own wardrobe…) The font isn’t awful in itself – I think it is Helvetica and Arial – but it looks like it’s simply been forgotten about in the rush to download that lovely background and costume photos. It looks like a default font, especially with all that underlining. Considering the nature of the site, someone could have had a lot of font fun, but the message is ‘not fussed about fonts’ but ‘mad on mullets’.

Again, I am not criticising the font per se, but the way it has been used.  According to the class notes on typography: “typography is not just about choosing the correct font for a particular design, it’s about how that font is used.

• Size and colour
• Line height
• Letter and word spacing
• General layout, white space and hierarchies
• CSS gives us control of these parameters”… however CSS has not been used to full effect here. There is little distinction in font size, which does not allow for a recognizable hierarchy. In fact, the breadcrumbs are the largest letters on the page which is clearly wrong. There isn’t enough white space to let the page breathe and there is No layout at all. It all looks a bit squashed too. Just not good enough for a beautiful region that produces my favourite wine.

Oh dear. This is all just too small. Too tiny to read properly. Only an Airfix fanatic would bother to trawl through this lot. This site is in need of some serious drop-down menus.

Initial thoughts about original Bicycle Doctor website:

1. It is unclear at first glance what the site is all about. It is lacking a proper logo/recognisable branding. (There is some little icon by the Facebook icon but it is poor quality.)
2. Use of colour is very basic.
3. Text is not particularly easy to read on the blue.
4. There is too much of it. Needs subbing right down. Font is boring, no personality and much of it the same size, so it’s unclear where the user should go first.
5. The offers, such as free servicing and sale price bikes, are easily missed so need to be highlighted to bring business in.
6. Navigation is untidy and sprinkled throughout the page. Layout is poor. The photo is perhaps a friendly focus for a co-operative, but they are a motley crew and it downloads badly! I would suggest it is better for the ‘team’ section, with something more eye-catching and attractive on the home page. The site is also coded in tables (which are a no-go for text, I was advised on the forum!)
7. Cycle scheme needs an icon.
8. Not sure about the prices warning. I personally prefer a guide but it would be optimal to have a system in place to update prices with ease.
9. Small print needs to go.
10. SEO – the title is crammed, but are the h1 and h2s working to full strength? Seems unlikely with the likes of ‘Opening Hours’ and ‘keep in touch’. These should be key search words.
11. The search facility is in an odd place. Should be somewhere more conventional so users don’t have to search… for the search!
12. 1. Page rank is 4 out of 10.
    2. 36 backlinks. “The number of backlinks is an indication of the popularity or importance of that website. Backlinks are important for SEO because some search engines, especially Google, will give more credit to websites that have a good number of quality backlinks, and consider those websites more relevant than others in their results pages for a search query. ” Popular site that could improve with design changes.

How I have tried to improve the site:

* I have tried to make what Bicycle Doctor does clearer, by focusing on cycle servicing
and sales, adding navigation that takes you straight to servicing and including a clear image of a bike being serviced, but also by including pics of bikes for sale. So the dual nature of the business is more immediately obvious.
* I have introduced a more noticeable logo and a tagline that explains, with a small play on words, what Bicycle Doctor does… although maybe “a co-operative cure for all your cycling needs” may have been better?
* I have changed the colour scheme, so it is fresher and easier to read. When choosing, I kept in mind the main users of the site are men, ages 35-44. I also added a background image of bicycle tyre tracks and kept it as many small images as I liked the depth they created.
* I changed the font and subbed down the content, but tried to leave in key
words, as my book tells me Google relies less on meta tags for keywords now
and looks instead at the page content for PR. (This is why I have ended up with
more on the page than I originally wanted.)
* I felt the site’s designer was missing a trick by not displaying the offers better. So I
went all out to display their sale stuff and advertise the savings and
service offer (3 free). I added the static sale tag to cover all the bikes
as you scroll down (and also because I couldn’t do what I wanted with the image replacement!!!) As you can see by the still, I have yet to anchor it to the right side of the site, as suggested during feedback, so it doesn’t float around aimlessly as it is currently doing! This will be sorted.)
* Navigation. I kept the items for sale all together down the left side, but took the rest of it
- location, about us, etc – to the top of the page so it is more organised.
(I wanted to do away with a few, such as the Links link, but then read that links are good
for SEO, so put it back in. Also wanted to get rid of the site map, but it is quite a big, unwieldy site, so thought it should stay. I compromised by tucking both these links down the bottom left.)
* I moved the search (which I think is necessary given the size of the site and number of different items for sale) to a conventional, top right position.
* I got rid of the tables on Jim’s advice.
* I got rid of the photo and added a more dynamic one.
* I added an icon on the Cyclescheme as I believe the scheme will interest users and needed to be given more prominence. * I got rid of the small print and the CSS and HTML validation and site visits. I am sure users don’t care about such things.
* I achieved rounded corners and box shadow with CSS3. Hurrah!

Findability:
I did some reading on this subject but came away none the wiser really, as it strikes me no-one actually knows what the Google formula is from one day to the next. So will be interested to see what comes up on that this term. What I did do was:

1. Paid attention to h1,2,3 and content.
2. Added social networking, which improve page ranks.
3. Kept the meta tags and key words in heading.
4. Download is quicker.
5. Looked at everyone else’s research. It felt wrong but it was oh so useful!

Didn’t like the black design. It was stopping me from making any headway with redesign. Excuses, excuses…

I appear to be starting with the logo again. Is this where everyone begins? It took five minutes to make, as opposed to my first attempt which I eventually abandoned. Still only in paint.NET so simple is the way to go… as you can see. Maybe Bicycle should be larger than Doctor? What do you think, anyone?