An Introduction to Responsive Design

Responsive Design

Responsive design. It’s a term we hear a lot when we talk about websites, and we’re constantly bombarded with people saying that it’s a necessity – your site has to be responsive… And with the number of different phones, tablets, and computers people use today, there is some truth to that. Before we get into the technical side, let’s take a minute to examine what Responsive Design really means.

Responsive Design is About the User

Responsive Design came about with the rise of the smartphone. More and more people were accessing clunky, desktop sites on mobile devices and finding things too small to click on, too much scrolling, too hard to read, you name it – they felt it. In its very essence, Responsive Design is about improving user experience by streamlining their visit to your site.

To do this, you need to get into your user’s mindset. Is your site a news blog that a lot of people would wake up to and read on their tablet, or is your site a development codex where nobody casually browses on their phone? What demographic is your audience? How do they most commonly interact with your site, and with what devices? These are the million questions that are important to answer, and you’ll have no better friend in this than Google Analytics. Just set this up on your site, wait a while, and the data will come to you.

Okay, but what does Responsive Design actually DO?

Responsive design changes the look of your website, depending on the width of the screen that’s being used to view it.

While this sounds like a headache (it can be), there’s a HUGE benefit to this – with more and more familiarity with touchscreen apps on phones, tablets AND PCs, you can make your site look and behave just like an app – no Apple development required.

This is best shown through examples – here are a few links to some great examples of Responsive Design so you can see yourself – just resize your browser window.

Alternatively, if you’re on a tablet where you can’t do that (always thinkin’!), then here’s a video of me demonstrating how it works on each site. For flair, we’ll bring in some “let’s get ready to kick ass” music.

That’s cool! I’m pumped! How do I do it?!

Here’s where we get to the coding part 🙂

Responsive Design is easy to understand if you already have basic CSS principles under your belt. There are two rules to keep in mind when writing CSS:

  • The later a style appears in the code, the more importance it has.
  • The more specific a declaration, the more importance it has. This overrides position.
  • An !important tag will override anything, regardless of position (unless of course there’s another !important. Just don’t use these.

The Proper Mindset

Now that we’re ready to code, we have to get in the ideal mindset for coding. The best universal approach is called mobile-first development, and is as its name implies – before coding for a desktop view of your site, code for the absolute smallest screen width you wish to accommodate. Then, you’ll create certain widths called “Breakpoints” where additional CSS is applied to override the previous styles. For most purposes you only need three breakpoints – 480px, 768px, and 992 (debatable, but this is Bootstrap 3’s breakpoint).

These three breakpoints are for cell phones, tablets/small computers, and laptops/desktop computers. For a visual reference, check out the image below – each device would have a slightly different appearance.

Responsive Design

Apple fans, I know the numbers aren’t right. It’s a demonstration.

The Coding

We won’t stick with just the basic three for this demo, though – here’s a full copy of common breakpoints you can use for your site, once again as defined by the Bootstrap 3 Framework. You can copy & paste it into your CSS file if you’re building from scratch, or if you’re running a WordPress installation you can add it to your Child Theme files.

Ta-Da!

Congratulations! You’ve just taken the first steps towards your own Responsive Design website, choosing your own breakpoints. Now it’s up to you to style your site – throw in some flair, a few gifs, glitter here and there… But so help me god, don’t waste my time with adspace. 🙂


Have any questions or comments about this article, or ways you think it can be improved?
Join the conversation in the comments below, or sign up for my newsletter to recieve periodic updates!

Tags: , , , ,

No comments yet.

Leave a Reply

%d bloggers like this: