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!
At Social Driver, we like to think a lot about the future, but sometimes it’s fun to look back at the past and see just how far we’ve come. This infographic shows the state of our union 100 years ago compared to today. What do you think we’ll see in the next 100 years?
Happy Election Day! AIGA holds a contest every year for graphic designers to submit Get Out the Vote posters and we’re sorted through them to select our favorite ones. Whoever you support today, make sure your voice is heard and get out the vote!
Designer: Hunter Langston
Designer: Matthew Gray
Last week, we shared links that will make you think. This time around, it’s all about doing! According to Adobe’s infographic, two thirds of businesses say social media is integral to their marketing. Brands are using multiple social media sites to engage to their customers, with Facebook and Twitter as the most popular platforms. Check out articles below that describe new functionalities and tips to take advantage of these new tools for your own marketing and social engagement efforts!
Facebook Lets Businesses Plug in CRM Email Addresses to Target Customers with Hyper-Relevant Ads
Combining CRM technology with Facebook user information, businesses can now target their advertisements to multiple customer segments. For example, Starwood can position their St. Regis hotel advertisements to high-end customers while also promoting their economical hotel brands to budget conscious customers. Announced at last week’s Dreamforce Conference, Facebook’s new advertisement tool called Custom Audience means you’ll soon see advertisements with messages directly tailored to you.
How H&M, Starbucks, and Google Became Centers of Attention on Twitter
According to Ad Age and Blue Fin Labs, Starbucks, FIFA Soccer, Google, and H&M are a few of the brands with the biggest gains in social mentions on Twitter this past week. What was a key theme across these brands’ top gains? TV Advertisements! Takeaway: integrate multiple media platforms to engage your audience. As this shows, engaging and compelling television ads support customer engagement on social media and vice versa.
Introducing Endorsements: Give Kudos with Just One Click
With LinkedIn’s new function called Endorsements, your colleagues can now recommend skills and expertise you may not even knew you had! LinkedIn will alert you via email whenever your peers either suggest a new skill or vouch your existing expertise. Your colleagues’ pics making the endorsement will also be featured in the Skills & Expertise section of your page.
Facebook Groups Adds Dropbox Integration
Pretty soon you’ll be able to “like” and comment on shared documents through Facebook’s Groups page using Dropbox. Facebook will be rolling out this new feature where Group members can link their Dropbox accounts directly onto their Facebook Groups page, making it easier to alert members of document edits and changes.
The above are just a few new tools we’ve discovered. Here are a handful of other articles that sparked the interest of the Social Driver Team:
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.
We here at Social Driver believe that everyone can get with the future, governments too.
Government websites may be the perfect case for web usability and good design. These sites have a public mission to serve and inform, both of which can be greatly helped with a few smart webtools and an open eye to innovation. And now, with such amazing tools at our disposal, the opportunity for agencies to build high impact, and highly useful sites has never been greater.
What makes a government site great is different than what makes a conventional site great, of course. Good looks and snazzy graphics alone don’t make for a good use of taxpayer dollars. Like the agencies they represent, a good site is for the people and therefore serves a public purpose. These winners all succeed by looking good and doing good.
Did you know that the polished brass finish on your home plumbing fixtures comes from a space-age technology developed by NASA? You do now and you’re welcome. NASA@Home is a fun and graphically innovative site for understanding all the ways that NASA touches our lives. Fun to explore, loaded with information.
They say that Kentucky is where beauty, excitement, and hospitality come alive. Would you expect anything less from the state’s own website? KY.gov’s maker’s mark feels modern and accessible while providing all of the state’s vital resources. Even better, no wild turkey chases here. The site’s responsive design will beam any Jim straight to the information needed, regardless of device. And if there’s anything we here at Social Driver love, its bourbon responsive design.
Joining KY in the winner’s circle is Utah.gov with its search-centric, Bing-inspired landing page. Why sort for information on winter skiing conditions or dinosaur fossils when you can just search for it? (or, is it “Bing it?” Or, “Ute it?” Yes, we like “Ute it.”) While the site may not be response it is very mobile ready, so you can put on your official Utah state tartan and dance the official state folk dance. What are those, you ask? Ute it.
Governments are complicated. Benefits are complicated. Much to the relief of bureaucrats everywhere, benefits.gov is not complicated. Through their handy ‘Benefits Finder’ you can take a look to see which government assistance program. I, for example, may be eligible for 54 benefit programs. Thanks, benefits.gov!
How strong is the US Army’s website? Army strong, naturally. Backed by alluring imagery of skydivers and wall climbers, GoArmy is the online face of the Army’s recruitment efforts. The site’s appeal is more than skin deep though. Live webcasts, virtual base explorations, and live chats with sergeants aplenty are at the ready to help you choose to answer that call of duty.
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 video was shown at the opening of the Typophile Conference in Seattle in July 2007. It is an inspiring example of how we can use design to not only create something beautiful, but to tell a story. There is no identity or personal characteristics revealed in the video, just a sped up story of life told through the typography that we see everyday. I challenge you to watch this without getting a little misty-eyed.
