SCALABLE DESIGN, viewport engines & the future of web design

“Scalable design is a web design solution, it is an turning point that urges designers and developers to become involved, make meaningful contributions and embrace the simplicity for a more productive future”

Creative and technical people are generally not so fond of ambiguity within hypothesise that are computing related. So gradually as I & others (I hope) release information & prototypes of scalable design the uncertainty should fade. Although I am not yet ready to demonstrate scalable design, these articles are just necessary resources for the community if any.

So...

What is scalable design?

Scalable design (aka scalable web design, SwD) is a methodology that enables a web-design to scale entirely within the browser’s viewport or within bi-dimensional space beyond the viewport, whilst preserving the aspect ratio.

Hu?

So basically, everything must scale to the viewport (window | display) size in one way or another, there is no immutable content specific to pixels on the screen, or defaults specific to a browser’s user-agent. But with that said everything must be visually preserved not squashed. In regards to “bi-dimensional”, (in a primitive sense), this refers to a 2D plane enabling the user to navigate to content beyond the traditions of scrolling up and down.

Why?

Because what we know as responsive design, adaptive design and such, can not solve the underlying problems of the aesthetic restraints in web design.

Web design is a little odd, there are constraints to stop designers making a mess but it is apparent that those constraints are hindering the evolution of web design to some extent.

Viewport engines

A viewport-engine is a small JavaScript library, consisting of mechanisms which manipulate the attributes of the viewport, and or the content of a web page to define how the content is represented, in real-time.

SVG is the more advanced and preferred choice for Scalable Design as it is scalable by nature. So far there are two scalable design view methods I have discovered which are, screenScale & infiniteScale. Screen scale typically fits the SVG content to the screen, infinite scale regards the two-dimensional space beyond the viewport with tracking, panning & zooming. Eventually, these viewport engines should also make up for any lack of auto-wrapping as with SVG1.1. Hit me up if you’re interested in the development of SVG-viewport-engines.

Primitively, scalable design can be achieved with a CSS-viewport-engine but I personally advise against a standalone implementation as CSS is not a true scalable medium. Though if you are interested in building a CSS-viewport-engine contact me, I am happy to provide you with a working prototype.

Accessibility

Both SVG & CSS viewport engines are accessible. And should not break the browser zoom functionality aside from any viewport zooming features. Although accessibility in SVG is not entirely on the same level as HTML, it is progressing.

Notifications

Viewport engines could and should consist of accessibility notifications & options, that browsers & accessibility tools are not yet designed to handle for SwD.

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.

Mis-conceptions

More work, more time, more expense

With responsive & adaptive design, you are explicitly designing for several device formats, on several platforms. With SwD, you are primarily designing for the non-hand-held & the handheld format in both orientations and not much else (you and your silly apple watch, sigh). You can make adjustments for various form factors, but they will at most be tweaks (you will have compatibility issues, just likely not as much as with RWD). SVG also has some really slick tags that allows for some principals of DRY (do not repeat yourself), but SVG frameworks will definitely be the defining turning point for the execution of SwD.

I can do it with HTML + CSS

You can probably juggle knives too, doesn't make it the best idea. I wouldn't dismiss anyone trying to make HTML scalable as it would be hypocritical of me, but SVG is vastly more capable for SwD, just as I would argue that HTML + CSS is better for RWD.

No one is going to…

SwD satisfies the needs of several enterprise markets, in the least it may only be niche markets but, that’s enough for it to be meaningful. The keyword is “need” because accessible & navigate-able visual representations are needed in several large risk taking & data-driven industries. E.g., SwD is well suited for critical navigation & extended visual representations. (Now you get it, great)

Where are you with this expedition?

Same place! I shouldn't be so honest.

I have previously built a handful of different working veiwport engine prototypes, I̶ ̶h̶a̶v̶e̶ ̶n̶o̶t̶ ̶y̶e̶t̶ ̶a̶t̶t̶e̶m̶p̶t̶e̶d̶ ̶t̶o̶ ̶b̶u̶i̶l̶d̶ ̶a̶n̶ ̶a̶u̶t̶o̶-̶w̶r̶a̶p̶p̶e̶r̶ ̶f̶o̶r̶ ̶S̶V̶G̶ ̶t̶e̶x̶t̶ ̶b̶u̶t̶ ̶i̶t̶’̶s̶ ̶d̶e̶f̶i̶n̶i̶t̶e̶l̶y̶ ̶o̶n̶ ̶t̶h̶e̶ ̶a̶g̶e̶n̶d̶a̶. I am infrequently working on these prototypes but due to a substantial amount of interest I feel compelled to get something going ASAP (lie). I look forward to more capable developers and wise minds chiming in. Please don’t hesitate to, you are more than welcomed.

Despite the lack of demonstration, I made this article for a specific reason. The concepts are not fantasy nor neglect-able, they may be game changing they may not. But I am really hoping to inspire designers and developers to in least acknowledge the concept of SwD because what we currently know as web design is way below the pinnacle.

Be constructive!

;-D