Bonus - Making Clas backward compatible and responsive.

I recently published a tutorial on making a website from scratch, using JS, CSS, and HTML. A lot of critique of that post was based on the fact that the design wasn't backward compatible, and nor was responsive. So today, I'm going to tell you how you can do all that.

In my utopia, it wasn't necessary for Clas to be backward compatible—but many people pointed out that it was required in our current world!

First, I request you to check out Clas, the site in question.

What is backward compatibility, you ask? According to wikipedia,

In telecommunications and computing, a product or technology is backward or downward compatible if it can work with input generated by an older product or technology. If products designed for the new standard can receive, read, view or play older standards or formats, then the product is said to be backward-compatible;

Responsive web design is well explained from this amazing article at Smashing Magazine.

Responsive Web design is the approach that suggests that design and development should respond to the user’s behavior and environment based on screen size, platform and orientation. The practice consists of a mix of flexible grids and layouts, images and an intelligent use of CSS media queries.

So basically, we're going to make Clas work for old browsers (coughIEcough) and for people who have javascript disabled.

Making content visible

Okay, so what's the biggest flaw with Clas as of now? The fact that it defines position:absolute in it's CSS. To non-JS browsers, Clas currently looks like

Making Class Backward Compatible Without Work

So, to fix it, we remove position:absolute from the three article IDs (In case you forgot, #about, #motive, and #contact). Let's see what changes.

Wait what? Nothing! Nothing at all!

So umm... That was my stupidity. The position:absolute wasn't needed at all.

Making the navigation work

You think making the navigation work would be tougher, right?

Nope, not at all.

We can easily have Internal Links in HTML.

According to that article, we change

<nav class="main-menu">
<ul>
<li><a href="#" id="toAbout">About</a>
<li><a href="#" id="toMotive">Motive</a>
<li><a href="#" id="toContact">Contact</a>
</ul>
</nav>

to

<nav class="main-menu">
<ul>
<li><a href="#about" id="toAbout">About</a>
<li><a href="#motive" id="toMotive">Motive</a>
<li><a href="#contact" id="toContact">Contact</a>
</ul>
</nav>

But that's not enough.

If we enable Javascript back again, and click on any link, we find that the page jumps upwards, and look very weird.

To stop that, we need to tell the page (using JS) that if we click on a link, then no action should be taken.

A simple solution to that is to add return false; to the the onclick functions (onlyAbout…)

Return false will stop the actual HTML url from working, fulfilling our purpose. e.preventDefault() could've also been used, but it has compatibility issues, and return false seems to do our work.

With that, we have sufficiently made Clas backward compatible.

Making Clas responsive

The second task is to make Clas responsive.

To do that, we won't be using any JS. We'll use CSS media queries.

The site is relatively simple so we don't need many breakpoints. But, what breakpoints we have, will not be decided by popular devices' resolution

Okay, so we start manually re-sizing Clas. I found out, that on 1000px, the actual content window starts getting to small. This is because .wrapper has a set width of 60%. Let's change that to 80% on 1000px.

We're gonna use

@media only screen and (max-width : 1000px) {
/* Styles */
}

and place it in the bottom of our file.

We'll then add

.wrapper {width: 80%;}

to it, making the whole code -

@media only screen and (max-width : 1000px) {
  .wrapper {width: 80%;}
}

Similarly, I find that the font-size begins getting to big under 600px. So, we add another query, and change the font-size in the html tag (Why? So that body, and further child elements resize proportionally and our typography remains intact)

@media only screen and (max-width : 600px) {
  html {font-size:85%;}
}

Then, our last breakpoint would be at less than 320px. There, we will change the font-size to 75%, increase width of wrapper to 90%. Upon inspection, I found a bug, so we'll add padding:0; to .main-menu ul

So we end up with

.main-menu ul {
    padding:0;
  }

@media only screen and (max-width : 320px) {
  html {font-size:75%;}
  .wrapper {width:90%;}
}

…and we've successfully made Clas responsive!

Again, if you have any problems following the tutorial, check out the finished product, inspect it, view it's source, and mess around with it.

(PS. If the changes are not visible in the live demo of Clas, press Control + F5 to hard refresh. This is because Clas would've been cached by you)

Discuss on Twitter