Why Mobile Responsive Websites Are the Best Thing Since Sliced Bread

You hear the term “mobile-friendly” all the time when it comes to websites. But what does it actually mean? Can’t you pull up any website on a phone? What is the difference between a mobile-responsive website and a mobile website? What’s the difference between “mobile-friendly’ and “mobile-responsive”? Read on to find out.

For this example, we’re going to use this fictional website, and assume that this is how the website looks on a desktop or laptop computer.

This is a very basic website, but you can get the idea. Notice there is a header which consists of the logo and a menu bar, one content area, a sidebar, and a series of 3 boxes at the bottom.

Here’s how that same website would look on a mobile phone by default. This is with no optimization and no responsiveness and how most websites looked in the early days of the mobile web.

Yuck! You can’t even see the logo! A few years ago, web designers faced this problem; their websites looked horrible once the world started trying to look at websites on their mobile phones. If you wanted to see the rest of the website, you would have to scroll to the left and right in addition to scrolling up and down to read the content. It led to a very frustrating user experience.

To solve this problem, cell phones began to implement zoom. If a website was larger than the screen, (and most of them were) the screen would zoom way out and then you could zoom in to look at the specific area you wanted.

So, if you were a designer, your website would now look like this when people first arrived at it. You better pull out your reading glasses.

Finally, someone decided they had enough and created what is known as a “mobile website”. This was basically a complete copy of the website, but the design was made so phones could browse the website easier. Your website took on the look of an “app” instead of looking like your website in most cases.

This was all well and good, but now you had to manage two copies of your website. For some companies, there were more than that; separate versions of the site for each style of phone to try to ensure that each phone had a good user experience and the technologies for “detecting” if you were on a mobile device often didn’t work right causing users to be trapped in the mobile version, or presenting them with a view that was optimized for the wrong device.

Usually, a separate domain such as m.yoursite.com would be created, and a link at the bottom of the page would let you get off the mobile version if you wanted to see the desktop and have all the functionality of the full website.

There had to be a better way. And thus, the mobile-optimized website was born.

Usually, a mobile-optimized website would mean stripping away all the graphics and styles of the page and leaving users with a bare-bones reading experience. While everything was easily readable on this new layout, it was a very ho-hum user experience of long walls of text devoid of color and formatting.

The menu would often be compressed into a dropdown box that users would click to be able to access the rest of the pages.

The natural evolution of mobile-optimized websites made them look and more and more like the full website until finally we were able to almost perfectly mimic the existing website but so that it was still optimized for viewing on a smaller screen. This is what has become known as mobile-responsive design. See the example before and compare it to the first screenshot of our initial website.  

You can see that it looks almost exactly similar, but it has some key differences.

• First, everything is stacked vertically on the screen. Scrolling side-to-side is awkward. Users are used to scrolling up and down on a phone to read texts and reply to emails, so it is already a familiar user experience.
• Second, some of the graphics are stripped away, this is to reduce loading time on US carriers which often have limited data plans.
• Next, you’ll notice the menu has been removed and replaced with a blue box. This is known as a “hamburger menu” and became popular when it was integrated as a user interface element of Apple iPhones. The hamburger menu allows us to hide all those pages that would be used for the menu behind a button that you can click on if you want to go to a new page. This keeps it out of the way and easy for users to read.
• Finally, you’ll also notice that the first paragraph has been shortened and replaced with a short blurb and a “read more”. With mobile responsive behavior, we can show content specific to users if they are on a phone, tablet, or desktop computer.

What’s more, with mobile-responsive technology, all of the changes happen in the background so the same website can be served to all visitors. This means you don’t have to have separate websites for mobile phones and desktops. The same site will be served to all visitors, and customized to fit the device based on screen width.

Now you know the history and different kinds of mobile solutions that web companies have used over the years. The current technologies will surely evolve and grow as the years go on, and you can expect Buffalo Wired to continue to offer the ideal solutions for our clients. If your website is using outdated technology to serve your mobile website, contact Buffalo Wired to get upgraded today!