Are retailers missing a trick with M-Commerce? is a post from WMpS, your one stop digital agency.

Well that’s what John Gillen, Retail Industry Head from Google said last week at the BRC’s Multi-Channel Retailing Conference. Fear not, Gillen didn’t really mean that multi-channel was dead. He was actually referring to the fact that the way in which people shop is changing and very soon multi-channel will no longer be a buzz term but the norm.

It became evident from the speakers last week that any large-scale retailer worth his salt has to embrace multi-channel. Shoppers are no longer sticking to one particular channel in which to engage with a retailer. What seems to be happening is that customers are combining shopping channels in order to make an informed decision: get the right price, an item out of stock instore or the correct size. Shoppers want to be able to access products whenever and wherever they are. In fact according to Google 43% of people are using mobile in stores to do just that.

Click and Collect

The excellent speakers at the conference had some compelling evidence to back this up. Simon Russell , the Head of Multi-Channel at John Lewis Partnership  showed that 89% of JohnLewis.com customers also buy in the shops, 51% research online and then buy in shop and 24% of shoppers buy online and the collect in store. Overall John Lewis customers shopping via multi channels spend more on average than single channel customers and were the fastest growing group of consumers for the retailer during 2010.

Russell believes that ‘Click and Collect’ will be the big win of the future driving people from behind their computers and back into shops. Of course the advent of m-commerce will help the development of this concept tremendously as shoppers on the move can check something out online and then pop into the shop to purchase instantly and Gillen stated that he believed  mobile was at the centre of both on and offline commerce. Click and collect was John Lewis’s fastest growing fulfilment method during 2010 showing growth of +120%, representing 16% incremental sales.

Tony Stockil of ecommerce consultants Javelin Group agreed with Russell believing there is huge hidden value in the web to store process, as a great online presence can influence not only ecommerce sales but also in store revenues.  He predicts that more and more retailers will take the same road as Argos with their click and collect approach, as the concept allows retailers to have less floor space.

So what does this mean for Ecommerce?

Well in a nutshell it means that more than ever an effective and engaging online presence is essential as ecommerce has a huge part to play in multi-channel success, driving sales both online and offline. Last week Drapers published their Etail report which highlighted this issue even more.   Over 60% of the people who responded to the 2011 survey agreed that they were more likely to make a purchase online and offline when a website was brought to life with engaging content and stylish visual imagery; and over 70% also agreed that they preferred sites with interactive browsing and engaging content. Another research study by ecommerce solution supplier GSI Commerce has also found that 40% of customers would avoid purchasing if they saw no lifestyle images of products on a website and 48% would not purchase if there was only a single product image available to view.

Back to the Drapers Report 34.85% of online visitors used a brands website to see what products would be in store and 31.95% said they would get to the point of checkout and then decide to buy in shop. The Drapers report presents compelling evidence to suggest that ecommerce is having a much wider impact than merely driving online sales. However, from a different perspective, Tim Curtis, Chief Executive of catalogue retailer Lands’ End who spoke at the conference last week also pointed out that 58% of Lands’ End’s online sales were driven by their catalogues and that they could use the catalogue to predict their AOV. Their catalogue and website working hand in hand to convert sales.

This then suggests that online content is not only crucial to drive sales across all channels but it also needs be an effective mechanism to convert customers who are directed there via another channel.

Curtis believes that the e-catalogue will come into its own with the iPad as the functionality is ideally suited to turning pages and browsing. Increasingly websites are looking to magazine style content and in my last post I discussed an increasing use of editorial to engage online customers. However, good quality lifestyle imagery can be incredibly powerful and if used effectively supersede the necessity for additional content.

Retailers are quickly recognising that imagery is becoming increasingly important to communicate their brand values and sell the ‘lifestyle’ to customers and if Curtis is correct this will only increase as more and more consumers start to shop on mobiles and tablets.

In last week’s Drapers Danielle Pinnington Managing Director of shopper behaviour research agency Shoppercentric said “The trick of web merchandising is to ensure the products look fantastic online – good enough and easy to buy immediately, or at least eye-catching enough to inspire a store visit. Merchandisers will know which items are the best-sellers. So how can the limitations of a PC, tablet or mobile screen be overcome to present hot items, suggest outfits, and give enough visibility to engage customers? This is the challenge to retailers.”

So how can websites do this?

Online Merchandising

