Category: Web Design

When we think of copyright we generally thing of DVD’s, music and books. We all know the issues and are well aware if we are doing anything we shouldn’t. With more and more media turning to digital it seems that it is becoming increasingly difficult to protect ownership of digital works.

With the seemingly endless increase in the number of websites and blogs out there, how does this affect them and how do you protect your hard work?

The short answer is that there is no 100% safe way to protect your websites copy or images. There are things you can do to hinder it but that won’t phase the most determined of ‘borrower’ so the best thing to do (if it is important to you) is to not publish it in the first place. However, if you decide to go ahead (and why souldn’t you!), there are a few steps you can take to at least make things a little more difficult.

TEXT

In terms of text there is really nothing you can do to protect your content safely. Sure you could put your text in images, PDF or Flash BUT it’s not very user friendly and it’s not what you could call search engine friendly either!

You can try leaving a copyright notice on the page. If you’re running WordPress then you can use a plugin like Simple Feed Copyright but you are relying on the ‘thief’ actually acknowledging it.

Checking every now and again using a tool such as Copyscape lets you see if one of your posts or pages has been copied. If it has, then your option is to approach the company and ask for them to remove it.

IMAGES

No right click : You can add a no right click to your pages to stop someone from saving your image.

A blank pixel : It is possible to cover your images with a single repeating, transparent pixel layer. Then, when someone right clicks to copy your image they will be saving a single pixel.

These techniques have their downfalls, such as only working if Javascript is turned on and also they do not stop someone from saving your webpage and grabbing the image from the saved files.

Disallow : You can also use your robots.txt to disallow images from appearing in search engines by using

User-Agent: *
Disallow: /images/

Watermarking : You can also add a layer of text through your image with a copyright notice. This will degregate the actual look of the image on your website so is far from ideal.

Being an Accessible Web Design company and concerned with all aspect of providing a good experience for people with any visionary impairment or disability, I had my first ever eye test the other week!

Working through some website builds and ticking off all of the accessibility elements like text size, alternative views and image replacement I decided that I should put myself (and Lynne) through an eye test, so I duly signed us up!

I had pretty spot on vision and no need for glasses and Lynne had a similar outcome with a very slight ‘stigmatism’ in her left eye, but still no need for glasses. The actual process itself was fun though, with your face in a contraption and then having to read different sized text and what not and give an idea of visual clarity back to the optician.

There was a colour test involved where I was to read out text behind different colours, this is exactly the same when people may be having difficulty reading text on your website because you have decided to have a red background with green text, for example – a very error basic and obvious ‘no-no’! Also when reading the tiny text, I was rhyming off with great accomplishment, each individual letter. Now, that was fine for me with perfect vision (although I was still having to squint to see it) but imagine someone with a lesser eyesight having to do the same on your website, they’d end up leaving in an internet induced huff!

Could this be the way forward for website owners who fail to understand the requirement for accessibility in web design? It can quite easily occur that the owner of the website is so concerned about getting their company message/salespath correct that they neglect to think about these elements.

I vote we send any of our clients who aren’t ‘sold’ on accessibility for an eye test in future because then it is easier to put yourself in the shoes of someone with a visionary impairment (or other disability) and understand exactly what needs to be addressed when building your website. Putting yourself in your clients’ shoes for successful accessible website development.

Way back in March 2007 I sat down one evening and wrote an article entitled 10 Questions To Ask Your Prospective Web Designer. It was aimed at helping potential clients who were looking for a website but weren’t sure where to start or what to ask first. My recent post on finding blogging inspiration from old posts gave me the impetus to go back over my first posts.

The ’10 Questions’ post was a great success for me so I have decided to build on it and add another 10 questions that should be considered. So here goes:

1) Will my site site be built to professional standards?

All designers should now be building websites that validate to professional web standards. Put simply, this makes your site as ‘clean’ as possible to increase performance and cross-browser compatability. You can check a website site here.

2) Will my website follow accessibility guidelines?

By accessibility guidelines we  mean making your website as usable as possible to an many user groups as you can. In the words of W3C:

