Skip to main content

The Programming Designer

Most developers prefer to seperate design from functionality. This is a noble goal, but sometimes hard to implement. In my experience developing web applications, the most typical collision between design and functionality happens in JavaServer Pages, the most typical templating format of web front-ends in Java web applications. Most readers know JSP's, but for those who don't, think of it as Java's PHP, or the templates we use for producing HTML.

However, a problem which is still at large in web applications today is that these templates are designed by Java developers, or pure programmers with little knowledge of web design and web standards. Or worse, programmers that believe they do know web stuff when they actually don't, or don't know how important the web front-end really is.

The problem with programmers doing these JSP's is that that they are doing design, sometimes even when they don't have to. The classical example of this is putting layout of the entire page in<>'s because they can't handle CSS. Tables are even used for lists. They embed JavasScript and styles in the HTML. If they do use CSS, they might inconsistently use classes and id's.

And by the end of the day, the result of the programmer's futile attempts at doing web design ends up plain ugly.

Then to the rescue: The web designer.

The web design is delivered in the shape of a couple of example static HTML pages with CSS and JavaScript files attached. Shipped and dropped in the lap of the programmer.

What follows are several strenuous days of the programmer picking at the JSP, trying to make the web design fit and look like the web designer's example.

There are two ways to avoid this pattern. The first one is: Programmers, steer clear of web design. Just leave the design till later on. Learn the basic DOM-elements of HTML you will be producing, and use it in a consistent way.

But remember that no matter how well the programmer uses div's and id's in the most elegant scheme of definitions, the web designer will definitely come up with his/her own ones that must be complied with across all the JSPs in an application (and there are often quite a few of these, mind).

The second way to avoid the pattern is the programming designer. The programming designer is a very rare breed. They are creative personas with an understanding of usability, colors, spaces and kindness to the eye in general. They also have basic skills of programming, master CSS and JavaScript, and are in essence able to work on the same JSPs as the programmers do. Not creating functionality or content though, but simply tweaking the div's and the id's.

Needless to say, the interests and motivations of a designer are very far from those of an innate programmer. I think one could even draw the conclusion that these two professions draw quite opposite personality types. Perhaps this is also why we often detest the products of eachother.

Me, as a programmer for instance, I hate doing web design. I can never figure out a set of good colors that work. I can't get CSS stuff working, it's just stuff bouncing around. And personally, I'm a functional person, not esthetical. I can't see the point of improving design once you have achieved usability, although I do of course recognize that there is an actual need for this in attracting use and success of an application. What more, I envy this effect that often leaves the designers being the heroes of a successful web application as they make the outlook, the good looks, the bells and whistles.

Good architecture and good programming goes unnoticed (meaning that it only gets noticed when it's done badly). Yes, I am jealous :)

Still, spite the gap between our personas, I have seen programmers successfully venturing into the world of web design, as well as designers learning the skills and becoming adapt programmers. Some have even been doing both since they started of with their own LAMP application and had no way of outsourcing design nor programming. These are programming designers. I believe that EVERY web application project should bring one of these on board.

They have a role all throught the project. From the beginning they can maintain a prototype application of static HTML pages. Moving on the start assisting the development of the infant JSPs, making sure that the programmers take no wrong turns in the use of HTML. Continually, they do their magic and paint the functional application with their magnificent colors, scripts, images and layouts using the optimal techniques of seperated CSS and JavaScript files. They ensure that the application follows all relevant standards of W3C, ensuring accessability and correct design in all Internet browsers.

I would also like to note that inversion of design/design injection can be done with SiteMesh, which is a great tool for templating and page modularization. This is a good way of giving the programming designer a file/decorator/template where he or she can work freely while not interefering with the tangles of the programmers.

Comments

Popular posts from this blog

Open source CMS evaluations

I have now seen three more or less serious open source CMS reviews. First guy to hit the field was Matt Raible ( 1 2 3 4 ), ending up with Drupal , Joomla , Magnolia , OpenCms and MeshCMS being runner-ups. Then there is OpenAdvantage that tries out a handful ( Drupal , Exponent CMS , Lenya , Mambo , and Silva ), including Plone which they use for their own site (funny/annoying that the entire site has no RSS-feeds, nor is it possible to comment on the articles), following Matt's approach by exluding many CMS that seem not to fit the criteria. It is somewhat strange that OpenAdvantage cuts away Magnolia because it "Requires J2EE server; difficult to install and configure; more of a framework than CMS", and proceed to include Apache Lenya in the full evaluation. Magnolia does not require a J2EE server. It runs on Tomcat just like Lenya does (maybe it's an idea to bundle Magnolia with Jetty to make it seem more lightweight). I'm still sure that OpenAdvant

