When people think of a beautiful website, they think of design and layout. Very few people think of code as a thing of beauty. When I saw the above tweet by @steveschoger, I thought it was the perfect launchpad to explain my thinking.
In my consulting assignments, I find a lot of my clients take decisions based on how the final product looks like. They are more concerned about the site being pixel perfect than understanding how that functionality is going to be implemented.
For them, code design is irrelevant (mostly because they don’t understand it). This causes several issues: clients don’t understand why things take time, developers take short-cuts to deliver, and enhancements become a nightmare until the code is “un-maintainable”.
There is poetry in code. There is aesthetic pleasure in a well-designed application. I only wish more people appreciated it
For the record, I have no interest in debating which layout is better. Nor is this article about pitting coders vs designers. One cannot build a successful product without both skill sets.
How does a coder implement the above functionality
The left image is, in all probability, how a coder would display data. The right image, under most scenarios, looks far better. However, that doesn’t take away from the fact that there is beauty in code too
The lazy (i.e. ugly) way to implement the above functionality would be to create a form capturing the information above plus attachments for images. This is what happens most of the times when all the client is interested in is the final output and does not care about the “plumbing” underneath.
However, a good coder would architect the solution.
- Investigate existing options to see if they fit the requirement. These could be plugins of CMSes like WordPress, Drupal, Joomla, etc.
- Create an entry form to store the Real Estate Agent data
- Maybe even give her a login to allow editing personal data and add new listings
- Pick her image from Gravatar, URL, social media profiles or allow image upload
- Ensure the image uploaded is processed to ensure it is web-ready
- Create another form to add Building Type to allow for additional types later
- Form to add listings
- Ensure adequate validations (year, phone number, numbers)
- Allow address entry using Google Places API
- Allow uploading of images from camera, URLs or use advanced uploaders
- Implement access control to allow employees to upload listings and allocate them to an existing/new real estate agent
- Choose a stack, write code (which essentially are a set of logical statements), document it, use coding conventions (naming variables, etc)
- Live with the fact that, for the most part, the client/manager won’t ever appreciate your effort since they do not understand all the (harmful) short-cuts you could have taken but choose not to.
What does this mean in practice
Most conversations with a design agency stop once they have presented their ideas on how the final output will look like. However, this is only the tip of the iceberg. Please include a discussion on HOW the agency plans to implement the above. Be involved in the process as much as possible. Get the agency to document the validations. Maybe even review the code with the developer. You do not need to know a programming language to understand what the code is doing.
In short, deciding what your app/website should look like is just the beginning. There are miles to go before you can sleep, content in the knowledge that you have a scalable, maintainable solution.
