Posted under Latest Vacancies on January 19th, 2012 by Phil in the Studio / No Comments

mwa Digital is a full service Web Agency with skills across the board.

We are small but growing rapidly and have vacancies in the following areas:

Magento Developers – Senior & Junior

Drupal Developers – Senior & Junior

Website Content Managers - with proven SEO competence

Online Marketers – Senior & Junior with proven Social Media campaign experience

University placements - many areas

Our client list ranges from ambitious start-ups, contracting City agencies, through to global brand leaders.

They all share a requirement for solutions to make their message engaging, their processes more streamlined and their business more profitable.

You can read more about our projects in Our Work, or why not check out our Drupal Development, Magento Development and Online Marketing capabilities.

Why not write and tell us how you can make a difference to their success.

Contact Us or call our Studio Director, Philip Allen on 0844 544 9553.

Posted under Events on January 19th, 2012 by Phil in the Studio / No Comments

The 19^th of February sees a Fun & Fun from Bournemouth Pier in aid of The Steve Bernard Foundation.

The 19^th is Stevie B’s 25^th Birthday and how we all miss him after his untimely passing in November 2005.

It never ceases to amaze me how strong Father Tony, Mother Sue, and Brother Jacques have been, creating a foundation in Stevie’s name and raising more than £125,000 for projects across 20 sports and 4 continents.

February’s Fun Run (and walk if you like) is a Fancy Dress Festival of frivolity from Bournemouth Pier to Boscombe Pier and back.

It doesn’t matter how quickly you finish, you just have to look good in Fancy Dress and create a laugh, just as Stevie would have loved.

As for me, well I’ve pledged to complete the 2.8 mile course in the water on a Stand Up Paddle Board dressed in a Morph suit as the Silver Surfer.

My pledge is weather permitting because if it’s blowing a hooley you can’t paddle against it but if that’s the case I’ll jog the distance carrying an 11ft board on my head.

Entry fee’s go straight to the Steve Bernard Foundation and if you fancy making a donation, why not visit the official Website and get in touch direct.

I can personally vouch for this great cause.

See you on the beach in February.

Posted under Agency News on November 8th, 2011 by Paul Barnes / No Comments

In between the constant thrust of day-to-day web-building, there's no better place to take some time out than up one of the country''s finest peaks with a few friends. In particular, this late Summer's holiday(November!) saw us hiking the trail of Helvellyn in Cumbria. Having already gotten the Snowdon(Wales) and Scafell Pike climbs under my belt from preceding years, I had an idea of what to expect; thigh-hammering ascents, persistent rain and driving winds, all compounded with a frosty welcome at the peak. However, this year's climb was pleasantly different.

The day started bright and slightly frosty with a sharp 7:30 wake up accompanied with the compulsory English breakfast at the Keswick YHA to help combat the previous night's(day's) traditional pub crawl. A short drive to the base of the hike and we were soon togged up ready to set off. Within 20 minutes the togging was un-togged. An arduous start up a steep, never-ending hill saw off the little energy preserved from excessive tactical water-drinking on the previous night out(for which much stick was duly received).

Once the climb finally started to level out, things were much more pleasant, I particularly excel at level climbs! After a few minutes of untroubled walking, we were then presented with the ominous 'Striding Edge'(pictured in background above) - a well known feature on Helvellyn for the more adventurous climber. Of course, you can exit to the side paths which wind around the base of this edge and these, in their own right, are a challenge enough but the edge itself had to be conquered properly. With a slight aversion to heights, an undignified survival-crawl was adopted as the best method of negotiation for this stretch, an embarrassment further enhanced when a young girl and her dog had to side-step around me, nonchalantly walking, as if in the park.

After Striding Edge was proudly conquered, a short scramble to the peak was rewarded with some cracking views. We even got treated to some close quarters flying from the air-rescue helicopter while they were training.

The descent was interrupted by a second brisk peak which nearly killed off the thighs altogether but from thereon after it was literally all down hill.

A couple of minor blisters and a new realisation of unfitness was a not enough to round off a great day. The sun held out for the duration and for once, no wind and rain at all. Needless to say, the day was finished with another round of rewarding drinks at the local pub! Thoroughly recommended day out as long as your relatively good with heights.

