Responsive web design is nowadays at the core of web development.
The responsiveness in web design has to do with how content is displayed onto the multitude of devices that we use. Not to mention the devices that are yet to come.
Many years ago desktops were the number one device used to browse the Internet. Nowadays mobile has taken over that position and that has coined the term design mobile-first.
The mobile-first term is important because it changed the way web designers had to think of in creating web sites for the end user. It changed the way they thought of design.
“It isn’t about design first but device first.”
The book “Responsive web design” by Ethan Marcotte is, in IT terms, an old book as it was published in 2011. I picked up this book since I haven been designing websites for a while as a sideproject.
I became more interested in web design as a discipline when I started learning what SEO. There is more to it to web design than just throwing some text,colours and images onto a web page.
Even though the book is “old” there are some interesting tidbits I’d like to share. It is not a book review or summary in depth.
For this you will have to buy the book yourself or find it at your local library.
The chapters of the book are as follows:
1. Our responsive web
2. The Flexible Grid
3. Flexible Images
4. Media Queries
5. Becoming Responsive
I will go over each chapter and write what I picked up from.
1. Our responsive web
Normally a designer or artist starts of by selecting a canvas.
Picking a canvas is a powerful and creative act. Because it already gives a constraint to the design. A constraint in dimension. A shape given through width and height. The design has a boundary.
But Marcotte rightfully mentions that on the Internet the web browser is our canvas. And not all browsers are alike!
Due to the rendering of HTML pages Internet browsers have to follow and adhere to the W3C Internet standards. Or else web pages may be shown different as intended.
For instance, Microsoft Internet Explorer has known to stray away from the standards causing Web developers having to create additional mechanisms to have their web pages be constructed as intended or even leave out certain features!
As Marcotte states “…the best thing – and often, the worst thing – about the web is that it defies easy definition.“
All too often it is easy to break designs because of the parameters we put in place of our designs.
Not too mention that increasingly more Internet capable devices aka input types are being developed and sold onto the market more resolutions exist than ever before.
For instance, on the desktop we are going from Full HD to Ultra HD 4k screens. On Mobile the screen sizes are becoming larger and larger as well.
Marcotte also goes into what he calls “Responsive Architecture“.
He quotes Christopher Wren stating that “architecture aims at eternity” which is true when you come to think of it.
A typical architecture can last for decades and perhaps even centuries. Think of churches or other monumental buildings.
So a “new” design discipline focuses on creating a responsive architecture.
Meaning, what technologies can be utilized to create an architecture that is responsive and will keep on working. Not only on the Internet but in real life as well.
How can architecture influence people and vice versa when they interact with each other?
In relationship to the Internet a responsive architecture means being able to publish content correctly onto devices regardless of the dimensions that we use now.
That design is responsive to the medium used rather than fixed to certain types.
Marcotte mentions that “we can practice responsive web design as long as we embed standards-based technologies and by changing our philosophy toward online design.”
The ingredients to responsive web design
There are three core components that dictates responsive web design:
1. A flexible, grid-based layout as our canvas
2. Flexible images and media that make up for the content
3. Media queries, that enable us to adjust our design to the medium
Each of these will be discussed below.
2. The Flexible Grid
A grid is used to divide the canvas in separate areas. As a designer you utilize grids to lay out your design.
Grids are important and necessary as it leads to a balanced and well layed out design.
But if the used medium is not fixed, the grid layout should be flexible.
The books uses CSS to lay out the issue that through hard declaration a design is fixed and rigid.
Luckily CSS has means to overcome that by using percentages and the “em” declarative.
But a design is often relative to the constraints aka grid. Meaning a formula is needed to calculate the relative positions the design has.
Marcotte offers the following formula:
Target ÷ context = Result
Meaning if your design has a width of 960 pixels, your device (context) is 480 pixels the result would be 2. So the device has to increase every content by 2.
This formula can be used for typography, images, grid layout etc.
It will keep the design in tact.
But this formula has only so much usefulness because things still has to be readable and usable on the device. So this formula will not cause every design to work on any device.
3. Flexible Images
When we use images these are often with a certain dimension. We can use CSS statements like “max-width” to ensure that the size relatively to the device or the container it has been declared in.
Still it doesn’t mean that just having this statement means the design will work on every device.
The grid layout vs medium
Certain grid layouts work properly on desktops whilst others don’t.
For instance when we use columns these work fine on desktops. That is because the size of a screen is big enough to make things readable.
Displaying a web page with many columns on a mobile doens’t work that well. That is because they get cramped up next to each other and the content becomes hardly readable.
That is why through media queries the content of columns are not displayed next to each other but underneath. It causes a design to change considerably.
A designer thus has to understand how breakpoints between devices work. How that will impact design and thus causes layouts to change.
Another thing to consider is that a designer also need to be content-aware. That even though CSS offers useful ways to make designs responsive sometimes it can cause the content not to be as effective anymore.
4. Media Queries
One of the issues with different devices is that some are constructed in a 16:9 landscape whilst others are the typical 4:3 portrait dimension.
This difference in orientation creates differences and visibility in what we design.
For instance, a piece of text with a certain font size that works well on widescreen becomes really different when resizing it to portrait mode. Sentences becomes much shorter and may lead to an awkward layout and design.
The same for how images and media is distributed as mentioned in the previous chapter.
Marcotte mentions it as “…our grid becomes a liability to our content.“
Its proportions constrict our content at smaller resolutions, and isolate it in a sea of whitespace at higher ones.”
“No design, fixed or fluid, scales well beyond the context for which it was originally designed.“
So the next objective is to be able to design something that can adapt to changes in screen resolution and viewport dimensions.
The most optimum would be a page that can optimize itself.
Through media queries we can state aka declare how our content should behave or adjust to different screen resolutions. It helps in creating and optimizing alternate layouts that are tailored to different resolution ranges.
It helps in creating responsive design based on the device at hand. Still it isn’t content aware which is up to the task of the designer.
It is the task of the designer to create a layout that is liquid. A flexible grid. That the design created can change depending on the height & width and still works and is usable.
Combined with flexible content and media queries any further optimization needed for certain screen resolution ranges can be made later on.
Constraints in flexibility are still useful.
Sometimes a design only works in a certain way. For this it is good that constraints can be declared when needed.
It means that a certain design aka layout still is shown as intended. To have a form when one is needed.
5. Becoming Responsive
This chapter starts by quoting the Tao Te Ching on “shapes”.
The Way is shaped by use,
But then the shape is lost.
“Do not hold fast to shapes,
But let sensation flow into the world.
As a river courses down to the sea.
So whatever “Way” represents, its form is shaped through its usage. The second sentence states that the shape is lost. It wonders was there ever a shape to begin with?
Does the “Way” have a shape? Or does the “Way” get a shape?
It gives us the idea that we often think too fast into a shape or form. We want to construct reality into a shape or form. Instead of seeing what is out there and from that it gets a shape or form.
The “Way” is formless but gets a shape through time, through usage. It has its own way as well to get its shape or form.
This chapter talks about going beyond responsive web design. To look at design from a broader and organizational perspective.
Marcotte talks about context. Why do people use their mobile or desktop and at what moment in time. Can we deduct something when a user uses a certain device?
Eventually Marcotte concludes that it is best to conduct proper user research on why users access the website with a certain device.
Not only that but also ask how, where and why they use these devices. It will lead to information you can use to design effectively.
Because in the end it matters that you understand and know the users’ goals. Without that your efforts will be lost.
Marcotte questions “why do we publish different content to desktop users versus mobile users.”
Due to screen limitations designers often opt to show less because we assume that mobile users become fatigue more easily.
Because of the smaller screen making things harder to read, less options to scan versus to read and also more swiping movements is necessary to go through the content.
So this led to the question “why can’t all users of our sites enjoy the same level of focused, curated content?“
Since users started to favor mobile phones over desktop computers to browse the Internet it led to the mobile-first design principle.
If we create a design that works well on a mobile than showing it on a desktop is much easier. We just need to scale it up versus down.
However, this starting point is from a device perspective. The medium being the constraint whilst we have to question what lies before that?
So Marcotte proposes the following questions that should lead web design initiatives:
“How does this content or feature benefit our mobile users?”
It focuses on creating agreement on content and context at the same time.
Especially when you work with a multidisciplinary team every person has their own agenda and background. It is through agreement and cooperation one comes to a design that works for all parties.
As Marcotte states “…it is a test to apply when considering each proposed element, each new piece of functionality.“
The book mentions the iterative, collaborative design that follows the 4 segments: planning, design, development and delivery.
He also goes over how teams can delve into a more agile approach into creating a responsive web design. To combine design and development in one.
Iteration is very important. To have a basic design quickly and go from there. That allows for reviews about designs by having a starting point. To create prototypes before finalizing designs.
I found the book very interesting to read. To go over the web design principles that came into making it responsive.
Ofcourse, nowadays may web designs are touted as responsive. Some have specific mobile versions as well next to their desktop counterpart.
Furthermore, Marcotte proposed to question ourselves in regards to content and context. Which may be more valuable than the current state in how we deal with different devices and their screen resolutions.
It goes beyond web design but also is applicable to other parts of online marketing. For example the customer touch points within the customer journey.
What do you think?
* Where do you think responsive web design will go to?
* How will different devices impact responsive web design?
* What can we do to make our design more content aware?