Do I need an iPhone?

Of course I don’t, but I do have one, and that’s what I’m used to. However, after a few days I kind of got used to, and almost enjoyed (almost) not being connected to the internet, the internet that I spend 8+ hours a day sat connected to.

The problem

Sure, the first few days were okay. And I had bought into a policy whereby the damaged item is replaced in 48 hours. I rang up and was told the it would in fact take 10–12 days. It took 30. Anyone who owns an iPhone surely knows that that just isn’t easy.

The insurers name? Read the opening paragraph again, closely ;) Shh…

Anyway, anyone following me on Twitter will know that this whole farce has really wound me up, with error after error on the insurers part. You will also know that I have refused to name them. This was for the sake of professionalism, while ever they were messing around, and I was keeping it amicable, they were 100% in the wrong, nothing could come back to me, nor could my actions influence theirs (i.e. me being rude making them even slower etc.). It didn’t really work to my advantage, but still, better that than be a rude shouty b*stard to them, eh?

Too much time on my hands!

Thai • Po • graph • e

Okay, okay. That was a very alarmist intro. There is no web developers’ apocalypse around the corner (not that I know of anyway, please don’t take anything I say about the apocalypse as read. I don’t want that responsibility.), nor are we going to have to regress to using tables and spacer GIFs again. The real issue here is that with all this new technology that keeps emerging and exciting web developers is unwittingly reimposing the restrictions of yesteryear…

Screen resolutions

Remember trying to break away from 800×600px?

With the movement toward a more mobile web, screen resolutions are in fact getting smaller. The iPhone’s maximum resolution is 480px, increasingly popular netbooks are set at about 1024px wide. Such a shift toward mobile and portable devices mean that screen sizes are actually getting smaller.

In my opinion, iPhones and other mobile devices should be handled separately, serving them device specific CSS. Netbooks on the other hand are still ‘desktop’ machines like any other. Their smallness is their key feature, and at 1024px horizontal resolution, they aren’t that small anyway…

With the 960 Grid System, and an optimum line length of 52–78 characters, sticking to 1024px shouldn’t be that difficult anyway. I believe that although desktop monitor sizes are generally getting larger, other equally important technologies are creeping up, and as responsible developers you should cater for them. Sure you may want to start adopting the 1080 grid, which is all well and good if you know your audience, but to cater for the majority, we’re not ready to burst 1024 yet.

Connection speeds

Remember building for 56k dial up connections? (I don’t)

Where permanent and fixed connections are getting much faster, connections to mobile devices through means such as 3G are much slower. The ability to optimise sites to be fast loading over such connections is getting more important. As edge-case resolutions are getting smaller, edge-case connections are getting slower. Much slower.

A word on Flash

Remember 2Advanced? A site of yesteryear…

Flash seems to be dying a death anyway these days, slowly being superseded by Javascript and Canvas et al. However, what was once a fantastically powerful technology has been ousted completely from Apple’s i products, making in an inviable option for content which needs to be universally accessible.

A real life example?

Anyone with an iPhone will know what I mean—spending any amount of time on an iPhone loading poorly optimised sites is a real grind, and via some sensible optimisation these problems can be easily alleviated.

However, a more interesting example might be the one that happened to myself… When we first started at Venturelab we really were building the company from the ground up. For the first few weeks we were without desktop machines and internet. I was working on a 10.1″ netbook with a screen resolution of 1024×600px, and over a poor 3G connection via a dongle.

“Accessibility isn’t just about disabilities, it’s about varying degrees of ability to access content.”

Working in this manner really made me wonder whether enough people are delivering content in a manner which is accessible on numerous levels. Accessibility isn’t just about disabilities, it’s about varying degrees of ability to access content. As responsible developers your content should be accessible through a full spectrum of means and in an acceptable manner.

All it takes is some decent optimisation (which is also set to reap SEO benefits) and a reasonable page layout and you’re already halfway there.

However, it’s not all that bad. As border-radius.com would have you believe, the syntax to create an element with top–left and bottom–right corners with a 50px round, and top–right and bottom–left corners with 10px rounds would be:

-webkit-border-radius: 50px;
-webkit-border-top-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-moz-border-radius: 50px;
-moz-border-radius-topright: 10px;
-moz-border-radius-bottomleft: 10px;
border-radius: 50px;
border-top-right-radius: 10px;
border-bottom-left-radius: 10px;

Wrong, you can actually use the border-radius shorthand to nail this in three lines:

-moz-border-radius:50px 10px 50px 10px;
-webkit-border-radius:50px 10px 50px 10px;
border-radius:50px 10px 50px 10px;

The sytanx follows the following rule: border-radius:top–left top–right bottom–right bottom–left;. I’ve tested this in Firefox (-moz-border-radius), Webkit (-webkit-border-radius) and Opera (border-radius) and it works just fine.

