Hold on just one moment… how much does your client know about CSS – and how long is the site content going to retain the look and feel they’re so pleased with if they’re not confident with HTML?

Clients aren’t coders.

Most of them, anyway – most clients know how to use Microsoft Word, but that might well be the extent of their design knowledge. And, if you’ve worked with Content Management Systems, you know that copying text from a Microsoft Word document into the CMS can cause some unexpected design complications, and can result in accessibility issues, including loss of W3C compliance. Inserting plain text into the editor helps, but what happens to the formatting?

Using inline formatting is certainly an option, and many clients will opt for this. It’s quite easy to highlight a segment of text, apply a font size and colour, then set the text alignment. This has the advantage of being truly WYSIWYG, as all changes will show up exactly as the user wants them to in the CMS editor window. There’s just one small problem.

If your client doesn’t know exactly what font sizes, colours and alignments are used in the content you set up for them – not to mention image spacing, table cell padding and other more advanced settings – it will be very difficult for them to replicate this when they upload their own content. An area of text that looks just about right in the content editor might not look like the rest of the page content when it’s saved and viewed on the front end.

But they can apply CSS styles and classes, right?

Of course, you could supply them with a list of the correct inline style codes or even classes to add for each formatted segment of text… it adds another page or two in the user manual, but it would ensure that they could produce new pages that look like the content you uploaded for them.  Some clients are quite happy to click on that little HTML button and enter an instruction like class=”blah” in the correct part of the page for the content they’re uploading.

But many content managers don’t have any web design experience – they’re working with the content editor on the basis of a “Microsoft Word-like” interface. Looking at the HTML version of a page can be daunting. Those <p> and </tr> and <a class=”sausage” style=”margin: 5px; float: left; clear: both;” href=”/overthere.htm”> tags don’t make sense to anyone who doesn’t know that they’re looking at the start of a paragraph, the close of a table row or a styled link to a page.  In that respect, it may not be reasonable to expect your clients to be able to add classes or inline styling.

What’s the solution?

I use a combination of two approaches.

First,  in every CMS user guide that WSI Huddersfield produces, we include any applicable inline styling, particularly where <div> sections have been used to create columns or floating text areas, as standard CMS software doesn’t include an insert-DIV option. This is done by providing a block of code in the user manual with “your text goes here” sections in it.

Secondly, in the site creation process, we use CSS to define the appearance of a number of basic functions on the site, like paragraphs, headings and lists. Once this is done the customer can then use your styles with just a click or two to format their text and retain the same look and feel as the content you have uploaded.

For example, you may need a specific format for a Call-to-Action button. Trying to show a client how to do the Call-to-Action buttons with standard text and inline scripting could be quite problematic, even if you explain to your client exactly where to paste the appropriate styling text. But if you have set up the CSS so that using the Heading 5 option in the CMS will automatically make the text appear as a button with a fixed width, floated right and showing a background image and border, it simplifies things considerably.  A client could then enter their normal text, highlight it, and click “Heading 5″ in the settings.

Style test pages

There is one down side to using the CSS styling in this way – the CMS is no longer quite so WYSIWYG if you’re using external style sheets, which do not show in the editor window. That formatted H5 wouldn’t have the styling applied to it, so it would simply appear as plain bold text in the CMS. This is why creating a Style Test page is important, so that a client can refer to what something looks like on the front end of the site, and click the right option in the CMS. This test page should show:

• Headings 1 –  6
• Standard paragraph text
• Links
• Bullet and numbered lists
• Any other formats applied to standard functions

This way, your client can see what they need to do to replicate the style of pages already on the site. And helping your client to do that will also help you – so that the site you are so pleased about will remain a showcase piece once your clients are maintaining their content themselves.

Five Website Tips for Engaging Consumers Today
The web is not a static medium: as technologies improve, user expectations increase. As they do, meeting customers’ expectations will mean developing your marketing to be more appropriate, timely and relevant to what consumers want.

Here are five steps to develop your website to engage more effectively with your customers:

1. Study Customers’ Online Behaviour
Use your website analytics to learn from your intended audience – your customers – and give them what they want. Identify website hot spots that attract the most attention; understand when your email marketing messages will be best received; discover which social platforms are leading them to you.

If used well, your web analytics are a key component in understanding and fulfilling your customers’ expectations.

2. Consider Your Content Presentation
The first step in engaging customers is not only the quality of your content, but also the ease with which it can be read and its user-friendliness. A professional web design and carefully thought out content arrangement will help you make a great first impression – and draw your website visitors in.

3. Creative Content Formats
The web is no longer a text-based medium, and hasn’t been for a while. Even the less frequent web user will be used to animated imagery and video content. Be creative with your content to engage your visitors’ senses and get your message across dynamically, but ensure the technology doesn’t distract visitors from your pitch.

