Reading about ‘res­ol­u­tion depend­ant lay­outs’ over on Warpspire (which takes a nar­row defin­i­tion ‘res­ol­u­tion depend­ant lay­outs’; only the pixel based (fixed) design via the JavaScript-route), it was the part about design for Mobile devices that really hit the nail.

Sorry folks, mobile devices deserve com­pletely dif­fer­ently designed web­sites than nor­mal sites. No amount of style switch­ing is going to change the fact that it’s a com­pletely dif­fer­ent exper­i­ence. Different exper­i­ences deserve dif­fer­ent design. Period.
~ Kyle Neath of Warpspire

He’s right. Note that this isn’t just good design sense, it’s also a prac­tical take on how to build them. It fixes any issues one might have with the mobile design of ones web­site, as design­ers can just let it go. Simply let the UA (User Agent; the browser) decide what’s best for that device with those fonts and those dimensions.

Not that I know what the proper name for this is, but I do know that subtly align­ing to a grid is very, very powerful.

( ~ Work from the Duarte Design Agency for their cli­ent Prophetik.)

In ‘mod­ern’ web design (as in, the last five years versus the five years before) there are three main ways to define your design.

Also called ‘fixed’, the first and most used method uses pixel meas­ure­ments to define the width (& height) of ele­ments on a page. The most obvi­ous advant­age to this method — and the reason it’s the easi­est to get your head around — is that you get pixel per­fect res­ults with it. Photos and other fixed ele­ments on your page will always fit, another huge advant­age. That’s also its down­fall how­ever, as it doesn’t increase in size as text scales, mak­ing the defin­ing of a good line-length quite difficult.

Which brings us to the next, most recent, method dubbed ‘elastic’. The crux of this method revolves around using ‘em’ to define (mainly) widths instead of ‘px’. You’ve already guessed of course that ‘px’ stands of pixel — but how is ‘em’ exactly defined? Well, an ‘em’ is the width a nor­mal ‘m’ takes up on the screen. This method has the advant­age of scal­ing along with the text. That means your line-length will always be exactly as you defined it, but, if an included pic­ture were to take up more width than the cur­rent line-length, it’d stick out.

Liquid has been going in and out of fash­ion for a couple of years now. It uses per­cent­ages (defined with ‘%’ in one’s code of course) to define the width of ele­ments. I think it was cre­ated with the inten­tion of not squan­der­ing pre­cious screen real estate, and while it does max­im­ise the use of the screen, it has sev­eral flaws. Given that screen sizes can vary a great deal, a designer can never be cer­tain the line-length is any­where near cor­rect and whether or not pho­tos actu­ally fit (push­ing them­selves off the screen, or worse, push­ing the design off the screen!).

In my next art­icle (not neces­sar­ily the next post!) I’ll talk more about hand­ling the down­sides of the meth­ods and how a mix of them is often the most effect­ive (and laden with browser flow errors — yikes!).

Upon the release of the Silk Icon Set (a really smooth free icon set), Joen of Noscope noted that:

Although beau­ti­ful, the feed icon (Feed) lacks the bot­tom left dot that’s part of the now stand­ard­ized feed icon. Does this bother any­one else? Does it even mat­ter? Creative man­date, or style over usability?

When think­ing about sac­ri­fi­cing some aes­thet­ics to improve usab­il­ity or just to adhere to unspoken stand­ards, it’s good to remem­ber this: In most cases, only people who can handle the change will notice.

7 sig­nals from the watch­ful elves of impend­ing doom. 9 rules for the dwar­ven lords, who broke them which res­ul­ted in 21 degree burn marks. 24 ways were tried to heal them, but in the end they just hid the marks with the help of 28 make-up stu­dios and one digital effects stu­dio. But alas, the marks worsened to 36 degree burn marks. No wait, 37!

Then, sud­denly, the same num­ber of sig­nals were received. ‘Go to 5411 CO’, they said. What a weird post­code! Where could that be?

So they trav­elled all 360 degrees of the world — shud­der — before they thank­fully ended up at 456 Bereastreet. There, in room 313 they finally found what they were look­ing for…

So what’s the deal with num­bers and design stu­dio names?

Looking through the Britpack list over on Malarkey’s site, I noticed JoeBlade.com and was amazed with his recently redesigned site, so here’s what I said:

Man, this is a really fine design! I can see a tad of HicksDesign in it (search box) but it’s all put together in an ori­ginal way — and more import­antly — it just fits. It feels right.

I really like it.

I browse the web all day long, and I’m a per­son who actu­ally reads the copy on most sites. And well, I have to tell you — it sucks. Big time. I find it a shame that so many site own­ers put such little stakes in copy writ­ing. All across the web, you can hear the web mas­ters chanting:

Content is King! King I tell you!

Yet rarely do they execute on their pro­clam­a­tions. It’s sad for me to see this, because they all seem to know what they should be doing, but rarely do they actu­ally do what they should be doing.
~ source: goodcopywriting.com found (unsur­pris­ingly) via Kyle of Warpspire (as Kyle is guy who’s behind both sites).

I get the feel­ing my copy writ­ing makes this journal unworthy of link­ing to goodcopywriting.com — but who knows, some stuff* might rub off!

* See? Stuff! You can’t use stuff…bad bad bad writ­ing! Although one might argue it’s a good example of bad copy writ­ing, and as such it’s a bril­liant little addi­tion. Yeah. That’s a pretty good excuse. I think I’ll stick with it. Yeah. Uhm, oh oh! Here I go again, writ­ing more stuff in the post scriptum than in the actual post itself. Ugh.