Once you’ve created your website, you want to make sure as many people as possible can see it. There are several technical steps you can take to ensure your website is attracting the attention it deserves.

Make sure it’s browser compatible: Check your website in as many browsers as possible. Every browser has different ways of reading things which means that something which shows perfectly in Internet Explorer may not display properly in Firefox. Making sure your website design can be seen across the widest variety of browsers will ultimately gain you more visitors.

Set up a test server: You should never edit a website live, or throw something up online which hasn’t been tested. Once your website goes live, everything can be seen online, including any mistakes in the draft. A mistake-free site is one of the easiest ways to impress customers, attract search engine attention and gain rankings.

Back up your site: You never know when your site will be the victim of a server outage, or a hacker. Both occasions can, in their most extreme circumstances, result in the need to re-establish the site. It’s rare that this happens, but if it does, back-up is essential to get the site online again quickly, to minimise disruption and avoid missing out on lost business.

Be wary of Flash: Although Flash is popular now, it’s never a good idea to base your entire site design on its usage as it does cut out a proportion of visitors. A substantial number of people don’t have Flash – and they won’t download it just to access your site!

If you’re looking for help with accessible website design, contact NS Design for a free no-obligation consultation.

Bookmark This Post

Hide Sites

With time being one of the business world’s most precious commodities, it is important that websites load quickly and completely – or you risk losing the prospective customer. As search engines like Google continue to develop their ranking algorithms, evidence is emerging that loading time is now included in their scoring systems. Consequently, how fast your site loads will have an impact on your site’s position in the search results.

The easiest and quickest way to reduce your loading time is to limit the number of web elements on each page. Elements include items such as scripts, images and any Flash components. Each element requires an http marker within the page’s code, creating http requests to the server for each component. The more elements you have, the more requests and the slower the page will load.

Ask yourself – for every piece of your webpage – what value does it add to my site, to my SEO and to my customers? If the answer is low or none, then cut it.

This doesn’t mean images should be avoided completely, but if they are essential, make sure they are optimised. Images should not be written into your code as they stand, but should be saved as suitable for web, with a screen-only resolution of 72 dpi and in GIF or PNG format. It also makes sense to resize the images so they reflect the size on screen.

For more information and advice on how to optimise your website design for the search engines, and ensure it loads in the shortest possible time, contact NSDesign for a free no-obligation consultation.

Bookmark This Post

Hide Sites

Websites are a competitive industry and the temptation to throw as many bells and whistles into your design as possible can be high. When well placed and used in moderation, flashy graphics and video insets can add both colour and interest to your site; however, over-using them can distract users from the key messages of your site and create a slower-loading, less accessible page.

The same mantra applies across all aspects of your design, from colour schemes to text. Content is the absolute king of your webpage and needs to be kept as simple as possible, remaining jargon-free and concise to ensure your visitors read what you want them to.

With colours, pick a two or three colour scheme and stick to it. Over-egging the palette of your website can result in a messy and unreadable design which makes visitors want to click off quickly. Excessive colour schemes can confuse and disorientate viewers, making navigation of the site harder and ultimately costing you sales.

Navigation is one of the most vital areas in which to stay simple. The norm for navigation bars is either at the top or the left of the site, with pages easily identified through their home titles. Don’t be afraid to use ‘standard text’ for these links. People searching websites are used to looking for FAQs, so you’re more likely to get a hit than if you headed it ‘Things people often ask us’ or even ‘Popular Questions’. It can also help to repeat your navigation bar at the bottom to save people scrolling up and down.

Even though technology is improving all the time, simplicity is still the number one aim for all websites. So don’t be afraid to rein in your design a little.

Bookmark This Post

Hide Sites

In a previous blog, we wrote about the most common web design mistakes.  Here, we’re going to talk you through building and designing your own website. Even if you are a complete novice, once you have read both blogs you should have a clear idea on the do’s and don’ts of web design.

If you are designing your own website using a programme such as Dreamweaver or our own NS Builder you there will be many points that you have to take into consideration. You want the design to stand out, but at the same time clear, concise and easy to manage. The most important fact to remember is what you are trying to achieve. If you are selling products, make sure the shop and pay facilities are straightforward while if you are an information portal, make sure your site is easy to navigate.

If you are new to web design but are looking to create your own site, your web design programme should be very simple to use. You need to be able to update your website regularly, efficiently and trouble-free. Having a helpdesk available to you should you need it will be very important; especially in the early stages.

One of the most important points to remember is that your website needs to be accessible to everyone. Again, this is something we can help you with should you need it.

