Responsive, Mobile Friendly Web Design

As of January 2013 in America, smartphones accounted for half of all mobile phones and were poised to take over feature phones in 2013. In fact, as of 2011, the number of U.S. wireless devices outnumbered the U.S. population! No wonder we are moving in a direction that allows our websites to display better on a mobile device.

Quick tip: If you want to find out how many mobile devices are accessing your website, just view your Google Analytics web statistics and go to Standard Reports > Audience > Mobile > Overview to compare mobile/tablet devices vs. non-mobile access. Then go to Devices under Mobile to see the breakdown of those mobile devices.

So just to be clear, almost all websites can be “viewed” on a mobile/tablet device, it is just how user-friendly of an experience it is or not. By default, static websites will shrink to fit the smaller devices causing the user to zoom in and out (pinch-to-zoom) or scroll left and right — making it more difficult to find what they are looking for.

Client website displaying responsive design on multiple devicesSo what are your mobile-friendly options you say? Well, a responsive website that will convert to all different screen sizes and orientations (horizontal and vertical views) of any device and allow for normal vertical scrolling that is native to normal desktop users – the way it was meant to be. This is called Responsive Design. See example (right) of what should happen when a website converts content from a 3-column layout to 1-column layout allowing for larger more readable text and imagery.

Responsive Design

Responsive websites use CSS & javascript coding to convert a normal static site to a responsive design which will allow a website to automatically “respond” to the new screen sizes and orientations without the need for a completely different site, plugin, or app. All the content is exactly the same and you only have one website that works on both desktop and mobile devices (called mobile parity). Most WordPress/Squarespace/Wix themes are responsive these days so is easy to start anew with one of these options on your own.

Below is a conversion of a website so you can see the before and after of a static site converted to a responsive site.

Website screenshot comparing static website to responsive website

So with this change in technology, mobile-friendliness has become an important ranking factor for Google as they move to Mobile First Indexing in September 2020. You can perform the Mobile-Friendly Test below to see if your site meets the mobile-friendly requirements needed.

Mobile-Friendly Test

What to do if I don’t have a mobile-friendly website?

If your site does not pass the mobile-friendly test you should convert to a “responsive” website right away. This is required in the age of mobile devices. Websites really are ALL about usability and effectiveness. Eventually, there will be no more talk of mobile-friendly websites: there will just be websites, and it will be expected to adapt to all screen sizes. Don’t get left behind!

Check out our two Website Packages below if you are ready for a website redesign:

Basic Web Package Artist Web Package

back to top