UNDER PROMISE, OVER DELIVER!

Sorry for shouting, lovely people. But this is my customer service slash LIFE mantra and I have to share it with you vigorously. Basically, people are less about GOOD outcomes and BAD outcomes, but about BETTER than expected outcomes or WORSE than expected outcomes. Manage peoples’ expectations and you are something like 90% of the way to being awesome.*

SOME RECENT EXAMPLES from my life:

O2 gave me some home phone and some broadband. They quoted more on the phone than they did on the website UH-OH!! The actual price isn’t relevant – it was still fine, and I was still willing to pay it – but it always SEEMS high when it is more than expected. They could justify WHY it was different, but it still appears to me they could be much clearer on their website and not leave a wee sour taste in their customers’ mouths. THEN they told me that my “start date” for broadband would be the 24th; the start date for my home phone the 23rd. Imagine my happiness when I get little emails and texts today, the 22nd, saying “We have connected you early!” My feeling is: they probably knew all along that they were being over-cautious in their deadlining. But it has resulted in a very POSITIVE feeling replacing the neutral feeling I would otherwise have had! Well done O2, clever people.

A BAD experience has been with my letting agents, Let-It. I won’t go in to the boring details but suffice to say that:
1. Adding charges as you go along is ALWAYS to be avoided. Be upfront. Where possible, don’t charge people ridiculous amounts for simple tasks!! And you ought to be able to explain charges.
2. If you say you will REMOVE a charge as a “goodwill gesture”, do not later reinstate it. That is, then, a retraction of goodwill. There is now no goodwill between us. Awkward…
Again, doing this means you have modified your customers expectations in a (positive) way, and taking it back is doing more damage than simply never promising in the first place.

DON’T MAKE PROMISES YOU CAN’T KEEP! Always give yourself room to manoeuvre!

*Totally meaningless statistic. But you get my drift.

The Social Media Revolution

Simply had to share this wee video:

Makes you think!

The Top Rules of Networking (And Why You Should Break Them)

I attended a very good networking event last night, although it made me realise that you have to approach networking as if it… isn’t networking. Come on, you wouldn’t be hugely different at a social gathering that WASN’T labelled as a networking event (this particular one was entitled “Everything You Wanted To Know About Networking… But Were Too Afraid To Ask”, so it was rather self-aware) so why do you need to be taught how to attend one?!

We did have a really useful session, not only “networking” (we did a speed-networking exercise which I think always helps to break the ice), but talking, sharing, discussing – making our own list of top tips for networking.

However, in the true modern blogger style, I would like to take a moment to look at the “top tips”… and explain why they are false. Ha!

1. Be yourself
Of course, it is important in building good, meaningful relationships that you come across as genuine and authentic. However, be wary of focussing too much on being “real” – people who might use your services or recommend you to others probably want to see the presentable, business-y side of you as well as the fun-loving cat-owner or whoever you happen to be. It is possible to “be yourself”… but still tailor your presentation to your audience. Be cautious of over-sharing (personal stuff) and neglecting to explain what makes you good at what you do. Women in particular find it hard to share successes with others – it can look bigheaded – but do try. My tip would be – don’t say “I’m so charismatic/intelligent” – they can discover this for themselves. Do say “I have been doing this for 30 years/I won an award for my work on X/I’m proud of the work we did for Y.” These are factual statements and, mentioned sparingly, won’t make you look immodest.

2. Manage your expectations
Don’t expect to meet everyone in the room, for example. Have a realistic goal.
Hmmm.. I for one do not go to events, flowing with free wine, banter, interesting people and potential customers/referrers and think “I need to speak to three people”. “I need to give out four business cards.” Maybe this is useful to have at the back of your mind, but I would say goal-setting was a little bit desperado.

3. Prepare your pitch
Obviously, you should know what you’re going to say about who you are and what you do. You should really know this already. But yeah, get it nice and slick and remember the salient points. Feel free to change it up. Practice saying it confidently. BUT be aware of sounding rehearsed, and be aware that your audience may not feel you HAVE included the salient points, so ask for questions once your quick “pitch” is over. Listen to how other people do theirs and try to refine yours to reflect the “best practice” you have witnessed.