4. Emphasise Social Media Connections
Make it easy to share your content across multiple social networks, such as Digg, StumbleUpon, Twitter, Reddit, Facebook and many more. Including an easy-to-use ‘Share’ widget with your content makes content sharing a breeze and demonstrates your intention to be engaging.

5. Make it Easy to Correspond – No Jumping Through Hoops
If you want to encourage correspondence, show it. Make it a simple process for site visitors to leave comments or get in touch to take ‘social conversation’ to the next level. Streamline your forms and have multiple points of contact through which visitors can leave comments.

Finally, with all the above, adapt your marketing mix to incorporate a coordinated, consistent approach. Developing a coherent online marketing campaign can be done very effectively at a fraction of the cost of traditional promotional activities.

The number of times I found a site within Google saying that they had a sale on boots, only to click on the site and land on a completely irrelevant page which only made be close the page and continue looking for another site that would actually land me on a page showing Climbing Boots.

With this in mind here are some tips on the best practices for landing pages, which should engage the user and be able to show higher ROI.

• Unify the aim – Landing pages perform best when the content is promotion-based. The content should be concise and focused on one message.

• Engage the Visitor – Tell a story or sell a product using impactful imagery.

• Focus Visitor Experience – Landing pages should be used as a teaser to easily point the customer to the desired action.

• Direct Headline – Make a good first impression. A clear and direct headline should be the first thing the user sees when viewing the page.

• Leave Plenty of Space — Visitors tend to scan the page rather than read bulky text. Good use of space allows visitors to scan and understand the key messages.

• Call to Action Buttons – Attracting attention is what the main action buttons are all about. Make the button is above the fold on the page. Also, don’t skimp on button size.

• Convey Trust and Security – Branding, trust/security icons can provide credibility and give confidence to the visitor.

• Provide a Compelling Message — Think of your landing page as your online salesperson. Make sure you have one compelling message directly above the call to action.

Understanding what visitors want and how the interact with your site is essential to get the best ROI, continually monitor your analytics and modify your pages. Just some minor tweaks could really reduce your bounce rate and increase visitor interaction and stop people like me leaving your site within 3 seconds of arriving on it!

But there are things any e-commerce website should do to give its customers the best possible online experience, especially when you’re talking about busy shopping times.

Positive Online Shopping Experiences -
How to Get Customers To Come Back

For me, the biggest concern when I’m shopping online for the holidays is “Will my gifts get to me on time?”

The best of the websites I’ve used this year have done the following things to increase my confidence in shopping with them:

• Delivery times clearly stated on the website, and not just when I’m checking out. Dynamic delivery times specific to each product and/or supplier are even better.
• Named delivery services – and the choice of courier type. I’m one of those people who, if next working day delivery is available and not too expensive, will go for that instead of a standard Royal Mail service.
• E-mailed confirmation of my order including an expected delivery date.
• Tracking numbers – when possible – also provided through e-mail or by logging in to a customer account on the website.
• Contact details – including a real-world physical address and telephone number – are clearly displayed on the website and in the order confirmation e-mails.

Negative Online Shopping Experiences -
How to Scare Your Customers

Unfortunately, not all of the shops I’ve used have been quite so helpful this year. Shopping online can be a bit stressful if a customer doesn’t have enough information.

If you’re an e-commerce site and you want to scare off a potential customer:

• Don’t talk about your delivery policies –  your customers don’t need to know how you deliver their goods or when they’re going to get them, do they?
• Don’t confirm your company details in order confirmation e-mails – send a list of the products the customer bought, but don’t include any contact details if things go wrong.
• Don’t show your company registration or VAT information anywhere on the website.  Speaking of the Electronic Commerce Regulations 2002 … surely they don’t mean your company is legally required to include that information?
• Make the customer register before they can place an order with you – but make sure that registration is a white elephant, of no practical use in future. Customers don’t really want to know if their order has shipped yet, even if they’re logging in to check.  In addition, your registration system should be awkward, intrusive and impossible for your customer to avoid.

And a minor issue, which might not apply to all e-commerce sites…

If you have a physical shop as well as an online presence, keep in mind that your customers may see a product in your shop that they like… but not the right size or colour. Do you stock the same products in your online shop?

Making it easy to shop online – and making sure you show what your customers need to know –  will get your customers to come back, and to recommend your site to others, too.

Although it’s a big leap in what many designers are used to, it is something that all designers must accept will happen in the future. So why not learn the ins and outs of mark up such as HTML 5? Knowing something of this kind will not hinder your progress as a designer, simply give you the upper hand when “d day “ does come around and XHTML is something of the past.

