Posting an occasional youtube video in your blog is quick and easy way to add a little content and pull in a few visitors. The problem for us 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 perfect. With a little cut and paste to the embed code however, you can still post the content without sacrificing 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.

• What is an RSS feed? (0)
• Marketing with Twitter, off to a good start (2)
• WordPress SEO with Matt Cutts (0)

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.

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 optimize the performance of your site. Even if you only do a small amount of web design, the plugin’s worth a look.

• What is a blog? (0)
• The “nofollow” html attribute explained (0)
• Google PageRank sculpting with Matt Cutts (0)

It’s been a little over a month since posting my initial experience on dedicated hosting, and so far, its been 40 days, 10 hours and 4 minute of bliss.

Like many, I initially started on shared hosting which was okay to start, but as time went by ( and presumably more people shared the same server ) things went from bad to worse.

With traffic growing and my site being plagued by slow or failed page loads shared hosting just wasn’t cutting it any more, but at 5 times the price I was hesitant to take the next step. I shouldn’t have been.

With my new host Media Temple, the performance and level of support that comes with there dedicated servers has been above reproach.

Two thumbs up.

I’ve spoken with many people who were in the same boat, unsatisfied with their shared hosting but hesitant to move up. What I can tell you from my experience is, I’ll never use shared hosting again.

• The switch to dedicated hosting (4)
• Is your blog Digg proof (0)
• How to delete your wordpress revisions (0)

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…

• How to embed W3C valid Youtube videos (0)
• 5 reasons to have valid webcode (2)
• 3 writing tips for your new blog (0)

Choosing the right web hosting can be a test to say the least. There are dozens of prominent hosts, each offering a handful of services all of which seem to have as many positive reviews as they do condemning ones.

After recently switching from one shared hosting provider to my new dedicated server, I can definitely say I’ve made the right choice.

While shared hosting is obviously the most affordable, a decent host usually charging a hundred and something dollars a year, it does have it’s downsides. With hundreds of users running on the same server, available resources can be slim and your site is at the mercy of your neighbours. One bad script or a surge from Digg can bring the whole thing crashing down.

After soldiering on for about 6 months with shared hosting and experiencing much of the above, I’ve finally seen the light and moved to a dedicated server with a new host, Media Temple, who so far have been great.

While previously on shared hosting, not a week went by without some issue affect my sites and those of my clients, some weeks problems seemed daily. While problems such as failed/slow loading times may have only last a few minutes, larger outages were happening far more often then the promised 99.99% up time basically all hosts promise, and 40 minute hold times to get told we’re working on it got old real fast.

My new dedicated hosting on the other hand has been great so far, admittedly its only been 3 days, but its been basically 3 days straight working on the server migrating clients accounts with no problems. Good news for me and the clients I host.

Support from Media Temple has also been excellent. After one small hiccup, and getting my self lost in the unfamiliar interface 3-4 times, each phone call to Media Temple was answered in a matter of minutes and the support person I spoke with personally resolved the issue while I waited, they didn’t just forward the message on to some mystery department to be resolved some hours later.

Home sweet home.

I will post an update in a month or so once I’ve had more experience with the site performance, but so far Media Temple have been a big improvement over my last 2 hosts and I have no problems recommending them.

Update: 40 days later, and still going strong.

• Forty days on dedicated hosting (0)
• Is your blog Digg proof (0)
• Should you use flash? (2)

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. 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)
• You new website pre-launch checklist (2)
• Search engine optimization 101 (2)

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, it just strikes me that choosing a single page website is a distinct disadvantage when it comes to online marketing.

• What is a blog? (0)
• 5 reasons to have valid webcode (2)
• Website grader – free SEO advice (0)

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 something like this:

For website operators deciding whether or not to prevent hot-linking would seem like a no-brainer. But depending on your 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?

You can find more information on preventing hotlinking here.

• It’s a long road (12)
• The “nofollow” html attribute explained (0)
• You know you’re subscribed to too many feeds when… (2)

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*

• 5 reasons to have valid webcode (2)
• Website grader – free SEO advice (0)
• Google vs social networking (16)

Website Grader is a free SEO tool that measures the marketing effectiveness of your website. It provides a score that incorporates things like website traffic, search engine optimization, social networking popularity and a variety of other technical factors.

It also provides some basic advice on how your website can be improved from a marketing perspective as well as on-page and off-page search engine optimization tips. The site requires no membership, generates reports for you immediately and records previous data points so you can track your sites improvement.

Your basic summary will look something like the above image, but there’s much more information available in the full report and it gives you a lot to track and measure.

The on-page report gives a summary of the internal elements of your site. Page title, meta descriptions & keywords, headings and your content. If you’re running a wordpress blog check out the All in one SEO plugin which really helps take care of this.

The off-page report is a compilation of various external factors that influence the marketability of your site such as Google page rank, indexed pages, your last crawl date, Alexa ranking, social bookmarks and inbound links.

How did you go?

Even if you’ve got an established site, Website Grader is worth a check. Your bound to be able to squeeze an extra few points out of your site.

• You new website pre-launch checklist (2)
• Google vs social networking (16)
• A problem with single page websites (4)