An aesthetic appeal and an intuitive user interface are key for a positive e-commerce experience – it should be easy for people to buy your products. If they have to figure it out or work at it, chances are they won’t.

Winning More e-Commerce Customers
Understandably, consumers are tightening their belts and looking for great deals and a rewarding shopping experience on the web – which provides a great opportunity for online shops. With this in mind, here are 5 tips for improving your customers’ experience – and your sales.

Keep It Clean
Take half an hour out of your day to visit a range of e-commerce websites – those you like, and those you don’t like – note what works and what doesn’t. What you will notice is that a clean, tidy and visually concise front-end is top of the list for any site selling a product. Yet the amount of broken, cluttered and ugly pages there are out there beggars belief. Ask yourself this: if shopping on your website is a chore, why should anyone bother? Chances are they won’t.

Love Those Colours
Research has long told us that colour is inextricably linked to mood and emotion, and it has long played an important role in the arsenal of the modern marketing strategy. Supermarkets and advertisers spend millions each year researching package design and the use of colour – and internet marketers should never underestimate the use of this vital facet of web design.

It’s All in The Up/Cross-Sell
Amazon is probably the best example here “customers who viewed this item also viewed…” or “like these? You may also want to try…”. How many times has your mouse cursor been drawn to one of these links placed strategically on the page? A simple, but extremely effective method of promoting related items or more expensive alternatives.

Again, it’s all in the power of suggestion, rather than forcing pages of alternatives – let the user feel they’re in control. It’s also worth mentioning the humble Wish List here – a tried and tested way of building a shopping list for return shoppers.

User Interface
A slick user interface is a vital component of any successful e-commerce website. People shop online for convenience, so presenting visitors with a cluttered, slow site encumbered with broken links will harm sales and discourage return visitors.

Ensure your hosting is up to speed and streamline the checkout process to keep them coming back for more.

Do One Thing, and Do It Well
Unless you’re Amazon (let’s not forget they started off as a book retailer predominantly), you’re unlikely to be able to get away with selling anything and everything. There’s a lot to be said for finding a niche – something you know well – and sticking to it. Remember the saying ‘jack of all trades, master of none’? Well, the same applies to e-commerce.

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.

Think of your website as an additional member of your sales team – always available and ready to win new sales. Just as you might invest in training for such an employee to hone his or her skills, your website can be a great instrument for converting more online leads by putting the right tools in place together with some tried-and-tested lead conversion techniques.

Simple but Clever Lead Conversion Tactics
Influencing your website visitors to take the next step in becoming your customers can take many forms. It could be to:

• Fill in an online form in return for a free White Paper, industry report or discount coupon.
• Sign up to a newsletter or stay updated with your blog via RSS feed.
• Follow your social media updates on sites such as Facebook or Twitter, for example.
• Register to gain access to exclusive areas of your website, such as video tutorials or a webcast.
  Buy a product, request a meeting or make a booking.

Once you are clear on what the desired outcome should be, you can start crafting an appropriate online conversion strategy. While the desired end results may vary, the following key conversion techniques will mostly apply.

1. Attract the Right Audience
Consider this your foundation. It may take longer to get up and running in order to research the market and identify the best ways to attract targeted web traffic, but your conversion rate and advertising budget will thank you for it. The scatter-gun approach may get you started quicker, but it will also drain your resources, with little return.

2. Create a Great First Impression
Once you have attracted your audience, presenting them with a well-designed website that offers a first- class user experience will be a great start. But don’t stop there, use dedicated landing pages which relate specifically to your ads and which funnel your visitors into the direction of your conversion process.

3. It’s Time to KISS
Keeping it straight and simple is key to channelling your customers’ attention. Remove distractions and make the next step – your conversion goal – blindingly obvious. Other ideas for giving your most important message some focus would be:

Keep your copy short and to the point.
Try to keep your content readable without too much scrolling.
Present your strongest selling points towards the top of your page so visitors see it immediately.
If you are using an online form, make it easy to fill in. No jumping through hoops.
Use a mixture of text and images to help break up the copy and complement your message.
A well-prepared landing page will make a big difference to the effectiveness of your advertising campaign and help you gain favour with search engines that emphasize more relevant content.

