Health IS Technology Blog

Keeping Things Responsive In CMS


Responsive means mobile-first

When web developers refer to a site as being “responsive” it doesn’t necessarily mean it’s fast (though we certainly do hope so) or that it has an advanced AI that will answer your phone calls or emails immediately. What it means is that it “responds” to the size of the browser window and maintains a layout that is both attractive and readable to the end user. The difference between a responsive website and one that isn’t comes down to the experience on our tablets and/or mobile devices. Unlike older sites that were “fixed” or “static”, a responsive site will never force us to zoom in or scroll left and right to read a paragraph. The only scrolling that will happen is up or down, the fonts are at a size that we can read clearly, and the navigation is condensed, freeing up more real estate for the actual content.

Responsive sites look a little different on a mobile phone than they do on desktop, but all the information is there, it’s just shuffled around to fit inside that tiny screen.

Responsive web design (RWD) is an approach to web design aimed at crafting sites to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from desktop computer monitors to mobile phones). – Wikipedia

If you want a good example, lets do a test. Shrink your browser window to be long and narrow, then load any website to see if it’s responsive. Based on what I’ve written, did you see it transform to fit the browser, or is it forcing you to scroll left and right to read?

Here’s an example using the NEW responsive, Health IS website versus the old:

Responsive site versus a non responsive

As you can see, the new Health IS allows readers to get information easily on devices of any size.

Mobile-First…

Most of the time when we build a responsive website, we are strongly considering mobile-first. Some of the best practices with laying out a mockup for a new website is to mock it up the way it will first look on a mobile device. We can then mock up another for what it looks like on tablet, and then finally on desktop. Fluid, responsive websites will shuffle and grow/shrink it’s elements whenever we constrict our browsers. Fluid is a good looking path to going responsive but there are more rigid css solutions that snap things in place based on the size of the window.

Designing mobile-first means that the developer cares about the look and feel of the page on a mobile phone. When we approach responsive from a reactionary standpoint (breaking and re-configuring an old unresponsive site to have responsive elements) we have little control over the mobile design. The downside to this is that we get text and images that look like they were “made” to fit within the smaller area, versus a design that looks as if it was made to work on mobile phones.

Author’s note: An example of a fluid responsive site is our own Doctors of USF home: http://health.usf.edu/doctors/ (actively shrink your browser and watch the elements shuffle themselves around to remain attractive). It’s web sorcery!

So, the next time you hear the term “responsive” you will know what it means… right? It makes life easier for the phone browser (like yours truly) and is a mighty asset to any company with a decent market-share of mobile users. Responsive design makes the process of searching and finding information easier, it clears the path to sign-ups, finding a number for the University, or filling out a form. It is the way of things in our very mobile world, and this is why it is very important to understand it.