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.
- A single SVG image can be used at multiple sizes throughout a solution. Plus, if a solution is changed and artwork needs to be resized, in all likelihood this could be accomplished without needing to actually edit any images.
- If a visitor to your website prints a page — perhaps using their 1200 dpi laser printer — they will get print-quality artwork rather than low-res "screen quality" artwork. (Although perhaps printing is now a somewhat antiquated concept.)
- It’s easy to fall back to conventional PNG images: the DealTrack website serves PNG images to older browsers. If you’re visiting with an older browser, you’ll get served an additional style sheet that replaces all SVG images with PNG alternatives. (There’s a slight overhead with this approach, but it’s preferable to optimize for modern browsers.) Exporting your vector images to PNG format from Illustrator is easy.
- You can still use the “sprite” technique. Recently, web developers began adopting a technique whereby multiple icons and graphics are stored in a single image file. The technique is not a new one: it originated in computer games in the ’80s. If you open an image of this kind directly it looks like patchwork; a mess. But if carefully served up in small pieces, these composite images can result in a dramatic reduction in the number of HTTP requests the browser has to make. This is really important if the performance of your web application is something you value.
- Despite offering much better fidelity than PNG, SVG file sizes are often actually smaller than their PNG counterparts. Secondly, the SVGZ format allows SVG images to be gzip compressed, further reducing their file size.
- It is increasingly commonplace for browsers (for a multitude of reasons) to be configured to use a “zoom ratio” when viewing web pages. For example, a user’s browser might make everything 1.5X bigger. Unfortunately this can result in ugly sub-pixel rendering problems, where the position of elements on the page falls between two pixels. SVG can help solve this problem. If you view the DealTrack website at a zoom ratio of your choice, you will notice that the sharpness of the text and artwork remains the same. And no ugly lines or gaps. It is probable that the introduction of Windows 8 and Windows RT tablets will result in a greater number of people using a zoom ratio of this kind — often unwittingly.
Vector images on the web are an unstoppable juggernaut.
Vector images on the web are an unstoppable juggernaut. Get on board or get run over!
2. Responsive design
The term responsive design refers to the way in which a webpage reacts to variances in users’ screen sizes. The range of web-connected devices is now pretty broad: 4-inch smartphones, 9-inch tablets, 13-inch laptops and 27-inch desktop displays.
If your site’s layout is designed to be a fixed width, there will be large empty margins running down the left and right-hand sides of the screen on a 27-inch display — and the text on the page will be too small to be easily readable on a 4-inch smartphone.
If instead your page scales to fit the width of the user’s browser window, this could then mean that paragraphs of text on your page may have too many words per line on a larger display. You may have ugly gaps appearing in the middle of your page rather than down the sides. The proportions of your design might look wrong. Unless your page is mostly devoid of content it will still struggle to fit on the tiny 4-inch display of a smartphone.
The technologies that underpin the web are going through a period of change.
As a general rule, if you optimize for one size of display, you will consequently be delivering a sub-optimum experience to anyone using anything else.
The answer is responsive design. The size, shape, layout and position of elements on the page can change dynamically depending on how big the device’s display is. The designer can optimize the layout of the page for multiple display sizes rather than just one.
Although responsive design works best with modern web browsers, it doesn’t particularly hurt a website’s compatibility with older browsers.
The DealTrack site looks fairly balanced on larger displays. It changes slightly at lower resolutions, and then, at very low resolutions, the entire layout of the page morphs in to something better suited to the narrow display of a smartphone.
3. Typekit Fonts
At DealTrack we’re big fans of the Freight Sans Pro typeface. Fortunately this font is included in Typekit’s library and we have therefore been able to use it liberally throughout the DealTrack website.
Typekit takes the effort out of delivering world-class fonts on the web. Due to competing standards and varying browser support it’s still a messy business to do it manually; with Typekit it’s a mostly painless affair.
As an ever greater number of users adopt the aforementioned high-DPI displays, I suspect their appreciation for great typography on the web will grow.
Furthermore, many new features in CSS3 can be used in ways that improve the experience for users with modern browsers — without being detrimental to users with older browsers.
On the DealTrack website, the main menu buttons use the CSS border-radius property to achieve rounded corners. Visitors with older browsers get more squareish corners.
In other projects recently completed by Enable we have used CSS3 more broadly. The level to which CSS3 can be used depends on the specific browsers you are required to support.
Our goal is to deliver the very best quality web applications to our clients. The technologies that underpin the web are going through a period of change. Developing a thorough understanding of the strengths and weaknesses of new technologies has always been an important part of Enable’s ethos.