The evidence for rich and engaging content suggests that online merchandising will play a crucial part in a retailer’s multi-channel success. As Drapers pointed out last week retailers are beginning to understand that ecommerce sites are a powerful mechanism to drive traffic in stores and many are tackling this challenge through the presentation of their merchandise. Retailers are making concerted efforts to speed up the process of browsing looks to making a purchase through ‘Get the Look’ functionality and TV.

Pinnington told Drapers that retailers offering ‘flat’, thumbnail style product presentation, without rich media content, total outfit ideas, or new and ‘just in’ features were missing sales opportunities. “Thanks to sites like Asos and My-Wardrobe, shoppers have experienced the kind of content and functionality that is possible online, so expectations are high, some retailers don’t have the physical coverage of stores – John Lewis for example – so it’s even more important for these sites to seize the merchandising opportunities.”

H and M and River Island both have similar ‘shop the look’ features with great imagery that will take you directly to the styles shown. Net-a Porter has just launched a digital TV station on its site, which has taken a magazine format to a whole new level. Visitors can shop their favourite designers as they browse glam and informative video content and cleverly as you are viewing, a selection of relevant products pops up handily at the side for you to make purchases in only a few clicks. French Connection’s Youtique which Tony Stockil discussed at the conference uses elements of Net-a-Porter’s fashion TV and uses the social media channel YouTube to give fashion advice and styling tips alongside convenient links to purchase. Drapers predicts, that web-enabled TV is the future and retailers such as Marks and Spencer, Net-a-Porter and ASOS are already nudging in that direction.

Digital merchandising has a way to go but it is certainly taking strides forward. Next in particular have really got it sussed. The site has fantastic use of lifestyle imagery which is easily navigated and allows you to purchase the entire look in one click as opposed to jumping backwards and forwards from item to item. The dynamic and visually inspiring ‘catalogue’ style spreads make browsing the store incredibly easy.

So is Multi-Channel is dead?

Well given the evidence I would say definitely not and I think multi-channel will only continue to develop as shoppers expectations continue to rise and as devices that facilitate shopping on the move increase in popularity. I think Gillen could be right in one respect as I believe there could certainly come a time (and probably in the very near future) when the way in which people shop through a variety of channels will be the norm and it will be taken for granted that they could access products via so many methods. After all, the evidence suggests we’re already out there shopping in that way already.

Multi-Channel is dead…. is a post from WMpS, your one stop digital agency.

Choosing Your Hosting Company

Once you have a domain, you need some where to place your sites html files so that they are visible on the internet to potential users. There is a bewildering amount of options available and a lot will depend on the websites requirements, content, text, images, video, size and expected traffic levels. At this stage you might not have answers to a lot of these questions but I will give you the lowdown on it anyway.

Essentially a lot of hosting companies offer a large amount of disk space to store your site on, but they also include very tight restrictions on resource usage. Resources get used up when people visit your site so the more visitors you website has the more resources you need available to make it run effectively. Available resource also gets used up if your site is not coded effectively. For example if you have resource heavy scripts, large databases and runaway search bots combined with large traffic volumes, you need to rethink your hosting set up. You can of course pay more to have dedicated resource or your own server but it is likely to be a lot easier to simply clean your site up. Then you only need to worry about a new server when traffic levels grow, and that is no bad thing to be facing. I will go into the different package options available later on.

Hosting Platforms

The next decision is which platform you should run your website on. There are lots of different platforms available, but the main two offerings are a Linux server which runs Apache or alternatively a Microsoft Windows server which usually runs IIS (Internet Information Services). Apache and Linux are open source and therefore free whereas Windows and the IIS set up require a license from Microsoft. This means hosting on Linux servers is usually cheaper although Microsoft claim there setup up has advantages.

In the industry IIS is viewed as being more secure and reputable due to the license and association with the Microsoft brand although the same argument is also uttered by Linux supporters who argue you can get better results from the Apache platform. Personally I think Linux is the best choice for a small microsite as Apache is the natural platform for PHP applications to run which opens to a multitude of free open source software to run forums, content management systems on online stores. If however you have built web applications using ASP.net or other Microsoft technologies, then these do run best on IIS and that should be the choice of server for you.

Control Panel

To help manage your account, web hosting packages usually come with a control panel. The most popular is cpanel which is an open source application for Linux. Essentially the control panel allows you to access your website and the files in a user friendly way. It allows you easy ways to install new programs on the server and offers a simple way to set up email accounts, alter forwards and add or administer databases.

Server Set-up

Once the platform has being decided on, then your next choice is what type of server setup or service you are going to get. This is where it gets more confusing. In the simplest terms possible, you have three major options: Shared, VPS (Virtual Private Server) and Dedicated. This then trickles down to other variants such as hybrids, clusters, cloud, failovers, collocate, reseller and more but we’ll ignore this for now. I have briefly summarised below what each option involves:

Shared Servers

Having your account on a shared server means your site is hosted on the same server as many other customers. This could mean there are 100s of websites also being hosted on the same server (all using the same IP address). Shared hosting is usually the starting point for a small website. It is low budget with packages available for a couple of pounds a year.

A shared service isn’t bad, but there are a few pitfalls you should be a aware of if you chose this option. As with anything the quality of the service can vary from provider to provider and this is especially true for hosting. How many sites each server holds, allocated resources for each site and database size allocation all can greatly affect your website. Because it is a budget option as well, if the site starts to get a reasonable amount of traffic to it you will likely be asked to upgrade as it will start to slow down the other sites on the server as well.

A lot of companies offer massive amount of disk space and bandwidth, but be careful as it is not even possible to offer unlimited bandwidth or space at this price so it is only being offered with the expectation that you will never use it. If you do they have some many resource restrictions that you will get shut down (this is very much the same as unlimited data usage on mobile phone internet price plans, where in reality if you use more than a reasonable amount they will disconnect you).

This process is referred to as overselling. For example, a hosting provider has 100,000mb of disk space on his server to sell and sells packages that are offered with 10,000mb of disk server space. Logically he can only place 10 accounts on this server, but to do so would either not be profitable or even economically viable, so the normal thinking is that the customer is never going to use their allocated 10,000mb of disk space so, they resell the same 10,000 several times over, maybe having 30 or 40 accounts on the server.

This can lead to server overcrowding which manifests itself as slow performance and higher downtime for your website. Also with more accounts live there are more chances of security breaches to one of the sites that can lead to problems on yours as well. Last but not least all the websites on the server all share the same email IP address, so if just one single account starts being naugty and spams out ropey email and gets blacklisted, every account on the same server will also get blacklisted meaning you will have problems with your email sends as well.

So essentially a shared server is fine for a simple website or blog that doesn’t have hundreds of visitors a hour, but if your site is likely to have a reasonable amount of traffic, you best looking into another option right from day 1.

VPS

The next step up from a shared server is a VPS which is a single server that has several mini virtual servers placed onto it, the amount car vary from hybrids that have a maximum of just 4 VPS on them. The VPS are great for giving the control of a dedicated but without the higher costs associated with them. A VPS is self contained so that within that space you can add your accounts and if an email account on another VPS is blacklisted on the server, it won’t affect your account. A VPS is ideal for website accounts have out grown the shared server environment and need some of the features of a dedicated server, but not quite ready for the large cost increase.

Dedicated Servers

The highest spec of service is the dedicated server which essentially means you get a server dedicated to yourself and your website. The costs will vary greatly depending on the specification of the server and if it’s managed or unmanaged. A dedicated server is really only for a person who has a lot of resources of has good technical knowledge if you are to manage yourself. You will really only need a dedicated server if your website is large or has a lot of visitors and have the resources to pay for it.

Next Week

Next week I will expand the guide to talk about the process of getting a website up and live once you have your domain name and hosting set up.

Making Your Own Microsite – Part 2: Website Hosting is a post from WMpS, your one stop digital agency.

I don’t know whether it’s because everyone’s focus has switched to mobile and iPad apps, or if in a rush to enter the ecommerce arena companies are failing to do their research, but I have been consistently disappointed this year when long-awaited websites from retailers such as Selfridges, Whistles, H&M and Zara have launched with problems such as broken links, poor usability and a complete lack of site search. Surely the time has come for retailers to learn from the mistakes of others and launch innovative, engaging websites first (or even second!) time around?

What are retailers (still) doing wrong?

Unclear Navigation

Culprits: Selfridges, H&M

The heart of a website is its navigation. This is the one area that consumers come back to throughout the shopping process, for everything from initial search to tracking back through breadcrumbs and defining their thought process. Navigation no-no’s have come from Selfridges and H&M, the latter who use ‘Divided’ and ‘L.O.G.G’ in their navigation, both sub-brands which would mean nothing to the uninitiated consumer.

Poor / Non-existent Site Search

Culprits: Gap, BooHoo.com, Uniqlo, H&M