Posted under on March 16th, 2010 by Paul Barnes / No Comments

If you have a website, are you certain that it is being presented consistently on all the major browsers on all platforms? If not, you may be losing a large chunk of your potential audience. How on Earth do you go about rectifying this? Spend hours fixing a bug on one browser only to find it creates more bugs on another browser?

Many professional web developers are increasingly tied up with testing web page markup/code on a multitude of browsers across Mac and PC platforms so the best way to minimise this is to build web pages correctly from the very start. The W3C, the World Wide Web Consortium provide a validation tool for both the general markup of a webpage and also for the styling(css) of a site. By adhering to this simple tool, a potential cascade of bugs, errors and under-performance can be averted. Here’s some more detail from the W3C site itself…

Validation as a debugging tool

While contemporary Web browsers do an increasingly good job of parsing even the worst HTML “tag soup”, some errors are not always caught gracefully. Very often, different software on different platforms will not handle errors in a similar fashion, making it extremely difficult to apply style or layout consistently.

Using standard, interoperable markup and stylesheets, on the other hand, offers a much greater chance of having one’s page handled consistently across platforms and user-agents. Indeed, most developers creating rich Web applications know that reliable scripting needs the document to be parsed by User-Agents without any unexpected error, and will make sure that their markup and CSS is validated before creating a rich interactive layer.

When surveyed, a large majority of Web professionals will state that validation errors is the first thing they will check whenever they run into a Web styling or scripting bug.

Validation as a future-proof quality check

Checking that a page “displays fine” in several contemporary browsers may be a reasonable insurance that the page will “work” today, but it does not guarantee that it will work tomorrow.

In the past, many authors who relied on the quirks of Netscape 1.1 suddenly found their pages appeared totally blank in Netscape 2.0. Whilst Internet Explorer initially set out to be bug-compatible with Netscape, it too has moved towards standards compliance in later releases.

Validation is one of the simplest ways to check whether a page is built in accordance with Web standards, and provides one of the most reliable guarantee that future Web platforms will handle it as designed.

Validation eases maintenance

It is reasonable to consider that standards such as HTML and CSS are a form of “coding style” which is globally agreed upon. Creating Web pages or applications according to a widely accepted coding style makes them easier to maintain, even if the maintenance and evolution is performed by someone else.

Validation helps teach good practices

Many professionals have been authoring the Web with HTML and CSS for years and know these technologies by heart. Beginners and students, on the other hands, will find automated checking tools invaluable in spotting mistakes. Some teachers also stress that automated validation tests are a good introduction to broader, more complex quality concepts such as accessibility.

Validation is a sign of professionalism

As of today, there is little or no certification for Web professionals, and only few universities teach Web technologies, leaving most Web-smiths to learn by themselves, with varied success. Seasoned, able professionals will take pride in creating Web content using semantic and well-formed markup, separation of style and content, etc. Validation can then be used as a quick check to determine whether the code is the clean work of a seasoned HTML author, or quickly hacked-together tag soup.

Posted under on October 25th, 2009 by Paul Barnes / No Comments

(Note: the below is relevant to most search engines but I will refer to Google for familiarity)

So you have a new website with great content and copy that has come straight from your existing company literature – everything looks and reads great but how is your site looking from Google’s point of view?

The chances are, if no due consideration has been paid to Search Engine Optimisation (SEO), Google will view your site with far less importance than you do and ignoring this may be cutting off your largest potential online marketing tool. Be warned that high rankings under the most popular keywords don’t happen by chance in the vast and overwhelming majority. You have to work hard for it.

Google, like most other search engines, deploy robots or, in their case, Googlebots which visit your new site in stages and crawl the content at varying levels of detail with each increasing visit. After a period of time, Google has a detailed snapshot of all the content on your site but how does it know what to do with your site? It cannot view the pictures – it cannot interpret your industry jargon and it certainly isn’t persuaded by your slick marketing presentation. So what does it do?

