What is it, and why should you care? Quite simply, because the web is going 'mobile'. It always has been, in a way, but we are starting to see such a massive shift from traditional desktop web browsing, to smartphone and tablet based consumption. That's just the tip of the iceberg - pretty soon we will have google glasses, apple watches, and a plethora of different access points, all with different screen sizes.

It's time to stop thinking of the web as simply being desktop or laptop based, and start making our content 'device agnostic'.

Here’s a neat visual showing that by 2014 it is predicted that mobile Internet usage will overtake desktop Internet usage. What that means is that increasingly, people will be visiting your website using a wide variety of mobile devices – smartphones, tablets of varying sizes, feature phones among them – and expecting, at the very least, the same access to content and information regardless of how they are accessing it - what we call 'content parity' - which as Brad Frost evangelises, is one of the biggest challenges in mobile web design. 

A few other interesting statistics to note:

• Half of all local searches are performed on mobile devices.
• 86 percent of mobile Internet users are using their devices while watching TV (the 'second screen' effect).
  
• When Facebook hit 1 billion users in october 2012, more than half of the total user base (56.86 percent) accessed the service via a mobile device.

In fact, as of June 30, 2012, mobile monthly active users on Facebook were 543 million, which was an increase of 67 percent YOY. And Facebook has said on more than one occasion it’s making mobile a top priority, going so far as to claim that it will “become a mobile company.”

Looking at these facts and figures there is simply no denying it – the future is mobile. As increasing numbers of people turn to mobile devices for Internet browsing and content consumption, this presents new challenges and opportunities. And we as marketers, strategists, SEOs, and web designers must adapt to ensure not just the best possible user experience, usability, and content parity, but the right solution among all the options available. This is tough, especially considering how fragmented the mobile market is.

 One particular technique for presenting mobile content that seems to have become the industry standard, or at least getting that way, is “responsive web design.” The main difference between a responsive website and having a dedicated, separate mobile-optimized site (m.yourwebsite.com or www.yourwebsite.com/mobile) is that responsive layouts adapt themselves to different screen sizes by scaling the content according to the “viewport” size of the visitor’s device.

 

There are massive benefits to a responsive web design, but that does not mean the approach is not without its negatives, and it is by no means a cookie-cutter solution. Let’s examine a few of the pros and cons.

The Pros 

1.     Google recommends responsive.

In May 2012, responsive design became Google’s recommended industry best practice when designing for smartphones.

2.     One site to rule them all.

 One of the main benefits to a responsive approach is that you only have to design, develop, maintain, and promote one website. From an SEO point of view, hosting a separate mobile site, e.g. m.yourwebsite.com, means you need to optimize and manage two separate sites and analytics profiles.

3.     A good UX.

 As the website will automatically adjust itself to a wide variety of screen sizes, and also hides elements that aren’t necessarily needed for mobile visitors to accomplish their goals, it can be seen as a solid long-term solution to UX. Having just one URL to handle all the inbound links, likes, tweets, and shares also contributes to a better UX.

4.     Familiarity between the desktop/mobile views.

 Often with separate mobile websites there is a learning curve to get used to the layout and navigation, especially if they differ greatly from the desktop version. With a responsive site, the mobile view mimics the full site’s information architecture and thus this learning curve is reduced.

The Cons 

1.     It can be a more time-consuming and costly endeavor.

As part of the process you will need to decide what content or images won’t be displayed on smaller device screens, and what the content order should be. Consideration must also be made for content structure across other device screens, how image optimization will be handled, and how the CMS will integrate. Generally speaking it is much easier to create a responsive website from scratch than convert a current website, but development time is still longer than building a non-responsive website. There is also extra work involved with wireframing and mockups for both a desktop and mobile layout, and what the “in-between” layouts will look like.

2.     Load times.

Often images are simply scaled down and not resized or optimized for the smaller screens, negatively impacting load times on mobile devices, which can be an issue for those visitors on slower connections who will also have to download HTML and CSS code that they may not necessarily need.

3.     Compatibility issues.

Due to the lack of compatibility of some older browsers for this approach (especially with media queries and HTML5/CSS3), users of older devices may not see the correct version for their device.

4.     Varying objectives.

As wonderful as having one website and content source to manage and maintain sounds, the fact remains that user goals and objectives for the desktop site may differ greatly from what they expect and need of the mobile version. Responsive then optimizes just for the resolution, and not the user behavior.

These are just a small selection of some of the things to consider with a responsive approach to your website strategy. At the end of the day, you will need to engage your digital agency and key internal stakeholders to decide what the best solution is to your business objectives, and what the overall user goals will be, before deciding if a responsive website is going to work for both.

(Source for image and stats.)