Onsite search is increasingly being used by consumers to find exactly what they want quickly and efficiently. Consumers who enter a site looking for something specific are already a step ahead in the purchase process so have a high potential for conversion if their needs are met well. The likes of Gap, Whistles and Uniqlo have all omitted a search box from their sites, immediately alienating many purchase ready consumers. Whistles is particularly frustrating as it offers no refine functionality either, meaning a search for a red top could last hours (or until you get bored) scrolling through pages of irrelevant products.

Lack of Consumer Engagement

Culprits: H&M, Zara

In a socially dominated web customer engagement is key. There are a multitude of ways to connect with consumers, through blogging, reviews, games, competitions and linking into social media. Consumers demand information at every step of the purchase process. Although Zara promotes its presence on social media channels such as Facebook and Twitter the site lacks the final bit of integration that brings consumer opinions together through ratings and reviews of their products.

Poor Product Showcasing

Culprits: Jaeger, H&M, Zara

Not every garment or accessory needs to be displayed on a model with a catwalk video to boot. But consumers need to be able to see the whole product, including the back to make a proper judgement about it. Jaeger for example, shows consumers the product from a front view, with no ability to spin or rotate. This is particularly unhelpful when looking at a skirt or shirts without knowing whether there are darts or a slit in the back.

Ignoring SEO

Culprits: H&M, Whistles

Flash-heavy, copy scant sites are destined to perform badly in natural search rankings. On launch day H&M’s transactional site didn’t even appear on the first page of Google’s rankings for the brand name. While flash may look enticing in theory, in practice it breaks nearly every search engine optimisation rule in the book; and that’s before I even mention the iPhone for mobile browsing…

What are the ‘website essentials’?

Before beginning to think about new and innovative features that will enhance the customer experience and differentiate a website from competitors it’s crucial that retailers get the basics right. By disregarding SEO and Usability best practice it’s unlikely that any website will attract large amounts of new customers; and by failing to engage consumers and showcase products it’s even less likely that customers will come back. It is important to remember that consumers shopping online want to combine all the positive aspects of an offline purchase with the ease and efficiency of shopping on the web. Best practice needs to be integrated into a websites design from the very start of the process; and the customer experience should always be at the forefront of an e-tailer’s mind.

Find and browse products easily

New customers won’t be aware of ‘brand language’ such as specific collections or unusual terms for product categories. They will expect to be able to find the product they are looking for through a clear navigation and refine feature. Conversely, current customers who know exactly what they’re looking for may want to search straight from the homepage by product name, type or even code. Both types of consumer need to feel valued and be able to find the products they need easily to facilitate an efficient purchase and encourage them to return to the site in the future.

Examine products

A major disadvantage of shopping online is the lack of sensory cues available to consumers. This needs to be counter-balanced with as much information as possible about the product so consumers can virtually ‘try it on’. Product details pages should display the product from different angles, in relation to a body and in combination with other clothes and accessories. New technology now allows retailers to display video, rich media zoom and 360 degree views so there really is no excuse to not match, or improve the offline shopping experience.

Share the shopping experience

Shopping offline is predominantly a social activity. Consumers are influenced by the opinions of others, whether they are friends, family or other shoppers that have already bought the items in question. If consumers can find and share these opinions it’ll increase the likelihood of purchase, and decrease the risk of return.

Securely make a purchase

One of the top reasons cited by consumers for not purchasing online is a fear for data security. The checkout process is where consumers are most likely to terminate a purchase, so it needs to be clearly marked as safe and secure and should encourage users through each step with a minimum amount of problems.

Poor Web Design is Still an Issue is a post from WMpS, your one stop digital agency.

During the lifetime of the website you are likely to want new sections adding to incorporate both changes in available web technology as well as updates to your company’s presence online. Most of these will and should be done on your website but from time to time there may rise an occasion when you want to try and set up your own microsite or mini website. This site could feature spin off content or be a news / blog article, or even just feature things you want to put out there but just not on the official company website. Whilst in certain circumstances this would again make sense to bring in an experienced digital agency to create this for you, often it is just as easy to do this yourself.

When deciding to have your own website, there are several steps to take on the journey from inception to completion and many different options available. Each decision can be made simpler if you have had recommendations to go on or previous experience, but there are always other options out there. For example take the simple choice of selecting a domain name and hosting company. Which address do you pick and what are the benefits of selecting it? Are you going to get a .com, a .co.uk, .net domain or even one of the newly promoted .co extensions? Will you use a Web server running Apache or Microsoft IIS, or even running a dedicated server or simply buy space on as shared server platform.

Well we are going to simplify the process for you now so you are as informed as you can be if you decide to go down the route of creating your own site.

