As this is an issue we all constantly battle with, from our clients asking us how to do it to even ourselves trying to come up with the best copy for our sites I thought I’d let you know about it.

You can find the ebook and more info about it on Rockable Press website

OK, maybe not many. Maybe you still work in the Jurassic era and do all changes for your clients in the code. The majority of sites these days require some form of a CMS systems though. And that means their owners have full control over their content. Also, they now decide what goes where. Very often your expertise in that field is no longer required.

Web design has definitely changed and you can either cop on or extinct. Not a great prospect, eh? Two years ago you could have shown off how great you are by your knowledge of creating the sites structure, today the client knows better. And very often doesn’t want to listen to you.

Good news! There is something new though they need your help with.

Functionality. Content management is no longer a problem but how the site works is. And it’s often your call how that gallery works, how contact form processes the information or how product catalog indexes all items. It’s also your job now to communicate those ideas to clients in a clear and
understandable way.

Therefore from now on, ignore site maps. They are a massive waste of time. Focus your energy on functionality maps.

Here’s how to make one.

List all pages with a list of functionality beside each page. If necessary draw a quick step by step sketch of how certain functionality will work. Think of it as a functionality story board.

Help your client understand what you are suggesting to them. And remember, the main rule of functionality is that it has to be easy to operate and easy to understand for the visitor.

Last thing, consult your developer before you pass your functionality map to the client. These days you can develop practically any system with time and cost being the only things that may stand on the way.

And they very often do.

–> Something extra to think about: <–

- when was the last time you checked how your desired functionality works? Do you visit scripts producers sites and view demos of their systems? Do you ask your developers for advice on what are the best solutions for what you want to achieve? Or do you just play smart?

- which web development blogs are you subscribed to? Do you follow new technologies and issues with the existing ones?

In it I discuss some things that can help you understand better what you sell.

Link to the post: http://www.graphicdesignblog.co.uk/is-selling-websites-really-that-easy-6-steps-that-can-help-you-understanding-more-what-you-sell/

When it comes to the web the situation is somewhat, well, … strange.

You can clearly see the lack of baseline on many websites. And since they are generally multicolumn it is even more noticeable.

I asked few of my graphic designer friends would they use baseline on their web projects and their replies were quite surprising. Most of them didn’t realize that you can use baseline on the web. They thought it was one of those print design features that you can not recreate online.

It sounded as if it a baseline on the web was a myth. But it isn’t. You can easily base your next web project on it.

Have a look at our own site with baseline on.

So, how do you do it?
On a design level, the same way as with print. Set your baseline and base your design on it.

When it comes to coding there are few techniques that can help you with setting your type to baseline. I compiled 3+ great tutorials on how to do it.

1. Setting Web type to a baseline grid – Dev.Opera

2. Setting Web type to a baseline grid – AList Apart

3. Improve your web typography with baseline shift – For a beautiful web

3+. Not really a tutorial but a great and helpful tool. A Baseline CSS-framework on which you can base your layouts. It’s well worth trying it out.

Do you have any examples of your sites with baseline? Post them up in comments.

Nowadays the situation seems more complicated. The world and a workplace demand more and more and even the design profession hasn’t escaped that.

I recently met with a good number of my design friends and clients and most of them mentioned a slight discomfort they feel with the more demanding web work they are being asked to quote for. It’s one thing to price a simple website but it’s something completely different to imagine how much work is involved in a bigger web project like e-commerce for example.

What really struck my friends was the complexity of the work involved. It’s not just a layout and content placed on a page as one of them put it. There are way more things to consider even before you begin.

So in order to make things easier for them and many of you I decided to create a short series of tips for designing for e-commerce.

We start off today with a list of what you need to find out from your client before you even decide on the full scope of work for the project.

When you look closely at most average shops, at first glance they all seem to work the same. There is a product listing, detailed overview of a product and a checkout. And that seems to be it.

Well, in most cases it is. Although in order to know exactly what functionality you need to design for, you need to find out few things from your client:

