Why Mobile Responsive Web Design is Important
Posted by Corey Smith on Feb 27, 2015 7:00:00 AM
I am curious as to what device you are reading this on? Could it be on a laptop? Maybe you’re at work on a desk? Or – perhaps you have a smartphone in your hand and you’re thumbing through this page.
There are so many different types of devices on the market these days. Current market research shows that the amount of mobile internet users has now overtaken the amount of desktop users.
A responsive web design is what allows a website the ability to wrap and adapt to the size of the current screen that it is being viewed on. If someone is opening your website on a smartphone it will appear vastly different than the same page on a laptop or desktop computer. The site automatically reformats the page to give the user a better experience suited to their device. A Responsive design also takes into consideration the interaction which will make your site easier by acknowledging and integrating things like touch screen and special mobile aided navigation.
Understanding Mobile First
Sites used to be designed for desktop users first. Mobile versions were far too minimal and had a very small functional experience. When a team designs the site for mobile-first, the end result in the experience is focused on the key tasks users want to be able to accomplish when viewing your website.
Benefits of Mobile First
- Responsive sites work well across many existing devices on the market and should be a safe bet that it will be this way for a considerable time to come.
- When you optimize your site no matter what the end-user decides to view it on will make their life easier. Happier customers make for a happier business.
- Mobile Responsive sites take a bit longer to design and develop, but they survive longer however management, upgrades, and support only need to be applied to a single place. This will save time and money.
- Managing SEO for separate desktops and mobile sites is hard and it does not produce as great of results. Google recommends a responsive approach. Consolidating the view of your results means more focus.
- Having your site consistent and optimized no matter what platform you are using to view it from, will provide a better experience to the user which in turn will lead them to engage with you than decide to go elsewhere.
Mobile Responsive Design
We built our first mobile responsive website in 2011. The concept is simple... the website changes its presentation depending on the browser size you are looking at. It's not based on the device but based on the browser size.
You 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 to go to our home page using your mobile phone.
Mobile adaptive design is a variation of mobile responsive. Oftentimes 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.
Alternative Mobile Websites
A common (and outdated) approach for building a mobile website has been to create an alternate website for your mobile visitors to see when they use their mobile device. 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 businesses have with an alternative mobile website is that it's almost never managed with the same database. In 2015, Google started ranking websites higher that were mobile-friendly. As such, there was 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.
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)
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).
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.
We Love Mobile Responsive Web Designs
Having the ability to offer your consumers a beautiful optimized experience no matter what their choice of device, means you will expand the reach of your service which will increase the chances you have of engaging with individuals. This approach is incredibly valuable and the cost-effectiveness is a clear advantage.
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."