Sean Chisholm

Get Your Nonprofit Started with Responsive Design

In Is Your Nonprofit Ready for the Mobile Revolution? we discussed the rapid ascent of mobile browsing. There’s no doubt that mobile technologies like smartphones and tablets have become increasingly important in recent years. As things stand today, about 1 in 5 Internet users accessing the web at any given point in time will be doing so through a mobile device.

This sharp increase in mobile technology usage presents a challenge to any organization with a website. In order to get the most out of your website visitors these days, your content must adapt to a bevy of different screen sizes and resolutions. Luckily, there’s a web-standard known as “responsive design” that can help you do just that.

Responsive design allows for your content to literally respond and adjust to the device that it’s being viewed on. This means that a website that looks nice on a laptop computer, will also scale perfectly to a tablet or a smartphone. Let’s take a look at a real site to see how responsive design can be incorporated to improve the way that the site is viewed on a variety of devices.

An Inside Look at Responsive Design

We’re going to use the free microsite template that we provided in our earlier post The Nonprofit Microsite: What, Why, & How. This downloadable template includes an “html” and a “css” file. The “html” provides the skeleton of the site;  it dictates the content and general layout.  The “css” provides the styling for the site like sizes, colors, fonts, etc. It’s here that we will be adding in our responsive design adjustments.

This template was designed with a “fixed” size in mind.  What this means is that no matter what device attempts to view it, it will always be shown at the large fixed size that it was originally set to. This is fine for devices with large screens, such as laptops and desktop computers, but we run into trouble when the microsite is viewed on smaller devices like tablets and smartphones.

At these smaller sizes, the browser scales the microsite way down, attempting to fit everything onscreen. The site doesn’t look terrible but the images are much smaller, the text gets more and more difficult to read, and our primary calls to action (“donate” and “join”) become very difficult to actually tap with our fingers. By utilizing some basic responsive design techniques, however, we can get the microsite to adjust itself to fit naturally within the smaller form factors, avoiding all these problems.

Classy mobile design

Responsive design can improve this microsite on smaller form factors and devices by allowing us to specify how we would like our site to look and feel at particular sizes.  In the case of our microsite template, what we’d like to do is provide the flexibility for the microsite to scale from a normal laptop size all the way down to a smartphone.  Fortunately, the Internet is an inherently flexible medium and content naturally stretches and squeezes to fit the browser window.  Responsive design allows us to take things one step further by explicitly stating how content should be styled and arranged at particular points. Let’s take a look at our microsite example to see how this works.

Taking Advantage of the Web’s Fluid Nature

We want the entire layout of our microsite to take advantage of the natural fluidity of the web.  What this means is that we need to get rid of our fixed widths and fixed layouts and instead take advantage of percentage based dimensions.

Percentage based dimensions don’t rely upon a fixed pixel width; instead, they focus on the width of the browser — whether that’s your smartphone browser, tablet browser, or your desktop browser.  Switching out your site’s design to use flexible percentages is not terribly complex but does require a top-down adjustment of the styles driving your site’s layout.

.microsite-header-mainbar-inner {
	/* This header used to be a fixed width of 1000px */
        width: 1000px;

        /* But now, we want to tell the header to be no larger than 1000px
        and flexible at any size less than that */
        max-width: 1000px;
	width: 100%;

*For the more technical among you, you can see more code showcasing percentage based layouts in the downloadable template at the bottom of this post.

Finding the ‘Breakpoints’ of the Site

 After you’ve made the switch to percentage based dimensions, the next step is finding the “breakpoints” in the current site’s design. The term “breakpoint” references a particular width of the browser that causes the newly fluid design to look out of place, or “broken.” Some noticeable breakpoints might include:

  • Headline spills onto two lines
  • Buttons lose their spacing
  • Headline text is far too large

The particular browser window widths that cause a site to breakdown are not always the same. Breakpoints are unique to the particular design of a given site. The beauty of responsive design is that we have full control over how to reshape the site at each of these points.

Let’s take a look at the responsive “css” that will allow us to address the first breakpoint in our microsite. Breakpoints are addressed via “media queries.”  These media queries allow us to specify custom styles to apply to our site at specific browser dimensions.  The “css” code below represents the starting media query that allows us to address our first breakpoint at 535px.

@media only screen and (max-width: 535px) {
     /* This is our first media query! */
     /* This responsive CSS is saying that when the browser or device is at 535px
     Then we want to adjust the current design -- like by changing text size,
     button spacing and layout, etc.*/

     .microsite-main-actions-button {
          display: block;
	  width: 65%;
          margin: 0 auto 25px auto;


The above media query is just a single example.  As more breakpoints are identified within the design, additional media queries can get added to adjust the site’s design at those points.

Responsive design is a tremendous way to modernize your website and to provide an outstanding experience for users on any device. To start exploring on your own, download our newly responsive microsite template.  Feel free to hand off the example code to whoever works on your site, or play with it yourself.  And be sure to let us know what you come up with for your own organization’s websites and projects.

Download this Responsive Template

Photo Credit: Adapted from Flickr User ZERGE_VIOLATOR

Where social entrepreneurs go to learn and grow

Join over 20,000 leaders just like you who get their weekly dose of technology, innovation, fundraising ideas, and the latest industry trends.

Subscribe to the Classy Blog