Web and Multimedia Design

Adding video to your website

By Mark | Published April 12, 2012

I am often asked if it is possible to add a video to a website. You have a video file on your computer and you want to show it to the world through your website. How do you do this?

Videos are trickier to add than most other forms of media for a few reasons:

They come in a variety of different sizes, definitions and aspect ratios
There are a lot of different types, such as AVI, MPEG, WMV, MP4, MOV, 3GP, FLV and the list goes on…
They usually have very large file sizes making them difficult to upload to a web server

So what’s the solution?

Vimeo and YouTube are excellent, free solutions to using video on the internet. When you send your video to Vimeo or YouTube it is automatically converted and compressed to a suitable format and you are given a neat little piece of code that allows you to “embed” the video into your website.

Of the two services YouTube is more popular and faster to work with, but it is often blocked in schools. Vimeo tends to be more widely accessible for schools.

The process for adding a video to Vimeo or YouTube is very similar.

1) Go to www.vimeo.com or www.youtube.com.

2) Log in, or create an account if you don’t already have one.

3) Click Upload or Upload a Video

4) Select the video file from your computer

5) While the video is being uploaded you can add a title, description and choose who you want to see the video (Public/Private)

6) The service will work its magic.

7) After several minutes your video will be added and you will be able to view it online, share it with others or embed it on your website.

Embedding the video on your website

Both Vimeo and YouTube allow you to “Embed” a video on your website, so it appears within your website page like this:

To add it, find the “Embed” link, which is usually located somewhere on or around your video. When you click this you will be given a piece of code that looks something like this:

<iframe src="http://player.vimeo.com/video/38766976?color=ff9933" width="512" height="288" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>

This is ‘HTML code’ and it tells your website to display your video. Copy this code by selecting it and either right clicking with your mouse and selecting “Copy“, or by holding CTRL and C on your keyboard.

Where do you put the code?

Where you put the code depends on the type of website, but typically you should:

1) Log in to your website so that you can edit it

2) Go to the page that you want to add your video to

3) Click the link to edit the page

4) In the editor click “Source” or “HTML” to allow you to add your code

5) Paste in the embed code that you copied earlier by either right clicking with your mouse and selecting “Paste” or by holding CTRL and V.

6) Save your changes and your video will be displayed on the page

*Plugins are available for Joomla and WordPress that allow you to streamline this process. If you would like this feature to be added to your website please feel free to contact me.

Examples

St Winefride’s Primary School in Bradford are making great use of video on their website using Vimeo. The pupils are heavily involved in the creation process and learning how to make videos with fantastic results. Please see:

http://www.stwinefridesprimary.co.uk/

Choosing a website designer

By Mark | Published July 22, 2011

With so many website designers and design companies out there it’s often hard to know which one to choose. Making the right choice is crucial, so I have put together a few tips to help you root out the good from the bad.

Are they still in operation?

It sounds a silly question but in this competitive market a lot of web designers and web companies have ceased trading. Just because a company’s website is live it doesn’t mean that the company is still in existence. If their homepage looks abandoned or the footer of their website says Copyright 2007 then you are probably wasting your time.

Does their website look professional?

They say a plumber’s tap always drips, but if a web designer has a poor web presence it is absolutely unforgivable. Their website should look professional and be easy to use. Some key things to look out for are:

Spelling mistakes – We’re weren’t all junior spelling champions, but with software such as Microsoft Word it’s not hard to make sure that your content is free from errors.

Over SEO – A common mistake that website designers/companies make is to over search engine optimise their websites by filling it with repetitive keywords and phrases. It might give them a minor boost in search engines, but it comes at the expense of looking spammy and unprofessional.

Broken Links – If any of the pages of the website don’t work or say “Coming Soon” then alarm bells should be ringing.

Contact details – Look at the contact email address. If it ends in @hotmail.com @yahoo.com or any other free mailbox service then the chances are they lack technical skills.

Are there examples of live websites they have created?

Every design company should have examples of their past work in a Portfolio/Recent Work section. Furthermore these should be links to live websites. I often see portfolio work that is nothing more than a picture of a website, with no working version available.

Are the websites they have created any good?