Following these guidelines will make content accessible to a wider range of people with disabilities, including blindness and low vision, deafness and hearing loss, learning disabilities, cognitive limitations, limited movement, speech disabilities, photosensitivity and combinations of these. Following these guidelines will also often make your Web content more usable to users in general.

3) Is my site a template? Will I see the design elsewhere?

While templates are not detrimental to the actual build of your website they can cheapen your site if there are loads of other sites with an identical design. Find out right at the start whether you are paying for a bespoke website design or a template.

4) Does the copyright lie with me or will I see the design elsewhere?

As with templates, you want to ensure that if you have paid for a bespoke design that that’s what you are getting and more importantly, that it isn’t going to be re-used. Also, find out whether you get a copy of the website when it’s signed off just in case you decide to go elsewhere at a later date.

5) Will my domain name be registered to me?

We came accross several companies last year that had difficulty moving their website to a new provider as their previous one had registered their domain name in the web companies name and not the clients. Although you can generally get round this (if you have your original order form and details of the name being bought on your behalf) it is still hassle that could be avoided. There is no need for the domain to be registered in anything BUT your name so don’t settle for anything less.

6) Do I need a support contract?

If you don’t have a support contract have a chat with your developer about whether you actually need one. With a small static site you may be happy to pay each time you need a small change but with a large, high-functionality website it is more than likely a necessary. Websites do go down occasionally (usually hosting) so if you have your own hosting and no one you can call on to help you out then a support contract could give you peace of mind.

7) Do I have a support contract?

Make sure you know exactly when the need for a support contract would kick in and whether you have one. Find out how long it lasts for and what isn’t covered.Remember, if you don’t see a mention of it in your contract then chances are you aren’t covered after sign off.

8 ) Will I be No.1 in Google?

Beware the company that promises this! We have written several posts that go into this in detail but for this post we’ll just stick to saying that NO ONE can promise this or guarantee it – no matter how much you pay!

9) Do you provide the content for the website?

The speed of the build depends on two things:

• the speed of the webdesign company in designing and building stage
• the speed of client feedback and content.

For SEO, content is king but for a designer content is a killer…if it isn’t received. Find out from the start what your commitments are and whether you can pay extra for a copywriter if you don’t have the time.

10) What else should I ask?

Ok, so this is a cheat but I wanted to hammer home the importance of some of the questions from my original article:

• Do I own the site and it’s copyright at the end? – Do not get in the situation where if you decide to change hosting after a year you suddenly discover you can’t because you don’t own the site.
• Do you have testimonials? – reasearch the company to within an inch of it’s life, bad reviews can be nothing more than a misunderstanding but if a company has several then it’s worth being cautious.

Above all, anything that you have confirmed like this, get it in writing before laying down a deposit.

If you run a blog you will know exactly what I am referring to when I say the phrase blog-block…it’s like writer’s block but with blogging. It happens to us all and can cause a lot of stress as the more you try the stronger the block becomes.

Blogging has come easily to PoLR these last few months, you could say we’ve been a lean, mean writing machine! But talking in the  office the other day I wondered out loud when this run of ideas would slow (as I know it will at some point).

Never one to miss out on a blog post, I have compiled a list of 5 inspirational ideas about what you can you do when you’re faced with the dreaded block.

1) Stop what you’re doing.

A tired mind is a blocked mind. Stop trying to force your blogging, put your computer to sleep and go do something else. Read a book, go for a walk, plan your next holiday…anything that takes your mind off the job. A 10 minute break does the power of good and when you do go back to the computer the words should flow.

2) Go Retro.

There is nothing worse than staring at a blank screen. Unless you’re and artist, in which case there’s nothing worse than a blank canvas – I could keep going with this one…Anyway, what we mean is once again closing your laptop and do some retro-writing. Grab a pen and paper (that’s the retro part) and a cuppa. Sit down, relax and start jotting down ideas as they come. As with art, a change in medium encourages you to think in a different way and with a different viewpoint.

3) Play some ‘Mallet’s Mallet’

