Adventures in Fluid Web Design

I’d love to talk to you about my journey into discovery of what a website is, and in building adaptable websites with a relatively new technique called ‘responsive design.’

At first I was utterly confused and a little scared because my understanding was dominated by what is referred to as the ‘collective fantasy’ of the fixed web, where which sites should look the same in every possible circumstance, where browsers were the enemy to be dominated.

I have always disliked focusing on sites looking the same everywhere, not just because it’s really hard to do with HTML and CSS and made me feel inadequate as a budding professional. It also seemed like far more effort than it was worth. I decided if making sites look the same everywhere was what professional web development was all about, I wanted to stay an amateur. I was more interested in helping people get their content on the web in accessible, usable and affordable ways.

The way I saw it, website companies that could effectively make sites look the same didn’t seem to be putting the same effort into design.

With hindsight I believe those professionals, skilled in creating valid code as they may be, had it wrong. Even their clients have it wrong, fighting for control and under-appreciating design and flexibility. It seems you have to have a pretty large budget to afford a team that understands design and has summoned the courage to break from the web of ‘control’ where a client approves a ‘design’ as the product. What should be the product of design are sites that make use of available technologies to work best towards the goals of users and the clients.

The web wasn’t meant to be fixed. It was designed to be as flexible as water, perfectly filling  whatever vassal it entered. It’s amazing that the web still works like this despite at least a decade of web designers and developers trying to put it in the freezer. Embracing the fluid web with adaptive and responsive is a breath of fresh air. It’s the release of control.

If you’re into web design at all, make sure you’ve read this classic, as old as the hill in terms of the web (over a decade already) but just a relevant today as ever: A Dao of Web Design, by John Allsop, 2000.

Why ‘fluid?’

Remember the first websites? (Here’s the first one ever.) The ones that stretched side to side, with browser default fonts, sizes and colours (blue links)? Those are the most web friendly sites – ugly as they are. Those sites are now the most accessible, giving the pure content entirely to the browser to display how it likes. This could mean working with browser’s default font-size, seeing as only the browsers know for sure what type of device the user has. It means letting the browser inform the width of your site – taking advantage of wide screens and adapting for smaller ones.

It means letting browsers do their things and then adding your style to that. That’s essentially adaptive web design. Here’s a talk from Jeremy Keith where he explains our collective fantasy of control. He also goes into concepts such as “mobile first,” a logical extension.

Accepting and designing for the known unknowns really means starting with a solid, browser friendly base. Web sites have been rocking this since literally the first web page.

Adding style to but not taking away functionality from the naturally fluid web is the essence of the fluid, adaptive web. So what’s responsive web design?

Building on that strong base, you create a site framework that redefines itself in response to, factors such as the most common and convenient, device width. You and special rules for changing styles on elements, be they text sizes, drop shadows, or div widths. It’s useful when you don’t have a need to different content for mobile and desktop versions of a mobile site (or anything in-between – which is the beauty of it all), you just want it to be easy to use.

AliDark.com is currently a basic example of responsive design. I intended that the site would take advantage of the full width of the desktop, by splitting into columns: one short one for header and meta; and another for the content. I think this is nice to use, but when you get down to sizes of perhaps an iPad in portrait, it’s no longer practical to have two columns, especially two with nice big text like my site! So it defaults to one column, effectively telling the containers that made up the columns to not be columns any more, and to stack above each other normally.

Another responsive design trick employe at the moment is to blow up the text size for larger resolutions. This way, if the site is viewed on a 27” inch monitor, it will take up the whole screen and still be readable.  I’m sure seeing a site they don’t need to squint at, and can lean back to read, will pleasantly surprise the bejesus out of anyone using that big a screen.

These are simple styling examples, but you can apply more web technologies to altering the actual functionality of a site. That’s out of my league in terms of development, and I want to keep it that way. Of course if your mobile site needs to different goals or the requires different functionality, you’re probably better off with a separate site, rather than one site built with myriad conditions to alter functionality.

Today I like to employ an adaptive, responsive, content first, mobile first approach. As Jeremy mentions in the video linked above, it’s fun to design the content within those constraints and then style for larger screens having priorities well taken care of, and a lot of space to play graphically.

As well as Jeremy’s book on HTML5 for Web Designers, I can definitely recommend Ethan Marcotte’s book on Responsive Web Design – both from the treasure that is A Book Apart (not affiliate links – yet ;) ).

Posted on November 6, 2012 ... Modified October 2, 2015