Things like jQuery plugins, formatting techniques and design trends change all the time across the web. We accept that what we learn in this area today will change tomorrow. If this is the case with other coding techniques then why should we not accept this with the mark up we use everyday? Well, people become very comfortable with the techniques they learn in XHTML, the little tricks and tips that speed their design to build ratio. But from what I will describe in this blog HTML 5 may be worth the change over, if it’s time and tidiness we require. Transitioning from one syntax to another can be complicated or even make you feel that what you have learnt before was a waste, hopefully this blog can ease that change.

The Basics

The first main change is the doc type which every web site has the doc type code is

<!DOCTYPE html>

TO say the least this is not what we expected from a new syntax, but apparently…

<!DOCTYPE html5>

Triggers various problems in, yes you’ve guessed it IE6, but we must take backwards compatibility into consideration in most cases.

With HTML 5 this is as long as the new doc type gets, it’s small, its meaningful and for once in any designers working life including myself we might just remember this one, I feel that this improvement will banish the need for us to open up previous XHTML builds and copy and paste the doc type forever.

New Elements to get to grips with

Straight away new elements strike your retinas and in many ways make the sense of designing seem easier. In many ways the WC3 community has opened its ears and listened to what it is designers need. New elements that style the structure such as <header> and <footer> are now apparent along with <canvas> and <audio>. These simple looking structural elements seem to tap into an already powerful API - which in the long run allows us to create user friendly applications. We can now sleep at night knowing that our site’s audio doesn’t need to rely on copious amounts of flash work to seemingly stream an audio file. So let’s get to grips with the elements.

The new Structural elements

• <header>
  The header element contains introductory information to a section or page. This can involve anything from our normal document’s headers (branding information) to an entire table of contents.
• <nav>
  The nav element is reserved for a section of a document that contains links to other pages or links to sections of the same page. Not all link groups need to be contained within the <nav> element, just primary navigation.
• <section>
  The section element represents a generic document or application section. It acts much the same way a <div> does by separating off a portion of the document.
• <article>
  The article element represents a portion of a page which can stand alone such as: a blog post, a forum entry, user submitted comments or any independent item of content.
• <aside>
  Aside, represents content related to the main area of the document. This is usually expressed in sidebars that contain elements like related posts, tag clouds, etc. They can also be used for pull quotes.
• <footer>
  The footer element is for marking up the footer of, not only the current page, but each section contained in the page. So, it’s very likely that you’ll be using the <footer> element multiple times within one page.

With one glance at these elements we can see no need for “div id=”mydiv”></div>, it would appear that the gold old div id is being forced into retirement. Much more than this elements like <header> or <footer> can be used multiple times on one page, something that was unheard of with div IDs. In this example the elements act more like classes and normal HTML that can be exhausted while style retaining a semantic structure.

One thing is apparent while looking at the elements in HTML5 and that is its ease and simplicity in creating a final goal. Like with any industry this is apparent, aerodynamics experts have one goal - to create something that reacts in a streamlined fashion to its environment. This also relates to design, if we can create something that overall reacts resourcefully to the net then why can’t we do it in far shorter steps than XHTML? HTML5 can do the above in a far more streamlined fashion than that of XHTML. When I look at the new mark up, I think faster, cleaner.

Easing the transition from good old XHTML

We can see that HTML, XHTML and HTML5 are similar in syntax, some small differences however can slip into your code and we can be faced with that dreaded “Document does not validate” in the official “failure red” colour. But on the plus side HTML 5 has some built in slack to let designers off a little bit, for example when marking up a form in HTML 5

For example , when marking up in HTML5 the proper syntax would be..

<input type="text" id="name">

But this is also accepted as valid code in an attempt to ease the pain for avid XHTML coders who in many cases are used to the “/”> elements. So even though we are using HTML5 we can still self close our elements like so.

<input type="text" id="name"/>

These rules will apply to <meta> <b> and <i>, these elements being left in makes the change far more easier to come around to.

What are some of the benefits?

People do not upgrade anything unless it has something to offer or at least one new feature. If your old code works just as well if not better than the new syntax mark up then why do you need to change over? Well, with HTML 5 a lot of new features are making their way onto the scene and changing the way we handle our online presence. Below are a number of new features..

Offline data Storage – With anything that’s web related that can be followed by offline storage we suddenly prick our ears up and listen. In this case HTML 5’s offline capabilities are amazing. Programs like Thunderbird, Outlook allow you to browse your data while offline, with HTML 5 you can have this feature function in the same manner but simply in your browser, some say this could be the first serious step in connecting both the desktop and web.

Video and Audio- The audio & video APIs are massive upgrades in media embedding. Although support is limited right now, something like video embedding has never been easier:

<video width="400" height="360" src="vid.mp4">

We can see from all of the above that HTML 5 is not at first glance evil but rather pleasing to use for a designer, for years we have complained about time management, and ease of coding. Here we are faced with a syntax that allows us to speed up our production and add elements that previously would have given us a headache. Further more we can see that is being kind to us who are XHTML savvy, by allowing us to ease into this new step in our design careers.

