Conversations between code

“Why does responsiveness even cause such a stir in web development?” I hear you cry. Responsiveness refers to the ability of a web page to adapt to fit the form in which it is viewed – whether that’s a 40″ television or a 4″ smartphone, portrait tablet or landscape desktop, the term has become increasingly more important recently. In fact, Mashable named 2013 the “year of responsive web design” (Cashmore, P., 2012), and it shows unequivocally if you take a look around your virtual self – websites aligned left, right, and center have gone under the coder’s caret and made to play nicely with the myriad of new screen resolutions on the market today. Tablet sales are expected to continue to rise even more so than they already have (International Data Corporation, 2011), and web designers need to respond promptly or risk losing out on a significantly large, and growing, portion of the media consuming audience.

Responding to responsiveness

Of course, I made responsiveness a priority when designing my site and for the most part everything has turned out ok after a long and painful journey. Initially the main issue was keeping both the left and right elements at the same length, for balance and continuity on the splash page. However, when “solving” this problem to begin with by converting element dimensions to be rendered using percentages and vw/vh units, a new problem was created by elements stretching to fill the viewport – rightfully so as I had instructed them to behave in such a manner after all, however this did not work with the design. It was not an issue for the title on the left hand side, although caused a problem for the boxes on the right as they were designed with an equal aspect ratio in mind. After experimenting with various workarounds and serious considerations regarding my worth as a problem solver overall, I found that the best workaround would be to create a wrapper around the whole area that needs to be kept at a particular aspect ratio, and create padding at the bottom accordingly in order to force the aspect ratio when the viewport is resized. Aspect ratio could not be implemented natively in CSS as far as I am aware due to the lack of variables that could be used for such a thing – the only other methods involved Javascript which I did not feel comfortable using at this stage, plus it was a simple design problem (seemingly) and I wished to keep my code concise;

.aspectwrapper {
        display: block;
        width: 100%;
        position: relative;
}

.aspectwrapper::after {
padding-top: 56.5%; /* percentage of containing block _width_ */
display: block;
content: '';
}

Obviously after solving this I had enough issue to solve, which was the way text behaved inside the boxes. This was, luckily, short lived however. I learned there was a fairly common bug in browsers that meant the text was not resized until the page was refreshed, so I used a Jquery code snippet that essentially rendered the font again when it detected the viewport had been resized. This was preferable to refreshing the whole page obviously as the user would not lose their scroll state or wonder why the page refreshed upon a viewport resize, becoming confused and deranged as a result.

               <script>
                       $(window).resize(function() {
                       $("h4").css({ "font-size": "2vw" });
                       });      
               </script>

 

Sources:

International Data Corporation, 2013. Worldwide Tablet Market Surges Ahead on Strong First Quarter Sales [online], 1st May 2013. Available from: http://www.idc.com/getdoc.jsp?containerId=prUS24093213 [3/12/2013]

Cashmore, P., 2012. Why 2013 is the year of responsive web design [online], 11th December 2012. Available from: http://mashable.com/2012/12/11/responsive-web-design/ [3/12/2013]

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s