As we head into Fall of 2014, (yes, I prefer to skip August as a Texas resident) we approach the 3-year anniversary of Responsive Design. The famous Boston Globe website launched in September of 2011 as one of the first fully responsive sites and now it almost seems there’s a mandate to go responsive.

I love responsive design and am especially digging these 3 fancy design trends that have developed along with it…

The long, scrolling homepage

Since we’re designing sites for ALL devices, scrolling has become ubiquitous. We used to fear the scroll, wanting to keep everything “above the fold”, especially on the homepage. After all, do you remember how difficult scrolling was before the touch screen? You might have had to roll the wheel on your mouse, seek out the “Page Down” key, or (gasp!) move your cursor over to the scroll bar and click. In all seriousness, touch screens have made it physically easier to scroll so designers are taking advantage.

One of my favorite examples of the long, scrolling homepage is the Oxfam America website. In lieu of a really long screenshot, just click over to their site to check it out.

Slow death of the slideshow

I know, I know, we all loved the slideshow. It’s a great mechanism for keeping several groups of stakeholders happy since they get a slide to show their stuff, calming down the battle for homepage real estate. It also gives you an easy way to keep your homepage “fresh”. For these reasons, many of the great responsive sites out there are still using slideshows. However, I believe that the goal of a slideshow actually competes with the goal of a long, scrolling homepage. When you design a long page, you want your users to scroll down the page to see your content but if you’re offering slides at the top, you’re asking them to sit there and watch.

One of my favorite examples of a site that uses a single, beautiful image with a call-to-action is the charity:water site:
Screenshot from the charity: water homepage

Caveat: if you do decide to ditch your slideshow, be prepared to update your feature image every couple of weeks or so. You don’t necessarily need to switch out the messaging or call-to-action but I still like to see a fresh image upon repeat visits. You could even have a bank of images loaded on your site and do the old rotate upon refresh trick to keep it interesting.

The Donate widget

Now that we’re all comfortable with scrolling, designers are welcoming the extra vertical space by creating large, interactive Donate widgets. These widgets are more visible than the “Donate Now” buttons of yore, allowing orgs to communicate more about donating and also completing the first step of the donation process right on the page.

My favorite Donate widget can be seen on the Heifer International website:
Screenshot from the Heifer International site with buttons for different donation amounts

What are some of your favorite design trends? Take a moment to enlighten me in the comments!

ABOUT THE AUTHOR

Lacey Kruger, principal information architect for Blackbaud, works with nonprofit clients to design online properties that work. Whether a full-scale website, a campaign site or a mobile app, Lacey guides clients through a research-based and user-centered approach to design. In her 10+ years at Blackbaud, she has developed a deep understanding of nonprofit web presences. That knowledge, along with her years of experience in information design, have established her as an industry expert.

Lacey has written a Blackbaud eBook, “A Guide to the Nonprofit Web Design Process” and her article, “Designing Nonprofit Experiences: Building a UX Toolkit” was published in User Experience magazine. She has presented at industry conferences including bbcon, IA Summit and BIG Design. When she’s not working, Lacey loves to cook and also enjoys yoga, watching movies and catching alligators (really!).

Get nonprofit articles, best practice advice, fundraising ideas and invaluable industry reports and webinars delivered for free!