Finally, it’s important to remember that you don’t need to be an expert designer to create a good, basic website. Look at it constructively, get friends and family to test it with feedback and don’t be afraid to change things if they’re not working. If you are having problems reading a certain font, then it is not right. If your friends/family can’t find the links or pages they’re looking for then it is too difficult to navigate. Once you are happy with the overall look, content and navigation you will be ready to go live.  However, this will not be the end, you will have to closely monitor it and update it when necessary.

Bookmark This Post

Hide Sites

Creating a successful website is not as easy as you may think. However by avoiding these common web design mistakes, you will have a much better chance of producing a lucrative site that works for you.

1.    Hard to navigate
Remember that visitors could land on any page of your site. Make sure you have a clear navigation menu to enable people to locate the information they’re looking for.

2.    Generic title tags
If you look to the blue bar at the very top of your browser when viewing a website, what do you see there? A keyword-rich summary of what the page is about or ‘Company X – Home’? No prizes for guessing that it’s the first one you should be aiming for.

3.    Illogical use of links
Links within a webpage take the visitor to another page within your site or to another site altogether. They should be easy to understand and navigate. If you are designing your own website, you will be aware of the importance and simplicity of hyperlinks. If however you want to get your website built and maintained for you, we can help you. (Note: A prime example of a simple hyperlink).

4.    Unreadable font
This may seem very obvious to you, but a very common mistake is to use font which is hard to read – usually because it’s too small. You need to make sure that you use a colour which is not lost within your website and a font which is clear and large enough for people of all ages to read.

5.    Adding too much to your site
While it’s tempting to add as much information as possible, avoid it!  Too much information will make your site look cluttered and confusing and lose people’s interest immediately.

Bookmark This Post

Hide Sites

Looks pretty: check.

Easy to navigate: check.

Displays full contact details: check.

There’s one point that’s often missing from many business’s web design checklists, and that’s accessibility. By law, all publicly accessed websites must comply with Web Accessibility Initiative (WAI) guidelines, specifically Section 19 which makes it unlawful for a provider of services to discriminate against a disabled person. Websites fall under this law, as they constitute a service, and they must be accessible to visually impaired people who use software to view websites.

Not only is accessibility a legal requirement – and the right thing to do morally – it’s also an important part of SEO. Search engine robots operate in the same way as the software that a visually impaired person would use.

Many websites overlook the WAI guidelines and do not prioritise accessibility, but there are actually a lot of benefits to designing a website to meet accessibility standards. Search engines will look more favourably on your site, as mentioned, and you will probably find it loads more quickly too. By making sure your website is designed in such a way that disabled people can use it, you will be expanding your audience reach and this is likely to result in increased sales.

Accessible: check.

Bookmark This Post

Hide Sites

Every web design agency in the country, including ours, has at some point received a response to a proposal along the lines of: “Thanks, but my cousin’s got a mate who can do it for £50”.

It would be easy to rail against clients who can’t tell the difference between a professional design agency and the mate of the client’s cousin who’s offered to design a website for £50 – but easy is overrated! I think that ultimately it’s up to us as web designers to accept that if we want to win the business, we have to take responsibility for educating the client.

First of all, web designers have got to speak the language of business: terms like ‘ROI’, ‘brand awareness’, and ‘higher productivity’ need to appear in design proposals, because business decision makers tend to use the language of objectives. By contrast, many web designers use the language of attributes, such as ‘user friendly’, ‘clean design’, and ‘engaging’. If clients are to recognise the true value of professional web design, then the designer needs to translate attributes into objectives and demonstrate how they will deliver a return on the client’s investment.

The second key component of a winning design proposal is to spell out the process step-by-step (like on our 50 point checklist…). Web design can seem like a mysterious art to many people – in fact, to most people besides other web designers! – so it can really help to show the client where their money is being spent. Most business decision makers who want a professional result will easily understand that £50 won’t buy them a thought-out design process that covers: concept, consultation, research, wireframes, design, build, testing and launch.

Bookmark This Post

Hide Sites

We’ve been fortunate to have Sean Forsyth with us this week – on work experience from Gryffe High School.

I asked Sean to sum up his week with us, and am delighted he’s letting me share it on the Blog:

I have really enjoyed my week of work experience here at NSDesign even though at first I was not sure what to expect. I feel like now I have a greater knowledge of the web design business and would like to follow it as a career path, although I still have a lot of learning to do before I can do anything that all the staff here can. Also I am very interested in other parts of the business too like ‘Embrace the Space’ and never realised how Social Networking sites could be used for business purposes and so effectively. Everyone at the office has been very helpful in getting me started and making sure I get the most out of my week. I thank everyone here for making the effort to give me the chance to work here as I’ve had a great experience!

On behalf of the team, I’d like to offer a big thanks to Sean for all his efforts this week, and we hope to keep in close contact as he continues his career.

Bookmark This Post

Hide Sites

For the second year running, we were delighted with the results from our “Work for Free” day, which we carried out just before Christmas (December 21st 2009).

