Skip to content

Responsive Web Design

by Kate Burke

The term refers to a website that responds to (displays correctly on) any type of device you choose to use.  It’s fluid and flexible. Basically, this means a site that works on a computer will also work equally well on a mobile device like a phone or tablet. (Or whatever communication device somebody dreams up next.)

responsive example

In the broad sense, this means you purchase or download a “free” website design template, or hire someone to design one for you, that has responsiveness built into it. It’s all set up for you, should work on most any device, and although you can make a few “custom” changes like font style and color, choice of social media links, page width (to use or not use a sidebar), for example, the design is pre-defined.  It may require a little “front-end” programming (simple code changes) so that your website will look more like the way you want it to.  You input your data, publish the site, and you’re online.  Web design is all about how the site looks.

To get to that point, however, a web developer has to develop the template or program with the emphasis on how it works.  This is what gives you a responsive website, and it requires a lot more complex programming, the “back-end” programming that determines site functionality; i.e., how it works, more than how it looks.

A responsive website will visually rearrange itself on the device’s screen to fit its parameters. Desktop computer (or laptop), menu (with words) on top linking to pages of main content, some or all with an adjacent sidebar, and maybe three or four bottom link boxes. On a skinny phone, however, the menu may be little stacked lines, not necessarily at the top. The main content usually displays on top, followed by sidebar content stacked below, and those footer items way down there. A tablet display is usually somewhere in between.

The site design template will then update or be updated automatically (by the purchase source or the person who built it for you) to accommodate whatever updates the software requires and whatever new devices are coming down the road.

Template designers are software designers. They deal in visual, virtual reality.  Realtors® deal in dirt.  They sell land, generally with real-time, visible structures on it.  The property a Realtor® shows you won’t change when you look at it, depending on the device you use to look at it with—like out the car window, through a camera, or up close and personal with your own eyes.  But the website promoting it will change—look different, depending on the device you choose to look at it with.  On a computer it’s pretty much all one page, up front—pictures, description, sale details. On a phone, you may have to scroll way down to find most of the details.

The development of your site has to be responsive to the device displaying it, and your website design has to be visually pleasing and tell your story in an attractive and compelling manner.

Want to learn more about how this all works, and how you can harness the power of a responsive website?  Join us Thursday, April 20, 9-11 am at the MAR building, for a class on Responsive Websites—what are they, how do they work, how do they work for you!  (Pre-registration required.)

Related articles

Web Design Vs. Web Development: What’s the Difference?

What is a web developer?

Responsive Web Design: What It Is And How To Use It