WMpS Blog - Surfing The Digital Wave » Website Design

Designing for the Apple iPad

Neil Taylor — Wed, 25 Aug 2010 14:59:03 +0000

With the growth of Apple’s iOS platform on the iPod Touch, iPhone and iPad, as well as the reluctance of Apple CEO Steve Jobs to allow Flash to be run on them, Apple is making a concerted effort to take on the might of Adobe and push the new HTML 5 web standards to the forefront of web technology. HTML 5 is the next major revision of the HTML web standard that is being developed to replace HTML 4 and XHTML. This new standard will allow video playback and drag and drop without the need for browser plugins like Flash and Silverlight.

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.

HTML5 Quick Guide

Matthew Redford — Fri, 20 Aug 2010 11:07:47 +0000

The internet is full of buzz words. HTML5 is certainly one of them and has been gaining exposure rapidly over the last 12 months.

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:

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

New Structural Elements

The good old

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:

Element	Definition
	Used for headings or introductory content
	Used for grouping a navigation or element
	Indicates a logical section of the page to improve the structure of a webpage
	Represents an independent piece of content
	Used for content slightly related to the rest of the page such as a sidebar
	Used to indicate a traditional footer which commonly includes copyright, links, website information, addresses etc

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 and tags. YouTube now uses the HTML5 tag for all browsers which support it. Interesting the 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 and 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

Why Use GWT for AJAX Applications?

Wei Shao — Tue, 17 Aug 2010 15:43:15 +0000

AJAX is a very attractive technique for many web developers. It allows users to interact with your site and communicate with your database without refreshing the pages. However, owing to their dynamic nature, Ajax interfaces are often harder to develop when compared to static pages. In order to reduce the complexity of development, people have started to build up some libraries to support AJAX, such as JQUERY and GWT.

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”.

Website Basics: 404 Page Best Practices

Alex Howland — Fri, 06 Aug 2010 14:37:56 +0000

Creating a new website or updating an old one can be an exciting time for many companies. It’s thrilling to see your ideas and updated branding going into a site that uses the latest technology to drive new business and leads to your company.

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.

Tips for Improving Page Load Speeds

Matthew Redford — Mon, 02 Aug 2010 12:52:21 +0000

Improving page load speeds on your website now has two clear advantages. It improves user experience and now search engines reward you for it (they punish websites with slow page load speeds). Optimising page load speeds should be an integral part of your website build. I’ve put together a list of tips and recommendations for improving page load speeds which are handy for integrating into new site builds or optimising existing websites.

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!

Model photography – Keeping ahead of the pack

Clare Blunt — Tue, 13 Jul 2010 08:00:59 +0000

This is something that we comment on regularly in the office when looking at current and potential client’s websites and how they display their products. Some choose to use manikins or an ‘invisible dummy’, while others have stepped up to show their garments on real models. However, of those opting for model photography some websites use full shots and some ‘chop off’ the models head. The general first impression of this is that it looks bizarre to have a top, a neck, sometimes a chin, and then nothing else. But I’ve recently been provoked into thinking about this issue further; in terms of costs, rationale and whether or not it makes a real difference to conversion and sales. With little evidence as yet to prove either way, we’d be interested to hear your thoughts and experiences of ‘head on’ vs ‘head off’ photography.

What is the real difference?

Ok, so apart from the visual difference there are a number of factors that affect both retailers and consumers, that should be considered in the decision process.

Costs

There are a number of additional costs that companies accrue when opting for full model shots. Beside the initial outlay for hair & make-up for the day it is also more expensive to purchase models (as you are paying for their physical image too) and it is likely that more work will need to be done post-shoot to touch up the images, such as misplaced hair, blemishes etc. As well as the extra costs involved in the shoot itself, even more expense will be incurred if companies own more than one brand, or project different ‘images’ with different lines of clothing. Different models will have to be used to ensure their image ‘fits’ with that of the clothing they are modelling; this also means more time is spent in the casting process.

Conversion

But the burning question is “Does it improve conversion?” If retailers are to invest in all the costs detailed above then they need to be justified with results. One argument for ‘head-on’ photography is that it allows consumers to identify with the model wearing the clothes, thus creating an emotional connection and increasing the likelihood of purchase. But even before getting down to an emotional level there are more objective arguments for increased conversion.

