Offset Column Chaos

I’m tired of confusing myself trying to write up a description of the layout. Here it is, make of it whatever you will.

Offset Column Chaos (Download)

The primary design idea was two columns where the widths of the columns had a maximum width, but the background color for each column would extend beyond the content to the edges of the viewport while the content, as a whole, remains centered to the viewport.

I took a few different approaches and eventually landed on using media queries to apply different approaches to the same problem depending on the situation with the viewport (are we at max-width yet, or not?) It works. I perhaps made it more complicated than most people really need it to be, but you can pick out the bits you don’t need to keep things simpler.

The CSS is heavily commented with variables and formulas to help keep everything pixel-perfect. It’s a layout like this one that makes me wish CSS had some kind of built-in support for variables. It’d make creating these kinds of layouts a lot easier.

Work is In Progress

I was asked to create a WordPress theme for a friend’s web site. I’ve since created the layout and theme and intend to release a stripped-down version of this layout sometime soon. In preparation for this I dusted off the blog and even found a new template that is more to my liking.

I also started doing what was never intended to be, but has since become an exhaustive write-up about what this new layout does and how it works. This has been a great exercise because it forced me to revisit certain design choices and I’ve discovered new ways to approach certain issues with the mechanics of the layout. I’ve found new solutions to problems whose original fix I wasn’t quite pleased with and also solved some minor bugs that I was initially willing to ignore.

I think I’m at the point where I started, which is cleaning up the CSS, adding comments, and writing about how it all works.

So I’ve got a new layout to give you soon. It’s not terribly complex, it has just two columns, but how those two columns function is something I think will interest others than just myself.

Texture & Transparent Maths

This is the kind of post that would benefit greatly from the addition of screenshots, but I’m far too lazy so you’re going to have to put a lot of this into your head and create your own screenshots.

Now that’s out of the way, let’s talk about a situation that came up over the weekend. I was looking at a particular layout I’ve developed and lamented that the solid color background felt a little too empty. What it needed was some kind of texture to make it more visually interesting, but no so much that it takes attention away from the actual content of the page. What immediately came to mind were the linoleum tiles of an old grocery store I went to years ago which had solid color tiles with little dots of black and white color. I thought something like that might just pull off the trick of making things a little more visually interesting without taking away focus from the content of the page. So I needed to make some dots.

Contuing My Case For Designing Without Javascript (or Flash).

Last week we learned of an exploit in IE6 that allows the attacker to take control of your computer simply by having you browse to a web page and get IE to execute a bit of Javascript. Microsoft urged people to upgraded to IE8 ASAP. Well it looks like IE8 is vulnerable as well. Here are the gritty details.

Microsoft won’t have a patch ready until next week at the earliest. So for at least a few days your computer is seriously vulnerable if you’re browsing the internet with IE.

But there are temporary solutions. One is to enable Data Execution Prevent (DEP) in Vista/Windows 7 for IE. You need to do this manually, but it might save you. Except it might not, as some French researches (see first article I link to) claim to have a workaround to make the exploit work while DEP is enabled.

The only other solution? Disable Javascript in IE.

And the threat is serious enough that people (read IT admins on behalf of those under their care) may resort to this very solution.

Which means any and ever web site that employs Javascript as a key means to access content and navigate the web site will become empty pits of nothing. The sites won’t work, the users won’t be able to access them, and business it lost on both sides of the equation.

However, had one designed their web site in such a way as to NOT rely on Javascript for presenting/serving content to the user, one would not be in the business of losing business every time a new Javascript exploit comes out.

So use Flash, you say.

Well, Adobe has scripting problems of its own. In fact Adobe is recommending people disable Javascript in Acrobat Reader, just like Microsoft.

Certainly seems like we’re staring at a future where Javascript can not, and should not be relied upon to deliver your web site content.

But if you take me for a cynic, that’s okay, I’ve got some cool news for you. A programmer is implementing Flash using Javascript and SVG. This could mean your future web pages could create their own animations without the need of any third-party plugin like Flash. This is kinda cool!

Search Interface

Several site operators, especially those I’ve talked to who also work in Higher Ed, have found that users (typically students) use their search function a majority of the time over drilling down into the web site to find the information they want. This is true of both first-time and veteran users.

This begs the question that if users are ignoring your navigation and opting for the search engine,  should web sites just have a search box on their front page (think Google). A single text input and a search button and that’s it.

Sub-page navigation would be similar; a text input bar along the top that, as you typed in your search string, would display suggestions. This is not unlike Google or the search box in Firefox 3.

It’s an interesting idea. You save a ton of page real-estate. You cater to the individual’s needs rather than trying to guess what they need or how they will perceive the structure of your web site. As long as the user perceives entering text and clicking on the links that appear as more efficient than trying to drill through your navigation scheme this sort of thing would work rather well.

There are, of course, a few drawbacks.

The first is that the traditional search engine would not be able to crawl your web site to index it. You could perhaps add some code that detects search engine bots and produces a site-map (maybe dynamically created).

Users with disabilities may have problems. I’m not certain a blind user would find it convenient. And users that have problems typing would find the interface very difficult.