Following on from last year, the NSDesign team enjoyed a great day helping just over 20 small businesses, with free consultancy on the likes of SEO, Social Media, and web design.    Like last year, we weren’t without our detractors for the initiative, with the DBA again giving us a little “dig” on twitter… (although thankfully, nothing on the scale of last year!)… and a few industry players that like to moan about “de-valuing” design, without truly understanding what the day is actually about.

However, like last year, all we really care about is the feedback from clients, which has been 100% positive.

We were also lucky enough to get some great publicity on the day, mainly from a BBC Radio Scotland interview which went on to look at the value and benefit of providing free time and consultancy, and the history of working for free!  Listen to the full radio interview here.

Will we repeat the work for free initiative next year?  What do you think…

Bookmark This Post

Hide Sites

Over the last few months I have been following developments regarding the use of the @font-face feature of CSS3. As we have recently been involved in a project where I saw both an opportunity and a benefit to using @font-face, I have gathered together some information that I think helps clarify how best to use it.

Licencing and Support
Font licensing is a pretty big issue surrounding @font-face, even free fonts, which may stipulate that they are only used on non-commercial sites or have a link back to the author. Some new resources which offer a solution to the licensing issue are appearing, notably Typekit. As they put it its “Simple, bulletproof, standards compliant, accessible, and totally legal.”

At the moment @font-face is best supported by Firefox 3.5, Chrome 3, Safari 3.1, Opera 10 and IE8. The two most commonly used font formats you will see today are .otf (opentype) and .ttf (truetype). To embed a font using these formats you use the following css in your head or an external css file:

@font-face

{
font-family: 'Philosopher';
src: local('Philosopher'),
url("Philosopher.otf") format('opentype');
}

h2
{
font-family: ‘Philosopher’;
font-size: 20px;
}

You could argue that embedding specific fonts is superficial and that all it does is add to the overall aesthetic of the site rather that provide any benefit in terms of accessibility or usability. And if this is the case why bother trying to support older browsers? I guess that’s true but our job as web designers to at least try to provide the richest possible user experience to as many people as possible so why not give it a bash!

EOT (Embedded Opentype)
The font format supported by previous versions of IE is .eot (embedded opentype). You can add a line to your css to include this format with the others. To create the .eot version you first need a .ttf version of your font. If you have this I’ll explain how you you convert to .eot it in a minute but if you only have an .otf then you need to convert it to .ttf first. After a bit of digging I found a hard way and an easy way to do this. The harder way is to install Fontforge and the easy way is Online Font Convertor The Online Font Convertor works but seems to slightly distort some of the characters(at least when I tried it.)

Fontforge and Sygwin
If you want to install Fontforge on a windows machine you first need to install Sygwin which provides a Linux-like environment for Windows which is required to run Fontforge. I found it a bit tricky but this Installing Fontforge article is a good tutorial which explains exactly how to do this.

TTF to EOT
Once you have your .ttf font file you need to convert this to an .eot. Once again I found a few ways to do this. One is using the Microsoft tool WEFT. A lot of people have said WEFT is quite tricky to use but I found this tutorial and it wasn’t too bad. The only problem is that it doesn’t always play nice with every font. When you load in the font you wish to convert it will indicate whether or not it can be converted with a green, yellow or red icon. If it is green or yellow you’re in luck and you can create your .eot file. If it’s red (which I encountered) go to TTF2EOT Online. This tool is great and once it converts your font it even provides the css and instructions on how to embed the font in your page.

Once you have an .otf or a .ttf font aswell as your .eot version you can now embed the font using the following css:


@font-face
{
font-family: 'Philosopher';
src: url("Philosopher.eot");
src: local('Philosopher'),
url("Philosopher.otf") format('opentype');
}

h2
{
font-family: 'Philosopher';
font-size: 20px;
}


Early Chrome Support – SVG
You can improve browser support further by adding an SVG version of the font to the css. This format allows the embedded font to be viewed in Chrome 0.3+. This can be created again using Fontforge from one of your other formats or using a tool called Batik. I found good online tool created by Martin Saulis which he has built using Fontforge and TTF2EOT. The problem with SVG fonts is that they have a fairly large file size but by opening the font in any text editor you can delete the unnessessary characters from the font, greatly reducing the file size. The main elements to delete are the glyph-name=”null” and the hkern elements. By doing this it will reduce the file size with minimal effect to the font.

There are a couple of small issues that have to be considered once you have your SVG file. The SVG must be assigned an id which will be used in the css and html to reference it. This can be done by again opening the SVG file in a text editor and editing the tag and adding an id to it. Another issue is the requirement of an SVG namespace to the file. This also must be added for the font to work and can be added in the svg element in the file.

Bookmark This Post

Hide Sites