A typical in-store customer journey comprises of browsing, choosing, trying on and purchasing. It’s the trying on stage that is the most difficult in an online shopping experience; consumers who are unable to physically try garments on need to mentally engage in this action. Different skin tones, hair colours and styles all play a part in whether you perceive a garment to look good on somebody (or yourself) so the easier you make these to visualise in the consumer’s mind, the more likely they are to decide that a product will suit them and purchase it from your website. For example, if an olive skinned, brown haired consumer is browsing your website for a dress they are going to find it easier to visualise themselves in a garment if the model wearing it is also shown to have olive skin and brown hair. However, this perceptual process can also have the opposite effect. As in, if the model is the complete opposite of the consumer, they may find it more difficult to visualise themselves in the clothes, or even just dismiss it as something that wouldn’t suit them because the model is so different to themselves.

Which one to choose?

Being from a marketing background and having an acute awareness of semantics I think having model photography with the head on is a very powerful tool for retailers. It evokes emotion from the consumer; however this may either compel them to purchase, or completely change their mind on a product they may well have purchased had it been on a different model, or indeed shot with the models head cropped off. An important thing to remember with ecommerce is that consumers are trying to recreate their shopping experience without being in the physical store, so every little detail can make a difference.

As technology is advancing there are a number of ‘virtual changing room’ products on the market which can be put to good use by retailers. It may be that choosing to use ‘head on’ photography will draw attention and boost brand image and loyalty, while ‘virtual changing room’ solutions are used to enable consumers to literally see themselves in the garment.

But even if the head itself is proven not to increase conversion, are there other factors that are affected by the photography you choose? There is no doubt that it is more aesthetically pleasing to see a full person as opposed to half a head. It may prevail that once consumers are actually viewing products they convert at the same rate, but that they are more likely to visit or return to a site that is visually attractive; and one with which they can identify with the brand image, which is built upon by the model’s image. This in turn will increase brand loyalty and virtual footfall, so conversion may stay the same, but with increased traffic will come increased sales.

Our next WMpS VIP Seminar, including expert speakers on lifestyle imagery and 360° photography will inevitably lead to this topic being discussed further. I will be reviewing the event and any insights that come of it at the end of the month. Alternatively, if you would like more information on our upcoming events visit the Events section or feel free to contact us.

Embedding Custom Fonts with the Google Font API

Matthew Redford — Tue, 06 Jul 2010 10:04:30 +0000

We have always been quite restricted when choosing a typeface for a website. It’s got to be ‘web safe’ which means that a very high % of users will have that font installed on their computer – so that the site will look the same for just about everyone. To get around this many sites have simply added the font they desire within an image. This has implications – accessibility, page load times and SEO to name a few.

Embedding a custom font has been made easier with the CSS3 property @font-face. However for non-CSS3 browsers such as Interner Explorer it’s a problem (as it currently has around 60% market share too).

Google Font API aims to make embedding custom fonts, cross browser much easier. It doesn’t rely on JavaScript (which page load fanatics will like) and the available fonts are all open source so you can use them in your personal and commercial projects. One slight disadvantage is that there currently isn’t a great deal of fonts to choose from.

Adding the Google Font API to your website is pretty simple. You start by adding a CSS reference within the head section of your page.

Replace the font name with the exact name of the font within the Font Directory, remembering to replace spaces with a +.

Now add a reference to the font name within a CSS selector of your choosing (replacing the font name with the font you chose in the 1st line of code above), for example:

h1 {
font-family: ‘Font Name’, serif;
}

This example will give all text with h1 tags on your page the desired font. As the Google Font API works like this you can expand it by adding further CSS text properties such as text shadow for example.

Google often creates an app, website or API to solve a problem or issue which could be improved. Embedding custom fonts cross browser is certainly one of them and this solution works brilliantly. It should keep both designers and developers happy!

What makes a top ecommerce website?

Alex Howland — Mon, 24 May 2010 08:00:31 +0000

Around this time last year the Interactive Media in Retail Group (IMRG) launched the annual HOT 100 shops list in association with Hitwise. It’s coming around for that time again for the new 2010 results to be released and in preparation for the results we have been looking over previous year’s data and checking out the competition for the top spots.