4. Give a Great Incentive
Whether you are offering an industry White Paper in exchange for contact data, or selling state-of-the-art golfing attire, the starting point for completing the conversion is the same question all customers will ask: “What’s in it for me?”

Creating value-added offers not only provides potential buyers with incentives, but it also fosters loyalty and can act as a gatekeeper to qualify your customers.

5. Respond Swiftly
Research shows that customers are most responsive immediately after initiating correspondence. An automated email function will allow you to send an immediate message – perhaps with an offer – upon your visitors filling in a form, signing up to a newsletter or making an enquiry.

In conclusion, don’t leave it to chance, it may take a little testing and tweaking before you optimise your conversion process – but it is worth the effort.

1-    If it is an e-commerce website, make sure it looks like one, display credit card signs, show a basket

2-    Display your main offers and products on the home page, don’t clutter the home page with your life story or mission statement.

3-    Don’t waste valuable space and prime search engine optimisation with “Welcome to Our Site”

4-    Always have a phone number clearly displayed so that people can contact you, don’t hide it on the contact page or in teh footer

5-    Ensure that prices and offers and taxes are clear

6-    Do not require registration to checkout, this is a big turn off

7-    Make Delivery Policy and Charges Transparent

8-    Use Goody Badges e.g. trade associations and secure signs to add comfort to the customer

9-    Do not clutter checkout pages, keep them clear of distractions, too many choices can cause confusion or inertia

10-  Make terms and conditions clear, you have to offer a 7 day money back guarantee by law (some exceptions)

11-   Make sure that it is Search Engine Friendly, teh website can be beautiful, but if you’re never found, your investment is wasted

12-   Make sure that you have web analytics installed so that you can measure what is happening on site and so that you can measure and improve your marketing campaigns

Of course this is not a full checklist, but it is amazing how often websites miss the obvious and focus on themselves or their history.

It is vital to put yourself in the mind of the customer, make it easy ofr them, minimise clicks to buy, engender trust with openness and no surprises and carefully and thoughtfully signpost the site with good navigation. Most of all keep it brief. No one reads long sentences and paragraphs, until after they have made a buying decision or are actively looking for more information.

Checkout Some Of Our White Paper Resources

Downloads Available from our White Paper Resources Page

The New Ways To Be Found Online

Landing Pages

Conversion Architecture

Email Marketing

Web Analytics

Your Guide To Paid Search

Social Media

Trends Report 09

Trends Report 09 – E-Commerce

Trends Report 09 – Internet Usage

Trends Report 09 – Social Media

Make Sure Your Company is Visible on Google with SEO

We are a Digital Marketing Agency and Internet Consultancy based in Huddersfield West Yorkshire. We pride ourselves in delivering , top performing e-commerce websites to our customer base around Huddersfield, Leeds and West Yorkshire. Our websites will always be built Search Engine Friendly.

There is a real danger when selecting a web design company that they don’t know what they are doing ! Harsh? Well possibly not.

Many companies are graphic designers first, which is fine as long as Graphic Design Agencies play to their strengths and develop effective partnerships with other online experts. A website of course should look great, but it also needs to get found on Google, Yahoo & Bing, it also vital that those designing websites, particularly e-commerce websites, design the website using best conversion practices, so that the traffic coming to the website is really maximised.

It is therefore incumbent on all web designers to know about:

• Usability & Conversion Strategy
• Web Analytics
• Business and Business Trading principles
• Search Engine Optimisation (SEO)
• Search Engine Marketing (SEM)
• Social Media Marketing (SMO)
• A host of other good practice principles such as build quality, W3C Compliance, Accessibility

We’ll cover off many of these points later in the article.

So why is this so important, doesn’t a picture tell a thousand words? Well yes!! But it’s more than just great looking web pages.

