Do your emails look great on every device? Responsive Email Design is the answer!

Header Image_Responsive Email Design
Tablet, Laptop, Mac
PC or Phone? How are your emails being read?
Without looking over the shoulder of your recipient’s or loading a virus to take over their digital world there’s no way to know until your email is sent and gone.

But . . . using advanced CSS in the HTML code of your emails we can now detect the type of device that is viewing your email and have the email content dynamically displayed so that it’s unique and optimised. PC or Phone, your recipient’s get the best view every time.

Don’t believe us? Click here from your Phone and then PC to check out a recent responsive email we sent to our clients. You’ll notice the difference straight away!

So what is it? It’s Responsive Design!
Those of you that read our blog will know that responsive design is something that we have been talking about for some time now.I can hear someone asking right now “so what’s the big deal?”

Well the big deal is that the vast majority of email is designed to be read on a PC. Yet statistics overwhelmingly tell us more and more people actually read their emails on their phone and their tablets.

Below are some stats on the different email clients people are using to read their emails:

Email Client Pie Graph
Email has left the desktop & gone mobile.
Here is an example of the difference between responsive design and desktop design.
Responsive Design Desktop Design
Responsive Email Design Desktop Email Design
The differences are significant and the user experience vastly superior for the mobile phone user.

If you’re serious about making your emails more successful then you need to
start talking responsive design today!

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