Any professional is only as good as the work that they have created in the past. By looking at their past work you will get your best indication of how good they are. Do their websites function well and look professional? Would you be happy if your website was like these?

Do they spam the websites that they create?

It is common for website designers to put a subtle text link back to their homepage at the bottom of the websites that they have created. It shows that they are proud of their work.

Some companies take this too far by spamming their clients’ websites with chunky logos and long winded terms to promote their websites. In my opinion this is very unfair and unprofessional.

What sort of clients do they work with?

Some design companies are bigger and more renowned than others. To find a company that will suit your budget you should look at the clients they have worked with. If their client base includes Nike, Disney and other big names, but you are looking for a website for your local DIY shop then you might be best looking elsewhere.

Don’t be lured in by buzz words, insignificant awards or approvals

There are a lot of buzzwords that web designers and companies might throw in to entice you (SEO, Web 2.0, W3C, CMS etc.). These terms are important in the right context, but are often used to make things sound more flashy than they actually are.

At the time of writing, if you search for Multimedia Designer in Google I am 4^th in the list, but it’s not something I rave on about. In my opinion, if a website is made properly it will naturally be search engine optimised. Google repeatedly advise that websites are designed and built for humans, not search engines!

Look out for silly little awards and graphics saying things like “Approved web designer” – most of them don’t actually mean anything!

Will you be tied into a contract?

You will find that some companies operate differently. Some will hand over all intellectual property rights to your website and some will maintain ownership so that you have to pay an upkeep fee or maintenance contract.

Neither way is necessarily right or wrong, but it’s worth taking note of any pricing structure that will be involved.

Where are they based?

The creation of a website can be done remotely, so the location of the website designer/design company isn’t a massive issue. However, it is sometimes more convenient and reassuring if you know that your web designer is fairly local.

Posted in Tips and Tutorials | Tagged choosing a web designer, tips, web design | Leave a comment

Three pieces of advice for new web and multimedia designers

By Mark | Published January 26, 2011

I was recently featured in a list of resources for multimedia students and it made me to think back to when I was a student, yet to experience the world of commercial multimedia.

It would be no exaggeration to say that I learned more in my first few months as a multimedia designer than in my entire final year at university; and that’s nothing against my university – I just learned an awful lot! So if I looked back to when I was just leaving university and about to move into employment, what words of advice would I give myself?

Become a good Googler

Google is a fountain of knowledge – Do not be afraid to use it if you get stuck. You might think that your co-workers or your boss will think less of you, but let me tell you, even after over four years as a multimedia designer I visit Google at least once a day to help me solve problems that come my way. Your boss would much rather you spend 20 minutes finding a solution on Google than spend 4 hours trying to solve it yourself.

Being able to use Google to find solutions is a great skill to have. Does the website you are working on not look right in Internet Explorer 6? Are you getting a PHP error? Is that extension that you installed not working? If you encounter a problem the chances are someone else has had it before, so type out the problem or paste the error code into the Google search bar and hit search.

Most of the results will usually be forum threads and blog posts. Scan through these, read the responses and before you know it you will find an answer. (If not, why not register and post your question on one of the forums?)

Test, Test and Test again

It’s happened to me before a number of times. I’ve created something for a client; it works brilliantly on my own computer but then as soon as I try it on theirs, something goes horribly wrong. It’s very embarrassing and sometimes non preventable but it’s definitely something to watch out for.

There are a million different setups a computer can have (Windows/Mac, XP/Vista/7, Internet Explorer/Firefox, different versions of Flash Player) and the list goes on, so it goes without saying that all systems aren’t going to work the same.

When you have built your multimedia or web application you are only two thirds of the way there. You need to test it out on as many different platforms as you can get your hands on. Your sister’s computer, your phone, your Nintendo Wii…

A few years ago I was involved in a project to create a multimedia resource for a very large organisation to be distributed on a CD-ROM. The disc had to run an interactive application if it was put in a PC and play a video through the TV if it was put in a DVD player. We somehow managed to pull it off but the client wanted assurance that it would work in most household DVD players, so we went to the nearest Currys electrical store and they were kind enough to let us try it on a range of different brands!