To Conclude

HTML 5 wants to help us, it wants to simplify the way we code in a way that can benefit both clients and the designer. But in most cases one thing is standing firmly in the way of evolution in the web arena and this is the foundations set up around XHTML, communities are rife with support for this syntax and this does not look to burn out anytime soon. But hopefully with HTML5 the expectations are being set up with strong intentions to become a very powerful mark up language, could this sway the masses?

With so many great features from new elements to API’s with enough power to change the way we view the net. We can make data available offline, easily combine technologies and create intricate animations all within a familiar landscape. We must as designers embrace the future, in doing so we can build stronger and richer web apps that do the internet justice.

The idea behind CSS is that it separates the presentational code from the content, so that HTML documents can remain clean and simple with multiple documents all pulling their styles from a single CSS file. This allows pages to be built quicker, with less repetition, and makes any future maintenance or design changes much easier.

The current standard is CSS 2.1 which has mostly been in use since 2004, but a big update is around the corner in the form of CSS 3. It’s going to be a while before browser adoption catches up but this post is going to cover some of the exciting new tools that designers will be able to take advantage of, some of which can even be used today.

Multi-Column Layouts

Placing your text into multiple columns is technically possible today using multiple DIVs but CSS 3 will make this much easier allowing you full control over the number of columns, their widths and the spacing between them.

#content-main{

text-align: left;

width: 920px;

font-size: 1.2em;

-webkit-column-count : 3;

-webkit-column-gap : 50px;

}

Multiple Background Images

Again, giving an area multiple background images is possible today but it means cluttering up your page with unnecessary DIVs. With CSS 3 you’ll be able to assign more than one image to an element, in the example above I created a single DIV with two separate background images:

1.       The main blue graphic locked to the top right hand corner.

2.       The white WSI logo (as a transparent PNG) locked to the bottom left.

The logos would stay in their assigned corners no matter what the size of the DIV, giving designers a lot of flexibility when working with dynamic content.

#multibg{

width: 500px;

height: 200px;

background: url(../images/bg2.png) bottom left no-repeat,

url(../images/bg1.jpg) top right no-repeat;

}

Rounded Corners

CSS 3 allows you to place rounded corners on any element without having to use images or JavaScript to fake it. You have full control over which corners are affected and the amount of rounding.

#outer{

width: 475px;

height: 100px;

padding: 50px;

background: url(../images/bg1.jpg) bottom left no-repeat;

-webkit-border-radius: 10px;

}

Drop Shadows

Drop shadows could easily be used badly and ruin a site but in the hands of a good designer could also add that something to make it stand out. It’s another effect that can be faked at the moment using images or JavaScript but CSS 3 will streamline your code with shadows natively rendered by the browser.

#dropshadow{

width: 450px;

height: 170px;

background: url(../images/bg1.jpg) bottom left no-repeat;

-webkit-border-radius: 10px;

-moz-border-radius: 10px;

-webkit-box-shadow: 0 0 5px #111;

}

h1{

font-size: 2.5em;

font-weight: bold;

margin-bottom: 15px;

color: #003767;

text-shadow: #ccc 4px 4px 2px;

}

Element Opacity

The opacity controls in CSS 3 are flexible enough that you can control the exact value for any single element as well as deciding whether the opacity of child elements is effected.

#opacity{

width: 450px;

height: 150px;

padding: 25px;

background: rgba(255, 255, 255, .40);

}

@Font-Face

The @font-face attribute allows you to embed a custom font, hosted somewhere online allowing you to venture out of the safety of traditional web fonts. A slightly less useful version has been available in Internet Explorer for years but it’s now starting to gain support from both browser developers and font foundries. We discussed @font-face in more details in a previous post.

So can I start using these right away?

Unfortunately the answer is yes and no. The last 6 months has seen a huge improvement in CSS 3 support from most of the major browsers but you’ll still have to use browser specific attributes (“-moz-“ or “-webkit-“ before the attribute name, as in some of the examples above) to get many of these new techniques working right now. The latest versions of Opera, Safari and Chrome all have excellent CSS 3 support right now with Firefox close behind. As usual though, Internet Explorer is dragging its heels with almost no support even in IE8. This is hopefully set to change whenever IE9 launches according to a recent discussion with Microsoft developers.

There are many site designs and blogs already taking advantage of these new techniques and there’s nothing to stop you from experimenting too. Browser support is going to improve over time and as long as the design doesn’t look broken in IE, those visitors would never even realise anything was different for them. There are a lot of designers pushing the idea that a website doesn’t have to look identical in every browser. It’s important to make sure that everyone receives a good browsing experience but why deprive the modern browsers of those more advanced features?

This is obviously something that needs to be discussed at the beginning of a project but if you’re lucky enough to be working with a forward thinking, tech savvy client, why not suggest that they join you leading the charge into the next stage of web design?