Google have recently launched Instant, a new approach to searching which pushes the boundaries of internet search technology as well as altering the playing field for marketing.

This latest advancement is based on research which suggests that users take up to 10x longer to type an enquiry than they do to scan a page of results. Instant responds to this by bringing up results as users type, allowing them to scan simultaneously and click through to their desired web page faster. The user also establishes a dialogue with the system, amending their own search parameters as they go to find their required content quicker.

It’s an impressive new tool which accelerates functionality for users of the system; however, it may not be such good news for businesses, especially those running Adword campaigns. Results for Google Instant searches are almost constantly refreshed, and so too are the PPC ads, allowing no time for an interested party to click through.

There is also the possibility that businesses will end up paying for impressions on irrelevant searches, with results changing as a query becomes more defined.

In response, Google will change their definition of an ad impression.  Unless an ad is on screen for 3 seconds or more, it is not considered an impression. This goes some way to solving the problem, but doesn’t help if the user is distracted half way through typing their query, leaving irrelevant results on screen for a prolonged period.

Google Instant has the potential to revolutionise the way we use search engines and its true impact has yet to be felt. Only time will tell us what effect it has on Adwords.

Colour psychology is now an established area of study, focusing on the effect colour can have on a human’s emotions and brain function. Brighter colours, such as red and orange, tend to act as stimulants and are often used in sales to encourage buying decisions. Contrastingly, cooler colours such as blue and grey are taken as indicators of reliability and intelligence. The ideal choice of colours in your website design will not only complement each other visually, but utilise this psychological language to hook customers.

When choosing your colours, the first key question is ‘What is my demographic?’ This will automatically help you narrow down your potential colours. For example, a product aimed at the over 60s market is unlikely to sell if marketed with a strongly contrasting colour scheme.

Following on from this, decide what is it you want your website to project. Should your company be interpreted as dynamic or traditional? Do you want to push sales or build relationships? All these types of questions will help you narrow down the best colours for your website. Many sites now use two or three colours to create interest, so keep in mind that your choices need to work visually as well.

Colour dictionaries, providing in-depth explanations of each colour’s psychological impact can be found across the web and are excellent resources at this stage of web design. Don’t become too bogged down in the science though; although using colour psychology can help increase sales, it shouldn’t be at the expense of an attractively designed website!

Accessing the Web on the Move

With the ability to browse the web across multiple devices now becoming a mainstream reality, allowing users to access and experience websites and the services they provide across these platforms is a side of the web that businesses are keen to take advantage of. With constantly improving technologies, increased support for standards and an explosion in social media and user generated content, the web is becoming a platform which allows users to get things done, to complete tasks, access information, use services and communicate online and on the move. Our responsibility as designers and developers has always been to provide a vehicle for this interaction by creating rich user experiences with a focus on accessibility, usability and content/goals, inclusive of as many end users as possible, hence why the ability to taylor and optimise websites to suit different devices is such an exciting concept.

With people viewing the web on so many devices, with different resolutions, orientations and levels of support, trying to optimise a web experience for several individual devices is a logistical nightmare. That’s why I have been intrigued by the recent wave of discussion around media queries and ‘responsive web design’. Though using separate style sheets depending on device or creating a completely separate mobile version of your site under a .m subdomain are both possible solutions, ‘responsive design’ is based on the concept of a flexible, fluid grid, flexible images, one style sheet and the use of media queries to alter different elements of the page depending on the available width and viewport orientation.

Streamlining the Experience

Designing for mobile devices involves much more that simply resizing your website to display on a smaller screen. As the viewing port gets smaller, the entire experience should be more and more optimised for achieving the users goals. Any unnecessary graphic elements should be stripped back with a far greater focus on the content, functionality and allowing the user to complete tasks quickly on the move. The logic and hierarchy of information should reflect this with elements repositioned accordingly. Fortunately media queries can accomplish all of this, allowing elements to be altered in style, dropped or added, resized, repositioned and linearized all based on the screen resolution available, allowing the experience to be flexible and optimised to whatever device the user happens to be using. It is also possible to use media queries to serve higher resolution graphics to devices like iphone4 which use retina display.

