In today’s world of varied computer hardware and software, from PC to Mac’s to Linux and all the hardware variations that they bring, it’s sometimes hard to know exactly where you should be pitching your design structure and what market to cater for.

Yep, today I’m going to be talking about website width and how statistics help you to know how to base your site structures around them.  Let’s take a look at the resolution statistics below from hitslink.com, which gathers usage statistics through their analytics software on a variety of metrics.

23.63% – 1024 x 768
17.41% – 1280 x 800
10.86% – 1280  x 1024
7.99% – 1440 x 900
6.67% – 1366 x 768
5.44% – 1680 x 1050
25.91% – Other

We can see that for some rather strange reason 1024 x 768 is still the de facto resolution holding over 23% of the market share, with 1280 x 800 a widescreen resolution called WXGA using a 16:10 ratio. This means it’s basically a letterbox format has surprisingly taken over 17% of the market share, something which was really a big surprise for me.

So what can we gather from this? Well lots of people are still using very old monitors and the majority of the rest are on their laptops which is why the 1280 x 800 and 1366 x 768 are popping up quite a lot.  Desktop wise after 1024 x 768 and 1280 x 1024, most 19″ widescreen desktop monitors use 1440 x 900 which explains the popularity for this resolution in the results.

The conclusion for this when designing webpages is basically that we’re still designing almost exactly the same way we were five years ago.  If you are doing a non fluid design then your max width should be 1000px and don’t forget once you throw in the scrollbar of browsers you have a little less than that.

So with the current limitations we have it’s still a consumer market, and while as a designer you want to use the full range of your probably higher specced technology and monitor you really have to bear it down to the common denominator to not alienate a large portion of your audience.  Rather annoying but totally necessary.  Personally I’m looking forward to the day when everyone is using 24″ monitors for their and my benefit, but until then I’ll keep designing with 1024 x 768 in mind.

Bookmark It

Hide Sites

The designer will always want to use as many graphics and images as possible potentially slowing down the load times of the site.  Flashy JavaScript, giant header images and video can also cause load bottlenecks but sure do make a difference when it comes to looks, and there aren’t many people who can’t appreciate a nice looking site.

The usability experts will always say that well laid out sites that appear natural and instinctive will rule over any amount of visual candy, and they wouldn’t be wrong.  We have a host of conventions and standards that typically rule the traditional layout of a website and where we expect, and often need things to be in order to successfully navigate a site.

With the ability to compress images, create sprites to load multiple pictures at once, merge JavaScript files and the introduction of new CSS rules that will soon give you a whole host of lighting fast browser rendered visual effects we have all the tools needed to create visual and functional sites.  And once we mix these tools with proven usability layouts and functionality you’re surely onto a winner.

Bookmark It

Hide Sites

Tips:

1. Conventional Designs – Before getting out your easel and running out the the shops to get the latest version of flash, consider that visitors have a nailed down mental model of how a website should look, ensure that your navigation is clear and is either at the left or the top. Big flashy websites often suffer with usability issues and have a high bounce rate to show for it.
2. Fast Response time - A slow site response time can often be due to the design or use of high quality pictures when not needed. Re-size you images to the size you require, don’t use code to re-size them for you, also think about using typography rather than images for navigation etc. Other popular reasons for slow response times are bulky JavaScript/map scripts or apps that send referral data to external sites. Ensure that any code that is activated on page load is as efficient as it can be.
3. Simplicity in your content – If you are writing about a complex subject break it up, think about using bullet points. Ensure that links embedded in your content are obvious, think about your target market. If you are expecting senior web users use larger link text and consider putting products above the fold. Stay away if possible from heavy language, readability is the key we aren’t all Wordsworth you know!
4. Don’t Stifle the user – Interrupting the flow of a user looking around your site is a huge no no, when trying to lower your bounce rate. Pop up adds should be avoided at all costs as well as the use of Flash and Pdfs unless expected. This section also can be linked to slow response times, we are so used to broadband these days anything longer than a few seconds will give users flashback to the days of 56k web browsing.
5. Cross browser compatibility - I don’t suggest that you get every browser ever created and test that you site looks and feels how it should. But i sustainably suggest that you check the site looks how you want it to on Safari, Firefox and IE , checking the site is multiple resolutions as you go.

Bookmark It

Hide Sites

On top of our usual blog writing and article wizardry, you might be surprised to learn that there’s actually much more that goes on in our little content team. Clever, clever things happen in our grammar-filled brains which involve a lot of cogs turning and cause a lot of headaches. In fact, I don’t think I’ve had to concentrate this much recently since I watched the first series of Lost!

While we rant from the rooftops that content is king, content strategy is just as important, even if it does cause a lot of paper wastage and worn out Biro’s in the short term! Your content could be the most amazing ever written but if you don’t have a good content strategy it could all turn out to be a massive waste of time and effort!

Content strategy is the first thing you need to consider when planning content for your new website. Your priority is to consider why you’re writing your content. Work out who your users are and what they’re going to be using your site for. Also, remember quality and variation is the key to effective content!

