The less-boring parts

So now that we have a clearer concept of what scalable web design is, and what makes SwD tick, let’s explore the possibilities.

Single Page Applications

This image is a little misleading. Polymer is mostly HTML oriented, but SVG can be used within. This is likely to change.

Scalable design is a perfect fit for single page applications. With SwD the notion of web vs native can be blown out of the water. Scalable designed SPAs can become a different ball game encouraging large and very capable worlds, thanks to the powerful SVG interface, SwD & Ajax.

Isometric Design/ Isometric Views

I discovered this video after writing this article. It’s a perfect example, with SwD a transition as such will scale to any width or auto- zoom to fit.

You can design isometrically, (you can actually do this now with CSS3), but with SwD it is more feasible to lets say allow the user to change their view from flat (or orthographic) to isometric, thus transforming layered flat design into an Isometric perspective with depth. It’s more feasible with SwD as SVG can achieve this without the rendering glitches that may arise in CSS animations, not to mention the extra tweaking required in CSS to re-size the transformed view appropriately.

Infinitely load assets,

The web development world is only a stone throw away from the gaming world, I pity any fool who disagrees. The same game development concept of loading visual assets (as they fall within a certain proximity) is something we can dwell on with SwD & Ajax. The concept is in theory, a sequel to the beloved infinite scroll of doom.

Everything just fits

VGA, XGA, WUXGA, 4K, 8K, 16K, 1M… whatever these crazy display vendors come up with next will just work, considering Moore’s Law. (BTW the below is SVG, but not scalable design, I just think it’s neat; by Sarah Drasner).

Let me throw a hypothetical: If the Oculus or HoloLens is able to view websites “seamlessly & panoramic-ally” in the future, it will just works because the content is not only scaling, it is preserving the aspect ratio and most importantly it is resolution independent so native or featured zooming is plausible. Despite this hypothetical example, it is unimaginable with responsive and adaptive design, you would have to spend a significant amount of time adding to the stylesheet & re-testing per format, per change.

Panning, tracking and zooming

Yea yea, this is really cliché. But a good example nevertheless

Anyone who has made an auto-scrolling HTML website will know it is the coolest thing ever.

A scrolling website isn't cool. You know what’s cool? A scrolling-scalable website.

I can recall building a single page prototype via HTML, CSS & JavaScript that scrolled horizontally, vertically and diagonally, it was adventurous, but I couldn't get over the fact that the text didn't scale and the diagonal transitions were slightly jittery. SVG & SwD makes this possible the right way.

Scale Pre-existing designs & animations

Because of SVG’s unique metric system, the ability to drop in a pre-existing design or animation that was initially based on pixels will always be there and will scale accordingly with minimal tweaks. All your previous SVG things will have a productive home in the future.

Make a cocktail

As an example, using SVG as the base, and overlaying with HTML5, canvas and WebGL makes a supreme combination (or try foreignObject if you like a fight). Canvas and SVG are incredibly alike in terms of development and visual capabilities. SwD can be achieved with canvas but lets not get side tracked… yet.

SVG text auto-wrapping

Featured in D3plus

So this is an elephant in the room, we can build APIs to achieve auto-wrapping as D3plus has so elegantly done, or wait for browsers to one day consistently support auto-wrapping & text-block-containers with the adoption of SVG2. Despite SVG2, a text wrapping polyfill/ shim for SVG will always be necessary & demanded in the context of any web design methodology.