To first understand the relationship between the user who is searching for content and your website, you need to understand accutely what your customers or audience are most likely to type in if they were looking for the product/service/message that you sell/promote. For example, if you are a garage that sells car tyres, one of your website keywords/phrases might be ‘car tyres’. Now, if you search ‘car tyres’ on google.co.uk, you will soon see that pretty much all other garage business that sell car tyres in the UK have had the same idea so, unless you are very confident, focusing on ‘car tyres’ as your sole website keyword/phase might be a mistake – you may be swallowed up in the deluge of competition and appear too low in the rankings to ever been seen at all. Remember that many web users rarely go past the first page of results.

Proper research should be first carried out using dedicated software by the website developers to determine the most appropriate keywords/phrases that people are already typing in. This allows the developer to see the trends of keywords added over the previous few months, see the frequency these keywords have been added and also see the amount of results they already generate. This allows the developer to make a judgement about the likely ‘win’ factor of incorporating a popular keyword/phrase. If a key phrase like, ‘car tyres’ is typed into Google 250,000 time per day but generates 1,000,000 website results, then it might not be the best to go for. A simple calculation which takes these factors into consideration, called the KEI (Keyword Effectiveness Index) value, helps the developer cherry pick the most favorable keywords.

Simple Example:

Search Term: ‘car tyres’

Keyword popularity: 5 people

Results: 100 websites

KEI would be 5 / 100 = 0.05

Good KEIs are those with values closer to 1 (rarely gets close to the value 1)

Keywords

The most accessible parts of a website that a search engine can evaluate is: written content, links, titles and tags. Most people are aware of ‘keywords’ but the actual art of integrating a keyword strategy within an online project is a whole layer of intense research, careful planning and long-term monitoring in it’s own right. With keywords identified from initial research, these can be worked into many areas of the website to build a network on instances that a search engine can read and interpret.

Meta Keywords

Meta tag keywords are the obvious starting point but, only adding your keywords here will do next to nothing in terms of an overall search engine ranking. This is more of a declaration to the search engine robots but it doesn’t score any points having this single instance of keywords. The next task is to start integrating these same keywords into all areas of your website pages.

Page Titles

Page Titles are the next step. Ensure your keywords are always mentioned within the browser page title and preferable near to the start of the page title. Titles shouldn’t be more than 65-75 characters long including spaces – this ensures that keyword density is maintained. Endless page titles with infinite keywords just floods a search engine robot and dilutes the impact of any main keywords. We would suggest focusing on no more than 3 keywords/phrases and concentrate on mentioning these as much as possible throughout the site rather than spreading 10 or more keywords all over the place.

Title and Alt Tags

‘Title Tags’ – not the same as a browser page title – title tags can be added to image and link elements of html code. When a user’s cursor hovers over a picture or link when a title tag has been added, the tag shows to user so always keep this readable but, another set of instances on all pages to work in the keywords. ‘Alt Tags’ are often added in along side title tags and these are helpful for screen readers and accessibility reasons (in case an image cannot be displayed or seen). In many cases Alt Tags can replicate what the Title Tag reads.

Links

Links are another place to consider keywords. Firstly, a title tag can be worked into any link to give the user additional info about where a link is going plus with good planning, many of the website’s page file names can be labelled with keywords in so that navigational links within most/all pages are also mentioning the keywords.

Written Content

Content is king in a website and there is no better place to work a purple patch of keywords in than in the written text of a given page.
Ensure there are a good mention of keywords at the start of the text along with further additional mentions throughout. Text near the top of a page also help as apposed to text which starts 1000px down the page after a raft of images for example. Bolding these keywords also draws emphasis and even linking them to other relavant pages which also mentions the same keywords can be a benefit, increasing the connectivity of a website.

Internal Links

Creating a network of internal links allows you to link keywords within written copy to other pages which also mention the same keywords – most well planned sites do this anyway but it doesn’t always happen naturally so it may need a dedicated global section on each page where each of the three keywords always appear as navigation links back to either the homepage or other relevant pages.

External Links

