The most common screen resolution, screen size and best practices when it comes to size for web design are common topics of discussion among web designers. Opinions are divided on what size is best, but luckily there is plenty of cold, hard data to help you decide.

In days gone by, when screen technology was in its toddler stage, fewer screen sizes were available and larger (considered large at the time anyway…), higher resolution screens came with a hefty price tag attached, typically limiting their use to specialised fields.

640×480, 800×600 and 1024×768 screen resolutions where the only options and catering for smaller sizes made sense as they were widely used. While many still argue it’s best to cater for these smaller sizes, the data just isn’t there to support this decision now-a-days.

What follows is a breakdown of the last 100,000 visitors to www.andrewkeir.com and their screen resolutions. Note: For the less tech-savvy out there, the most common screen resolution is not to be confused with the most common screen size. While 2 screens may be the same inches, the screen ratio, available resolutions and actual resolution in use will differ.

On to the data. First off, we have the top 10 resolutions.

To save you doing the math, 77,636 visitors had screen resolutions over 1024×768, with 9,425 of visitors using 1024×768 screen resolution. 87% of visitors accounted for with no sign of anything lower. On to ranks 10 – 20.

As you can see, 800×600 barely scrapes in with a measly 353 visitors out of 100,000. Nearly 95,000 visitors accounted now. The remaining few percent of visitors were made up of a mix of tablets, mobile phones and other devices. Individually none had more than a hundred visits, if not a lot less, including 640×480.

So what is the minimum resolution you should cater for?

Designing a website no wider than 1024 still had as lot of merit, with nearly 10% of visitors running 1024×768. Having said that, you really can do a lot with a few hundred extra pixels.

If you do go wider, yours wont be the first website people running 1024×768 have seen that was too wide for their screen and the extra space can let you do more for the majority of your visitors.

• Pantone Huey Pro review (2)
• Managing charity, speculative and free graphic design requests (8)
• How to embed W3C valid Youtube videos (0)
• How paper affects the colour of your prints (0)

Most common screen resolution(s) and best size for web design; A 100,000 visitor analysis

After months of neglect, andrewkeir.com gets a new WordPress theme design. The old design can be seen above, while the new site is all around you.

Why the change now? A few reasons, initially my site was designed with three columns to keep all site navigation above the fold ( as well as other reasons ). Without creating an unusually wide site this unfortunately restricts the body of the site to be relatively small. The body has gone from a modest 500px wide to a healthy 640px.

With the recent changes to the Google image search and some future plans not suitable for the original 500px wide body it was time for an upgrade. Big images obviously look great as well.

More to come!

More changes as well as a return to regular blog posts are due to start shortly. Any feedback on the changes are of course welcome.

• Preview changes on live webpages with the Firebug plugin (2)
• 5 reasons for W3C valid web coding (2)
• Get #1 on Google by writing an e-mail (4)
• Should you use flash? (2)

New WordPress theme, now bigger and better!

0 to 255 is a simple, web based colour finder tool that allows web designers to instantly find lighter and darker variations of any colour, making choosing colours for gradients and hovers a breeze.

Created by web designer Shaun Chapman, the tool seeks to overcome the often awkward HSL colour picker system used in Adobe Photoshop. Instead, simply enter the base colour of your choice, and the sites returns 32 increments of the original colour ranging from white to black, like so:

A click of the particular colour that meets your requirements places the hex code into your clipboard, ready to be pasted into Photoshop, Dreamweaver, or the design software of your choice.

Quite the time saver.

You can find 0 to 255 here. Check it out, you’re sure to find it useful in the future.

• Colour for the colour blind – The ColourAdd system (8)
• Branding with colour (3)
• Pantone colour of the year (3)
• What colours suit your brand identity design? (4)

0 to 255. Colour finder tool for web designers

If you can find something worthwhile, posting an occasional YouTube video on your blog is quick and easy way to add a little content and pull in a few visitors. The problem for web designers is that the code to embed the video, like most outside sources, isn’t W3C valid.

Although the video might be great, using the it ruins your otherwise perfectly coded website, which is a real pain if your a stickler for keeping your website up to code. With a little cut and paste to the embed code however, you can post W3C valid Youtube videos and won’t have to sacrifice your standards.

Copy and past the following code as your base…

<object type="application/x-shockwave-flash" data="EMBED URL" width="480" height="385">
<param name="movie" value="EMBED URL" />
<param name="FlashVars" value="playerMode=embedded" /></object>

…take just the URL portion from the embed code (shown below, also highlighted in bold here) and replace the EMBED URL sections shown above…