So Why Should Your Web Company need to know about all of this. Well because a good website and especially a good e-commerce website should be more than just a vanity purchase, it should deliver a real return on investment and if done properly will represent possibly the best value for money marketing.

Usability & Conversion Strategy

Whether your e-commerce website is your main path to market or not, be sure not to leave “money on the table” by making simple usability and conversion mistakes. Some common mistakes include:

• Bolting an online shop onto an existing site. If you intend selling online, then that is what your site needs to be about, not just a single button taking the user to what may look like another site, not sure about this? well just checkout best in class sites like Amazon & Next.
• Small navigation with Products & Services buttons. nearly all low end websites have buttons for “products” or “services”. This tells your potential customers nothing, it tells Google even less. Instead, your left navigation should be persistent on all or most pages and be your main product categories.

When considering content for your website, you need the right amount of detail at the right time. For Landing Pages, the information needs to be direct. Top 3-5 key points, a great image or graphic with a call to action. the idea being to convert your visitor as quickly as possible making it as easy as possible to see your offering and move on to the next stage. Good practice is often honesty and good layout:

• No hidden surprises
• Clear prices
• Clear call to action
• Key information above the fold
• Uncluttered so as not to distract

It’s a good idea to offer comfort such as:

• A friendly customer service face
• Clear telephone help
• Live help
• Goody badges (showing your security standards, awards, service levels)
• Guarantees & money back offers

This will work very effectively with an allied Social Media Marketing Strategy, we find that of our customers that use us for Social Media Marketing experience conversion rates 2-4 times greater than those that do not use Social Media.

Web Analytics

All of our websites come with Google Analytics ready installed. We also recommend that functions like Goals and E-commerce tracking are set up as well, particularly if about to run a comprehensive marketing campaign. Analytics is the information system that can turn a bad campaign into a great campaign. Typical measurements we report include some obvious web statistics:

• Time on site
• Number of visitors
• Bounce rates (the number of people who stay for less than 5 seconds)
• Pages Visited / Pages Per Visit

We also track more complex information like

• Campaign ROI
• Brand mentions
• Social Media Traffic
• Keywords and pages that deliver traffic / goals / sales / bounces
• Campaign statistics

And countless more statistics can be extracted and derived from Analytics depending on what is required to be measured. Like all marketing campaigns targets should be set, key metrics measured and reported on. Once we know what works best then that is the best place to divert resources to. We are fortunate in having our own web analytics qualified consultant on staff.

Understanding Your Business Online

Pretty websites are great, but be sure your Web Designer or Internet Consultant understands your business. For example:

• Do they understand your products, is it highly customisable, does it come in different sizes and colours, are ther factors that affect the price?
• What is the call to action? Download a brochure?, Buy, Request a Quote, Request a Consultation? Call?
• What are the Checkout issues? Vat Exemptions, Different VAT Rates, Delivery Policies, Discounts?
• Delivery Policy Issues, Courier rates, Bulky Deliveries, Highland & Island Rates, Postage Rates, Integration with Label Printing and Despatch Systems? Integration with the Courier? Free Delivery Policy etc
• Marketing Discounts Policies, Free delivery above a certain spend? % discounts on spend, offer codes, vouchers.

It’s no good spending £5,000 or £25,000 on a website to find that what you take for granted has been overlooked. Make sure that your Web People ASK these questions.

Search Engine and Online Marketing

It’s important to get your web designers, your offline agency and your Internet consultants fully aligned to your strategy, to both avoid duplication and to ensure that they are complementing each other to your benefit.

Web Design, Search Engine Marketing, Search Engine Optimisation, E-Mail Marketing and Social Media all work together. Make sure that your Digital Marketing Agency has expertise in all of these areas, this isn’t always easy for business owners and marketing departments, but here are a few pointers that may help when selecting an agency:

