The Responsive Retrofit

Task: Make the Hybrid Leviathan Theme Responsive

My site uses the Leviathan theme and I wanted to make it responsive. Why? Because the text is too damn small to read on my phone!

The problem with approaching a regular design and trying to make it responsive is that you spend your time squeezing stuff, or trying to take non-essential things away. Luckily for the sake of a simple blog there are basically two columns - one with high-priority primary content and a second or more of lower-priority secondary content.

The Approach

My approach in this case was to leave the full width desktop version alone. Then between the outermost and second-most outer breakpoints allow the columns to scale percentage-wise. This will squeeze the columns proportionally until I have decided it’s not reasonable to show two squeezed columns side-by-side at which point the secondary-content is pushed below and both columns become full-width. At an even more narrow breakpoint I hide things from the secondary column that were pointless in that view.

This seemed to work well, however there are a few gotchas to remember.

  • Images - when these are output they normally have a static width and height on them, those should be removed with a max-width applied to images so that they scale with their respective column
  • Rich Content (Videos/Embeds) - These also have a static width and height. I tried scaling them in CSS with mixed results. If you have rich content you need a better plan, luckily I don’t care that much if it’s janky on small screens so long as the majority of content is fine.
  • Header height - The header of your site and the margins between the elements can cause visitors to scroll a lot when on smaller screens, adjust accordingly.
  • Hover - You can’t hover on a touch screen! We have gotten used to doing things on hover, but to support touch screens we need to break that thinking

Final Thoughts

If you want to do responsive you should plan for it from the beginning with the most essential items available in the smallest layouts, design interactions without hover, etc. For a simple blog like this one it only took 4-6 hours to get it acceptably responsive… but for a major business or association with a complex homepage responsive might not even be the right approach. I still have more to think about as I haven’t done this a whole lot, but for now I’ll leave you with the CSS additions I made to make the Hybrid Leviathan theme responsive.

Final Result