The Technology Studio

My name is Mark, I am 23 and I am the latest developer at The Technology Studio. This blog post aims to give you a basic understanding of the development of metro style applications using Microsoft’s new JavaScript and html framework.

The main advantages of using the framework are immediately evident:

• Most web developers already have a strong foundation in html and JavaScript. These skills can be translated to the desktop app realm without too much trouble (arguably!).
• JavaScript already has solid support for asynchronous web requests (xmlhttprequest) which comes in handy if you want to integrate Ajax or web 2.0 mash-up features e.g. Twitter.
• If you start with one of Microsoft’s project templates (for example, Grid application) the Windows 7/8 look and feel has already been set up for you. This means you can be confident the application will respond smoothly to touch and will look good on a wide variety of screen sizes.
• The framework has clearly been influenced by knockouts binding feature so if you are familiar with this then you shouldn’t have too much trouble getting used to slightly different syntax:

Spot the difference!

Microsoft:

<div data-win-bind="innerHTML: trafficImage"></div>

Knockout JS:

 <div data-bind="html: trafficImage"></div>

• Furthermore, the full range of debugging tools are now supported for JavaScript within Visual Studio 2011. This thankfully means no more JavaScript alert boxes or web browser debugging is required to inspect code.

Some small quirks that I have noticed.

The following line of code DID work:

trafficImage: '<img src="' + src + '" class="resize" />'

The following line of code did NOT work:

trafficImage: '<img src="' + src + '" class="resize"></img>'

At a guess, the framework doesn’t seem to appreciate strict xml structure when you write your html.

An Image Caching Issue…

I had trouble trying to stop the traffic images from being cached when I wanted to refresh the images. This might be a positive thing for another project but TFL defines rules for the public display of the traffic camera images.

One of these rules state:

‘Feeds must be grabbed and displayed with the same frequency as that in the <RefreshRate> tag.’

To avoid caching I tried the following possible solutions: (all to no avail)

• TFL doesn’t let you append a unique query string to the request URL.
• Attempted to access the DOM element and change it’s ID to a random number when a refresh is due.
• Destroying the contents of the element and rebuilding it also did not refresh those darn images.
• <META HTTP-EQUIV=”PRAGMA” CONTENT=”NO-CACHE”> This also didn’t help me.

Perhaps I am missing something very simple here. If any one knows a solution please leave a comment.

In conclusion, I look forward to developing less trivial applications with this new technology as there are some definite upsides, particularly, the improved debugging and intellisense support for JavaScript in VS2011 and the JS Knockout-esque data binding. However, I plan to wait until Microsoft has ironed out some of the quirks and built up more comprehensive documentation for WINJS.

Next time, I will attempt to integrate these cameras into a map.

To get started with this development go to: http://msdn.microsoft.com/en-us/windows/apps/br229516

The award winning GoLearnTo website has had a design update recently and we think it looks great – even if we do say so ourselves!

After some market research GoLearnTo decided that their website needed to be more focused on their target demographic. In addition they wanted to widen the site from 800 pixels wide to 1024 pixels wide, considering that now less than 1% of people use 800×600 displays. Yes, that’s less than 1%!

See more information about browser display statistics.

There are now a  lot more jQuery effects, such as slider panels and more aesthetic and functional photo galleries. These kind of things are great as they give more information to the user as well as being relevant for search engines. They can also add a bit of flashiness to a site which a lot of people generally like!

Check it out and see what you think!

We were recently approached by Bizspace to completely redesign (in their words!) their old, tired and basic website!

Their previous site was falling well below par on all three of the most important things that a website needs to get right…

SEO (Search engine optimisation)

Unfortunately the site was built with minimal search engine optimisation consideration in mind. There were very few pages with a serious lack of detailed, relevant content, as well as some other more serious issues such as using images for text headers. Without spending the required time and effort on SEO you are negating much else of what you do on a website – because nobody will ever find it!

Website Usabillity

Clarity is the name of the game here – not making people have to think! Unfortunately the navigation through the site was not clear and neither were the most important calls to action on each page. Always remember to keep things simple and clear and ensure the things you want people to do on each page are easy to see and understand.

