Future Responsive

The mobile web’s market share is growing as a bigger and bigger part of the overall web every year. Because of this, more and more organizations are recognizing the value of responsive web design. However, not every organization is ready to go responsive right now. Fixed width sites don’t translate into cheaper sites to build necessarily, but there are other priorities that may override responsive when building a site. But you can set up a site to easily go responsive when you’re ready, which can mean easier changes in the future.

It’s common for organizations to recognize that they want a responsive site but they want to push off that work into a future sprint. There are other things to account for when thinking about going responsive; team learning curves to account for the variations in screen sizes and touch devices take time, and when it comes to a site or application, so right now may not be the time to go fully responsive.

The reasons may vary, but as a responsible front-end developer in this position, what can you do to build your website today so it will be ready for the transition to responsive tomorrow?

We do it by building a responsive website and then breaking it. You have a design with fixed widths that must be implemented faithfully today. In the future, you would like to migrate your website to use a responsive design, which means the content will be flexible and conform to a wide range of device proportions. Ideally you would like to accomplish this without having to throw out all of your existing CSS and HTML. If you were to write everything in fixed pixel widths, you’d need to convert it all, the CSS you write now wouldn’t be useful once you are ready to go responsive. But there is a way to prepare for a responsive site now, so that your CSS written today is still useful in the future. What is the “responsive algorithm”? The algorithm is some math, target / context where target is the width of element you are styling. The context is the width of the parent element that contains your target. Using this algorithm you can calculate the percentage width of any element on your page should be. This means that when you are looking at a comp done in Sketch or Photoshop, you are able to figure out your widths by doing the math, some division moves you away from the fixed pixel width and into the responsive world, ever so slightly. Example If you have a design that is 940 pixels wide and it has a sidebar that is 280 pixels wide and a main content section that is 660 pixels wide. You can set

<div class="container">

    <div class="side-bar">...</div>

    <div class="main-content">...</div>

</div>



.side-bar {
  
    /* 280 / 940 = 0.29787234 */
  
    width: 29.787234%;
  

}


.main-content {

    /* 660 / 940 = 0.7021276595 */
  
    width: 70.21276595%;
}

This pattern can then be repeated for the children of these elements. For example if your main content section has a logo that is 70 pixels wide and a headline that is 590 pixels wide.

<div class="container">

    <div class="side-bar">...</div>

    <div class="main-content">

        <div class="logo">...</div>

        <div class="headline">...</div>

    </div>
</div>

.main-content {
  
    /* 660 / 940 = 0.7021276595 */
  
    width: 70.21276595%;


}


.logo {

    /* 70 / 660 = 0.106060606061 */
  
    width: 10.6060606061%;


}


.headline {

    /* 590 / 660 = 0.893939393939 */
  
    width: 89.3939393939%;
}

Then, to make it a fixed width, you just add one more line of CSS:

.container {

    width: 940px;
}

We can keep using the responsive algorithm to figure out the width percentages for every element on the page. Because the container element is fixed all of the child elements will also be fixed. However, in the future, when you are ready to make the site responsive you can remove the fixed width on the container element and then the site entire site will become fluid. This will get you 60% of the way to your mobile site. All that is left is to identify breakpoints where your current design does not work and introduce some css media queries to add new styling for the page below those breakpoints.

That’s it. That’s how you think future responsive when working on a project where you aren’t going fully responsive quite yet. In this approach we aren’t considering breakpoints or using media queries, we are simply using the ideas of responsive web design for the fluid layout and then constraining the width to mimic the fixed width design.

There still work to be done when the organization decides to go fully responsive. Design will need to consider how content will flex and flow across screen sizes. But by making the main layout fluid to begin with, you’ve already started down the road, so when you add in media queries, you can fully flex the power of your the algorithm you’ve worked with up until this point.