You could perhaps address both issues by including in your web page a static navigation element that is hidden in such a way that screen readers and search engines will catch it, but regular users will not. Or you could allow users to make the menu appear by mousing-over or clicking a button.

Users who have Javascript disabled may not get the suggestion list, but they could still type in what they want and hit search like a traditional search engine. It just adds an extra step for them, but does not break the functionality of the web site.

The usefulness of such an interface on mobile devices is debatable. While the interface itself would be very small and fit nicely on a mobile device, the user will be forced to type the word or phrase they are searching on. This may be a bigger burden than simply scrolling and clicking on a navigation link or two, but on very deep sites this would probably be an easier interface.

I think the idea is deserving of at least a test implementation.

But perhaps I’m missing some key idea or concept that makes the whole idea break down. Please share any ideas or thoughts you might have.

Contuing To Prove My Now 5+ Year Old Argument

Flash (and JavaScript) should be used as tools to enhance an existing web site, not replace it. If your web site is not accessible to a user who has neither Flash or JavaScript support then you are doing something very wrong.

It appears that there is a new Flash vulnerability that can take over your computer. Awesome.

So how does one protect themselves from such a thing? Well, you could install noscript. It’s a plugin that will disable JavaScript, Flash and other embedded objects from web sites until you explicitly set permissions to enable them for that web site. Noscript won’t save you from web sites that you’ve already set permissions for — so it’s not a catch-all, but it will save you from links to web sites you’re unsure about. And it has the nice side-effect of disabling any JavaScript-powered advertisements.

What this means for you, the web developer, is that it’s time to start assuming the first time people access your web site they will have Flash, JavaScript, etc. disabled. This means you need to make sure your site is still accessible even under those conditions. Otherwise the user will have no reason to trust your web site if he or she can’t access it in the first place. If they don’t trust it they’ll never (well, they SHOULD never) enable script and emedded objects to run from your domain. Thus you will lose customers.

HTML, CSS and text. That should be the core of every web site. Flash and embedded objects to enhance the site, but not to provide the only means to access your content.

That is unless you’re one of a few embedded object kind of web site, like YouTube. But for the majority of us, that won’t be the case. And even so, you can always provide download links to the videos if the user doesn’t have Flash enabled to view them from within your web page.

<strong>TL;DR: Web sites should be accessible even without JavaScript and Flash.</strong>

Equal height columns with borders (and a gap).

I was recently reading an article over at Smashing Magazine about new CSS techniques. One of them was about columns with equal heights and a border. The solution presented requires a background image to be used to fake the gap between the two columns. As I prefer to stay away from images and control the layout with straight CSS, I took a shot at this without any images. This is what I came up with.

Basically I’m using an empty DIV that’s absolutely positioned and with an absurd height value (999,999 pixels) to fake the gap between the two columns rather than use a background image. I then wrap everything in another DIV and set the overflow value to hidden. This hides everything but the bit of that very tall DIV needed to produce the effect. I’m basically clipping the very tall DIV and the clipping is done dynamically (based on the height of the content). The advantage with this solution is that I can control the color of the borders and background with just CSS — I don’t have to create a new image every time I change my color scheme. The downside is you need a couple star-HTML hacks for IE 5 and 6, plus you have to add extra markup in your HTML document that serves no purpose other than to create visual layout objects (which HTML purists feel is wrong, and I kind of agree with them).

Why do we have to fake the visual appearance of two columns and why is it so difficult?

Good question.

HTML block elements that have no height value explicitly defined (such as via the height CSS property) will be take whatever height is needed to contain all its children. So if you’ve got a very large image inside a block element, the element will grow very big — just enough to contain the image. If a small image is placed inside a block element, the element will only grow a little bit, just enough to fit the small image.

So create two block elements that will be our columns. Float them left so they sit next to each other. Now put a border around them. What you will see is that the block elements will only be as tall as the content (the text) inside each column. The columns will not be equal height (unless you’ve put the same content into both block elements).

If you want to create the appearance of two columns with the same height, you’ll have to fake it.

How?

Put your columns inside another block element. Your left and right columns will still have different heights, but the block element that contains the columns will grow as tall as it needs to contain both columns, in other words it will grow to be as tall as the tallest column. With this you now have an element you can apply some CSS to which you know will always be as tall as the tallest column in your web page.

What CSS is that?

Depends. A common approach is to set the background color of the block element that contains the two columns (let’s call it a wrapper since it wraps around the columns) to the color you want your left-hand column’s background to be. Then create a border on the wrapper set to the width of the right-hand column and set the color of that border to the color you want the right-hand column’s background to be. You can then use CSS to position that right-hand column over the border of the wrapper. To the viewer it appears as if there are two separate columns with different backgrounds. You can see an example of this in action in my Skidoo Redux layout.

The trick I presented earlier in this post can then be used to add a border around each column.

But Skidoo already has borders around its columns.

Yes, but those columns share borders with other columns. The trick I present here allows each column to have its own set of borders, not shared with any other column (in other words, there’s a gap between the columns). That’s what makes this trick different.