brunobergher::blog

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.

Wenetus Interactive, a brazilian web development company reversed the usual order of fields in a contact form:

Instead of the usual name, e-mail, message order, the form first asks what the visitor wants to say (something that is in her mind, for sure) to only later ask for contact information.

It’s a really simple point, but I believe it makes a big difference on how the visitor perceives the interest the company has on what she has to say.

I’m really proud to officially launch my friend and fellow designer Liana Nigri’s portfolio website, fully designed and developed by yours truly. The site has actually been up for a week now, but I just managed to sit down and write a post about it.

Liana approached me in need of a very simple website that should showcase some of her projects as both textile and graphic designer, while focusing on the former. She has a great body of work on textile patterns developed in some big Rio de Janeiro fashion houses as well as her current studies in London. Her main goals was to have a place where she could point new contacts to, and to have something she could edit on her own.

The result was this cute little website, highly interactive and inviting, which, as far as Liana has told me, is doing well towards some very specific goals of hers.

Backend developing was made as simple as possible—considering the big proportion of images vs. text content—and I chose a basic PHP/XML structure to handle the data. There’s a simple experimental admin tool (Liana is my friend, she told me I could test some new stuff with her) with lots of drag and drop functionality, which I plan to write about in a future blog entry. In the next few paragraphs, I’ll try to write a brief summary of the main considerations of this project.

Getting the design right

Liana’s line of work is mostly of colorful, vibrant, complex images, full of detail and interesting shapes and arrangements. Almost all of these images are repetition-based patterns, which can only really be fully understood and appreciated when visualized in side-by-side repetitions.

I realized then that I should create a design that was the least obstructive as possible allowing Liana’s work to shine without being obscured by the site interface. The result was this very simple interface, very application-like, which allows the user to see the patterns in a variety of sizes, zooming in and out as desired, and dragging them to get the best view. And even allowing the main window to be dragged around to get the best framing possible.

Since the site design itself was so minimalistic (in both quantitative and qualitative senses), the execution was pretty simple, with some nice use of CSS and lots of unordered lists, in 100% valid XHTML, no question about it. The central point to execution was adding interactivity.

Getting the interaction right

In order to have the level of interactivity I wanted, I certainly had to turn to JavaScript. Flash was available but was not adequate in some other aspects, mainly time. And considering the website has a 100% visual goal, the use of JavaScript became a non-issue regarding browser accessibility considerations.

There was no doubt I’d use the great jQuery library, to which I’m a huge fan, but there seemed to be a lot of UI to develop. jQuery UI to the rescue! This is a great set of extensions and plugins to jQuery which allowed me to include some advanced functionality, such as the resize slider and the background dragging. There’s no question my job would be infinitely harder without this.

jQuery also helped me add some animation to parts of the interface, and the AJAX-candy in the contact form.

From that point on, the frontend process became basically of adjusting some minor details, and getting on to developing the backend and administration.

Handling of images and javascript files

Liana’s site is very easy on the server: no database access, no complex calculations on the back end; but there are a lot of heavy images (to get the details right, some pictures are 500+ KB) and a lot of JavaScript, which could make the site very heavy to load. Fortunately, I developed these two simple scripts, on which I plan to get back to in a later article, which negotiate this heavy lifting.

One of them handles the resizing of max-size pictures in the server to the needed smaller sizes, generating cache files which can later be served directly, with no image processing on the server.

The second one handles just-in-time, server cacheable cacheable, javascript compression, which groups all of the needed scripts and then compacts them using Dean Edward’s packer port to PHP by Nicolas Martin, dramatically reducing the final file size and the number of requests needed to load the page. There are some current issues with browser caching with this script, which I intend to correct soon, and then release here.

Summing up

It’s been a pleasure working on this project, and I hope it goes on to fulfill it’s owner goals. If you have any comment, question or find any bugs, please don’t hesitate to comment here or contact me.

Matt at signal vs. noise noted the sliding images that explain how the Beanstalk, a hosted Subversion system, works.

I find that interesting, but what really caught my attention was the simplicity of the sign-up process: they only offer you the option of signing up for a free account. That way you don’t feel that the service is being sold to you, but rather that they’re offering you an opportunity to enjoy something good.

THAT is user-friendliness and inviting for business, because we have to be realistic: there’s no way someone is going to choose a paid option without checking out the free one first, standing right next to it.

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.

The Guardian published this map illustrating how the Earth’s continents are connected through sea cables.

Interesting graphic, informative, but type sizes can get too small, and make it hard to understand some things.

I’m impressed with how we trust most of our Internet connectivity to just a few wires… Seems kind of fragile, doesn’t it?

My friend Rodrigot sent me a link to USA Today’s ‘Candidate Match Game’

A very informative, fun, data visualization application, with a rather high data density in a friendly interface. Totally unpretensious, as far as I can see. Perhaps the rectangles that make up the vertical bars could be a bit easier to hover with the mouse, but otherwise I’d say there’s no problem whatsoever with it.

And serves as well as a good example of use of Flash in a situation in which other technologies—notably JavaScript—could be cumbersome and not achieve the same results.

It may not make any difference what my results are, since I’m from Brazil (even though the US presidential elections affects people everywhere in the globe), but I was very satisfied to see to which candidate I’m most ideologically aligned with.

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

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 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

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).