Six new muppet like characters were created in collaboration with the Jim Henson company using the Henson Digital Puppet Studio to celebrate Jim Henson’s 75th Birthday (24/09/2011). These six characters were modelled to represent letters and colours of the google logo and according to the video posted by the Henson Company on youtube the idea was to allow the user to become a puppeteer and use their imaginations.

Plus there are a lot of great Easter eggs to discover while playing with these adorable puppet characters, but be quick as its only available for 36 hours.

Update: Google has now removed the Muppet Doodle but you can still have a play with it here

There are so many reasons why creative block occurs, such as looming deadlines, a half written brief, a client who can’t make up their mind, being overworked, or just simply having an off day. It is often a feeling of total helplessness and when doubt creeps in, it can feel like the creative block may never end. So hopefully some of the suggestions below can help in getting those creative thoughts flowing again.

Don’t beat yourself up

A great design doesn’t always happen at a snap of your fingers, some of the nicest designs that I have created have been a struggle to get to. One thing that won’t help in freeing up your creativity is beating yourself up over the fact that you are having a hard time coming up with something, it will make it a lot worse. So relax and try to push ahead without stressing and without giving yourself a hard time.

Reread the brief and make notes as you go

While this may seem like an obvious suggestion it can often be over looked, reading through the brief and the notes that have been made while making new notes can help with reassessing a project and also the goals that need to be achieved with the final design.

Doodle

I have always found that sketching takes my mind off the project as a whole and frees me up to be a bit more creative than I would be if I was staring at a monitor. No one needs to see these sketches and it doesn’t matter how messy they are, the idea is simply to get any ideas no matter how small onto paper in hopes that it sparks the creativity that is needed. The benefits of doodling are that you aren’t restricted by a piece of software, things don’t need to be perfect and ideas can be scribbled down a lot quicker than on a computer.

Look at the competitions sites

Unless the design is for a 100% unique idea there is always going to be competition with already established websites. Going onto these sites and not only writing down what does and doesn’t, but also sketching ideas could help in getting the brain back into the creativity gear.

Get away from the computer

Looking at that blank page that has been set up in a graphics editor or an empty page in a browser won’t help and can be counter productive. So a simple way to unwind is to look for inspiration away from the computer, go for a walk, look at a magazine, read a book, watch a film or anything that can take you away from the computer for an hour or two. I know when you have a deadline that the last thing on your mind would be to stop working. But if you are getting nowhere a couple of hours way from the problem could be the solution, as you will return ready to try again with a fresh prospective and be a little less stressed.

Be Colourful

Colours are often a great way to inspire a design due to the strong emotions they can provoke. Visiting a site dedicated to displaying colours schemes could help in creating that all important colour palette which could lead to creating an amazing concept.

Look for some new fonts

Much like with colours sometimes a nice new font can help get that creative spark back and inspire the look for a site.

Listen to some music

Music doesn’t just have to be there as background noise, it can be an amazing motivator. Although it can also be a problem as well, especially if you listen to the same playlist every time you work. So if you are having issues with creativity, try changing the music that you are listening to something that you may not normally listen to, maybe even selecting a genre that fits the style of project you are working on.

Talk to others

When you work with other it is easy to get up and see what others are doing and maybe talk about the problems to get a fresh opinion. If you work by yourself that isn’t something that is always possible, so a good alternative is to join an online community, as not only can you ask questions and talk to other creative people within the same industry. So it is a great way to connect with other creative minds in your industry and share ideas, tips and advice.

Start a different project

If you have other clients projects then move your workload around a bit and start one work on a different project. While it may seems like you are pushing the problem away and neglecting the client, you really aren’t doing yourself or the client any favours by staying stuck in a rut. Moving onto a different project will mean that your work is still getting done, but also the troublesome project will still be in your mind and you could unexpectedly get inspiration for it.

Learn something new

The world of design and development is always moving and because of this there is always something new to learn, be it on a coding side or learning a new trick in your preferred graphics editor. So if you don’t have any different projects to get your teeth sunk into but still want to be creative then try learning something new and enhancing your own skill set.

Personal Projects

Another way to take you away from the problem project for a little while is to work on a personal project, like learning something new having your own pet project can keep you creative and let you do something a bit more enjoyable

Relax and Sleep On it

As I said above, sitting at a computer and getting nowhere is counter productive, sometimes the best advice is to give it a rest for the day, relax and sleep on it, coming back to the work the next day refreshed and ready to create something amazing.

Smash your Creative Block

The image used at for this article is thanks to a great photoshop tutorial over at Creative Overflow. So to smash your own creative block why not try the tutorial for yourself:
smashing your-creative block photoshop tutorial

How to set up a print stylesheet

A print stylesheet works pretty much the same way as a normal screen stylesheet. The major difference being that it will only be used when the page is being printed.

To include a print stylesheet onto a page use something like this in the head of your html:

 <link rel="stylesheet" href="print.css" type="text/css" media="print" /> 

You can call the css file anything that you want, the important part is that you tell it that the media the stylesheet is for is print (media=”print”)

An important point to make about a print stylesheet is that you don’t need to style all of your elements, just a few its mainly about removing all the unwanted and useless elements of your site that don’t actually need to be printed.

Styling a Print Stylesheet

There are no standards or rules when it comes to creating a stylesheet for print, but there are some common-sense things to take into account.

Default styling

Browsers have their own default styling and normally it is pretty good when it comes to displaying things like spacing and indentations, so a good rule to follow is to test how the page prints before doing a lot of custom styling.

Keep the sites identity

Keeping a sense of the sites identity when it is printed is a nice touch and helps those reading the document remember where it came from.

Having the logo on the document is a great way to keep the identity, sometimes it is worth creating a print version of the logo, especially if it is a light coloured logo that might not print well.

Resets backgrounds

While most browsers will remove background colours and images that are applied through css some don’t. So to play it safe reset the background colour to white and remove any background images.

Example of use:

 body {
	background-image:none;
    background: white;
} 

Display:none is your friend

Remove items that aren’t needed or are quite useless when printed. Things like navigational menus, side bars, comment boxes, search boxes, and adverts they are all useful on screen but just a waste of ink when printed.

Example of use:

#nav, #sidebar, #search, .printnone {
	display:none;
	}

Text colour

Because a lot of browsers remove any background colours and images that are applied through css a big problem can be that text that is a light colour won’t be easy to read on a white background. So to play it safe set all your text colours to something that will easily be read on white paper.

Styling text

Some will say that when creating a print stylesheet to use a serif font as research has shown that they are a bit easier to read, however if you have a site that uses only san-serif fonts it might be better to use an easy to read san-serif to keep consistency and also not confuse those who expect the site to print out in the same font that is used on site.

pt not px or em or %

If you feel the need to resize the default text sizes then remember to set them using pt instead or px, em, % ect.

Example of use:

 p {
	font-size:10pt
	}

Content area

While most browsers will do this automatically it is always best to be on the safe side and expand the content areas so that they span across the majority of paper.

Example of use:

#content {
	width: 100%;
    }

Remove columns

While columns can look great on a website they don’t really work that well printed, especially if a narrow column has a lot of text in it, as it will mean that when printed something that should only take up half a page takes up 3 or 4.

Reset floats, positioning and overflows

Some browsers have issues with floats, position:absolute and overflow:hidden and will end up chopping off content. So to avoid this it is worth setting floats to none, positioning to static and overflows to visible

Example of use:

#content {
	overflow:visible;
    float:none;
    position:static;
	}

Display URLs

On screen when a link is displayed a user clicks on it and goes to the referring page, in print a reader could press where the link is but nothing will happen, as the paper isn’t magically going to display the referenced site. A useful bit of css that can be added into the print stylesheet will include the links url as well, although it should be noted that this doesn’t work in IE 7 or below:

a:after {  content: " (" attr(href) ") ";  }