Domain Selection

The first process is to select an appropriate domain name and TLD (top level domains). The TLD is essentially the extension you want to use like a .com, .co.uk or even a .biz. In my example here I refer to the domain name as the characters between the www. and the tld so in our case wmps.

TLD

Firstly I don’t want to bore you with the technical details of exactly how a domain name works and what each part does specifically, but if you do want to read more about that visit Wikipedia and see the article on top level domains http://en.wikipedia.org/wiki/Tld.

There are lots of different TLDs and which one you choose to use for your website will depend on who your site is aimed at, the country it is focused on and lastly if it is available! Usually the most popular domains in the UK are .co.uk and .com. This is for good reason though. The .co.uk is the official domain for a UK based company and should be used in nearly all circumstances for a UK based site. A .com is technically for a commercial company but its early adoption by most companies has led to it becoming popular across the world particularly with international companies. It is also popular with websites in America although the official domain for a United States website is a .us although you will rarely see this used.

Be very wary about anything else though if you are a UK based company. TLDs such as .net, .biz, and the new .co are not well received by the search engines in the UK and also have a perception amongst internet users as being spammy, tacky or associated with less than reputable sites or simply where someone has refused to pay for a .co.uk or .com which then makes you question the company anyway.

There are of course many exceptions to this but why go down that route? The last domain TLD which a lot of hosting companies are promoting currently is the .co and why they are is beyond me, its expensive as well as being the official domain TLD for Columbia so if you want your UK site to rank well in the search engines and not to have people suspicious of your company I would avoid this one like the plague. Start to consider it when your company sets up a Columbian office though and it needs its own site.

Domain Name

Selecting your domain name is the next decision you need to make and there are a few factors that should affect this decision. Firstly you need something that reflects the brand or websites purpose and this is probably the most important decision. Obviously the shorter the domain name the harder it is to get due to the popularity. Remember you can use hyphens in the url to break up words and if the one you really wanted is gone a version with hyphens might do instead.

Also you want to get a domain that is easy to remember and not too long; you want people to remember the URL and be able to reproduce it from memory. The other thing to consider is that you can’t take a domain name that contains a registered trademark or brand name (it is unlikely there are many of these left but just incase). You shouldn’t need to do this anyway as your product or business name is subject to the same laws anyway about copying someone else’s trademarked terms.

Lastly when making your choice you should take into account the SEO value of the chosen URL. If for example the content of the site is about books, like a book blog for example then an ideal domain name would be books.com or book-reviews.com. Obviously those domain names are unlikely to be available but you can still keep it SEO relevant by including relevant keywords in. For example for the book blog something like http://www.medievalbookworm.com that includes the name of the blog but also contains the book keyword.

Buying Your Domain

The companies that you buy domain names from are called Registrars. There are 100s of companies selling domain names and whilst selling you the domain name they look to resell you on their services. In fact you can quite easily become a domain selling company yourself. The companies register with the appropriate internet registry in their country. For the UK, this is Nominet and handles all domain name registration for any TLDs that end in .uk. In order to obtain and sell domains with a .uk, you are required to be a member of Nominet.

The reseller business is very difficult and the margins are tight though which brings me onto the next problem. With domain names its worth bearing in mind that a lot of hosting company’s make little or no profit selling domain names, they are offered at bargain or as loss leader prices so that they can sell you more profitable services like hosting or SSL certificates.

When obtaining your domain name it is worth investigating any hidden costs, e.g prices to transfer the domain to another registrar and what control panel options they allow you for example. I usually stick to the bigger sellers as it is better to have the confidence that your registrar is not going to disappear down the line, forcing you to have to get in contact with the governing body to gain control of your TLD. Usually the smaller sellers just resell the services of a company such as ENOM, for .co.uk so why not just go direct.

A .com can be purchased for either one year or more whereas a .co.uk is limited to 2 years minimum. The difference in price between domain sellers can sometimes be quite staggering considering in most cases all you are paying for is the standard ownership of the domain so it is always worth shopping around.

Next week:

Part 2 – Website Hosting

Making Your Own Microsite – Part 1: Domain Names is a post from WMpS, your one stop digital agency.

In future, not only will designers have to start using HTML5 in place of flash videos, but will also have to consider changing the way they design web pages to fit the iPad. The iPad has a high-resolution, 9.7-inch LED-touch-sensitive screen with a resolution of 1024×768 pixels, which is able to zoom with the squeeze of two fingers and allows for both horizontal and vertical style viewing.

