Scalable Design: Beyond Responsive Design – Julien Etienne – Medium

Beyond Responsive Design  #webdevelopment #webdesign #javascript #react #css #reactjs

  • I hope you are able to comprehend the impact this has on the way in which we:Design for the web.Implement user interfaces.Fight against content-display limitations.Fight against limitation regarding animations.Work harder to make things look similar-ish on the large variety of browsers and devices we consume today.Why?Despite what some believe, fonts are not static down to better design implementations or because it works better for Responsive Design, I believe the decision is largely due to backwards compatibility, and rightfully so.Yea but what about SVG and the Canvas API?Good point imaginary reader…Unfortunately SVG cannot wrap fonts at the time of this article.Canvas lacks SEO and accessibility.WebGL in many cases can be overkill and lacks SEO and accessibility.With all that said, all three technologies are way under utilise in modern web development.
  • At some point we need to realise that we can do more with less complications.I don’t get it(huff) If font-size can scale proportionately to the width of the viewport consistently across all modern browsers IE9+ without breaking zoom accessibility, design constraints will be significantly reduced.But you still need media queries?Yes but you’re not getting it, it’s more predictable this way.
  • Less than 2.5kb gzipped, ES, CJS and UMD and only has the features it needs.BTW, I have to give thanks to Browserstack for providing cross-browser support.Now let me tell you what it does…MIMETIC scales relative font units to the viewport, without breaking the browser’s zoom and it detects the zoom level for all browsers IE9+.
  • That’s it!You can improve accessibility on zoom or even let the user know they are viewing the browser in zoom.It’ supports:IE9+Safari 6.2+Every other modern browser, tablet, mobile etc.When you use MIMETIC, the rules change.
  • You have to worry less about container widths and CSS caveats and more about proportions, more like a print designer.How?There are a few things I discovered to make this library possible:Changing the root font-size only and only relying on relative units.Calculating and normalising the devicePixelRatio from the user’s client device widths even when the DPR it’s not available or not behaving as expected.Differentiating between the window resize and zoom by knowing if the devicePixelRatio changed last or not.Calculating the defautDevicePixelRatio.Fire on orientation change.IE logicalXDPI deviceXDPI values.Keep it simple: Option to use viewport units for mobile (Doesn’t break zoom on mobile)False hopeThe scariest discovery is that there was nothing stopping a viable solution being made several years ago, all the way since IE6.

Responsive Design has been a great breakthrough for modern web development. But I couldn’t help but notice that something is lacking in our expectations regarding the aesthetics of web user…

@ReactDOM: Beyond Responsive Design #webdevelopment #webdesign #javascript #react #css #reactjs

Scalable Design: Beyond Responsive Design

Responsive Design is dead!

Just kidding… responsive Design has been a great breakthrough for modern web development. But I couldn’t help but notice that something is lacking in our expectations regarding the aesthetics of web user interfaces as well as the obvious/ not so obvious limitations we endure as end users due to static fonts in 2017.

I will likely touch on a bunch of things you already know so I encourage you to skip through to better parts.

I may also offend you if you’re very sensitive or complacent about the current state of web design. Sorry in advance ;-D

Let’s get directly to the point…

Web design is limited mainly due to font sizing

Practically speaking, fonts don’t scale on the web. Some people can’t fathom this but this is a “YUGE” discrepancy for a modern visual platform. I hope you are able to comprehend the impact this has on the way in which we:

Why?

Despite what some believe, fonts are not static down to better design implementations or because it works better for Responsive Design, I believe the decision is largely due to backwards compatibility, and rightfully so.

Yea but what about SVG and the Canvas API?

Good point imaginary reader…

With all that said, all three technologies are way under utilise in modern web development. We are content driven mammals so this obviously why we generally favour HTML.

S̶V̶G̶,̶ ̶C̶a̶n̶v̶a̶s̶,̶ ̶W̶e̶b̶G̶L̶

What about Viewport Units

The problem is that vh, vw, vmin, and vmax all break the desktop browser’s zoom accessibility feature. Zoom is a frequently used feature in the browser.

There was a proposal for vb and vi units, I believe it would be able to scale without breaking zoom, I’m not sure if it’s still a thing. Let’s say this spec gets the go ahead:

v̶i̶e̶w̶p̶o̶r̶t̶ ̶u̶n̶i̶t̶s̶

Isn’t there already libraries that handle this?

tl;dr: Not practically.

There have been some attempts that have come close but none are not suitable for practical use. Below I have listed the most popular font-scaling libraries. Beside each I have noted issues that I’ve encountered. Most of these libraries (if not all) are no longer maintained:

2. Difficult to no ability to zoom, thus breaking accessibility.

3. Doesn’t scale padding/ margin/ line-height and other relative dimensions and doesn’t respect the style attributes on elements (overwrite your inline styles). You must specify relative dimensions (padding/ margin)(More maintenance), or you can’t specify relative dimensions.

4. Scales to a container (which is the inverse effect, generally not a desirable result).

5. jQuery dependent

6. Does exactly what vw, vh, vmin, vmax does on mobile.

7. Fonts blur.

E̶x̶i̶s̶t̶i̶n̶g̶ ̶l̶i̶b̶r̶a̶r̶y̶ ̶s̶o̶l̶u̶t̶i̶o̶n̶s̶

If only I had a Pepsi

We can’t have nice things because nice things scale!

CSS Values and Units Module level 3 was of course built on the foundations of CSS level 1.

That was 21+ years ago, when XGA was the standard.

We are all fully aware that 4k is becoming the new display standard, and “they” will continue to push the pixel ratio despite 8k, 20k or 50k (These marketing geniuses don’t stop at 4). At some point we need to realise that we can do more with less complications.

I don’t get it

(huff) If font-size can scale proportionately to the width of the viewport consistently across all modern browsers IE9+ without breaking zoom accessibility, design constraints will be significantly reduced.

But you still need media queries?

Yes but you’re not getting it, it’s more predictable this way. There’s far less overflows, collisions and static elements to worry about. Media query usage would be more about design preference and far less for fixing things.

The reason you don’t need to tweak a large design for different resolutions when designing for scale is simply because…

What you see is what you get. Viewing the site at 900px wide vs viewing it at 2560px wide will not give you any hidden surprises. Growth should be linear and you should have the freedom to add media queries on top of such foundation.

Chech it out on github

I’ve been toying with this library I call MIMETIC (I must be corny and type in caps, it’s that dramatic). The first thing I must point out about MIMETIC is that…

BTW, I have to give thanks to Browserstack for providing cross-browser support.

Now let me tell you what it does…

MIMETIC scales relative font units to the viewport, without breaking the browser’s zoom and it detects the zoom level for all browsers IE9+.

You can improve accessibility on zoom or even let the user know they are viewing the browser in zoom.

It’ supports:

When you use MIMETIC, the rules change. You have to worry less about container widths and CSS caveats and more about proportions, more like a print designer.

How?

There are a few things I discovered to make this library possible:

The scariest discovery is that there was nothing stopping a viable solution being made several years ago, all the way since IE6. Just a decade late.

Are you suggesting that every website should scale?

Not exactly, it’s not that black and white. I am aware that every website could be made/ designed to scale but it depends on the viability of a solution. But inevitably it’s a case of when.

I’m keen to know your point of view on this topic, scalable fonts is something that has been in gentle discussions since the decline of XGA. I made this article as an attempt to answer the “why” part of the discussion, as well as to show off a solution.

Thanks for the reading here’s some Magritte…

Scalable Design: Beyond Responsive Design – Julien Etienne – Medium