Tips for fluid design II

A while back I decided to jot down a couple of practical, simple techniques that have served me well when actually building fluid designs.

One of the situations that often comes up is the need to make an elements width vary. This is no problem when that element is a block level element (say a div or a paragraph) as unless you tell them otherwise their width willl vary with the space available. However, when it comes to graphics this can be a problem. After all, these will (probably) have been designed with a fixed size in mind.

Their are a couple of possible solutions here, both useful in different circumstances. However, both rely on the image itself to some extent.

The sometimes obvious method is using the CSS background rules, the image wont actually be part of the page and so wont take up any space, the size of the image can then be controlled by the size of the element (say a div) on which the background image is placed. This works but has a couple of ugly side effects – if the image is content based (ie. it carries some sort of important message rather than being just for it’s asthetic attributes) then placing it in the CSS removes it from the page completely, not good for those without CSS support. Another consequence is in site management. Having content imagery in the CSS can make life a little tricky.

The second approach involves using the CSS overflow property. By wrapping the inline image with a container (again, maybe a div) and assigning this an overflow: hidden we can control the viewable area of the image by controlling the size of the surrounding div (with CSS, natch). An example of this can be seen on these pages, with the favourite sites and flickr images. Resize the window. These images should expand to fill the available space.

OK, so we have added some additional markup to the page, depending on your feelings on this that solution may be fine. Want to go a bit further? What about assigning a class to the image and using some nifty DOM scripting to add in the additional markup?

AJAX and Privacy

Ok, so everyone by now has no doubt had a play with XML">AJAX in some shape or form, and their are lots of good tutorials and articles around. I’m not going to add to the pile, but on my travels I did do something that raised a couple of questions. Let me know if anyone has any answers.

The questions are more ethical than technological however and came about when considering online advertising and it’s never ending need for metrics – at the moment that generally means impressions and click throughs (maybe also including converting click throughs). These two states are imposed to some extent by the stateless nature of most web pages. We can tell what gets shown to the visitor. But they then disappear from our radar until they do something – in this case click on an advert (or dont).

But what about the asynchronous nature of our new toy AJAX? We are starting to break out from the constrains of the stateless web so can anything be added to our add example? Why yes of course it can.

I’ve set up a quick working example that should hopefully make my point a little clearer. Open in a new tab (I know 80% of you can – mint is great) if you will – morethanseven.net/monitor

Mouse over the two Ad areas a few times. Click on them a few times too. Obviously the appearing message telling you what you have done is hardly exciting but it’s actually a response from an AJAX (actually it’s not returning XML so is that AJ?) call. All the call does is log the action inn a text file and return a success or failure. This isn’t high tech stuff – it’s proof of concept remember, it gets interesting a couple of jumps forwards.

The two buttons at the bottom, clear log and view log, allow you to see the log of actions (and delete them). I dont imagine this attracting high but the log file will log everyone’s actions not just yours, so you might want to clear the log first to more easily see your actions appear.

OK, so what? Well lets imagine instead of just the actions I log your IP address, some date details, maybe store a cookie on your computer while I’m at it. Also as well as hooking up two add areas as in the example I hook up everything on the page. Not only can I build up a picture of your activities between pages (your path through the site), I can build up a picture of what your mouse was doing on a given page. Now where stalking.

OK, so I’m not sure if their is a correlation between a web users mouse pointer and what they intend but think of other examples – I could trigger the events on focus for form elements. You might get half way through registering or purchasing (you’ve entered your name and an email address) and then decide against it. Normally all I’d be able to get would be someone went to the page in question and did not complete the required actions – with AJAX I could log who you where and were you got to in the process (and then email you to ask why).

Ethics anyone? Anyone else see problems? Let me know.

Note. The javascript examples are not great and I’ve testing in recent versions of IE and Firefox only. It’s a proof of concept rather than tutorial.

Roll On February

Well – It looks like february has made a quick move to try and secure the prestigious month of the year award.

With two events happening in London, namely Clearleft’s Ajax Training Workshop on the 10th and Carson Workshops Future of Web Apps summit on the 8th it’s all go in the rapidly expanding world of web geek meetups.

After missing d.Construct I dont feel two bad about the outlay for going to both of these, especially with the assistance of my lovely employers. So I need to work out the details; travel, accomodation, what to do on the thursday, etc. but that should hopefully not be too painful. Any suggestions welcome – especially if anyone else is going along to one or both – be good to be in the same hotel as other attendess – I met Nic at @Media last year as she was in the same hotel.

So, anyone else going along? Want to meet up? Ideas for accomodation or things to do on the Thursday? See you in February!

Accessify ROCKS Manchester