which will print like this
This is a link (http://webdesignpond.co.uk/a_link_here)

Footnotes

While the above way or displaying urls is useful, if the printed document has a lot of urls it can look messy, and also if the majority of users to the site use IE it is a bit useless anyway. So another option is to create footnotes at the bottom of the printed document that displays all the referenced urls, a very good way of doing this is shown on A List Apart – Improving Link Display for Print. As well as it placing reference links as footnotes it also adds the reference number next to the link within the document.

Page breaks

It is also possible within a print stylesheet to tell it to print something on another page, this could be useful for large article where creating manageable sections will help the user, or for separating things that some might want to print while others won’t. For example this blog uses a page break to separate the content from the comments so that the user can decide if they want to print the comments or not.

Example of use

#comments {page-break-before: always;}

!important

While the !important declaration gets some bad publicity it can still useful within a print document. While it shouldn’t be used for changing font colours, sizes or their styles as it could interfere with the users own print settings, it could be used to make sure that other stylesheets don’t take priority with things such as displaying elements you want hidden or stopping making them float when you have told them not to.

Other Resources:

Five Simple Steps to Typesetting on the web: Printing the web
css-discuss Print Stylesheets
CSS Design: Going to Print

wysiwyg / drag and drop

These tools have been around for a very long time, I remember my very first experience of creating a website being a drag and drop editor by Homepages back in 1998. All I had to do was drag images and text boxes to where I wanted them on the page and it would place them there. It wasn’t till a few weeks later that I decided to look at all the gibberish code that actually makes the website work, up until that point making a website to me was easy because it only took a few seconds in my Homepages editor.

Now if I hadn’t taken a real interest in web design back then, I wouldn’t of looked into how websites really worked and I would still be under the impression that a website takes two seconds to put together using a wysiwyg editor. With this being the case it is easy for me to see why some people out there might think they are paying simply for a professional designer to create nice looking graphics and then spending a few seconds making it into a website.

Create Your Own Site Sites

These sites are nothing new, pay so much a month, choose a domain name, select a template, add your images, add your text and voilà a website. Hardly any effort goes into creating a site this way and for very little cost to the person using them, so it is easy to see why anyone who has used one of these in the past could think that they are hiring someone to simply make some new graphics and then going through the same process that they just have.

The industry as a whole is at fault

Ok so those two examples above show how someone who doesn’t know about web design could quickly build a site themselves. While they do show how some could take a web designers role for granted lets take this one step further…lets look at how the web design industry itself easily causes the average internet user some confusion.

Bidding sites

Bidding sites are where designers try to undercut other designers prices in hopes of getting the job. Often when I look at these types of sites I think to myself how is it possible for anyone to create an all singing all dancing e-commerce site for £150. But this does happen and anyone who stumbles onto these sites with very little knowledge of the processes involved will think that the going rate for an e-commerce site is £150.

Spec work

A little like the bidding sites, only this time it is try before your buy. Spec work is best defined as producing something for a potential client with no guarantee that you work will be chosen or paid for. Designers battle against each other displaying their designs in hopes that they will be chosen and paid for the work that they have done.

The logic in this could be seen as, if designers are willing to do work with no guarantee of getting paid why wouldn’t they design something for next to nothing if they are actually guaranteed some money.

Free/ super cheap mass-used templates

I will start this one off by saying I really have no problem at all with templates, they can be useful and they are a great way for designers starting out to create something for their portfolio that could then benefit someone else as well. However many times when I have been contacted to do a site they expect that a unique design should only cost a little bit more than one of these cheap templates. Its not until I explain about the differences between a template and the processes involved in creating a unique site do they understand why it will cost a lot more money for something custom built.

Students/ just starting out

Working your way up a ladder in your chosen profession isn’t anything new, neither is making a little bit of cash while going through school/college/uni. The problem here is that to get work normally means undercut prices, this leads to those looking around for a designer to think “well if John the freelancer is offering a full e-commerce website for £400 maybe I can shop around and get it cheaper”.

Now I’m not saying that there is anything wrong with charging less when starting out, as lets face it no matter what job you’re in you start out on a low wage and work your way up to more money with the experience you have gained.

If you don’t ask you will never know

I think the above header speaks for itself :p

It doesn’t happen in other professions!!

This is a statement I hear a lot from other designers who are fed up with being undervalued by people who ask for a cheap site. While it is true that you wouldn’t ask someone in certain professions to do the work for free, you might haggle over how much the price is to try and get a better deal and save yourself a bit of money.

In closing

I guess what I am trying to say with this article is simply don’t take it to heart and get worked up over someone who asks for a site to be created for next to nothing. The Internet is global and different countries have different cost of living making it easier for them to charge less, so to someone with limited knowledge in this area this could look like the going rate for a site. Plus if other designers are willing to bid next to nothing to try and get a project or even design the site before even getting the job, it is to be expected that some will think that all designers do this. We really cannot expect everyone to know everything about how to build a website and as such we cannot expect them to understand how much time actually goes into building a custom website.

IE6 is one of those thorns in a web coders side, it rarely plays nice and it does seem like it would be easier to just throw in the towel and stop supporting it, as after all running away from a problem often makes it go away.

Dropping support of IE6 = People upgrading their browser.

Err no it won’t, if I go on to a site and it doesn’t work I don’t change what browser I am using just to see if I can view it correctly, I move onto a different site slightly annoyed that the developer didn’t cater to my needs as a user. So I don’t see why most people who use IE6 would be any different to me in that respect.

While informing people to upgrade is all well and good, stopping the support altogether isn’t a wise business strategy, as all this would do is drive people to a competitors site who could very well support the needs of IE6 users. Even Microsoft, has stated that while it wants people to stop using IE6 that it cannot force people to do so. This is why they have said that they are still going to keep support IE6 until 2014.

But Google, facebook and (insert a large company here)…

It has been well publicised recently that some big sites such as google and its subsidiary Youtube are going to phase out support for IE6. With this obviously comes the designers and developers that think that because Google are doing this that they should also stop support.

However the question that should be going around their minds is “can this site I am developing really afford to not support IE6?” As while big companies can afford to take such steps, smaller companies really can’t and it could be very damaging for them not to support a major browser.

It’s only 10% to 20%

One of the stupidest arguments that I have heard recently is that it is that on average only 10% to 20% of people browsing the net use IE6 and that is a such a small percentage compared to a couple of other browsers.

A problem with this is that the statistic is based on everyone and not the target for an individual site. So while 10%- 20% of overall users may use IE6, one site might get virtually none and another could get a lot of it. Take for example this site, looking at my stats show 0.8% of users over the past month viewed it in IE6, while a site I designed for a client had 72% of its visitors using IE6. So it really does vary from site to site, and can be a big variation, so unless there are stats to back up not supporting IE6 on a site, surely its better to be safe than risk a lot of visitors not being able to use the site.

Another issues is that even if every single website in the world did get 10% of its visitors using IE6, then that would still be 1 in every 10. Now as overall averages seem to be so important within this argument, the average conversion rate of a website is between 0.5 and 4% of users that visit a website. If a site isn’t supporting 10% of its visitors that mean potentially it is loosing 10% of its conversion rate as well, and with that being a low percentage to begin with can a site really afford to not support 10% of its user-base?

What is a browser?

For those that haven’t seen the what is a browser video on youtube it is well worth a bit of your time. While it is funny to watch it is sadly very true, a lot of people out there don’t actually know what a browser is. I have had many clients who state that they use google as their browser, while some do mean chrome the majority of them do mean the search engine. So its scary to think that some coders out there are taking on a new rule that they will only make a site work in IE6 if a client tells them to do so, if a client doesn’t know what a browsers is then how are they going to know to request their site work in one?

Don’t open that new window!!

Accessibility and usability is really important, for example, we shouldn’t open any links in new windows, it should always be left up to the user to decide as we should never ever tell them how to browse a site. Yet in the same breath it is perfectly fine for us to dictate to a user what browsers they shouldn’t be using…yup that makes perfect sense.

Graceful Degrade

Its true technology is advancing and its only natural that with these advancements the way websites look and function will develop and change too, but again that doesn’t mean that we should neglect people just because they haven’t upgraded.

So the site doesn’t look exactly the same in IE6 as it does in other browsers, the end user isn’t to know this, and they can’t really miss what they don’t know. So as long as it functions and the user can do what they need to on the site then that’s all that matters.

Rather than thinking about what has been taken away from the site in IE6 and how it isn’t how you vision the user’s experience, think of it more like rewarding those that have upgraded with the full experience of the site, while still allowing it to function for those that can’t upgrade or are non the wiser to what a browser is.

Get over yourself!

Here comes the analogy… IE6 is very much like my boiler, its old and newer, better and more efficient models are out there. Now I will be the first to admit that I don’t have a clue about boilers, mine warms water and heats my house so I’m happy as it works the way I think a boiler should work. When it came time to get it serviced last year a part needed to be replaced, the workman who came out even made a comment about how old it was. Then what he did shocked me, he replaced the part and then he left. I know how odd is that, he actually did what he had been paid to do, he didn’t refuse on the grounds that I needed to upgrade.

Ok really it didn’t shock me as in pretty much every other profession there are parts that people love and parts that they don’t. With web design and development, developing a site so that it functions in IE6 is one of those things that most don’t like as it requires a lot of extra effort and hacks…however, its part of the job and if it is a site someone is paying for they deserve to have a site that is fully functional in all major browser, not just the ones that play nice with a certain coding style.

Designing Without Content

This is the most important advice that will be given in this article, remember that a website is about the content and not the design. Even when you are designing a portfolio site you are designing it to show the content of the site and not just that sites design. So always know what is going to be on the page and fit the design around the content and not the content around the design.

Page Titles

“untitled document” probably one of the most common page titles out there, this is the standard title that a WYSIWYG editor will give, and one a lot of people seem to forget to change. This one meta tag can help you get people from a search engine to your site, so make it say something about the page, so that when they are scanning down the list of results it is easy for them to see what it on your site.

Organised File Structure

This is more for your piece of mind rather than a users, keeping your files well structured will help make updates and finding thing a lot easier. It may sound like an obvious thing not really worth a mention, but there have been many times I have taken over a project from another designer and they have had no file structure to the site what so ever.

Splash Pages

Be it flash or simply a logo with “click to enter” next to it, a splash page creates that extra step between the client and the information that they are after. Ask yourself what does this page actually add to the visitors experience, yes it may look nice but is it really a necessary step that needs to be taken on the site?

Horizontal and Vertical Scrolling

Scrolling is one of those things that is usually needed on a web page, but chose one or the other. Having both horizontal and vertical scroll bars on a site makes navigating a page more complex, and can make the usability of the page too awkward. So do your research and find out what the smallest screen resolution your target market uses then make sure that the site fits that size.

Design Consistency

All pages on your site should be recognisable as your site, keeping elements of your layout the same throughout a site will help the user know that they are still on the same site. If you change the layout drastically from page to page it could create confusion and cause the user to navigate away from your site all together.

Navigation

Navigation is key, without it the other pages on the site will be inaccessible. Remembering these key points will help make sure that a user will not get confused.

• Keep the main navigation in the same place
• Don’t use hover effects on anything that is not a link (with the exception of table cells)
• Underlining and colour changes used together within blocks of text symbolise a link, try to avoid using this style on non-links

Headings

Headings are important not just for SEO but also because they help break up various sections, two common mistakes often stem from heading tags.

1. Using a heading tag just because its default size is the right size for what you need. Headings are not for design elements they are structural, as such if you need to change text purely for design don’t use a heading tag, create a style to do it.
2. styling text instead of using a heading, <span> or <p>is not the same as using <h1>, if something is meant to be a heading then use a heading.

Text is text

The internet is text based so make sure your text is presented as text and not as an image. Images can’t be read by search engines or screen readers, so the usability of your site will be seriously damaged if you make your text as an image all in the name of design.

Too many breaks

<br /> <br />isn’t a good way to format text, be it a list or a paragraph, use the correct elements for whatever you are trying to do and it will make formatting the spacing between your text a lot easier.
Also let your text drop to the next line naturally rather than creating line breaks with a <br />. Different browsers have slightly different text formatting so what might flow naturally in one browser could look a mess in another.

Colour Contrast

Be sure that your colours have a high enough contrast from the background, this way you will know that it is legible to everyone and not just those with good eye site or their monitors calibrated correctly Check out the colour resource for a few useful contrast checking tools

Tables

No this isn’t a don’t use tables for layout rant, its a use tables for tables rants. When looking at code many times I have see people not using tables when they should just because they have been told not to use tables. Remember its not about never using tables it is about using the correct elements for the job, if you are showcasing tabular data don’t do it using divs do it using a table…that is what they are meant for.

Compression

Even in the age of high speed internet compression is still important, compressing your images not only means faster load times for those viewing your site but also less bandwidth used up on your server.

Overused Flash

Flash can help lift a design and create some nice graphical effects within a website, but just because you can use flash doesn’t mean that you should use it to create an entire website. The rule of thumb should be if you can do it in HTML then do it in HTML, flash is great for animation and creating something for a certain target, but if you are simply using it to build a site that could be done without flash then it doesn’t need to be used.
Also worth noting is if you decide to create a flash splash page make sure your skip button is in html, that way it is easier for those who have seen it or don’t wish to watch it again to skip ahead and those that don’t have flash player installed to access the content.

Auto Playing Sound and Video

Unless you have told your visitor that they are clicking onto a page which has a video or audio on it then don’t auto play. Let the user decide if they want to watch or listen to what ever. This includes background music, you may think that it enhances your site but let the viewer decide if it is going to make your site better for them.

Best Viewed In…

The majority of internet users don’t know what a browser is, so to them if your site doesn’t work in the browser they are using then they will go elsewhere. So always check that your site works in all popular browsers and stay away from the mentioning or even thinking about mentioning the words “best viewed in” on any site you create.

Easy to Scan

Break up large quantities of text and make the whole site easier to scan through, this will make the site more user friendly as it will be easier for visitors to find what they want.

Resizing the Users Window

Never ever ever resize the browser window without permission, the user might have their window set to a certain size for a reason, so resizing it without their permission is one way to annoy them. If your site would look better full screen then have a button that allows the user to make it full size this giving them the option to view the site how you think it is best viewed rather than forcing it on to them.

Registration Required

Ok some sections of a site require registration, but make sure this necessary before doing it, as you will find that more people will be less likely to register if they can’t access pages such as the home, about us and contact without registering.

Explain Your Site

Not everyone who ends up on a site will know what it is for, so make sure that a viewer will understand what your site is about within a few seconds of landing on it

Don’t Keep Secrets

Let your users know what they are opening if it isn’t a standard web page, things such as pdfs and word documents should be clearly labelled so as to not lead to any surprises when opened.

Avoid Pop-ups

The majority of browsers have a pop up blocker built in as it is, so chances are if you use a pop up then most people won’t see it anyway.

Avoid JavaScript

JavaScript can add some great effects to a site, however much like with flash only use it to enhance the viewers experience, if it can be done without JS than do it without it. One example that is very commonly misused is image link hovers, this can be done with CSS and doesn’t need the overly too much JS code.
Also make sure if you are using JS that the website is still usable when the JS is switched off.

CAPTCHA

The whole point of CAPTCHA is to stop bots from spamming your email, comments, registration…etc while still allowing humans to be able to get past it. If you require this form of protection on your site then please remember to make sure that the text is still readable.

Ads on Site

pop ups, pop unders, links within the main text, side banners, google ads, top banners, there are so many different types of advertising out there. What this doesn’t mean is that all of it needs to be used on one page. Be selective when choosing the type of advertising, do some research on the best type of advertising for the target market,and don’t swamp the visitor with too much. As even if you are trying to make money from a site, the site still needs to be usable and generate traffic.

Blogs

Blogs are a great way to create a ever changing website, they can help with getting return visitors and also with SEO. However a common mistake in having a blog is thinking that just installing the blogging platform helps the site, if a blog isn’t updated all the time it can do more harm to a site than good. As it can make the site look abandoned and could put visitors off using it.

Ask Permission

When someone registers with a site always ask their permission before signing them up to anything other than the site, things such as emailed promotional offers and newsletters should be agreed upon rather than just sent out.

Hit Counters

These are so late 90′s yet they still get used, if you want to know how many views a page has had use a stats tool such as google analytic to gather this information, instead of an ugly counter graphic.

<abbr>

This is uses to markup and describe an abbreviated phrase. The title attribute is useful to give the full name of the abbreviation.

Example of use:

<abbr title="HyperText Markup Language">HTML</abbr>

<acronym>

Used to markup and describe acronyms. The title attribute is useful in to give the full name of the acronym.

Example of use:

<acronym title="Disk Operating System">DOS</acronym>

Note: acromyn will not be a valid element in HTML5, as it is seen to cause confusion having two very similar tags. So if using HTML5 you should use the abbr tag for all all abbreviations and acronyms.

<address>

The address is used to display contact information for a document, this information can include the name, address, email, phone number. It shouldn’t be used for all contact information of a site, just the information for contacting the document owner.

Example of use:

<address>
Address: this random place, in an unknown village<br />
<a href="mailto:example@somerandomemail.co.uk">Email us</a>
</address>

<cite>

This is used to markup citations, such as titles of websites, book titles and magazines. Browsers will render the citation as italic text, however this can be manipulated through CSS.

Example of use:

<cite>The Principles of Beautiful Web Design by Jason Beaird</cite>

<code>

Used to demonstrate computer code, browsers display this as monospaced text by default, but this can be manipulated through CSS.

Example of use:

An example of a paragraph:
<code><p> this is a paragraph</p></code>

<dfn>

Used to introduce a term to the reader, by default browsers show this in italic, but this can be manipulated through CSS

Example of use:

<dfn>Definition</dfn>: The act of making clear and distinct.

<del> and <ins>

These two are used to show revisions to the content, be it to show something removed or added to it. The browser defaults settings are, <del> displaying with a strike through the text and <ins> is displayed underlined.

Example of use:

<p>I like<del>icecream</del> <ins>pizza</ins> </p>

<kbd>

Used to demonstrate keyboard inputs, such as telling someone which keys to press on their keyboard. By default browsers will display this as monospaced text, but it as always can be manipulated in CSS.

Example of use:

press <kbd>ctrl alt del</kbd> together

<q>

Used to define a short quote, if it is a long quote then blockquote should be used. What this tag will do is add quotation marks to the quote that has been defined while giving it the semantic value that simply placing ” ” around the quote would not.

Example of use:

<q>this is a short quotation</q>

The main purpose of any design is to communicate something to a target audience in the most effective way possible. Thats right, the whole point of your clients website is to provide the required information to the users and to turn those users into business for the company.

Knowing about the clients target market and crafting the content and design of the site to them is what will make a site successful. An all singing all dancing sexy site can look great, but if the users cannot navigate around it they will soon leave, making the design a failure and the client lose potential business.

So what the client needs from the site is for it to be tailored to the user, not to the designers or their own tastes.

A few tips to remember when designing

As some designers are in the mindset that it is all about how a design looks rather than what the site communicates, here are a few key points to consider during the design process:

Research is key

Understanding not only the clients business and what they need to place on the site, but also the area of business that they are in and what their competitors are doing is important to know. With strong research and evidence behind you designing the site should be easier, and also convincing the client of what they need rather than they want can be backed up with the facts and figures.

It’s not about the clients tastes

One of the hardest parts of design is trying to convince the client that their site doesn’t need to do all the things they like from other websites. Even though clients do know more about their company than you will, most find it hard to get away from what they like, compared to what their users will need. The research that you do will help show them that if they want a site that will bring in business that they will need to not think about their tastes, as after all it isn’t them who need to use the site… this is often easier said than done.

It’s also not about your portfolio

Even if you’re just starting out you cannot be selfish, you are not building these sites so that you have some good graphic design site examples within your portfolio. You are building them to serve a purpose and do a job. Remember design is subjective, so just because you don’t personally like how it looks, that doesn’t mean it isn’t a good design. Having done the research into the site, the design should reflect this research and as such it should be the best design solution for the site.

Finding a balance

Designing a site is really a balancing act, of trying to create a site that combines the clients ideas, with what the client requires and also your design knowledge, all to make the best site for your clients target audience.

With this rant I plan on looking at a few of the ways around these scripts, what it takes away from the user and a few alternative methods that could be used instead. Hopefully this will show that disabling the right click menu doesn’t help with content theft and that it does a site a lot of harm for no real reason at all.

There are ways around it

By disabling the right click menu within your site the impression that you are giving every user that visits the site is that you don’t trust any of them. Your intention might be to stop theft on your site, but really you are punishing the innocent while those that really want to take your content will simply find another way to get what they want. Here are just a few ways that they can easily get around this script:

It’s Javascript

The quickest of all the ways to get around the disable right click script is for JavaScript to be disabled from within the browser. This will make the script useless and all right clicking functionality is restored on your site.

Print-screen

If it is the images that the thief wants, the print-screen or screen-grab functions that are built into the OS will help with this. By simply pressing print screen, opening an image editor and copying they have your image.

File > Save As

Saving a page is easy; simply go to file and save as, this way the html and any images that are called within that page will be saved directly to the user’s computer ready for their use.

Copy and Paste

If it is the text that they are interested in, they can highlight the text and either use a keyboard shortcut or go to the edit menu in a browser to copy the text, this can then be pasted anywhere the user wishes to place it.

Temporary Internet Folder

Websites are downloaded onto the users computer and held within a temporary internet folder, this is done so that if the user comes back to the site or the images are used within a different page the load time can be quicker, this is known as a cache. Should the user know where these files are saved they can easily get the images, or any other files that download to their computer, they wish to have directly from this folder.

View Source Code

This method can be used for both text and images, simply use the browser’s keyboard shortcut or the menu at the top of it to view the pages source code, from there they can find the images location, or copy and paste the text they wish to use.

Download Entire Site

There are many tools on the internet that allow a user to download an entire site, so all your pages, images, scripts, videos can be quickly downloaded and used by anyone, regardless of you using a disable right click script or not.

Browser Compatibility

Lastly there is also the issue of browser compatibility, the large majority of these scripts only work on a couple of browsers, meaning that there is a good chance that even with the script enabled it might not work on the browser that the visitor is using.

Some of these might be stating the obvious, but the above were simply reminders that there are more ways then just the right click menu to steal content from a site and that some of them are just as easy to do as pressing the right mouse button.

What right click can be used for

Poor usability on a site will drive your visitors away. You may think that all you are doing by disabling right clicking is stopping those that want to steal from your site, but you’re also stopping a lot of functions that allow users to easily navigate through your site. So to stop the few, you are punishing the masses and making your site less user friendly. Here are a few examples of functions that can be carried out by right clicking on a site:

Open in New Window or Tab

This is something that is drilled into a lot of people, to open a link in a new window hover over the link, right click and open in new.

Go Back, Forward and Reload

Yes these are normally at the top of the browser within a menu, but some users like to use the right click menu for these function.

Book Mark The Page

A lot of browsers allow users to right click to bookmark a page, so by stopping them doing this you could of just lost yourself a valuable client, customer or visitor of your site.

Search this…

Some browsers have a function within the right click menu that allows users to highlight a section of your text and search for that term within a search engine. This is quite useful for quick searching of a topic that might be interesting to them, so that they can quickly preform a search based on your content.

Quoting

Not everyone who wants to copy your text wants to steal it, you may of written something interesting and to help back up their point they wish to quote something from your site and credit you for it. By disabling right click you may have just lost a valuable backlink and new traffic to your site.

The Alternatives

There are a few alternatives to disabling the right click menu, here are a few ideas:

Trust

Ok not the greatest, but trust that the majority of users will respect your site enough not to steal from it andyou will never fully be able to stop those that do, but punishing those that are simply visiting your site doesn’t seem like a great solution to the problem. Using such sites as copyscape will help you track down plagiarism and naming images uniquely could help you in searching for those that are using your images without permission.

Watermark images

Placing a visible watermark on an image can stop people from stealing them, and those that do will then be crediting you for your work so you could end up getting some more traffic.

Digital watermark

A digital watermark is a hidden watermark that embeds information within the image file itself. This work a little better than a visible watermark as it is not obvious at first glance, so won’t spoil the image. It may not stop someone from stealing the image, but it will make it easier to find and prove that it is yours.

Disable Right click on images only

If you still feel that disabling right click is the way to go then why not use a script that will just stop right click on an image, or one that will simply remove the save image option from within it. The down side to this is like with most of these scripts that disable the right mouse click, they only work on some browsers.

Don’t place it on the internet

Stopping people from stealing your work on the internet is a losing battle, the only true way to win is to not place it on the internet at all, although this is probably not really an option for most people. However hopefully this article has shown that adding these types of scripts will take away from the usability of your site, while not actually doing anything productive to stop those who want to use the content without permission, they are simply a false sense of security.

There are no links to get back on your site, it looks uninviting and as if you don’t care if a user is lost on your site. Most potential customers will simply look elsewhere rather than try and find a way onto your site. It is also likely that a few visitors will encounter this error while visiting your site, be it due to their mistake, yours or a third party and for some it could be the first page they ever see on your site. So why not use this to your advantage by creating your own page to help guide them back in the right direction and also make look as if it is part of your site.

What can help make a 404 page useful?

A well designed 404 page will not only benefit the visitor but you as well. So here are a few things that I think can help make a great 404 page:

Its all about the links

Remember the whole point of creating your own 404 page is to get lost visitors back on the right path, they won’t be able to do this without links back onto your site. So a link back to the homepage is a must and one to the sitemap if you have one. Another good option if it is possible isto place a way to search your site on the page, this way your visitors can search for what they were looking for without having to going to a different page first.

Be forgiving, it might not be their fault

There are many reasons why someone lands on a 404 page, it could be they were given the wrong address, you deleted the page or they mistyped it. So don’t blame them or make them feel guilty for being on the page, remember they could be your next customer, so get them back on the right track without implying that it is their fault.

Design to your site design

Its easy to forget with these pages are part of your site and to design something very random, but keeping the design similar to your site’s design is important. If the design looks different to your site’s design this could confuse users and make them think they have left your site rather than it being and error with the site. So even though it is fine to be creative with this page, try and keep design elements to make it easily recognisable as part of your site.

Keep the tone of your site

Much like the design, try and keep the tone of your error page the same as your site. By all means have fun with the page, just remember the target audience of the site.

Remove calls-to-action that don’t make sense

If you are using a template from your site to create your 404, remember to remove all the parts that make no sense to the page, for example links to social bookmark the page, rating systems or a comment section.

404…404…404?

Unless your site is geared towards those that will know what the error code means, you will need to explain what has happened and why they are on this page. Simply stating that it is a 404 page will mean nothing to most that land on this page.

Sell something

If you have an E-commerce site, why not try selling some of your products through this page, as it could be an excellent marketing strategy as well as getting the potential customer back on the right tack. If you decide to do this remember that they got to this page by accident, so you still need to tell them the page they were looking for isn’t there, rather than confusing them with items they probably didn’t search for.

Finally…Keep it simple

It is easy to get carried away, become too helpful, or write too much witty dialogue, so don’t overwhelm a user with too many options or an essay of an explanation. Keep it simple and get to the point so the user can get back to what they came to your site to do.