1. Why do they want e-commerce site in the first place
As silly as this question sounds it actually makes sense. I guess in order to create a perfect shop for your client you need to know what are their reasons and most importantly their plans for the new shop.
Is it going to be selling few products only or will it grow and expand over time. This will certainly affect your designs so it’s better to know it from the start.

2. Is it going to be e-commerce alone or will other website functionality be required?
By default e-commerce systems apart from their standard functionality allow very limited, if any content management features. Therefore find out whether your client does not require a Content Management System to manage additional pages in the shop.

Your client may also want to run a blog, or set up internet forums to interact with his clients and these obviously increase your scope of work considerably.

3. Try to find out how many products do they expect to be selling

Depending on the answer you will have to design product presentation that can handle whatever number is mentioned and also allow for the shop to grow if needs be.

4. How many categories do they foresee for their products.
A major part of e-commerce interface is categories listing and in order to design it right you need to now roughly how many categories there are going to be. Will there be any subcategories as well? How does your client want to structure their categories listing? You may have a say on that last one but still it is your client who may dictate the shops structure.

A tip, always assume that the number of categories will change and design thier listing to allow for that.

5. Does your client plan any user interaction

• will they require user registration
• user reviews
• recommended products
• product of the day/week/month

These obviously have to be included in the design as well and very often interactive elements are the most problematic to design for.

It is easy for things to go wrong when you work with e-commerce project. Unfortunately one of the characteristics of the medium is that it can grow and in most cases it will. Your design has to reflect that.

When designing for e-commerce, just like with creating layouts for CMS sites you design for change and that can take a considerable amount of your time which you should factor in for.

Nonetheless if you have all the information you need then unless there is a considerable change of plans you shouldn’t have any problems with creating your layouts.

I love such stories behind print artworks. They are retold, they inspire and very often they live longer than the piece itself.  And they are fun to listen, at least to designers anyway.

But what do you hear when it comes to the web though? There aren’t many stories about websites. Not as exciting anyway. On one end there’s the technology, the boring bit. On the other, there are numbers, statistics. Metrics that prove whether the layout you designed was successful or not and whether the site brought any more business to your client. Or was it just another website on the net that simply was just there?

And the only stories you commonly hear are those about websites that failed. Sites that costed huge amounts of money but never really brought any business to their owners.

I guess as a designer you don’t want any of your websites to appear in one of those stories, right?

The good news is that it’s not difficult to do so. Just like with print design there is a set of skills and knowledge you need to master and you’re on a straight path to designing beautiful and successful sites. Of course it’s hard work but hey, it’s just like with anything in life, isn’t it?

So cutting to the chase, what knowledge you should master to call yourself a professional web designer?

1. You have to understand how the web works and realize one important thing, users do not visit your sites for their design. They come there for information and that is the only thing that matters to them. The only people interested solely in your designs are your fellow designers. And you generally do not design for them.

2. Realize that usability, the way you make it easy for your visitor to use the site is the most crucial thing in web design. In other words, if your users can’t browse through the site easily they won’t stay and won’t come back. Imagine also what sort of image of the company such website gives.

3.  Learn the technology behind the web. How information is passed between server and a browser.
Just like with print design where you have to learn the basics of print processes, on the web you need to know how the technology running the show works.

In addition you should learn as much as you can, mainly through experience I am afraid, of how various browsers interpret the code and what are their limitations. This comes usually handy when you design a site that uses modern technologies but you still want it to work on older browsers.

4.  Discover how to organize content on the website. It simply works much differently than with print.
Learn how users read on the web, what helps them to scan your copy and find information most relevant to what they are looking for. Also you should know what makes great copy on the web and how to write a content that focuses on fulfilling your users needs.

5. In addition to that learn how to structure the entire site. Just so that your user not only will enjoy reading the copy but also will have no problems finding all the information they need. Master how to make the whole experience of moving from one information to the other seamless and enjoyable.

6.  Understand how the code works. If you design the site you should have at least a basic understanding of it. That knowledge will show you what you can do and what might cause you problems. But by all means you don’t have to know how to code.

7. It is also good to investigate actual limitations of the design material you can use. Fonts, colors and images all work differently than with print. Once you know the difference the whole process of design will become much easier for you. Otherwise there may be some not so nice surprises waiting for you at the end of the road.

