Blog

Best Practice Exchange: Programming Magic

So, you want a beautiful, flashy (pun-intended) website that is equal parts engaging and impressive? It also MUST be optimized for mobile and search. And you’re on a tight budget…

Time was, a digital agency would take one look at that wish list and run for the hills. But thanks to evolving technologies, programmers, designers and developers now have several tools and tricks at their disposal that can get the job done without breaking the bank. One of them is a little something called Scalable Vector Graphics (SVG), and here’s why it’s rad:

SVG > JPEG/GIF

Technically speaking, SVG is defined as an XML-based vector image format for two-dimensional graphics with support for interactivity and animation. In plainspeak, that translates to an easier way to create interactive, resolution-independent graphics that will look great on any size screen.

As it relates specifically to images though, SVG has a leg up on JPEGs and GIFs for a variety of reasons. Unlike their bitmapped counterparts, SVG images are scalable to the size of the viewing screen and will not lose quality/resolution if they are zoomed or resized. Consequently, this means that SVG images can also be printed with high quality at any resolution. Another point for mobile usability is the relatively small files size of SVG compared to GIF & JPEF files. When you also consider that SVG images can be created and edited with any text editor, it’s easy to see why they come out on top.

SVG > Flash

You might be thinking this all sounds a whole lot like Flash. And you’d be right. Except that Flash on the web has gone virtually extinct – for good reason. First, Flash turned out to be a nightmare for search. Second, as a proprietary technology without open source, it proved difficult to work with. Despite all that, Flash clung to life for quite some time – and that’s also for good reason: It was cool!

So, why is SVG a better alternative than Flash?

  1. SVG animations can be made search-engine friendly through crawl-able text labels and descriptions
  2. SVG is open source
  3. SVG is complaint with other standards like XSL and the DOM

The final nail in the coffin: SVG animation is every bit as cool as anything you’ve ever seen in Flash. Case in point: www.justdesign.co.za

SVG > Custom Code

All you need to create something as slick as the above example are some static SVG images and a little Javascript. Thankfully, there are some great libraries out there that simplify this even further (Snap.svg and Raphael spring to mind). But, if you weren’t going to use SVG animation and you cared at all about searchability, then you’d be left with no other option but a whole lot of crazy-complicated, custom programming. We’re talking thousands of lines of code vs. a handful – and probably with duller results. Say goodbye to your budget!

SVG = Winner

Beautiful, engaging, interactive websites? Check.

Optimized for mobile and search? Check.

Budget-friendly? Check.

SVG for the win!

Related Blogs

Here’s something cool about our digital services team: We’ve all got specific roles and specialties but not a single one of us is even close to being a one trick pony. Take me, for example; I’m a programmer. I am also super interested in social media marketing.
Whether you run a venue or events, the web has become an indispensable part of doing business. However, many event industry marketers report that they are not satisfied with their organization’s current website. As a matter of fact, as part of its
In a recent blog from Center for Exhibition Industry Research (CEIR), Does Your Show Mobile App Deliver Value that Prompts
The first post in our new Best Practice Exchange series threw down some ground rules for event web design, courtesy of our resident design expert, Angie Golio. Today, it’s programming

To provide you with a better user-experience, this website uses cookies (small, nonhazardous text files stored by your browser so you are recognized on your next visit). By confirming with "OK", you agree. Visit our Privacy Policy for more information.