A streaming feed is slightly different to a pre-recorded broadcast as Al Alamia was streaming the content from their own third-party provider. However, the direct feed link does not work out of the box using traditional EMBED codes in HTML.

I hit the same problem last week when trying to add a video to the Meejana website. I tried to get the LongTail Video plugin to work (which I used on the Al Alamia site – a great option for embedding streaming links from other providers) but, after trying several video conversions to different formats (.mov, .mp4, .avi, etc), the video just wouldn’t play.

A different approach was needed.

Enter YouTube

Possibly the most widely known video site on the planet, YouTube offers the perfect platform to host and stream your video. They have taken care of all of the technical issues surrounding playback and now offer a host of editing solutions to help you enhance your uploaded video if you so choose (for example subtitles, closed captions, new soundtracks, etc).

There are other sites that can deliver the same solution for you – such as Vimeo – and the choice is up to you.

1. Create an account on YouTube for yourself or your brand. This is your ‘channel’.
2. Access the ‘Video Manager’ and select ‘Upload a Video’.
3. Click ‘Select Files from your Computer’ and select the video file on your hard disk.
4. While the video is uploading (it will take a while), enter the Title, Description, Tags and select the Category that relates to this video. These will help you get views on YouTube and via general web searches.
5. After your video upload has completed, click the ‘View on Video Page’ button. This will take you to the live YouTube page that displays your video. Congratulations! You are now a video publisher!
6. To get the video on your website, click the ‘Share’ button under the video, then click the ‘Embed’ button that appears.
7. Copy the HTML code that is shown and paste this into your website where you want the video to appear. You can edit the options associated with this code, such as displaying related videos and the size of the player window – just remember to change these options before copying the code.
8. Upload your changed website page to your website.
9. That’s it! Your new video will stream from YouTube on your website.

Another advantage of using this method is that you can embed your video easily into other systems, such as Facebook, simply by copying the YouTube URL. This gives you an easy mechanism to share and propagate your content over-and-above simply embedding it in your website.

1. What Lies Beneath (the code)

If you have ever had more than one person work on your site – in other words different freelancers or companies – there is a good chance that each has used their own coding techniques to achieve the result. And quite often, they are not compatible with each other – or even standards compliant. The result? Your website’s code looks like the equivalent of a bowl of spaghetti.

This means that modern browsers might not understand it, and that means it might not display properly so people don’t get the important message you are trying to deliver. Furthermore, search engines might not be able to decipher it properly and it could annex sections of your site from indexing completely.

And don’t get me started with tables. Up until a few years ago, every novice developer used tables to lay out a website. Tables are hard to read and maintain (without a WYSIWYG editor), and they add an exponential fog factor for search engines and consequently weaken the value of your content. They are also technically invalid HTML code, so if your site uses them you should rethink your approach and have a spring clean.

Example: We recently took over the maintenance of a small website that had a JavaScript navigation menu and the basic HTML was not even structured properly. There were no bracketing HTML, HEAD and BODY tags in 99% of the pages. Although browsers managed to display the site, the lazy approach to style sheets, the endless embedded table tags, and the basic HTML coding errors meant that some of the site was invisible to search engines, the navigation didn’t work properly (or at all) on some pages, and some of the layout was broken. It worked when it was first built (mainly because IE6 was happy to accomodate poor coding by trying to do its best to render the site) but no longer works. Internet Explorer is now more standards compliant and many of the quirks of the older browser have have been removed, effectively ‘breaking’ the website when it was the original code that was actually broken. Having fixed these things, the result is that visitors can navigate the site and search engines can index it.

2. Not Getting to the Point (Intros & Flash)

As access speeds have increased, so has our impatience at website loading times. If the site doesn’t appear almost as soon as we arrive we tend to leave and click the next result from the search engine. Also, we use more and more different devices to access the web anytime and from anywhere. Some of these devices don’t display Flash and so renders your site inaccessible to many people.

Back in the day (up to a few years ago) the Web was still ‘new territory’ for many and their first foray into it was meant to look cool, to show off the new plumage. It was as if companies became strutting pheasants intending to make their mark. However, as the Web has become part of everyday life the expectations of website visitors have moved beyond strutting pheasants and they now expect to find the information they want quickly and with minimum fuss (ie very few clicks from where they arrive).

3. Going Incommunicado (Not adopting Social Media)

