875 Hopkins Rd, Williamsville, NY 14221   716-213-4444   716-213-0612   HelpDesk Support

Why Mobile Responsive Websites Are the Best Thing Since Sliced Bread

why mobile websites best thing since sliced breadYou 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.

basic website

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.

basic website no mobile

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.

early mobile website

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.

mobile version of site

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.

mobile optimized website

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.  

mobile responsive 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 Quad-B to continue to offer the ideal solutions for our clients. If your website is using outdated technology to serve your mobile website, contact Quad-B to get upgraded today!

What People Are Saying About Us

  • “I have gotten several compliments about the site (mostly from friends and family). I noticed that when I type in "Interim CFO Services Buffalo NY"  the site comes up around #1 on the first page.”

    Read more ...
  • "As a small business owner, I have found Buffalo Wired's creation and working of our website to be one of the most successful investments we have made.Read more ...

  • "Buffalo Wired simply keeps our office moving in such a way as to maximize the efficiency of both myself and my employees.Read more ...

  • "Buffalo Wired did a fantastic job designing our website and we couldn't be more pleased with the final result. We have gotten many compliments and have received such a favorable response from our clients."

    Read more ...
  • "Buffalo Wired has perfected the rare art of customer service. The Buffalo Wired team shows the utmost patience and concern for the satisfaction of their customers...they will not stop until you are more than happy."

    Read more ...
  • "It is a pleasure doing business with Buffalo Wired. Their people are friendly and understanding. They take the time to listen so that they can accomplish the image that you want for your company’s website.

    Read more ...
  • "After failing with two other outfits to have my website completed and functional I spoke with Buffalo Wired. From our first meeting to working along with my web master and then onto completion, I felt at ease.

    Read more ...
  • "We had been unsatisfied with our prior web service but were reluctant to make a change because of costs and not knowing if the service and product would be any better. 

    Read more ...
  •  "I love my new website! I no longer cringe when I send a perspective customer to view it. I waited a long time to have a "professional website". I am so glad I waited. I always thought I could not afford it.Read more ...

  • "From a technological infant knowing just enough to get into trouble on my own computer, I am so impressed and grateful to Buffalo Wired for designing our new Buffalo Choral Arts Society’s webpage.

    Read more ...

Social Media

Find Us

875 Hopkins Rd,
Williamsville, NY 14221

Click here for directions

Need Help?

Call: 716-213-4444
Email: Click Here

HelpDesk Support

Quad-B Systems - All The Technology A Business Needs

Quad-B Systems

17 Main Street, Hamburg, NY 14075

716-213-4444
716-213-0612

Hours:
M-F: 9AM - 5PM