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.

What screen resolution to you design for? Leave a comment and let me know.

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

Yes, I have a Google+ Account, and while it is something I expect to be productive in the future, I can’t help but share the sentiments expressed in UK illustrator Jamie Smart’s “review” of Google Plus as illustrated above.

There are 40+ social network/online bookmarking/sharing platforms that I’m aware of and the list is growing. Unless you don’t require sleep, there simply aren’t enough hours in the day to productively use them all.

There are of course bookmarking services that post your content to a number of websites simultaneously, but without regular attention to the “social” side of social networking this only has limited benefits.

In the past I’ve experimented with many of the social network with mixed success. Stumbleupon in particular for me has resulted in either feast or famine when it comes to referred traffic, with some posts receiving up to 20,000 visits and others receiving literally a handful.

Quality and the popularity of content on other platforms also seems to have no correlation, with quality, informative posts that regularly deliver good traffic via Google doing poorly while “list posts” or other short n’ sweet content which doesn’t rank too highly in SERP’s doing very well.

Despite the initial negative vibe that may have been inferred at the beginning of my post, I do plan to use Google+ in the future, but it has long since reached the point where other networks simply have to go.

With the recent re-design of my WordPress theme now complete, and after little experimentation and consideration on what works best, I’ll be spending my time on Facebook, Twitter, LinkedIn, Stumbleupon, Digg and of course Google+ (the links are for following me if you feel so inclined…).

Will you be spending your time on Google+? Leave a comment below and let me know.

A concise Google plus review

In this guest article, writer Alvina Lopez highlights the benefits of writing guest posts to build your brand.

-

As a freelance writer who has worked primarily online, I can think of no better, fairly recent phenomenon for bloggers of all sorts than guest posting. While most guest post gigs aren’t paid, it’s an incredible opportunity to grow your brand or spread the word about your writing organically.

What’s more, there are a host of other benefits that come with the territory. It truly is a win-win situation for bloggers who accept guest posts as well as for bloggers who write them. Here’s why you should get on the guest post bandwagon:

1. It brings more traffic to your site.
This is the most obvious draw of writing guest posts. When you submit a post to another blog, and in your byline you list your own blog, you’ll be potentially drawing an entirely new set of readers to discover the writing you put out on your own platform.

Of course, this means you have to place a strong emphasis on writing quality articles that directly appeal to the readers of the blog to which you are submitting. Just churning out tons of low-quality guest posts doesn’t by proxy equate to more traffic on your own site.

2. It establishes you as an expert in various fields.
Just as in the real world, on the blogosphere and the Internet at large, reputation is everything. If you write for high-quality, heavily trafficked sites in niches about which you know a lot, you’ll soon earn a solid reputation as your guest posts are retweeted and spread organically.

Establishing this sort of reputation as an expert is an instrumental part of growing your blog and your brand.

3. It improves your writing.
Writing guest posts poses a unique challenge that you won’t contend with writing for your own blog. When you write guest posts, you must learn to strike a balance between adhering to the general style and subject of the blog, while still giving the readers a fresh voice and perspective.

You’ll also have to read the blog extensively to figure out what, precisely, the typical reader wants. All these considerations naturally make you a more versatile and skilled writer.

4. It’s an easy way to build connections with other bloggers.
There’s an inherent community aspect to guest blogging that, at least in my opinion, is just as gratifying as receiving more traffic and establishing your reputation. Even if only virtually, writing guest posts will enable you to meet bloggers from all over the Internet.

The mutual exchange of fresh content for recognition is a wonderful way in which bloggers can learn from one another. Especially considering that there’s so much junk and black hat tricks out there on the Internet, guest blogging is an honest and wholesome breath of fresh air. It helps others, while in the process helping you as well. What could be better than that?

About this guest author
Alvina Lopez is a freelance writer and blog junkie, who blogs about accredited online colleges. She welcomes your comments, email her at alvina.lopez@gmail.com Image credit.

Do you publish guest posts? How are your results? Leave a comment below and let me know.

Want to grow your brand? Start writing guest posts

Just about every WordPress blog theme displays the date a post was published which can be useful to your readers, if the date isn’t relevant to your posts however it can be disruptive to the appearance of your content is Google’s SERPS.

By using javascript instead of php code ( as is standard in WordPress themes ), the date/time will be shown in the exact same fashion as your current theme, but Google will ignore that piece of information and not show the date stamp before your meta description in the SERPS. Here’s how you make the change.

On most WordPress themes the 3 files you will need to update is your index.php to update your homepage, single.php to update your individual posts and archive.php to update your archives if you index them. More files may need updating depending on your theme. As always if your not 100% sure what you’re doing back-up your theme before making any changes.

Head into the appropriate file and find the php code which inserts the date with each post, it will look something like this:

<?php the_time('F jS, Y') ?>

Replace the code with the following:

<script language="javascript" type="text/javascript">document.write("<?php the_time('F jS, Y') ?>");</script>

The change will turn this:

Into this:

Much better!

Now you should be free to make the most of the limited and valuable space available for your pages meta descriptions, without the date stamp getting in the way.

The change won’t be instant of course, but your root level page should update quickly while your remaining posts will update over the next few days/weeks depending on how often Google crawls your page.

How to remove your WordPress post date stamp from Google SERPS

Due to receiving a steady stream of enquiries about submitting guest articles, I thought an F.A.Q. was in order. If you are a writer interested in submitting content to www.andrewkeir.com, please read the following.

A few simple rules, I’m sure none of them will come as a surprise.

• Relevant subject matter – Submitted articles must obviously be relevant to this website. Topics discussed on www.andrewkeir.com include branding, logo design, stationery design, SEO & social networking, blogging, web design and other graphic design related topics. If you are looking to submit articles related to any of the above fields then this is the place for you.
• Outbound links – Outbound links are fine where appropriate and relevant to the subject at hand. Articles bloated with links/anchor text without editorial value will not be accepted. (All outbound links may have the rel="nofollow" tag at my discretion.)
• Unique, quality content – Articles must be of suitable quality and should be unique to www.andrewkeir.com. If you are submitting/syndicating the same article across loads of other websites then thank you, but no thank you.
• Author credit – Naturally you will be credited as the author for the article, and you’re welcome to include a short byline promoting your services and website.

  You’re obviously welcome (encouraged, in fact) to promote the article through your own channels for mutual benefit.

Good? Good.

If you’d like to become a guest author, please contact me using the form below.

Information for guest authors

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.

0 to 255. Colour finder tool for web designers

We all know twitter is the latest and greatest online marketing tool, but people aren’t always forthcoming with any actual numbers or traffic gained from it. I happened to catch a post of mine being re-tweeted a few times the other day and thought I’d share the results.

My original post, 15 logo design disasters, was tweeted by a visitor to my site ( thanks @downwithdesign ) after which a meagre 14 people re-tweeted it. As a result, I received about 2,700 unique visitors from twitter alone, for that post, on that day.

This is small beans when compared to the viral potential of twitter, I get handfuls of these from time to time which is great. Fingers crossed and waiting for the big one.

How about you?

What sort of traffic does a tweet normally send your way?

Update 10/08/10: I’m afraid at the time of writing twitter refuses to show older tweets to allow me to give credit to the appropriate person, but I caught my post on the I Love New York logo design making the rounds yesterday, with 26 retweets bringing in about 3,400 unique visitors from twitter that day, for that post. Thanks to you, mystery tweeters.

How much traffic do you get from a tweet?

After a friends WordPress blog/server was hacked recently I took a deeper look into securing my site beyond the default security available. While there are plenty of security enhancement plugins available on WordPress.org, essentially all that I saw had poor ratings, insufficient feedback, were untested with current WordPress versions or were otherwise not what I wanted.

Instead, there is a simple, fool-proof way to protect the admin section of your blog by restricting it to your unique IP with a .htaccess file. Be aware, this is not the .htaccess file in your root directory. Applying this information to that file will prevent anyone from accessing your blog at all.

To secure your admin pages, create a new .htaccess file in your http://www.domain.com/wp-admin/ directory and copy the following code.

order deny,allow
deny from all
#home
allow from xxx.xxx.xxx.xxx
#office
allow from xxx.xxx.xxx.xxx
#etc
allow from xxx.xxx.xxx.xxx

Replace the descriptions and enter the IP addresses of your home, office, mobile etc. and you will deny any outsider access to this entire section of your blog. In the event your IP address changes, you will be locked out temporarily but simply have to update the file to reflect your new details.

Much easier.

In my opinion, using a plugin to achieve this is more complicated than it needs to be. By using a .htaccess file instead you’ll never have to worry about updates, version incompatibilities, bugs etc. Simple and secure. Image credit.

Secure your WordPress admin pages

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.

How to embed W3C valid Youtube videos

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 and benefits 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?

Personally I think the benefits are worth the effort. If your website doesn’t meet W3C validation standards and you would like it to, two excellent resources are W3Schools and the W3C Markup Validation Service.

The benefits of W3C validation

With the boom of social networking over the last few years, there’s a lot more traffic to be squeezed out of your website beyond just having good search engine optimization.

Social network and bookmarking sites such as Twitter, StumbleUpon and Digg have the potential to bring in huge traffic. And while every site can be found through search engines not every one is using these tools, giving you a potential leg up on the competition.

The only downside is social networking requires regular work, and getting to the front page of Digg etc. for a huge boost in exposure requires a little luck. There’s a lot of competition on social bookmarking sites and writing a fantastic article doesn’t guarantee it won’t slip through the cracks.

If you are fortunate enough to have an article land on the front page however, the results are undeniable. It wouldn’t be the first time a web hosting server has been brought down by a huge traffic burst of to an article featured on one social networking site or another.

Search engines are somewhat the opposite.

A search engine will crawl and index all your worthy content sooner or later without any input on your part, you can’t however put any extra effort into directly affecting search engine results even if you wanted to.

Your place in a search engines results is ultimately deciding by the engine based on your content, the more quality content the better your result, but unlike social networking you can repeatedly promote yourself to a search engine for increased traffic.

Search engine traffic is also slow to get going. In order to help prevent spam sites continually popping up, Google has what is commonly referred to as the sandbox. The reference is symbolic of children (new websites) playing in a sandbox until they’re all grown up and ready for the big wide world.

While there’s no official word on this from Google, it is believed that the sandbox effect lasts 4 months or so, during which you won’t see much traffic search engine wise. Once your out however, search engines provide a steady stream of targeted visitors with no additional work required on your behalf.

Ultimately it’s all good. If you don’t have the time/inclination to keep up the social front, search engines will bring you visitors but there’s plenty to gain from social sites if you can utilize them.

Where do you get your traffic from?

As a point of interest I’ve included the above graphic detailing my traffic sources for the last 3 months, for me social bookmarking plays a huge roll.

At the time of writing, Stumbleupon is bringing me 45% of my visitors, Twitter brings in about 11%, Google 35% while the last 9% is made up from blog comments, lesser search engines etc. How about you?

Google vs social networking traffic

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.

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?

Should you stop image hotlinking?

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.

Is flash hurting your website?