Graphic Design

Cold War check point

Simon Willison — 2004-01-29T01:08:20-00:00

One main reason I detest 100% Flash-based sites so much is because they don't promote sharing and linking which are two big things to do on the Web. See a cool new game screenshot that you want to show your friend? Sorry, no can do with that 100% Flash-based site because everything is contained under one URL which is like a Cold War check point for the entire site.

Nollind Whachell in a discussion on Asterisk*.

Collaborative Redesign

Simon Willison — 2003-11-25T01:29:51-00:00

Out with the orange, in with the green. As with my last redesign, only the CSS changed. A fun deviation with this one was that it was a collaboration between myself and Natalie over nearly 5,000 miles, using edit styles and AIM to pass each other snippets of CSS and instantly try them out.

I haven't tested it very thoroughly at all so if there are any glaring abominations leave me a comment - I know about the blogmarks looking slightly out of place in IE 6 but I haven't quite decided if I can be bothered to find a workaround yet.

Full page zoom

Simon Willison — 2003-11-09T00:35:20-00:00

For as long as I've understood the issue, I've been an advocate of liquid layouts over fixed widths for web page design. Liquid layouts are layouts like the one used by this site, where the page adjusts to fix the size of the user's browser window. Fixed widths on the other hand are sites such as LJWorld.com where the width of the page is fixed no matter how large or small the browser window gets.

There are good arguments for both sides of the issue. Liquid layouts give control to the user and avoid wasted screen real estate; fixed width layouts give the site author greater control over the look of the site and (more importantly) ensure that text line widths remain sensible.

In recent months, I've been seriously reconsidering my preference for liquid layouts. I'm currently using Windows at a resolution of 1280 x 1024 with my browser fully maximised, and reading liquid sites is a pain. The standard cry of liquid layout fans in this case is "you don't have to surf with your browser window maximised", and I have repeated this myself many times. The problem is, I surf with my browser window maximised. I don't know why, but I just feel more comfortable with a maximised browser window (it may be related to the ridiculous number of tabs I normally have open). My solution so far has been a combination of using these bookmarklets and increasing the text size of the page, but fixed width layouts are becoming more and more appealing.

It turns out however that there is a third option. Load up this page, recently posted to Webdesign-L by Rick Cecil. Now increase and decrease your browser's text size. The whole page scales with the text, thanks to extensive use of the em unit for setting the width of various page elements. I don't know if this technique even has a name yet but if it hasn't I suggest "full page zoom". I will certainly be investigating it as an option for future projects.

One final thought: if only the current pack of browsers supported the min-width and max-width CSS properties, this whole issue could have been solved years ago.

Update: While experimenting with this idea further, I came up with this Javascript experiment. Make of it what you will.

Halloween Decorations

Simon Willison — 2003-11-01T02:12:02-00:00

Spotted so far:

Lawrence Journal-World (where I work) - check out the funky blinking red eyes
Google - naturally
Radiac.net - "Randy Towers" ;)
Sam Ruby

Quite a poor showing really. I was going to add a bat to my top right hand corner but Halloween is already over in the UK so it didn't seem worth it.

Fun with DHTML and Flash

Simon Willison — 2003-10-20T05:20:12-00:00

Travis Beckham's podLob features 56 experiments in Flash and 19 in Javascript/DHTML. I particularly liked the Flash image transitions. I'd probably complain bitterly I came across that kind of effect on a real site but as experiments they're fascinating and great fun to explore.

Andy in the Garden

Simon Willison — 2003-09-09T10:15:51-00:00

My friend Andy's design skills have been recognised by the CSS Zen Garden. Congratulations! He's number 42.

Hinting

Simon Willison — 2003-09-08T20:38:24-00:00

I've always wondered how fonts work. I now have a much better understanding of the technology involved thanks to Microsoft's excellent Typography site, in particular this Introduction to hinting from 1997 (via ).

Great liquid design example

Simon Willison — 2003-08-28T05:00:43-00:00

I've started browsing the web at 1600x1200, because I have a nice big monitor and a tendency to browse with my font size set to large. At this resolution you really begin to appreciate the argument put forward by fixed-width site design advocates that liquid designs can end up plain unreadable on some setups. I could just reduce the size of my browser window, but I'm lazy. Instead I'll point out that the Rocky Mountain Harley-Davidson dealership is a liquid site that manages to look great even at ludicrously high resolutions. It's got some very decent CSS and structural markup under the hood as well.