4. Listen
I can’t really come up with a reason why you SHOULDN’T listen to others within a networking event – it makes you look good, it allows you thinking time, it allows you to gauge their response to what you might say, and obviously it gives you a chance to find out how THEY might be useful to YOU rather than the opposite. However, don’t JUST listen. Listen “actively” – repeat back what they say to show you are listening and to help yourself remember key facts. Ask questions. Listening isn’t simply about being quiet while they speak.

5. Build relationships
This does capture the idea, which I am a big fan of, that networking is not simply about shoving business cards in people’s hands and telling them all how amazing you are. Quality over quantity is surely key – you would always want to recommend or assist your friends, and that is how networking should work – by making you more friends within relevant sectors. However, don’t spend the whole time gassing with one person and don’t expect to make bezzies. Unfortunately you do have to be rather cynical about networking events – people are there to make useful connections.

6. Don’t dismiss anyone
This is true, you ought not to think that someone’s business isn’t important or useful to you. People are more complex than that, and you also want referrers as well as customers. However, we can all tell when the benefits of a potential referral will never outweigh the excruciating boredom, or obnoxiousness, of an unwanted networking pest. So do be a bit selective.
It is true that you ought not to badmouth competitors or previous clients, no matter how tempting this is. Negativity and criticism is a very unattractive trait.

7. Remember business cards
Well, yes, you probably should. BUT:
– Don’t fiddle with them, or become obsessed by them and treat them like poker chips.
– Don’t give them to people before you’ve even started talking to them – not least because that person will become distracted by your card and stop listening. (It also makes you look like an idiot).
– Don’t hand out rubbish ones. Obviously.
– Leave white space on your card if possible. Carry a pen with you. Write down the most important thing that THAT PERSON (who you have just established a beautiful relationship with) needs to remember about YOU.

8. Make a good first impression
They say that it takes seven subsequent pleasant encounters with someone to make you like them, if your FIRST impression of them was awful. This is what we call a MEANINGLESS STATISTIC, as obviously it depends on so many external/other factors as to be absurd. How awful does the first meeting have to be? How important is it that you like this person? (You might try harder with a friend of a friend, for example.) I have known people, who I found fairly abhorrent, to turn it round rather quickly with some humility, a witty comment or an interesting titbit. So don’t panic too much about your appearance, your opening line or your first impression on someone – but don’t neglect it either!

9. Follow up
I like to send a wee email to people who I have met and GENUINELY ENJOYED TALKING TO after an event, to tell them so. My advice here is quite straightforward – what would you like to receive? A template email from someone you spent five seconds shaking hands with saying how much they liked meeting you and why not check out their great deals? is going to feel awfully hollow. Make your follow-ups genuine and also specific (i.e. not making it look like a template email, and also in terms of where you go from here – do you have a useful referral for them?)

10. Referrals
Make them. Make them first. This is all good advice – you can train people to do something by leading by example, certainly. But don’t try to fit a square peg in a round hole. “Oh, you’re looking for a hairdresser?! I haven’t been to one for five years, but I did go to this one once, who isn’t near you geographically, and was distinctly average, and the referral is not useful because that particular hairdresser won’t have the foggiest who I am.” Or “Oh you are a plumber! Give me your card. I will send an email to all my friends tomorrow just basically saying that I have the contacts details of a plumber.” Make good, useful, genuine referrals.

Any thoughts?

Create A Custom 404 Error Page

It would be EXTREMELY frustrating to lose a potential (or even existing) customer over something as silly as a broken link – and, unfortunately, you won’t even always be able to track them down and fix them on your own website, never mind others. Other sites which link to your page, or old bookmarks, could lead customers to the wrong place – and then send them packing to a competitor.

One fairly easy way to rectify this situation, if you know your way around the backbones of your website, is to create a custom error page, usually known as a 404 Redirect. This means that when someone clicks on a “broken” link (a link which no longer goes anywhere/exists, or has been typed incorrectly) within your domain (www.yoursite.com/anythingcouldbehere..) they will see a page specifically designed to keep them within your website. 

Example: The home page of my company website looks like this:

And our “custom 404-redirect” page looks like this:

This has been designed to look exactly like the home page, with a quick explanation of what might have happened, and pleeenty of links to other pages within our website.

Method: Create a page like the one above, designed to fit in with the look and feel of the rest of your website. You can decide what text to include but make it obvious that the link they clicked (or the address they typed) wasn’t quite right. Give suggestions of where to go next. Save this page as 404-redirect.html.
Next, go to your .htaccess file and type the following:

ErrorDocument 404 /404-redirect.html