This poses some interesting problems for web designers because the size of the site changes when the orientation of the iPad changes and could lead to the need to design two completely different layouts. Unlike present websites which are designed primarily for widescreen landscape format, the iPad brings an A4 magazine style format of portrait viewing.  In short, you can read the entire page in one go.

When designing web pages for the iPad, it’s advisable to stick on a 960 pixel wide design so that it fits into the vast majority of screen sizes and will work perfectly with the iPad. Future designs will need smart and fluid width layouts that can easily work both ways, adapting the content according to the screen resolution, so that you can view it either in landscape or in the portrait mode. Using a smart combination of CSS and Javascript, the user experience can improve drastically. As for the navigation, it’s better to reduce it to a left side bar in landscape mode and and pop it over in portrait mode. Note that Safari (the browser that the iPad runs) always calculates device width based on the portrait orientation. If you rotate to landscape mode, the content is not reflowed, but scaled up to fit the wider screen.

As the iPad is a touch screen device, users will be using fingers instead of a mouse pointer to interact with the page elements. The mouse pointer is more precise when hovering over and clicking on menu items and buttons.  In comparison, the human fingertip is a lot larger and could also obscure the visibility of elements when touched.  As a result, when designing for the iPad, not only will clickable links and buttons needed be designed bigger and clearer but there will also need to be more space between elements so that large fingers don’t end up clicking the wrong button or link.

Designing for the Apple iPad is a post from WMpS, your one stop digital agency.

What is HTML5 exactly? Well… it’s the next major revision of the HTML standard. It will be the standard for structuring and presenting content on the internet. According to the W3C (World Wide Web Consortium) timetable it will reach W3C Recommendation level by late this year.

HTML5 Search Volume Trends - Last 12 Months

It will include a number of new markup elements, revisions and APIs to meet the demands of modern websites from a layout and functionality perspective. Let’s go through some of the key elements of HTML5.

New Simplified Doctype

Let’s be honest – did anyone remember the old doctype? It wasn’t the most memorable of elements. Fortunately the new doctype declaration is much simpler:

<!doctype html>

If we compare this to the existing HTML 4.01 doctype we can see how much of an improvement this is:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

New Structural Elements

The good old <div> was used for pretty much all styling and structural elements of a webpage in the existing HTML standard. To improve the semantic structure of a webpage HTML5 introduces a number of elements. These are:

These elements are flexible and can be used more than once on a webpage. For example you could have multiple sections each with their own header and footer.

Form Validation

Creating forms from scratch was always somewhat of a pain. Validation was often done with JavaScript and varied based on the requirements of your form. Thankfully this has been revised and our sanity can be saved. HTML5 introduces a number of new form input types and attributes. Let’s go through a few of these:

• Types. Textboxes can now have a type assigned to them such as email or phone. Adding these types will trigger the appropriate validation when the form has been submitted. For example it will validate that a textbox value with email assigned is actually a correctly formatted email address.
• Placeholder. To improve usability this is the greyed out text which appears by default in a textbox. When the textbox is selected the text disappears allowing user input. Be cautious with the placeholder attribute though – it’s not commonly supported by all of the major web browsers at the time of writing.
• Required. Adding this to a form element will not allow the form to be submitted without a value.
• Autofocus. Adding this to a form element will select it automatically when the page loads. Think of Google – when you open up a new instance of the search engine the search box is automatically selected ready for you to enter a keyword.
• Regular Expressions. If an element of your form requires a nifty bit of validation using a regular expression, the ‘pattern’ attribute can be added which includes the regular expression directly. As expected the element will be validated against this expression when the form is submitted.

This sounds great doesn’t it? You can integrate validation at the same time of writing the form.

Audio and Video Support

This has been patchy at best in the past and often requires third party plugins to work. HTML5 introduces two simple elements for these; the <audio> and <video> tags. YouTube now uses the HTML5 <video> tag for all browsers which support it. Interesting the <video> tag supports a preload feature which as the name suggests, preloads a video on a webpage. This improves user experience and a few seconds of their precious time. Both the <audio> and <video> tags include the controls attribute which renders a control element to the media source (play, stop, volume control etc).

Summary

Hopefully you have learnt about some of the steps forward in HTML web standards for the future.

As exciting as these HTML5 changes are, it’s important to end with a note of caution. Why? Well as it stands at the time of writing browser support is hit and miss. However as HTML5 gets closer to a more complete version browser support will increase. Keep an eye out on this useful browser support checklist which tells you what HTML5 elements are currently supported and what is not: http://www.findmebyip.com/litmus/#target-selector

