Suit Up for Your First Zombie Fight

20.06.2017 |

Episode #4 of the course Responsive design: An undead introduction by John Rhea

 

Now that we’ve gotten a small handle on HTML and CSS, there’s a few things we need to do to prepare a site for responsive design. One is creating the flexible layouts we’ll discuss in the next lesson, but there are a few more.

 

Turn Your Binoculars to De-zoomify

Ever opened up a site on a mobile browser and seen the desktop version all tiny and horrifying, like a zombie had shrunken itself in order to scare its victims? With responsive design, we want to stop that zoomifying and show the content at a natural size but also fix the content so it shows properly at the natural size.

Remember that meta tag I mentioned last lesson? A meta tag is a special tag in HTML that has a couple of special properties: 1) It’s a void tag and has no closing tag. It exists as an apocalyptic world unto itself. 2) The tag itself is not so much what’s important about it, but rather, its attributes. The name and the content attributes really determine what the meta tag does and/or how it’s used.

The meta tag we need to add to our HTML page for responsive design is:

<meta name=“viewport” content=“width=device-width, initial-scale=1”>

Viewport means the size of the window or what we can see through the browser window. Width equal to device width just means that a browser/CSS pixel is going to be roughly equal to a device pixel. (When we scale down the page, in theory, a browser/CSS pixel would be much smaller than a device pixel.)

And lastly, rather than scaling the page down to show all of it at once, we’re going to make sure that even if we’re on a crazy high-density display device, the initial scale—without any changes from the user—will be the same as it would be on any non-mobile screen. In other words, it won’t be scaled down OR up.

 

Additional CSS Weapons

Another thing that’s super helpful but not necessary is the following CSS:

html {overflow-x: hidden;}
body {overflow-x: hidden;}

As we’ll see in flexible layouts in the next section, sometimes an element will go rogue and be wider than it needs to be (as the developer, this is probably your fault, but these two lines can save you a lot of time trying to figure out exactly which element went rogue). These two rules hide anything that goes off screen to the right from either the html tag or the body tag.

Those of you who’d make excellent zombie snipers will realize that these lines of code do largely the same thing, since the body is within the html tag, but some older web browsers would handle one or the other improperly. They required one or both CSS rules to be there.

De-zoomifying complete. Hiding overflow done. Now, let’s turn those static layouts into flexing works of modern art and/or just put “A Vice around a Zombie’s Head.”

 

Recommended book

Responsive Web Design with HTML5 and CSS3 by Ben Frain

 

Share with friends