Have you ever wondered, how far you can go in responsive design?

Lots of people will tell me that it depends on what you can imagine and how far you can go in programming it. Websites are my Little Playground for few years now. I like watching things grow under my hands and when I jump in to some work, I can burn loads of hours enjoying working.

Today I would like to show you, what I was working on for a few days. And maybe I would like a help from you. In testing it.

1) The Problem

Maybe I am developing wheel again here, but the thing is, that most people test smoothness and responsiveness of a website by taking a side of a browser, start playing with it a watching it, how dynamic or edgy it can be. Honestly, show me someone who did not try that. Ever. Almost everybody is using Breakpoints and yes, it is sexy and maybe common knowledge nowadays, but it is still a bit limiting. For about a year I was reading and trying to learn about responsive typography on a web. How height of a letter can be done dynamic or static or even modular.

What about making it smooth? Did some of you read for example this article: Truly Fluid Typography. When I started to read about this, it was mind-blowing for me. Normally I used breakpoints for setting font-size and sometimes not even that. That's history now.

But it was about loads of work, loads of maintenance and truth to be told, I am a lazy person.

Congratulations!

First solution I tried was from article Truly Fluid Typography:

calc fluid text

(Image was taken from named article: Truly Fluid Typography)

But... That was not satisfying enough. I wanted to fully understand that. I am lazy, but not copycat.

2)Mathematical solution

And here is the wheel. Have you ever tried to understand that image above?

First of all, you need to understand that calc() have better usage than only in font-size and fluid typography itself. Font-size in this particular example is only a tip of an iceberg.

The Triangle Theorem

The Triangle Theorem - Diagram

This image is a basic description of dynamic change of a typography depending on viewport width. Milestones are set on example PX widths for mobile, HD display and 4K display. Basic question is, what will be my font size on 4K when I know the other two? In next picture is mathematical explanation of the situation.

The Triangle Theorem - Math

Here, some people will clap their hands and tell me that I really invented a wheel again. Maybe yes. But as I said, I wanted proof and to make everything functional on every resolution I can get. This one? Yesterday I tried it on 8K resolution. Working. Only thing you need to have in your mind is, that all variables used here must have same type of value. Do not mix them, it will break it.

3) Known Usage

Modular Website Typography

Responsive typography is very good example here. By simple mixin you can make your website fluid by default. And with using Modular Scale Typography in it, you can save yourself measurable amount of time, which you will be using to set the scales right. Modular font use one simple thing. Powers to scale between each others font heights.

Here is an example:

This is functional Modular Typography mixin with usage. Only thing you need to adjust is $modmin and $modmax variable.

$modmin - modular coefficient for powering Headings between each other on minimal breakpoint (for this particular example is used 500px)

$modmax - modular coefficient for powering Headings between each other on maximal breakpoint (for this particular example is used 1920px)

And that is it. Low time consuming coding and Low time consuming maintenance. Told you I am a lazy person.

But let's not stop right here.

4) My insight on a problem

What is responsiveness

Here I would like you to know my personal understanding of a responsiveness itself.

It is how object on a website reacts on change of viewport and how it is shown on different types of devices, its zooming and different orientations.

That given, you need to understand, that PX value, if it is not dynamically changed, is not usable here. I am using EMs or REMs and they work fine for me. Ordinary I check websites, that I code, on mobile, tablet, 2 different types of desktop resolution and now newly on 4K resolution. That is for basic. It is too much or too bad, I don't really know. If it is bad, please enlighten me. I will appreciate it.

Cross browser support

Every website I make is checked on different browsers. Examples: Google Chrome, Opera, Safari on Mac, IE 11, MS Edge, Firefox. Newly I will try Opera Neon. So everything I will present you in here was at least working on those named browsers.

5) Let's chase Alice to the Wonderland

What if I simply tell you that you don't need to stop with Modular Typography, but you can do more. Much more. Even infinitely more.

You do not trust me?

Evil Good

I am no Morpheus here, nor coding grand master. What I assume is, that where you can use calc() function, you can use Triangle Theorem. Let's see some examples.

A) Line-heights

When you are chasing Fluid Typography, you will end up with chasing line-height too. The simple way is that you tell yourself that, for example, 1.5 line-height is your number and thats it. If you want to go further you can use different line-heights for different viewport resolutions and thats where you can use The Triangle Theorem. Same as fluid text, it will be nice and smooth and will be working fine.

Truth is that there is not an ideal number for line-height whatsoever, because, as I learned for example on stackoverflow.com, there is no simple answer. Line-height is different not even for different resolution, but for different font type too. Serif Font will have different line-height than Sans Font etc.

I personally use The Triangle Theorem and trust my fellow graphic designer, that he set those line-heights right.

Cat Science

B) Margins and Paddings

That simple math can be used even here. Just think about it. You use breakpoints. For different breakpoints you have different margins. But mobile device is not only one resolution, for example 768px. It is between 320px and 768px and on portrait or landscape. So why use it static, when you can use it dynamic?

C) Absolute and Fixed positions

That is practically the same as with Margins and Paddings. You can use calc() in here, you can use math too. But I am not using this as much as the other features.

D) Borders

I think that almost everybody uses this border attribute statement:

  border: 1px solid black

for making object bordered. There is a different approach. You can make it slightly more structured with sacrifice of a few more lines of code. Like this:

  border-width: 1px
border-style: solid
border-color: black

It is practically the same, but with more lines written. Why? Because with this thing written down you can use The Triangle Theorem here too.

Here is a little example with border triangle for you.

E) Widths

Same thing once again. When you can use calc() here, you can use The Triangle Theorem. Truth is that you might not need this thing every time. So you can use it in combination.

      @media only screen and (max-width: 767px) {
        width: 20px
    }

    @media only screen and (min-width: 768px) {
        width: calc(20px + ((100 - 20) * (100vw - 500px)) / (1920 - 500))
    }

In the code above is a written example how to use that math when you need dynamic width for tablet and desktop devices and static for mobile devices.

It comes handy even for images. When you need dynamically changed image, you can make different variations of different breakpoints as it is on the next image.

Math MultiUse

For better understanding:

Example: Path A: from minimal width until 500px, object will have 100% width, after that it will grow up to 600px. When viewport hits 768px object will grow smaller up until 1920px where it will have 300px and after that it will grow slowly up to 600px again at 4K resolution.

F) Shape Combos

Best thing here. Ever. I would like to address everybody who have problem with making responsive Rectangles, Squares or even Circles or Ellipses. But that is no everything. Cross browser compatible. Well I would lie, if I tell that I don't have those problems myself.

Well this ends here and now. No more problems, no more display:table tweaks, no more height:0 and padding with it. None of it. Just clean code, cross browser compatible and functional.

Wait.. What?!

Ready?

Here it is.

      div
        width: calc(10rem + ((20 - 10) * (100vw - 31.25rem)) / (120 - 31.25))
        height: calc(10rem + ((20 - 10) * (100vw - 31.25rem)) / (120 - 31.25))

That's responsive square from mobile to desktop resolution. Right here. In REMs all the way.

And here is an example:

The only downside of this, that you can't use percentage here. So if you need to have an object with, let's say, 33% width. You need to transform it to another type of value than percentage.

But usage of this? Iframes, circles, rectangles, squares, buttons, youtube video frames. Everything responsive, in two simple lines.

Awesome!

6) Last Few Words

Yes. Maybe now you are thinking that this is ridiculous and I really reinvented a wheel. Again. But if this summarized article helps at least one person, as this discovery helped myself, my mission will be successful.

Thank you for reading this.


966 0 17