Optimal web page layout width

Monday, May 5th, 2008

The 960 Grid System CSS framework website, offers a nice explanation on why using a 960-pixel page width:

All modern monitors support at least 1024 × 768 pixel resolution.
960 is divisible by 2, 3, 4, 5, 6, 8, 10, 12, 15, 16, 20, 24, 30, 32, 40, 48, 60, 64, 80, 96, 120, 160, 192, 240, 320 and 480.
This makes it a highly flexible base number to work with.

I’ve been designing web pages with a default width of 955 pixels for a long time, and I always had a hard time dividing the width in useful modules, since this number isn’t a joy to play with.

Perhaps this might be obvious to some, but struck me as a very useful tip.

Got API?

Friday, February 22nd, 2008

This may be really old, but it’s that kind of tip that’s always useful, even is somewhat late.

For about a year now I’ve been using the great gotAPI, e simple website that compiles reference and documentation for a bunch of programming languages. It’s basically a group of XML indexes of documentation website, showing content in an iframe, providing direct links to the official websites were the docs are. Very simple, very effective.

And the site even remembers the tabs (languages) you kept open from the last time you visited.

Learning Flex through this tool has been infinitely easier and faster then if I had to depend on Adobe’s search.

Prioritizing feeds in Google Reader

Thursday, February 14th, 2008

Google Reader is great, no question about it. It’s my favourite feed reader, and proves itself useful time after time.

There’s just one thing that bugs me sometimes: when you have 137 subscriptions, as I do at the moment, it can get really hard to know what to read first. I realized how I was getting behind in information because it’s hard to decide what feed tagged as ‘design‘ to read from a list of 29, even knowing not all of them are really important.

So I did something simple: started a new tag, named ‘_must_read_frequently’, and set it as the the initial folder, under Preferences. Then I went about my feed list and tagged six or seven of them.

It’s been a lot easier to prioritize.

I know it’s something very simple, and not innovative at all, but maybe it just might be useful for someone.

* You can name your new tag whatever you want, of course; I just recommend adding the underscore or some other special character before it’s name so that it shows up as the first item in the folder list.

Grunge webdesign and visual recycling

Wednesday, February 6th, 2008

Smashing magazine ran a few days ago one of their extensive, image-crowded entry (to many of which I’m a big fan) on how there’s a trend towards ‘grunge’ style in webdesign.

I was somewhat surprised to see this line of visual presentation being brought up as a new new trend in webdesign. I mean—trends are always coming back and being recycled into something a bit different, but when the revival is 20 years apart from the original, it’s easier to digest.

70s typography, color use and proportions where quite ‘in‘ three or four years ago (great examples in MK12’s spots for AXN and Red Hot Chili Peppers’ video for Zephyr Song) and could be considered somewhat new because these characteristics where blended with the new possibilities that technology allowed.

But we’ve been just past grunge, in some aspects we may not even be through with it, and it’s already coming back.

Stuff comes back and, somehow, it seems new to some people. I get caught in that often. Being young may lead, sometimes, to cultural shortcomings (nothing that time can’t cure) and I find myself often in situations where I think something is new while it’s just a re-use or re-style of something a bit older; this happens specially with music and movies.

So, I thought I could show just share three links that seem appropriate to this context:

David Carson

David Carson

Carson is most probably the one designer that lit te spark on the whole grunge design style of the nineties. Knowing his work and where it came from is essential in the process of one’s compreehension—and hence full ability—to design along this style.

The End of Print, by Lewis Blackell and Carson is a wide showcase of his work (up to the time of it’s publish date) and worth reading.

Misprinted Type

Misprinted Type

Misprinted Type is the body of typographic work fellow Brazilian designer Eduardo Recife dating from 1998 to 2004. Many great fonts, some which free, and some of which have been best sellers at myfonts.com.

Nike Jumpman M4

Nike Jumpman M4

Very well thought, detailed design elements, with heavy textures and finish, while in a simples structure. One of the very best uses of 3D in Flash I’ve seen so far, and an example of great contemporary grunge design.


While researching for this post, I ran into interesting rant about the cultural and pseudo-political aspects the “appropriation of independent punk rock culture in the mainstream media” which is worth reading (it’s actually an album review, but the few first paragraphs get into that, and might even inspire another post in the future).

Changing the modalTransparencyColor and other PopUp styles in Flex

Thursday, January 31st, 2008

I bumped into this problem a few weeks ago and couldn’t figure out how to solve: we have this application with multiple popups, most with a black overlay behind them. But one specifically needed a white overlay.

The settings for this overlay are usually inserted into the main MXML <mx:Application /> tag or with the global style selector, as in:

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
	modalTransparency=".5"
	modalTransparencyBlur="0"
	modalTransparencyColor="#000000">
</mx:application>

or

<mx:Style>
	global {
		modalTransparencyBlur: 0;
		modalTransparency: .5;
		modalTransparencyColor: #000000;
	}
</mx:Style>

But those setting are kept for the entire application and there is no apparent way to change those at runtime.

Gladly I chose to ask at the great blog.flexexamples.com if anyone could help me, and the great peterd posted a whole set of explanations on how to do it. Thanks a lot peterd!

Basically you can access the global style settings and runtime through StyleManager.getStyleDeclaration("global") and then use setStyle() to change them.

You better check out the entire explanation over there.