How to Build a Responsive Website

Do you want a responsive website? Good call.

55% of people are accessing information on the Internet from their cell phones rather than their desktop computers.

In fact, starting in the Spring of 2016, Google began penalizing sites for not being mobile-friendly or having a responsive design.

If you’re ready to embrace responsive design there are a few ways you can go about achieving it. You can:

• Select a responsive design on WordPress (if your site is set up on it)
• Employ an agency and/or designers to do it for you
• Take your knowledge of HTML5 and CSS and get to work

What is Responsive Design?

Responsive design allows the content and design of a site to “flow” to whatever screen it’s being viewed on from tablet to smartphone, from laptop to desktop computer. In the days before responsive design, when you went from one screen to another you’d see text cut off, inoperable buttons, and many more issues affecting the usability. Today, website visitors are looking for a seamless experience and often view the same information from multiple screens at once.

Need help with your redesign? Check out the Best Practices in Responsive Web Design Techniques.

Keys to Responsive Design

We’re going to assume you know how to do the heavy lifting like the coding and the design. If you don’t, you can hire someone who does or you can select a theme (in WordPress) that is already responsive. But with all responsive design, there are key components to remember as users access your website from multiple screens. Make sure you create with the following things in mind:

• • Hyperlinks or Buttons

Avoid in-text hyperlinks. On tablets and phones, these can be very difficult to click on without clicking and zooming in. This is distracting to the user. Instead, employ buttons. They are easier to see and give instantaneous access to the desired information. As opposed to zooming in and then clicking and hoping you clicked the correct hyperlink and not one nearby.

• • Use Fewer Complex Icons

The smaller the screen, the less appealing an intricate icon will be. Instead use bold, basic graphics. Detailed patterns and small intricacies will not translate well onto a smaller screen.

• • Embrace Fluid Grids

Your design will work a lot better if you’re using fluid grids and images. When it comes to images you can hide portions of them; create composite, sliding images; and use images that scale with the layout.

• • Keep Forms Simple

No one wants to fill out complex forms on a phone. Keep the information you request in online forms to a minimum. You can always request more information down the line.

• • Use Standard Fonts

There are two reasons not to use crazy, creative fonts. #1: they could be hard to read and #2: before someone can view them on their system, Google must download them. On a mobile phone that could add seconds to your site opening speed and no one wants that.

Creating a responsive website takes some work and it’s not something a novice should undertake. Talk with a professional about what your current site needs to make it responsive to a variety of screen sizes. You and google will be glad you did.