Voila! You can test it by typing http://www.yoursite.com/goaskjjsjgabsfdf in the search bar 🙂 (or something – you get the idea..)

301 Redirect: If a customer clicks a saved link to, for example, your Contact page, which used to be http://www.yoursite.com/contact.htm (and this is what they click on) BUT you have long since changed it to http://www.yoursite.com/contactme.htm – then you can help your customer further by taking them to where they DO want to go.
Again, get into your .htaccess file and type:

Redirect 301 /contact.htm http://www.you.com/contactme.htm

or

Redirect permanent /page.htm http://www.yoursite.com/page.htm

More information can be found here:
http://www.searchengineguide.com/stoney-degeyter/three-easy-ways-to-fix-broken-links-and.php

Some Thoughts On Twitter

I have been reading quite a bit lately regarding how to use Twitter effectively as a business – useful blogs here http://www.thesocialpenguinblog.com/2012/02/08/10-things-a-brand-should-never-do-on-twitter/ and this one is OK too: http://blog.hubspot.com/blog/tabid/6307/bid/6696/The-9-Worst-Ways-to-Use-Twitter-for-Business.aspx) As a result of this, I have taken some actions that I thought I would share with you.

1. I have completely removed the Automatic Direct Messages that would be sent to new Followers. Don’t know why we ever did that, now that I think about how impersonal – and ultimately fruitless – it is. I now send new followers a personalised tweet saying thanks. Much nicer.

2. I have gone through alllll the people we follow and deleted the ones which are taking up valuable space. It is a list I have inherited in my role, and perhaps these people seemed cool at one point… presumably a point before we hit the 2000 threshold. If you follow way more than follow you, you not only look sad, you also reach a limit when Twitter won’t let you follow any more. If this means you are missing out on relevant people to your industry, go back and get rid of the dead wood. (Sorry, that sounds a bit mean.)

3. I have also added all of my contacts to appropriate lists – which I think will be useful in the long term. This should mean I can “send” Tweets to people who will be most interested in them (theoretically), which is always good marketing chat. Again, time-consuming short-term!

4. I have had a look at our (massive) database of contacts – already neatly segmented – and started to go through them (starting with local businesses, but you might choose a different approach) making sure I am in some way socially connected with them. My preference in terms of B2B is definitely Twitter, hence the need to MAKE SPACE to make sure I am following all my top customers. Which I now am. Yippee!
On a side note: It does seem to be a good idea to have a list of “top customers” – people that you deal with regularly – and make sure you are keeping channels of communication open with them (in as many ways and formats as possible). And remember, communication is not just about talking, it’s about listening too!

Interestingly, I also received an eflyer with a link to this article on social media: www.mashable.com/2009/10/28/small-business-marketing/ which wasn’t particularly good at all. Ah well!

CSS is Important!

What does !important mean within the Cascading Style Sheet of a webpage? It means that whatever other styles are applied afterwords, that first – or most important – style remains. It means that you won’t accidentally override a style you do want to apply universally.