HTML5 Quick Guide is a post from WMpS, your one stop digital agency.

Beginning with AJAX

AJAX (Asynchronous JavaScript and XML) is a group of interrelated web development techniques used on the client side to create interactive web applications. Ajax allows web applications to retrieve data from server asynchronously in the background without interfering with the display or behaviour of the existing page.

The preceding chart shows how Ajax works. The browser listens to the event and creates an XMLHttpRequst object when the event is triggered. XMLHttpRequest object is the object that used to communicate between server and browser instead of HttpRequest, which would refresh the whole page. Most modern browsers have a built-in XMLHttpRequest, but IE6 and many earlier versions don’t support this object.

If there is only one Ajax application on your page, the above concept would be easily implemented by couple lines of simple JavaScript codes. But when your project includes large Ajax usages such as Google Docs, or Google Wave, it can be very difficult to manage your JavaScript.

Google Website Toolkit

GWT (Google Website Toolkit) is a set of tools that can compile the Java source code to JavaScript. In other words, web developers can create and maintain complex JavaScript front-end applications in Java. Also, GWT supports many ways to communicate with a server. All of these are asynchronous, which means all GWT application would be all AJAX-based.

The Benefits of Using GWT

GWT is a Java environment, which is well known for its clear object concept and easy maintenance.  While in development, you can run your Java code in a special “hosted mode” browser with all of the mature, sophisticated Java debugging tools you always have available.

GWT support many ways to process asynchronous communication between the browser and the server. One of them is the RPC mechanism, which defines interfaces and implementations for the server functions, and code will be generated to allow your client code to call them as if they were simple local methods. This replaces defining XML or JSON data formats for requests and responses.  Meanwhile, GWT also support the JSON and XML over HTTP.

Almost all AJAX developers have suffered from writing JavaScript to support all browsers. GWT, like any other good AJAX framework, will handle this for you.  The GWT has a built-in GUI library that would allow you built a web application like swing and swt. All of these would be able to transferred to standard HTML and be embedded into your site.

More importantly, GWT applications provide true interactivity with lots of code being executed on the client, reducing server-side interaction to a minimum. As a result, it provides very good usability and enhances the user experience.

Summary

There are lots of good reasons to choose GWT, and these are just scratching the surface. With the increasing popularity of cloud computing, more and more applications are on track to become web-based. GWT would be a very good framework to help you build your “real on-line application”.

Why Use GWT for AJAX Applications? is a post from WMpS, your one stop digital agency.

As a result, most people get lost in the important page design and build, focusing efforts on the homepages, landing pages, product pages and anywhere else that the designer has the chance to use cutting edge techniques and ideas to make the site stand out. Sadly this often means other “less important” pages are only given minimal attention. This can be true of any ancillary page like terms and conditions, privacy policy, or faqs.  Whilst these contain key information, they are often not done in the most inspired design styles. Some pages are given even less attention than this and are nearly always overlooked. Examples of this include order confirmation pages, form submit pages and the dreaded 404 page. The 404 page is the focus of my article today.

What is a 404 Page?

For those of you who are not sure what a 404 page is, it is the page you are shown when you visit a URL on site that does not exist. It is often referred to as 404 Page Not Found. The reason the page is often given little or no attention is because, in theory, everyone hopes the customer will never land on one of these pages.  The processes put in place should ensure this never happens. Sadly it will happen and can happen naturally if a customer thinks they know one of your web pages and types it in directly or you have a product or service that finishes but has no new equivalent page to 301 redirect to. So rather than pretending it’s not going to get used and completely ignoring the page, take the time to make the 404 page on your website as friendly to users and search engines as possible.

Things to consider!

One of the main things to ensure you have got right before looking at the page content or design is that technically everything is working as it should. Search Engine Watch discuss the best practice scenario and point out that when a user types a URL that does not exist:

“the server should respond with a special “HTTP Status” header value of “404 Not Found,” which may also be followed by custom error-page body content. Incorrectly configured Web-servers that respond with a status header value of “200″ (or any other erroneous value) are exposed to significant risk with respect to search engines’ “duplicate content penalties.” This is because the identical content (in this case, the error page content) would be available under a potentially infinite number of URLs.”