Adaptive Path Redesign

Simon Willison — 2003-07-09T14:45:21-00:00

Doug Bowman and Adaptive Path have launched the redesign of the Adaptive Path site. It's well worth exploring: the site looks gorgeous, and is a great example of best practise structural markup, CSS and web standards compliance. Doug has an overview of the highlights of the new design, which includes a brief explanation of the brilliant CSS double rollover effects used for the team photos on the home page.

CSS drop shadows

Simon Willison — 2003-07-09T00:32:56-00:00

Yet another groovy CSS demo: Drop shadow effects using only two nested divs and an alpha-transparent PNG. They look passable in IE as well. Another gem from Paul Hammond's link blog. Incidentally, Paul has written up some interesting observations on how a previous item from his link blog spread itself around the 'net after I linked to it a few days ago.

Another rant about Flash

Simon Willison — 2003-06-23T19:21:20-00:00

Michael Pick has kicked off an interesting discussion on the usefulness of Flash, which is continued on mezzoblue. The key idea under discussion is that while Flash has its uses it remains a fundamentally bad choice for serving up text based content. I couldn't agree more. It's nice to see that some Flash designers think the same way.

That said, a discussion with friends at Uni a while back made me reconsider my position on Flash to a certain extent. I was arguing that full Flash-based sites practically always make textual content slower and/or harder to access, and (with the notable exceptions of online cartoons and interactive graphical information) are thus a bad choice for practically any site containing textual information. I was then confronted with something I hadn't really considered: some people use the internet to look at pretty things and be entertained rather than just to find information. Over the past few years I have become reliant on the internet as a tool for finding information, so the idea of information being "hidden" behind a layer of eye candy lost its appeal a long time ago. I had never really considered that there are many people who log on to the 'net for half an hour every few evenings with the soul aim of entertainment rather than information retrieval.

With that in mind, maybe the X2 Movie site wasn't quite as bad as I thought it was. It was just aimed at a completely different audience.

This does nothing to change my overall opinion of Flash as a tool for serving textual content. I'll believe Flash is a good choice for textual content when I can access that content using Lynx.

N.B. An issue I haven't touched upon at all is Flash as a tool for serving up "Rich Media Applications", aka web-based GUIs that provide proper interaction as opposed to the current click-wait-reload cycle provided by HTML forms. I agree that Flash has huge potential here, although I have yet to see an application that really uses this capability to an advantage over more accessible HTML. And I won't believe Flash is truly accessible until I can use Flash based web apps from a command line. I'm hard to please like that.

Gorgeous CSS Rollovers

Simon Willison — 2003-06-17T23:57:46-00:00

I've been planning a follow-up to my basic link styling tutorial for over a week now, but it's going to be a lot shorter now thanks to Al Sparber's excellent Uberlink CSS Rollover tutorial, which covers a lot of useful concepts and ends up with a truly gorgeous looking result. Thoroughly recommended.

More CSS Zen Garden submissions

Simon Willison — 2003-06-14T14:17:21-00:00

The CSS Zen Garden is growing at a pretty impressive rate, with another three submissions since I last checked it a few days ago: Friendly Beaches, Calm & Smooth and Viridity. Also added recently is What Lies Beneath, which is unique in being the first horizontally rather than vertically oriented layout. It's a shame there's no automated way of tracking the garden (an RSS feed of new submissions for example) as I keep on forgetting to check back for new material.

Eric Meyer Redesigns

Simon Willison — 2003-06-11T23:59:43-00:00

Eric Meyer has released a new selection of designs over on Meyerweb. The designs are inspiring, and Eric's CSS is well worth perusing for style tips and insights in to reliable methods of creating relatively complex layouts.

Golden Mean

Simon Willison — 2003-05-31T23:51:45-00:00

Golden Mean is Doug Bowman's first contribution to the CSS Zen Garden, and it's a very nice piece of work. Even better is the fact that Doug has provided extensive coverage of the design process (including technical CSS details) on his blog.