A version of this article previously appeared on Clickz.asia under the title 'What's Up With Responsive Web Design?' in October 2012.)

恭喜發財! Happy Year of The Snake (蛇)!

Well, what a year that was. You may have noticed it's been *quite some time* since our last blog post, and all we can put that down to is being insanely busy delivering consistently great work for our clients. Devoid of TLC for a few months, one of our goals for this year is to get back on track with regular posts so we can keep you updated with all the smooth digital happenings here at Butter.

We think this is going to be a big year for us and our clients, but before we talk about what we are planning, we wanted to highlight a few projects that we are particularly proud of from last year, and a couple of more recent happenings that we are all pretty excited about.

Securities and Futures Commission - (SFC)

http://www.sfc.hk/web/EN/index.html

In terms of technical delivery the SFC website was by far the most challenging project of the year. The content management system (CMS) needed to support over 200 users, managing over 12,000 pages of content, whilst being the glue that brought together multiple other applications that were being developed by Deloitte and Thompson Reuters. The very nature of the content within the website meant that intense security requirements had to be considered, and the site needed to be highly available, scalable and resilient.

 Other notable features included:

• A rigid workflow system for the CMS to ensure that content goes through rounds of approval before going public. 
• Consolidation of their e-Alerts system using campaign monitor.
• Enterprise search engine, utilising on-site google search appliance (GSE).

Two of the main goals for this website redesign were to increase the overall usability and user experience, and to make it blazingly fast. Not only did we achieve both, but we think we made it look better and easier to navigate than any other financial regulator in the world.

As of today there has been 0 downtime in over 6 months thanks to the MODX backed architecture that we developed and deployed.

Scandale

http://www.scandale.com/

Scandale’s range of chic products are inspired by the vintage elegance of the brand, brought up to date with innovative new fabrics and technology to define the secret to effortless elegance. As the client had no previous website, this was an essential deliverable for reestablishing and respecting the brand heritage that has been around since 1932 and is now in the process of being rejuvenated.

Currently comprising a consumer site in English, French and Russian (we will soon be launching a trade only site to catalogue its products), the client wanted an emphasis put on the brand identity, positioning Scandale correctly between competitors - accessible luxury that appeals to their target audience - aspirational, but not unaffordable. 

Guinness China

http://www.guinness.com.cn/

We've been a fan of the black stuff for years, so being able to work with a company as historic and prolific in the beverage industry as Diageo are, to help break the Guinness brand into China, was a dream opportunity for us.

Working within strict brand guidelines, and as part of a major marketing push to encourage and educate the mainland public on Guinness and all its tasty goodness, the website specifically highlights venues and events to help consumers overcome their fear of the 'strange looking black beer'. Bilingual, of course, and built to be mobile friendly with no flash elements at all, it's driven by an intuitive search function. We are currently building out the Hong Kong Guinness website.

TorqCycle

http://www.torqcycle.com/

TorqCycle is the first spinning center of its kind in Hong Kong. We worked closely with the client to bring the concept over from the US and establish the brand identity, including logo, brand guidelines, secondary graphics and typographic systems. These were applied to produce a deliberately bold website design that integrated a third party online reservation and payment system built specifically for spinning classes.

New in 2013

Saving Bears with Animals Asia

http://www.stoptheeviction.info/

We are delighted to have been an integral part of helping Animals In Asia with their eviction issues in Vietnam, along with celebrities and bear fans Karen Mok and Ricky Gervais, and heard the great news recently that they have been allowed to stay in their current location. 

"We wanted to thank you so much for developing our eviction website. You have no idea how much it helped us! And to do it free of charge and with such urgency (at a time we needed it most) was just so very generous of you. You have our deepest gratitude. We couldn't have done this without people like you supporting us."

Alvanon

http://www.alvanon.com/

A revamp of their old site, we retained most of their original content but reorganized it along with the website architecture to improve the overall navigation and usability. As a family run company with an extensive history and interesting brand story, we wanted to highlight its beginnings and showcase the company timeline as an item of particular interest.

The main issue they faced with their old site was that it didn't explain the range of interesting projects that were happening, and the information for these was frequently being lost under several levels of navigation. The new site accentuates these main components much more and the user should find it much quicker to navigate between sections. The robust, scaleable and easy to use CMS that we set up for them means that they can edit and add content on any page in the form of images, text or videos.

The second tier of the project will be to redesign and build the e-commerce component of their site to be in keeping with the new look. The e-commerce site will sell their fit mannequins internationally, and will have a variety of different purchase options, for beginners to professionals. 

 

