Listing all posts tagged webdesign

Noya and Bill Brandt with Self Portrait (Although They Were Watching This Picture Being Made), by David Hockney (1982). A fascinating pience on its own merits, discussed as metaphor in Frank Chimero’s great speech about responsive web design and technological determinism The Web’s Grain. Go read it, now.

Edits Quarterly is not only a good e-zine* about film and photography. It has probably the best webdesign I’ve ever seen. Period. (Hat tip to Wired Webmonkey — it seems the same authors launched an e-zine about baseball.)

* Do people still make these anymore? This is so 1990s!

Misc. links Nov 25th - Dec 12th

One of the founders of Netscape demolishes the ‘startup work ethic’: while some poor geek kills himself in a orgy of work and stay-awake drugs, some venture capitalist reaps most of the rewards while doing nothing. It’s true a few of these geeks will eventually get rich, but no human being should be thought of as a race horse. People should work 100 hours a week if they like it, not because someone sold them this idea it’ll get them rich — do yourself a favor and go buy some lottery tickets if you believe that, at least you’ll get your destiny sorted out far quicker. ···

Malcom Gladwell writes about Steve Jobs’ Real Genius. I know, I know: I too get sick when I read my feeds and see yet another article about Jobs!? Still, this one is good, and one of the few I’ve seen that demonstrates Steve Jobs was, first and foremost, an insufferable mix of perfectionist and plagiarist — a dictator who happened to be in business, not politics. ···

The Curse of Xanadu. An entertaining (and long) read about the long and fruitless development of Ted Nelson’s Project Xanadu hypermedia system, going on since 1965 and which had its first (kind-of) release in 2007. Classic Wired from 1995. ···

Two good ones from Thought Catalog: No One’s Real Anymore muddles through Modern Man’s lack of coherence (even though you could argue — successfully — that’s not a ‘bug’, but a ‘feature’); and Losing Your Metaphorical Virginity, which is said to be regained whenever people find themselves in love (and I think I do agree). ···

Lightworks looks set to be the first decent open-source video editing software. I’m yet to invest real time in it, but so far it feels a little weird: the UI is too messy, and I found it shares the Avid philosophy of taking over an entire hard drive and pre-converting every single piece of media you import. Which is good if you are using Lightworks in a dedicated machine, but is an awful idea in my laptop. Anyway, the feature set is impressive — I’ll still try editing some small projects in it. ···

This looks like a very well-conceived HTML and CSS course. I’m tempted to watch some of the classes myself. ··· indexes HTML, CSS, DOM and Javascript/jQuery documentation in one convenient place with a nice simple interface. File under Extremely Useful. ···

A good list of tips and resources on improving a website’s performance. ···

The Arty Bollocks Generator writes tedious artist statements for you. How long until someone gets a text generated here published? You know it’s bound to happen. See also: acb’s Postmodernism Generator. ··· Exactly what it says. ···

I never knew exactly what We Are Unreasonable People was. Probably it was just an outlet for a certain class of stuff I made, and a few friends also did. Probably these are the sort of artifacts people call ‘art’ — except others rarely called these as such.

Anyway: I redesigned the homepage and adapted some of the works for nowadays (eg. some videos still required Real Player or Windows Media — ugh!). If nothing else, it’s a relic from pre-blogging, pre-Flickr, pre-YouTube days, a short era in which people who wanted to show stuff on the Web got dirty with HTML and made up a homepage.

Maybe I — or someone else — will come up with new Unreasonable stuff soon.

Little details: the menu bar

One of the things I find most satisfying while designing/developing a website is implementing those small, almost imperceptible details that can mean Quality, the Web equivalent of sophisticated stitching in clothing, and which to me feels like a particularly nice click must feel to a master watchmaker. So today, as I made a few small tweaks to this website (meaning this one, Tumblr-folk) — including better-looking YouTube embeds, fixing lightbox weirdness in pages containing embedded videos, etc — I started thinking how proud I was of the site’s navigation bar. Granted, is not as if I invented the wheel or something, and you can see the same kind of navigation in lots of other places out there. But still, I’m really pleased with the result — and with the implementation, which I think is rather clever:

As you can see, scrolling down the page will summon a fixed navigation bar, and scrolling to the very top will make it disappear under the site’s heading (which also contains navigation links). The real trick here is that everything is done with CSS, no Javascript is required to render the fixed navigation bar once you scroll past some Y coordinate:

header { display: block; position: relative; background: url("header-bg.png") repeat-x; width: 980px; height: 150px; z-index: 100; } #header_fixed { display: block; position: fixed; background: url("header-fixed-bg.png") no-repeat; width: 100%; z-index: 50; top: 0; left: 0; }

I do cut some corners in the above code, but you’re free to figure it out on your own or View Source. The gist of it is that the fixed header element (#header_fixed) is sandwhiched between the main page div and its header (which I wrote using the HTML5 element of the same name): just look at their z-index! As you scroll past the header, the fixed element is revealed underneath. Some clever PNG transparencies and you get the ‘dissolve’ effect you can see here. I found that a clean transparency gradient made that transition a bit weird so I made use of some stripes.

Another detail I added to the fixed navigation bar is that it’ll scroll you back to the top of the page if you click on it, à lá Google+. For that, I did need some simple jQuery:

$('#header_fixed').click(function(ev) { $('html,body').animate({scrollTop: 0}, 800); }); $('#header_fixed a').click(function(ev) { ev.stopPropagation(); });

The only subtlety to it is that you don’t want any scrolling to happen when the visitor actually clicked a link in the navigation bar, and that’s where that stopPropagation() event method comes in: it’ll block the event from being activated further up in the DOM, effectively overriding that first function. A useful thing that’s good to know.

Misc. links Sep 27th - Oct 14th

Sorry About My Face. I too share the same problem — often my face reads bitter even if I’m actually daydreaming about nice things. And nobody takes “it’s just my face” for an answer, which leads to episodes in which I feel a significant other is acting like someone in a club suddently asking me “where are you looking at?!” and trying to pick a fight, etecetera. Perhaps I need to find an early XXth century Virginia Woolf-looking girlfriend… ···

A conservative politician calls for science. Despite being mostly on the other end of the conservative-liberal spectrum, I wish there were more politicians like this. Far too many people people — in the left and right alike — believe and act as if the Outside World would fit with their preconceptions. It won’t: because that’s the very definition of Outside. ···

Film is on its way out, as the last 35mm cinema cameras were built. Am I being sacrilegious by saying and it was about time!? Film has its charm, but is wasteful bordering on the insulting — like printing a whole sheet of paper for every word a writer types. ···

Warner Brothers is developing a film based on a Reddit discussion: could a single battalion of US Marine soldiers fight and destroy the entire Roman Empire? This calls for the ghost of Philip K. Dick. The entire episode, not just the film premise. ···

And also speaking of film: Peter Bogdanovich’s Blogdanovich. ···

Lecturefox links to a mountain of free university lectures. ···

The Golden Grid System. This makes me want to redesign this whole thing, dammit! ···

A funny read every once in a while: the problem with n00b time-travellers that keep killing Hitler. ···

jQuery Enhanced Lightbox

Do you like the ‘lightbox’ I use to display big images on my website? Now you too can download and use it. It’s free! And it is marginally superior to other lightbox scripts, which is why I made the effort:

  • You can add titles and descriptions to images;
  • Images automatically resize to fit in the browser window (but you can set an attribute to disable this).

I’ve also started a new code scrapbook, in which I’ll post more useful scripts in the future.