7+. And most importantly, view and analyze other sites. Especially those really successful ones. Just like when you were learning your graphic design by viewing works by design masters. But pay more attention to structure, navigation and usability not to design elements on those sites. This is what your visitors will be paying attention on your sites too.

Mastering this knowledge will have another major effect on your web design skills apart from making your sites work for your client. It will also build a great confidence in your skills. And there is nothing worse that be working on a project and feeling that you may not be good enough to actually be doing it.

So, over the next couple of weeks I will be posting here roundups of links to great articles and tutorials on each of the skills mentioned in the article. These should give you a good foundation to start mastering what you need to know to call yourself a professional web designer.

But for now, if you have any interesting stories behind websites please share them with us in comments here.

So why not help your visitors and guide them to complete those?
You can achieve that and drastically improve the site’s performance by including a call to action. Thanks to it your visitors will know what is the next step you want them to take. They will not always follow it but at least there will be an option for them to choose.

A lack of it though can create a different situation altogether. You rely on the visitor to choose their next move then. And imagine that you have 20 different options in your navigation, what are the chances that your visitor will go for the one you would like him to?

A call to action is not difficult to implement but here are few things you should think of when working on it:

1. What is your objective for the site?
Without knowing it it’s almost impossible to create a call to action. What objective do you want your users to complete on the site? Contact you? View your portfolio? Register for a promotion? Try a demo of your system? Try to imagine what would it be, it will form the main part of your call to action.

2. What are benefits for the visitor to follow your call to action
Before you create your call to action you need to make sure that there are some benefits for the user to follow it. Why would he do so otherwise?

A good idea is to place your call to action beside a list of benefits of using your company. Especially if it asks the visitor to get in touch with you.

3. Construct it offering an alternative solution
Do not push the visitor in one direction only, offer him an alternative route. Instead of saying “call us now” make your call to action to state “call us now or browse through our work”. This way your visitor should not feel forced to do one thing only, rather offered two paths to choose from.

The main thing here is to mark graphically which path is more important to you.

Remember The Milk offers an alternative but main option is made prominent.

4. Use active urgent language
A call to action should clearly tell users what you want them to do. It should include active words such as:

• Call
• Try
• Register
• Sign up
• Subscribe

and so on. The idea is to encourage the user to take the action.

Long sentences might work well too, example:

Overcome Fear of Public Speaking

Campaign Monitor uses active language for both call to action and it’s alternative.

5. Make it stand out
A call to action simply won’t work if it won’t stand out on a page. Make it prominent, make it big (well, not always but in most cases this works best). Use contrast to differentiate it from the rest of page elements. Use white space for the same purpose.

Wufoo uses strong color contrast to make call to action stand out.

6. Do not restrict it to a home page alone
A common belief is that it should reside on home page only but in reality you should have it on every page. The simplest reason for that is that you do not know which page the user has landed on when they entered your site. He may have simply googled a specific term and landed on one of the inner pages of your site.

Basecamp features this call to action at the bottom of every page

7. Test, test, test
Last but not least, you should always test your call to action before launching it on your site. Not only test whether all links work but even most importantly test whether it’s message is clear, it’s position right and will your potential visitors understand and act on it.

But what can you do with websites where you allow your client to manage or modify the content, grow the site and add whatever they please?

How can you keep up the highest quality level with those projects? Or maintain a highest level of usability if you do not have much control over the content? The site is still designed by you and so is the basic usability but many content based issues may and most likely will arise.

The simplest thing is to start designing for a CMS by assuming the following:

1. The content will most likely be different from what you have been told when the project commenced.

2. There will definitely be much more content than even the client anticipates.

3. And once the client realizes that they can do more with the cms they will.

So what can you do to protect yourself from losing your mind?

1. Allow the website and it’s content to expand.
Always make provision that there more pages will be added, same with content, images, videos and other site elements. Your navigation should accommodate this. Add dropdown menus or a way to create local navigation for website sections. Assume that there will be more of everything.
Also do not design your pages or their elements that are editable by the cms to have fixed height. Always allow them to expand vertically.

