Horizontal scrolling is nasty, on both desktop and phones, so Responsive WebDesign comes in hand to adapt the width of a webpage to the width of a screen. That’s in the interest of most users.

But although the adagium “Mobile First‘ has won ground lately which, more or less, made websites look simpler and made them more focused on content, a lot of websites keep there overloaded layout and simply hide content for mobile phones with media queries. In those cases it would be nice if you can disable/kill media queries to access the other content.

Bruce Lawson wrote an article about whether or not it would be nice to have native support for disabling RWB (Repsonsive Web Design). I guess, yeah, it would be nice, but why not add a disabled property to the specs/implementation for the CSSMediaRule-object. That would make it easy.

Access CSS and Stylesheets in javascript

To disable a (first) stylesheet, simply do this:

document.styleSheets[0].disabled

Yes, you can toggle them on/off with javascript.

A styleSheet  has a CSSRules property which contains a list of CSSStyleRule-objects and  CSSMediaRule-objects. The first are CSS-rules, the second mediaqueries, which have a CSSRules property with a collection of CSSRules.

CSS tree

document.styleSheets[0]
- cssRules
- CSSStyleRule
- cssText "body {max-width:80%;}"
- CSSMediaRule           "@media screen and (max-width: 800px) {...}
- cssRules
- CSSStyleRule
- cssText "body {width:100%;}"

Unfortunately nor a CSSStyleRule nor a CSSMediaRule-object has a `disabled` property. With other words, you can’t toggle them on/off.

A pity.

Bookmarklet

A simple bookmarklet/scriplet can do the job now, but using the proposed disabled property can make the code cleaner:

Disable MediaQueries / Responsive Webdesign

The code

[].slice.call(document.styleSheets).forEach(function(sheet) {
[].slice.call(sheet.cssRules).forEach(function(rule) {
if (rule.media){     rule.cssText = rule.cssText.replace(/(screen|all|handheld)/, "**$1**");}
});
 });

It wouldn’t be that difficult to write an extension, that let you choose which mediaquery to disable. I might just do that this weekend.

This post is about the discrepancy between a superfast internet – responsive images, high resolution displays, connection speed, HD video – and the economical footprint.

Nowadays there is a major buzz about the web that should serve the right image for the right device: a very detailed image for a high resolution (Retina) displays, a small, less detailed images for mobile phones on slow (3G) connections and, more detailed images for smartphones on fast WIFI connections.

Most discussed arguments are about resolution, connection type, speed, bandwidth and latency. What I miss is the economical part of the issue: money and `ecological footprint`. Sometimes you pay per MB on mobile networks (3G),  or on WIFI-networks at airports or hotels. I guess you’re happy with a low resolution advertisement image when you can save a couple of euros.

Not only real money, they’re other, so called external costs. Cost that are not paid for by the user. I still feel that watching a HD movie on YouTube has a bigger ecological footprint then a low resolution movie. It needs more servers, a bigger harddisk, more bandwidth, in short more energy and hardware, so it raises the bill.  But in real life you probably don’t pay extra for it, maybe some waiting-time, because most providers offer `flat fee` subscription.

So Hipsters, if you do care about the Environment, better watch your internet movies on low resolution screens. Don’t buy the new Apple Retina screens, they’re the Hummers of the internet.

That said, they just started to talk about cost in the specs, and  they call it, euphemistically, a metered connection and describe it as an outstanding issue that is hard to implement.

As said before, most internet services are now provided as flat fee. I wonder if, and when, we will have actually start paying for real usage (Mbs). It’s economically a good idea, pay for what you get, and it will actually help to solve a couple of problems (hard to implement). Let’s see how fast problems are solved once you have to pay for it.

Maybe we will, some marketing theory claims you should raise the price, once you have a saturated market. For mobile internet, you actually pay a lot lately in the Netherlands, no flat fee anymore.  There is no fun in YouTube, it’s fucking expensive, the old newspaper is a bargain.

Jonathan Kew made a nice tool to create WOFF fonts very easy.

Just install/compile  it and run:

As you can see the size of a WOFF file is similar in size to a compressed TTF file.

For example take the free Ubuntu-Regular font:

Size

• TTF:  345 KB
• WOFF: 165.8 KB
• gzipped TTF: 169 KB

The downside of a WOFF is that you can’t install it locally, so you can’t speed up your favourite website by installing its beautiful fonts as a desktop font.