The Non-Technical Guide to Responsive Web Design

Recently I attended a networking event where a woman (let’s call her Kathy) promoted her online resource business. She proudly announced that her website could be used from a computer, smartphone or tablet. A few days later I found myself visiting Kathy’s website from my smartphone – only to find that it was not a mobile-friendly site.

In the flutter of activity to update businesses to the digital age, I think most digital marketers/designer/developers have not sufficiently defined “responsive design.” There are a lot of high-level, technical resources about this topic but in today’s blog post we are starting with beginner’s overview in hopes that the non-technical business owners have an understanding of this increasingly important topic.

What is Responsive Design?

Because of the number of screen sizes websites can be viewed on, developers created a way that website layouts are flexible and adjust to the screen size and orientation of the user. A responsive website can be viewed on a smartphone without having to scroll horizontally to view all of the content or zoom in to read the text – but that same exact website can be used on a large desktop computer. Without the creation of responsive design, a separate site would be needed for each screen dimension, orientation, and possibly browser.

Why is Responsive Design Important to You?

It is important to your customers

What Kathy didn’t realize is that her static website is the root of a negative experience for her users. For someone like Kathy whose website is her business, user experience should be of the utmost importance. Is your website a virtual brochure about your services or products? No. The answer to that question is always no. A website is the most powerful sales tool. It can strategically walk a customer through the buying process – agitating their problem, providing the solution, addressing their questions, evaluating alternatives and more. Usability is extremely important to your users – even if your business is more than a website.

It is important to Google

The goal of search engines, such as Google and Bing, is to provide the most accurate results to its users. That is how search engine companies stay in business. Google noticed that more and more users were conducting searching from their smartphones. Sticking to their mission, Google did not want to provide a list of websites in those results that the mobile-searcher would have trouble using. Enter Mobilegeddon: the term coined by the digital marketing industry to describe the huge algorithmic changes Google decided to employ. Websites with responsive design are being prioritized by Google and ranking higher in results listings.

How do I know if my site is responsive?

A great place to start is by accessing your website on a desktop or laptop computer. Grab a corner of the browser window and drag it to various sizes. The layout should adjust to the size of the browser window, the elements may stack on top of each other vertically, and the site does not get cut off – that means your site is responsive. Note: this isn’t the most accurate way to test your site for various devices – but is a quick way to gauge overall responsiveness.

You can also try testing your url in

This Google Search Console tool will check your site on a mobile device and test various aspects that affect usability at that size. If your site doesn’t match up, it lists reasons why your site is difficult for mobile users to navigate.

Telltale signs your website is not responsive:

  • You have to scroll horizontally to see the entire web page
  • You must scroll horizontally or zoom in order to see the main menu and/or select the button/link you want
  • Parts of your website are cut off when viewed on a small device
  • The website takes a long time to load on your mobile device

Are “Responsive Websites” just a fad?

No. The number of devices that can people use to surf the web continues to rise. Users expect websites to be easy to navigate on their phones/tablets/etc. Responsive websites are not the only solution to this issue – but for now, I think they are the most affordable solution for small business owners.

Mobile first vs responsive

Maybe you have heard the term “Mobile First” when it comes to an approach for designing a website. This approach starts with the design of the mobile version first, making a mobile user the highest priority. User flow, site load speed, navigation, touchpoints are considered first during this phase where they tend to be afterthoughts for a desktop-first approach.

What approach does Pine & Pixels take?

A combination. When the content for a website has been determined, the next step in website layout. In the Pine & Pixels process, the desktop and mobile layouts are created during the same phase. When considering a mobile design:

  • button sizes are adjusted based on the screen size, making it easy for users to navigate on mobile devices.
  • non-essential images and effects are removed to promote fast site speed.
  • navigation will adjust to the screen size
  • telephone links are put in place so mobile users can place a phone call with a single click

Most importantly: analytics, audience and editable layouts

Whenever possible, small businesses and their web designers should base the design/approach on statistics about the audience and their web habits. More often than not, obtaining such information through a professional research company comes at a high cost. In order to maximize the budget of a small business, I suggest that web designers take a combination approach (a responsive design that leans heavily towards mobile design) during the beginning stages and builds the website on a platform that allows for easy editing. The website should begin collecting user analytics as soon as possible. This allows for changes to be made on the existing platform. For example, if the analytics reveal that 90% of users are accessing the website on their mobile device because they are coming from links on social media, then changes could be made to improve this user flow since it is the one the majority of users are taking.

The Takeaway

  • It’s more than likely, your website will need to cater to mobile users in the coming years.
  • Get to know your audience as much as possible and learn their online habits.
  • Even if your website can be accessed on a mobile device, it may not be mobile-friendly or responsive.
  • Make sure your site is built on a platform that allows for easy editing so that you can test and modify your site as needed.

Learn More

Receive updates and exclusive design tips!

Please enter your name.
Please enter a valid email address.
Something went wrong. Please check your entries and try again.

Tools We Recommend

*Some are affiliate links but we only recommend products we use and love!

You might also enjoy these...

How to Increase Sales Using What You Already Have
Why is My Graphic Pixelated?
Make Your Business Look More Professional with These 5 Budget-Friendly Tips

Pine & Pixels is a branding and website design studio currently based in Florida and serving small businesses near and far. M-F, 9-5 CT

Copyright © 2021 Pine and Pixels L.L.C.  | Privacy & Legal

Scroll to Top