Jordesign: We build websites to help tell your story online
Menu

Posted on 29/11/11 in Websites

A few thoughts on maintaining Responsive Sites

It’s still relatively early days in my experience of developing and rolling out responsively designed websites. One of the more recent ones, CEP Connect, was a phase 1 project which is currently entering its second phase. This is, of course, involving changes to the design of the site: the addition of new elements, and adjustments to others.

This has brought to light first hand, the impact that a responsively designed site might have on development time and cost when it comes to making changes down the track.

In the past when I had changes to make to a site it was a simple job of adding the element to the markup,  and then styling it up. Throw in a bit of browser testing to double check, but it was a pretty quick and seamless process. Adding the same elements to a responsive design complicates this process quite markedly.

Old vs New

I personally favour a mobile-first approach — so my first step after getting the markup in place in is to set up the default styles for mobile users, and browsers that don’t support @media queries. From there I work my way through the various breakpoints making sure everything scales appropriately and looks correct on the way to the largest @media query. Then the final polishing is put into place for desktop and other larger-screen users. Then throw in some browser testing, and we are ready to go.

These extra steps are not a problem — they are actually quite important (and fulfilling) — but it is worth noting the extra development time this involves. In the same way that there is an extra time consideration for the initial design of a responsive site, there needs to be extra time allowed for it’s maintenance and additions.

A real-world example

Time for a practical example: I was tasked with adding a secondary navigational element for users who are logged into a site. A simple unordered list with 6 items does the trick and in the past some styles to get everything looking nice. At a guess somewhere under half an hour to get everything polished and nice.

By comparison, using the same markup but styling up the navigation to behave responsively like the rest of the site has come in a little over an hour in total. Not a huge difference on a small item like that, but in reality it is a 100% increase in development time, which could be felt quite strongly on larger adjustments.

Is it worth it?

My hope is that a client who understands the benefits of a responsively designed site will likewise understand the reason for, and the benefit of, the added time (and therefore cost). But anytime that money is involved, you can never be too sure.

What experiences have you had maintaining and updating a responsively designed site?

Comments

  1. Michel said

    Well, I do not have (yet) much experience with developing (and supporting) purely responsive websites, but I have nevertheless noticed that planning and developing a responsive design takes more time than a “standard” (fixed-size) website. This applies also to the time when one needs to make updates to the design. I cannot present exact figures to back up my words, but I guess, developing/supporting a responsive (flexible) design usually requires at least 30% more time. :)

    30/11/11 at 11:32 pm

  2. existdissolve said

    Worth it? If you can con the client into paying you for it, of course it’s worth it…getting people to pay for superfluous stuff is always a boon.

    However, if you’re NOT getting paid for it, it’s not worth it. At all.

    5/12/11 at 12:17 am

  3. fjpoblam said

    The fellow (client rep) who coordinates website updates for one of my clients simply doesn’t care about the mobile-friendly aspect of his website design. In fact, he resents having to think about it. But the reality is, most of his website viewers often use mobile devices to visit the site. (It’s a non-profit site oriented more toward members than “the outside world”.)

    So, yes, I spend a *lot* of time doing just what you describe. I have an iPad, and test via dummy folder on my own site before going live with the client’s stuff. Especially with this client’s older population, it’s important to make the site very legible and easy to use.

    5/12/11 at 1:37 am

  4. Caroline said

    This is interesting. I agree that updating a responsible website must be more time-costly. But in the case that it was designed this way to replace several versions of that same website (browser, mobile, tablet), I would be curious to see if it’s not faster than adding the markup 3 times, and styling it 3 times. Sounds like this could be a improvement in that particuliar case.

    5/12/11 at 1:37 am

  5. Thomas said

    I like the mobile first-approach (“set up the default styles for mobile users, and browsers that don’t support @media queries”) but does it mean Explorer users will see a very basic version of your site?

    5/12/11 at 5:16 am

  6. David Y said

    I have noticed it does take a slightly longer time during maintenance, however the overall time it would take to update a site if it had two different versions to add in a particular function would be way greater.

    One way to minimize maintenance times would be to plan out each new scope and identify what is required for each step to work out smoothly.

    Thinking back on how much time building a responsive site saves upfront in developing a site for browser, mobile and tablets, the extra time it adds in later down the line for the most part balances things out.

    31/12/11 at 5:27 am

Leave a reply

Work With Us

We’d love to work with you. Why not let us know a little about what you have in mind?

  • This field is for validation purposes and should be left unchanged.