Tags: iQ

Progressive Enhancement Basics

Some thoughts on progressive enhancement, although I disagree with the characterisation of progressive enhancement as being the opposite choice to making “something flashy that pushes the web to it’s limits”—it’s entirely possible to make the flashiest, limit-pushing sites using progressive enhancement. After all…

it’s much more a mindset than a particular development technique.

Front-end performance for web designers and front-end developers by Harry Roberts

A really good introduction to front-end performance techniques. Most of this was already on my radar, but I still picked up a handy tip or two (particularly about DNS prefetching).

At this stage it should go without saying that you should be keeping up with this kind of thing: performance is really, really, really important.

{ io: The Web Is Growing Up }

A lovely bit of hypertext.

Blame the implementation, not the technique | TimKadlec.com

It might seem like an obvious point, but what Tim is talking about here happens over and over again: a technique is dismissed based on bad implementation.

It’s Not Working For Me: #crit | Mark Boulton

Mark talks about design criticism. This makes a great companion piece to the Jon Kolko article on design criticism that I linked to last week.

Do you want critique, or a hug? | Austin Center for Design

Jon Kolko shares his advice on accepting design criticism.

Resizable Displays | Fluid Interfaces

See now, this is why liquid layouts are the way to go.

Script Junkie | Flexibility: A Foundation for Responsive Design

Emily walks us through a responsive design case study, stressing the importance using percentages for layout.

LukeW | Multi-Device Layout Patterns

Luke catalogues layout patterns in responsive designs.

HTML5 and CSS3 Advent 2011

Here’s a geek advent calendar I missed. There are some great CSS techniques here.

Fluid Baseline Grid - A sensible HTML5 and CSS3 development kit

A set of default styles to get started on a mobile-first responsive design.

You Say Responsive, I Say Adaptive | Sparkbox

On the importance of using fluid grids as part of responsive web design:

We do responsive web design, but we don’t do it for the sake of being trendy. We do it because we believe it’s the way websites should be made. This is an opportunity for us to finally embrace the dynamic medium we build for. The web is not fixed width.

Responsive Data Tables | CSS-Tricks

Some good ideas for formatting tabular data for small screens.

Tips, Tricks and Best Practices for Responsive Design | Webmonkey | Wired.com

A nice round-up of responsive design techniques, with a particular focus on content first.

Fit To Scale | Trent Walton

More documentation of a responsive redesign, this time from Trent Walton. Be sure to check out the FitText jQuery plug-in that was created as a result.

Design for the changing web: Our response :: Studio :: Headshift

Documenting the process of switching to a responsive design. I think there’s always insight to be gained from seeing how your peers are approaching these challenges.

Demo: CSS drop-shadows without images – Nicolas Gallagher

Some nice drop-shadow effects. Generated content is the key.

Anna Debenham

Anna’s redesign is beautiful, no matter what browser or device you’re using.

The Personal Disquiet of Mark Boulton

A beautiful new responsive design from Mark.

Experimenting with responsive design in Iterations - (37signals)

37 Signals document their experiments with responsive web design. Looking good.

A real person, a lot like you | Derek Sivers

A beautiful reminder.

Talking Animal blug

This is the way to do an adaptable liquid layout. Media queries are your friend. Oh, and the content's good too.

Mike Harvkey - Closely Watched – The 10 best long tracking shots ever filmed - True/Slant

I'll take any excuse to watch the opening of Touch of Evil — I don't think it'll ever be topped.

iQ Font

How to draw a font with a car. With. A. Car.

Shinichi Maruyama

Black ink meets water.

Fluid Images — Unstoppable Robot Ninja

Ethan follows up his Fluid Grids article with an equally excellent piece on resizing images.

A List Apart: Articles: Fluid Grids

Superb article by Ethan on calculating percentages for liquid layouts. Read it. Do it.

Effective Design for Multiple Screen Sizes | mobiForge

A superb article by Bryan Rieger on designing for multiple screen sizes. The closing section makes it clear that if you care about mobile, you'd better get comfortable with liquid layouts fast.

cafe scientifique brighton

Philip Ball (author of the excellent Critical Mass) is coming to Brighton to speak at the Café Scientifique on the third Thursday of November. Excellent!

gist: 20758 — GitHub

A huffduffer plugin for Ubiquity: "This simple script allows you to huff duff any mp3 file simple by invoking Ubiquity and typing 'huff-duff-it'."

Simon Wiffen - Acoustic Singer Songwriter from Leeds

Just for the record, this is a superb example of a bulletproof liquid layout: Simon Wiffen, solo acoustic singer-songwriter from Leeds.

On Nails, Lipstick, and Redesigns — Unstoppable Robot Ninja

Ethan has redesigned. It's shiny and beautifully proportioned.

The Paragraph in Web Typography & Design — Jon Tan ?

A wonderfully informative and useful look at paragraphs styles ...in history and in CSS.

P8TCH | Commando Nerd Patches for iPhone Scanning

Nice QR code patches (I don't mean something that patches code, I mean a patch that you sew).

Edge to edge alignment with CSS | Matt Wilcox .net

Here's a very handy CSS technique for floating a group of objects edge to edge. I've been in this situation quite a few times in the past.

kropp

Good typography + stylish grid + liquid layout = WIN!

The Rissington Podcast | Like Gardeners Question Time, but for geeks

Check out the redesigned site for the podcast from Jon and John. Acknowledge the divinity in its gloriously liquid splendour. Smashing work, chaps!

Upcoming.org Suggestion Board

Did you notice that Upcoming recently switched from liquid to fixed? Have your say about that here.

18 Questions for Niqui Merret and Aral Balkan on Flash and Accessibility - Wait till I come!

Christian talks to Aral and Niqui about Flash and accessibility.

mezzoblue § About Mezzoblue

Dave redesigns. And before I could bash him for his wide fixed width layout, he went and added a Jeremy Keith Button® on his about page that toggles between liquid and fixed. Cheeky bugger.

Resolution vs. browser size vs. fixed or adaptive width | 456 Berea Street

Roger hits the nail on the head: "fixed widths are used for the wrong reason - designer vanity. Come on, you’re designing for the Web, which means it’s your job to let things be flexible when you can."

jonsonblog » Blog Archive » Male workplace restroom etiquette leads to scientific breakthrough

Me? I'm just pee-shy. From The Meaning of Liff: KETTLENESS (adj.) The quality of not being able to pee while being watched.

Screen Resolution and Page Layout (Jakob Nielsen's Alertbox)

The devil can cite scripture for his own purpose... and now I can cite Nielsen: "...use a liquid layout that stretches well for any resolution, from 800x600 to 1280x1024."

Design View : Andy Rutledge - Amazon.com Redux

Andy Rutledge proposes a new design for Amazon, saying "Many of these issues can be fixed and/or addressed by adopting a fixed layout." What a load of bollocks. Try doing a liquid layout right.

AdAge.com redesign gets job done

Design review by Jay Small.

Liquid Designs

This is something I always meant to do but never got around to: a gallery site for good liquid design.

Progressive Layout

Using JavaScript to serve up fixed or liquid layout based on browser width.

Etiquette and the Singularity - Reboot 7

Slides from Ben Hammersley's talk at Reboot 7 in Copenhagen. I can't wait for the MP3.

CSS Beauty | Designer in Action

I've been suckered into another debate on fixed width layouts: "Discussing whether 800 is better than 1024 is like discussing whether Coke is better than Pepsi when all you really want is a nice drink of water."

About fluid and fixed width layouts

Roger Johansson details his elastic design.