Making the case for “Responsive” design

In Responsive Design by Tom RogersLeave a Comment

We are now recommending that all new websites be built using a responsive design. And if you’ve had a website online for more than two or three years, it should probably be rebuilt.

What is Responsive Design?

It’s a way of coding the website using media queries to figure out what the resolution is on the device being used to access the website. If it’s a tablet and there’s not enough room for the regular menu, it might hide the menu and replace it with a condensed version. Ditto if it’s a smartphone, in fact you can choose to hide content that might be too detailed for viewing on a small screen.

Why?

Times have changed considerably. Desktop computers now come with wide screens, and an ever growing percentage of people are using tablets and smart phones to access the web. We now recommend all new websites be responsive.

In 2014, the number of people accessing the internet via smartphones and mobile devices surpassed those using desktops and laptops. And it’s only progressed there there.

Check it out on multiple devices

This is a WordPress based “Responsive” website, and this section of the page is designed for viewing on desktops, laptops, and tablets in horizontal view. You can test it out by grabbing the edges of the browser window with your cursor, and dragging it in so you have a smaller screen. See how the menu turns into menu icon? Now if you were on a smaller device, you’d just flip it from horizontal to vertical, and it would change automatically.

Going back to the normal wide view, note how the menu changes and sticks in view at the top of the page? That’s called a sticky menu.

Depending on your screen size, the two boxes below could be side by side or one on top of another.

Box #1

Sample text goes here, sample text goes here, sample text goes here, sample text goes here.

Box #2

Sample text goes here, sample text goes here, sample text goes here, sample text goes here.

Feel free to explore the website where you’ll see lots of other bells and whistles that are built into the WordPress theme we used. Be sure to check it out on multiple devices – desktop/laptop, tablet or smart phone!

Check it out on multiple devices

This is a WordPress based “Responsive” website, and this section of the page is designed for viewing on tablets in vertical mode, and smartphones. There is a different section that shows when you view it on a desktop. You can test it out by turning the device from horizontal to vertical. In some cases, the text will change, depending on what you are using.

See how the menu turns into menu icon? Now if you were on a smaller device, you’d just flip it from horizontal to vertical, and it would change automatically.

If your screen is wide enough, the menu looks normal, and it sticks in view at the top of the page as you scroll down. That’s called a sticky menu.

Depending on your screen size, the two boxes below could be side by side or one on top of another.

Box #1

Sample text goes here, sample text goes here, sample text goes here, sample text goes here.

Box #2

Sample text goes here, sample text goes here, sample text goes here, sample text goes here.

Feel free to explore the website where you’ll see lots of other bells and whistles that are built into the WordPress theme we used. Be sure to check it out on multiple devices – desktop/laptop, tablet or smart phone!

Don’t mess with Google

Starting April 21, 2015, Google changed its algorithm making it so that search results would be catered to the device being used. So if your customer is using a smartphone or tablet, they will get results catered to that device (responsive or mobile ready websites).

This was referred to as “Mobilegeddon”, as many feared their hard earned standings would decline unless they updated their website to be responsive. Bing (Microsoft’s search engine) soon followed suit.

Leave a Comment