Social Media (Twitter, Facebook, Google+, Blogs, Review Sites, etc) is coming of age and if you’re not in some way part of it your brand may been seen as a bit cut off from the rest of the world. While social networking is a skill that needs developing, we would recommend at least setting up a Facebook Page for your company as a way to engage and communicate with your prospects and create a platform to demonstrate your expertise outside of your ‘official’ presence. These platforms offer new ways to engage with other people and raise your business or personal profile. If nothing else, they help you effectively distribute news and other information which is an excellent first step in this arena.

4. Being a Cave-dweller (Not being Mobile)

The rise in the number of mobile (and non-desktop) devices - smart phones, tablets, TVs, games consoles, etc – is incredible. People are consuming content on the web in numerous ways that didn’t exist a couple of years ago. However, these devices have their limitations – for example not displaying Flash, or having much smaller screens – which means your site may not be viewable by some or many of your visitors.

Depending on your business, this may not be critical but it is something you should consider next time you do an update to your site.

Example: We have a client who had a website designed exclusively in Flash. It is a beautiful site, but since the owner got an iPhone he cannot see the site at all. We were asked to build a small HTML (static) version of the site so that people with mobile devices (and other accessibility needs) would still be able to find out about their business and contact them. The result? More conversions from the site and better SEO.

5. You’re not into DIY (Not using Content Management Systems)

Aside from personal choice of not wanting to make changes to your website, most businesses separate the tasks of updating the content and developing the website. The former is usually done in-house, quickly and on-demand, while the latter is usually outsourced. Development is a time consuming process, while content update shouldn’t be. However, when you outsource it to a developer it can take time to implement because they are busy doing what they do best – developing code – and your updates need to fit into their schedule, which means it can be a few days before they get done (depending on how many changes there are and how big your site is).

By not using a Content Management System (CMS), you risk the high costs of having to pay for every little change, plus you might not get the changes done when you need them to be done. Also, the longer term benefits of a good CMS mean that the coding is easier to maintain and the web pages are standards compliant (as long as your developer makes them that way).

6. Lack of Purpose (No Call to Action)

Your website is great. It has lots of useful information. It looks pretty. And, wow, that Flash intro rocks!

But so what? Why did you build the website in the first place? Was it supposed to be the showcase it has become, or did you build it to achieve something? More sales, sign-up to a newsletter, generating leads?

My guess would be that it was the latter, but over time or through lack of clear direction it has failed to achieve or wandered away from these objectives.

If you are suffering from any (or all) of these issues, please feel free to contact me and I’ll be happy to offer some advice or quote for a makeover. Or feel free to discuss any of these 6 points below or over on our Facebook page.

Here’s an example of an email I received today (and about once per week on average):

From: Ankur [reciprocallinks.seo@gmail.com]
To: Emissary Consulting

Dear Sir/Madam,

We are a leading web design services firm is located at Noida, India  and having presence in US, UK, Canada and Australia. We provide the best Website Designing And Development (ASP, ASP.Net, Java ,Perl and PHP development)  developers and SEO’s, specially for Graphic/Flash/3D designing. With Graphic/Flash/3D designs, we thrive on the idea that design makes a difference We can provide you with a fresh, professional image via a recognizable trademark or logo design. We have our competency in CMS (Joomla, Modx, Mambo and other quality Content Management System) and e-commerce websites. We customize our processes and reports based on client’s styles and guidelines.

We have result oriented low price promotion packages to match your needs. We NEVER contact your end client in case if you are an agency client and sign up the NDAs with you. We appreciate your interest in services. If you would like to know more about our services.

Regards,

Ankur

Here’s the problem – the email is not traceable to any company. The email address is some generic Google Mail address, there are no telephone numbers and no links to a company or freelance website. There is no way to determine who this person (or these people are) from the email, even though it “sounds” professional on the surface.

Ankur has contacted me twice so far, using different email addresses. Needless to say I mark his emails as spam now.

If you deal with small clients, these types of emails are your enemy. Your clients are probably receiving them and may be seduced. They may also raise unnecessary questions which, though seemingly valid to the client, aren’t valid in a professional web design or development context. But, you will have to be ready for them and ensure you have the right defence against them to protect your business. The more you establish yourselves at the outset as a clearly professional organisation – by setting clear boundaries for everything such as terms of business, payment, design approach, number of revisions, etc – you will clearly differentiate yourself, manage your client’s expectations and more effectively deal with incursions from unprofessional organisations such as the one who sent the email above.