http://www.youtube.com/v/etEP1Bhgui0&hl=en_US&fs=1&

…and you can post your YouTube video while remaining W3C valid. Make sure to use the http address from the embed code, not the URL of your web browser.

You’ll also need to specify the width and height in the base code for whatever size you want the video to play. You can use the standard dimensions listed with the YouTube video or you can scale it to suite your needs, both will work.

Hope that helps.

Be sure to copy and past the base code to retain it exactly. Some of the formatting isn’t apparent as it wraps to the next line, if you partially copy or type it out you may break the code. Good luck.

• 5 reasons for W3C valid web coding (2)
• Secure your WordPress admin pages (14)
• A new way to think about creativity and creative thinking (0)
• Squeeze the last drop of performance from your site – Minify your CSS (2)

How to embed W3C valid Youtube videos

One advantage when working in print, is that once the design is committed to paper your work is done. With web design however, there is the never ending “what if” factor. What if I tweaked this, nudge that and change that a little.

It’s a bit of an industry joke that graphic designers are never completely happy with their own work. If you frequent a few design blogs it wouldn’t be unusual to notice a little change every few months or so.

Depending on the particulars of your site making these changes can be more or less difficult. A static HTML/CSS web page can be edited and previewed locally, but if your running a php site, wordpress blog etc. there isn’t really a great way to preview the work offline.

A dummy site could be set up or you could make the changes to live site, neither of which is particularly time efficient, and worst yet a little mistake somewhere along the line can ruin the appearance of your live site for current visitors or even bring your site down depending on the nature of the error.

This is where Firebug comes in. The firebug plugin allows you to inspect, edit and preview HTML, CSS and javascript on any live web page without having to change or upload any of the sites files.

Before.

After.

Demonstrated above; before, showing my current sans body copy and red background when hovering over links, and after, showing serif body copy and grey links.

A basic example obviously, however the firebug tool can be used to change any rule or element on your web page without any impact or risk on your live site, and no wasted time creating and uploading copies.

Very useful.

The firebug plugin also has a variety of analysis and performance tools to optimise the performance of your site. Even if you only do a small amount of web design, the plugin’s worth a look.

• New WordPress theme, now bigger and better! (2)
• How to customise your WordPress login screen (2)
• 5 reasons for W3C valid web coding (2)
• Get #1 on Google by writing an e-mail (4)

Preview changes on live webpages with the Firebug plugin

So your web design is finished, you’ve got pages and pages of quality content with traffic and blog comments galore. If your anything like me, all that’s left to do now is obsess over every infinitesimal detail imaginable to improve your perfectly fine website.

If that sounds like you, you’ll probably be interested in minifying ( See, now the picture of the Morris Mini makes sense… ) your css/code.

The purpose of minifying your site is cut down unnecessary bandwidth usage/load times. The reduction in file size is usually around 20% – 40% which for a 10kb style sheet obviously isn’t a lot, but hey, every bit counts, especially for high traffic sites.

Take this code for example;

h1 {
font-size: 18px;
font-wei ght: bold;
font-family: Helvetica;}

h2 {
font-size: 16px;
font-weight: bold;
font-family: Helvetica;}

p {
font-size: 14px;
line-height: 18px;
font-family: Helvetica;}

a {
color:#D71920;
text-decoration:none;}

a:hover{
text-decoration: underline;}

Your CSS probably looks something like this and with good reason, it’s clean and easy to follow. Once you’re design is finished however there’s space to be saved here.

By changing your code to this;

