WebIS Mobile Site And CSS: The Future of Web Design?

[Jason Dunn]

<div class='os_post_top_link'><a href='http://www.webis.net' target='_blank'>http://www.webis.net</a><br /><br /></div>If you hit the <a href="http://www.webis.net/">WebIS site</a> with a Pocket PC, you'll be in for a nice surprise: a perfectly formatted mobile site. Now here's the interesting part: there's no template wrapper (like we do) or re-direction to another Web page (like some do). Instead, you're looking at the same content: but by using CSS they've enabled mobile devices to view a friendly format of the same content. Here's a quote from, you guessed it, <a href="http://www.fabriziofiandanese.com/">Fabrizio Fiandanese</a> on how he approached the challenge:<br /><br /><i>"The future is about web standards, about the separation of style from content. How do we achieve it? Creating minimal, meaningful markup, abstracting everything has to do with "look" from the HTML code. All style definitions will be stored into the CSS files. The net result? The minimal HTML code will be readable on every device out there, and we'll have the ability to serve different styles to different clients."</i><br /><br />I think this is a great approach to the problem. For many years the expectation has been that a Web site should have a mobile version of their site - specially-formatted HTML pages and graphics for mobile devices. Then, as the separation of content and form became more common, we had database-driven sites that had mobile-device friendly templates. Not every site is database driven, however, so this wasn't a practical solution for everyone. This CSS solution is interesting because it can apply equally well to static or dynamic content, and a variety of devices can be targeted. My Web design Kung-Fu has become weak, but from where I'm sitting this seems like an excellent solution.<br /><br />So if you're a Web designer, it's time to start thinking about using CSS to format your content in such a way that any computing device can consume the content. We're looking at doing the same thing here. And if you're a business looking to do something similar with your site, <a href="http://www.fabriziofiandanese.com/">Fabrizio is the person to talk to</a>. ;-)

[Phillip Dyson]

I think this is an example of the way the web, internet was meant to be. Not hack solutions like what ICANN just accepted with TLDs like .mobi

Question for you Jason, do you think that a CSS driven presentation would be less of a performance strain than the current template design of PPCT?
If I read your statements correctly the template design (or atleast this template design) involves database IO. Or is the db used to distinguish between subscribers versus non subscribers.

Perhaps the front page could convert to a CSS implementation, while the forums remained template driven.

Just thoughts from the outside looking in. :)

[Jason Dunn]

I think this is an example of the way the web, internet was meant to be. Not hack solutions like what ICANN just accepted with TLDs like .mobi

Exactly! The whole concept of a mobile device domain is completely and utter asinine. :evil: Expecting users, and companies, to create/go to mobile-specific domains is absolutely the wrong way to go about things. I think it's just a money-grab.

Question for you Jason, do you think that a CSS driven presentation would be less of a performance strain than the current template design of PPCT?

I'm not sure. If I understand things correctly, the CSS layout is done by the client - it's only so much code as far as the Web server is concerned, and the client on the other end assembles that code into the proper layout. So, in theory, this should mean less server load versus a database load + template wrapper from the server. I could be wrong though. :-)

[WolfUK]

I have been using a CSS layout on my own web site for a while now and as well as mobile device layouts it is possible to create layouts for things like printing which makes maintenance of a site much easier and quicker. There is also the benefit that a site that is not based around an underlying tables structure for its layout will conform to more standards and be more accessible to partially sighted visitors.

The only down-side is that CSS is not uniformally standard and some browsers do not always handle it properly. You get one guess at who one of the biggest offenders is in this area!

[rlobrecht]

This is so cool. What a slick way to do it. Does anyone else think it odd that when you hit the site with a WM device, that it shows you the Mac products first?

[ricksfiona]

Well, yes. This issue of separating content from format is described in a book I bought on HTML/XHTML &amp; CSS I bought about 2 years ago. I wondered by websites were creating a site for regular computers and another for mobile devices. You can do the whole thing on one site with CSS.

[andyb]

Tim Berners-Lee spoke out against .mobi because he thought that this was possible through existing standards. But when most websites struggle to display properly in two desktop browsers there's little hope for mobile devices.

[edlboston]

Does anyone else think it odd that when you hit the site with a WM device, that it shows you the Mac products first?

When I went there from my desktop pc, I also got the mac product listed first, so don't think there is anything strange going on there.

[rlobrecht]

Maybe I should have used the word ironic instead of odd.

[alex_kac]

This is so cool. What a slick way to do it. Does anyone else think it odd that when you hit the site with a WM device, that it shows you the Mac products first?

One of the things one may notice on the desktop is that you can set a permanent user preference for All Products, Mac, or Win only. I'm looking at making the default choice based on the OS the user is coming in instead of showing both by default. But yes, its a bit ironic :)

[gregmills]

I think the posibilities with standards based design are fascinating. I'm a web designer and I'm slowly working on seperating content from style more and more with each new site I build. A couple of good resources are CSS Zen Garden (http://csszengarden.com/) (see the possibilities) and Zeldman's book on the subject (http://www.booksamillion.com/ncom/books?id=3140196458280&amp;isbn=0735712018) (a good intro to how it's done).

[ctmagnus]

CSS is the only way to go. Unfortunately, I don't know nearly as much about it as I would like.

[beq]

good resources are CSS Zen Garden (http://csszengarden.com/) (see the possibilities)
I was just about to mention this too, very nice :)


P.S. On an unrelated note (that only vaguely segue into CSS), I found interesting all the ongoing controversy on applicability of long-existing web development tools to create next-gen web applications, vs. having to wait for next-gen web tools (being developed by the big players like Microsoft). Google by their actions inadvertently bolsters proponents of the former idea, although others say existing tools are just too difficult and unwieldy to create truly advanced web apps, and that Google is in a unique position of unrivaled capability simply due to the sheer number of rocket scientists that they've hired...

http://news.com.com/Will+AJAX+help+Google+clean+up/2100-1032_3-5621010.html

[Dalantech]

There shouldn't be much of a load savings from the server's perspective since the underlying data base queries for both mobile and non-mobile browsers will be the same. The only thing that changes is the way that the data coming out of the database is presented to the client, so you might see a slight reduction in the amount of bandwidth used -although even that could be negligible.

I use Zlib compression on my site -all data going to the client is compressed before it's transmitted. Since all browsers support Zlib decompression the bandwidth load on my site is relatively low. I have about 4000 unique visitors a day, and enabling Zlib compression (it's built in to PHP) drops my monthly bandwidth usage from around 25GB to 8GB (text has a high compression factor).

Server load really isn't an issue -the real savings here is in time and effort. I've been working on a set of mobile templates for my web site, and I have a lot of experience with template design (I'm one of the admins at UBB Threads Development). But even for someone like me it isn't easy: UBB Threads does not fit well on a PDA's tiny screen (it wasn't scripted with mobiles in mind), so I am writing mobile templates from scratch. If I could write a single template and change the look and feel of that template just by adjusting a CSS file it would save me a huge amount of time and effort!

[jsnielsen]

I'm kinda surprised this comes as such a big surprise to anyone, to be honest ;)

But yes, it's the way to do it :)