Best practice for responsive web designs

So you think you know everything about responsive designs? Brace yourself, I invented a better methodology. Lets start with some code which I implemented in Visual Trivia. This is how my CSS looks like:

/**     VARIABLES     **/
:root {
  --SCREEN-WRAPPER: 580px; 
  --GAME-CONTAINER: 400px;
  --GAME-CONTAINER-LEFT-MARGIN: -200px;
  --IMAGE-CANVAS-WIDTH:220px;
  --GAME-TITLE-FONT-SIZE:40px;
  --GAME-TITLE-LINE-HEIGHT:40px;
  --POPUP-WINDOWS-WIDTH:400px;
  --POPUP-WINDOWS-LEFT:50%;
  --POP-WINDOWS-MARGIN-LEFT:-200px;
}

/**       MEDIA QUERIES     **/
@media (max-width: 600px) {
  :root {
  --SCREEN-WRAPPER: 100%; 
  --GAME-CONTAINER: 95%;
  --GAME-CONTAINER-LEFT-MARGIN:2.5%;
  --IMAGE-CANVAS-WIDTH:60vw;
  --GAME-TITLE-FONT-SIZE:200%;
  --POPUP-WINDOWS-WIDTH:95%;
  --POPUP-WINDOWS-LEFT:0;
  --POP-WINDOWS-MARGIN-LEFT:2.5%;
  }
  
}

/**     BODY       **/
body {
  font-family: 'Tajawal', sans-serif;
  background-image:url("backgrounds/blue1.jpg");
  background-size:cover;
  background-repeat:no-repeat;
}

#screenWrapper {
  height:auto;
  min-height:var(--SCREEN-WRAPPER);
  overflow:auto;
}

/* ...additional code below using those variables */

So, instead of writing media queries to distinguish between properties of classes on different resolutions, I defined variables, and changed those variables in media queries.  Variables are awesome and part of CSS3.0 – it makes the CSS properties of elements and classes look tidy, condensed (less loading time) and easier to manage / less open to errors: when you change a property (e.g. the screen width, or a color), you don’t need to look for it all around your code – you just change one variable . to make it clearer, instead of doing what most developers do, which is hard coding properties inside the media queries:

#screenWrapper {
  height:auto;
  min-height:580px;
  overflow:auto;
}


@media (max-width: 600px) { 
     #screenWrapper {
          min-height:100%;
   }

}

I define CSS variables, and use them for those properties:

:root {
    --SCREEN-WRAPPER: 580px; 
}

@media (max-width: 600px) {
  :root {
    --SCREEN-WRAPPER: 100%; 
  }
}

#screenWrapper {
  min-height:var(--SCREEN-WRAPPER);
}

The best practice would be to define variables for anything which may change, by moving your site / app from one framework to another, or for properties which change from one device to another. This methodology has got lots of advantages over the common way of handling responsive designs:

1. You actually control the template of your site, not just “fitting it”
2. Easier to understand, very fast, how things change from one resolution / device to another
3. Easier to manage, change and debug your responsive design
4. Easier to program and fit a truly responsive design, not just a design which is responsive. I will explain what I mean

The difference between “Responsive Design” and “A design which is responsive”

You may think that I’m drunk when you wrote this headline, but actually this is a very important point in responsive design. Bare in mind that if “something is X”, in philosophy, it does not mean that it is exactly the same as to say “X which is something“, for example,  a “listening person” is not the same as “a person which is listening”. The first one has a quality, the second one is just passively performing an act. The same is with responsive designs – the fact that a design is responsive, does not mean that it is (a fully) responsive design. A good example is Visual Trivia – it is a responsive, but it was not designed to be a fully responsive design, since it looks the same for every device and every resolution.

So a truly responsive design is a design which change itself according to the resolution, not just fits itself. It takes into consideration all the usability changes which are different from one device to another. In my eyes, designs which just “shrink” as the device resolution, are not true responsive designs – they are just responding to the screen resolutions, and this could be easily achieved with properties like width:60vw; or width:90%; It also means that the above ideas, of using variables to parametrize properties in media queries, are very important for genuine responsive designs.

All the best 🙂

Eran