I was going out at the weekend and wondering where to go and what to eat when I got there. My partner suggested we try the Black Rock Grill concept where you cook your own meat to your exact requirements on a hot rock in front of you. It sounded fun, so I tried to track down a restaurant that used the system.

Google didn’t return much of any relevance in my area, so I checked the supplier’s website. They didn’t have a tool to help me, so I kept digging. After a while I happened across a link to a dedicated website to help me find a restaurant near me that was using the Black Rock Grill, a website that had been created by the suppliers of the equipment. The website is www.eatblackrockgrill.com

Great! So I clicked into the “find a restaurant near you” page and was confronted by a form that wanted to know my name, email, telephone, postcode and had an “information” box. There was no description about this latter box – what was I supposed to put in it? – nor any indication if any or all of the fields were mandatory.

I entered a postcode – after all, I only wanted to find a restaurant near me – but I got an error asking for my email. OK, now I know which fields are mandatory at least! So I entered the information and was then greeted with a “thank you for your form submission” page. That’s it. Period. No restaurant list, nothing.

Personally, I think this is one of the worst “where’s my nearest …” implementations I have seen in 2009. Why is this?

1. There was no clear link to this dedicated website to help me find a location (it was buried in the suppliers main website)
2. The “find a location” page has zero information to help the visitor find a location, just a generic form.
3. A “find a location” system should do 2 things very well, and 2 things only. Sadly this system did neither. Here are the 2 things:
   1. Ask you where you are
   2. Show the nearest locations to you in a list or on a map (or both)

It is critical for success on the web to think about what the user wants. If they want a location finder, don’t try to capture marketing information from them (unless you’re explicit and clear that it’s optional), and (especially) don’t tell them “we’ll get back to you” when they do manage to complete the form. People asking for “where’s my nearest …” have an immediate need, and not one that can be satisfied a few days later. This is a one-time opportunity to fulfil their needs and make them a happy visitor, one who might return again and again. Anything else and you’ve lost them.

Looking at a wider scope, your website may be about your business, or made to sell things to customers, but if it isn’t built for those customers you will lose them to a competitor who does the job better. The more you can think about what your site visitor wants, the better you will achieve the results you want.

Needless to say I didn’t go to eat at a Black Rock Grill outlet as I couldn’t find one!

The Oatmeal: Design Hell

In the mid-90s – and it’s a technique that is still widespread today – the website design (how it looks) is often the first things that gets produced – before any content is written, before any photography or illustration is planned, before any functionality is considered. Often, even the content structure (approximate number of pages. navigation structure, etc) is not known or has not even been thought about.

This approach is inherently flawed for a number of reasons:

• It sets wrong client expectations
• It creates problems for the designer after the design is signed-off
• It creates problems for the developer
• It creates problems for the website visitor

These are not trivial issues, so why do many agencies and freelancers still persist in adopting this “design first” approach?

Client Expectations

Once the design is complete and signed off, it is usually what they expect to see on screen once all the development work is complete. However, if content has not been thought about before the design work starts it is very easy to fall into the trap of discovering that there is much more content that there is available space in the design for, or there is supplemental content which would be nice to have alongside the primary content but there is nowhere to put it.

Consequently, design changes will be necessary during development to accommodate the actual content. This may, in the worst case, mean a complete redesign which could be costly.

Problems for the designer

Following on from the client expectations, it is quite easy to see that the actual fault lies with the designer for not ensuring that the site conformed to the primary requirement of being suitable for the content. Theoretically, the designer should fix this problem before development begins. The designer then needs to manage and realign the client’s expectations as well as deal with the fact that they now have an extra workload to accommodate which may be unpaid.

Where the designer and developer are separate, as in the case of freelancers or agencies working together, it is sometimes left up to the developer to sort out the mess.

Problems for the developer

At this stage, we are now 2 steps removed from the content and the developer is left in the difficult position of trying to fit a quart into a pint pot – an old expression which means trying to fit too much into too little space. The problem is exacerbated when the client expects the developer to be able to fix the layout problems caused by too much (or not enough) content, especially when the developer is purely technical and does not have visually acuity as I have discussed in earlier posts. The problem can be reversed when the client insists that the design is followed strictly but the content can’t allow this.

Problems for the website visitor