As with point two, grab a pen and paper and start brainstorming. Start with a single word and write everything you can think of relating to it, in any haphazard manner. Don’t worry about forming an actual blog post, the aim of the game is purely to get ideas and phrases down to build on later. If a blogging idea becomes obvious at any point then go back to your comuter and get writing. Save the notes you have taken and go back to it later on – you never know what gems it might throw up later.

4) Brainstorm with your friends.

I have been known at the start of a night out to whip out a pen and paper and start quizzing my friends on Intenet issues. Do they know what X is? Are they fans of Y? You get the picture. They hate it but just remind them they are supporting a friend’s business 😉  Talking to people who don’t work in the world of web puts a whole new slant on things that we may assume is common knowledge. For example, until the other day I assumed EVERYONE knew what RSS was. Turns out they don’t (hence this blog post!).

5) An old ‘un but a good ‘un.

Go back in time and read over some of your first blog posts. Is there anything that wasn’t clear in your first attempt? Maybe a left comment could give you inspiration for a post? Maybe what you wrote is already outdated and needs a fresh slant? Maybe you’ve just changed your views from the first post? Don’t just re-word the initial post (where’s the imagination in that!) but try to think of another angle.

Word of warning when looking for inspiration though…

Although reading other people’s blogs is great for sparking off an idea, never and I repeat, NEVER copy other blogs posts or even structures. Not only will it be demoralising to you after a while but it will also be noticed eventually. Preserve your reputation and use your fabulous imagination! Hopefully these tips will help you do just that!

In the fifth and last part of our ‘forming a form’ series we have decided to show two forms that are in our opinion, well formed and easy to use. After all, what’s the point in us blogging about how to do it without showing some cracking examples!

The forms below are our examples of well developed forms. The one below from the Alliance and Leicester website is on our list because:

• It has clear formatting with text areas close enough to the labels that you don’t lose track of what text area goes with which label!
• It auto fills 5 out of 7 of the questions cutting down on time required to answer.
• On that note, you are only asked for the bare minimum of information and no identifying personal information.
• It has clear labels. For example, asking for ‘Mortgage Amount Required’ rather than just ‘Mortgage’ (where the user could just be forgiven for answering Yes or No!)
• There are help tips with every question to aid the user through all of the steps.
• It is formatted correctly so if you tab through the questions you go through the form correctly.
• The calculate button is above the ‘reset’! I’ve lost count of the times I have accidentally cleared a form because the ‘reset’ was first!

The form below is from delicious.com and gets our vote because:

• It clearly shows the user that stage of the form they are at.
• There are only three stage so less opportunity to exit the website.
• Clear and clean formatting and a nice and compact form.
• Appears to be asking for the minum amount of information possible and although all fields are ‘required’ they really ARE required for an account!
• There are clear instructions as to what type of password is acceptable.

The only negative point to this is the captcha, I often find these to be relatively illegible and often cause problems during sign ups. Mind you, they can be forgiven as you have to minimise the d*mn spammers somehow!

We’re nearing the end of our series of blog posts discussing various aspects of designing and building web forms. This penultimate post briefly deals with accessibility and validation because a good form is an accesible one and validation because, well, validation comes last!

So without further ado, lets get number four read and onto number five!

Accessibility

People with vision and motions disabilities tend to use their keyboard to navigate a website more than the mouse so your form must be able to handle this. For example, have you ever used the tab key while filling out a form and rather than going smoothly through it you jump from one field to one maybe three fields from where you want to be? This is caused by badly written code (missing or out of sync tabindex). Imagine if you couldn’t use the mouse and had to rely on the keyboard. Wouldn’t it be frustrating to be unable to get to the correct form field? How many times would you try before exiting the page/sale?

There are HTML tags that can aid the accessibility of a form by ensuring that it is written in as linear and legible  a way as possible (see below).

<fieldset>
<label accesskey="L" for="loginname">Login</label>
<input id="loginname" type="text" maxlength="255" value="Enter login" />
<label for="loginpassword">Password</label>
<input id="loginpassword" type="password" maxlength="8" value="" />
<input id="submitbutton" class="button" type="submit" value="Submit" />
</fieldset>