Probably one of the biggest and most influential factors on a search engine’s ranking and also one of the hardest to control. This relates to how many other sites are linking to your site. A search engine values this as it perceives a naturally popular site to be one of worthy information and also a trustworthy one. When other sites of similar content/keywords link to your site, it is a big vote of confidence from the search engines. Imagine your site as one small isolated island in a group of other islands all connected with good transport links. Suddenly, other islands start seeing the benefits of your island’s natural beauty and begin creating flights to your island to bring tourists in with the hope that some of your island residents will also fly out to them.

If a search engine can see that you are well connected to lots of ‘islands’ of extended information and resource, then quite simply you will rank as a more relevant search result than somebody who isn’t.

Addressing some of the above issues will always help but ideally, a healthy approach and investment of time in all will really start to get things moving. The task of SEO is a never ending one – the same as marketing a business in reality so don’t be fooled that one-off optimisation will solve all your problems.

Posted under on May 20th, 2006 by Paul Barnes / No Comments

Having only known building web pages in tables since 1998 and having spent 10 years perfecting the skill, changing over to CSS was always going to be a reluctant chore!

So why bother at all? The web moves on regardless of developer/designer preferences and the argument for CSS has been an ever more convincing one with the majority of developers now fully versed in the basics.

But what does a web site with CSS markup offer that a web site created in tables doesn’t. Well, when I first started using CSS, needless to say it was slow going. More time was spent typing in values than was spent looking at the design so initially it feels like a very detached and unintuitive process. Tabling up a web page design seemed lightning quick compared to CSS but the real benefits come after the initial build.

Ok – so CSS takes a little longer than tabling but the end product adds up to something more than the sum of it’s parts. When we look at the following areas, we can see why…

• Design
• SEO
• Maintenance
• Scalability

Design

When designing for a tabled site, the website designer is all too aware that their lovely design will get the slicing treatment and once sliced, further changes or even slight adjustments start to become painful. A design which is set into an html tabled grid is fairly rigid. Whilst it offers general browser consistency, the designer will always be called back into service if tweaks, adjustments or wholesale changes are needed and new images will need to be generated, often with accompanying table tweaks too. Since CSS offers up the ability to set images free-floating in Div tags, they have a bit more freedom to stretch out into available space. The developer, rather than the designer has the power to push the images or other elements around the screen with increased freedom.

SEO

In a web site which has many pages with common elements, tabled markup often repeats itself unnecessarily. By removing the repetition and instead slotting the common values/variables into the one common style sheet, a lot of erroneous markup is weeded out of all the website pages. This makes things a lot clearer for search engine robots when they visit your pages. The content which really matters – the written content containing all your important keywords, starts to become more prominent. If a robot determines that keyword content is more dense in relation to overall markup page length, then, quite simply, it’s likely that you’re scoring better on SEO points as a result.

Maintenance

As touched upon with the design advantages, maintenance is an inevitable part of any website build and more often than not, the client will be making a swathe of ‘small’ updates between an agreed design and the launch. Fundamental things like text size, text color, accent colours, navigation additions/changes can all be made with simple CSS page updates as apposed to updating each individual html page – a painful and length task even on a small site. The advantages are clear for very large sites.

Scalability

CSS naturally encourages fluid thinking and layout. Fluidity in the sense, that text boxes are designed to expand with increased text so that any update with differing amounts of content will not break the web page layout or, at the very least it will degrade gracefully.

As a long-time advocate of tabled markup, spending the last year working intensely with CSS has been a jump into the deep-end – one which at times appears to go against the grain but the benefits are clear and having the option of both in the toolbox is no bad thing. Tabled markup is still something of a must for mailout webpage content so it’s not quite a dead art just yet!

At mwa Digital we CSS our sites to W3C standards. For more information on how we can help you with an online project, please contact us at www.mwadigital.co.uk

Posted under on April 15th, 2005 by Paul Barnes / No Comments

(Editors Note: Article first written in 2005)