• Can your Internet Consultant explain Internet Marketing without getting overly technical. At the end of the day it is all common sense once you know how. If they know what they are doing, they will be able to explain quite clearly and easily.
• Do they understand business, most of all YOUR business, this should be reflected in their specification and proposal to you.
• Pick on one or two of your own competitors, see if your web designer can tell you why they do so well or so badly.
• Don’t accept broad generic answers and don’t be fobbed off with “It’s a trade secret”
• Ask for testimonials and ask them to demonstrate what they have done with other companies.
• Do they seem experienced enough to give you high quality professional advice
• Do their claims sound too good to be true? If so they probably are.
• Have they provided a comprehensive and comprehensible analysis of your website?
• Are they able to propose a coherent Internet marketing plan, that changes through time as results and analytics change? or are they a one trick pony just offering Google AdWords or just Link Building?
• Who will they be putting on your account? are they qualified? Will they appoint a qualified project manager?
• Are they Google AdWords and Analytics qualified
• Are they members of a body like SEMPO (Search Engine Marketing Professionals Organisation)

If they can’t or won’t answer move on to someone who will give you peace of mind, because they will probably give you results. 

About WSI In Huddersfield Yorkshire

We are a Digital Marketing and Design Agency based in Huddersfield West Yorkshire and part of the worlds largest network of Internet Consultants. We have specialists in the following fields:

