What we did
June 2020 Responsive Web Design turns ten
Last month Responsive Web Design (RWD) turned ten, so we had a look at what RWD was and were it is now.
The term was fist coined by Ethan Marcotte in an article for “A List Apart” called "Responsive Web Design"
So what is RWD? Ethan is a freelance web designer and back then with the introduction of the new iPhone he found that more clients asking “Can we have if work in that iPhone?”
To quote from the article "But what’s next? An iPad website? An N90 website? Can we really continue to commit to supporting each new user agent with its own bespoke experience? At some point, this starts to feel like a zero-sum game. But how can we—and our designs—adapt?"
The three key features at the heart of responsive web design are:
Media queries and media query listeners
A flexible grid-based layout that uses relative sizing
Flexible images and media, through dynamic resizing or CSS
Ethan’s idea of adaption was demonstrated in designing a site using fluid grids, flexible images and media quarries.
Flexible grids
In detail fluid grids is an idea of converting or designing sites using scalable measures that is relative units or percentage units. One example in the article Fluid Grids is converting the fixed pixel font to a scalable one using this simple calculation target ÷ context = result. One example by using a default font size of 16 px you can find the scale to make a 24PX header become scalable. The sum is 24/16= 1.5 which you can read as 1.5 em. If you’ve ever worked with relative units such as the em, you know that it’s all about context: in other words, the actual size of an element’s em is computed relative to the font-size of its parent element. So first you need to set the default font size eg
body {
font: normal 100% Helvetica, Arial, sans-serif;
}
With a font-size of 100%, all the elements in our page are sized relative to the browser’s default type size, which in most cases is 16px.
Flexible images
Making your images fluid is relatively easy with this CSS code.
img {max-width: 100%;}
This makes your image scale down from its original size.
Media Queries
To quote the MDN site “Responsive design was only able to emerge due to the media query.”
Making your site scalable is only one part of being responsive. Your site’s content will remain in their set position eg the nav on top the main content on the left with an aside on the right with a footer underneath. That means the site will scale down but may not be readable. That’s were media queries come in. Using them you can for example place your aside under your main content on small screens to make the site readable. EG
/* [SMALL SCREEN] */
/* Single column layout */
@media screen and (max-width: 768px)
{
#main, #aside
{
float: none;
width: 100%;
}
}
Steve South
Web Design leader