Once all the hacking has been done by the various people involved – the client, the designer and the developer – the end result may not be an ideal experience for the website visitor. After all, the website should be designed to present the client’s information in the best possible fashion so that the required messages are delivered clearly and succinctly, the site is easy to use and a pleasure to experience, produces a favourable brand experience, is easily navigable, visitors don’t get lost, products get sold, etc, etc. If we haven’t started from a content out approach, as we have seen from the preceding three problems, we can very easily dilute the experience and fail to deliver the message because design is more important than content.

So why do many agencies and freelancers still persist in adopting this “design first” approach?

Simply because that’s how everybody does it, and it seems that’s how the client expects it to be.

An analogy

When you buy or rent a house you have to accept the limitations of that house; after all it was built in advance of you moving in; the designer, architect and builders didn’t know what furniture you had and so could only created generic spaces to live in. You can’t move the walls (without major work) and so you have to make your furniture fit when you move in. This might mean there is too much space and you need to buy more furniture, or you need to get rid of some so that what you have left fits properly. And you will probably redecorate.

However, on the web we have the advantage that we can measure your furniture (content) before you move in, and design each room (page) to fit perfectly around your content. Consequently, we can build a perfectly tailor-made house (website) for you. But few people adopt this approach and we end up with the problems above which can easily be avoided if we adopted a content-out approach to web design and development.

If we try to do it the house-building way, we often run into additional costs and delays mid-project when the client’s content arrives and we find it doesn’t fit the original design. Who bears those costs is another topic entirely!

Why content-out is a good approach

The web is a content delivery medium; the more effectively we can deliver the content to our target audience, the more effective our website will be for our business. So, if the web is a content delivery medium, shouldn’t content be the most important element of our design and development process?By starting with the content we can align every member of the team to the core purpose of the site, from the stakeholders through to the sales and account managers, and on to the project teams – information architects, designers, developers. With every member aligned to a common purpose, it is much easier to achieve that purpose than if different members or teams operate in relative isolation only to come together towards the end to find their individual pieces of the puzzle don’t quite fit together.

To summarise; Content-out design is a good approach because it:

• Improves cross-team and inter-team communication
• Ensures everybody is working towards the same goal from the start
• Clarifies the goals much earlier
• Avoids unnecessary surprises and consequential rework
• Establishes the relationships between the different content elements early in the process
• Improves efficiency and allows developers to start earlier in the project lifecycle
• Creates a real sense of how the site will work much earlier than traditional methodologies

With the release of Outlook 2007, Internet Explorer will no longer be used as the HTML rendering engine from within Outlook, instead using the Microsoft Word rendering engine within the Office suite. While this more clearly separates the browser from the operating system for anti-trust reasons, it has a negative impact on HTML email newsletters (irrespective of whether you are for or against them).

Outlook has approximately 75% of the corporate email market. As this represents huge volumes of HTML-capable clients, it’s not something that can be ignored given that most HTML email designers have been adopting more standards-based approaches including CSS. The problem is that Outlook 2007 no longer supports much of this. Here’s the headlines:

1. No background images – Background images in divs and table cells are gone, meaning the image replacement technique is out the window.
2. Poor background colour support – Give a div or table cell a background color, add some text to it and the background colour displays fine. Nest another table or div inside though and the background color vanishes.
3. No support for float or position – Completely breaking any CSS based layouts right from the word go. Tables only.
4. Shocking box model support – Very poor support for padding and margin, and you thought IE5 was bad!

Microsoft have released a full run down of what is and isn’t supported, including a downloadable validator that helps you validate your HTML for their engine. Word of warning though, it only works with Microsoft software and Dreamweaver.

This really is a game changer. Previously you could send a HTML email in the comfort that the majority of your recipients would have very good CSS support. Other email clients were also catching up. Thunderbird uses the Firefox rendering engine, the new Yahoo! Mail beta has great CSS support. Things were looking good for us CSS based email designers.

Unfortunately, that no longer applies. In the old days, if your email broke in Notes or Eudora, it was often an acceptable casualty, but if it broke in Outlook you’re more than likely ostracising too many recipients to justify your design approach. This certainly doesn’t spell the end for HTML email, it just takes us back 5 years where tables and nasty inline CSS was the norm.

Imagine for a second that the new version of IE7 killed off the majority of CSS support and only allowed table based layouts. The web design world would be up in arms! Well, that’s exactly what the new version of Outlook does to email designers.

You can read more about this in the original article at Campaign Monitor.

For email designers, there is a useful tool which helps validate HTML emails across the majority of email clients. The tool is called SiteVista and you can read more about it here.