Archives filed under "Web Design"

So true.

It’s not unlike the situation with bugs: you solve one, and 14 new ones pop up.

You’d have to be living under a rock somewhere (or have a life outside of the Internet) if you haven’t heard about the “micro-blogging” platform Tumblr.

“Blackened Salmon” from Selleck Waterfall Sandwich

I think people call it a “micro-blogging” because posts on most people’s tumblelogs are pretty small: a picture or two, and a handful of words. But it doesn’t have to be: I could easily replace this blog with Tumblr & there would be little difference. It’s fully capable of handling short essays.

Apart from its ease of use, what sets Tumblr apart, really, is the community. There’s a fascinating, obsessive energy containing some wonderfully weird things, like “Selleck, Waterfall, Sandwich”, a tumblelog that shows picture combinations of those three things; that, and that only. They can make you see something in a radically different light, like the previously-praised Big Caption or “Space Trek”:

Space Trek, which documents “the quiet despair of the Starship Enterprise”

One of my favourites was “Three Frames”, which took (you guessed it) three frames of various movies, turned them into looped, animated GIFs and presented them to the viewer. Doubtless due to some misguided DMCA takedown, it was briefly offline, but is back! Again, it made you see something in a different way: how much, or little, a movie scene changes in three frames. The same author created Aloha Friday, from someone’s snapshot collection. An interesting chronicle of youth, it feels (to me) like some parallel world of my own early university years in Florida & as such evokes a curious pang of nostalgia, all the more peculiar because these pictures are not from my life.

I’ve seen them dismissively called “single-serving sites”, but I’m not aware of any rule stating that any given website has to be all things to all people. What I am aware of, however, is that browsing tumblelogs has taken up an increasing amount of my viewing. That’s rewarding.

Serge Keller has compiled a series of screenshots of early websites. How far have we come?

Alta Vista, which used to be the search engine, 1996.

Alta Vista in 1996 wasn’t a million miles away from Google today. Visually speaking, that is. Apple in 1997, however, shows how much things have changed:

Apple, 1997, during its “beleaguered” phase

It’s been a while since I’ve seen this. I think it interesting the lack of change for “harder” information gleaning, à la Alta Vista & Google. Only recently has Google been modifying its look. Information services is clearly a very conservative field.

Web designers who are interested in providing an optimal experience for viewports of widely-varying width—I’m looking at you, traditional computers, iPhone & iPad—will be very interested in responsive web design.

A term coined by Ethan Marcotte in a revolutionary article (and compelling read), responsive web design takes together a number of elements that have been rattling around recently—CSS3 media queries, fluid grids, flexible images, in particular—and Marcotte showed how they can interact with one another to provide a powerful web presence across widely varying viewports. Since then, he’s expanded upon the subject by publishing a book. It’s the single best place to go in order to get up-to-speed on the subject—although, like all “A Book Apart” titles, it’s woefully small & at best a very general introduction to the subject.

I’ve just completed the process of converting a site I’ve been working on to a responsive design. This site is an ideal candidate for a responsive web design approach in that it’s an academic site & the participants, the prime candidates to access its content, are all around the world. The site provides information about upcoming workshops, meaning that the target viewers (participants in the academic project) are very likely to access the site’s content while using handheld devices such as the iPhone or iPad. As such, I received a nice introduction into the subject, particularly with the real-world repercussions.

Janus Cascade

One thing that I didn’t notice in Marcotte’s article or book is that by wrapping our designs in media queries, a style’s cascade is now two-facing. There are massive implications with this approach, and if you take a pixel-based approach, as opposed to the percentage-based approach Marcotte takes, all hell breaks loose. Here’s an example to show what I mean:

Say you have a DIV & when the viewport is a desktop size, you want it to be 100 pixels & float left; but on an iPad’s portrait mode, you want it to remain the same size & float right; and finally, on an iPhone portrait mode, you want it to be 300 pixels & display as a block. Here’s how you might go about that:

  @media screen and (min-width: 1040px) { /* For Traditional Computers */
    div { width: 800px; float: left; }
  }

  @media screen and (min-width: 810px) { /* For iPad: Portrait Mode */
    div { float: right; }
  }

  @media screen and (min-width: 320px) { /* For iPhone: Portrait mode */
    div { width: 300px; display: block; }
  }

If you looked at the page with the DIV in question in your various viewports, everything would seem to be OK. But for the sake of experimentation, on your desktop machine, resize your browser window.

You’d be in for a shock if you resized your browser window. When the browser’s wide, then the DIV is big & floats left. Shrink the window & the DIV floats right. What happens when you make the browser really small? Well, actually, it’ll still float right because you haven’t overridden the iPad portrait mode declaration. Now refresh your tiny browser window & you’ll see that the DIV now displays as a block. That’s because it’s not cascading the iPad portrait mode’s float declarations, because that condition hasn’t been met in your refresh. As Keanu Reeves would say: Whoah!

Now start resizing the window from that tiny width. You’ll notice that your floats aren’t floating, but displaying as a block; and furthermore, your box has not jumped to 1000 pixels in width, but has remained at 300 pixels. Again, it’s because you’re inheriting the display: block from the iPhone portrait mode declaration. See? Cascades now work two ways, depending upon how you resize. Double whoah! The solution here is to explicitly state in your iPad portrait mode that you want the div at 800px & also declare in each case where you want the DIV to float & how it’s to be displayed in the document flow.

Go With Percentages, Not Pixels

The other implication that I’ve only grazed above: working in pixels is a bad, bad idea. This is the reason why Marcotte exclusively refers to items in percentages: it’s a more elastic approach & won’t fall apart quite as thoroughly as pixel-based approaches. And in my experience, when I switched from pixels to percentages, the site coalesced really quickly.

Go Forth Warily

Freaky deaky responsive web design: you probably have a lot more testing to do now. And for Internet Explorer (prior to version 9, which is very good), you’ll need some help for reading media queries.

Make no mistake: responsive design is the future of web design & with the explosion of handheld devices, it’s very much worth it: no longer will you have to design multiple sites for different classes of devices. In fact, the first non-personal site, the Boston Globe, has just launched as a responsive site, and the power of this unified approach is self-evident.

Wow! It’s been quiet here. That’s for a lot of reasons, but partly because a) I’ve been getting over a long-term illness that had really had an effect on my work (which is now gone, thankfully) and b) my Mac suffered a nasty failure. It experienced weird symptoms, which were fixed when the graphics card & RAM riser boards were replaced. Good thing I got AppleCare for the machine.

In any event, while the machine was in the process of breaking, I realised that my local development databases weren’t backed up. Why? Because Apple’s Time Machine would want to back up hulking single-file monstrosities every time you modified it slightly. In my haste (and panic), I made an imperfect backup. When the databases were restored onto the machine, they wouldn’t work. I could see that they were there, the databases were listed, but attempts to access them inevitably resulted in failure.

It turns out to have been a permissions issue (Errno 13 in MySQLspeak: I now know that gzipped tarballs won’t preserve permissions). It took some hunting to get to the root of the problem, but if anyone else experiences this problem, the answer is that the MySQL data directory is likely to be owned by root, when it needs to be owned by MySQL. In my example, I’m assuming that the data directory is the one specified in a MacPorts installation:

  
    sudo chown -R mysql:mysql /opt/local/var/db/mysql5
  

Restart your MySQL server, and everything should work!