Back from Manchester after a pretty good weekend all in all.

It didn’t start particularly well. Very briefly I was late getting to the station. Missed train. Waited an hour and the next train was delayed half an hour. Missed meeting everyone at the station and had no clue where the place was. After a trip (in the opposite direction to the pub) to the tourist information centre I finally got there and things picked up markedly.

Present where Patrick Lauke, Vigo, Andy Saxton, Jack Pickard, Pixeldiva, Robert Wellock, Dan Champion and myself.

We started out in a small deserted bar where Patrick had booked a table (including a reserved sign with bad fonts). Considering that we accounted for the vast majority of people in their throughout the afternoon this was mildy amusing.

I missed most of the introductions but not to fear. Conversation jumped around – people who made it to d.Construct filled everyone else in with the highlights and the behind the scenes gossip. Tales of massages and ladies mainly. We had a wireless laptop connection and browsed around a little. Bad examples of error messages (I’ll dig out the links later on), brand new public sector sites that simply consist of sliced up images (including links with blue underlines and ovely image maps) and goings on at the BBC. But we cant speak about the later. Some talk as well on privacy issues tied in with the whole open API goings on and an idea we intent to sell to google – stalking.google.com – which is fairly self explanatory but we got into a worrying level of detail!

After a brief break to stop off at the hotel, and for some of the group to depart, we got some Indian food on the way to a pub recommended by Patrick, who was going to meet the rest of us there. It was a ROCK pub. Rage on the jukebox, lots of proper beers, people wearing black, etc. All of a sudden we found something else we had in common – musical tastes. More discussions going backwards and forwards between the music (what’s that tune?) and the state of the industry. All good fun.

Overall, another enjoyable meetup. Thumbs up to everyone turning up and I’ll look forward to the next one. I’ll post links and the obligatory flick details once everyone else has their say.

'Creatives'

I’m not going to prattle on but something that’s bugged me for an age. The usage of the word “Creatives”. And lo and behold it bugs other people too.

I like knowing that it’s not just me!

Just to say as well that anyone reading this and going along to the Accessify Meetup in Manchester this weekend let me know. Leave a comment. Be good to put names and faces to email addresses and web sites!

d.Construct?

Right. I wasn’t at d.Construct I’m still a bit gutted really as it sounded like a hoot and lots of it was up my street and would have been good to meet up with ‘people’. But hey, I can still watch the feeds pour in right?

With that in mind, to again make my life easier and hopefully be of some use I’ve set up another (the first one was for @media) feed syndicator.

morethanseven.net/dconstruct

All I’m doing is parsing, storing and displaying all the feeds. On first run I picked up 27 and hopefully by the time you read this more will have been said. The collection of feeds are a combination of people I’ve met and people who where blogging about `media. If you have a feed and want it adding just leave a comment on here or drop me an and I’ll add it to the rest.

I’ll just say a big shout for everyone at Clearleft for organising it on such short notice. I’d rather thinks like this happen and me not be there than they not happen at all because of problems with size or cost or admin. Maybe next year?

Tips for fluid design

After getting a few comments about the site design, and in particular a few of the fluid nature comments about it being tricky to get right. I’ve found myself tending to develop fluid designs more often that not over the last few years and thought I’d do a short series of posts about some of the techniques I use. I’ve generally found it pretty easier to find discussions about the pro’s and cons and the basic principles but less so on actual techniques. I’ll try cover some or all of the following over the next few weeks or so:

  • extendable background images
  • using overflow hidden
  • use of fluid flash banners
  • min-width and max-width (and javascript)

I’ll kick off with tricks for background images.

This techniques makes extensive use of the background CSS property which is used as following: div\#iBackground { background: url(path/to/image) center top no-repeat; }

I’ll assume some familiarity with this and CSS in general, basically all we are doing is setting a background image to the div with an id of iBackground which is set to align to the top vertically and centered horizontally.

Moving the image to the background has a couple of interesting effects, the one that we are interested in here is that the the size of the div is not affected by the size of the image (as it would be if the image was placed inside it). It acts as a kind of viewport into the world of the image. By specifying the width of the div in percentages (or em’s if you are dealing with an elastic design) the size of the viewport can change dependent on the size of the browser window. An example is inorder:

joshuaink.com makes use of a large background graphic that stretches the full width of the site. This means the space can be used for pretty large imagery but without breaking the experience (sideways scrolling!) for those with lower resolution displays. Note that the flower background is 2000px wide.

The only problem with this technique that I have come across is generating the images in such a way that they degrade gracefully. You need to make sure real content (logos or text) appear in a smaller area that the whole image and live with the fact that not everyone is going to see the whole thing. In my mind this is a small price to pay for asthetically interesting fluid layouts.

Mint goings on

Well. Lots of goings on since the reboot. Rather than fill up lots of posts I thought I’d summarise – If something is interesting enough I’ll probably come back to it.

Thanks everyone for positive comments about the redesign, lots of new visitors to the site from the reboot site itself and people who liked the design and said so on their sites:

I even got onto screenspire which was nice.

All of this I’ve had the joy of watching from the vantage point of mint. I mentioned that I’d installed it a while back, as much to have a play around as anything but as many before me had stated, you can easily get hooked on the stats – and I’m enough of a numbers fan as it is. So what follows is a very brief, but real world opinion, of Mint. In case your only interested in the final opinion – I’m a fan (you could tell that anyway).

First things first, purchase, download and installation was an absoolute breeze. OK so I’m fine with all kinds of command line driven installs but their was non of that anyhow. Just change a simple text configuration file, create a database and upload. Everything else was just point at a URL and away we go.

I decided to install a couple of the official peppers (plugins) along the way, again a simple matter of upload, login and click install.

Login presents the nice interface everyone was googling over. It’s all nice shades of green, shadows and javascript scrolling. The pane’s themselves provide information about Visits, Referrers, Pages and Searches. This isn’t all the information you might be used to from other log file based packages but once you get over that you dont really need anything else under most circumstances.

One thing that did interest me was information about screen resolutions and that’s where the User Agent 007 pepper comes in. Displaying information about screen resolution, along with details of Browser and Flash versions. It’s all very voyeuristic I know but hey.

The Visits and Referrers panes are probably where most of the action is. The Referrers section is great from my point of view for seeing who is linking to me, really useful for tracking down interesting people I have no other way of finding out about. Visits details lots of information about the number of visits and visitors – cunningly logged using javascript so as to avoid lots of referrer (ie. spider) spam. Having said that, Google cropped up in my User Agent 007 pane so maybe Google triggers it too?

So. Is it for you? I get the feeling that it depends. It’s come out of the blogging scene so to speak and it shows. Design decisions have been made that strengthen it immeasurably for blogs while, in my mind, weaken it for other kinds of sites – in particular from my past experience for campaign style sites where you really want to look at this sort of detail.

For example the choice of PHP, how many well known blogs (at least in the corner of the web inhabited by web designers) dont use PHP? So for blogs that’s not a problem but for other sites it can be.

Another area is the ability to query the statistics. For a blog you just want to know traffic all the time probably. For a campaign you want to know what happened when. And that might mean going back in time so to speak – when putting together a report for instance. It might be possible to mine this data, even build a pepper around it – but I’m not sure that’s playing to Mints strengths.

As I said initially, these aren’t really critisisms. Specialist software is where it’s at in my mind. And this is definately a very nice piece of software.

Reboot

The real CSS Reboot should be going off anytime now. But I’m in Rome (this message is coming at you through the magic of Textpatterns publish on date facility) so had to put things up a little prematurely. Oh well. In fairness I know which one I’d prefer to be doing.

I’ll miss the initial rush of running through lots of screen shots and sites, finding new things and generally wanting to redo the design at least for a week anyway. When I’m back I’ll post a list of one’s that caught my eye.

In the meantime a couple of other ongoing bits. I’ll try and sort out lots of photos onto Flickr when I’m back, hopefully including some shots from Rome and a few other series I’ve taken and not got round to. Also after meetups, lots of discussion on and around newcastlenewmedia.org hopefully a sense of renewed focus and some hapenings around that.

All in all I’m sure I wont be missed, but enjoy the reboot. If you have any personal favourites then leave a comment. If you have opinions about mine then leave those too. Especially if they’re nice.

Tonight Tonight - Accessify Meetup

UPDATE Well. Five people seemed a good number on the notice and the size of the table we got at the Forth. The trick of leaving a copy of bulletproof web design casually on the side of the table worked a treat.

Lots of hello’s, some vague recognition and lots of shared experiences and good ideas floated around. All in all a positive thing I though and hopefully the first of similar meetups in Newcastle.

Hi to, in no particular order:

The accessify forum meetup is tonight was on Thursday at the Forth for anyone who doesn’t know about it and is around the area. Looking to be a small number turning up but should hopefully be good to meet new people. I’ll post more details on here, and any photos (no photos, sorry), post event.

What do I want out of it besides the beer? Hopefully some ideas and enthusiasm. I keep meaning to do more with newcastlenewmedia and a few people have expressed an interest in pulling some things off – the mailing list even kicked off yesterday with a flurry of posts. So some concrete ideas, a broader network and some beer will do nicely.