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.


Comments on this page:

By Ewen McNeill at 2014-06-22 02:40:11:

At first glance I think your minimal requirements can be solved with CSS media type qualifiers, eg:

<style>
@media (max-width: 600px) {
  .sidebar {
    display: none;
  }
}
</style>

or:

<link rel="stylesheet" media="(max-width: 600px)" href="small.css" />

(Trivially modified from examples on Mozilla's CSS Media Queries page)

This blog post from 2010 has a bunch of examples of what you can do with the CSS media queries. AFAICT they are CSS3, which means "modern browser", but particularly for tablet/phone devices most released in the last few years should support them. And if you design your CSS with fallback to a "basic desktop browser layout" it shouldn't matter if other visitors don't support media queries (as they'll be no worse off).

Ewen

PS: double-tap to zoom item (eg, paragraph) to full screen width is a magic workaround for many many readability problems. Sadly some sites fights against that insisting that their useless sidebars must stay visible at all times :-( The iPad/iPhone browser also has "reader" button -- three horizontal lines in the sitename bar (not really a URL bar these days, as it doesn't display most of the URL :-( ) which will show just the "main text" -- available when it can auto detect what the "main text" is.

By Gabe at 2014-06-22 09:38:14:

Not a lot of suggestions from Google's PageSpeed Insights but you might want to check out their recommendations.

https://developers.google.com/speed/pagespeed/insights/

Maybe you can replace your layout table with a bunch of <div>s with the same effective structure, plus some display: table-cell (etc.) CSS properties to recreate the exact same layouting behaviour as you currently use? If that works, it’ll give you an option you currently do not have: to use non-table rendering for these <div>s in the non-desktop version of your layout by making them display: block and floating them (or whatever) in the mobile stylesheet.

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

Page tools: View Source, View Normal, 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.