Encrypting and Decrypting with Spring

I was recently working with protecting some sensitive data in a typical Java application with a database underneath. We convert the data on its way out of the application using Spring Security Crypto Utilities . It "was decided" that we'd be doing AES with a key-length of 256 , and this just happens to be the kind of encryption Spring crypto does out of the box. Sweet! The big aber is that whatever JRE is running the application has to be patched with Oracle's JCE  in order to do 256 bits. It's a fascinating story , the short version being that U.S. companies are restricted from exporting various encryption algorithms to certain countries, and some countries are restricted from importing them. Once I had patched my JRE with the JCE, I found it fascinating how straight forward it was to encrypt and decrypt using the Spring Encryptors. So just for fun at the weekend, I threw together a little desktop app that will encrypt and decrypt stuff for the given password

The Git Users Mailing List

A year ago or so, I came across the Git-user mailing list (aka. "Git for human beings"). Over the year, I grew a little addicted to helping people out with their Git problems. When the new git-scm.com webpage launched , and the link to the mailing list had disappeared, I was quick to ask them to add it again . I think this mailing list fills an important hole in the Git community between: The Git developer mailing list git@vger.kernel.org  - which I find to be a bit too hard-core and scary for Git newbies. Besides, the Majordomo mailing list system is pretty archaic, and I personally can't stand browsing or searching in the Gmane archives. The IRC channel #git on Freenode, which is a bit out-of-reach for people who never experienced the glory days of IRC. Furthermore, when the channel is busy, it's a big pain to follow any discussion. StackOverflow questions tagged git , these come pretty close, but it's a bit hard to keep an overview of what questio

Git tools for keeping patches on top of moving upstreams

At work, we maintain patches for some pretty large open source repositories that regularly release new versions, forcing us to update our patches to match. So far, we've been using basic Git operations to transplant our modifications from one major version of the upstream to the next. Every time we make such a transplant, we simply squash together the modifications we made in the previous version, and land it as one big commit into the next version. Those who are used to very stringent keeping of Git history may wrinkle their nose at this, but it is a pragmatic choice. Maintaining modifications on top of the rapidly changing upstream is a lot of work, and so far we haven't had the opportunity to figure out a more clever way to do it. Nor have we really suffered any consequences of not having an easy to read history of our modifications - it's a relatively small amount of patches, after all. With a recent boost in team size, we may have that opportunity. Also the need for be

Managing dot-files with vcsh and myrepos

Say I want to get my dot-files out on a new computer. Here's what I do: # install vcsh & myrepos via apt/brew/etc vcsh clone https://github.com/tfnico/config-mr.git mr mr update Done! All dot-files are ready to use and in place. No deploy command, no linking up symlinks to the files . No checking/out in my entire home directory as a Git repository. Yet, all my dot-files are neatly kept in fine-grained repositories, and any changes I make are immediately ready to be committed: config-atom.git     -> ~/.atom/* config-mr.git     -> ~/.mrconfig     -> ~/.config/mr/* config-tmuxinator.git       -> ~/.tmuxinator/* config-vim.git     -> ~/.vimrc     -> ~/.vim/* config-bin.git        -> ~/bin/* config-git.git               -> ~/.gitconfig config-tmux.git       -> ~/.tmux.conf     config-zsh.git     -> ~/.zshrc How can this be? The key here is to use vcsh to keep track of your dot-files, and its partner myrepos/mr for o