How is the list compiled?

If you have just asked this question you are not alone. When first reading the article released by the IMRG last May it was as clear as mud what the measures of the rankings were. It’s only obvious if you keep up to date with the smaller quarterly top 50 reports as they use the same measures. Essentially it is purely based on traffic levels. Granted you could argue this in itself does not tell you enough. Sales are not discussed, so the site could drive millions of visitors but convert none of them. Also advertising spend is not factored in, so the company at the top could simply be the one spending the most.

The information is very useful none the less as traffic is a good measure of merchant activity. The study excludes any price comparison sites, Ebay and social shopping sites like Kelkoo. Essentially then what we are left with is the most popular shopping sites on the internet in the UK. It’s a good stake in the ground for the top companies to know where they stand compared to their closest competition. For us as an agency it gives us the opportunity to analyse the top performers and get further insight into what makes them the most popular with the UK population.

Who’s on the list?

The spots on both the quarterly top 50 reports and last year’s annual top 100 are mostly filled by the same usual suspects, and for anyone who hasn’t been sleeping under a rock for the last 5 years, they will not come as any surprise to you at all. Amazon are always pretty safe at the top and for good reason. Whilst personally I think the website has some shortcomings, it generally is a hive on constantly updated activity, great deals and the widest range of products available to man all on one website. The site naturally rank for pretty much any retail related term conceivable and will continue to do so, ensuring they get a large share of the search engine worlds traffic.

Argos and Play again are normally safe in the top 3 positions. The top 10 then sees a bit more movement but normally based around the same group of sites. Next, Tesco, John Lewis and Marks & Spencer normally feature in this mix with companies like Expedia and Thomson’s flirting around the 8 – 12 positions.

Which sites are working the hardest?

It’s fair to say for a site to have got in to the top 50 of such a prestigious list, they must be doing at something right. To be in the top 10 their website should generally be excellent. But there are some companies who really showcase the best that is on offer in terms of website design, functionality and overall ecommerce expertise. It is a good reason why they continue to be in the top 10 of the list and keeping on top of this will ensure they will be there in the future.
I have put together a list of what we think showcases the best that an ecommerce website can offer, from taking the best areas of selected websites in the top 100 list.

Littlewoods

The website littlewoods.com has lots of great features; combined with a wide product range and credit on offer to make purchasing easier during difficult times, the site naturally stays within the top 20 of the list. I think this is likely to be even higher when the new report is released based on increased offline advertising driving even more traffic to the website.

Whilst the website showcases lots of great features, such as the search function, well categorised navigation and well timed promotions, what we like best about the site is the integration of social media and reviews into product pages. Whilst the reviews are not in your face and put ahead of important product imagery or description, they are summarised on the product listing page and really add value to the product purchase decision. The ease of adding products to social networks allows popularity of the range to be spread easily and helps support their social media work being carried out which again is good.

John Lewis

Worthy of a regular top 30 spot, johnlewis.com is one of the best website designs out there. The are a couple of drawbacks to their offering. One is the product presentation which at times can be uninspiring for ranges that could really stand out. Generally the thumbnail view works but some of the ranges would certainly benefit from a magazine style layout to really showcase how an expensive home ware product or piece of clothing would look in a home environment or on a model. Other concerns are a lack of review feature and minimal use of video and audio on product pages.

Apart from the these points the website in my humble opinion has got to be one of the most compressively designed ecommerce websites out there, it contains excellent search refinements on product listings, making it simple and quick to find an exact product even if you didn’t know yourself it was one you were looking for. The basket is simple, clear and safe and the update on delivery costs and timings though out the shopping process ensure the customer is left satisfied and ready to purchase.

What makes Next really stand out is the product presentation. Balancing between thumbnail and magazine page layout, you are shown the most appropriate and inspiring view depending on what product range you are looking at. Keyword search is also effective and intuitive, allowing you to quickly find a product if you prefer not to browse and instead get straight into a specific product.

The homepage is kept very seasonal with a large space dedicated to constantly updated style news, meaning each time you visit the site you are presented with a new fresh look. The site is kept very stylish which is in keeping with the brand and the retail outlets that support the website. As one of our clients, you can argue that I’m extremely biased for saying Next’s website is one of the best out there, but then we wouldn’t recommend the functionality to them if we didn’t think it was the best and most effective (yes we do have the results to prove it).