2. Always exaggerate when it comes to the content.
I always assume that there will be 3 times more content that I was told. In other words if a client tells you there will be only 3 paragraphs on a page, design as if there was meant to be 9 of them. And preview your designs this way.
This is important to keep the styling and a branding consistent no matter how much content there is on the site. You should always design for larger content that’s going to be on the site.

3. Do not give too much stylistic control to your client.
This generally relates to fonts and colors. Most clients want to be able to change them although from my experience the first thing they will do will be to change them to something not matching your style at all.
Try retaining control over fonts, sizes and colors via your CSS stylesheet.

4. Remember that your templates will be reused to create more pages.
Design them in a way that your client will have no difficulty creating additional pages from them. Also, do not create too many templates as it may be confusing for the client which one to choose for the site and ultimately may generate chaos in the sites layout.

5. Try hardcoding certain elements into the site rather than giving your client access to them.
This mainly relates to thank you and error notes on email forms outputted from cms. Very often this is an overlooked element leaving the site without this strong usability tool.

In other words when you design for the cms you design for change and you should always keep that in mind while working on your artwork.

Before we do that let’s see what is a difference between the two types is?
On a basic level, the difference is that with a static site you know what type of content will be published there. When it comes to Content Managed sites the content can be anything that a particular CMS you use can output.

And even if a client agrees to use only the type of content they discussed with you they most likely would not keep the promise. The rule of thumb with CMS systems is that the minute your client realizes they can do more with the System, they will.

Therefore you should always think ahead and include at least some generic styles for all types of content the client can output on their site.

In most cases that means making sure that you have styles for image gallery, blog etc.

Although there are certain elements wildly forgotten when it comes to CMS sites. Most of those items are ones that you can often output through rich text editor online and this is in fact the area your clients will be using the most.

So in your text content make sure you have styles for:

1. bulleted lists
2. ordered lists
3. images in post
4. block-quote
5. all 6 headings
6. links in paragraph
7. definition list
8. forms
9. tables

Also, most systems these days allow to place youtube (or any other service) video within the content so make sure that you have at least margins separating the player from other text set up. In most cases the way the player look can be controlled on the site you are embedding it from but the position of it is your task.

You could of course go further than default styles and create various sets for different containers your client can put the content into. In most cases though having a one default style will suffice. This of course depends also largely on design.

Last but not least, a 404 page. For Content Managed sites is crucial to have one. Most CMS system work in a way that changing a page name changes it’s URL as well. If the page has already been picked up by Google, after the name change the link will lead to nowhere. A 404 page will ensure your visitor that the site is still there and direct him how to at least get to a home page.

But do you sometimes wonder how a person with disabilities will use your site? Will a color blind person be able to still distill information from it? Will he finds a hyperlink somewhere in the text?

When developing a site we all sometimes overlook some basic methods that we can use to make our site more accessible for everyone. I am ashamed to admit that it happens to me to.

So for you and me I compiled a list of few really basic things to remember and check for to make sure your site is accessible on a basic level at least.

1. Make sure your site works with all css switched off
Your visitors with cognitive disabilities may disable complex layouts to get a more linear presentation, users with color deficiencies or low vision may override your site colors or font sizes. So always make sure that all information on your site’s pages display well without any css styling.

2. Construct your links to have a meaning, avoid “click here”, include a description of where the visitor will be taken if he clicks on a hyperlink i.e. “read more about our product”

3. Separate your links
Don’t use only one white space between consecutive links, screen readers may interpret two or more non-separated links as one

4. Provide text equivalent for non-text data.
Simply, include ALT tag to describe the image, use LONGDESC for longer descriptions. Also, you can simply describe non-text content in your sites copy.

5. Try not using images for links.
Screen readers will not interpret them as a link. If you have to do so though, use ALT attribute to allow screen readers use it as a link.

6. Design color elements in a way that they can be viewed and understand without color as well. Otherwise color blind visitors may have difficulties to see them.

7. Make sure that your site works with JavaScript switched off. This is especially important if you use some fancy script for navigation. Make sure that your content can be accessed when the script is turned off as well.

And last but not least, always validate your site to look for potential errors.