The concept of media queries has been around for a while but there is now wide enough browser support to make them a practical solution. Firefox 3.5+, Chrome, Opera 7+ and Safari 3+ all support them as do the mobile versions of Webkit and Opera. IE doesn’t currently support them but this is proposed for inclusion in IE9. Another aspect I like about ‘responsive design’ is that its stays true to the guiding principle of inclusion and access for all users and progressive enhancement.

Example Site

View Demo

Media queries can be included alongside the familiar media attribute in the link tag, or within the css itself as @media rule or as part of an @import. They are written as groups of conditions, separated by commas, which if met display different results. Multiple combinations of conditions can be set using ‘and’ between them. To get my head around it I have created a very simple example of a responsive layout focusing on the use of media queries and the adjustable layout/images.

In the example, I have created a simple site which uses a liquid layout within a container with a maximum width. This means the site will scale down as the browser window/device gets smaller but allows users viewing the site at full size eg on a screen/laptop or ipad horizontally to get the full experience as it was originally intended without the site over-stretching. I have used percentages for the width of the images so they scale with the site as the viewport gets smaller.

At the point where the site starts to become less usable, eg the navigation is taking up too much space and the images are getting too small, I have used a media query to re-adjust some elements. I have reduced the navigation width slightly and made the images wider.

@media (max-width:750px), (max-width:750px) and (min-device-width:1024px), (max-device-width:768px) and (orientation:portrait)
{
#container{max-width: 600px;}
.image1{ width: 100%; margin-bottom: 10px;}
.image2{ width: 100%; }
#nav{width: 200px;}
#content{margin-left: 200px;}
}

The site then continues to scale down with this new layout until the search bar starts to overlap the logo and another media query is needed. At this point I have significantly altered the layout to suit a smaller viewport and make the site easier to use. The site structure is more linearised, the width altered to fit phone resolutions, the search bar moved under the logo, and the navigation positioned across the whole screen.

@media (max-width:620px), (max-width:620px) and (min-device-width:320px), (max-device-width:480px) and (orientation:portrait)
{
#container{min-width: 320px; max-width: 320px;}
#search { width: 300px; height: 50px; margin-top: 120px; position:absolute; left: 25px;}
#header{height:180px;}
#nav{float: left; width: 320px;}
#content{margin-left: 0px; float: left;}
.logo {margin: 17px 0 0 16px;}
}

Detecting Screen Orientation

Because devices display differently depending on their orientation this can also be detected and accounted for. By using the metatag in the head of the document this forces the browser viewport width to match that of the device. The media query (max-device-width:768px) and (orientation:portrait) checks to see the maximum device width but also checks which way it’s being held.

Conclusion

Media queries will probably start to appear a lot more in coming months and it will be interesting to see how they are used to streamline the web experience across different devices. It’s not a blanket solution to all websites, and the best web strategy will vary on the requirements of the project, but they are definitely a step in the right direction for enhancing the web experience and making it accessible and functional from anywhere on any device.

If you’ve decided that a Web Content Management System (WCMS) would benefit your business, you’ll now be going through the painstaking process of choosing one. To help you make the right decision, here are the top five points to consider.

1) Ease of use: The whole point of a WCMS is to open up your website to non-specialist staff, so you want an interface which is intuitive and easy to learn. An overly complex design, built for the use of IT experts, will only confuse users, leading to an extra burden on your IT department and an aversion to updating content; thus undermining the entire exercise.

2) Quality control: What checks does the CMS offer to ensure that your content is the best it can be? If workflow management isn’t included then it should offer staff the option of previewing pages before putting them live for a final quality check. Allowing formatted content to be pasted from MS Word also helps, as users can create content in a highly familiar system, which also has spelling and grammar check built in!

3) Integration: If you have an existing website, you need to be sure that your CMS works with it. Some languages can cause huge problems when first used and, if not integrated properly, will require specialist help to fix.

4) Future-proofing: Like all web-based technologies, WCMS are constantly changing and being upgraded. Make sure you are clear on your supplier’s upgrade policy, its frequency and any hidden costs should you wish to improve your system.

5) References: Ask for a selection of clients who are using the system and arrange to speak to them for some honest feedback.

In these fast-moving times, one thing you can rely on is that sooner or later, you will need to redesign your website. Although, this isn’t necessarily a case of in with the old, out with the new. If your site is bringing you business, then it is clearly doing something right. In which case, you may only need to update certain elements of the site to achieve the effect you desire.

If it’s the visuals of your site that are looking a little tired, then you may wish to consider a redesign or rebranding. This focuses purely on the look of your site and brand, and while it may mean moving a menu bar from a vertical to a horizontal axis, it leaves the structure and content of your site pretty much intact.

Alternatively, if your client feedback is that the site is difficult to navigate, then a restructure may be called for to create a more user-friendly interface. This is a purely technical way to update your site and does not necessarily require visual or literary creativity.

Just occasionally, the problem lies with the site content, and if this is the case then you need to fully reassess your site’s aims moving forward to create a functional website that will be, to some extent, future-proofed.

Of course, a website redesign could contain an element of any of these factors and the more you change, the more noticeable it will be. Just ensure that every change has a purpose and you can’t go too far wrong.

What started out as a normal Wednesday morning resulted in being anything but.

Over our usual morning cup of tea and banter, the subject inevitably came around to the pending papal visit the following day.

Being web evangelists (aka geeks) here at NSDesign, we jokingly imagined creating an “alternative” version utilising the PayPal branding but without the distinguishing “Y”.

To be honest, that part wasn’t a terribly unique idea, people were already referencing it on Twitter, but on a whim, we took it that bit further. We decided it might be fun to do a little social media experiment where the objective would be to start with nothing and see how we could build awareness and generate interest in a site which was literally minutes old.

If it did work, then perhaps some of the lessons learned could be applied any online marketing strategy.

By eleven we’d registered the domain. After noon, we’d thrown a quick site together and started to promote the site via a few pointed “tweets” just after 1pm.

Below is how the site looked not long after launching: very basic but still funny enough to get people talking…

(Screengrab: www.paypalvisit.com)

Within minutes the traffic started to arrive and the re-tweets began…

(Screengrab: Real Time Google)

As the day went on, we added more content and images and posted the link on Facebook walls.

SOME 48-HOUR STATS:

The unique visitors were just short of 2000.

Page views came in around the 3500 mark.

Our whole point wasn’t just to drive traffic in a call-to-action format, it was to reach a s wide of an audience as possible thus building brand/site awareness.

Through tools such as TweetReach* – we were able to ascertain how far our “reach” was.

Tweet Reach: Nearly 75k

On Twitter, according to our full TweetReach report*, shows we had a potential reach around 75,000 people – which rather ironically is more than actually showed up to see Pope.

On the day of the Pope’s visit, “day two” of our  humourous project, we posted various topical updates throughout the day.

The page grew and grew more graphics and with tongue-in-cheek reports.

(Screengrab: Susan Boyle Double Booked!)

Those, too, were tweeted and re-tweeted throughout the day. (We caught a few people out with that one…)

It was all done in good fun but yet there were things we could take away from this humourous experiment.

A FEW THINGS WE LEARNED:

1) Anything topical you can tie in with your own expertise, and be a part of the buzz creation by contributing something valuable to the buzz,  you’re on to a winner.

2) Anything that is unique with humor (bearing in mind everyone’s humor is different) is also an added bonus in experiments like this.

3) We added the Facebook “Like” button and the “Tweet This” button – quite late in the game on day two – which indicates had we’d started off the project with that we might have pull back our marketing push and let the visitors of the website spread the message directly. Nearly a hundred people indicated “liked it” in just a few hours and thus spreading the message directly to their own wider networks.

4) Understanding who your champions are is very beneficial. For instance, you can see who’s mentioning it – using Google Real Time – you quite quickly see who the main influencers are.

In theory, you could almost be clever and target the people who you want to be spreading your message – and tweet them specifically in the first instance.

5) On the down side…while this experiment actually resulted in gaining followers, we’d be lying if we said we didn’t admit we’d have lost a few in the process.

After all, we broke the cardinal rule of overusing one subject in tweets – which, at times, may have been viewed coming across in an overly saturated and spammy sort of way.

Anyway it was a really fun and interesting project. We hope you who viewed the page enjoyed it as much as we did creating it.

****
SEE: www.paypalvisit.com

(*Note that link only shows 50 of the total Tweets – you have to buy the full report to see all of it – which we did…)

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.

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.

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.

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.