Website design

Aesthetically the design was below average. I say it all the time but people will make up their mind within seconds of visiting your site on who you are, what you stand for and whether they trust you. A clear professional design is extremely important to instantly reassure their subconscious that you are worthy of their trust.

But, it’s all of them working together that’s the key!

Getting one or even a couple of these things right is a good start, but it’s the combination of all three together that we here at The Technology Studio believe is the real goal. It’s not good enough to have a fantastic looking site if nobody knows how to use it. There’s no point having  a site with search engine optimisation tuned perfectly if it looks unprofessional and shabby as people will go elsewhere. You see where I’m going here!

With our help the new Bizspace website has released to much praise in each of the areas above. The proof as always is in the pudding however! Their previous site achieved half of the visitors that the new site achieves, but it’s the site goals that are really interesting. Previously the old Bizspace site achieved an average of just 4 contact forms per week. It is now achieving an average of 40. That’s a ten fold increase!

At The Technology Studio we believe that usability is one of the most important elements to any technology development . Why? Consumers are lazy, impatient and time pressured so if they can’t instantly figure out how to do what they want to do on your site they will leave.

Despite its importance, usability is often a factor that get’s overlooked in favour of the sexier aspect of development – design. Whilst the two aren’t mutually exclusive, many designers give little thought to usability – understandable as they are paid to produce attractive, elegant, inventive and exciting designs. Clients also tend to primarily focus their energies on the aesthetics of their site (everybody, especially Marketers, likes pretty shiny things!) leaving it to us as the developers to argue the case for the user!

Over recent years we have adopted Steve Krug’s book ‘Don’t Make Me Think’ as our usability bible – it’s well worth a read.

We now make a point of preaching usability to our clients at the start of every project and have pulled together a short presentation to help us get our point of view across which we’ve uploaded to slideshare.net

Whilst we have 18 tips in the presentation here are our top 5:

• Make your site as intuitive and effective as Google or Amazon
• Omit needless words
• Create obvious hierarchies and intuitive navigation
• Make new, important or valuable things REALLY OBVIOUS
• Always user test

As The Technology Studio launch into developing iphone and ipad applications I was recently given an iPad to play with. I made a point of trying to find good applications that are free. Here is a set of micro reviews complied for your pleasure.

Out of the 30 applications one is for the iPhone, but works on the iPad and two are web addresses that you have to add from the browser to your home screen, but then ‘look’ like applications.

[Disclaimer] any views are my own and are not be representative of the company. All copyrights and trademarks remain the property of their respective owners. Neither the company or I take any responsibility for damage or misuse arising from installing applications listed here. Some applications may not be available in territories outside the United Kingdom. Some applications may have changed price/functionality since the review was conducted.

Dragon Dictation: Voice based dictation for notes. Very basic but does do dictation without any training. Needs a training mode ! *FREE* 3 stars

Epicurious: Recipe book. In one word ‘lavish’, it is beautiful/responsive and has everything you need. Nice layout/options images, reviews and can store all the required ingredients in a shopping list. *FREE* 5 stars

Dictionary.com: Dictionary/Thesaurus. Just works, no obvious niggles. *FREE* 5 stars

IMDB: Internet Movie DataBase. Just works and looks brilliant. *FREE* 5 stars

AudioMemos: Record audio from the microphone. Although heavily ad supported it does do a good job. Just hit record, and rename your recording after. *FREE**AD Supported* 3 stars

The Guardian Eyewitness: Slide show of the best daily global photography. Stunning, must have. *FREE* 5 stars

Beatwave: Music creator: very fun, simple and has some useful configurations. *FREE* 4 stars

SkyGrid: News consolidation app. Bit quirky, nice way to waste five minutes catching up with news about things and stuff you might otherwise have missed. *FREE* 3 stars

Google Earth: Planet visualiser. Does exactly what you expect, fun and easy to use. Pinch zoom seems to rotate the image every time. *FREE* 5 stars

