Thoughts about design, code & technology
The CakePHP just announced the new release of our favourite PHP framework.
They show some cool new features, some of which will come very handy in a new project we’re starting at work. So I’ll have a chance to try this new stuff, and hopefully will be able to post some impressions here.
Now… let’s bake!
So I finally got to try Buzzword. And believe be: at least my first impression is that it’s really something amazing. A sleek, intuitive interface, features that are both handy and easy to use, document sharing, fast loading. You know, it’s all that. The reasons why Adobe has acquired Virtual Ubiquity, the company behind this software, are cristaline now.
Some features I’d highlight so far:
And all of these in a seamless, ‘just-feels-right’ way that GoogleDocs has not be able to achieve so far. The only feature I missed was paragraph/character styles. For the remaining, it does a remarkable job on the set of features that matter for 90% of the users.
Microsoft, watch out. The online office is just around the corner, and Adobe is going strong at it.
Last week, I wound up at this amazing demonstration of the amount of elements you can draw on the screen with Actionscript 3 and Papervision 3D.
The picture shows 1234 elements, but I actually got to around 2500 earlier. Wow! OK: I’ll grant that Papervision manages the screen so that everytihng that isn’t necessary is not drawn, and that the element are not interactive, and have no animation within them. But this mindblowing nonetheless.
Hold on, this post is not YAPD (Yet another Papervision demo); it’s not even on Papervision itself. It’s that this one demonstration of orderly colourful animated elements in a 3D, depth-of-field-enabled environment, seems just like one of those things that seems to set a milestone on technology. It’s a very real proof that the combination of Papervision and the AVM2 can finally be used on a real project, not a deployed extension of a demo.
But this got me thinking (and threw me in a very productive discussion with my friend Daniel Morena): are web designers (myself included) ready to design for a 3D web? It’s been not even a week since I wrote on the difficulty most of us have with articulating a new visual language that is truly unique to the web! How could we jump from no letting go of magazines and brochures to stepping into a completely interactive, immersive 3D space?
3D is not the answer to everything, but it may just solve some very difficult design issues we may have. The thing is: we don’t know how to design for 3D. The web (and the GUI as a whole) has been a 2 dimensional environment forever. We got as far as creating tabs and overlapping windows to emulate some familiar sense of depth that helps users organize information on the screen. But really going three-D, and making a whole website that truly makes use of this opportunity, is hard.
A friend forwarded me a link to a post by Kevin Sweeney, in which he demonstrates his utter in-satisfaction with everything that has been built with PV3D until now. I can’t tell for sure, but I do believe the origin for such disappointment is that: things have not been designed to be 3D, they’re that way simply because technology allowed.
Extending a PV3D demo doesn’t count. As well as creating some layout in which some two-dimensional plates float, and end-up parallel to the screen and actually being needed. I believe we need to embrace the 3D. I’m just not sure we all know how to design for it yet.
Japanese photographer Naoki Honjo has some amazing work.
Using special lenses, filters and techniques of photo editing, he takes pictures from high above famous cities in such a way that makes them seem like toy-train miniatures.
I realized the depth-of-field effect that emulates macro photography is the main reason for this notion of a miniature-like setting, but I’m still trying to figure out how does he achieve such smooth, paper-like textures on the buildings and pavements.
An exhibition of some of his work is going on in London, until October 12th.
German photographer Marc Raeder produces some similar work (samples here, and here).
Update: Rodrigot forwarded me the url for CityShrinker, site of australian artist Ben Thomas, which has very similar work.
Update: James writes in to tell that, apparently, this is becoming very common, and that this Flickr group has a lot of examples and even links to tutorials on the technique. By the time of this writing, the group had 8,558 pictures posted!
A Brief Message has been running some pretty good articles on design; talented high profile authors, interesting discussions, nice illustrations.
But if you step back from the content for a second and notice only the layout: the text in columns, the proportion between the heading and the body type—it’s all great: very good taste and extremely able design choices. But it’s a magazine design. And, for some reason, this design can be considered innovative, although it’s a very traditional magazine style.
This makes me wonder about the possibilities on innovation in web design. I mean true innovation, that is not solely dependant on technical novelties.
One could argue that we see very innovative web sites every day (especially Flash-driven ones), and there are hundreds of galleries and lists all over the web to show it. But what I mean is new design that reinvents the way to address certain problems, the way graphic designers have been able to do for decades, mostly working with the same offset printing paradigm.
A Brief Message introduces itself as, in some ways, a magazine, and most appropriately presents itself that way. But the same as a printed magazine, nonetheless. Other web sites which bring the magazine feel to further distances go as far as using Flash applets that simulate the flipping of pages, as a last resort to present a familiar ‘interface’ to the user.
In his Maeda@media, John Maeda (a major inspiration of mine) emphasizes on how important it is to differentiate the printed dot from the electronic pixel:
Turn off your monitor for a moment. Are the pixels you see gone? Certainly their visual presence is, but their electrical presence is not. This is verified by turning your monitor back on—nothing has changed.
This doesn’t happen to paper. So we can not lay elements out the same way. The impermanence of a pixel, as opposed to the immutability of a printed dot is key in the exercise of letting go of the unquestionable guidelines that have served us a lot for the printed media, and re-purposing some of those principles, along with new ones, to come up with a graphical language that is truly unique to the web.
Our choices should not dry up in endless Flashy animated menus, infinite vertical scrolls, and the occasional subversion that ends up just feeling odd. I have no definite answer, but I sure believe we can do much more. Do you have any ideas? Examples of successful attempts, maybe?
PS: This is not, by any chance, the bashing of the design of A Brief Message. I only used it as a starting point. In fact, I like the visual result of that site a lot.
I tend to bring the graphic designer side of me a lot when dealing with code. Aside form the regular indentation preferences that each developer has, I try to make the code as good looking and legible as possible.
Programming languages in general tend to provide a default way of organizing source files, such as organizing folders/packages, which may containg other folders or files which represent classes.In those files themselves, code is organized in functions, which may have loops and statement blocks. This allows a somewhat standard way of organizing code in the file. And that’s critical: confusing code will undoubtedly extend the time required to understand a file someone else may have written, or even yourself in a past time.
CSS lacks that kind of standard, productive organization—I don’t believe putting block after block with simple indented declarations a real organization scheme. So I present the main 4 rules I consider when organizing and writing the files for in a general basis.
Jeff Croft illuminates us with the concept of ‘CSS frameworks for designers’ in this article for A List Apart. Grouping all of your browser reset styles and some basic, repetitively used styles in the same file allows for faster project start and the creation of a stable vocabulary of CSS definitions which can be shared among everyone working in the project.In a future post I’ll share the declarations I tend to use this way.
I work a lot with CakePHP. It groups all the CSS files a project uses—front-end and back-end— in the same app/webroot/css folder. When projects grow, the number of files can generate some confusion, since there’s the reset and framework file which will most probably be used by both parts of the project, a number of [yuck!] browser-specific (IE) files. I usually name my files the following way:
This allows for a lot of maintanability and code resusability.
When scanning a CSS file for a specific declaration, we use a process much like the same as reading the summary of a book: first we need to find where is what we want, and afterwards discovering what’s inside. With that in mind, I find it much practical to use single-line declarations: it saves space, organizes code, and can even reduze file size (in a thousand-line file, that’s one KB of line breaks you save).
This is the one I find the most useful. Even with the amazing help of Firebug’s Inspector (which is not available for IE), it can be quite hard do find which declaration affects each element on the page. That leaves us with a lot of scanning through CSS lines. Single-line declarations may help, but still there will be some diffulty finding what we want. CSS indentation to the rescue! Consider the following XHTML:
<h2>Main title</h2> <ul> <li> <h3>Some title</h3> <p>This is some text <span class="highlight">foo/bar</span></p> </li> <li> <h3>Some other title</h3> <p>And some more text <span class="highlight">bar/foo</span></p> </li> </ul>
You can make the highlight spans bold and red by simply declaring
.highlight {font-weight:bold;color:red;}
but it could not make any sense in the middle of a hundreds of other declarations. It would also limit the variations of ways you could use the highlight class. But if you declared that
h2 {font-size:3em;}
ul {background:yellow;}
ul li {display:block;}
ul li h3 {font-size:0.8em;}
ul li p {font-size:0.8em;}
ul li p span.highlight {font-weight:bold;color:red;}
It would be much easier to locate that declaration, and then change it. You should notice as well the tab-aligned right portion of the declarations. I find it much useful to organize CSS in columns, which would add to the ‘index’ effect I mentioned above.
Those are my main tips. How do you like that? Do you have any other tips as well? Please join the discussion!
So apparently Wordpress is up and running, Google Analytics is setup and all the plug ins are functioning.
This is mostly a test post, so that I can at last start writing.
Thanks for stopping by!