Web Design Mathematics

Mathematics is the most important subject/course taught in schools, don’t get me wrong, I am one of those people who don’t like mathematics, this probably is a transferred dislike I had for my first mathematics teachers. Some people just don’t like numbers, formulas and equations but Math is everywhere, even where you wouldn’t expect it, graphic design, web design, programming etc you’ll need some math, you can’t avoid it, so live with it!

For this article, I’ll be concentrating on web design, the mathematics involved in web design, we’ll be using layout calculations (Responsive Layout) as an example.

Lets talk width calculations, in ordinary fixed width design, design measurements especially widths are done in pixels (px), in responsive web design, they are done in percentages (%). I’ll assume you already know how to design websites and you’re conversant with divs and css.

When using divs for your site site structure, a simple rule applies, rows before columns, the rows are then split into columns, This principle applies to most designs such as the this one for example

How Percentage (%) Measurements Work
These days, desktops and laptops are no longer the only media through which people access the internet, we now have a variety of devices ranging from mobile phones, to tablets, to TVs, apps etc. As good as this sounds for the end user, this development present a challenge for web designers/developers who now have to make websites look good and usable in all of these devices regardless of their screen size and OS.
To beat this, Responsive Web Design was coined.

“Responsive web design (often abbreviated to RWD) is an approach to web design in which a site is crafted to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from desktop computer monitors to mobile phones).” – Wikipedia

Percentage based measurements would simply render the width of the page/element based on the size of the container element/browser for example, if the #wrapper of a site is set to be 80% in width, the wrapper would be 80% of the browser size, if an element placed immediately inside the wrapper is given the size of 50%, such an element’s size would be 50% of the #wrapper’s width not 50% of the browser width.

Let’s use this design as an example

 

The Solution

*{
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
}


The above code would adjust the border-box model affecting every element in you design such that your assigned width will be the actually width regardless of padding and border you may have attributed to the element, that is, if you assign 500px as width to an element, 50px as padding and 5px as border, the actual width you’ll get would be 500px which would not be the case without the above code. Using the same figures, without the above code, your displayed width would be equals assigned width 500px + padding 50px + border 5px = 555px.

To make the code work for a specific element rather than all elements, replace the * with the selector ID(#) or class name as the case may be, for example, say we have a div with the ID(#) #asia, to fix the border-box model

For #asia, replace the * with #asia just like this

#asia{
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
}


“Your designs don’t need to look exactly the same in every browser, they just need to look good in every browser.”