Even in a debate-driven world, there’s one thing most professionals agree on: Word-of-mouth is king.
Think about it. Would you be more likely to trust the intentions of a banner ad or the person sitting across from you at brunch? A recommendation between friends is always going to carry more weight than an organization-sponsored advertisement. There’s just one problem...
We can’t control it.
Sure, we may do our best to create advocates, but we’re not working with puppet strings here (and we wouldn’t want to be). Something has to incite readers to action. Fortunately, we live in a day and age where word-of-mouth has given rise to a more amplified version of itself: word-of-text. Even the most well executed campaigns can’t hold a candle to sincere advocates taking to social media. That’s why we’ve compiled a list of eight organizations with exemplary integrations. Take a look:
One leans on social proof to encourage third-party follows. By showcasing their impressive numbers, they demonstrate authentic support for their mission—which comes across as implied word-of-text.
St. Jude’s website includes an unobtrusive share button at the bottom of each page, which—once clicked—reveals a variety of social media options. Nice and simple.
Pacific Environment introduces one of our favorite integrations to the list: click-to-tweet messages. Not only do they enable visitors to spread the word to their own followers, they take the pressure off by providing a visible social script.
PBS curates their social content by highlighting their most recent tweet alongside popular hashtags and follow links, making it easy to join the conversation.
Amnesty has made several of our highlight lists, and this is one is no different—for good reason. Their social media section offers a variety of quick and easy ways to spread the word.
Do Something has a unique approach to social integration—and advocacy itself, for that matter. They help visitors find ways to participate based on their interests and how much time they’re willing to spend. Example: A few quick, exploratory clicks brought up a selfie campaign using social media.
Note that each of these examples made the experience simple and painless for visitors. Remember, people are busy. We have a small window of time to catch their interest and an even smaller window to convert that interest into action. Use both wisely.
I've gotten support issues from several clients that all revolve around a central theme: things need to happen differently on the development server than the live server and no one wants to manually change or configure anything. I've hacked together various solutions over the years and they always fall short in some way. Either they don't work 100% of the time, or they're too resource intensive, or they require too much manual intervention to be practical.
Recently, I've landed on a pretty solid workflow on Pantheon using Quicksliver. I won't talk about Pantheon or the advantages that come with hosting and developing on their platform, you're probably here because you already know. However, you may not know about Quicksilver.
Quicksilver is a relatively new part of Pantheon which allows for automating tasks and firing those tasks off before or after certain events on the Pantheon platform (pushing code, copying a database, flushing the cache...). Most of Pantheon's examples are fairly trivial, and while they provide a good starting point for understanding the platform, they don't really give you any best practices to follow or get you far in terms of something simple you can just drop into an existing site.
That's what I'm going to give you!
First, the settings files. Yes, files. Strictly speaking you don't need a settings.php file on Pantheon, but you do need one to use Drush, and you'll want Drush available in Quicksilver. I'm establishing a best practice here in Rootid of creating a settings.dev.php, settings.test.php, and settings.live.php files and using the settings.local.php include pattern to bring in one of those values based on the PANTHEON_ENVIRONMENT constant. Note: I'm NOT using the $_ENV['PANTHEON_ENVIRONMENT'] variable, which doesn't seem to be available in Drush. I want to do this because I want to create Quicksilver tasks that are 100% site independent. I want configuration to live in the site settings files, and the tasks to use those configurations instead of coupling configuration and tasks the way the examples do.
Breaking up your settings like this will allow you to easily define reusable settings files that you can just drop into a project. For my settings.dev.php I want to enable devel and disable Google Analytics, this is what my settings.dev.php looks like:
I'm adding an array to the $conf variable, qs_module_settings, and placing modules in the enabled/disabled array under it. I'll define this in all three of my environment specific settings files. Now, I'll create a Quicksilver task for enabling and disabling modules after the database is copied to an environment:
This task loads in the currently enabled and disabled modules, and the list of modules that should be enabled and disabled in the current environment. I want to note that I'm not doing a check to see which environment I'm in when I call this script. The assumption is that the settings file has made that call before this script was run. The correct values should be coming from the settings.<environment>.php file. This file should be saved to /private/scripts/update_modules/update_modules.php; the /private directory will prevent the script from being served to web users, the rest of the path is just to keep things clean.
Next, we need to create the pantheon.yml file to tell Pantheon that we want to enable Quicksilver and tell it about the service we've defined. The file is pretty self-explanatory, for more information than I could give here, check out the Pantheon Quicksilver docs. Place this file at the root of your site and it should be discovered when you commit it to your site:
Once all these files are in place push your code to Pantheon, copy the db from live to dev, and make sure your dev modules get enabled and the appropriate modules get disabled. Hopefully this help you on the path to a cleaner Pantheon workflow.
One more time I want to note that what I'm excited about with this setup is that the service being defined in update_modules.php is 100% independent of specific site configuration and as long as you always follow the same convention you can easily just drop it in to every site without modification.
Imagine going to a new grocery store and not having a clue where anything is. There are signs, but they’re vague and confusing. Maybe they’re so obscure you don’t notice them at all. Would that make for a good first impression? If you’re anything like us, you wouldn’t make a return visit anytime soon.
Now shift that scenario from a store to a website.
The same principles apply. If the navigation isn’t clear and inviting, chances are, you won’t bookmark it to visit again—or worse, you’ll leave without exploring any further. So, what can be done to save our own websites from this fictional fate? Let’s take a look at six organizations with an abundance of navigational inspiration.
6. Earthjustice.org
EarthJustice uses color-coded horizontal navigation to differentiate informational tabs from calls-to-action. Upon hover, second and tertiary levels drop down in easy to follow menus.
5. Headlands.org
Headlands Center for the Arts also color codes their horizontal navigation, but instead it’s upon hover, where secondary levels are highlighted.
4. GatesFoundation.org
The Bill & Melinda Gates Foundation uses a minimalist approach by containing its navigation within a menu symbol in the upper left corner. Once clicked, vertical categories appear on the left side with dropdown arrows to expose further sublevels.
3. Comedy Central
Comedy Central has a horizontal navigation that changes color and drops down upon hover, displaying alphabetized secondary menus.
2. AIGA.org
AIGA differentiates itself by dropping a semi-transparent gradient over the content, upon hovering over its horizontal navigation. Visitors can focus on navigational options, while still viewing the page they landed on.
1. HugeInc.com
This larger full screen overlay is responsive friendly, and gives you the ability to tuck away your main navigation items while still giving them full attention when called upon. A little bit more intense than the AIGA example, but another well designed and engaging option.
Navigation and Donations
You'd be surprised how much navigation can affect the amount of donations that your website receives. To help navigate this, we've put together a comprehensive guide to boosting your organization's online donations.
We demystify the technology and strategies that make it easy to raise more money.
Every organization has a story. Somewhere along the line, a spark inspired someone to challenge the status quo, and that idea was tempered by milestones to forge the business we see today. What better way to celebrate that history than to put it on display?
Your audience wants to connect with you. They want to relate and invest in your success. But to do so, you have to let them in on the narrative. That’s why timelines are so popular in web design right now. With a few clicks, audiences are able to see an organization’s impact through solid, qualitative facts that stick with them. When executed properly, they might even encourage your visitors to become part of your future—but how?
Don’t worry. We’ve searched far and wide for seven of the best tips and examples to inspire you.
Example: Microsoft Research → Microsoft reinforces its familiarity by mimicking widgets from its newer-gen startup screens, and then offers plenty of opportunity to spread the word.
4. Entertain while you educate.
Example: Museum of the American Revolution → With its clickable plaques and stunning visuals, it’s almost like strolling through an actual exhibit.
3. Complement the rest of your website.
Example: The Anne Frank House → This beautiful timeline is consistent with the museum’s muted colors, textures, and imagery.
2. Hold your audience’s attention.
Example: Amnesty International → Treat it like a PowerPoint presentation. Text should be kept brief and to the point.
1. Above all else, make sure it works!
Example: Knight Lab’s Timeline plugin. → What good is information if it’s inaccessible? Using a clean, functional template can ensure your timeline works for and not against you.
And there you have it! Which timelines drew your attention the most? Are you thinking of implementing one for your own organization? Drop us a line »
Telling a Story to Help Engage Users
Engaging online users is critical to building a long term relationship, that will ultimately lead to support - whether it's time, treasure or talent.
We've put together a comprehensive guide that demystifies the strategies and technology that can help you generate more donations online. Many of the solutions are easier than you think.
Successful Website Projects: 4 Things to Discuss BEFORE You Start
Designing a new website, or redesigning your old website, is a large project to undertake. Larger than most people think.
According to SME Website Statistic, 48% of people cited a website’s design as the number one factor in deciding the credibility of a business. So, the price of a web design failure can be high.
Don’t worry! This post will start you on the path to a successful website project today.
We’ll cover four key areas to discuss internally with your team BEFORE you start the website project.
Though our team walks our clients through this process during every project, overwhelmingly, clients that have done internal work before we begin the project have greater success.
Organizational Strategy and Goals
A website does not get designed in a vacuum.
Meaning: your website is one of the foundational pieces of your marketing strategy, so it should help your organization move towards its long-term goals.
Ask yourself how your website can support your goals to boost online donations, organizational memberships, email sign-ups, social engagement, etc.
What obstacles are currently preventing success?
For most people, the obstacles that are preventing success fall into a few categories.
1. Brand and Design: “Our website looks like it’s from the GeoCities era!”
OK - maybe it’s not that bad, but a brand refresh can go a long way to build trust with your constituencies, and position your organization as a leader.
Think about the specific elements that might need updating: logo, color palette, fonts, content language, etc.
2. UX Design and Architectural: “Our users report it’s hard to find stuff.”
This is common comment that we hear from organizations looking to update their website.
The solution:
Gather a better understanding of who your audience is, and what they are trying to accomplish when they get there.
Stakeholder interviews can be extremely effective method for gathering this information.
3. System Integration: “Our website and CRM don’t talk to each other.”
Ever downloaded a CSV from one system and uploaded it into your CRM?
I thought so. We all have had that *pleasure*.
If systems don’t talk, they suck up valuable staff resources. Now’s the time to get serious about integration. Investing some money today will pay off in the long run.
In the age of content marketing, control of your website is a must. Your visitors expect fresh content constantly.
Bottom line:
Make sure you you get trained on how to manage your website.
Great, I have my obstacles, now what?
It’s important to provide context to the obstacles. Once identified, it’s important to better understand how they contribute to your goals not getting met.
For example: “I spend so much time downloading and uploading CSV’s to our CRM, that I can’t follow-up to thank our donors.”
Know Your Audience
I can’t stress how important this element is:
It’s hard to engage an audience that you don’t fully understand. Take the time to get to know and understand them. Your success counts on it.
Your organization should have a clear description for each audience group your work with and the top 3 things that you want them to do.
Do you know what they do on your site currently?
Do you know what you WANT them to do on your site?
Notice: there is a big difference between what they do, and what you’d like them to do. This is an important distinction.
How do you measure success on our website?
It’s hard to measure if you never set goals.
We find that many people don’t set goals because they don’t want to know if they’re not meeting them. Failure is not celebrated enough.
Failure to meet a goal can be as bad as blowing a goal out of the water because maybe you set your expectations too low.
At the end of the day, you need establish what you’re going to measure and how you’re going to measure it.
How to get started
Getting this conversation started can be difficult, especially in an organization that has a lot of voices to be heard. Here are some keys:
Set expectations that you would like to hear all staff thoughts on these matters, but not all suggestions provided will be implemented on the new website. It’s important to establish this early and often.
Internal surveys can be helpful to facilitate this process.
Make sure to engage senior staff early in the planning process. Getting their buy-in on the project is extremely important.
Download our comprehensive guide that breaks down the technology and strategies into easy to follow steps. The solutions are simpler than you think.
As I am sure any front-end developer can attest to, there are a lot of "small bits" (and maybe some large ones) that we as designers forget to create, or just simply overlook. This can include functionality like hover effects that maybe unclear, or even just basic design elements that are not explicitly described. In agile development, some of this would be taken care of through user stories, but at the end of the day, there are still things like "what does the favicon look like?" that sometimes get forgotten.
Below is a checklist of all the forgotten bits and general web design features we need to make sure to consider and describe.
The Forgotten Bits
1. The Favicon Might as well start at the top of the page. How many times have you gone to a site and seen a Wordpress, Drupal, or whatever other CMS's default icon in your browser window tab? Too many times, that's how many. This is such a small thing, literally, that it often gets forgotten. 16 x 16, save as an optimized for web .png and send it over. Remember it is going to be super small, so make sure your lines are thick enough.
2. Site Logo Whatever logo you have designed (or been given) needs to show up well on desktop, mobile and as a square avatar for social media. When you are designing where on your home page the site logo is going to live, keep this in mind. Heck, provide the three options to your developer from the start, it will save both of you a considerable amount of time.
3. Navigation If you have 2 layers of navigation on your desktop view, make sure to think about how this is going to work for mobile. Is it going to just translate to a drawer menu with the "hamburger" icon; will users click and layered navigation will just expland down the page? Do you have an upper navigation with search bar that you need to keep for whatever reason? Just make sure you have considered these things when you are designing, and make notes of how you want the navigation to play out across devices.
4. Hover Effects So you just finished designing your awesome navigation and menu system—now what happens when someone hovers on desktop? Is there a block that appears in a color with your link on top? Is there a drop-down menu? How many layers deep does it go? (Please say 1 or 2 max...I think we have moved past where deep drop-downs are even useful and not just cumbersome.)
Hover effects for inline links are also important to consider. Maybe your link changes color, just gets more bold or has a simple underline. In any case, you need to show or describe this somewhere in your design or notes.
5. Header Image or Slideshow Do you have a header image or slideshow at the top of your page? If yes, what are the dimensions? Your client will need to know this. Also, keep in mind that if your header image/slideshow and the images on the rest of your site are inconsistent dimensions, your front-end developer should be alerted sooner than later. There are a lot of plugins/modules/tools that make photo-cropping/sizing, etc. easy these days, but it needs to be a conversation with your web team from the start.
Also, remember that slideshows need some visual queue for moving to the next slide like arrows, dots or thumbnails. What do these look like? Do they only appear on hover?
How does your slideshow translate to mobile? Does it have big blocks of text on top? Where does that text go? Usually below the image, but consider removing the slideshow on mobile altogether...there maybe a better way to show this content that is more effective.
Last thing about this: make SURE to optimize your images. That means "Save for Web & Devices" in Photoshop and if it is a .jpg you are making, try looking at it in the 2 or 4-up mode and compare everything from 50% to 80%. As long as it does not look grainy, keep moving it closer to 50%. The smaller the image, the faster the load time. That being said, you also need to consider retina displays. So you will need a version of your images that is 2x the 'pixel density' of what you optimize for all other screens.
6. Column widths and Gutters I always start designing from a responsive, boot-strap grid. It is really important for your column and gutter widths to be consistent and responsive/mobile friendly. Even though your elements are ultimately going to move around the page depending what device your site visitor is using, you don't want your design to get all jumbled. When choosing your basic column width, consider how that is going to look on a small iphone screen. Having super narrow or wide columns is probably not going to translate well.
Basic Features & "Atomic" Elements
7. Header Labels & Body Text Headers vs. main body text are often different fonts, but their sizing still needs to be considered in relation to one another. Especially, when you are asking your developer to pull sizes from the design into CSS. Start with your body text and then plan your header sizes up from there. If you have typography training, think in terms of your "x" height...don't just choose random sizes. Yes, you want to play around a bit so it looks good, but also remember that you need this to be mobile friendly, and thus sizes need to be proportional to one another. Here are the sizes and proportions to consider.
Body Text: Often around 14-18px, sometimes larger these days. Make sure you are choosing web safe fonts from trusted resources like Google Fonts, Font Squirrel, Adobe Font Kit, etc. You do not want the font you choose to look super different across browsers.
H4: This is probably a sub-sub heading and maybe the same font as your body text, just all caps, bold with a color change. Consider its line-height in relation to the rest of your body text.
H3: This maybe a normal section heading so could have a font change or just be 2x as large as your body text. Again, consider line-height and its style (bold, caps, color, etc.). Make sure these are consistent and documented.
H2: Probably your page title. It is often 2.5 -3x the size of your body text, depending on your overall visual language. Is it centered? ALL CAPS? Does it have a color change or other visual element added like a horizontal line above, below or to the sides? Again, make sure it is consistent across your page templates.
H1: This may be only used for a "Call to Action" or some other unique element that you want to be LARGE...but it still needs to be thought about and described. This can be 3-4x your body text...but really it is up to you. I feel like this is the most "personal preference, design specific" heading tag.
8. Buttons Give your website consistent buttons. It is ok for them to change color a little (ie. 1-3 colors if we are using them for different types of "call to actions," but keep their font, size, and shape consistent. You want to train visitors from the beginning to "click here" and you don't want them to have to relearn that on every page load. You also don't want your front-end developer to have to create a million custom buttons. They need to be able to do it once, probably some time towards the beginning of their CSS creation, know what the button does on hover, where it links to through your user story and how far from other elements on the page it should be.
9. Form Fields Even if you are not including forms right now, you need to include this in your design somewhere. It will be needed at some point and you don't want it to just be stuck in there. You know what that will look like? Bad. Make sure you have created some form field, its label and how far it is from the next line's field. Also, consider what error responses are going to look like. If you are using a CMS like WordPress or Drupal, there will be a default built in, but make sure that the basics are ok with you.
10. Lists Unordered, ordered and defined lists need to be considered since ultimately, the chances of you handing over a site that does not use bullet points anywhere seems highly unlikely. So consider this, what shape are your bullets? What is their line-height? Are they indented? If so, how far and on one side or both?
11. Pull Quotes So these are not always used, but still important to consider. Especially, since when they are not designed, they end up looking "not so great." Make sure you have set the rules for the quote itself, the byline/person's name, the sizes and style of these different elements and how much line-height is between them.
Design Matters...
Your website design is critical to raising more money online. But, some of the solutions are simpler than you might think...
That's why Rootid put together this comprehensive guide to demystify the technologies and strategies that will help you raise more money online. Check it out.