So in this example:
p { color: #ffffff; }
p { color: #000000; }
the paragraph text color will be black (#000000), although white is given in the first instruction (#ffffff).
This is because the styles are applied in a cascading manner, hence the name cascading style sheets. Formatting from a style sheet is applied first and foremost (and will apply if no other formatting is defined), but can be overriden by inline styles, such as <p style=”color: #ffffff”…> </p> 


OR by using !important in your CSS. So in this example:

p { color: #ffffff !important; }
p { color: #000000; }

the paragraph style will always have white text.

More information from this nice lady: http://webdesign.about.com/od/css/f/blcssfaqimportn.htm

Perfect Websites 2

Here comes part deux of my Handy and Useful “web development for dummies/ top tips guide” to perfect websites! Having already discussed user-friendly websites, let’s look at creating SEARCHABLE websites and then how to MEASURE results 🙂

Searchability – Can Customers Find You / Does Google Love You?


Meta Data – this is the info nestled in between the <head> </head> tags of your webpage. I don’t claim to understand much about this stuff, but there are some basics which the interweb spiders can read and use to organise your website.
The META data ought to have a NAME and some CONTENT, and is most useful for defining keywords and a description of the page (this what is shown by web browsers!)
So that would look like this, maybe for this page for example:

<meta name=”description” content=”Blog covering online marketing, social media, communications and customer service” />
<meta name=”keywords” content=”marketing, customer services, online marketing, social media, blogging, websites, web design” />


You will also need a nice title, shown in the very top of your browser when you look at a webpage.
<title>Fruitful Communications</title> <– notice this has an end tag but your meta tags do not. 

Oooh, and if your title is more than 66ish characters, browsers won’t display it properly. Check your count here. More information on length, here.
This is useful as search engines use this information to see what your page is about. Simples.

TOP TIP: Try not to use generic page titles such as HOME or ABOUT or WELCOME. This is part of your online marketing and searchability, so USE this space wisely. What is actually unique about you? What do you do? Instead of “HOME” or “PAGE ONE” try “Theatrical Supplies” or “Glasgow Joiner” for better searchabilityness.

URL Format: Silktide will score you on this, and search engines will judge you on this as well. This embodies the difference between:
http://www.site.com/sasjh-akjshf%sololo-psdhjkg/fsdhgoog/kjh&amp;^^bcskdhgksdjgjhgsldhgjsdhgsd (assuming this still was an actual URL)
and http://www.marketing.com/adverts.html or http://www.glasgowhair.com/highlights.html
Everyone prefers a neater URL. Keep yours short and sweet, and as specific as possible.

Broken Files:

“Broken files usually mean part of a webpage is missing or broken, like so:Some broken files aren’t noticeable to the user, as the missing file may not be used in a way that is obvious. For example, a background image might be missing, but a plain background might still appear ok. These broken files are still an issue however, as they slow down the webpage from loading; the missing files must be unnecessarily requested and rejected by the webserver.”

Thanks, Silktide. Couldn’t say it better myself…

W3C compliance: I only recently discovered how utterly essential this is, as my website wouldn’t display properly in Mozilla Firefox. (Remember, ALWAYS test your website in the most popular browsers! This includes Safari, Opera, Chrome, Internet Explorer and Firefox.) But there is no point in testing your website unless you know what is going wrong (and how to fix it.)
Anyway, I discovered that Firefox will only show very well coded webpages – those that follow the strict rules of CSS.
Luckily, W3C provides a handy checker! Available, free, here: http://jigsaw.w3.org/css-validator/
You can also make sure your website generally complies with W3C, which will make it a well-loved and respected site! http://validator.w3.org/
These will also tell you *what* to change, and where it is in your code, so they are extreeeemely useful.

Incoming links: Search ranking will also be decided based on how many other (good) sites link to your site. (This will affect your Page Rank score, see below.) SEOmoz Open Site Explorer is useful for checking this (but can only be used a certain number of times in one day.) See how many (and what type of) sites link to your site, and make sure the information they have is correct and up to date, so that their users might just click on the link!

Facebook and Twitter: Having social media accounts will increase your searchability (users can find you more easily if you are present in more places) and ranking (not least because you will be creating more links to your actual website..). They are also, of course, useful in themselves.

Use CSS!! As discussed, make sure your Cascading Style Sheets and in-page styles are tip top using the W3C checker, to increase the chances of perfect display in all browsers. Also, where possible, use CSS to reduce the amount of code search engines need to read.
Keep your formatting in a separate document, in other words. Learn more – lots of simple articles on this site. 

Search Ranking: OK – search for your site on Google (either by company name, products, services or other keywords that you know your customers use – I’m sure you have researched that by now) and see how high up it is listed. Anything past Page 1 may as well not be there, so you want to be on this first page for your main keywords. Silktide provides a Search Ranking score based on your defined keywords.

Google page rank is also cool, as it shows how “good” your website is in Google’s mind (if it had a mind). This is decided by hundreds of factors, some of which I have outlined here, many of which are mysterious to all.

Popularity Silktide also measures your overall “popularity”, using http://www.alexa.com/ stats. This shows how your page measures up to other websites… worth keeping an eye on.

Analytics This is the most important measuring tool, like, ever. Make sure you are tracking every single page of your website, monitoring results, and making changes to improve results. http://www.google.com/analytics/
Fairly easy to use and self-explanatory, although remember to exclude your own viewing of the site.
Go to the cute little Settings icon (like a wee nut for a bolt) once you have logged in, and click to Filters. You can then Exclude Traffic from your IP address.
Find out your IP address by going to http://www.whatismyip.com/
So much more to say on analytics but, basically, make sure you have it and you have the tracking code on every page 🙂

Anything else you think I should include here? Let me know 🙂

Perfect Websites 1

Phew. There seems to be so many things that can go wrong with a website, it’s starting to stress me out. As a beginner, I had to just tinker with my company website and see what worked, what didn’t, and why. This in-at-the-deep-end approach certainly has something to be said for it – at least we got things done, without months of training for me first – but I am coming round to the realisation that I had, and still have, little idea what I am doing. And that I may have damaged my website irreparably… whoops.

Today I ran the website through (a free trial of) SILKTIDE. This is truly excellent, I must say. It gives a full report on “how good” your website is – not just search engine ranking chat, or usability, but everything. It was certainly an eye-opener. So I thought I would blog about some of the things you really must consider, and how to find out more about them, in a do-as-I-say,-not-as-I-do style 🙂

A LOT of these things are covered in Silktide’s report, so definitely definitely try that first and work from there. They have help pages as well. But I am trying to condense some of it into a user-friendly Blog.. hope the nice people at Silktide don’t mind!

Let’s start with…
Usability. aka Will Web Users Love You?
It is crucial that people can USE (and want to use) your website for whatever it is intended for. So think to yourself – what is it intended for? Do I want to give people information? Make them contact me? Etc. If a customer cannot do what they want to do on your website, or access the information they require, they will go to a competitor. A lot of these points actually overlap with my second area, SEARCHABILITY, because search engines love websites that customers love to use. Simple.

Content: An easy starting point. Make sure your website is up-to-date and relevant, with appropriate information, and ensure there are no errors or omissions. It is possible to take a page offline while you work on it, so that users will not be confronted with a half-page of content. Silktide will score on “content” – quite simply, the number of pages with a substantial amount of text.

Headings and Alt Tags: If you are posting images – and you probably should be – remember to include ALT tags (this stands for “alternative text” and is the text that will be displayed if something is wrong and the image cannot be displayed – it is essential for images) and TITLE tags (this is the “title” of the image which will display usually when the mouse hovers over the image. Title tags can also be used on pretty much any element on your webpage, and can be used to squeeze more all-important keywords in – when relevant.) These are designed to aid people with difficulties, so do try to use them for what they are intended to be used for. The ALT tag should describe the image and the TITLE tag should be a suitable title and maybe short description.
Example:

<img src="http://www.website.com/folder/train.jpg" title="The F500 Train - Click for more details" alt="picture of the f500 Train, 2010" />

Links should also have TITLES so that people can see where the link will take them if they were to click on it.
Remember, using these attributes properly and effectively will increase your website’s usability for humans, and also its searchability for web spiders. Some more useful information on these attributes.

External and Internal Links Websites with broken links (both to external sites and to pages within your own web domain, such as the Menu) are useless to your visitors and to the search engines trying to rank your page. There are sites which will run your site through a wee checker, looking for links which go nowhere. Remember, this won’t point out links that you no longer *want* to direct people too, so don’t neglect a manual once-over. Google won’t love you if you link to rubbish websites, frankly.
Previously I have used Xenu to check for broken links, but for some reason this no longer works. Google “broken link checker” to find various options – I recently tried this one which was fine, and the free trial of Silktide should show you as well. Once you find them, do remember to actually fix them 🙂
As for internal links, Silktide says: “Pages which are linked to frequently and prominently are given higher weight in search engines, and are more likely to be visited by users. You should ensure that your most important marketing pages rank highly here, or reconsider your internal linking strategy.” Good point.

Contact Details: Sounds pretty obvious, but it’s amazing how many sites make it difficult to contact someone. Make sure your contact details are on every page, are easy to spot, and do work. Enquiry forms are good if you don’t want your email address publicised all over the place, but I personally hate them. Don’t ask for more information than you really really need if you do use a contact/enquiry form. Also, ensure you provide more than one way for people to contact you.

Speed: As most users will make up their mind about your website (i.e. whether they like it or not) within ten seconds, you would hope that they will actually *see* your site within that time. If the load speed is too lengthy, people will give up, and you would rather they didn’t do that. Find your website’s (or any website’s) load speed at this cute wee site. And it also gives you an idea of what a reasonable speed would be. So how do you get your pages to load more quickly? Image size is probably the greatest factor, as these take a while to download – especially if they haven’t been appropriately saved for web use.

Readability: Silktide analyses the content of your website and delivers a “reading age” – the rough age at which people would be able to read all of the words on the page! The ideal (because, presumably, this is the average reading age) is apparently 14, so if it returns an age higher than that, you should think about simplifying the language and reducing sentence length. People do find it harder to read on a computer… and it can be accessed by anyone. So don’t alienate potential customers by making your content super long and wordy (like this Blog, hmm.) Interesting wee article here.

Content Keywords: Silktide asks for a list of keywords from you when it checks your site, and reports a score based on how well “emphasised” those keywords are. It also guesses, from your page titles and other content, what other keywords you might have wished to emphasise, and then tells you whether you do or not. Very clever!
This is one of the key elements of Search Engine Optimisation – making sure that the search terms your customers use to access your sorts of products and services (what ARE the words and phrases they use? Are they the same as what you would use?) are mentioned in your website enough times to rank it highly in the search results. Basically. Without detracting from the readability of your content. Sounds straightforward, but it is harder than it seems. Tips include: using Google Keywords to find out what people are searching for, trying out terms on Google (and other search engines – but Google is used most by far), including relevant search terms within alt and title tags, as well as within your metadata (see below.)

Link States: Your stylesheet should include formatting for various link states – it should be clear, for example, that a link is indeed a clickable link (different colour, underline, perhaps even bold), then a different format for when it *has* been clicked. Silktide also suggests a different format for hovered-over links and also focused links – this applies particularly to users with access problems, who may only have a keyboard to “focus” on the link.
These can be coded in the following way:

a:hover { text-decoration: none; }

a:visited { color: #808; }

a:focus, a:active { color: #B00; }

Spelling: Again, fairly obvious, but do check your content is all spelt correctly. Sadly my Silktide score for spelling was poor, but they had included every industry term and proper noun in the test, so I do know deep down that my spelling is fine. Shouldn’t make too much difference in terms of ranking, unless you are misspelling your keywords!

Image Usage: As discussed, do make use of images but make sure you are using them wisely and they are not taking up unnecessary space and download time. Make sure they are good quality but web-friendly, accessible (with alt tags) and Silktide recommends defining sizes for all images. Sizing is a whole Blog post in itself, once I work out what the best practice is for making websites work on all browsers, screens, devices, resolutions etc but still stay in the correct location!

Social interest: Silktide gives a score for “social interest”, that is, how frequently pages on your website have been shared on Facebook and Twitter (since these are the most popular social networking sites.) This is a measure of how much people – literally! – “LIKE” your website/pages within it. Don’t worry about this too much, as not every business or project requires social media attention; it might not be appropriate.
You can make it easy for people to Tweet a link to your page or to Like you on Facebook by having these features installed directly on to your page. The code (get it here) will look something like this for a Facebook LIKE button (the href doesn’t have to be a Facebook page…):

<div id="fb-root">
</div>
<span style="font-size: 14px; line-height: 20px">Like us on Facebook<br />
</span>
<script src="http://connect.facebook.net/en_US/blahblahblahblah">
</script>
<fb:like href="http://www.facebook.com/yourfacebookpage" send="false" layout="button_count" width="150" show_faces="false" colorscheme="dark"font="arial"></fb:like><br />

And this (more straightforward) for Twitter:

<p>Tweet This Site<br /><a href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal" data-via="Username">Tweet This</a></p>
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>

 

Visual interest: Users need to be attracted by your homepage, and also by the other pages on your site. Silktide gives a score on “visual interest” based on how different each of the pages on your website are. This is a subjective element, it can’t really be measured by a site like Silktide, and a consistent look and feel is usually advocated by web design types. So just make sure it is pretty and set out well, with matching colours, readable font, and so on, but retaining useability and an obvious layout.

Printability: If there is information on your website that your users may want to print – this may not apply to every page – then consider the printability. Things like graphics and colours are great if a page is just being viewed online, but if printing is desired then an alternative stylesheet should be used.
Silktide shows how this might be done in a webpage:

“You can implement print styles in many ways, including attaching a specific stylesheet:
<link href="print.css" rel="stylesheet" type="text/css" media="print" />
Or use the @import at-rule inside a stylesheet:
@import url("print.css") print;
Or use the @media at-rule inside your stylesheet:
@media print {

… styles go here …

}
It isn’t enough to just define styles however. SiteBeam must detect that the styles which have been defined for print are actually being used. An empty stylesheet, or one that doesn’t affect the page will not affect this score.”

So what WOULD the stylesheet for a printable page require? Check out this handy guide!

Sitemap/Site Navigation: Make sure people can navigate your website: ask someone who hasn’t seen the website before to click around and let you know how user-friendly the menu bars etc. were. Analytics also has a feature allowing you to see where people click to the most. A website should have a sitemap on it somewhere as a fail-safe: if users find themselves in a confuddling mess of links and menus, they need to be able to see a very clear map of where on earth they can go or have been. It will look like this when they click on it (all of these would be links to the relevant page):

• Home
• About Us
• Products
  • Product 1
  • Product 2
  • Product 3
• Services 
  • Service A
  • Service B
  • Service C
• Testimonials
• Contact Us
  • How to get here

Test all browsers/devices: Your website and pages in it will look different depending on which browsers you view it in, which devices you use and the screen resolution. It is worth testing your website to make sure it looks how you want it to look on each of these – and your users can see what they need to see. If you have Google analytics installed then it should provide data on the most common ways your users are accessing and viewing your site.

Above the Fold: Quick tip – have all the reallllly important stuff at the top of your webpage, because users rarely scroll past the “fold” (bottom of the screen.) Again, bear in mind different screens/browsers/devices will cut off the page at different points.

In the NEXT BLOG: We move from user-friendly web design tips to Search-Engine-Friendly web development tips!

Facebook Landing Pages

I am not trained in web design, web development or even IT. So maybe I shouldn’t be blogging about how to create a Facebook landing page, or update a website, or switch from using tables. But:
1. A lot of readers might also be new to this web design shizzle, and might welcome a beginners-style approach/voice.
2. I do try. I work with HTML every day and think it is the sort of thing that you can teach yourself (even if I am not yet fully qualified) and
3. There are so many useful resources online that I want to share with you that make the process a bit easier, even for total novices.

Facebook Landing Pages

This isn’t really where I should start, of course, but this is what I did today.

Basically, if you have a Facebook business page, you can sneakily alter it to make users “land” on a page that YOU can design. See, for example, this Facebook page for Pepsi.

As a Facebook-webpage-designer, you essentially have some white space to play with. All you have to do is add a new App to your page called “Static FBML” (NB. FBML is also the Facebook equivalent of HTML – Facebook Markup Language.) Find the App here. Once you have added it or liked it (as I now have the app I cannot tell how I originally got it – d’oh!) you can go to “Edit Page” –> “Apps” and it should be listed there. Hit “Go to Application” and you will see you can add a title and content. Now, I really don’t know much about what exact kind of code this content box will take – it does take some HTML as well as FBML – but I do know that one can certainly add an image using the following code:

<img src="typethewebaddresshere" title="imagetitle">

You can put <center> </center> round this to make sure it is nicely in the middle.

You can use a host site to upload images to, such as Image Shack, or better still upload them to your business website. Images should be 520px in width and whatever height you want – but remember to keep anything important “above the fold” (people don’t tend to scroll down very often.)

Here is the first simple one I did for my company:

 

What you then have to do is make sure that the FBML tab – which by now you will have renamed to something like “Welcome to My Company” (with your company name… obviously) – is the one people see first when they click to your company Facebook. Simply go back into “Edit Page” (I’m assuming you came out of the editor to view the glory of your new Welcome image…) and change the settings under “Manage Permissions” -> “Default Landing Tab”. Job done!

The next step I took today was to turn my landing page into something more dynamic, with clickable links. One way to do this is to create a Client-Side Image Map – something I do actually know how to do with HTML, but this usual way of producing code didn’t seem to work on Facebook.

I created this image on Photoshop (it mirrors our business website):

And then I had to create code to make all of the supposed links on this image (the menu words) clickable. (You can check it out for real at www.facebook.com/HandsOnGlasgow – let me know your thoughts!)

So I got advice from this page: http://illuminea.com/social-media/image-map-in-fbml-tab-facebook/ which told me to use an Image Map creator. As I said, normally I would create my own image map code by obtaining the co-ordinates of the areas I need to be clickable –  use an image editor like Photoshop which allows you to view the coordinates at any point in an image – and using the following code:

<MAP NAME="kirsty_map">

<AREA SHAPE=”rect” alt=”Something” title=”Something “coords=”157,76,129,130” (the rectangle coordinates work as: top left corner, x and y, and bottom right corner, x and y) href="http://www.website.com/page1.html">

<AREA SHAPE=”poly” alt=”Something Else” title=”Something Else” coords=”125, 122, 103, 150, 217, 208, 240, 169″ (for a polygon, you need the x and y coordinates of every point and the interweb cleverly joins the dots) href="http://www.website.com/page2.html">

<AREA SHAPE=”circ” title=”One More Thing” alt=”One More Thing” coords=”97,157,23″ (for a circle, you need the centre point x and y, then the radius in pixels as well) href="http://www.website.com/page3.html">

</MAP>
<IMG SRC=”http://www.website.com/siteimages/image.jpg&#8221; USEMAP=”kirsty_map”>

Your “title” is text is displayed when hovering over the clickable – and “href” is the hyperlink reference to the webpage you want to link to.

However, as this didn’t seem to work, I used the image map creator which automatically creates the CSS Code required for a Facebook Landing Page. What I chose to do was copy and paste the automatically generated code (which I created for just one link) and then I repeated it throughout my FBML Static landing page.

This method uses DIV code instead of the usual Image Map coding I indicated above. You can just use the automatic image map code creator as it is, but if you want to play about with it yourself – or you want to do a fair quantity of links – you can try my copy & paste method. (Also, note that it pastes text below your image.)

You need to start with the code that will insert your image, as follows:

<div style="display:block; width:520px; height:571px; background:url(http://www.hands-on-uk.com/siteimages/fblanding2.jpg)[enter your own URL of course, and dimensions]; position:relative; margin:2px auto 2px auto;">

This is how the code for each link can be inputted, for example:

<div><a style="left:16px; top:213px; background:transparent; display:block; width:112px; height:0; padding-top:45px; overflow:hidden; position:absolute;" title="About Us" href="http://www.hands-on-uk.com/aboutus.html"></a></div>

In this case, the “left” refers to how many pixels from the left side of the image, the “top” of course refers to how far from the top of the page it is. Then the width is how wide you want the clickable area to be. Finally, the height of your clickable area is determined by “padding-top” distance. You should know this information using the same method indicated above. Add title and link reference as before. Repeat as desired! I had to do about twenty but it was worth it. Let me know how you get on!

(PS To do a blog like this with code printed in the body of the blog, use <code>... </code> round the text… and also take the advice of this chap: http://www.kavoir.com/2009/08/how-to-display-html-code-on-a-web-page.html )
//

The Facebook Timeline

Dun dun DUNNNN!! As of VERY SOON, everybody on Facebook (that’s people, not businesses/fan pages) will have to deal with change. The new Facebook timeline, which has been around for a while as an optional interface, will become the compulsory new look. It basically outlines your life in reverse chronological order, based of course on what you chose to put on Facebook and when, and looks like a neat technological scrapbook. While some are hating on this (slightly controversial, in terms of privacy) timeline-of-your-life concept, many (like me) are embracing the chance to play around with it. (And it isn’t that bad.)

(Clearly, as this is not yet the format for business pages, this is slightly off-topic in terms of marketing/communications unless you are a sole-trader using your personal page. However, it is not remotely unlikely that the same format will eventually be rolled out for all types of Faceyb page.) It is already being used for certain campaigns, such as this anti-drug campaign.

In terms of fun and design, the main new feature is that of the Cover Photo. This goes alongside your profile photo as shown:

Now Mr Zuckerberg hasn’t been particularly creative here. There are plenty of cool ways to make your profile photo and cover photo complement each other, interact with each other, and make you look like a right whizz.

So, for some inspiration, check out these blogs – creative examples at  http://www.hongkiat.com/blog/creative-facebook-timeline-covers/ and http://www.socialmediaexaminer.com/16-creative-ways-to-create-your-facebook-timeline-cover-photo/.

My favourites are:

(I did mine a bit like that one above, but not as good!)

How to do it?? Hmmm, well you could download beautiful ones, such as at Fookcover. Or use some web program to come up with something cool – Mashable has rated the best ways to do it. Or try yourself – using Photoshop or something like that…

What you might want to bear in mind:
* The banner-style cover photo is 851 x 315 pixels. Your profile photo, once they add the wee white border, is 315 x 315.
* You can choose or make an image larger than that and it will automatically shrink to that size when uploaded.
* If it is too large, you can drag it up and down to decide where it goes.
* The easiest way to work out where your profile picture fits into all of this may be to take a screen shot of a Facebook page and work from there.
* There are templates you can work with for Photoshop… but you are too smart for that, right?!