Mobile, Tablet & Desktop. Photo Credit: Shuji Iibuchi

Every October I look out for Gartner’s Top 10 Strategic Technologies; a list of the technologies they advise enterprises to be investing in. Over the years, I’ve enjoyed keeping up to date with the list and, this year in particular, I got quite excited when I read through – sorry, nerd alert!

The first five technologies on the list are:

1. Media Tablets and Beyond
2. Mobile-Centric Applications and Interfaces
3. Contextual and Social User Experience
4. Internet of Things
5. App Stores and Marketplaces

What I find interesting about this is that mobile runs across all 5 of these technologies; tablets are essentially “mobile”, context can be about linking social, mobile, location and commerce, the internet of things covers areas like near field communications (used for mobile payments) and, of course, who could forget the impact app stores have had on our lives.

Certainly, back in the land of good old web design, things are promising. However, it’s still quite difficult to convince people why they should be investing in mobile – although authoritative companies like Gartner pushing it does help. Of course, building a mobile application needs to have a key objective, certainly because of the costs. But do people really need that for a responsive website?

The answer is of course yes, but it’s hard to get any ROI figures as to why, and whilst the web community has embraced it, I fear it’s some way off before the approach of “responsive web design is web design” is accepted as the norm.

Nevertheless, and since we’re not ones to give up, here’s a few reasons from the Gartner report on why your new site should be considering mobile users (at least to respond to different platforms as a very minimum):

• Enterprises will have to come up with two mobile strategies – one to address the business to employee (B2E) scenario and one to address the business to consumer (B2C) scenario
• The user interface (IU) paradigm in place for more than 20 years is changing….HTML5 will also provide a long term model to address some of the cross-platform issues
• By 2015, mobile Web technologies will have advanced sufficiently, so that half the applications that would be written as native apps in 2011 will instead be delivered as Web apps
• Through 2013, context aware applications will appear in targeted areas such as location-based services, augmented reality on mobile devices, and mobile commerce
• Gartner forecasts that by 2014, there will be more than 70 billion mobile application downloads from app stores every year

Some quite compelling points made! Ultimately, developing the mobile side of your marketing strategy does cost more money. A cheaper and easier way to start off is to build a responsive website. You can check out this site for some inspiration!

The new Mishcon Graduates website 2011

The site invites reaction and comment through posing six pertinent opinions from Mishcon partners and employees. Entitled ‘Opinions matter’ the idea is to invite others to comment on topics, particularly potential trainees and graduates. This is aided using video clips, shot outside of Mishcon HQ, in Red Lion Square.

The video really is the icing on the cake and really helps users to get a full and deep flavour of the issues. Of course, underpinning all of this is the site goal of getting Trainees and Graduates to apply for intake into the firm.

The videos, shot by Quite Frankly are served via online video portal Vimeo. The ‘Plus’ subscriber option, enables the site to stream in HD.

“It never used to be like this though”. Reel back a few years and webmasters would struggle incorporating video onto their own sites. There were streaming servers to consider, problems with native plug-ins and support. Today, it’s the norm for any brand, big or small to use online video services like YouTube or Vimeo to serve their content to users.

In fact, given the SEO juice that can now be obtained from creating video content, it’s positively welcomed. The right videos can often leapfrog to the top of the organic search index. SEO companies have been evangelising massively of late.

Of course, if it’s such a no-brainer then more companies would be doing it. Good video content may be easy nowadays to record and edit with the plethora of good HD mini-cams and free editing software. However it’s still requires effort to script, present and produce.  Mishcon came up with the goods for seven videos which are also showcased in the Mishcon Graduates Vimeo channel here.

Video Channel for Mishcon Graduates Videos on Vimeo

Links:

• Google Loves Web Video for SEO
• Search Engine Success: Getting Video SEO Right
• SEO for Video Content

The HTML5 spec started out as “Web Applications 1.0″ and was developed in 2004 mostly by employees from Mozilla, Apple and Opera. Together they formed the “Web Hypertext Application Technology Working Group” (WHATWG).