Many people just do the bare minimum which will maybe sustain them for a few months but will become redundant just as quickly. You need to do as much unique content as possible to get your site to that all important top 10 on Google.

Once you’ve decided all these things you need to work out an effective strategy. How are you going to write the content? Whose going to write it? How long is it going to take? While it might be great to a think that you can do all your content in a matter of days, sadly this is just a pipe dream!

You need to be real when it comes to working out how quickly the content is going to be written! You should be able to draw up a timetable so you can immediately see where you are in the grand scheme of things! This will help you to see that there really is an end in sight! And remember quality is the key! If you’re going to rush it then there’s no point in doing it in the first place!

Only when you’ve devised a competent content strategy can you develop your complicated site architecture. Your site architecture has a key effect on your site’s usability and can really effect SEO rankings so it’s imperative to get it right!

In relation to the question; “Is content strategy really necessary?”, the answer is yes, yes and another yes! Without an effective content strategy you’re going to end up drowning in a sea of content (which is not pleasant, let me assure you!) and with the mother of all migraines! Take the time to construct a quality content strategy now and you’ll really see the benefits in the long run!

Bookmark It

Hide Sites

So what can you do? Read on…

Start with a decent theme – If you understand CSS etc really well you can make your own, if you’re a complete novice, shop around online for themes you can buy  and install yourself. It’s really easy to do, and there are loads of tutorials online to show you how. If you’re in between a newbie and a pro, then take the most simple theme going and adapt it, that way you wont have to write any new code and but there is a wide scope to play about. Just make sure it looks unique and memorable, brand it for yourself.

Be careful with background images – Obviously this will be determined by the design of your theme, but the best thing to remember is to keep it uncluttered and light. White or pale colours work best, there’s nothing more horrific to human retinas than white text on a black background. Don’t use photos or busy patterns with the text directly on it. If you want to use a photo or pattern background make sure the text etc has its own background so it is easy to read your content.

Stop widgeting so much - games and other widgets on a blog are all well and good until it becomes like some sort of drugs habit. Keep them and adverts to a minimum, don’t crowd your blog with rubbish, as the main focus should be the content. Lots of adverts and widgets make a blog look spam-tastic, terrible and quickly forgotten!

Content, content, content, content, content, content, content, (mushroom mushroom) – No but seriously i know we go on about it all the time, the most important thing on any site is content. Read pretty much every post we write about for tips on writing the content. As for design, make sure your content is the main focus. Don’t crowd it with rubbish!

(Text) size matters – Use decent font sizes, colours etc and make it easy to read without a nuclear microscope. No-one has one of those, and if they do they aren’t going to set it up to read your blog.

Scrolling - Should be up and down, not across. It’s a blog not the Bayeux Tapestry!

Distracting animations – should be banned. There’s nothing that makes anyone click the ‘X’ in the top corner of the window quicker than a blog full of  blinking text and ten million glittering gifs looping around. And cursors which turn into something designed by a pre-teen who’s had too many sweets should be banned on punishment of having ‘I love High School Musical’ tattooed on your forehead. You are excused if you are under-12, but then they probably know better.

Keep things tidy – Use the HMTL code to keep everything neat and tidy, make sure text doesn’t overlap out of various areas and keep everything clean. And have a bath, nobody likes an unclean blogger.

Identity – If you have followed all the other rules your blog will have one. If not you’re doing it wrong! Start again.

Bookmark It

Hide Sites

For example by having a less deep header, you can gain more screen real-estate for important content above “the fold”. By having a consistent style for links, you save the user any confusion as to what is a link and what is not.

When I design a site, there are so many things I have to think about. By diverting away from the norm, you can immediately complicate the user’s experience on the page. If you’re interested in making your own site more usable, there are plenty of great books out at the moment.

I recently read two great articles about the subject, one was from a UX (user experience) designer who was annoyed by the complexity of the American Airlines website. Have a read here. The other is a brilliant deconstruction of “Smashing Magazine” by another designer. Read this one here.

By taking the time at the design stage, you will reap the benefits massively down the line. By offering an easy to use site, visitors will return again and again.

Bookmark It

Hide Sites

A full site made in Flash, may look snappy and (sometimes) easier to create, but going overboard with all the amazing things we know Flash is capable of becomes somewhat off-putting and distracting. Plus Google is still not a huge fan of Flash navigated sites. Nowadays I find nothing worse than a site with a ‘please wait’ loading bar before you’ve even reached the homepage, I’m not sure how I used to put up with it when the internet was much slower! Let’s face it, if someone who works with and enjoys Flash finds their patience tested by these things then how will an everyday internet user react? Probably by clicking the back button on their browser and heading for the next site on the search result list.

Flash is an amazing tool however, and is certainly not to be dismissed at all. With many ordinary sites Flash is best used in moderation, perhaps a simple animated banner, or if you’re really ‘flash’ (ahem) a fun game or interactive element. Never go over the top with buttons that have animations longer than your readers attention span and leave the heavy Flash developing to the experts creating amazing games and animated content. If you really want to use Flash, keep it simple and directly beneficial to your site.

Bookmark It

Hide Sites