While we have only touched on the issue of accessibility we wanted to highlight that it is a consideration during your form creation process. Ignoring accessibility could be eliminating huge customer base. A great accessible form resource including code examples can be found on this web usability website.

Validation

Form validation can appear irritating to users at times but it’s there for everyone’s good! Imagine signing up to a newsletter and putting in a mis-formed email address such as me@hotmail.co. It would result in no newsletter appearing, an annoyed user and potentially a bad impression of the company.

Form validation really is a necessary evil (going so far as hindering spam form submits). I do think form validation should be kept to a minimum though. For example, let the user choose how they want to be contacted, don’t force them into leaving a phone number when you can initiate contact with an e-mail. Also, don’t insist on users leaving too much identifying personal information such as date of birth, name address etc all in the same form. It makes users very nervous when they have to leave enough personal information for you to apply for a mortgage in their name when all they want is a call back!

Clean validation is a must, highlighting the offending textarea lets the user quickly identify what they need to fix rather than scrolling through the form searching (see below)

Finally, make sure the validation works! I was trying to sign up to a site the other day and it just would not accept my postcode, no matter how I formed it, with and without spaces…nope, it just wasn’t accepting it, needless to say, I am not signed up to the website!

The third part of our form series is to do with the simplicity of the information you are requesting of the user. I read a great article the other day about the length of sentences on blogs. How keeping them keep them shorter than you would normally as this is easier reading on screen. It also mentioned the use of ‘flowery’ language in online writing and how it can takes longer to decipher (slowing the reader from getting to the point of the post). A similar theory can be applied to a forms field label.

By this I mean asking for information that is not specific enough. For example, using something as simple as ‘choose your username’ rather than ‘username’. This will tell the user that you are looking for new information rather than a username that they have had previously and forgotten.

Formatting? What formatting?

In the spirit of keeping the user informed and unconfused, think carefully about the formatting of the actual design. It is worth designing it to tie in with the look and feel or your website design purely for aesthetics and to help focus the users attention on a nicely formatted, welcoming form!

For usability and legibility, keep the form compact with just the right amount of white space. You don’t want the user seeing the field label at one side of the screen then having to use a ruler to determine which textfield corresponds on the other side! Do, however, keep a little padding between each question to separate one from the other.

It’s nice (and accessible) to separate your form into sections on the one page using tags such as this – <fieldset></fieldset>! It keeps information neatly contained in sections and in manageable chunks (see below).

In part one of our ‘forming a form’ series we talked about the hazards of asking for too much information and potentially putting users off. Part two is about the steps (or hoops) you may make a user go through before your user can complete the end goal of submitting the form.

For the purpose of this example, we will be referring to e-commerce websites but the same theory can be applied to the majority of online forms.

Too many stages

A known reason for abandoned carts on an e-commerce website can be attributed to (among other things), a long checkout process. Having the users go from one page to another to another just to complete a purchase. The checkout process should flow as smoothly and quickly as possible to hold the users interest (particularly if it is a spur of the moment purchase).

For every step your user is having to click through, you are presenting them with an opportunity to give up and abandon the purchase.

If you really do need several stages to a form then there are steps you can take to make the user more likely to stay the distance. As per the graphic below, display information at each stage to ensure the user knows how much has been completed and how much they still have to go.

In the case of e-commerce, it is generally possible to offer your users a one page checkout. This asks for all their details in one page and eliminates pages and pages of requested data. In turn, reducing the temptation to abandon the cart (and sale).

Too Much Information

Form abandonment can also be attributed to asking for too much information. Trimming down your forms to gather as little information as possible will help you eliminate excessive form stages. It will also give users confidence that you aren’t just gathering the data for future marketing (‘what’s your favourite colour?’ etc)

For example, in a newsletter signup where the aim is to ONLY send out a generic newsletter, what do you really need for your desired end result?

• Their email? Check.
• Their Name? Maybe.
• Their date of birth? Maybe if you send out birthday greetings…?
• Their contact numbers? Nope….
• and so it goes on.