h1{font-size: 18px; font-weight: bold; font-family: Helvetica;}
h2{font-size: 16px; font-weight: bold; font-family: Helvetica;}
p{font-size: 14px; line-height: 18px; font-family: Helvetica;}
a{color:#D71920; text-decoration:none;}
a:hover{text-decoration: underline;}

You remove any unnecessary data while retaining all the required information for your stylesheet.

Tiny I know.

If you CSS isn’t laid out like this don’t panic, the more user-friendly layout works perfectly fine. But as I said, if your looking for something new to obsess over…

• 100 habits of successful graphic designers (9)
• How to fix the Internet Explorer 6 (IE6) whitespace bug (2)
• How to embed W3C valid Youtube videos (0)
• Are comment spammers getting anywhere? (7)

Squeeze the last drop of performance from your site – Minify your CSS

There’s no denying creating W3C valid coding for your website can be a pain. Many people dispute its usefulness, claiming that the extra hours spent behind the scenes are not worthwhile since their sites display fine without it.

There are however legitimate reasons for putting the extra effort into creating W3C valid code which go beyond being able to brag you have a W3C valid site.

Consistency: With the multitude of operating systems, web browsers and versions out there, chances are the majority of your visitors do not share your particular combination. Different browsers do interpret web pages differently, having W3C valid code helps ensure your visitors all see the same thing.

Future-proof content: What’s valid today will be valid tomorrow. While all manner of html hacks and shortcuts can make a website appear fine now, there’s no promise they will work on future browsers. Your best chance for this is W3C valid content.

Web traffic: Admittedly getting solid information out of Google is like trying to draw blood from a stone, but it is widely held that Google gives more traffic to website with valid code than to those without, and while Google doesn’t penalise for not having it, difficulties in reading your site could still lead to a loss in potential traffic. Even without direct confirmation from Google, it surely won’t hurt you to have valid code.

Professionalism: Like anything else in business, is close enough good enough? Your website is an extension of your brand like any other, make it the best it can be.

Competitive edge: If your reading my blog chances are your a designer or a potential client. Even though they may not know exactly what W3C is, many clients demand it.

If a client is tossing up between you and a competitor to design their website, having a valid site while your competitor does not could be the clincher. On the flip side of that, not having it could tilt their decision away from you.

Does your site pass the test?

If not, two excellent resources are W3Schools and the W3C Markup Validation Service.

• How to embed W3C valid Youtube videos (0)
• A little extra pagerank seems to bring a lot of traffic (3)
• It’s a long road – Building big web traffic (12)
• Get #1 on Google by writing an e-mail (4)

5 reasons for W3C valid web coding

InstantShift recently posted 88 single web page designs for a little design inspiration. Single page websites are great if your don’t have a lot of content and often used to showcase a portfolio of work with great effect.

They also free you from a lot of restrictions as a design only has to function on a single page but herein lies a problem. From a search engine point of view you essentially have zero content.

If your site is merely a point of reference and your business or traffic is derived from elsewhere this isn’t a problem but if you plan to promote your business primarily through your website this strikes me as quite a disadvantage.

Compare this to a content management system like a wordpress blog. A website is a long term investment, over a year a blogger with the time and inclination posting 2-3 posts a week can quite comfortably amass over 100 posts related to their particular niche.

That’s 100 more pages of content covering multiple topics, hundreds more keywords and phrases and possibly most important 100 more opportunities for backlinks.

What are your thoughts?

There’s no denying that single page sites can look great, be sure to check out that link. And blogging isn’t for everyone, without some regularity of new content there is little point in having one.

Ultimately the purpose and content of your website will dictate which path you take, but choosing a single page website design could be a disadvantage.

• Your new website pre-launch checklist (3)
• Should you use flash? (2)
• Should you stop image hotlinking? (0)
• Preview changes on live webpages with the Firebug plugin (2)

The SEO problem with single page website designs

If you’re not familiar with the term, hot-linking refers to linking to images stored on another webpage that the linker doesn’t own/operate, this is a strict no-no of online etiquette. The reason is that by hot-linking, you’re essentially stealing the bandwidth that the original web operator is paying for.

At some point you’ve no doubt visited a website expecting to see a particular image, only to be greeted by an image that said something along the lines of “Hotlinking is not allowed. Please visit www.website.com to view this image.”

For website operators deciding whether or not to prevent hot-linking would seem like a no-brainer, but depending on your type of website it can have a downside.

If you have a static web page there’s no problem with stopping hot-linking, but if you’re running a blog and providing an RSS feed for your readers preventing hot-linking causes a problem.

The way the prevention works is by checking the site requesting the image. To protect my images I would prevent all sites except http://www.andrewkeir.com from accessing my images.

The problem is that this also block RSS readers such as Google reader, My Yahoo! & Newsgator etc. While you can specify which sites to allow, there are dozens of RSS readers out there, if not more and any not allowed to use your images will be filled with your blocking image only.

Obviously any readers using unspecified readers won’t be subscribed to your feed for long, therein lies the problem.

What to do, what to do.

Do you stop hot-linking? Has this had an effect on your RSS subscribers?

• The SEO problem with single page website designs (4)
• New WordPress theme, now bigger and better! (2)
• How to embed W3C valid Youtube videos (0)
• Your new website pre-launch checklist (3)

Should you stop image hotlinking?

When launching a new web page or blog, the design itself is only half the work. There’s also a lot of I’s to dot and T’s to cross when it comes to things like search engine optimization, traffic analysis and points of contact.

None of these factors have any effect on the appearance of your site and can be overlooked, here I’ve compiled a list of forget me nots for your next ( or recent ) web page or blog.

Search engine optimization

At a minimum you should need the basic SEO of title, description and keywords. e.g.

• Title : Andrew Keir – Logo designer, web designer, graphic designer.
• Description: Graphic designer from Sydney, Australia…
• Keywords: logo design, graphic design, web design etc…

You should also have a sitemap. A sitemap is a list of your entire sites content, this list is read by search engines such as Google, Yahoo! etc. and ensures all your content is promptly discovered.

There are 2 plug-ins, All in One SEO and Google XML sitemap which manage both these for you if your running a WordPress blog. You can read more about these and other useful plugins here.

Check your contact and form details

This ones pretty straight forward, check your email address and any mailto: links are correct and also any contact or submission forms are working.

I’m sure you’d hate to find 3 months down the track that your point of contact isn’t working.

Create a Favicon

A Favicon is the image that shows next to your web page address in internet browsers and also when your web page is bookmarked and adds to your branding.

On my page for example you can see I use a lowercase a in 1 of my corporate colours and typeface of my logo, Futura LT Medium Bold.

RSS and email subscriptions

Another blog only step, this is much the same as checking your email and contact forms, subscribe to both to ensure they are working. Also be sure to have a RSS icon, this is the standard symbol your readers will look for when subscribing to your site.

You could use either the standard orange RSS symbol, the feedburner count icon or there are a tonne of custom icons available if you search Google.

Check multiple browser compatibility

With the dozens of browsers out there what you see isn’t necessarily the same as the next person. At a minimum you probably want to check Internet Explorer, Safari and Firefox. These are the standard most common Windows, Mac and third party browsers.

There are more, Camino, Chrome, Opera etc. and each browser has a up to a dozen versions. Obviously your not going to be able to test every single possible browser but be sure to test a few.

W3C validation

The W3C Markup Validation webpage is a free service that checks the markup language of your web page for any problems with your code.

This is useful because as explained previously not all browsers interpret code in the same way. While some may correct or ignore the error, others will not. The validation service will find any errors in your code and allow you to fix them without having to discover the problem yourself.

Google Analytics or other traffic monitoring service.

Google Analytics is code placed in the footer of your web page that tracks visits to your blog. It records facts such as unique visitors, returning visitors, their country of origin and how they found your site. Google Analytics will show whether they entered your URL directly, followed a link from a referring site or found you via search results in Google or other search engines.

Using this information you can track the improvement of your site as time goes by and work on any areas that could use some attention. Your web most may also provide a similar traffic monitoring program which you can use instead of or as well as Google Analytics.

An about or welcome page

While the posts your publish are what’s going to bring people to your site, it’s important to have an about page to give you’re visitors some insight into who you are and what your about.

This is particularly important if your selling a service, these pages will probably be your visitors next stop after the post that they arrived on.

Social networking / bookmarking icons

Social bookmarking is a great way to spread and promote your content. If you visitors like what they read, social booking icons are a call to action for your readers to easily bookmark your post on their preferred social network such as Digg, Reddit, Stumbleupon etc.

Having your readers continually bookmark you posts to these networks builds your sites exposure and possibly back-links depending on the particular site. Without these icons your readers are otherwise unlikely to promote your content in this way. If you’re looking for a place to start, the plug-in used on this site is SexyBookmarks.

That ought to do it.

It’s a long tedious list I know, but getting it done first will give you the best start you can have. If I’ve missed anything you think should be here let me know.

Don’t forget to use my social networking buttons *hint hint*

• Get #1 on Google by writing an e-mail (4)
• New WordPress theme, now bigger and better! (2)
• The SEO problem with single page website designs (4)
• Preview changes on live webpages with the Firebug plugin (2)

Your new website pre-launch checklist

As any web designer will tell you, Internet Explorer, especially version 6, is the bane of our existence (you can buy “I hate IE 6″ tee-shirts now). Unfortunately for us, around 60% of web users are using Internet Explorer as their default browser and around 15% are still on IE6.

If you’ve played with web design to any extent you’ve probably experienced some of Internet Explorers renowned problems for yourself. Such as;

• It rarely displays CSS code as it should and throws in extra margins/padding/line-height wherever it feels like
• IE nearly always requires a second style sheet to be created full of crude hacks to overcome the above listed problems
• No PNG support, turns all your transparencies into 50% grey
• It can still somehow fail to correctly display sites that adhere to WC3 standards
• Fails to display unordered list blocks in 10 different ways
• And the point of this article, of the 10 different unordered list errors there’s 20 different solutions, and the correct one is never the same for 2 people

After creating my new wordpress theme for this site, i had the even stranger problem that in IE6 the blocks in my right column displayed correctly, while the left column blocks where showing as around 3 times the height even though they were using the same rules. Obviously this totally ruined the look of the site.

The solution to the problem varies depending on exactly how your unordered lists are set up.

Solution #1 is to float your anchor tags like so;

ul a { display: block; float: left; clear: left; }

This however prevents your link from filling all available horizontal space, so the red blocks you see when rolling over the links on my site stop at the right end of the text, rather then covering the full width of the column.

Solution #2 is to set a solid border on the bottom of your list elements.

ul li { border-bottom: 1px solid #666; }

Having a definitive edge to the block for some reason causes IE6 to find the bottom of the block rather then adding whatever size chunk of white space it feels like. Though having a solid line at the bottom of each block may not be suitable for your design.

My site for example already has a grey border at the top of each block, a grey border at the bottom would make the lines between blocks too thick, while a white border would put off the effect of the red when rolling over the links.

Solution #3 is having your list element displaying inline, while your anchors display as blocks. If this works for you there are no complications with borders or rollover widths etc.

ul li { display: inline;}

ul li a { display: block;}

Solution #4 is setting your anchor height to 1em, this makes the height of the block as small as possible and just fits your text and top / bottom padding into the block.

ul li a { height:1em;}

This works fine for single lines of text, but if any of your link titles flow down to a second line, both lines are compacted into a single box, not a great look.

Solution #5 After listing these solutions you’d think my problem was easily solved, but no. Of course none of these worked for my particular setup. In the end giving my list elements negative margins like so;

ul li { border-bottom: 1px solid #ffffff; display:block; margin-bottom: -1px;}

This arrangement adds the solid border to define the bottom of the element as mentioned before, while hiding the border itself and preserving the design of the site.

All this for 1 internet browser *sigh*. Hopefully if your experiencing this problem with your current design one of the above solutions is the answer for you.

In the mean time, if you’re still using internet explorer do yourself a favour and download a copy of Firefox

What are your thoughts?

Have you got any other experiences / solutions to this problem? I’d love to hear them.

• 100 habits of successful graphic designers (9)
• How to customise your WordPress login screen (2)
• Google Adsense ready WordPress themes (2)
• Should you stop image hotlinking? (0)

How to fix the Internet Explorer 6 (IE6) whitespace bug

Flash is pretty common now-a-days, I’m sure you’ve all been to a website that’s had a great flash introduction or menu that you’ve been really impressed with. You’ve also however probably used an office / friends / other computer to visit the same webpage and been greeted by a decidedly less impressive blank box.

Flash can have a great visual impact, but does carry its share of restrictions, this articles explains a few things to consider and hopefully help you decide if your website design should incorporate flash.

Will your visitors have the flash plugin?

I read that around 80% of users have the flash plug-in, it also comes installed by default with any modern browsers, this still leaves 20% of users without the flash plug-in. Are these people your target audience?

Chances are if someone doesn’t have flash by now, they aren’t going to get it. This may include anyone using older computer equipment, someone who is not very internet-savvy or anyone using there workplace internet. Many company’s have security in place to stop users downloading anything to avoid potential problems. If any of these sound like your potential customers flash may not be the best for your website.

Is flash the right tool for the job?

Flash is exactly that, flashy. If for example, your website is promoting a technology based product, flash might be a good idea. Your target audience is likely to have the necessary plug-in and be attuned to the high impact visuals flash is capable of.

If your site is perhaps promoting something more conservative or textile perhaps, an exotic flash site may be overwhelming. Flash can defiantly be used to create subtle animations to great effect, however if your thinking of something minimal the same result is probably achievable with standard html and a little java script, which requires no additional plug-ins. Your target audience should play a great part in your decision of whether to use flash or not.

How will flash effect search engines?

This is possibly the most important concerns with flash. Anything done is flash is invisible to search engines. An introductory animation or something similar is going to be of little impact, however doing an entire site in flash robs you of essential all your visibility. This is obviously no good if discovery of your site via search engines is important to you.

So while flash can be great, its not always the best solution, hopefully these few points will allow you to choose what’s best for your future site.

• New WordPress theme, now bigger and better! (2)
• Preview changes on live webpages with the Firebug plugin (2)
• Make your blog “Digg Proof” with caching plugins (2)
• Your new website pre-launch checklist (3)

Should you use flash?