Responsive Web Design: The changing face of website design & development

1

The power of mobile

Everyone who is anyone in digital marketing is talking about responsive web design. But, whether you love it or hate it, responsive design is going main-stream in 2013. So let’s talk about the what, the why, the how & the who of responsive design and how a Brightfox Smart Site can get you ahead of the game.

What . . . is responsive web design?

According to Stanford University, the definition of a responsive website is: “A website that responds to the device that accesses it and delivers the appropriate output . . . . Rather than designing multiple sites for different-sized devices, this approach designs one site but specifies how it should appear on varied devices”

So in layman’s terms, a responsively designed website will recognise what device you are using, like an iPad or iPhone, and will adapt itself to best suit the device. What this means is that you can live in comfort knowing that every one of your website’s visitors is having the optimum viewing experience no matter what devise they use.

Responsive Design Workflow

Why . . . is responsive design becoming so important?

With the explosion of Tablets and Smart Phones all over the world we have seen a major shift in how people access websites. For the first 15 years of the Internet as we know it, everyone used a PC to view websites. But that is all changing now. In fact it is becoming increasingly the norm to access websites on your Tablet and/or Smart Phone.

Did you know that:
• 61% of smartphone users are accessing the internet daily.
• In Australia alone 76% of people own a smartphone and 38% own a tablet device.

So the next stage of evolution of website access is already being dominated by use of Tablets and Smart Phones as opposed to the use of PC’s. The significance of this to the development of a successful website is quite profound. Just one of the surprising (or could we say alarming) statistics is that on average 61% of mobile visitors to a non-friendly website bounce, that is to say they never travel past the homepage.

Good and Bad

If we look at our own website you can quickly see the negative impact that having a non-responsively designed website has. Looking at our own website’s analytics we found that 20% of our visitors came from mobile devices and that a whopping 57.73% were bouncing. That’s 72 potential customers we lost in a single month! Simple math says that if we converted 20% of these bounces into leads we would have 19 new prospects and if only one of those prospects made a purchase from us, I’d say that the money we invested into our new responsive Brightfox website was money well spent!

How do figures like this stack up in your business?

How . . . does responsive web design work?

Three key technical features form the heart of responsive web design:

  • Media queries and media query listeners
    The process that determine the device being used and its screen size and resolution.
  • A flexible grid-based layout that uses relative sizing
     The word ‘Grid’ is used  a bit freely to describe this element, but effectively it is code used to determine the position and layout of the content based on the device detected by the media queries. The flexibility of this is done not in traditional pixels instead in percentages to provide relative sizing based on the device.
  • Flexible images and media
    This feature allows you to adapt your images or other media to load differently depending on the device, either by scaling, cropping or using an alternative (perhaps smaller size) file.

Who . . . should be utililising responsive web design?

Everyone!

With the speed at which mobile devices are being adopted all over the world, a responsive design will ensure that your website stays ahead of the browsing trend. Now not everyone can justify the additional expense involved, but if you are in a selling or service industry where your clients are typically on the road or away from a traditional PC, then a responsive design is an absolute.

Two of the best  industry examples are automotive and property. With clients on the road constantly inspecting and investigating potential purchases, Tablets and Smartphones have become key tools in the consumer search. In fact, according to realestate.com.au over 34% of all visits to their site came from mobile devices (and this does not take into account their iOS and Android apps).

We suggest you do some simple math yourself. In the case of a property development, lets consider a traditional weekend advertising campaign with a full page ad in a national paper. Lets say for arguments sake that this costs $20,000. If this advertisement was to generate 40 leads, one would say the cost of lead generation would be $500 per lead. A large number of these potential leads will immediately visit your website for further information or to register their further interest. Lets assume 50% visit the website rather than pick up the phone to call or visit the display suite. If we use the above statics (61% bounce rate for mobile users visiting a non-friendly website) we can say that 12 potential leads will be lost (61% of 20 leads), with a direct cost of lost leads of $6,000. Of course the true cost is vastly higher than this as the potential revenue that could be earned from each prospect is greater than the lead generation cost. Nevertheless, this example does show the immediate and direct cost to a business through having a poorly designed and developed website.

Are you maximising your cost of enquiry and can you afford to lose this business?

Brightfox Smart Sites

We encourage you to visit the Brightfox website on a range of different devices so you can truly experience what a responsively designed website is. You will find the experience quite different, but far more rewarding on each device. To ensure that all of our customers can similarly start developing responsive websites, we have launched a new product call Smart Sites. This is a single  high powered content management system that is coupled with a responsively designed website which seamlessly delivers a website suited to every device, all with minimal technical and administrative input. Please visit our website or call Brightfox on 07 3177 0505 today to find out more.

Brightfox Smart Sites

HTML5 in mobile and web development

You may or may not have heard the term ‘HTML 5’ used lately when discussing the future of web development and in particular the future of mobile web development. So what is HTML 5? HTML 5 is a browser-based programming language that can make your content more accessible and interactive. In short HTML 5 can deliver app-like usability and mobile friendly delivery in a website.

Is it worth jumping on the HTML 5 band-wagon? The continued support and growth of HTML 5 is undeniable and its capabilities were clear to Apple Inc’s CEO Steve Jobs over two years ago when in April 2010 he controversially issued a public letter that concluded that Adobe Flash would no longer be necessary to watch videos or consume web content as “new open standards such as HTML 5 will win . . .” in the mobile arena. The result of this statement? Apple does not support Flash based content on any iPad or iPhone devices and when you consider that global sales of these devices are in the region of 180 million units, that’s a whole lot of users without the ability to view your content and subsequently adobe gave up the fight and ceased development of mobile versions of flash.

With improved support for offline data storage, advanced form development and API support for complex web applications HTML 5 is clearly becoming the favoured path to follow, particularly for companies looking to avoid the increased development time & cost to publish multiple platform specific applications. Brands such as Ford, The Financial Times and Vimeo have paved the way, utilising the power of HTML 5 to develop their web based ‘apps’. According to the Burrows Communications Agency who developed the ‘Ford Showroom’ application it’s all about cross platform integration and “The cost savings of not developing twice (for multiple platforms) can add up to the hundreds of thousands . . .”

Here at Brightfox we’ve been busy building HTML5 websites (stay tuned and check out our revamped website due for release in a little over a month) and web apps for the property development industry. A new product that we have recently launched is a powerful multimedia sales tool developed for use on Tablets, and in particular for the IPAD. Combining the power of our live agent portal sales tools and our interactive display suite touch-screen solutions, we have developed a sales and presentation tool that not only allows our clients to interactively present their product to potential purchasers but also seamlessly roll their presentation into a sale utilising one dynamic tool. Stay tuned for more on this product!

Click Here to be taken to an interesting infographic about HTML 5 hosted by mycustomer.com

Adobe and Flash give up the mobile fight!

1

Adobe Flash ImageFour years after the release of the iPhone and Steve Jobs’ controversial decision to not support flash on apple’s mobile devices, Adobe has given up the fight. According to ZDNet, after many teething and speed problems getting flash to work on android and other mobile devices, Adobe have announced they will halt development of future mobile versions of flash.

Adobe will now focus on developing tools that will allow flash developers to create mobile apps running on Adobe’s Air platform.

What does this mean for the general population? Not much. But if you’re a website owner and have flash based content, you might want to start looking at upgrading your site and utilising the ever growing power and simplicity of HTML5!

To read more about Adobe’s decision follow the ZDNet link above or visit news.com.au