Designing for a Mobile World

Posted by Corey Smith on Apr 23, 2018 2:37:02 PM

Selfie

I first used my mobile phone to browse the internet back in 2005 and didn’t really like it because it was slow and the websites didn’t look good on my little phone. They simply were not optimized for web traffic.

Oh how times have changed. I use my phone to browse the web a lot. More and more people are doing the same. The chances are high that you are viewing this page on your phone. While Tribute Media's numbers aren't as high as the Mobile Web US Stats of over 50% of traffic is web traffic, our traffic for mobile devices is still relatively high.

The challenge for businesses (as well as developers) is to make the experience reliable for all web users. It’s important that we have a rich experience for your normal website visitors for their desktops but you also want an experience that makes sense for the mobile users… whether those mobile users are on a small smartphone or even a tablet, such as the iPad.

Alternative Mobile Websites

A common approach for building a mobile website has been to create an alternate website for your mobile visitors to see when they use their mobile platform. There is a big problem with that approach. When you go to a mobile website, it is usually (if done right) optimized for phones and not for tablets. In fact, the experience tends to be a little awkward on tablets because of the touch optimized buttons designed for tiny screens.

One of the most common issues that small and medium business have with an alternative mobile website is that it's almost never managed with the same database. In 2015, Google started ranking website higher that were mobile friendly. As such, there were a rash of companies that started offering mobile websites to SMBs. They would throw up a hastily designed site that would pass the Google Mobile Friendly Test but were really not effective mobile websites. They quickly became outdated because they couldn't easily match their main website.

Mobile Responsive Design

An approach that I favor is a responsive website design. A List Apart had a great article on this concept of Responsive Web Design in May, 2010. As a side note, we built our first mobile responsive website in 2011. The concept is simple... the website changes it’s presentation depending on the browser size you are looking at. It's not based on the device but based on the browser size.

Tribute Media QRYou can use Tribute Media as a pretty good example of this (not this page if you are on mobile device because of AMP - which I'll talk about below). You can click that link to our home page and it should open in a new window. Resize the browser window by taking the corner of your browser and making it smaller (narrower) and you’ll see the content will shift. Images will get smaller. If you make your web browser as narrow as a mobile phone, you’ll even see how it would look in your mobile phone. The other way you can do this is go to our home page using your mobile phone. I’ve included a QR code at the right (if you know what that is) so that you can just scan it with your phone and see this in action.

I’ve included a couple of images showing how this works from Tribute Media as well just in case you can’t figure how how to resize your browser window.

Tribute Media Website Full Width

Tribute Media Website Mid and Mobile Width

Mobile Adaptive Design

Mobile adaptive design is a variation of mobile responsive. Often times people think a website is mobile responsive when it's actually mobile adaptive. The key distinction here is that a mobile responsive site shifts to a new layout when the screen size changes but a mobile adaptive site changes completely to a new design when the screen size changes. There are advantages and disadvantages to each. If your web design team is worth their salt, they'll be able to guide you to the best option. Generally speaking, mobile responsive is easier to build so therefore less expensive. However, if you have some advanced requirements for your mobile environment that differ from the requirements of your desktop environment, adaptive is the way to go.

AMP (Accelerated Mobile Pages)

AMP first appeared to web users in early 2016. The first iterations of AMP were not very good and caused frustration for many users. Most specifically, it made it difficult for users to share links to your site. Since then, Google has addressed those major UX (user experience) concerns and it's really a great approach.

Generally speaking, AMP is only meant for blog posts, however, there's no reason (unless your website platform doesn't support it) why all your pages can't be AMP.

AMP presents a stripped down version of your website so that it will load faster. Usually, you'll only see an AMP page if you find a blog post from a mobile search. I can't show you how this page will appear because I'm still writing it but I have a couple screenshots from one of our most popular posts Understanding the Domain Name System. You can click through and see how it looks not in AMP (it will open in a new window).

If you do a search for that post and find it, you'll see the following:

Tribute Media AMP

Mobile Apps

There is still a place for mobile apps. According to Smart Insights, apps account for 89% of mobile media time, with the other 11% spent on websites. That doesn't mean an app is right for your business but it's definitely something to consider looking into. If you have a product or service that requires more than just your users referencing data but they actually need to interact at a greater level, an app is the way to go. Some options you might look at to consider an could be:

  • Advanced searching (like a real estate website)
  • Advanced interaction (like education or forums)
  • eCommerce (if you have a lot of products)
  • Custom user experiences that a website won't cut it (like a media site)
  • Company management (like financials, hr management, C-suite dashboards)

Something to Consider

There are some drawbacks to responsive web design. It’s not a decision that will work for everyone. Some people will still want a mobile version of their website. Some will require an adaptive website. If you are considering making the decision to use a responsive web design for your website, consider a few challenges that could crop up.

  • Your users usually cannot resize their browser window in the mobile device as easily so small text could be harder to read. This can be remedied if you understand your buyer personas.
  • Your content may not work well (e.g. eCommerce heavy websites may introduce more problems than are solved).
  • You must make different concessions on how things will look. Images will shift and you may need some to go away. However, even a mobile website will have this consideration.
  • You have unique requirements. Talk to your web designer and get an expert's opinion.

The bottom lines is that you need to consider mobile for your web presence. It's not as simple as just saying, "make it mobile." It requires forethought and work.

Corey Smith

Written by Corey Smith

Corey Smith is the founder of Tribute Media and serves as the Digital Marketing Strategist. He is also the author of "Do It Right: A CEO's Guide to Web Strategy" and "Tweet It Right: A CEO's Guide to Twitter."

Please Leave a Comment: