The National Society of Collegiate Scholars (NSCS) is a nonprofit that recognizes and elevates high achieving college students across the United States. They have over 1 million millenial members, are recognized at 300 college campuses, and provide career support, service opportunities, and programs dedicated to the ideals of scholarship, leadership, and service.
As NSCS’s primary audience is college-aged millenials, they wanted their digital presence to reflect the youthful energy and vibrancy of their membership. They needed to provide a large amount of information while maintaining an intuitive navigation. Additionally, the website had to be mobile accessible.
Before
After
Over the past several months, Social Driver has worked with NSCS to completely redesign their website. In the process we learned a few things and we want to share with you some of the top-level considerations we focused on to make this website a success.
It’s easy to talk about yourself, but it’s far more effective to talk about your customers. To tell the story of your company or organization, be sure to show the people you help and lift their stories. NSCS’s mission is to elevate high achievers, but their old website focused more on the organization than on the students they supported.
For the new design, we wanted to share stories and images of NSCS’s members. The website now features large splash images of their members as well as an entire section dedicated to recognizing great alumni stories.
Determining navigation starts with having a clear understanding of your audience, the actions you want them to take, and a clear content architecture that supports those goals. Menu structures that are too shallow rely on a massive list of unrelated information which is confusing to the visitor. Conversely, menu structures that are too deep end up burying relevant information under excessive layers of menus.
For a complex website, we use information hierarchies that keep all of the content within two to three layers of the homepage. To accommodate for the large amount of information, we used multiple navigation bars that slide onto the page giving the visitor the ability to explore the different areas of the site more freely.
Every site’s architecture will be different, but keep in mind who you are targeting and what action you want them to take.
We’ve said it again, and again, and again. Designing your website responsively is an absolute necessity in today’s digital arena. NSCS’s primary audience is college students, who access the web through their mobile devices at an increasingly high rate. (TeensAndTechnology2013.pdf)
For NSCS, we divided the information into breakpoints that condenses the navigation into two expandable menus, leaving access to the entire site content while not overwhelming the visitor with a laundry list of menu options.
Congratulations to NSCS on a successful new launch!
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!
DotComInfoway recently posted a great infographic that explains what is responsive design and why it is important. We’re sharing it with you here!
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.
This is the second post in a series about Responsive Web Design, described in plain language from a front end designer.
In our last post I wrote about three reasons responsive web design is something you should know about. We discussed the problems associated with the traditional method of designing a desktop and mobile version of a website.
Essentially, there are just too many mobile devices hitting the market to tailor our websites to view well on them all. Nearly every device released has a different screen size and resolution than it’s predecessor. It simply doesn’t make sense for companies big and small to spend the time and money to create a bespoke web experience for each device in the ever expanding line-up.
The thing I like about problems or challenges is that–if we let them–they make us better people and create space for innovation and solutions that may otherwise never be discovered.
Designer and developer Ethan Marcotte was instrumental in solving this problem of device compatibility. He introduced the term, ‘Responsive Web Design’, in his 2010 article in A List Apart. If you haven’t read it yet, you need to… Right after you read this article, of course!
In actuality, the problem is still being solved and responsive web design methods, tools and standards are still being developed and refined. But in a nutshell, here’s how responsive web design works.
Responsive design uses a CSS3 feature called media queries. Media queries inspect the characteristics of the device and adjusts specific website styles accordingly. E.g. A media query may ask if the horizontal resolution of the device is equal to or less than 480px. If the answer is yes, the CSS may adjust the layout into a single column.
Here’s a few things we can do using media queries:
In essence responsive web design “responds” to our devices and adapts to create an enjoyable user experience. And this happens in real time as you turn your device or resize your browser window.
When programming a responsive website, developers set ranges of media query values to target specific device classes (i.e. smartphone, tablet, desktop/laptop, high res desktop/laptop). Each range of values activates a unique set of CSS code to construct the web page to view optimally on the target device. A breakpoint is the transition between media query values.
Here’s a simple example: If the available browser width is at least 780px the website may display menu bar that spreads across the top of the page. However, if the available width is less than 780px the css may restructure the menu bar into two rows or move the links into a drop down menu. When you resize you browser window below 780px wide you’ll see the menu adjust. This transition is a breakpoint.
To see this in action, check out this site we created for the Capital Area Food Bank. As you resize your browser window you’ll see the menu, slider and other elements adjust as you reach these break points.
Currently there are no widely adopted best practices for defining break points. In my opinion break points should loosely reflect device classes and be led by the design of the website. The goal is to create a site that looks good on any device and sticking to predefined break points won’t always accomplish this.
Designers have used grids for decades when designing layouts for print and this is true of good web designers as well. Traditionally we think of grids in terms of columns and rows with fixed widths, heights and gutter sizes. We may build a website using a 960px grid divided into 12 columns measuring 40px wide with 20px gutters. This works well for fixed width sites where the content is always the same width.
When we are designing a responsive website, we must think of column and gutter widths as a percentage of a maximum available width. This means the grid measurements expand and contract as needed, as does the content within them. See the difference between a fixed and fluid 960 grid on this site by selecting “Fluid 12-column” and then “Fixed 12-column” from the menu bar.
As web designers, we must change the way we think about web design. We’ve already learned that our print design skills are valuable, but not totally adequate, when it comes to web application. However, many of us design fixed width sites with a white knuckled hold on every graphic nuance. This is the control we were used to with print.
To create responsively designed websites we need to loosen our grip and accept the fact that we no longer have pixel perfect control over every element of the design that we’ve so painstakingly created. This doesn’t mean we compromise design quality. When we adjust our approach and thoughtfully consider how our designs will adapt across a wide variety of devices, responsive design means we can craft sites that look beautiful and function well no matter what devices our audience may prefer.
Okay, that’s as deep as we’ll dive for now. Stay tuned for our final post in this series, where we’ll share our 20 favorite responsive websites.
This is the first post in a series about Responsive Web Design, described in plain language from a front end designer.
Responsive Web Design has recently become a hot topic in the web design and development community. For those of you who are new to this term, responsive web design is a way of creating websites so they are able to adapt for optimal viewing across a variety of devices. Though the practice is relatively young, it is quickly being adopted as an industry standard–and for good reason. Practicing responsive design can help you connect with your audience, stay within budget and as we like to say here at Social Driver, Get With The Future.
In order to connect with your people on the web, you have to first understand how your audience is accessing the web. I could probably sum up the modern web environment with two words: “mobile explosion.” This may conjure very interesting mental images, but let me explain my word choice with the following stats:
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!
Okay, enough stats. What do all these figures mean anyway? In summary, more and more people are browsing the web on mobile devices. And if they aren’t yet, they most likely will be very soon. With the introduction of the tablet, “mobile” no longer pertains only to smartphones or feature phones. The gamut of screen sizes and resolutions has widened. People may be viewing your site on a Samsung Galaxy with a resolution of 480×800, a 768×1024 iPad 2 or a 1080×1920 desktop monitor. How do we create optimal web experiences for people across such a wide variety of devices?
Responsive Web Design helps us do just that, by enabling a website to respond to people’s browsing preferences. The content on the page is formatted and scaled to view beautifully and legibly whether on a tablet, smartphone or desktop monitor. This increases our visibility to our audience and helps us connect to people no matter what device they happen to prefer.
To understand the “why” behind responsive design, it’s helpful to understand the status quo. Currently, common practice is to design a desktop/laptop version of a website that will fit well in the minimum screen resolution of a company’s target audience. If the budget allows, the company may develop a second fixed width layout that will view well on most smartphones. While this approach is not necessarily wrong, it has a couple weaknesses.
The first is an increase in development cost and project timelines. Many organizations do not have the budget to develop both a desktop and a mobile site. Programming, designing and maintaining two unique sites often takes more time and therefore more money. Furthermore, not all mobile devices are the same. Tailoring a site to view optimally on an iPhone 4S does not mean it will look good on a Samsung Nexus. And for non-mobile sites, sticking with the good old 960px fixed width site no longer creates an optimal viewing experience on an increasing amount of desktop monitors, who’s resolutions are increasing. That is, unless you like half your browser window to be margins.
By designing responsively you can often save money by creating one website that fits nearly all devices. You will no longer have to worry about managing separate content for your mobile and desktop sites. Now people can access the same content on your website regardless of their device preferences.
While responsive web design is a relatively young practice, it is quickly becoming industry standard. More and more, we are recommending responsive design to the companies we work with. Not only does it help them keep costs down, but it also ensures that their websites will be forward compatible. As pixel densities, screen resolutions and aspect ratios of new devices change, practicing responsive design helps us create websites that will continue to view optimally on them all. In an industry where technology and trends are quickly evolving, it’s important that we’re providing companies with sustainable solutions.
Some companies’ audiences do a majority of their web browsing on desktop computers. If this is true of your company, we think the question to ask is “When does responsive design makes sense for us?” When will enough of our audience follow suite and begin using mobile devices? According to the statistics, the answer is sooner than we think.
Well, we’ve covered the main benefits of responsive web design and you may be curious as to how it works. Don’t worry! I’ve got you covered. Stay tuned for our next two posts, where I’ll dive a little deeper into how responsive design works and we’ll share with you our 20 favorite responsive websites.