Around the same time the W3C decided to abandon development of the XHTML2 spec they’d been working on and set out to also develop the HTML5 spec.

Today the WHATWG and W3C are involved in a bit of a power struggle over who controls the future of web technologies. However, despite their differences in defining and adopting the full standard, HTML5 is here to stay with many browsers already starting to adopt it.

So with that out of the way, lets take a look at some of the benefits we get from using HTML5 in our websites today:

Cleaner code

Before HTML5 came onto the scene it was common practice to mark-up a webpage using a million or so different <div> tags each with their own descriptive class or id name.

HTML5 addressed this issue by introducing new elements for representing each of these different sections such as header, footer, article, section and asides.

Basically HTML5 allows us web designers to use cleaner, neater, more meaningful code.

Improved accessibility

Different technologies can take advantage of the features we’re using throughout our sites thanks to the introduction of the new HTML5 elements. They can immediately get a better understanding of the structure of a page by parsing the HTML5 elements we’re using.

HTML5 makes it easier to see which part of a page is the header, nav, footer etc. By using HTML5 elements we can increase the semantic value of a web page, which in turn will help improve our SEO.

Funkier forms

If you’ve spent anytime at all using the internet then you’ve bound to have come across your fair share of forms – from the simple search field to the more complex and highly secure online purchasing forms.

The form seems to be one part of the HTML5 spec that keeps improving all the time, with browser vendors supporting more and more features with each release cycle they make.

There have been a number of changes made to forms in HTML5 such as native form validation, user interface enhancements and the reduction in the need for JavaScript.

Features, features & then some more features

HTML5 also introduces a wide range of new features including improvements to the way we deal with multimedia on the web, how we structure our sites, a number of APIs, better form controls, local database storage and geolocation. I’m sure time goes on we’ll get more and more people experimenting and pushing the boundaries with what is possible with HTML5.

The best things about HTML5 is that it’s not just one big thing; it is a collection of individual features and it’s here to stay. If you’d like help implementing HTML5 on a website today please contact us.

A great example of a mobile web app is Google Images. The regular Google Images interface is perfectly usable on a desktop or laptop computer, but using a finger to navigate on a screen of only a few inches can be tricky. Instead of letting the user battle through the site Google has made a few tweaks.

• The interface is simplified and concise
• Text is a readable size
• Links and buttons are big enough to tap

Google has also made full use of the swipe sensors, now available in HTML5. As you’d browse the photos on your phone by swiping the screen, you’re able to use exactly the same gesture to load new images on Google. As well as being mobile-friendly, loading the images dynamically, that is without reloading the screen, the browser doesn’t need to download the whole page again, increasing the speed of browsing significantly – perfect when using a 3G internet connection.

Google Images isn’t perfect though. By looking at the device the user is using (iPhone, Nexus One, iPad) different page layouts, images and text are offered to the user. This has the downside of needing to catalogue and test each device. With CSS3 we’re able to create styling rules based on the device’s screen resolution, opposed to the specific device used. A layout that changes with the screen size will work on all devices and even make a website future-proof for devices to come.

Combined with the ability of Android and iPhone to create an app-stle button on the device’s homescreen a web app is the perfect substitute for a regular app. And with more and more smartphones being sold and them being used to surf the web the user is coming to expect websites to offer a more app-based web experience.

Make some movies!

It’s easier to consume video online than it is to read online. Fact. It seems like decades ago that YouTube came on the scene, but yet the legal industry has still to really grasp the concept that video is worth investing in. Of course, quality comes with a price, but there’s never been a better time to be looking around for professional producers. The market is very concentrated plus your site visitors and prospects will thank you for it. DLA Piper and Norton Rose both promote videos on their homepage, whereas Mishcon de Reya even have a TV channel! Are you doing all you can on the video front?

Talk about what you know

