Write once, show up fine everywhere
Friday, 6. October 2006, 10:32:36
One of the biggest sins of web development is to sniff user agents and serve different content based on that. Various web browsers are affected by this including Opera and now also Microsoft Internet Explorer 7.
This is not only bad since you need to maintain different versions of your content, but in addition sniffing user agents is error prone, since UA-strings change, they might contain false information or users might override them.
A recent trend among content providers is to make special versions of their sites made for mobile phones and other small screen devices. This might sound like a good idea, but eventually you might end up maintaining a vast amounts of slightly different versions. The devices you tailor for might change in the future or the web browser might get new technology to accomodate the content in a different way.
Norway's second largest newspaper Dagbladet has just released a special version of their page for Nintendo DS. One of the features they brag about is having their cartoon strips rotated 90 degrees to avoid horisontal scrolling on small devices. This is of course totally unnnecessary as by splitting the strip up into several images, and making them "float" in the correct order will make them wrap appropriately depending on the width of the screen. In addition it's easy to set a minimum size to avoid needing a microscope to be able to see it.
I quickly put together a small example on how to let a cartoon strip show just fine in several resolutions:
The result is as follows:
See the example page
Ok, this solution might not fit all purposes, for instance a strip might not be divided into different frames, or dividing it might take more resources than simply rotating them.
However, my point is really that making slightly different versions of your content each time a new device or resolution pops up is futile and unnecessary. With CSS and media queries you can keep your content unchanged, but still make it show up nicely everywhere.
This is not only bad since you need to maintain different versions of your content, but in addition sniffing user agents is error prone, since UA-strings change, they might contain false information or users might override them.
A recent trend among content providers is to make special versions of their sites made for mobile phones and other small screen devices. This might sound like a good idea, but eventually you might end up maintaining a vast amounts of slightly different versions. The devices you tailor for might change in the future or the web browser might get new technology to accomodate the content in a different way.
Norway's second largest newspaper Dagbladet has just released a special version of their page for Nintendo DS. One of the features they brag about is having their cartoon strips rotated 90 degrees to avoid horisontal scrolling on small devices. This is of course totally unnnecessary as by splitting the strip up into several images, and making them "float" in the correct order will make them wrap appropriately depending on the width of the screen. In addition it's easy to set a minimum size to avoid needing a microscope to be able to see it.
I quickly put together a small example on how to let a cartoon strip show just fine in several resolutions:
<!DOCTYPE html>
<html>
<head>
<title>
Write once, show up fine everywhere
</title>
<style type="text/css" media="handheld,screen">
<!-- shared styles -->
img {
max-width: 100%;
min-width: 100px;
}
</style>
</head>
<body>
<img src="m1.png" alt="M-2006/10/06-rute-1" />
<img src="m2.png" alt="M-2006/10/06-rute-2" />
<img src="m3.png" alt="M-2006/10/06-rute-3" />
<img src="m4.png" alt="M-2006/10/06-rute-4" />
<br />
<a href="http://www.start.no/tegneserier/m/?1160085600">Original strip</a>
</body>
</html>
The result is as follows:
See the example page
Ok, this solution might not fit all purposes, for instance a strip might not be divided into different frames, or dividing it might take more resources than simply rotating them.
However, my point is really that making slightly different versions of your content each time a new device or resolution pops up is futile and unnecessary. With CSS and media queries you can keep your content unchanged, but still make it show up nicely everywhere.
WIDGETIZE
How to use Quote function: