Social Driver is thrilled to present our 38 Best Nonprofit Websites of 2013! One year ago, we showed you our favorite examples of 2012 and we were excited to see many of those websites have redesigned their look and feel. Through extensive research and evaluation we chose the best nonprofit websites on the web today.
It was a tough job but somebody had to do it! Social Driver evaluated hundreds of websites based on the following criteria: clarity of call-to-action, mission portrayal through photography, vibrant and engaging website design, and responsive site layout. We’ve defined our criteria below and highlighted the nonprofit website from our list that does an exceptional job showcasing the criteria.
Want to see if your favorite nonprofit made the cut? Check it out!
With any successful campaign, whether online or off, an organization must have a clear call to action. A clear call to action provides users and members with a purpose and easy way to carry out that purpose.
LiveStrong does an excellent job displaying calls to action prominently on the site. Visitors are greeted with instructions to “Join Our Team,” “Wear Yellow,” or “Donate” giving visitors an easy and quick way to begin their fight for the cause.
Successfully defining problems and developing solutions among the cancer community has contributed to LiveStrong’s wide-reaching impact. The site’s clear calls to action help their supporters make an impact as well!
Photographs are a powerful tool in telling your organization’s story. A single stunning photograph can pull in visitors and compel them to get involved.
Kiva made the cut as one our 38 Best Nonprofit Websites because of the compelling use of photography to tell their members’ stories. As a nonprofit that utilizes crowdfunding to promote entrepreneurship globally, potential donors must be able to connect with the individual projects showcased by Kiva. Inspiring descriptions of the need for funding accompany each “borrower” photo, better assisting lenders in their quest to give.
Along with photography, vibrant and unique website design is key to attracting your target audience and pulling them into the site to ensure your audience commits to your organization’s calls to action.
Sesame Workshop’s vibrant design, easy to ready typography, and simple color scheme bring visitors at all levels into the site. Can you tell me how to get to Sesame Street? With Sesame Workshop’s fun to navigate website you will cheerfully and easily find the nonprofit’s mission and calls to action. Not only do we enjoy Sesame Workshop for all they do educationally to help children in 150 countries, but also for their visually stimulating site!
Web traffic is increasingly becoming more and more mobile. Your users are viewing and sharing your nonprofit website on a variety of devices, whether you want them to or not. Having a website that can adapt to different technologies and screen sizes is essential for connecting with your audience.
Boot Campaign helps raise awareness of the challenges American solders face upon returning home from war and raises money to provide assistance to programs helping our heroes on the front lines. Boot Campaign knew their target audience was heavily concentrated with mobile users. Creating a fully responsive site that looks and functions great on desktops, tablets, and smartphones allows Boot Campaign’s supporters to make a difference wherever they may be.
Want to see if your favorite nonprofit made the cut? Check it out!
Do you know of other nonprofit websites that we didn’t choose that could be contenders based on the criteria? You can let us know in the comments below.
We’ve shown some of our favorite responsive design examples, we’ve told you why responsive design is important, and we’ve even explained how it works. Now, we’ve collected our absolute favorite layout tools, testing tools, development tools, articles, and inspirations to make designing responsively as easy as possible. We think that all websites should be responsive, so take these tools and make our dream come true!
The best way to start any design is with a sketch. These free sketch sheets have four different sizes so you can plan out your design according to your different break points. They’re perfectly sized to print out so you can make as many as you want!
This is the most interactive and best-looking grid generator I’ve come across. You can specify the size of your grid elements–number of columns, column padding, gutter width–resize the grid for different resolutions, and even add break points. Once you’ve set your specs, one click will download your Gridpak containing PNG, CSS and JS files. This means you can use it in your design process, as well as your development. It works super well and looks pretty sweet doing it!
You should talk to us. Social Driver is now hiring both part-time and full-time front-end developers to help bring our responsive designs to life. We have free Nespresso and lots of fun!
This page has 5 different layout wireframes which you can toggle to a mobile view to see how content can be rearranged. Unfortunately you’re unable to make your own wireframes, and can’t control the screen sizes, but it’s still a good resource when you’re thinking about content organization.
This is a great collection of the various patterns used in responsive design. Different ways of reflowing content, handling navigation, tables, images, and more are shown with accompanying descriptions. By clicking “Edit This Pen” at the bottom of each page you can see the full HTML and CSS. Nicely done!
Your days of manually dragging out grids in Photoshop are over! GuideGuide is a free plugin for Photoshop that allows you to input a few values (column width, row width, gutter width, etc), press a button and Photoshop draws out the grid perfectly for you. I wish I had known about this sooner!
This article by Ethan Marcotte is a great introduction to responsive web design and development. Ethan provides a background for responsive design while walking the readers through his creation of a responsive page. He does a great job of explaining every step along the way as well as his thought process behind the work.
Are you just starting to plan your responsive site and don’t exactly know where to start thinking about content organization? Give this article a read. Luke discusses a few different ways to reorganize your page once the resolution gets smaller. With tons of examples and helpful diagrams, you’ll be on your way to a great responsive site in no time!
This article is rare in that it’s written for designers who won’t be touching any code. That being said, the article rightfully says, “To truly learn how to design a website, you must understand how the design will later be implemented in code, even if it’s only a rudimentary understanding.” The basics of Responsive Web Design are covered, as well as giving designers helpful tips on how to plan a design before anything gets started.
Deciding on breakpoints will always come up when designing responsive pages, but where should you place them? Many people hold to a standard set of breakpoints based on the resolution of popular devices, but there’s another way of thinking. This short and sweet article is an enlightening read if your wanting to refine your process for setting breakpoints for your responsive layouts.
BostonGlobe.com is one of the more recognizable responsive sites and frequently appears on lists about RWD. The author of this article talks us through the whole process of designing the new BostonGlobe.com with insights into breakpoints, where to start, and which programs to design in. It’s really interesting to read the problems they ran into and get some insight into the thought process that goes into redesigning a large website while keeping responsiveness in mind.
The whole process of designing for responsiveness is covered here. As a designer, responsiveness changes our workflow a bit. More design work must be done in-browser rather than completed before handing it off to the developer and the author does a great job of detailing this new process.
If you are wanting to test a responsive website that’s in development and you left your iPad at home or simply prefer doing it all on your desktop, responsive.is is the way to go. Put in a website and you can resize it for desktop and ipad or iphone in portrait and landscape orientation. It doesn’t offer manual control over window size, but it’s simple and works well for people targeting iOS.
There are a lot of testing sites out there, but I’ve found Screenqueries to be my favorite. It’s got a large list of mobile devices that you can select from, or you can drag the ruler around to fine-tune the window and choose exactly the resolution you want to see. You can easily rotate the view with a single click, and even see how it’ll look within the device’s browser UI using the “True View” button.
This grid generator gets right to the point and does it well. It allows you to input exactly how many columns you want, as well as widths and gutters, whereas other generators only give you a few pre-selected options.
Such a great repository for inspiration! Media Queries shows off tons of responsive examples with the different screen sizes side-by-side. It’s a great place to get ideas, or see how other designers are reorganizing content as screen size changes. Go to http://mediaqueri.es/popular for the best examples.
What are your favorite tools? Let us know in the comments below!
This is the third post in a series about Responsive Web Design, described in plain language from a front end designer.
Ok, so we’ve discussed why responsive web design is an excellent solution for our websites. Then we dug a little deeper into how it actually works. Today we want to share our 20 favorite responsively designed websites and why we think they’re so great.
The largest responsive website to date, The Boston Globe handles loads of content effortlessly, keeping the site intuitive and the content easily accessible on the device of your choice.
You should talk to us. Social Driver is now hiring both part-time and full-time front-end developers to help bring our responsive designs to life. We have free Nespresso and lots of fun!
I love this site. I really do. Smashing takes advantage of horizontal screen real estate like few responsive sites do. Go ahead expand your browser window out as far as your screen allows and it just maximizes the space without feeling cluttered. Furthermore, the strength of the layout and menu structure does not degrade at smaller screen sizes. Nicely done.
Clean layout, beautiful photography and playful iconography made me like this site immediately on my first visit. It’s a joy to look at and navigate on any device and if you’re a foody looking for scrumptious, healthy recipes it may be love at first site.
Type designer, Jan Tschichold once said, ‘Simplicity of form is never a poverty, it is a great virtue.’ The simple layout and understated menu and graphic elements juxtaposed against beautiful fluid images communicate that excellence in form and function are givens when working with this architecture studio. This site just says ‘good design’ whether I’m viewing it on my iPhone or my iMac.
If you haven’t check out Sphero, you should. It’s an amazing robotic ball gaming system for IOS and Android devices. But I’m not reviewing their product, just there site. A recent web design trend is the use of background photos that flood the browser window. Sphero does this well. The abstract product photos with a grid overlay don’t distract from the important content. I like the permanent menu and footer bars on my desktop, but appreciate how the footer moves to make room for more important content on my iPhone. Overall, the site is intuitive and attractive. An excellent example that responsive design done well looks great on any size screen.
It might be the conspicuous green frog that causes me love this site. Either way, it’s worth resizing your browser window just to see him change size, shape and color. But seriously, this is a polished responsive site. The breakpoints correspond well with the layout requirements and the result is a sharp looking site that does not degrade at any size. The main menu always looks good even when those sweet little icons go away to make room on smaller screens.
The Grey Goose site shows that designing responsively does not limit our designs to columns of fluid text and images on solid backgrounds. The sky is still the limit with what we can do responsively. Beautiful photography, parallax scrolling, intuitive navigation and refined typography combine to create a site that is as equally functional and attractive on my smart iPhone as it is my iMac. This list is not in order of our preference, but if it was I think Grey Goose would be at the top.
With a name like “New Adventures In Web Design,” one would expect a responsive site for this web design conference. I think my favorite aspect of this site is the use of fluid typography. Notice how the menu, headline and body text resize subtly to achieve optimal legibility on all devices. Good design is all about the details and this site has the details dialed in.
Websites in the higher education space are not necessarily known for being on the leading edge of design trends. So discovering the Lancaster site was a nice surprise. I appreciate its simple, modern, non-trendy look and feel. In spite of it’s large amount of content, it’s as easy to navigate on my iPhone as it is on my iMac.
The spacious layout, bold typography and simple icons make fundraise.com easy to look at and navigate.
Nick La’s blog is a wealth of information and resources for any designer or front end developer. But that’s not why it’s in our list. The great content is accompanied by subtle texture, beautiful illustration and–thanks to its responsive nature–is easily accessible no matter what device you fancy.
Heathlife celebrates the heritage of one of London’s largest parks. Though maybe not quite as stunning as the park itself, this website is a beauty on screens large and small.
Though this site is not fluid, it has well structured layouts for any device class. Where many large responsive websites omit content for smaller screen sizes, London & Partners keeps it all, maximizing accessibility for mobile users. This is a good reminder that responsive design is an excellent solution for large and small site alike.
Oliver Russell has done a good job of building a site that responds well on mobile devices while keeping the integrity of the design in tact. I appreciate the shallow and straight forward content structure. My eyes are drawn to the most important sales points and I can access nearly all that I want to know without leaving the homepage. Refreshingly simple compared to the laborious, text heavy website of other marketing firms. One complaint: I would like to see the site expand beyond width of 960 pixels on larger monitors.
Ryan is product designer at Facebook, but has invested in a personal portfolio site that is a cut above the norm. Well branded and brilliantly responsive, Ryan’s site is a thing of beauty on any screen.
Jessica’s lettering and illustration rocks and so does her site. Seriously, I can’t help but smile when I look at it. It is simple and elegant and delightfully fluid. Oh, and for good measure she through in three additional themes. One of which is “Teen Girl Mode”, replete with rediculously distracting animated gifs and a hideous cat illustration (Just click on the little heart in the upper right corner).
Maybe it’s the friendly King Trident mascot, but this happy little site makes me want to download the Fork cms straightaway, or at least “try the demo”. To increase mobile load times the CSS omits the fun header illustrations at smaller sizes. Overall, site reformats and displays nicely on a variety of display ports.
Ethan coined the phrase, ‘Responsive Web Design’ in 2010, so it comes without surprise that his website is responsive. Ethan’s belief in articulate and intelligent design is expressed in a site that is straight and to the point without extraneous decoration.
This t-shirt shop site stretches and shrinks to fill any size view port with photos of their hip graphic t’s. Fluid images and type make this site a joy to browse on any size device. One complaint: I think the menu could be smaller for use on smartphones. Currently it takes up an unnecessary amount of valuable screen space on my iPhone.
Trent’s site is an excellent example of fluid type. On a large monitor the text size is slightly bigger for increased readability, whereas the text shrinks to achieve comfortable line lengths and legibility on my iPhone. I also really like the simple block print style illustrations Trent includes in his articles.
