Disquiet.com 3.1: Now Mobile/Tablet-Friendly

Details on the newly responsive design, and other tweaks

The Disquiet.com site has this week experienced its first major design revision since December 2011 (“Welcome to Disquiet.com 3.0”). Consider this one as version 3.1. If you’re reading this on a laptop or desktop, or on a large-format tablet, most of the improvements will be initially invisible. The majority of the update is focused on mobile phones and smaller-size tablets.

Among the major improvements:

¶ Below left is what the home page of the Disquiet.com website looked like on a mobile phone (in portrait mode) before the new design was implemented, and below right is what it looks like today.

Much if not all of the site was essentially illegible on a phone, since it was simply showing the full desktop/laptop view on a tiny screen, requiring continuous zooming and panning and scanning, like an old widescreen flick reformatted via pan and scan. Now the site resizes and rearranges its various sections depending on the screen on which it is viewed. For smaller tablets and for mobile phones, the left sidebar material scoots down to the bottom of the page, and the home screen only displays one full post at time, presenting the earlier posts with header and subhead. This design approach is called “responsive design.”

¶ In phone/tablet view, when the sidebar shifts to the bottom of the screen there’s one column of information in the phone size, and two columns in the tablet size.

¶ Thanks to the responsive-design mode, there’s just one URL per article — there’s no “m.disquiet” or “.com/mobile” version to confuse matters. And each page loads once, so if you rotate your mobile phone from portrait to landscape and back again, the design should adjust in your browser accordingly.

Additional minor touches:

¶ There’s been a further winnowing of typefaces. There are, aside from the logo and the display face, just two typefaces, and each appears in only two sizes and three colors (black, grey, blue).

¶ Pages that result from category view and tag view are noted as such up top above the first post in the return.

¶ Speaking of tag view, I’ve retreated from the term “topic” and acknowledged “tag” as the near-universal word for taxonomy. This is a situation in which the site’s design was catching up with its content, as I’ve long championed the idea of tags, especially as an improvement on the mistaken concept of genre. I just hadn’t implemented that thinking here.

¶ Subhead descriptions of categories appear on the category view pages (i.e., “interviews” brings up the phrase “Talks with musicians/artists/coders”).

¶ Comments have been fully overhauled. The design is much more clean, and there’s no longer any pre-screening moderation of comments. If you do write something obnoxious or off-topic, I’ll delete it, but I’m no longer reading each comment before posting. The problem in the past hadn’t been overheated conversation; it had been spam, and a handful of plug-ins and an in-page math test have fixed that (at least for now).

¶ Bullets for list pages, like the weekly automated summaries of twitter.com/disquiet, now fit in the confines of the body copy of a post, rather than sitting oddly outside the grid.

There will be some refinements in the coming weeks (especially in the loosely defined “smaller tablet” zone), and I’m looking at various additional plans, like possibly adding a discussion forum. This week’s design improvements cap a series of recent additions to the site, including Instagram sidebar implementation, and sidebar spots as well for upcoming events and for Disquiet Junto projects. Major thanks to futurepruf.com, which also produced the December 2011 refinement of the longrunning Disquiet.com theme.

2 thoughts on “Disquiet.com 3.1: Now Mobile/Tablet-Friendly

  1. The right hand edge of the main blocks of text are getting cut off on my browser. I’m on Windows 7, firefox13.0.1. Zooming in/out doesn’t fix it. Let me know if you want a screenshot.

Leave a Reply

Your email address will not be published. Required fields are marked *