Recently Butter met up with an interesting company that works with one of our partners, MODX. That company is SoftLayer, and the reason they got our attention is that, apart from Amazon, they’re the only hosting platform providing a public cloud in Asia right now. Several members of the SoftLayer team – including chief strategy officer George Karidis – were in the region last month, and while they were in Hong Kong, we took the opportunity to introduce them to some of our industry friends, over drinks and canapés at Pure SoHo.

SoftLayer began as a startup in Dallas back in 2005. According to Karidis, the company “[identified] the need for on-demand data-center and hosting services long before… infrastructure as a service [IaaS] and cloud computing really took off.” It now runs 13 data centers – including one in Singapore, its first in Asia-Pacific – and 16 network points of presence, including in Hong Kong, Singapore and Tokyo. SoftLayer is all about providing internet-scaling capabilities: its customers use an all-encompassing API and automation tools to control an on-demand platform across physical and virtual devices. According to Karidis, SoftLayer is the largest privately held IaaS provider in the world, and currently manages 100,000 servers. The company’s 25,000 customers run the gamut from technology startups to global enterprises, he says.

Today, around 20 percent of those clients are in Asia-Pacific. “We have more than 4,000 active customers in the region, with new ones coming on board every day,” says Karidis. “Companies in Asia now have a truly global cloud infrastructure in the region, connected by a network architecture that fully integrates three distinct and redundant network architectures – public, private, and data-center-to-data-center – into the industry’s first network-within-a-network topology.”

Meantime, MODX recently got us excited by announcing it will be launching its own cloud-hosting platform later this year. We’ve been fortunate enough to see some of the early previews, and they look awesome. The system will offer single-click deploys, backups and recoveries, and MODX has built in a simple way to update without taking production down for even a second. Via Skype a few days ago, MODX even showed us how to kick up a site in around 10 seconds flat, beating our current best method hands down.

At Butter we still are managing all our hosting ourselves, including all the scaling, backups and other headaches. To say that we’re looking forward to migrating some of our infrastructure onto the rock-solid platforms that MODX and SoftLayer are putting together would be an understatement.

If the work you do is anything like ours, you probably feel similarly. Do SoftLayer’s and MODX’s offerings, present and future, impact your business? If so, how?

Digital Butter recently built a funny-caption-competition app for Animals Asia. Go here to enter and, besides supporting a worthy cause, you'll stand the chance of winning a t-shirt or cute stuffed bear. :D

The app was built during Social Media Week (which ran until February 17) by James and Jude, as they attempted to recreate the hacking/ drinking-game scene in The Social Network. With Jo having done the design groundwork before the event, our dynamic duo set out to get Animals Asia's app done in 45 minutes flat... while downing a shot every 5 minutes. They managed it too – hideous (and infinitely correctable) typos notwithstanding. ;)

Social Media Week is a global event - this being the second year of its running in Hong Kong (with Butter's own Glen Chu on the organizing committee). Besides the drunken app-making debacle, the week gave Butter the chance to showcase an idea we're pretty excited about...

PopZeen: Sharing Gets Creative

It was StartupsHK’s pitch night (think a less-terrifying version of Shark Tank), and five startups had five minutes each to pitch to five expert judges. We did alright... Okay, we did awesome – beating out the other startups to win three of the four prizes! Aside from bringing in investment dollars (courtesy of Ameba Capital) and free hosting (courtesy of Rackspace), the judges’ reactions gave a huge boost to our belief that we might actually be on to something.

The app is called PopZeen, and with any luck, you’ll be using it this year. That’s the plan anyway (and yes, it will be free). We all regularly share stuff online – sometimes via other people. But it seemed to us there was something missing in terms of being able to personalize and enrich the stuff we’re sharing. I mean, isn’t that something we’d all like to be able to do?

PopZeen is designed to be, essentially, a social magazine (hence the name ;)) – pulling in premium articles and photography in real time, and making it easy for users to reimagine and recreate that content as they share it. The editing tool enables you, for example, to draw arrows at Katy Perry’s simply divine shoes (“Where do I get these??”), or circle her weird-ass bag (“WAT!?!”). Or, for that matter, discuss a recent sports game – what went wrong, and how it could’ve all been different… (“Just look at that offside!”)

The plan is to launch PopZeen later this year. Sign up here to be kept abreast of developments, or you can watch the video below to see Mr Zeen (Eddie) in action.

Butter is proud to announce the publication of our first scientific paper. Called "Mining Parallel Documents Using Low Bandwidth and High Precision CLIR from the Heterogeneous Web", this article deals with matters that interest nobody but the authors and was featured at the 5th International Joint Conference on Natural Language Processing!

Signed notably by Dr. P, our new French addition to the Digital Butter team. He brings smelly cheese to our fridge, megatron-like coding ability and lots of useless research knowledge we don't understand.