River Island

The riverisland.com website is quite different to the other retailer’s websites, in that the whole website is built in flash. Flash is not search engine friendly and can cause major accessibility / usability concerns. The advantage is that it provides a very interactive shopping experience and in that aspect River Island certainly delivers.

What we like most about the site and what really adds to the shopping experience though is the “Style Insider” guide. This is actually on a sub-domain and not within the main flash area. Essentially it is a style guide and news area and contains all the information you need on how to match up outfits and style inspiration for different occasions. The section gives a real advantage to shopping on River Island and will undoubtedly help improve conversion on the website as the products featured in the style insider. The main drawback is that the products are not linked back into the website from the style guide as the flash area does not allow deep linking and instead everything goes back to the homepage.

Summary

Obviously the website features are not totally comprehensive and there are plenty of other sites in the list that have functions or designs that make them particularly worthy of a top spot in the hot 100 list. I will be following up this article after the new top 100 hot shops list is released, detailing some of the features on some of the new entrants or websites moving up to try and give some insight into how their websites have helped draw in the traffic worthy of a top 100 place.

Website Development Tips: CSS Compliant Contact Forms

Neil Taylor — Tue, 11 May 2010 08:30:51 +0000

This week’s development tip is how to build a contact form on your website correctly and that is most importantly fully css compliant. The traditional “old fashioned” way to build contact forms is to place all the input fields into cells within a table and space them out this way using cell padding. If this is the way you’re still building forms, you may be wondering what’s wrong with this method.

Well, it’s lazy, plus it is not using the correct web standards and is, quite simply, inelegant. Good practice web development is to separate content from presentation. In this way, just by altering a stylesheet the form can be displayed differently across a range of media, computer, iPhone, Android, etc.

First Mistakes

The first error that I see with many web developers is that they over complicate their mark-up. For example, if you are going to put a border around your contact form, many developers would put a

around the

The mark-up meets the necessary standards and is fully dda compliant. The code uses a fieldset which is used to logically group together elements in a form and draws a box around the related elements and is able with the element legend to define a caption for the form.

Within this, the field text is displayed using standard label tags.

Presentation of the form

We have the content in, next we need to consider the presentation. This is where we start using a few tricks. Let’s start with the containing boundary:

form {
width: 470px;
}

fieldset {
border:solid 1px #DEDEDE;
font-family:verdana;
font-size:12px;
color: #6b6b6b;
padding:14px;}

legend {
font-weight:bold;
margin-bottom:5px;
font-size:14px;}

The legend gives us our contact form headline. Now looking into the labels, we will float these to the left using the following code:

fieldset label{
display:block;
font-weight:bold;
text-align:right;
line-height : 15px;
width:115px;
float:left;}

and the smaller sub text should be as follows:

fieldset label span {
display:block;
font-size:11px;
font-weight:normal;
text-align:right;
width:115px;}

fieldset input, fieldset textarea {
border:solid 1px #cccccc;
color:#666666;
background-color:#F2F2F2;
font-size:12px;
font-family:Arial, Helvetica, sans-serif;
line-height:160%;
padding : 3px;
width:298px;
float:left;
margin:2px 0 15px 10px;}

fieldset textarea {
height:130px;}

fieldset p {
font-size:10px;
margin: 0px 0px 20px 0px;
border-bottom:solid 1px #dedede;
padding-bottom:10px;}

