Tuesday Jan 16, 2007

Fixed-Width / Flexible-Width Hybrid Design

A List Apart, in case you didn't know, is the shizz-nit. A while ago I read Switchy McLayout—an experimental technique to dynamically jump between different layout approaches based on viewport width. A hack, yes, but CSS3's media queries aren't a reality yet.

Since I'm currently using an uncommonly wide fixed-width design, I decided to experiment around with this a little bit. If your viewport width is currently > 960px, and you resize it < 960px, then this page automatically switches to a design fixed at 750px instead of 960px. At least it works on the handful of browsers I tested (i.e. not IE).

It's not quite flexible width, but if you squint your brain just right, it's sort of a fixed/flexible hybrid. Maybe now the pitchfork and torch-weilding hoard will retire peacefully to the village. Well, anyway it won't work without JavaScript enabled, but that's just part of my conspiracy to gradually annoy people with small screen resolutions who eschew JavaScript.

Tuesday Jan 02, 2007

How this Blog Design was Created

I decided to go the total web-standards-nerd route in creating this blog design. Semantic HTML, source-order, accessibility, and unobtrusive JavaScript were all factors from the outset.

The first thing I did was to customize the "Basic" theme. This gave me a starting point. I removed all presentational information, starting with the CSS code. Then I went through the HTML and removed presentational hints. For example, layout tables, <center> tags, &nbsp; characters, etc. Even things like class="left-bar" had to go. "Left" is too presentational, and I relaced it with "sidebar," since it might be argued that "sidebar" is a semantic hint. (Yes, that's how much of a nerd I am.) Fortunately there wasn't much presentation baked into the HTML to start with, because most Roller themes are pretty good about separating content and style.

Next to go was JavaScript. I had just removed the presentational layer, and now it was time to remove the behavioral layer. These layers would be added back in later via external files, once the HTML-only blog was proved working.

Wherever possible, I made the HTML as semantic as possible; selecting and organizing tags elements by meaning and structure. Source-order sensibilities were used, placing more important things higher in the source code. Headings/sections were arranged such that if you removed all but the headings (<h1> - <h6>) you'd get an outline of the page. <p> was used to contain all logical fragments of text. <div> was used to delimit sections. <ul> was used to build lists. It turns out, semantic HTML is really pretty brainless and straightforward, once you yank out presentational noise.

Once the blog was purified, it was boring-looking, but usable. No columns, just black Times New Roman text that strung all the way across the browser screen on a white background, with blue hyperlinks. It was nekkid! Time for some clothes. An empty CSS file was <link>ed to the blog, which I began populating, resulting in the current design.

As you may know, it's easy to do CSS design in Firefox, Opera and Safari, all of which understand and render CSS beautifully. But then you inevitably have to do battle with IE. Most designers approach the IE problem by peppering their CSS file with hacks. Hacks are oddly structured CSS commands that, due to IE bugs, either can't be understood by IE or can only be understood by IE. Instead of doing this, I used conditional comments to load corrective stylesheets into just IE. Conditional comments are an IE-only feature that look like regular HTML <!-- --> comments to real HTML parsers, but have special meaning to IE. This way, I was able to quarantine IE-specific bigfixes to a couple small, IE-specific files.

Tuesday Dec 19, 2006

Designing Web-UI Wireframes? Read This

Sometimes, when wireframes specify the placement of an image on the page, they specify the alt text for that image. First of all, if you do this, kudos for thinking to that level of detail. It makes it easier for people like me, who write the actual code, to know exactly what you want. Plus, alt text is important for accessibility, and thinking of that kind of stuff up front saves headache down the road.

It's been my experience, however, that sometimes when the wireframe designer says "alt text," they actually mean title text, or tooltip text, which is different. Alt text is what appears if and when the image is broken or it's not possible to display the image. Title text is an additional bit of info, typically displayed as a tooltip when the mouse hovers over an active element on the page. For best results, continue to specify alt text, but if you also want tooltip text, then specifically call out "title" or "tooltip" text in your wireframe.


My name is Greg Reimer and I'm a web technologist for the Sun.COM web design team.


« April 2014