• Website Design
• Website Development including Advanced PHP Programming
• Internet Consultancy
• Search Engine Marketing (SEM)
• Search Engine Optimisation (SEO)
• Social Media Marketing, also known as Social Networking and Social Media Optimisation (SMO)
• Pay Per Click Marketing (PPC) also known as Paid Search and Google AdWords (we also run campaigns on Bing, Yahoo and also sites like Facebook and Linked In
• E-Mail Marketing

Talk to us about our no surprises site engagement policy and our customer testimonials.

As you prepare to design – or redesign – your website, keep the following questions in mind.

• How will I attract people to my website?
• How can I best appeal to my prospective customers?
• How will I convert these prospects into clients once they reach my website?

To accomplish this you will need to build a site that looks good, is easy to use, has well written copy, and also has search engine friendly design features. Sounds like a tall order?

Achieving the Right Look for Your Website
If your website looks poorly designed, you might get people to visit but they’ll turn away in droves once they are unable to navigate your content with ease. Resources allocated to achieving an aesthetically pleasing and professional looking web presence is money well spent.

An experienced, competent web designer will not only keep the look and feel right, but will also design a site that will capture viewers, help you to convert them, and be search engine friendly.

Learn About What Your Customers Like
Before your designer puts ‘pen to paper’, do some market research. Who are your customers? What do they like? What age group are they? What is their geographical location, sex, and hobbies? Each background demographic will have an influence on how successful your design will be in attracting and converting people.

Get to know your audience and give them what they want. If you need help, look for inspiration on successful sites in your field. What do they do that works well? How might you improve on it?

Key Design Features
One of the best ways to make your website more successful is by making it distinct, appealing, relevant, and accessible. Consider the following vital design elements:

• Branding – Your website should reflect your company’s image.
• Colours – Select a colour scheme that will appeal to your target audience.
• Images – Choosing the right pictures can be a great way to tell a story without words.
• Content Layout – Prioritise your messages and layout your content accordingly.
• Considerate Navigation – Make your content easy to access, from anywhere on your site.
• Animations – Moving images can really help, but remember, less is sometimes more.

In conclusion, keep in mind that first impressions count, and that setting up a sleek, well-designed, website will help ensure your company is taken seriously. Ultimately, your website should not only look impressive, it should also help you attract, appeal to and convert new customers.

In my own personal experience a typical scenario for many clients is they have their new website designed and developed. Content is then added to the website primarily from corporate leaflets and company brochures. Time then passes with the new website receiving relatively low levels of traffic! As more and more time passes the situation grows increasingly more dire resulting in increased pressure on the management team to attract more visitors and substantiate the development costs of the new website. During this time it is likely a PPC advertising platform such as Google AdWords or Yahoo Search Marketing will be utilised to try and increase the number of targeted visitors. While this is a sound strategy in the short term and can actually provide highly beneficial keyword research data for a longer term SEO strategy, it rarely makes for a sustainable longer term online marketing strategy.

Typically after a period of around 6 to 12 months when monthly PPC budgets have reached an all time high and organic visitors numbers have failed to increase as expected the decision will be taken to call in an SEO expert. The SEO expert is tasked with building a longer term more sustainable online marketing strategy with search engine optimisation as its focus to try and rescue some search engine rankings.

Unfortunately this is a scenario we experience far too often. Business owners who have fallen victim to this “hope and pray” website development cycle will certainly support me in saying this is not the best way to ensure the success of a new website. It can both delay a website reaching it’s full potential by many months and even years, but also result in thousands in lost profit, turnover and ongoing prospects.

Many web design and web development companies claim in their sales pitch to be SEO experts. A quick browse through their client portfolio can often reveal their lack of SEO knowledge and expertise. This will be evident when you investigate the search engine visibility of both their own website and their listed clients.

So can you really optimise a website for search engine visibility before you launch it? The answer is yes, ideally web design and SEO should go hand in hand. The thought process for optimising a website should form the foundations of the web design/development from the outset. It is the website structure and content which will ultimately help to capture free organic web traffic.

Search engines to a large extent don’t care what a website looks like. Web designers and web developers should take the greatest advantage from the opportunity which is available when a website is first indexed. This opportunity is often wasted if basic SEO principles are not part of the initial web design and development process. Extra time and money should be spent on pre development SEO. This SEO should at the very least include keyword research and SEO copywriting. Conducting SEO so early within the development of a website can provide an outstanding return on investment as a website achieves a strong search engine position from day one.

If a web design agency is not promoting SEO as part of its initial client brief then they are both missing an opportunity for themselves and more importantly for their clients. The opportunity for maximum return on investment should be realied from day one.

Using CSS 2 there are ways you can mimic the look and feel of some of the new functionalities in CSS 3, so that even older browsers can see your content presented in similar ways. This particular article will discuss one of the new CSS 3 functions and how to fake it using CSS 2.

Multi-Column Layouts

There are two ways to create a multi-column layout using CSS 2. However, each of them has advantages and disadvantages. Depending on the content to display, you may find that one technique will do what you need better than the other.

Using Multiple DIVs for Column Layout

This can be an elegant solution, providing the ability to display columns of fixed width and height containing freely entered text. From a content management point of view,  it does require a little bit of knowledge of HTML.  This method can result in a lot of content-editor tweaking to ensure that the content required does display neatly within the given columnar DIV.

I would use this technique in places where it is essential to present content in separate paragraphs, or where images might be part of the column contents.

The example CSS code might be something as simple as this:

.column {width: 250px; height: 400px; padding: 10px; float: left; margin: 10px;}

And in the content editor:

<div class=”column”>Content</div><div class=”column”>Content column 2</div>

Using Lists for Column Layout

This solution works well for people uploading content who aren’t as familiar with HTML. If I were working on a project with a keen client who wishes to update and maintain their own website, this might be the choice I’d use for a columnar layout – because it can be done without having to edit HTML at all, as long as the default list style is set to display in columns.  Of course, this would involve knowing the client’s content and whether they are likely to need bulleted / numbered lists in their content as well.

The code I might use to display a list as a series of columns is as follows:

ol { list-style : none;  width: 410px;  height: 400px;  padding: 0px; margin: 10px; }

This creates an ordered list of a fixed width and height, with no “bullet”  number at the start of it.

ol li{ margin-left: 10px; padding-left:  0px;  padding-bottom :  10px;  width :  150px;  float :  left; }

This creates fixed-width ordered list lines, and hitting “enter” will create a new column.  Of course, this might require the use of <br /><br /> (shift-enter in most content editors) to imitate a paragraph break within a single column.

Both of these methods are not without their drawbacks,  particularly in terms of  the height of each section  - it can be difficult to break in the middle of a line and present columns of equal height – but until browsers catch up with CSS 3, this may be an acceptable work-around.  If you have alternative methods to creating columns in CSS 2 please do feel free to share in the comments below.

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?