I need some responsive website design around here

June 22, 2014

For reasons that involve increasing usage and lowering costs, work got an iPad Mini and I wound up as its holder (it may shock you to know that we didn't really have any tablets around before this). One of the things I've done with it is look at websites, including Wandering Thoughts. In a way this is unfortunate, because now I really want to redesign Wandering Thoughts to be responsive. What I really mean by 'responsive' here is that I want the sidebar to go away on small screen devices.

(Well, the sidebar should go down to the bottom. I don't want it to go away entirely.)

The iPad Mini is small enough that screen real estate is at a premium on websites. If you use it in vertical mode, you don't have room for anything apart from the content text; if you use it in horizontal mode, well, you sort of have room for a sidebar but not really, and anyways you'd rather read vertically because that's more text and it's is laid out in a more readable way because it's narrower (in my view). I can only imagine how much worse this is on a smaller device, like a phone. This is the sidebar issue made quite concrete for me.

The problem is that I don't know the best way to do this without completely tearing the site design apart, or if it's even achievable very easily without Javascript (and I refuse to make Javascript a required thing here). Someday CSS grid layout will make this easy, whenever it's supported by most browsers (and perhaps finalized), but that day is not today. I suspect that I can't do this at all easily in regular CSS unless I start forcing column widths, but I haven't looked recently. And I'd rather not force column widths because then I'd have to read up on design to figure out how wide readable columns are, instead of my current approach of punting on it (since browser width determines column width and in theory people can make their browsers narrower or wider).

The radical approach would be a complete redesign of the look of Wandering Thoughts that permanently demoted what is currently the sidebar down to the bottom of the page even on regular browsers with lots of screen real estate. Many blogs today have taken this simplified approach but I'm not sure I like it (and I'm not sure I like the lower visibility of some things in the sidebar, like my Twitter). Still, it would solve the problem.

Ultimately design is a hard problem and CSS's current awkwardness doesn't make it any easier. This probably means the current Wandering Thoughts layout is going to stay as is, since that approach takes the least effort even if it makes me wince a bit when I look at the site on the iPad Mini.

Written on 22 June 2014.
« Sometimes 'unsubscribing' does seem to reduce spam activity
Things I like about Go »

Page tools: View Source, Add Comment.
Search:
Login: Password:
Atom Syndication: Recent Comments.

Last modified: Sun Jun 22 00:52:40 2014
This dinky wiki is brought to you by the Insane Hackers Guild, Python sub-branch.