The Value Of A Mobile Optimized Website

Ring ring… hello? Yeah, I’ll tell them.

1989 called, and they want you to get with the 21st century’s technology. Technically 1989 was part of the 21st century, but just ignore that for the sake of the joke. The point I’m trying to make is that technology has a way of quickly changing. And from this point forward, the gaps in technological advancements only become bigger than in the past.

Technology has revolutionized the way we live, play, and work. For example, 8 years ago, Siri (on your iPhone) didn’t exist. You couldn’t just whip out your iPhone X and ask it whether or not it’s going to rain in three days. Like… you can do that now. Technological innovation – like Siri – has had monumental impacts on how we operate in our day-to-day.

Here are some statistics for you. According to Google, the number of voice searches has increased by 3,400% since 2008. A study conducted by influencermarketinghub.com revealed that in 2018, the total number of searches have increased by 19% – but at the same time, the number of searches on desktops have decreased. What does all of this mean for you?

In short: if you aren’t optimizing your website for mobile users, you’re letting a lot of opportunities slip past. Let’s talk about why.

Responsive Web Design

In the fields of design, development, and UI/UX, we’re quickly reaching the point of not being able to keep up with the endless new resolutions and screen sizes of every device on the market.

iPhone X screens have a native resolution of 2436×1125, which fits their 5.85-inch screen. On the other hand, a Samsung Galaxy Note 8 uses a 2960×1440 resolution. Meanwhile, an older iPhone 6 uses 50×1334 on a 4.7-inch screen.

But what about LG? What about Sony? What about tablets and laptops and desktops and… the list goes on. You should begin to see why it would be impossible to create unique pages scripted to show depending on the resolution of the device that’s visiting.

So how do we combat this?

Responsive web design.

First, let’s talk about what not having responsive web design might look like.

Fitness… what was that? Even if I can intuit what the word is supposed to be, I should never have to guess at what the content is trying to tell me. This is an example of Walmart Canada’s website on mobile, where the page doesn’t automatically adjust itself into the proper dimensions, depending on the device that’s viewing it.

The dangers of this is obviously that potential customers will just go elsewhere. But on top of that, there’s the very real danger that important buttons or functions end up being hidden or broken. Imagine if the checkout button didn’t reflow correctly and customers couldn’t purchase your product (cue The Sound of Silence by Simon & Garfunkel: Hello darkness my old friend…).

Now we know what responsive web design isn’t. Let’s talk about what it is, and what it can – and should – do. Responsive web design is the approach to web designing that responds to the visitor’s behavior. If the visitor has a smaller screen, your website can scale up. If the visitor has a bigger screen, it can adjust accordingly.

But How?

Responsive web design uses a mix of flexible grids and layouts that are able to respond to users. This is done through intelligent programming that is able to recognize the user’s environment (aka screen size). Take for example a website that’s designed into three columns. When viewed on a smaller screen, the website might force you to view them horizontally (even when the phone is upright).

Just looking at this image is enough to trigger my student loan anxiety. This type of “fixed” website isn’t responsive in any way and forces the user to simply attempt to navigate the landscape view on a mobile display. The result is a broken layout and slow load times.

The way that responsive web design defeats this issue is that in the design process, all page elements are created proportionally, rather than by pixels. If you have a website like the one pictured above, you wouldn’t necessarily define how wide each column should be, instead, you would determine how wide each column should be in relation to the others. Images and videos are also sized relatively, so they can resize themselves proportionally.

Let’s Play This or That

Intelligent design also must take into account several other considerations while creating websites. Sometimes it can feel like a game of “this or that” where design decisions are made that favor one aspect of browsing over another.

The first example is a mouse vs touch screen. Something that might be very easy to select with a mouse might actually be excruciatingly difficult to touch properly while using your fingers.

Another consideration should be graphics vs responsiveness. Overloading your website with too many graphics, ads, and autoplay videos (p.s., don’t do this, and if you do make sure that the videos play muted) all contribute to slowing down your website’s load time and response speeds. Remember that most people consider a 0.01 second response time normal. Very few people will patiently wait 10 seconds.

An APP or a Mobile Version

Over the past few years, technology has taken several interesting changes of direction. At one point, developers were going insane over app development. And to a degree they still are, but it certainly feels like the appocalypse (see what I did there? appocalypse?) has passed. Some developers say you don’t need an app, you just need a mobile-optimized version of your website. Some developers laugh in the face of the first developers and swear by apps. Which boat are you in?

The Stats

In 2015, App Annie reported that the mobile industry generated $43.1 billion in gross income revenue. By 2020 the mobile industry is expected to be worth almost $200 billion. So smartphones probably aren’t going anywhere, and in turn – neither are apps. This, combined with the statistics that show desktop usage is decreasing while overall internet and search (Google) usage is increasing tells us that all together, the internet is here to stay. The way we access the internet is what’s changing.

So what are the benefits of Apps?

1) Branding

Since an app is entirely disconnected from an actual website, it has the ability to offer branding opportunities that wouldn’t otherwise exist on the website. I’m going to use Chick-Fil-A as an example for these next few points. The Chick-Fil-A app does branding very well.

Really, when’s the last time you went to chickfila.com? I can honestly say that I’ve never. But I use the app quite literally every time I want to eat there.

On top of that, the amount of times I’ve eaten there has increased because of the rewards program.

2) Personalization

Chick-Fil-A has successfully personalized my experience of eating at their restaurants by incentivizing me to eat and earn points. Personalization is the opportunity to tailor communication and experience of the user to their lifestyle. It’s easy for Chick-Fil-A to see what I order when I use the app. It’s easy for them to offer me free food based on what I like, as opposed to something random that I may or may not ever use. And finally, it’s easy for them to offer me personalized rewards when they need information from me. If they need a survey done, offer me a chicken sandwich and I’ll do your survey!

3) Leverage Device Capabilities

Having access to your mobile device’s capabilities can significantly enhance the customer experience. Push notifications allow you to communicate directly to clients, instant updates with latest features, and even having access to the customer’s camera (with their permission) can all aid in reaching a new level of engagement with that customer.

The downside to apps is that the reach is not as wide as a mobile website would be. Additionally, a mobile-optimized website is often much more cost effective than app development. This is even more true if you want a presence across multiple platforms (think Apple vs. Android). Websites don’t have that restriction on development.

Finally, mobile websites play a large factor in your SEO rankings online. As a general rule of thumb, my recommendation would always be to mobile optimize your website first, and if the finances are available, create the app next.

Stay tuned for our last blog post discussing Web Design and the value of a good looking site, vs one that delivers.