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.

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.

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.

<link rel=”stylesheet” type=”text/css” href=”http://fonts.googleapis.com/css?family=Font+Name”>

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!

Embedding Custom Fonts with the Google Font API is a post from WMpS, your one stop digital agency.

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 <div> around the <form> and place the border on that. But this is unnecessary, the form mark-up tag like any other tag can be presented differently according to what’s in the stylesheet. If you don’t need a div or a class, why have it? Adding extra code into your page can slow it down and make it harder to update in the future.

The Correct Mark-up

Below is the correct way to mark up a contact form.

<form>

<fieldset>
<legend>Contact Form</legend>
<p>Please complete all details of your enquiry &amp; we’ll get back to you shortly.</p>

<label>Name:<span>Add your name</span></label>
<input name=”name” maxlength=”150″>
<label>E-mail:<span>Add a valid address</span></label>
<input name=”email” maxlength=”150″>
<label>Message<span>Add your message</span></label>
<textarea name=”message”></textarea>
<div class=”spacer”></div>
<input name=”submit” value=”Send Message”>
</fieldset>

</form>

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: CSS Compliant Contact Forms is a post from WMpS, your one stop digital agency.

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

<html>
<body>
<ul>
<li><a href=”#”>Home</a></li>
<li><a href=”#”>About</a></li>
<li><a href=”#”>Product</a></li>
<li><a href=”#”>FAQ</a></li>
<li><a href=”#”>Support</a></li>
<li><a href=”#”>Contact</a></li>
<ul>
</body>
</html>

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.

<ul id=”nav”>

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

<html>
<head>
<style>
ul#nav li, ul#nav {margin:0;padding:0;}
ul#nav li {list-style-type:none;display:inline;}
</style>
</head>
<body>

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:

<li><a href=”#” class=”active”>About</a></li>

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.

Website Development Tips: Horizontal Sliding Door Menus is a post from WMpS, your one stop digital agency.