You probably won’t need to go to these extremes, but why not send it out to friends and family for them to test and report back with any problems?

Back up your work

You will hear this a lot, but believe me, don’t ignore it. There are nasty little gremlins living in your computer that break your equipment when it is least convenient.

A couple of years ago I was involved in the creation of a video and on the very day that it was supposed to be sent to the client, the external hard drive with the Adobe Premiere file, video files, graphics and all other working files broke. Thankfully we had exported an old version of the video a few days earlier, which we were able to chop up and reassemble – but this still cost a lot of extra man hours.

Over time you will develop hundreds of folders of projects, working files, images, content from clients etc. Imagine what would happen if you lost all this…

It’s always a great idea to keep two or more backups of your files. Furthermore you should keep one of them in a completely different location in case of theft, flooding, fires etc. I use a great free program called Spesoft Backup and back up my files on a daily basis.

Posted in Articles, Tips and Tutorials | Tagged advice, multimedia students | Leave a comment

Picture resizer – great for schools.

By Mark | Published December 1, 2010

I recently delivered some training to a local school on the popular open source virtual learning environment Moodle. For those who are unfamiliar, Moodle is like a content management system, but geared towards education. It allows teachers to create courses, lessons, quizzes and much more.

The process of uploading and inserting images into courses is very simple. The problem is that images downloaded, scanned or taken with digital cameras can be very large. This means that they take a very long time to upload and download.

Images need to be resized to a “web suitable” size prior to being uploaded. So what if you have a folder of 100 images to resize? Schools often don’t have the relevant software to resize images on their computers and teachers usually don’t have the priveledges to install software themselves. This is where Picture resizer is invaluable.

Picture resizer is a simple executable file that can be downloaded freely from this website (http://www.rw-designer.com/picture-resize). It doesn’t need to be installed and is very simple to use. Simply download the file, then:

1) Right click on the file and choose rename
2) Change the number in the file to the width that you want your image/images to be. E.g If you want your images to be 400 pixels wide you would call the file PhotoResize400.exe. If you wanted your images to be 200 pixels wide you would call the file PhotoResize200.exe
3) Finally, drag the image or a selection of images onto the photo resize file and let the magic happen!

Your image/images will be duplicated and the new ones will be the width that you specified in step 2.

More detailed instructions, with screenshots can be found on the tool’s website, so please visit http://www.rw-designer.com/picture-resize for more information.

http://www.rw-designer.com/picture-resize

Posted in Tips and Tutorials | Tagged Image resize, Moodle | Leave a comment

Open website in all browsers with a batch script

By Mark | Published April 22, 2010

An important part of website design is to make sure that a website displays correctly in all of the most popular internet browsers.

I’d like to share a little batch script I created that saves time and effort by opening a website in Internet Explorer, Firefox, Opera, Safari and IETester in one go (provided you have these browsers installed on your computer).@echo off set /p var= Which URL would you like to open? start "Internet Explorer" "C:\Program Files\Internet Explorer\IEXPLORE.EXE" %var% start "Firefox" "C:\Program Files\Mozilla Firefox\firefox.exe" %var% start "Opera" "C:\Program Files\Opera\Opera.exe" %var% start "Safari" "C:\Program Files\Safari\Safari.exe" %var% start "IETester" "C:\Program Files\Core Services\IETester\IETester.exe" %var% exit

To use this script simply copy and paste it into notepad and save it as a .bat file (eg. browsercheck.bat) then double click the batch file to use it. A window will appear that prompts you to enter the URL of your website, hit Enter and you’re away!

To add functionality to open Google Chrome it’s a little more complicated. You need to find the target location for Chrome’s executable file. This can be found by right clicking on the shortcut to Google Chrome and clicking “Properties”. Typically the final command will look like the following, with username replaced with your username:

Windows XP

start "Google Chrome" "C:\Documents and Settings\UserName\Local Settings\Application Data\Google\Chrome\chrome.exe" %var%

Windows Vista/Windows 7

start "Google Chrome" "C:\Users\UserName\AppData\Local\Google\Chrome\chrome.exe" %var%

Posted in Tips and Tutorials | Tagged batch file, script, web browsers | 2 Comments