Finished and released latest system enhancements at work. The idea is to make our cms-built sites mobile friendly, and overall, it was a success. But there’s a lot more work to do.
I’m still pretty new to the webdev world, and was in the ‘if tables work, why not just use them for layout’ camp. Out system, originally coded in 2003, depends heavily on tables for layout. The limitations of tables as layout, however, becomes very clear when trying to retrofit for mobile devices. Tables do not seem to play well on phones at all.
I briefly tried floating divs, but it just wasn’t working quite right. Using display: inline-block; in addition to setting percentage widths for each column seems to work quite nicely. I still find that I’m leaving a gap of 2-3% to account for margins, but it looks pretty ok (not willing to go any higher with the praise than that…). A simple media query at phone width to switch the width percentage for each to 100 ensures a nice flow on both full size and phones.
Of course, there’s still a lot of work to do removing tables from the basic structure of the cms system. And many clients have gone off and used tables on their own sites for layout, so we will have to work with them to best get the look they want but also allow for mobile responsiveness. Oh yeah, and we abused the !important declaration way too much. It’s some ugly code, but was necessary to override the inline code inserted by the cms system.
It’s not pretty code, but it’s a pretty ok start.