Again, like video, it’s never been easier to get content out there. Although, we’d throw some caution to the wind in that it’s even easier to add noise than it is good content. But that said, your firm is full of experts. Get them talking and sharing there experiences online. Here’s a really good example of a blog from SA Law.

Get down with some numbers

With the financial troubles the world continues to face, ROI on new developments has to be at the top of the list. Sounds like a sea of Excel spreadsheets!

But it doesn’t have to be that way, web analytics can help you monitor your site and help you get the right figures in the right cells. It’s fairly easy now to track things like traffic levels and the number of new visitors. You can also set-up goals and conversion rates for specific initiatives or campaigns with the click of a few buttons. We’ve used a number of web analytics packages to help clients over the years, Google Analytics being just one example.

Some clients are all over analytics and numbers for their site, whereas as some are not. If you’re in the latter camp, here’s a discussion on Linked In that might help you get to grips with the concept.

Your site in your hands

This year in the UK over 50% of people will own a smartphone. That is staggering given that the iPhone (one might argue the smartest of smart phones) was released in 2007. This figure is only going to continue to grow, so if you’re wondering when you should be planning for mobile then the answer was yesterday.

Not having a site that responses to mobile platforms (or in fact a dedicated mobile site) is risking the chance that a prospect will go elsewhere. When the internet first arrived the technical folks of the web forgot about the user. But now things have moved on, the web is so much easier to use. The same pattern is emerging with mobile; the technical problems are being ironed out and now the users are screaming out to be better serviced. So we think that now is the time to find out what your visitors want. We’ve worked hard with Mishcon de Reya recently and have helped them move a couple of their sites to a platform better suited towards a mobile future. Thumbs up to them for taking the leap.

Social for the right reasons

OK, so we’re not going to begin to pretend that we have the holy grail of social media ROI. We don’t, but remember when you started investing in SEO and the web was flooded with SEO consultants chapping at your door? The same thing happened with social media in the past two years. The path isn’t so clear sure, but one thing is for sure, the search engines are now considering your social media presence when they rank your site.

So when it comes to ROI and getting budget, don’t sell social media internally, sell SEO and how social media is part of that. DLA Piper do a good job of embracing the new social tools – they’ve even got a Flickr page – and we’re convinced that that will have helped their search engine rankings.

This need for adaptive layouts is driven by the problem faced by many site owners and webmeisters, which is. With thousands of devices already out in the market and more smart phones and tablets being launched, it’s impractical to keep redesigning sites for these devices.

Responsive web design is the science* of creating the components of a website to adapt to the device it’s being displayed on. From mobile to tablet to desktop and beyond.  By adaptive layouts, we mean the mark-up (HTML) and the stylesheet code (CSS) combine to give an optimised presentation of page content regardless of resolution or device. Components on the page are context sensitive and adapt to their surroundings.

This need for adaptive layouts is driven by the problem faced by many site owners and webmeisters, which is. With thousands of devices already out in the market and more smart phones and tablets being launched, it’s impractical to keep redesigning sites for these devices.

So, web developers, needing to deal with the situation yet still offer affordable solutions to their clients have a new tool up their sleeves adaptive layout techniques.

Adaptive layouts

Adaptive layout techniques (more explanation of which below) are used to enable websites – running from a single codebase – to resize, morph, add, remove, modify and tweak the display of content to suit the end user on their web browsing devices. And by devices, I mean, mobile, tablet and desktop, which can cover a huge range of resolutions and formats.

Hicks Design. One of the original innovators of responsive web design. Watch how the page transforms when resized.

In theory, you can design your website once and have it flexible enough to cope with any screen resolution or ratio that it encounters. In theory…

So, web developers, needing to deal with the situation yet still offer affordable solutions to their clients have a new tool up their sleeves adaptive layout techniques.

The control which designers know in the print medium, and often desire in the web medium, is simply a function of the limitation of the printed page. We should embrace the fact that the web doesn’t have the same constraints, and design for this flexibility. But first, we must “accept the ebb and flow of things.

