A Little Bit About Responsive

A Little Bit About Responsive

In my career, I’ve had more than a handful of conversations about the importance of a website being mobile friendly, only to have my conversation buddy roll his or her eyes while I pontificate. Then he or she will follow that up by taking out the ol’ smartphone to surf the web, unknowingly making my point for me.

After banging my head against the wall for several years, it looks like even those curmudgeons who think a Tamogatchi is an advanced piece of software engineering are finally grasping the need for a mobile-friendly website.

But like everything else, even that process has changed dramatically over the last few decades. Initially, it seemed like we had a great answer to the challenge of different-sized screens. First, we’d build a site that looked nice on a desktop; then we’d build the same site in a slightly different way so that it looked nice on a mobile phone. Problem solved.

Not so fast. Turns out, mobile phone and device providers don’t seem to have any restraint when it comes to screen sizes. They just keep coming out with new ones – and not just sizes, mind you, but different pixel densities, as well. As a result, that mobile site you build for a 4-inch, 300 dpi screen might not cut it on a 6-inch, 440 dpi screen.

So what’s next? Just keep building out mobile sites like an army of HTML minions?

Responsive design answers that problem by going to that “grid” way of thinking from back in the 90s (before we all learned how to do all sorts of cool things with animation [think Flash] and graphical implementation).

Take this example here – the website of our friends at Northeast Security Systems. On a nice, wide screen, we can make use of that space and let the content fill it out. There’s plenty of room for everyone. Notice how, each element is assembled into a grid. Each category box has its own cell, as does the content area and contact form.

Responsive_Design_1

 

Now let’s shrink the screen down a bit – maybe we’re on a Nexus 7 tablet. What’s incredible is that with responsive design, as the screen size shrinks, each cell is shrinking proportionally as well. Everything still fits within the confines of the screen width.

Responsive_Design_2

 

Do you see what happened there? Some margins reduced, some padding changed, some text wrapped – but it still looks great. By scaling the cells down, we’re able to keep the content readable and aesthetically pleasing.

Of course, eventually the screen size will shrink down to a point where those three boxes at the top are going to have a word per line in order to fit within the screen size. To prevent that issue, we have to determine a break point – that is, the smallest screen size where this format will still be readable and user friendly.

We know at the break point, having those three boxes across the screen just isn’t viable anymore. So how do we solve this? We adjust the grid! Instead of displaying the three boxes across, we can simply display them one atop of another. Now each has plenty of room to exist within the confines of the screen width.

By sectioning off pieces of content into a grid – with each element as a piece of the whole – we’re given the ability to manipulate how content falls on a page on a more detailed level. Think of it as a whole bucket of blocks that you can arrange however you want.

Responsive_Design_3

 

That’s the gist of it. There is plenty more that goes into responsive design – how to manage your navigation, how to deal with alignment of elements within these cells, when to simply exclude elements in smaller screen sizes – but when it comes down to it, responsive design is a simple, logical way to handle the complexity of dealing with limitless screen sizes.

In a world where so much online research is done cross-device, having a way to maintain form and function – and a cohesive experience – throughout the journey is so important.