Q&A About Responsive Design

– Robert Kruger 15 September 2015

I saw an email fly by last week between one of our developers and one of our clients. This particular client has been with us for quite a few years, so their websites are not built in the current best practice of responsive design.

In case you haven't heard about responsive design, it is an approach to HTML/CSS coding that dynamically adjusts web page layouts to make the best use of the available screen real estate for all window sizes. That means that the same website will look different on a laptop and a smartphone. This is a great way to imrove the user experience for the mobile web audience. It avoids all pinch-and-zoom, it makes the nav easy to use with a finger, and much more. Google now looks for mobile web presentation, and if a site does not optimize the mobile experience, that site drops in search result rankings on mobile search.

We have been busy updating our clients' sites since Google changed to this new strategy in April. The conversation below was meant to clarify how the conversion to responsive design works. I removed specifics about the client's site out of respect for their privacy (even though they gave us permission to publish this conversation). I have added a few comments [displayed like this] to clarify the details of the project.

Q: Once this is implemented, will we run into trouble with the responsive formatting when adding new content?

A: So long as the new content is within the existing list configuration (e.g., adding additional products to your catalog, etc.), this shouldn't be an issue. The changes we will make will be to the templates that your content gets displayed in rather than the content itself.

Q: Can you show an example of a site that uses the Adapt.js for their responsive functionality? I would like to compare Adapt.js vs Bootstrap. [We were discussing these two approaches to converting the client’s site.]

A: You can check out www.otool.com and www.killebrewinsurance.com to see examples of how we apply the Adapt.js library.  Note that in each case we have kept the look and feel as consistent as possible, while maintaining the usability of the content.  For Bootstrap design, check out www.collettre.com and our own www.dialogs.com.

There are a couple of primary differences. The Adapt.js approach uses your existing HTML/CSS with minimal changes whereas the Bootstrap approach is to use Bootstrap-style HTML/CSS conventions for laying out elements on a page. To convert an existing site to Bootstrap essentially means rewriting the HTML/CSS code from scratch using its rules. This means that Adapt.js takes much less time, because we're working from existing code.

On the other hand, Bootstrap layout elements are inherently designed to be responsive, so they tend to have more consistency across multiple sizes. They also tend to look more polished on smaller screens because building with Bootstrap code means you're designing for mobile first.

That said, we have found the Adapt.js approach absolutely sufficient to make existing sites look good when viewed small.

Q: What kind of time would be reduced if we dropped the pop out video behavior? [The site currently has YouTube videos that display in pop-ups throughout the site.] 

A: Dropping the pop-up videos might reduce the level of effort by our developers. We would recommend displaying video inline when possible; however, depending on the device, the user will get varying results (e.g., on my android phone, the video wants to open in the YouTube app).

Q: How will forms look and function in  the responsive variations?

A: As you can see from the examples above, forms will be adjusted to accommodate the screen size. Generally, for smaller screens, the forms get simpler by stacking the fields in a single column going down the page.

You probably have questions about responsive design. We have the answers. If you'd like to talk about it, feel free to give us a call at 800-707-0106 or use our Contact Us page.