John Allsopp, “A Dao of Web Design”

Dedicated Mobile vs Mobile-optimised: The Options

So what’s a client to do? if you want your site to look good on every available device then you need to take action. It’s a no-brainer stat that more and more people are using mobile and wi-fi enabled mobile devices and tablets to access the web. So what are the options?

1. Tweak the existing code with a few simple techniques to cover some basic requirements
2. Implement an adaptive layout, to optimise display on devices using responsive web design techniques
3. Build a specific mobile/device optimised site
4. Dedicated App

Tweaks are good, but they are only short term holding measures.

The second option, ‘Adaptive layouts‘ is probably the most cost effective and sensible first step to take. Although options of burying heads in the sand are hoping the problem goes away are also applicable. I shan’t discuss the consequences of this as it’s outside the scope of this article

Nay-sayers will argue that content needs to be tailored to the target user and that their needs will be different depending on where they are browsing and on what device. These people are advocates of the dedicated mobile site.

For example, someone with an iPhone may actually want to use your site to find contact details, a store locator and nothing else. Your analysis may lead you to the conclusion that these users don’t care about the latest product news and in-depth articles. But the problem is, who gets to make these assumptions? Mobile users may just as well be using the site from home on wi-fi because its convenient.  Who’s to say what their goals are then – surely the same as a desktop user? Should their experience be guessed at or hindered because it is assumed they are out and about?

There are plenty more discussions to be had about whether or not a client should opt for a mobile specific site or even go down the dedicated App route. These approaches can and do tailor a completely different experience from the desktop audience and I would not argue with this as a strategy if your audience bears this out. In many cases supplying a completely different set of content and call to action to a mobile user is the right thing to do.

However, the main reason for going down the ‘optimised’ route rather than ‘dedicated’ is that it’s expensive to build and maintain a dedicated mobile site and who isn’t on a tight budget these days?

…the landscape is shifting, perhaps more quickly than we might like. Mobile browsing is expected to outpace desktop-based access within three to five years.

Ethan Marcotte

So how responsive is your website?

If you run or are responsible for a website, think back to when it was designed or when you had your last overhaul. Chances are if it was a pre 2010, you have an older fixed width site that is non-adaptive. It is a therefore a wise idea to audit how the site performs on various devices and resolutions. Moreover how the presentation of your brand and message is being interpreted by your site users. Once you see the scope of the problem and how your site looks to this audience you can look at taking action.

Media queries and other fun jargon, why haven’t I heard of this?

When developers talk adaptive layouts,  you will often hear them wax about topics such as ‘responsive web design’, ‘media queries’, ‘javascript shivs’, ‘mobile up approach’ and ‘progressive enrichment’. These topics do deserve much discussion (there are some excellent resources but we’ll leave the full explanation of these for now). As I’ve mentioned somewhere before in this article – adaptive is about utilising all of these to provide users with an optimised experience for your site on as many devices as possible.

Almost everything you’ll read about responsive web design is about layouts that change depending on screen size. Source: Mobile screen size trends. Morten Hjerde

You may be in the dark on this. Why I haven’t I heard about this before is a common reaction? The truth is that adaptive layouts have only become possible recently. There is also still work going in web development land to refine and hone techniques. More importantly, getting it ready for a production site throws up a number of challenges, particularly when dealing with an older CMS. However, this doesn’t mean it’s not ready. The web design world is hot with the work of implementing adaptive layouts. And it’s happening everywhere now, right now.

The other thing of course is that your agency is/ or was gearing up to tell you. It’s not an easy sell either. Until you actually see it in action it doesn’t seem initially to have immediate benefits or offer any return in ROI. Yet, increasing support across mobile devices, improving customer experience and perception of your brand, improving mark-up to help organic SEO and reducing maintenance costs are all direct benefits.

What’s involved?

We’re talking about the re-engineering of your front end code.

