What Is Responsive Website Design?

When mobile devices first grew in popularity, web designers needed to provide better viewing experiences on the tiny screens. The best solution was creating a separate mobile site.

But then additional devices with varying screen sizes and resolutions began hitting the market. Designers saw how impractical and costly it would be to create different versions of a website for every device/size — and due to the rapidly changing landscape of technology, realized it would be practically impossible to keep up.

As the world of web browsers and electronic devices grew, changed, and improved, consumer expectations also changed.

Consumers today expect to be able to browse the internet as easily on a tablet and mobile device as they can on a desktop computer — and they expect to be able to do it at portrait or landscape view, on any device, and sometimes they don’t even have their browser window open to full size!

Responsive Web Design Delivers The Solution.

Responsive Design Is A New Way To Think About Web Design

A responsive site is designed to respond to, resize, or adjust itself based on user behavior and the viewing environment (type of device, screen size, resolution, orientation).

So instead of creating a separate mobile site to work at one size, the entire website is designed and built using flexible, fluid layouts that adjust and resize at specific “break points” or sizes. Think iMac, MacBookPro, iPad, iPad Mini, iPhone and all the hundreds of other devices in between.

Responsive Design Is More Affordable

As I mentioned before, when the first mobile devices hit the market, the common approach was to create a main HTML site and a separate mobile version of the site. In these cases, businesses has to basically invest in two different versions of the same website.

Can you imagine how expensive this could get when you take into account all the different device types and sizes on the market right now?

Now on the other hand, with responsive design, your web designer or developer is creating one, flexible website that adapts to different browser sizes automatically. This is a much more cost-effective solution (that doesn’t mean cheap), provided they are starting with responsive design in mind from the start.

At Bourn Creative, responsive design is a standard in all of the websites we design and develop — and the considerations for responsive design and how a user experiences the site are taken into account as early in the process as possible, often before we even begin designing the site.

Responsive Design Makes Your Content Looks Great

With a main website and a mobile site, there are only two platforms where your site will perform optimally and give visitors a great experience using it. But with a responsive website, your site will be easy to use and your content will be easy to consume on all devices.

Investing in a responsive website means:

• Readers won’t have to squint or pinch and zoom to try to read one of your blog posts, instead it will fit nicely in the browser window and be easy to read
• Visitors won’t have to sideways scroll to view images that don’t fit in the window, because the images will adjust to the device/browser size
• Users won’t get frustrated with an almost impossible to use navigation bar, because your navigation will change based device/browser to ensure users can move through your site with ease.
• Content won’t be missing or unavailable for mobile visitors, because they are viewing the same site as those on desktops

Responsive design won’t solve user experience issues perfectly on every device available, as there are more than 300 different device sizes, but it will improve it on as many as possible. Responsive design will also help future-proof your website against any new device sizes that may be released — and no one wants to invest in a site only to find that it must be redone in a year or two!

Note: A non-responsive website still works on mobile devices, it just gets shrunk down super tiny, so you need to “pinch and zoom” to read the content or click a navigation menu link, or scroll left or right when zoomed in to access the sidebars, etc. This makes it very difficult to use, and most visitors will just move on instead.

Responsive Web Design Examples

Here are seven examples of responsive web design in action. Each one of the examples below are custom designed, HTML5, responsive WordPress websites with retina support for all theme images by Bourn Creative. You can see more examples of responsive WordPress sites in our design portfolio — and if interested in learning more about Bourn Creative can help you, send us your project details.

You’ll notice in these examples that the elements of the site adjust, move, and refactor themselves based on the size of the device/browser, maintaining a positive user experience, and keeping the content easy to read and the site easy to navigate.

Just Ahead

Nia Shanks

Carolyn Goodman

Wedding Entrepreneur’s Academy

Maya Smart

The Renegade Leader

Paula Onysko

Responsive Design Is The Standard

At Bourn Creative, responsive design is no longer considered an optional luxury, but a core standard in every site we build. Our sites feature HTML5, retina image support, and custom design — not to mention the fact that they are built with WordPress, the world’s leading content management system and website platform.

With WordPress powering your website, you can edit or add content, images, video, and audio, publish blog posts, create new pages — whenever you want, without having to write code, and without being reliant on a third party. This means you stay in control of your website.

Interested in having a conversation about how Bourn Creative can help you? Reach out and send us some details about your project. We’d love to speak with you!

What about you?

Are you still looking at responsive design as an optional add-on? Do you think it is irresponsible for designers and developers to still be selling non-responsive websites? Is the idea of a responsive website new to you?

If you have any questions, comments, or thoughts, I’d LOVE to hear them in the comments below!