Whilst this is tailored towards search engines, it is also important for users. Whilst ensuring the code returned to the search engine robots is what they expect to see, a user also needs to understand the link they tried to access does not exist and that instead there are a number of options for them. The page should not automatically redirect them back to another location; they will not understand why they have arrived there and may believe it is due to an error.  They’ll be left wondering where to go next. This will likely result in the user pressing the back button and attempting to find out what went wrong or simply giving up on the search all together.

Not only this but an automatic redirect has implications for SEO as well. The problem is that if you use a redirect to pass PR from an error page to a normal page, the redirecting page will likely return a 200 OK or 302 Redirect code, rather than a proper 404. This can mean the pages end up being indexed and end up looking like duplicates of your homepage to the search engines. Don’t run the risk of this happening and instead present the user with a correct 404 page with no redirect in place.

404 Page Customisation

As previously mentioned a 404 page is often neglected by designers, and whilst it does not have to be anything amazing looking, there is no reason why it can’t look nice.  This will both prevent frustration and keep customers happy looking round your site. Some examples of well designed 404 pages can be seen at smashingmagazine.com if you are looking for inspiration to make a page that will stand out.

But you don’t need to go this far to make a page that works well and often you will have more success keeping the page in line with the branding of the rest of the website whilst keeping the message simple. The main rule is to customise the page to some level, do not leave in the standard 404 page as it looks unprofessional and the error looks more serious to a user than a page that has been put in place to cater for the problem.

A good example (the WMpS example!)

With all this in mind something along the lines of the following would be appropriate in terms of the content for the customised page, well obviously I would think so as this is what we have on our website!

As you can see we include links to key sections to help the customer get back to a suitable place in the site, i.e the homepage, blog home or contact us. If the site has a good one and it is large enough a sitemap link can also be useful here.

Some other things to note

It is worth tracking and keeping a note of all the page 404s that users stumble upon. You will start to identify key pages that would be suitable to 301 redirect and others that can be left alone. Whilst you should not be getting many of these unless you are a large retail site with lots of products coming on and off the site, it does happen and it helps to be proactive about it rather than just accepting traffic losses to these dead pages.

For more information on implementing a correct 404 page or anything else website / online marketing related, please feel free to contact us.

Website Basics: 404 Page Best Practices is a post from WMpS, your one stop digital agency.

JavaScript and CSS Optimisation

• Combine them – Combining scripts reduces the amount of HTTP requests your website has to make which can lead to a significant speed gain. Consider placing all of your scripts into a single script and all CSS into a single stylesheet.
• Make them external – Placing your scripts and style sheets into external files allows them to be cached by your browser which makes your pages faster. It reduces the file size of the HTML document too. All JavaScript and CSS which are placed inline are downloaded every time your page is requested.
• gzip them – Compression reduces response times by reducing the size of the HTTP response (up to 70% in many cases).
• Minify them – This is the process of removing comments, spaces and tabs for example from JavaScript and CSS. It improves page load speed because the size of the files have been reduced.  Google has an excellent JavaScript optimising tool which allows you to convert your existing JavaScript and minify it at simple and advanced levels, allowing you to compare it before and after along with a % file size loss. Please not that it’s important to backup your old scripts and test your site once you have tried these new minification techniques.
• CSS at the top – Whilst not actually being an area which technically improves page load speed, placing CSS stylesheets at the top of the head section on a web page gives the impression that it is loading faster.  This is a simple method of improving user experience.

Image Optimisation

• Compression – Choosing the best image type for your images will improve the file sizes images and therefore improve page load speeds. There are three common image formats used today: JPG, GIF and PNG. JPG works best for photographs or images with gradients. GIF works best with flat colour images with sharp edges. PNG formats allow you to add transparency to an image. When exporting try reducing the quality or colour palette size of the image as much as you can before it is noticeable.
• Scaling – Scaling images with HTML isn’t recommended. Save the image at the dimensions you require before inserting it into your HTML.

HTML5

• Storage – Whilst not supported by all browsers yet, the new HTML5 has a web storage feature which provides a client side method for saving session information. This could have many avenues for improving page load speeds and user experience.
• Link Prefetching – Again whilst not being fully support by all browsers yet (frustrating!) this is the method of prefetching documents on your website such as the next page in the sequence. When a user visits this prefetched page it can be served up from the browser’s cache which will lead to a significant improvement in page load speed for users.

Whilst not going into too much detail, I’ve gone over some of the most common techniques for improving page load speeds along with a couple of exciting new and not yet fully supported features in HTML5. Hopefully these have given you an incentive to improve user experience on your website along with making the web a faster place!

Tips for Improving Page Load Speeds is a post from WMpS, your one stop digital agency.