Have you ever browsed a website on your phone and realized the text was too small to read without zooming in?
You end up having to pinch in and pan back and forth across the screen to read each line?
Of course you have.
It’s a pain for the user and a nightmare for the company who spent a lot of money creating that website. It might look great on a PC, but it’s impossible to read on a phone. People don’t stay on a website like that any longer than they have to, and it is the main driving force behind responsive websites becoming the norm in the business world.
A few reasons why responsive websites have become so popular:
- Prefered Google placement
- Site is easily legible
- Site is optimized to look great on every device
- Mobile users outnumber PC users
- Update easier and cheaper
Before we dive in, what exactly is a responsive website?
Before we get too carried away with the benefits, let’s make sure we’re all on the same page about what we mean by “responsive websites”.
To simplify matters, for the sake of example, I’m illustrating responsive design using a website 729 Solutions created for Alta FoodCraft. This site was designed to be fully responsive, but we can easily “fake” what it would look like if it were not.
In the example below, you see what the home page looks like on your typical PC. Everything is nice and large and easy to read. It looks great!
10 years ago, you could have stopped there. One design, similar monitor sizes and not much else to worry about. Everyone was looking on computers with very similar specs.
Fast forward a few years and a mobile device boom
Mobile phones and tablets started selling like hot cakes, while wireless data connection speeds dramatically improved. If you weren’t on wifi, you probably still had access to data from just about anywhere. People were soon surfing the internet from their phones at the beach, on the bus or just walking down the street. The internet was suddenly everywhere.
Before responsive design, your website might look something like this. (Keep in mind this is an iphone Xs, so your resolution would be FAR worse.)
As you can see, there are some major issues here.
Phones and tablets would simply shrink the full website created for the PC and cram it into your phone. Suddenly everything is too tiny, you can’t read the text and nothing makes sense. Welcome to the growing pains of mobile device usage.
How do you fix this?
Since the PC version is fine, we need to find a way to make the mobile versions as clean, legible and beautiful as it looks on the PC, while leaving that version intact.
Responsive design and layout solves this problem.
Whether the user is on a tablet, phone or PC (of any kind), the design will conform to the users device. The designer has thought out, in advance, how the website should look at any, and every screen size. It takes more planning and time upfront, but It’s well worth it to have your site look great on every device.
How does the Alta FoodCraft site look on a phone after it’s been optimized with a responsive layout?
Everything is more user friendly, easier to read, and more simple to digest. All the user needs to do is scroll down the screen to see the rest of the content. The tablet works the same way.
The Disappearing Fold
In web design, there is a term called “Above the fold”. It describes the part of the website you see when you first open any web page. What you see on the screen before scrolling down is the “Above the fold” area”. It stands to reason that everything below that space is “Below the fold”.
Clients used to cram in as much important info “Above the fold” as possible. It is still an important space on every website, but the desire to wedge everything into that area has diminished since the “fold line” has turned into a gray area and varies wildly depending on the device.
Why should your website be set up the responsive way?
Prefered Google placement
Believe it or not, Google awards higher search result placement if your site is responsive. They assume users would rather visit sites that didn’t require the viewer to constantly pinch in and pan around to read. Not only are responsive websites easier to read, but they tend to load much quicker because the images are a fraction of the size of their PC counterpart. Mobile devices will actually load those smaller images and leave the larger PC images to faster wifi connections.
Site is easily legible
Since your site is optimized to look good on all devices that also means it’s easy to read and understand. It’s actually quite common to make the fonts and buttons larger on smaller devices to make it easier to read and click on. Large buttons and text on small devices are a must!
Site is optimized to look great on every device
Whether you’re surfing the internet on a phone, tablet or PC , a responsive site is built to look fantastic at any screen size. Designers pay extremely close attention to all screen widths to ensure images, text, and functionality is clear and concise, while being conscious of page load times.
Mobile users outnumber PC users
Here are a couple fun facts:
In 2018, 52% of all worldwide online traffic was generated through mobile phones. (Statista, 2018)
In 2017, 57% of all U.S. online traffic came from smartphones and tablets (BrightEdge, 2017)
Mobile phones are on us all the time, so it’s no surprise that users are choosing them to surf the internet over PCs. If you’re not optimized for mobile browsing, you’re most likely missing a lot of opportunities.
Bonus! Update your site easier and cheaper
I’m going to chalk this up as a bonus point since not all sites apply.
In the early days of responsive solutions, it was quite common for companies to physically create separate versions of each website. That meant that they would literally have one PC version, one tablet version and one phone version. You can imagine the headaches keeping all content up to date. This was a crude solution, but it does work. Each version was coded to be “sniffed” out by the user’s device so the correct version would pop up when they arrived at their site. It was a clever work-around, but technology has evolved and now we can essentially do the same thing with only one version of the website.
As the name “responsive” implies, the website “responds” to the width of each browser. The once static text, images, and shapes are now dynamic and change with the space available. That is how you can have one text block that works for both PC and phones. The box that contains the text changes, not the actual text. Because we’re using the same elements at all (read most) responsive sizes, you can save on edits and updates because you’re not changing 3 versions of a website. You’re changing one that dynamically adapts.
Last but not least
If you don’t have a responsive website, it’s time to start thinking about one. You can vastly open your market up by ensuring your site fits on all screens, looks great, loads quick, and is created to help your company achieve its goals regardless of what device the viewer is using.
About the Author
Today’s post was written by 729 Solution’s Designer Bob Tait. Learn more about Bob and the rest of the 729 Solutions team.
Tell us about your project and we’ll pair you with Bob or another designer, developer or project manager that meets your needs.
Check out these other blog posts!