Responsive elements that retain their aspect ratio

Here is a quick tip for creating responsive elements that retain their aspect ratio as they scale.

The problem

In a fixed width layout it is simple to specify both the width and the height of an element:

.rect {
    width: 800px;
    height: 400px;
}

When creating a responsive layout things get trickier, since (to the best of my knowledge) it isn’t possible to specify a percentage based height that is relative to an element’s width. For example the following CSS rule won’t have the desired result, since the height value will be ignored:

.rect {
    width: 100%;
    height: 50%;
}

A solution

However, when we specify a padding-bottom value for the same element, the padding measurement is calculated relative to the element’s

Build a parallax scrolling website interface with jQuery and CSS

Parallax scrolling website interfaces have been popping up all over the place recently. I didn’t want to miss out on the fun, so I have put together a parallax scrolling demo built using jQuery and CSS.

Book Review: Dig Deal

Robert Hoekman, Jr is a user experience designer and consultant who is best known for his books about interface design, Designing the Obvious and Designing the Moment. His self-published book Big Deal: On Being Famous to Almost No One tackles a far more personal subject. In Big Deal Hoekman, Jr recounts his rise to the top of the web design field, and describes how his craving for professional notoriety eventually devastated his personal friendships, marriage, and sense of self worth.

The form of celebrity Hoekman Jr discusses in Big Deal has been dubbed “micro-fame”:

My name is Robert Hoekman, Jr, and in certain rooms, under certain circumstances, at certain moments, surrounded by certain people, and when all these very certain things come together, I am a big fucking deal.

In other words, Hoekman, Jr might be unknown to the general public, but within the web design industry he is a bona fide rock star.

FormBuilder updated to v1.5

It’s been almost exactly four years since I updated my FormBuilder PHP class, but believe it or not I have been slowly modifying and improving the class during the intervening years. I figured it was high time I rolled those improvements into the public version of the class, so here’s what’s new in version 1.5 of FormBuilder:

• Better handling of checkbox results in the emailResults method.
• A custom form submit URL can be passed to the FormBuilder constructor. Useful when using FormBuilder in an environment that is performing URL rewriting.
• Replaced deprecated ergei functions with preg_match.
• Checkbox field types are correctly processed when field is not mandatory, and the user didn’t check any of the available options.
• Added new field type: file (for file uploads). Note that files are currently not emailed when using the emailResults method. Any handling of the uploaded files should be accomplished manually by accessing PHP’s $_Files array.
• The textbox and textarea field types now accept an optional defaultvalue parameter.
• Fixed a bug that meant checkboxes had a CSS class of ‘fbheckbox’ instead of ‘fbcheckbox’.

If you encounter any problems with the new version please let me know.

How to tell if you’re a web design OG

This morning I’ve been following the hilarious (and cringe inducing) web design OG Twitter meme started by Jeff Croft (if you’re wondering, OG stands for Original Gangster). Here are a few of my favourites:

If you created a website that had “Works best with Netscape Navigator” you may be a #design_og
@_j12

If you remember Adobe PageMill, you may be a web design OG. #design_og
@meyerweb

If you’ve ever said that your “site looks better in Netscape Navigator” you may just be a web design OG! #design_og
@hudsonperalta

If you remember cleaning up bad Word-to-HTML markup by hand in a text editor, you might be a web design OG #design_og
@DataG

If u ever designed an interactive CD-ROM you’re a #design_og
@daveixd

Goodbye conditional comments

The very first article I wrote on this blog, back in July 2006, was titled Goodbye hacks. Hello conditional comments. In that post I discussed how conditional comments could be used to feed different stylesheets to older version of Internet Explorer, smoothing differences between browser rendering engines without resorting to CSS hacks.

Conditional comments have provided a great stopgap measure while we wait for obsolete versions of IE to fall into disuse, but as the market share of IE6 and IE7 has dwindled I’ve found myself relying on them less and less. In fact, I can’t remember the last time I resorted to a separate stylesheet to make an old browser behave.

How to spot a troublesome client

I’ve written in the past about how it is just as important to turn down the wrong clients as it is to work with the right ones, but even when a client ticks all the right boxes they might still spell trouble. Here are a few problematic clients to watch out for:

The Carrot Dangler

The Carrot Dangler will tempt you with promises of lucrative work in the future if you agree to take on their first project at a generous discount. Like the carrot that coaxes a donkey to pull its cart, this client hopes that the lure of more work will secure your loyalty, and make you receptive to the idea of lowering your fee.

It goes without saying that the dangling carrot will always remain just out of your reach, as elusive as the proverbial pot of gold at the end of a rainbow. If you do have an opportunity to work with this client in the future they will almost certainly plead poverty again, then dangle another carrot in front of you.

When confronted with a Carrot Dangler remind yourself that if they don’t have the money to pay you fairly now, they probably won’t in the future either. Don’t let the carrot tempt you into putting yourself at a financial disadvantage.

A website can’t be measured in pages

For a long time page count has been used as a unit of measurement in web design and development. Clients will often phrase a pricing enquiry by asking “how much would it cost for a (x) page website?”, and when quoting on a project it can be tempting to measure the required effort in these terms. Some web developers go a step further by assigning a fixed value to a page, and sell page-based website packages to their clients: a 5 page website for $800, a 10 page site for $1,500 and so forth. This approach is shortsighted for several reasons.

Thinking Web, a free ebook from Sitepoint

Sitepoint have just announced the release of a free ebook, Thinking Web: Voices of the Community. The book is a collaborative effort designed to tap the wealth of knowledge that can be found in the Sitepoint forums.

The book is over 200 pages in length, and covers a whole gamut of topics including web accessibility, coding HTML emails, database basics, online marketing, and going freelance.

Get the book for free from the Sitepoint store.

What to charge when subcontracting

There is an interesting conversation going on in the Drawar forum about how much freelancers should charge when they subcontract their services. The question being posed in the forum thread is whether a designer/developer should consider discounting their hourly rate when they take on contract work.

While I prefer to take on projects where I deal directly with the client, I still do my fair share of subcontracting, both for agencies and for other freelance designers, and my policy is to always charge my full hourly rate.