• Upgrading to HTML5 markup, simplifying all markup and making semantically correct
• Using CSS3 to take care of the presentation and effects (progressive enrichment)
• Utilising media queries to serve different presentational code to different resolutions
• Using Javascript shivs such as moderniser and selectivizr to plug holes in IE6-8.
• Using well coded JavaScript to serve more complex presentational components to more capable browsers

You don’t even need to change the design, although web agencies may try and twist your arm on this issue!

Adaptive layouts using responsive web design. It’s not a completely pain-free journey, but the benefits far outweigh the risks. Can you afford for your site to be ignored or worse snubbed by users on non desktop devices? As for me, I would urge you to at least consider getting your site designed with an adaptive layout.

From here on in all websites will be designed responsively, it’s no longer an option for web companies that are worth their salt.

References

• Responsive Web Design
• Responsive Web Design: What It Is and How To Use It
• How To Use CSS3 Media Queries To Create a Mobile Version of Your Website
• Mobile screen size trends
• Is Developing a Mobile App Worth the Cost?
• Picking A Mobile Support Strategy For Your Website
• Gartner: Mobile To Outpace Desktop Web By 2013

Resources

• 320 and up
• HTML 5 Boilerplate

What irks me about everybody having their own massive library of songs, videos, pictures and movies is the management and storage of their collections. Enter iCloud, an idea so simple in conception, you have to wonder why it hasn’t been implemented sooner. (Actually, given the levels of co-operation involved between the major players – perhaps you don’t).

Take music, for instance. I have a modest 60GB of music from legitimate sources. In the early days I purchased apps to help me convert it from my tapes, record player and CD collection. I opted for the MP3 format early and settled on 320Kb (eventually) as my compromise between quality and storage space.

I labelled it, ‘found the artwork’, organised it, stamped it, filed it. And now… I manage it. Except I don’t really. I found a halfway solution called ‘DiskStation’ which stores my collection, but it doesn’t really work great with all the media players and devices I have in my house. Yes it sits on my network and is a RAID solution so at least I can have some protection from mechanical failure, but actually it’s bobbins. It doesn’t work properly with iTunes – which refuses to let me organise and navigate it, all I can do is shuffle play – with a 5s gap between next track functionality. The app for the iPhone is just the same. It’s pants. The Sony PlayStation 3 can see it, but it too doesn’t have the interface to deal with a modest 60GB collection.

I would imagine that most people are in the same boat as me.

I don’t like iTunes, never have. It just isn’t designed to work with large collections. I could go into in-depth reasoning here but I just can’t be arsed. It is very poor, not to mention completely inflexible, if you have more than one computer and one media player.

And herein lies the problem. My 60GB collection really is modest. I know people who have Terrabytes of stuff. How do they manage their collections? I’m guessing same thing as me – with a diskstation or compatible device, or maybe they have network servers.

Point is. All of this stuff has to be managed, maintained and served. Basically people leave on their servers and this consumes power.

If I put on my Greenpeace shirt for a second. What the hell is all this in-house media management doing to our planet? How much electricity to leave your server on all the time? Especially if you have to because it runs on Windows software and takes the better part of 15 mins to boot up so you never turn it off. So, it is with trepidation that I welcome iCloud.

However I have my reservations. Is the storage of your collection in the cloud actually better for the environment? Is serving terrabyes of media data locally more or less of a power drain than streaming over a web connection?

At first glance it would seem that only having one master copy of an album (or film or TV show, etc..) on a master media billion dollar server complex, without needing to store it locally would be an improvement. You would no longer need to run your own media servers at home, instead just relying on the fact that you own licenses (the calculation of which is a much lengthier subject).

I don’t know but I’m going to try and find out.

In the meantime and in principle, I welcome an iCloud-type solution, but are Apple the right media giant to do it? Would Google do it any better? Do we actually need Google to do it better and provide some competition?

Answers on a postcard please. In the meantime I’ll watch this very carefully.