Taylored Content

I have been going on about Web Standards for some time now and all the associated benefits. The principle behind this is the separation of content from structure.

Unobtrusive Javascript

This concept of removing structure from the page elements has been extended to javascript, and is called Unobtrusive Javascript. (Note: Ajax is javascript).

The old way was to have the script inline like cee used to be. This worked fine untill you wanted to change them, when realizing some have js turned off, or using a non js aware browser.  A site with several thousand articles this isn’t a small feat even using a find and replace utility. Unobtrusive javascript uses the same principle as proper use of CSS, In a separate file. This makes for cleaner, lightweight pages, and then changing the markup is simple and easy to do sitewide when it’s in one file.

Enter unobtrusive javascript. The event is tagged to the class name and separated from the code. No inline javascript in the document is the rule now.

Reformatting Content

With the advent of not only very large screen resolutions and various devices for viewing the web, including cell phones, with viewports ranging from 240 pixels to about 1680 pixels - and with resolution ranging from 72 to 150 pixels per inch, a way of determining the viewers screen is needed.

For many years I used fluid widths, this worked fine as a rule within the 800 - -1024 resolutions, then went to a size around 960px, but for mobiles and other internet aware devices we need something else. I have been looking at two different methods that appeal to me and seem sensible and lightweight.

The first is an example at A List Apart, Switchy McLayout. Here they use javascript to determine the browsers resolution, then supplies the right stylesheet for best viewing. So now the same page of content is served up for everything, cellphones and super wide screen monitors get the same content, it’s just reformatted to suit.
Problem being js support on handhelds is poor if any.

The second method would be separate stylesheets. Print stylesheets are common, now we can also serve Mobile CSS files.
Problem is that css support is very poor and will be for some time.

The best method is to realize that even with all the hype about mobile web browsing, javascript support is extremely poor to none, css support is poor, so the best option is offering a stripped down version of your site for mobiles, especially for business use.

ExpressionEngine, as usual, makes this very easy to do. A customized stripped down version of the site as a separate weblog targeted to mobile users works especially well. No need to create all new content, use the best of what you have.

Designing For Mobile Users

When someone comes to your site using a mobile, forget fancy. Information rules, be very short and to the point. Lists are good. Short links to brief summaries. What, where, when, how much. A map if for business if clients come there, ditto for events. Small images if any (say tiny). Get to the point right away, remember, downloading 80KB images to see your page is not going to win you friends in mobileland. No floats, everything inline. A way they can send themselves or others an email to the main site, and the mobile one is excellent.

Here is where the fact that ExpressionEngine is based on php wins you friends in mobileland. PHP is serverside. This means that code is processed on the server, not the client. (Javascript is clientside, putting a load on the browser, a nono for Mobile.)

 

This article is being continued…

<< Back