Toy Story: Interactive story book, with games and sing-a-longs. Kids adored it, great graphics easy to use, intermixes actual film and audio clips. *FREE* 5 stars

Saturation: Colour visualiser for the kuler Adobe community. Show the micro palettes either interactively or in a screen saver type experience. Fun but not very useful. *FREE* 3 stars

VAInfo: System information reference. Find your IP and MAC address, CPU type, OS, memory, battery, location, kernel etc etc. For geeks, it just works. *FREE* 5 stars

VTrace: Visual tracer. Enter an IP address or web server and get a route described by pins at the data centres the data travelled. For geeks, it just works. *FREE* 4 stars

Wink Target Clock: A full screen arty analogue clock. Imagine a shooting target composed of colourful concentric circles and then add hands and a second mechanism that changes the colours. *FREE* 3 stars

PCalc Lite: Calculator. Demo for more fully featured product. Very clear and easy to use, wish it had base 2 and base 16. *FREE**DEMO* 3 stars

Implode Nature!: Physics game. Demo, containing 10 levels where you place explosives and try and decimate chalk drawn structures. Completed the demo in less than 10 minutes. *FREE**DEMO* 3 stars

Bub Wider: Tilt game. Control a bubble by tilting the iPad collecting art and avoiding sugar babes. No indication it was only a demo. Basic premise, collect objects and avoid enemies,  but looks really nice. *FREE**DEMO* 3 stars

RJ Voyager: Audio mixer. Fun interactive audio toy for mixing up sounds. Comes with eight ‘scenes’ that are a collection of samples each with their own parameters such as volume, echo, reality and filter to name but a few. For acid house, trance dance types. *FREE* 5 stars

Labyrinth 2 HD Lite: Tilt maze game. Demo containing 20 levels, some easy, some hard. Amazingly well presented and lots of fun, but I got neck ache looking down at the iPad as it had to be flat as neutral. At £4.99 I will consider purchasing the 300 level complete version. *FREE**DEMO* 5 stars

Pocket Pond HD: Interactive pond. Play with the fish in this relaxing interactive pond environment. Ambient sounds play, you can annoy the fish by touching the water or add lily pads, the only other thing is to drag through the water like all those water demos before it. Simple, beautiful, but a bit basic. Not really a demo but a new more advanced version called iPond with fishing, frogs and dragon flies is available. *FREE* 4 stars

Clinometer: Spirit level and bubble level. That’s it, a nicely presented bubble level (when the iPad is on its back) and spirit level when stood on end, very sensitive (a good thing). *FREE* 5 stars

Doodle Buddy: Drawing. Lots here for the kids, from multiple backgrounds to stamps with sound effects. As well as having the normal draw a colour pens, it has a smudge and also allows finished art to be saved as the iPad background. *FREE* 5 stars

PreSchoolMM: Memory match game. Another on for the kids. Match the pairs with colourful illustrations and when they match get a sound and/or voice over. At the end of each level you get three wacky sound toys to play with. Lots of variation on the cards, from animals to instruments to vehicles. *FREE* 5 stars

IdeaSketch: Mind mapping. Very simple, not very many options, but allows you to create simple lists with associations in either list or graph view. *FREE* 3 stars

WorldClockPro: Clock. Show multiple clocks from different time zones. Very few customisations and the LED view is not very readable. However the analogue clocks look very nice. *FREE* 3 stars

Hexius: Hexagon matching game. High speed touch matching with funky explosions sounds, graphics and fun power-ups. *FREE* 3 stars

Trundle HD: Rolling physics game. Tip the iPad left and right to get your ball rolling, tap the screen to jump. One of the better and more devious physics games. *FREE* 4 stars

Rafter HD: Drawing physics game. Draw blocks and balls at the top of the screen and let them fall down and activate the mine. Bit limited and hard in places. *FREE* 4 stars

BBC iPlayer: BBC catch-up service. Not an app but a URL that you can add to your home screen. Select programs from BBC channels from the previous week (or so) and watch streaming. *FREE* 4 stars (UK only)