At PoLR we send out one generic newsletter, no personalisation and definitely no birthday letters! Our aim is to JUST get you to sign up for information that may help you (see the top left of this page). The sample below makes me wonder why, just to get en e-mail newsletter, do they need all the other information. Incidentally, only the email is actually required but this is not stated anywhere in the form.

So, which e-mail newsletter form would you rather sign up to..?

Much has been written about children keeping safe online but what about adults or to be more specific, employed adults!?

I was reading an interesting article over at searchenginewatch.com about how Adults Outnumber Teens on Social Networks. It states that the percentage of adults with a social networking site has increased from 8% in 2005 to 35% in 2008. It also states that the main reason for a social networking profile for adults was for social activities rather than business.

Having just finished reading the blogging book ‘Naked Conversations’ one of the points made in the book was the importance of social networking sites and the potential it has to make or break a business’ profile. For example, say an employee went out, was a little ‘silly’ and got photographed and tagged in someone’s open Bebo profile ie for the world to see. This indiscretion would be visible for anyone to see who was researching your company or employees and maybe even more importantly for the employee, it could be seen by a potential employer!

While you can argue that anything done in leisure time is no one’s business but your own, do a quick Google search and you will find a load of reports of employees falling foul of an ill thought out social networking comment regardless of ‘freedom of speech’!

So how do you keep your profiles ‘clean’ and lower the risk of a social faux pas!

1) Keep your profiles closed
Make sure only the information you want to be publicly available actually is. In Facebook for example use the privacy settings correctly and you can make sure only the most basic of fact is publicly displayed.

2) Be wary of friends profiles that are open
Its all too easy to be caught out posting on someone else’s profile without realising they have opened their comments to the world. If you really want to have an electronic complaint keep it to an email rather than the comments section and you are at least minimising the risk of an accidental public whinge!

3) Loose lips sink ships
It goes without saying really but whatever you do, do not publish company sensitive information on your profile! Obvious as it may seem it’s still happened…

4) Be careful of groups
Be careful which groups you join. An employer or client finding you on the ‘I hate my job as a waitress and often spit in customers food’ may seem amusing but will more than likely land you in the Job Centre!

5) Keep control of your profile!
It is all too easy to have passwords remembered on your computer but remember that this makes it all too easy for someone to take over your profile for a ‘joke’ and post amusing profile updates and comments. At this point I should probably apologise to my Fiance for doing just that…or should I? He did leave his Bebo account open, some might say it was his own fault…

To join PoLR’s own Facebook group click up here >>

Browsing the Internet the other day, I was presented with two forms to complete all within 10 minutes of each other. While the first was pretty straight forward and to the point, the second had one aspect that really made me think twice about whether it was worth completing and whether I had the right criteria (more on that later).

The flip side of this though, is that it’s given me an idea for a series of articles on form creation (every cloud ‘n all that…)!

While forms are great for quickly gathering data (with little effort from the business requesting the information itself) there is a fine line between a form’s success and its abandonment. This article aims to briefly describe reasons for form abandonment and further articles (to be published soon) will describe them in more detail.

The main causes of a form to be abandoned before reaching the end goal can generally fall into the following categories:

• Too many steps and therefore more opportunities to leave
• Broken forms
• Asking for too much information
• Unclear steps and the user having to really think about what’s being asked

Another reason I would like to add to this list is; seemingly exclusive options (a relation of ‘Asking for too much information’)

By this I mean options presented to the user that can give a negative effect or feeling of bias (i.e. is it worth them taking the time to fill out the form?). In the example below is a form dropdown that I was presented with while signing up to a funding advice website. The form asked for details of my employment status and the highlighted option is ‘In Prison’. Now, this says two things to me, either they were trying very hard to be politically correct OR there is some kind of quota that needs filled and by not selecting ‘prison’ I’d be at a disadvantage.

I realise that there will have been a great deal of thought that went into the data capture for this form and I would guess that this was a vital statistic that they required. But, what we are trying to highlight is that any extra information requested is an additional thought process the user has to go through before completing the goal and hitting submit. In my case it resulted in taking a screen capture and creating a blog post (breaking up the flow somewhat!), hitting ‘submit’ came after!