VeryTextual.com / Blog

Responsive Design

November 9th 2015

Our first website UpsideDownText.com was launched before responsive design had really taken off. Back in 2009, CSS3 was still a draft. The iPhone had been released, and mobile websites were gaining traction, but a single webpage that actually contoured to the width and height of the browser was still, well, cutting edge.  For UpsideDownText,com, we used a simple desktop-optimized layout with no real thought for smaller screen sizes. The rest of our website portfolio used this layout as a base. As it stands today, all of our websites look terrible on a phone (or even tablet). We’re sorry!

It’s 2015 now, and a mobile friendly UpsideDownText.com is far overdue (as is a mobile friendly Bubble Ball Text, Zalgo Text Generator, etc).  The most straightforward approach would be to develop a website for a phone (and tablet) and then re-direct the visitor based on the type of device being used (phone, tablet, PC).  This approach of course has its shortcomings. As the dimensions of phones approach tablets (Galaxy Note) and dimensions of tablets approach laptops (iPad Pro), the type of device matters less and less. It’s no longer sufficient to build websites for a discrete set of screen sizes.

Enter responsive design. VeryTextual.com was built as a sort of experiment in using responsive CSS techniques. We tried to make it as pure-responsive as possible avoiding the use of even CSS media queries (which are used to apply different styles based on a property like screen width). The dimensions of a block of text and of the spacing between such blocks on VeryTextual.com is variable, determined in part by browser width and height along with an absolute minimum.  As the browser window grows (phone to tablet to desktop), elements on the page grow and spread apart to make use of the increased white space. As the browser window shrinks, elements too shrink and squish together to prevent unnecessary horizontal scrolling. VeryTextual.com looks great and is fully functional no matter what device you are using and no matter how big or small that device is (within reason of course!).  Over the next few weeks, we will be transitioning our whole portfolio of websites to responsive designs modeled after our experiment on VeryTextual.com. We hope you like it!