fieldset input:focus, fieldset input:active,
fieldset textarea:focus, fieldset textarea:active {
background: #fff;
border: 1px solid #595959;}

fieldset input:hover, fieldset textarea:hover {
background-color:#fff;}

fieldset .submit {
width : 100px;
margin-left : 125px;}

fieldset .submit:hover {
color : #fff;
background-color : #EB038B;
cursor : pointer;}

fieldset .spacer{clear:both; height:1px;}

The final form

That’s it, wasn’t so hard was it? The finished form should look like the following:

I’ll be back next week with more development tips, so be sure to check back then.

Website Development Tips: Horizontal Sliding Door Menus

Neil Taylor — Tue, 27 Apr 2010 10:17:45 +0000

Website design and creation can at times be an difficult task, so I am going to publish regular tips that can help you get the best out of your website. This week’s topic is building a menu using the best practice method.

The correct way to produce a menu is by using list item mark-up. One of the main reasons behind this is accessibility compliance. By using lists instead of tables if someone is viewing the site with a old browser or a different technological platform, (e.g. a mobile phone or with CSS turned off) then menu is still a easy recognisable navigation tool.

E.g. on a browser with CSS enabled:
Homepage | Products | Contact

E.g. viewed on a platform without CSS

Homepage
Products
Contact

As you can see in a limited browser it is still recognisable as a menu, It is also an advantage from a SEO point of view and design wise gives a lot more flexibility with less code.

Setting up the Menu

Home

About

Product

Support

Contact

This produces:

Not much of a navigation, is it!

The next stage is to make it looking something like a proper menu, this is done by adding some CSS styling to the menu.

The first step is to add a id to the UL so that we can distinguish the menu from other list items.

Now that is sorted we add some css styling to display it. For this example we will place our styling in the head of the document rather then link to it through a url

The first line: ul#nav li, ul#nav is there as a default reset, list items have different margins and paddings in different browsers, this resets it back to a universal zero.

The next style ul#nav li, takes off style type which is by default a bullet point and also brings all the list times onto the same line.

It’s not looking very nice yet, and it does need to look nice! For this we will style the links themselves.

ul#nav li a:link, ul#nav li a:visited {text-decoration:none;color: #333;font-family: arial;font-size: 14px;border-right:1px solid #666;padding: 0px 9px 0px 9px;}

ul#nav li a:hover {color:#ccc;}

On the link we text of the underline, set the colour and make it a set size. For now we have

The next set is to create the the menu graphic, we do this by create a sprite. A sprite is a web graphic that holds several different images and is placed around the page and displayed differently by using background positioning. For this menu, we are going to create a graphic that has 3 states. Normal, Hover and Active.

If the menu at a normal state is going to be 25px high, we require a complete graphic that is 75px high

The compete image showing all states.

Into the ul#nav li a:link, ul#nav li a:visited

We are going to add this css.

background:url(pic5.jpg) repeat-x center; height: 25px;

This sets the background image to the jpeg pic5, it repeats its across along the horizonta and places it center and sets the height at 25px.

The next step is the hover.

This is similar to the above but all we need to change is background position to bottom:

ul#nav li a:hover {color:#fff;background-position:bottom;}

The last stage is to add active class to one of the menu links

We shall add this to the about menu options, eg:

About

To make this visibly different we aslo need to add a css class to style this link.

ul#nav li a.active:link, ul#nav li a.active:visited {color:#fff;background-position:top;}

The advantages of using css siding door rollovers compared to javascript rollovers is many. CSS by itself is a much more valid markup to use then javascript to produce effects, it will produce the same effect but faster and with ess issues and by combining all 3 states into one background image there is no need to preload any images into the document giving fast rollovers with the image lag that you get with javascript rollovers as a image needs to be loading onto a page.

Of course if this proves to be too much contact us and let us get your website up to scratch for you, contact us via email or call us on 0845 862 0416 and we will be happy to help.

WMpS Blog - Surfing The Digital Wave » Website Design

Designing for the Apple iPad

HTML5 Quick Guide

New Simplified Doctype

New Structural Elements

Form Validation

Audio and Video Support

Summary

Why Use GWT for AJAX Applications?

Beginning with AJAX

Google Website Toolkit

The Benefits of Using GWT

Summary

Website Basics: 404 Page Best Practices

What is a 404 Page?

Things to consider!

404 Page Customisation

A good example (the WMpS example!)

Some other things to note

Tips for Improving Page Load Speeds

JavaScript and CSS Optimisation

Image Optimisation

HTML5

Model photography – Keeping ahead of the pack

What is the real difference?

Which one to choose?

Embedding Custom Fonts with the Google Font API

What makes a top ecommerce website?

How is the list compiled?

Who’s on the list?

Which sites are working the hardest?

Littlewoods

John Lewis

Next

River Island

Summary

Website Development Tips: CSS Compliant Contact Forms

First Mistakes

The Correct Mark-up

Presentation of the form

The final form

Website Development Tips: Horizontal Sliding Door Menus