Tracing paper was always the favourite cheat back at school but somehow it doubted the integrity of the honest amateur artist. Nowadays we have layers and Macromedia’s Flash and all shortcuts are welcome when striving for quality, optimisiation and professionalism all in an acceptable time frame. When I first introduced myself to Flash 3, vectors immediately struck me as a fairly ambivilent form of creating graphics – almost like a geomotry set in pixels. The simplest of tools with, heavens forbid, no filters, no plug-ins and no real reason for them at all other than elaborating simple line tables and round-edged, square buttons! Around a year or so ago, I wondered how far this form of drawing could be taken with pleasantly surrprising results.

Even with Flash’s basic toolset, there is a high level of control available when using the line tool. Clicking and dragging out a line couldn’t be simpler but turning that into a high quality illustration was another matter. Having dabbled with this for some time, it soon became apparent I needed a more complex subject to work from.

This tutorial is based on a recent illustration produced by myself at Making Waves New Media. It is the result of a year or two’s practice with a multitude of vector drawings but anyone can create something similar in a matter of hours.

Preparation

I start by finding a high resolution jpeg of the subject I wish to illustrate. In this case it is the Team Atomic Kitten Racing Car – from the the British Touring Car Championship 2002. Since it is a presentation picture, it’s shines and angles are almost ideal and will help the vectors create a more rounded look at the end of the process. To a certain extent, preparation is the key to the final illustration since the drawing will only be as good as the picture your tracing from.

Why Vector

Why not use the picture in the first place – you might ask. A vector illustration will have distinct advantages over its jpeg predecessor. After practice you may well be able to create a high-quality illustration which is only 30k! Remember that this 30k is the same more or less whether it is a thumbnail or full-screen sized and beyond.

A full-screen jpeg would be considerably more and even if you could compress it to the equivelent file size, it would invariably look degraded and fuzzy. The vector illustration is uncompromised in quality since it is vector and resolution independent. This also opens the doors to exporting purposes for follow-up print work and branding needs for a particular company. The single illustration can feed the graphical needs of both web and print jobs with ease and puts an end to multiple folders seperated for high-res print pictures and web optimised gifs/jpegs.

Tracing

Getting back to the illustration, I create a new file in Flash and import the high-res subject jpeg. I center the jpeg on a layer within it’s own symbol and lock the layer off. I then create a new layer above it much like the tracing paper above a picture. We are now ready to start creating the outline image. I always start by selecting the hairline tool and choosing a bright colour so the line can be seen over the jpeg. Select the line tool from the main toolbar and start by tracing an outline of the jpeg’s subject – in this case the outline of the car. For speed, I usually set the ‘snap to objects’ on and create a basic straight line polygon of the car’s outline. I then set the ‘snap’ off and carefully bend each line to the exact shape of the car beneath. Ensure all ends of lines are properly connected otherwise you will encounter problems rendering later on.

At this stage I have an ouline of something which looks like a car but at the moment it is just a potential silhouette and not a detailed full-colour illustration. To expand the detail, I have to use the same process I used to create the outline but now on the more fundamental elements such as windscreen, wheels, headlights and anything else which is fundamental to the image your trying to achieve. I suggest you take each element one by one. You’ll need patients but try to persist as the end result is well worthwhile.

Once you have done this, you can take the detail one step further if you wish buy tracing any distinct lines which make up shines and important contours. The more detail you cover, the closer the illustration will look to the initial jpeg but also consider that more detail adds valuable extra bytes the final file size of the SWF. Once you are satisfied with the detail traced, you shoud end up with something that looks like a blank canvas of a painting by numbers(minus the numbers unfortunately!). I reccommend you copy the outline layer to a new symbol so you have the option of using it later if need be. Even this stage of the illustration has graphical potential with a wireframe look and always goes down well as a background watermark to any page layout.

Rendering
Now that I have my jpeg car and a network of lines on the layer above, I am ready to start adding some colour to the process. Depending on how clever you are with the gradients, you can add more shape to your illustration and also give more depth using shadows and transparency on further layers. I like to keep things on one layer if possible.

Assuming you jpeg has been adjusted for best colour already, it is most logical to pick the colours, which will form your new pallette, directly from the jpeg in the first layer. To do this you’ll need to unlock the layer first and select the picker tool. Find a shape within the line trace to render and study how the colour is made up. This might take a moments squinting but how you render each segment/shape will largely effect the illustrations final look. If a particular shape has a gradient, simply pick the colour at both ends of the scale and replicate the gradient in the Fill pallette. If you use flat colours in each shape, the illustration will appear posterized and the painting by numbers process will be emphasized significantly.

