Responsive Layout in a Day (17th May 2012)

Responsive layouts, in practice, are still based on arbitrary assumptions about common px widths and how that relates to text size. Just like the fixed-width websites before them.

Having said that, I’ve now applied a single Media Query section within my stylesheet for Project Cerbera and also for Site Surgeon. This simply cordons off the multi-column aspects of the layout for devices narrower than around 800px

Took about 8 hours for each website, as I experimented with Site Surgeon to find how this works in the wild.

You Also Need <meta name="viewport">! (23rd June 2012)

By default, Internet Explorer on Windows Phone assumes every page is 1024px wide. That means a % layout will be laid out across 1024px and then zoomed out, making the text seem miniscule!

To avoid this I had to add the “viewport meta tag” to say “100% means use the pixels you’ve actually got”. A bit annoying and an ugly value syntax but easy enough to add: 

<meta name="viewport" content="width=device-width">

IE10 proposed to move this into an @viewport rule, which is even sillier. It should be introduced to CSS4 Media Queries. (CSS3 Media Queries is already a Recommendation and cannot be changed.)

Why Media Queries?

Media Types, the age-old good solution, has been ignored by web authors and UA implementors alike. As with so many good CSS techniques, it was drowned out by medicority and websites authored by control freaks.

Why 800px? It’s an arbitrary threshold based on what produced sensible results in a handful of devices used by myself and the people around me at the time. Which, given past history of new techniques, is probably far better researched than the upcoming mainstream of Responsive websites.

I’ll also take this chance to LOL at all the ‘responsive’ websites which require heavy Javascript libraries to churn through a bunch of tests at every page load, before giving the browser any CSS. These files get cached, sure, but the tests run every time.

Why Media Types are Better

Imagine the 10 most relevant staff at each vendor pairing of mobile device and browser. They can optimise the experience they provide for their millions of users by selecting which of the following 3 profiles best fits the current user’s context and habits:

handheld
if the screen is narrow or bandwidth is limited.
screen
if they have a mainstream desktop or laptop amount of space.
projection
if they are in Fullscreen more or being scaled up through a projector.

The vendors (and the device itself) know:

That’s way more than the 2 web developers who would have a say in each typical website build. Those developers would likely think differently each time, swayed by what’s vogue on the ’net and the latest glitzy device (which is usually irrelevant for ~1 year, in my experience).

Even of those web developers which might have the brainpower, few will have the time or budget. They’ll pick the current trend of arbitrary2–5 segments of screen widths. This means each website assumes a different spectrum of devices, resulting in a totally incoherent user experience for users who are browsing multiple websites.

Remember, users spend of their time on other websites. Media Queries remove user choice; if a user gets the layout they didn’t want they are stuck with it. The removal of choice is one of the biggest design failures of the old-school Mobile Web!

Why I Gave Up on Media Types

The devices never really supported them. When portrait, the most sophisticated consumer electronics on general sale today will lay out the navigation menu of a 3-column website into about 3 characters of width. Duh, that ain’t gonna fit.

Like, duh! That ain’t gonna fit! (It bears repeating.)

My Hope for the Future

Internet Explorer on the Lumia 800 has a user setting to prefer Desktop version or Mobile version for websites.

Not quite sure how this works, but that idea does scale to the Web. It also solves fundamental things which CSS alone can’t, such as selecting big or small versions of photos in content.

Let a mobile site have a single column for its main layout, low graphics, with only the most essential content and features.

Let a desktop site be laid out for the typical browser widths on desktops, laptops and other devices with comparable viewing experiences. (Such as larger tablets.)

Hey presto. Each site would need only 2 layouts, decisions about device widths become more harmonious amongst websites due to desktop browser width changing very slolwy over time plus, best of all, users can still switch between the versions.