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

Considerations for JavaScript in Modern (2013) Java/Maven Projects

Disclaimer: I'm a Java developer, not a JavaScript developer. This is just what I've picked up the last years plus a little research the last days. It's just a snapshot of my current knowledge and opinions on the day of writing, apt to change over the next weeks/months. We've gone all modern in our web applications, doing MVC on the client side with AngularJS or Ember , building single-page webapps with REST backends. But how are we managing the growing amount of JavaScript in our application? Yeoman 's logo (not necessarily the conclusion of this blog post) You ain't in Kansas anymore So far we've just been doing half-random stuff. We download some version of a library and throw it into our src/main/webapp/js/lib , or we use it from a CDN , which may be down or unreachable when we want to use the application.. Some times the JS is minified, other times it's not. Some times we name the file with version number, other times without. Some

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

What I've Learned After a Month of Podcasting

So, it's been about a month since I launched   GitMinutes , and wow, it's been a fun ride. I have gotten a lot of feedback, and a lot more downloads/listeners than I had expected! Judging the numbers is hard, but a generous estimate is that somewhere around 2000-3000 have listened to the podcast, and about 500-1000 regularly download. Considering that only a percentage of my target audience actively listen to podcasts, these are some pretty good numbers. I've heard that 10% of the general population in the western world regularly listen to podcasts (probably a bit higher percentage among Git users), so I like to think I've reached a big chunk of the Git pros out there. GitMinutes has gathered 110 followers on Twitter, and 63, erm.. circlers on Google+, and it has received 117 +'es! And it's been flattr'ed twice :) Here are some of the things I learned during this last month: Conceptually.. Starting my own sandbox podcast for trying out everythin

Git Stash Blooper (Could not restore untracked files from stash)

The other day I accidentally did a git stash -a , which means it stashes *everything*, including ignored output files (target, build, classes, etc). Ooooops.. What I meant to do was git stash -u , meaning stash modifications plus untracked new files. Anyhows, I ended up with a big fat stash I couldn't get back out. Each time I tried, I got something like this: .../target/temp/dozer.jar already exists, no checkout .../target/temp/core.jar already exists, no checkout .../target/temp/joda-time.jar already exists, no checkout .../target/foo.war already exists, no checkout Could not restore untracked files from stash No matter how I tried checking out different revisions (like the one where I actually made the stash), or using --force, I got the same error. Now these were one of those "keep cool for a second, there's a git way to fix this"situation. I figured: A stash is basically a commit. If we look at my recent commits using   git log --graph --