The Flash Fill pallette offers two main gradients, – linear and radial. You might want to experiment with how these gradients work first. When you fill a shape with a gradient you almost certainly need to adjust it to your needs. To do this select the gradient adjuster at the bottom of the main tool bar and click on the gradient which fills your shape. With radial gradients you can scale them in both directions and also rotate them. The linear gradients can be stretched out one way and rotated also. This is quite key to creating this sort of illustration as it gives much more flexibility in the rendering and hence allows you to recreate curverd areas, shines and shading much easier.

Rendering, the whole tracing will certainly take a while depending on your level of detail. My car probably took around five hours and that’s on top of 2-3 hours worth of tracing with the line tool! I’d advise you start with something simple which will take a couple of hours and build up your patience over time. It can be a long fiddly process that takes up a day but the results are certainly worthwhile with its numerous applications.

Finally

When the rendering is complete, then there’s the satisfaction of deleting the lines and revealling your creation. As long as you’ve used the same colour of line throughout your trace, you should be able to double click anywhere on the line to select it all. Simply clear the lines and you’re left with the gradients which make your final illustration. Now you can delete the jpeg layer and your left with some original vector artwork. Click out of the symbol, back to the stage and drag your illustration from the library. Now you can even animate it in whichever way you want. Make it fade in/out, add moving parts such as rotating wheels. Just have fun experimenting and note the size when you create the SWF file. You’ll be able to export at high resolution and further develop it in other application such as Photoshop. The vector illustration also has a perfectly crisp quality to it so there’s no need to worry about anti-aliasing those jagged-edged imports.

More examples of Macromedia Flash vector illustration


Contact me at http://www.mwadigital.co.uk for more info on vector illustration and Flash animation.

Posted under on August 22nd, 2003 by Paul Barnes / No Comments

Another example of a vector drawn illustration – again using the basic Flash drawing tools(line tool, and linear and radial gradients). The image is fully vector and 100% infinitely scaleable so great for full screen digital screen presentations or animated within website Flash media and with resolution independance, it also prints out at top quality… oh, and it’s only 56k! Time: 6-8 hours.

Below are the two stages of how my vector illustrations are created – firstly, a photographic image is manually ‘traced’ within layers inside Flash to create a framework which not only outlines the basic shape and features of the car but also takes into account important shines, shadows and highlights.

Initial Framework Tracing

Final Rendering

Posted under on June 29th, 2001 by Paul Barnes / No Comments

University Certification for the years 1998 – 2001 at Southampton Institute (now Solent University) showing First Class Honours award in the subject of Multimedia Design.

Awarded 28th June 2001

Posted under on January 24th, 2001 by Paul Barnes / No Comments

As part of my Multimedia BA degree way back in 2000, one module of work was, unwittingly to me, entered into the annual D&AD awards. At the time I had no idea who the D&AD were so it wasn’t until I was invited to the awards ceremony in Westminster, London in the Summer of that year, that I realised the importance! As one of three nominees in my brief/category from across the country, I was wishing I had gone the extra mile to get my hands on one of those famous little yellow pencil awards! Unfortunately my project came in 3rd place but still received a worthy D&AD commendation with a certificate and a very handy cheque for £250

Details of the Original Brief are shown below.


The Brief

Design an electronic toy for the web that does not serve any other purpose than to amuse and entertain, this project is looking to put fun back into the web. The toy could be something that interacts with the web encouraging the user to stay online.

Judges’ Comments

“The open-ended nature of the brief was hard. I wanted to see an understanding of the nature of play along with originality. People don’t play enough… the winning entry and the runners up exemplify the very best aspects of play.”


Gordon Butler 
BT
“I think overall that to produce a good e-toy it cannot rely on just good design or good technology, it has to start with a good original idea”


Ben Tomlinson

SAS Design

For more info contact www.mwadigital.co.uk

D&AD

www.dandad.co.uk