Likesalmon Design » Web Design

My Current Local Developement Environment

Ammon — Wed, 05 Aug 2009 04:33:31 +0000

Here’s my setup:

13″ Macbook 2-1 with 4GB Ram and 2.16mhz Dual Core processor
24″ Samsung HD flatscreen external monitor
Ubuntu Jaunty Jackalope 9.04
Firefox 3.x with Firebug, YSLow, and CodeBurner
XAMPP for PHP, MySQL, and Apache
VirtualBox with 4 virtual machines: Windows XP with IE 6, 7, and 8, plus OSX running Safari
Gimp and Inkscape for graphics
Gedit with snippets enabled for code

I have to tell ya, I’m pretty happy with things right now. Let today be known as the day I declared independence from OSX.

Dark PNGs in Safari

Ammon — Sun, 31 May 2009 07:43:39 +0000

For whatever reason, sometimes the transparent parts of PNGs appear darker in Safari than in other browsers. You can fix it by removing all the color correction metadata from the images with pngcrush:

pngcrush -rem gAMA -rem cHRM -rem iCCP -rem sRGB InputFile.png OutputFile.png

pngcrush is a command line tool that optimizes (read: makes smaller) PNG images. You can find out more about it on Wikipedia. I use it on OSX via MacPorts.

For normal PNG optimization, I actually prefer to use OptiPNG because it can optimize a whole directory of images with a simple command:

optipng ./*.png

OptiPNG overwrites the existing files with the new smaller files without any loss in quality. Good deal! Fast, easy, awesome. To bad it can’t remove that stupid color correction data though.

Columns of text should not be flexible

Ammon — Thu, 30 Apr 2009 23:46:13 +0000

There are examples of flexible layouts that work, but they do not have flexible columns of text, they have static width columns that move when the window is resized. So when the window is wide, the content fills in that space, when the window is narrow, the page gets long and narrow. These sites are great because they take advantage of screen real estate without compromising usability. I’ve seen some great examples that I’ll post as soon as I find them again.

Flexible columns are hard to read

There is only a narrow range at which text is nice to read. I use a max of about 80 characters and a minimum of about 25 characters. Any bigger or smaller and the text doesn’t flow right or is hard to track with you’re eye. So if your text is flexible, you will always have to set a min-width and the max-width. IE6 has trouble with both of these, and besides why go to all the extra trouble of making a flexible layout when it can’t really be all that flexible?

Its bad for multitasking

I’ve been learning Python recently and for whatever reason Python web designers love flexible layouts. So I’ve got a browser window with the tutorial taking up 1/3 of my monitor, my text editor in the middle 1/3 and a terminal window and browser window for testing open in the last 1/3. This is a great setup for most things on my widescreen monitor, but because the python tutorial uses a flexible text column that is sandwiched between the navigation sidebar on the left and an add on the right, I’m only getting about 100px of text even though the window 800px wide. I think the aim of flexible layouts is to give the user a choice in how the content is viewed, but this forces me to always view the navigation and the add, while squishing the content down to almost nothing.

And they make me lose my place

My final beef with flexible text columns is when I have to resize my browser window the part that I was reading gets pushed off the viewable part of the page. Now I have to go find my place again. This bugs me.

Problem solved

As a nerd, I’m drawn to difficult technical problems. Flexible layouts are hard, so every time I start a new website I ask myself should I make this a flexible layout? Well, no, I shouldn’t. Good to have that one figured out.