Enable Tech: Building the DealTrack website
Enable Tech is a column on design and technology by David Hunt. David has been our operations director from the very start, and has lead the evolution of Enable into one of the most respected and high-quality software development businesses around. David has an uncompromising passion for design, quality and excellence.
Last week, we launched a new subsidiary business called DealTrack. DealTrack is a software solution that helps organizations manage complex trading agreements involving retrospective payments, such as rebates, retrospective discounts, royalties, purchase income and back margin.
In this article, I’ll guide you through some of the more interesting techniques used by the website we built for DealTrack.
1. SVG graphics
Almost every image on the DealTrack website is delivered in SVG format. SVG has been around for a long time, but browser support is only now nearing a level where SVG can be considered a worthwhile option. As someone who is enthusiastic about design, SVG has some upsides that excite me.
- High resolution displays are going mainstream: products such as the Apple iPhone 4, third generation iPad, Retina MacBook Pro, Samsung Galaxy S3 and Nokia Lumia 920 have introduced displays to the marketplace that are capable of displaying 250 to 350 pixels per inch. Artwork designed for conventional computer displays looks blurry on these devices. SVG is a vector image format and therefore images authored in this format look beautifully sharp not only on these new high-DPI devices but on older displays too.
- Editing tools such as Adobe Illustrator allow SVG to be edited natively. There is no need to hold a “master” version of your website artwork in addition to an exported “published” version. An SVG file can be opened directly, edited and saved. It’s a slick workflow.
- SVG is based on XML. It is therefore dead easy to create SVG output programatically. For example, a status icon that needed to be colored red in some cases and green in others would typically require two separate versions of the same image. With SVG you could create a single version and alter a color attribute on the fly — driven by your application’s business logic.