Addendum

You’d think Webkit would just be Webkit, right? Wrong. This works in Chrome but not Safari. I’ve had reports that Safari 4.0.4 (I guess it’s not found it, get it? Oh never mind.) doesn’t work. Useful…

Still, this version will work, and is still considerably shorter:

-webkit-border-radius: 50px;
-webkit-border-top-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-moz-border-radius:50px 10px 50px 10px;
border-radius:50px 10px 50px 10px;

Also, follow Suze on Twitter.

As the site was built very quickly, we are adapting it as it grows and fixing any bugs as they happen. Let me know if you find anything astray. Anyway, enough talking, go look for yourselves!

The shampoo lid

Imagine the scenario, you’re a girl with long hair and you’re washing it in the shower. Your hair is in your eyes, and covered in shampoo. Opening your eyes would lead to some serious stinging! You reach down and below you, by your feet, you have two identical bottles—except they’re not identical… One has its lid on the top and the the other has its lid on the bottom. As long as you’ve learnt which one’s which, as my girlfriend clearly has, you know without having to open your eyes which bottle you have hold of. This is a really ingenious piece of usability, yet so so simple.

The vacuum cleaner

Another great bit of usability I saw was in Suzanna’s vacuum cleaner. It has a retractable cable which rests inside the body of the cleaner when it’s being stored. When pulling the cable out to plug it in, when you are roughly a metre away from reaching its furthest limit of extension, you see a yellow marker on it. This indicates that something must be about to happen, and then when you pull that extra metre out, there is a red marker to signify that this is a far as the cable will extend. This means that there’s no chance of accidentally pulling the cable out too far and damaging it if under the impression that there’s more wire in there. Simple, but so helpful.

The lesson?

A lot of the time, the best way to make something usable is to imagine yourself using it—what would you want out of it? Because nine times out-of ten someone else would appreciate that feature too.

I hope Type Tips comes in useful for you, and that the information in there is of some notable value. If you do like it, please share it by tweeting the link, I’d appreciate it. Any other thoughts? Just drop me a comment…

Many hands make light work

There are lots of contradictions in sayings and phrases. Like this one, if many hands do make light work, then how does this next one work?

Too many cooks spoil the broth

A stitch in time…

While the cat is away…

Absence makes the heart grow fonder vs. time is a great healer

This one is another glaring contradiction, so I decided to combine the two into one poster.

Out of sight, out of mind

Two wrongs don’t make a right

This one doesn’t really follow the code paradigm, but I thought I’d include it anyway.

Got any more that would work in this way? Leave any suggestions in the comments.

Also, I do realise that, programmatically, not all of these posters make perfect sense. For example, $cooks > 'enough' doesn’t really work in a programming sense… It’s just a bit of fun!

Here is a little tongue-in-cheek post taking some of the things an offending designer/developer might say, but from the lips of a surgeon. After all, I do love a good analogy.

If you can think of any more, please feel free to add them in the comments. And this is just a light-hearted, jokey post. I’m not comparing the importance and responsibility of surgery with that of web design… honest.

View demo

The trick here is to force the list to break at the right point. If you want two columns, you need to float the list items left and set them at 50% width, therefore the list items will only ever fit two side-by-side, then begin again on the row beneath. By that token, three columns would require a width of 33% and floated left, four would be 25% and so on.

The code

Both the markup and CSS for this is incredibly simple, nothing fancy, no CSS3, nothing progressive, just basic styling applied to lean markup.

The markup

The markup for this is just a simple ul, thus:

<ul id="double"> <!-- Alter ID accordingly -->
  <li>CSS</li>
  <li>XHTML</li>
  <li>Semantics</li>
  <li>Accessibility</li>
  <li>Usability</li>
  <li>Web Standards</li>
  <li>PHP</li>
  <li>Typography</li>
  <li>Grids</li>
  <li>CSS3</li>
  <li>HTML5</li>
  <li>UI</li>
</ul>

And to make this into a multiple column list:

ul{
  width:760px;
  margin-bottom:20px;
  overflow:hidden;
  border-top:1px solid #ccc;
}
li{
  line-height:1.5em;
  border-bottom:1px solid #ccc;
  float:left;
  display:inline;
}
#double li  { width:50%;} /* 2 col */
#triple li  { width:33.333%; } /* 3 col */
#quad li    { width:25%; } /* 4 col */
#six li     { width:16.666%; } /* 6 col */

When to use this

Use this wisely… It displays content in an ambiguous manner and should not be used where order of reading is imperative.

This method should only be used if the lists content doesn’t require any specific ordering as the markup is written linearly and the list is displayed in a matrix. As you can see, the way the content is displayed means it can be read across»down»across or down»up»down. This means that the way you write your content is not necessarily the way it will be read. In my example this isn’t an issue, as the content can safely be read in any order.