[http://www.bbc.co.uk/iplayer/bigscreen]

TVCatchup: Live streaming TV. Not an app but a URL that you can add to your home screen. Select one of 37 channels and watch streaming live. So not really any kind of catch-up service. You do have to register but its free to use. *FREE* 4 stars (UK only)

[http://ipad.tvcatchup.com]

I hope you enjoyed the list. Let us know your thoughts on these or recommend any others you have found.

Rob

We love sharing the success stories of our clients who partner with us to create fantastic solutions that are recognized throughout their industry. In the case of travel website GoLearnTo.com, the accolades just keep on coming with no less than four awards and nominations in the past month which include…

Now you’re talking…

The International Association of Language Centres (IALC) have voted GoLearnTo.com agency of the month recognising them as a leading language travel agency with a range of courses where you can learn Spanish in Spain or learn French in France and over 14 more languages worldwide.

 
The public have spoken…

For the 2^nd year running, GoLearnTo.com has been nominated for a British Travel award in the category ‘Best Holiday Experience Provider’ proving that the trend for learning holidays continues to get the public’s vote.

School’s have their say…

Language Travel Magazine readers which include language schools from over 30 countries worldwide have nominated GoLearnTo.com for ‘Best New Agency’. GoLearnTo.com have found a niche with language travel and are inspiring more of us to learn a language by combining languages with a unique range of fun activities such as cookery holidays in Italy, yoga holidays or even surfing and much more.

Guiding the way…

Last but not least, GoLearnTo.com has received a nomination for The Good Web Guide’s Website of the Year Award recognising websites that not only function well but inspire.

This proves once again how an aesthetically pleasing, functionally rich and easy to use website designed and developed by The Technology Studio with maps by Earthware can do for you.

At The Technology Studio we don’t believe the work of creating a successful website that makes the most of digital marketing opportunities finishes when you sign off the delivered specification – that’s just the beginning.  We also don’t believe that you can outsource SEO to the next muppet who SPAM emails you with the email title “Guaranteed to get you to #1 in the Google search rankings” (if you ever get one of these use the delete key immediately – nobody can do this).

The Technology Studio believes that the best Search Engine Optimisation is a team effort between a client and their web developer or technology partner.  Many clients struggle to understand (or frankly get excited) about SEO and would dearly love to delegate (or more accurately abdicate) the hard work of getting to the top of Google Rankings to anyone other than themselves.  SEO and PPC (Pay per Click) are not exactly the sexy side of offline or online marketing!

At The Technology Studio we believe there are a lot of things a good web developer can do for SEO but that clients also have to take responsibility for a very important part of this – content.  Why?  Because it is very difficult for anyone outside the business to understand the business well enough to write a lot of compelling content (and frankly it is very expensive to outsource this to a PR/copy writer).  In addition, the client may write good copy for a human being to read but forgets that each page has two audiences – human beings (potential clients) and search engines (the way potential clients find the relevant page in the first place).

At the Technology Studio, we are always looking for ways to help our clients make the most of their websites.  We were recently approached by a new client who was struggling to write 110 pages of compelling content, including good key words and key phrases, about their properties dotted around the UK.  They asked us to help so we dumped everything they had into a file and created our own Keyword Density Tool.  The client was so delighted (it saved them days of work) that we decided to create a generic version and give it away (at least for a while anyway).

Click the ‘Keyword Density Tool’ link below to download our Keyword Density Tool and feel free to use it to write great keyword rich web copy for your website.  We only ask that if you are ever looking to find your next technology partner then you consider The Technology Studio. You can also see how we used the tool to write this blog article by downloading the ‘Keyword Density Tool with example’ from the link below to help you get started.

If you have any comments of questions or just want to let us know how you got on using the Keyword Density Tool then please do get in touch with us on 0845 642 9880 or email info@thetechnologystudio.co.uk.

Since publishing our series of blog articles about which commercial property websites are leading the way, we have had a number of requests asking to have all the articles in one place. We have now created a pdf file containing all the analysis and comment for you to download:

As always, if you have any questions or comments please contact us.