In a previous article, I noted that the best place to start when creating a nonprofit website is with a clear brand strategy. It’s what provides everyone with the shared understanding they need to unite the big ideas and strategic plan of a social impact organization’s into n engaging and effective online experience. It’s the glue that ensures that a nonprofit’s website design, content, and code work together in harmony to express the entirety of the organization’s mission, vision, values, and impact—and do so in ways that are meaningful and engaging for different audiences. No small task, especially when talking about a website design process that spans months and involves so many stakeholders.
A Complex, Multidisciplinary Process
The process of creating a nonprofit website is, by its nature, collaborative and multidisciplinary. There are lots of contributors, each who bring a different area of interest, expertise, and professional vocabulary. The process usually takes a long time, with countless decisions to be made along the way—which means there’s no shortage of opportunities for miscommunication and stumbles. Over the years, I’ve learned that these can be minimized (they’re almost never eliminated, trust me!) by a framework that emphasizes collaboration and establishes clear goals for the team in a language everyone can understand.
That is why brand strategy is such an effective unifying force. In a medium like digital that calls for collaboration by so many people, it’s the kind of holistic, big picture, strategic thinking that people in nonprofits and digital design agencies can apply to the areas they contribute to in a website redesign. Sounds great in theory, but what’s it look like in practice?
Every nonprofit website is made up of four essential elements: brand, content, design, and technology, and design. The most effective ones are those that get all four working together like members of a band — each playing their part, and each complementing the work of the others. When executed well, the results are much like the experience of hearing a great song: harmonious and uplifting, with a clear point of view that immediately connects with you on multiple levels.
Over many years of years working with social change organizations, my firm has developed an approach to website design called the 4 Strategic Foundations of Effective Websites™ that has helped many clients achieve these results. Our approach uses Brand (the most important of the “foundations”) to contextualize the other three (Content, Technology, Design) for members of the team and establishes a shared vision that helps keep clients, content creators, designers, programmers, and other contributors all pulling in the same direction. It clarifies decision making at every level by ensuring that the questions everyone needs to answer are grounded in one important goal: strengthening a nonprofit’s brand to advance its mission.
Putting It to Work
Again, sounds exciting, but how does it actually work? At its core, the process is about increasing communication, collaboration, and shared learning between a nonprofit and their design firm, and between members of the client’s team and an agency’s branding, content, design, and technology experts. It makes sure that everyone working on a nonprofit website project starts with a clear understanding of an organization’s strategic plan and story, and bridges organizational silos to increase awareness of how decisions in one area (such as content or technology) affect the work of others and the end result.
Of course, to really understand and appreciate a process you need to experience it. While we can’t do that in a short article, I’ll do my best to explain the top-level thinking behind the approach that Constructive has cultivated and refined over the last 19 years.
The 4 Strategic Foundations of Effective Websites
Brand Strategy. As the thing that informs every experience you create for your audiences, it’s easy to see why brand strategy is so important to mission-driven organizations like nonprofits. And when it comes to a nonprofit’s website, brand strategy is both its anchor and North Star, contextualizing all the choices to be made and focusing everyone on what really matters by:
- clarifying an organization’s core mission and how it is fulfilled;
- defining an organization’s key audiences and elevating what is meaningful to them; and
- providing a visual, verbal, and experiential framework for designing experiences.
How does brand strategy accomplish these lofty goals? As with every strategy, brand strategy helps the team establish clear goals and effectively allocate resources to accomplish them by providing answers to questions such as:
- What is our mission and what do we believe in?
- How does change happen in the areas in which we work?
- What role (or roles) do we, or should we, play?
- Who’s in our brand community?
- What differentiates us from other organizations?
- What does the journey to success look like?
Content Strategy. Content strategy helps establish messaging architecture and ensures that the content you produce is meaningful, engaging, and cohesive. Regardless of the communication vehicle, it means having a clear understanding of your brand strategy. For a website, it means:
- identifying content goals and gaps;
- making sure the content is useful and accessible to everyone;
- creating a consistent tone and structure; and
- delivering the right content, to the right audience, in the right format.
To ensure that the written content, images, audio, and video on the site contribute to an effective presentation, your content team should understand the organization’s brand strategy and be able to answer the following:
- What content do we have?
- Who consumes our content, how, and why?
- What, if anything, about it needs to change?
- What content do we need to create?
- How will content be created and maintained going forward?
Technology Strategy. You can’t have a website without technology—both to create user experiences on the “frontend,” and to keep things organized and running smoothly behind the scenes. Technology strategy is how a web development team translates the many different ideas and goals driving a nonprofit’s brand into online experiences that advance its mission. It also:
- informs the platforms, frameworks, and tools your organization will use;
- identifies needed system integrations;
- supports the organization’s back-office and operational needs; and
- provides cross-checks that inform content creation and design execution.
Unfortunately, Too often, web developers are kept in the dark about things they need to know(like brand strategy) and aren’t asked to offer their opinions until most decisions have been made.—and that’s a huge mistake! The advantage of design-driven web development is that it helps deliver the greatest ROI from technology by making sure developers “understand the story” and can help teams answer the following questions in ways that meet the needs of the brand, content, and visual design:
- What systems and platforms are needed?
- What’s the anticipated development effort and timeline?
- What are the implementation challenges and risks?
- How much content will be migrated and how will it be done?
- How does the plan accommodate operational needs?
- What can we do to future-proof the strategy?
Design Strategy. If the broad definition of design is “deciding what to create, what to do, and why to do it, both now and for the future,” and if design itself is understood though the lens of design thinking and problem solving, then design strategy is truly the ultimate strategy—and extends far beyond the visual to include:
- deepening our understanding of context, relationships, and pathways;
- synthesizing and uniting brand, content, and technology strategies; and
- balancing all of the above to create meaningful brand experiences.
Design is the emissary of our ideas. For a website, it unites the ideas driving your brand, your content, and your technology to create valuable experiences for different audiences by answering questions such as:
- Who are we designing for and what is their mindset?
- How can we both meet their needs and advance our mission?
- What results are we looking for, both online and in the real world?
- What are the elements of our visual language?
So, if your goal is to have significant social impact and you want a website that makes major contributions, be sure you’re working with a clear brand strategy. It adds invaluable perspective that contextualizes how content, design, and technology will work together to achieve your ambitious goals. The alternative, in most cases, is a lot of time, effort, and money poured into a website that either misses or ignores that context and, as a result, never really connects with the people on whose support you rely on.
Why do some Americans believe that global warming is happening and others do not? What factors influence a person’s belief in climate change? While most attention in the Climate “debate” is focused on environmental impacts, the communication scientists at the Yale Program on Climate Change Communication (YPCCC) have been hard at work for years uncovering answers to these and other important questions.
Part of the Yale School of Forestry & Environmental Studies, the YPCCC conducts scientific research on public climate change knowledge, attitudes, policy preferences, and behavior, and the underlying psychological, cultural, and political factors that influence them.
With the extremely divisive political climate of our country, now is a time of great threat but also great opportunity for action. So why is Yale’s work important? Well, by advancing the science of climate change communication, YPCCC helps governments, advocates, and the media communicate more effectively about complex science—and thereby increases the public’s understanding of real-world climate risks to make more informed decisions, both in local communities and in policy.
At Constructive, we are deeply committed to supporting organizations that address climate change’s many issues and were thrilled when Yale turned to us to rebrand its prestigious Program on Climate Change Communication and partner on digital strategy and website design and development.
With the site’s recent launch (you can read Director Anthony Leiserowitz’s announcement on the site’s launch here), audiences can nowaccess the YPCCC’s sophisticated science in more digestible pieces. One of Yale’s primary goals in redesigning its website was to highlight the Program’s in-depth reports by giving users key takeaways and data points up front, while offering deeper dives into the research for those audience members who are interested in delving into the science. We also created a hub for Visualizations and Data so that users can quickly access maps, charts, and presentations that previously remained buried in long reports.
With its huge repository of research reports, one of Yale’s biggest challenges with the site redesign was to move away from keeping all of its scientific findings locked in PDFs that visitors may never download or take the time to read. Our goal was to develop a digital-first publishing system that would allow Yale to present its content in an interesting, dynamic manner that also offered a workflow that Yale’s team could easily implement. By creating an html report format, we helped Yale reach their following goals:
- Scannability: Some of Yale’s users will download a full report and read it cover to cover, but many of their users just want top level takeaways. With the html report style we designed for Yale, users are offered the report summary, key findings, statistics, and a table of contents with each chapter accessible with one click. They may then decide to read the full article online or download the PDF.
- Searchability: With their content locked up in PDFs, Yale’s old site wasn’t allowing for users to search keywords in order to find the data they were looking for. Yale’s new html reports allow for full searchability throughout the data so users can find exactly what they’re looking for. And, to add searchability to the backlog of PDF reports Yale has, we installed SearchWP – a WordPress plugin that scans PDF content in a website search.
- Analytics: Previous to Yale’s new digital first publishing platform, the only analytics they had on their users was how many downloads each PDF report was receiving. With their new HTML reports, they now have access to a multitude of various analytical data on their users with what they are reading and what sorts of content they are interested in.
- Workflow: It was important for Yale that the CMS we developed wouldn’t be cumbersome for their content development process. Our developers made sure to make the templates easy for admins to enter and format content so that their process wouldn’t overload Yale’s small but mighty team.
(If you’d like to learn more about best practices for online reports, check out our insights on HTML-first publishing and PDF-first publishing.)
Yale’s Program on Climate Change Communication is developing high-level materials for the scientific, political and lay audience. They are helping Americans understand what factors place folks on either side of this bipartisan issue, and making policy makers and advocates better equipped to communicate about climate change more effectively. At Constructive, it’s our mission to help our clients like Yale achieve greater impact, and we are excited to have helped the YPCCC advance their mission to help the world communicate climate science issues more effectively, and build the public and political will for effective climate action.
Interested to learn more? Get a closer look at our work with Yale with our project case study, or get in touch!
It’s been a few years since our last deep dive into the best data visualization tools for nonprofits to communicate their impact. A lot has changed. The responsive design revolution that’s swept the internet has become standard fare. It used to be hard to find a charting tool that scaled its charts to fit the screen size. Today, it’s rare to find one that doesn’t. Features that could make a tool stand out like animation and advanced styling are par for the course today.
But with all that’s changed, some things have stayed the same. A few years ago, we wrote, “Wow, D3.js is cool!” And that’s still true today. If anything, it’s gotten even cooler as users have contributed more and more example visualizations. Unfortunately, D3’s learning curve hasn’t changed either. We also said, “You’ve got to be an accomplished Javascript, JSON, and math person to get D3 to jump through hoops,” and that’s still the case today.
While D3 itself hasn’t gotten any easier, a new crop of libraries have appeared that are built on D3 but provide an easy entry for people who want to leverage its power without getting caught on its learning curve. In this article, I will explore three of these libraries: dimple, Plotly, and D3Plus.
dimple
The dimple website doesn’t explain the origin of its name, but after spending some some time with the library, I suspect that it’s a portmanteau of “D3” and “simple.” Using dimple, you can pull data from a json feed and turn it into a chart in just 11 lines of code.
dimple provides some nice features by default: tooltips that appear when you mouse over the chart and intelligent rendering of bar labels—if there isn’t enough room to display them horizontally, it will automatically display them vertically. But there’s also a fair amount of DIY involved. You have to tell it to leave enough room for the labels by specifying margins, and if you want colors besides Boring Blue, you have to specify them yourself.
But what dimple lacks in polish, it makes up for with its ability to produce charts that can communicate complex data relationships with a minimum of effort.
- Visualization Types Supported: Pie Charts, Bar Charts, Line Charts, Area Charts, Scatter Charts, Bubble Charts, Ring Charts, Step Charts, in any combination
- Data Input Sources: JSON, CSV, TSV (tab separated values).
- Data Output: HTML, SVG
Pros
Ease of Use
dimple makes it easy to create charts from json data retrieved from APIs, CSV files and TSV (tab separated variable) data. It automatically creates configurable tooltips, and it’s easy to add common features like legends. Styling can be added the D3 way, by adding colors, borders, etc to elements, but you can also add classes to elements and style them with CSS.
Extensibility
dimple exposes its elements as D3 objects, so anyone who wants to dive into D3 can modify them as they like.
Animation
dimple boasts ‘storyboards,’ which make it easy to animate a chart over some series, usually time. And while additional coding is needed to add user-friendly controls, the animation itself can be implemented in just a few lines of code.
Cons
Default Styling
dimple lacks some of the out-of-the-box polish of other data viz libraries. Legends, behaviors, and stylish tooltips are all easily available, but you’ll have to add them yourself. You can see an animation example and play around with a simple dimple chart.
Plotly
If dimple is too bare-bones for your taste, Plotly may be a good alternative, combining D3 with stack.gl for an extra shot of 3-d goodness. Plotly is an online charting platform with paid and free tiers, and it boasts all the slickness and bells and whistles you’d expect from a commercial product. Plotly’s online platform makes it easy for anyone to turn spreadsheet data into a slick graph, and in November of 2015, they open-sourced their javascript core. If you want to add some nice charts directly to your website and don’t mind getting your hands dirty with some coding, the free and open-source plotly.js might be right for you.
- Visualization Types Supported: Pie Charts, Bar Charts, Line Charts, Area Charts, Scatter Charts, Bubble Charts, Error Bars, Box Plots, Wind Rose Charts, Heatmaps, Bubble Maps, Choropleth Maps, 3D Scatter Plots, Ribbon Plots, the list goes on and on.
- Data Input Sources: As with other javascript libraries, any data can be added to the graph structure, but data bundles aren’t imported automatically.
- Data Output: HTML, SVG, WebGL (for 3d)
Pros
Interactive Goodness
Every chart you build with Plotly includes a raft of interactive features. Users can zoom and pan the chart, choose which data to display through its clickable legends, and even save the chart as a png image.
A Multitude of Visualization Types
I would have listed everything Plotly offered in the “Visualization Types Supported” section, but my fingers were getting tired. Suffice it to say, if you can think of a chart or map type, chances are, Plotly’s got it.
Maps
Plotly’s got maps! And with the geodata included in plotly.js, you don’t even have to create map yourself. Just choose your continent (or the whole world), the projection you want to display, and then attach your data. You can use lat-long to pick a specific point or ISO A-3 codes to target entire countries. As with charts, users can zoom and pan maps and download them as png.
Cons
Resource Heavy
All that interactive goodness doesn’t come for free. In my experience, Plotly charts make more of a demand on system resources than other libraries. In most cases, it’s worth it for the improved user experience, but if you plan to put a lot of charts and maps on a single page, or you’re targeting a user base with less than powerful hardware, you may want to consider something else.
You can play around with a simple Plotly chart here.
D3Plus
Like D3, D3plus doesn’t restrict itself to charts and maps. It has many additional features and utilities like SVG text wrapping that makes it easy to format text to fit into a rectangle or circles, svg forms, and legible colors that adjust text colors so that they’ll still be readable against the selected background.
But don’t let the similarity to D3 fool you. It’s easy to get up and charting. D3plus offers simple settings to let you create attractive visualizations with a minimum of effort. Like dimple, makes it easy to create charts from a variety of sources. Setting values is as easy as assigning field names to an axis or color.
- Visualization Types Supported: Pie Charts, Bar Charts, Line Charts, Bubble Charts, Network Charts, Ring Charts, Scatter Charts, Sankey Diagrams, Tree Maps, Boxes, Paths, and Tables
- Data Input Sources: JSON, CSV, TSV (tab separated values).
- Data Output: HTML, SVG
Pros
Intelligent Rendering
All of the charts we’ve looked at try to keep themselves legible at different sizes, but D3plus goes that extra mile. It fits itself automatically to the height as well as the width it’s given and makes sure the axis tick labels never overrun each other. It makes good use of that color utility I mentioned above, by adjusting the brightness of its tooltip and legend text so that it always remains readable.
Colors, Colors, Colors
The default color pallette is rainbow bright, but if that doesn’t fit your style, it’s easy to override it with your own palette. But D3plus is more than just a pretty face. You can set the colors to vary based any field in your data set.
For example, you could create a bar chart from the following data, displaying the 2014 population for each city.
| City |
State |
1980 Population |
2014 Population |
| Abilene |
TX |
98315 |
120958 |
| Allentown |
PA |
103758 |
119104 |
| Amarillo |
TX |
149230 |
197254 |
| Anaheim |
CA |
219494 |
346997 |
| Burbank |
CA |
84625 |
105368 |
By default each bar (city) would have its own color. But you could set color to “State”, and all cities in the same state would have the same color. Or you could set the color to “1980 Population”, and the legend would become a choropleth with each bar shaded according to its 1980 Population.
Loads of Goodies
D3plus doesn’t have as many types of charts as other libraries, but it includes some that it might be hard to find elsewhere, such as network and ring charts and Sankey diagrams to visualize connections. It also offers a CSV function that makes it easy to add a “Download as CSV” button, and a ‘timeline’ for animating your chart over time.
Cons
Making Numbers Numbers
JSON wraps content, including numbers, in quotes. Most data-viz libraries have no problems with this, but D3plus requires you to “coerce” these number strings into real numbers before you feed them into the chart. This only takes a few lines of code, but it’s kind of annoying. You can play around with a simple D3plus chart here.
When a nonprofit redesigns its website, it can be tempting to not conduct user testing. After all, you know who your audiences are. You know (or think you know) their needs and wants. You’ve hired an agency that knows how to design a great website. And, since budget is not limitless at your nonprofit, you have to choose where to allocate funds. This all may be sound thinking—in isolation. However, redesigning your nonprofit’s website without user research is a mistake that lessens the likelihood of a website that truly supports your mission. That’s because without increases the likelihood of designing with faulty assumptions that confuse or frustrate your nonprofit’s audiences rather than help them. So, what are the benefits of user research in a nonprofit website design process, and how does it help ensure that what you create is what your audience really wants?
No matter how much you know about your audience, design research can validate your assumptions about your users before beginning the design process and help avoid potential missteps. In addition, you’re likely to learn some valuable new things that you wouldn’t have otherwise, providing new opportunities to strengthen the relationship between your audience and your nonprofit’s brand. Here are just five important things that you can’t gain without grounding your design process in user research.
Unexpected Differences Between User Groups
The differences between groups of users are often more complex than they appear at face value, and even if you have a solid idea of who your audience is, you may want to revisit your assumptions. Users within the same group can often be subdivided based on differing needs and goals. For example, an education nonprofit we are working with originally defined two large main audiences — teachers and school leaders. During the course of interviewing teachers, we discovered that this audience actually consisted of three different groups, with very different content needs in terms of what our client could deliver to them. This insight ended up having a significant impact on how we ultimately decided to organize and display content on the client’s website. Having research to fall back on helped to guide our decision and eased the client’s concerns about a direction that they may not have considered otherwise.
How Users Actually Perform Tasks
One of the primary maxims of user research is that people are really bad at recalling what their typical behavior is when asked. Instead of relying on how you believe users will complete a task or achieve a goal, or how they’ve told you they do, having users perform tasks often reveals areas for improvement and insight into their actual behavior.
On a recent project for a philanthropy website redesign, we not only asked users what information our client provided was the most valuable to them, but we also had them show us how they typically find that information on the website or otherwise. One participant provided a particularly poignant insight when she walked us through a subscription-based feed where she normally accesses content published by the client, giving us important information about an avenue for discovery we otherwise might have overlooked while we were working on the client’s content strategy.
Possible Barriers to Adoption
Your nonprofit’s website is an expression of your organization’s brand, and your audience will have input into how this is reflected. Often, your audience will notice and make decisions about who your organization is, what it does, and why it matters based on factors that you may not have considered. Indeed these factors are often intangible and based on users’ prior experiences. User research can help you learn how your audience perceives your organization through its website, through individual choices in structure, content, visuals, and holistically.
On the aforementioned education project, we needed to understand how teachers and school leaders gauge the credibility and trustworthiness of various curricular resources and how they ultimately decide what to use in their classrooms. Because education technology is a very crowded space, a strongly differentiated brand is critical to achieving impact and ensuring that audiences perceived our client’s content as trustworthy and high-caliber was essential to the strategy for their website. Ultimately, our user research helped us figure out how to best align this website with our user base and ensure that we’re projecting an overall message for the brand that resonates while avoiding potential pitfalls.
A Better Understanding of Users’ Mental Models
Learning what kinds of patterns your audience is familiar with when completing tasks similar to what you want them to accomplish on your website can help ensure that the new design will be easy for users to adapt to and meet their expectations for consuming content and completing tasks. Performing usability testing on your website in the course of research will help confirm what areas of the website meet these expectations and which don’t.
Additionally, asking users to complete tasks on your competitors’ or peers’ websites, either within the context of a usability study or as part of a wider competitive analysis, can teach you about what models they are comfortable with and what their expectations might be for a similar website. This isn’t to say that you should totally copy a competitor or peer’s web design, but the insights provided from this research can help inform the direction you want to go in further along in the design process.
What Features to Prioritize
In an ideal world, you would have unlimited time and budget for a redesign, and every feature and function you’ve ever wanted would be fully incorporated into the new website. In reality, we often have to compromise and prioritize during a redesign, aiming to capture the most important features while figuring out what can wait to be incorporated after launch. Of course, brand and business goals need to be taken into account, but user research can help determine what should be addressed as a priority and what can wait based on what functionality and content is most important to your users and where they are most likely to get tripped up while using your website.
If your team is at an impasse regarding what should be included in the scope of a redesign and what should wait, doing some quick testing, surveys, or interviews can help. When our client, The Legal Aid Society, wanted to know where to start on a potential redesign, we used a combination of user research interviews and usability testing to prioritize the areas of their website to focus on in the near future.
In Conclusion
So, why should you do user research? At the very least, you’ll validate the assumptions you’ve made about your audience and avoid costly missteps should you be wrong. More likely than not, you’ll uncover valuable hidden insights into your audience that could otherwise be overlooked—and, with them, find opportunities to deliver a more meaningful brand experience. Want to learn more about how adding user research can make your nonprofit’s website even more effective in advancing your mission? Get in touch!
What is Web Hosting?
When you set out hunting for the best hosting plan, you’re quickly bombarded with some of the most confusing marketing in the tech industry. You’ll find boastful lines promising you 99.99% uptime (which comes to roughly an hour of downtime a year) and advanced features like a “game changing” control panel. What you should know is that these details are usually pretty standard across the board.
One thing holds true no matter how you break down Web hosting: there is a computer in a datacenter that is serving the files and data of your website to visitors and their Web browsers over the Web. What separates the different types of hosting is how they’re configured and function in relation to you and the internet.
Relationships between you and your hosting service provider can also vary. Some choose to manage their own accounts and hire professional help when needed while others go through an agency to help maintain their hosting from the top down.
Establish Your Requirements
Before you start your hunt or consult your trusted Web professionals, you should figure out a few things that will help in finding a good fit.
How much traffic should my site be able to serve? Scalability is used to refer to how well a hosting service can flex its muscle when large swaths of visitors come requesting pages. If you’re set up with a small hosting plan, you might be stuck with scaling problems until you pony up cash to have somebody move your site to a beefier hosting account and go through much reconfiguration.
Do I need encryption? If you are interacting with and collecting visitor information such as names and emails, this should probably be a “yes”! It’s not a requirement, but along with the added security benefits is extra trust from your visitors and Google seems to favor sites that use secure connections.
What kind of CMS (Content Management System) are you planning to use? This might not seem like it should matter, but it’s terribly important. There are hosting companies that even cater to specific CMS. Here at Constructive, we have been fond of Pantheon’s ability to help us develop Drupal and WordPress sites so much that we’re now partners.
Where will my email be hosted? The best solution is to trust your email to a separate service like Google Apps or Microsoft’s Office 365 for Email. While some hosting plans will offer email solutions, it makes switching hosting services a tough task down the road.
Will I need help maintaining my hosting services? Hosting companies can and do make it easier to manage your hosting account, but the complexity of Web hosting can be too much for many. Securing maintenance agreements with Web professionals is a good idea for keeping tabs on your website and making good decisions when problems arise.
Shared Web Hosting for the Masses
The most common form of Web hosting is Shared Hosting. You can sometimes get this service for nearly free. As the name implies, your site sits on a “shared” server computer with other hosting customers and might cost you as little as $5 USD a month (or in some cases less). Your neighbors might number in tens or even hundreds.
The quality of this hosting is largely up to how responsible the hosting company is and how much you’re paying. If the hosting company is sponsoring a Nascar driver, they’re overselling resources on their servers in many cases and their technical support is sometimes unhelpful.
Some smaller hosting companies pride themselves on a high quality network setup and keep the number of customers on a server at a responsible level. They’re tough to find, but they’re out there.
One benefit of Shared Hosting is low maintenance requirements. The hosting company handles most of the server maintenance and only requires you to keep your website up to date.
For websites with lower amounts of traffic, Shared Hosting can be a good choice and save money in the long run. However, it is suggested you consult with Web professionals before choosing one of these hosts. They can run the gamut in quality and scalability.
The Ever Popular VPS Hosting
A step up in cost and maintenance requirements is VPS or Virtual Private Server hosting. Medium to large websites choose this option to allow for more customizable server configurations at a lower price than a physical server. Much like Shared hosting, your site is on a server with other sites, but operating as its own independent virtual computer.
Like more expensive Dedicated hosting that we’ll cover below, it can cost time and money to take care of maintenance that you’re expected to handle. The virtual server your site sits on is your responsibility and as such, it requires similar care to an actual, physical server.
A benefit to this type of hosting is the added scalability and convenient resource upgrades. If your server needs more horsepower, a living person won’t have to open up a computer and replace or upgrade parts, but can instead check a few boxes and be off to the races in minutes. Scalability can also be supplemented with other virtual servers and services to make your website more efficient.
Despite all the positives, the maintenance commitment can be significant as time goes on. So it’s important to know if you really need this type of setup or not, or if you need to also consider a management provider.
Some companies that provide this type of “compute” hosting are: Amazon with EC2, Google with Google Cloud, and Microsoft with Azure. Considering VPS hosting has backers like that, it’s easy to see why many medium to large sized customers rely on VPS hosting to serve their websites. We even use VPS hosting for our own website.
Confusingly, this type of service can be branded as Cloud Hosting. While you could argue that there are some Cloud shenanigans at play in VPS hosting, there is another animal that can go by that same name described below.
Making this category even harder to pin down, there is more than one class of VPS service out there. You might be shopping for VPS hosting and among the candidates will be a VPS provider that relies on their own infrastructure to create a virtual server instance for you and a more Cloud-like scenario that not only provides you with VPS service, but offers other products that enhance what you can do with your VPS. Amazon is particularly keen on having everything you might need with their expansive list of Cloud products.
Enter Cloud/Container Hosting
This type of service is relatively new to the hosting scene and is available from only a handful of companies. Some definitely do it better than others! Pantheon is known for using this type of technology. It provides a standardized hosting environment like a Shared service, but the scalability of a VPS service, at a more reasonable cost.
As the name implies, your website resides in a container that has all it needs to work with the host’s server architecture. That container is a constant, maintained by the hosting company – leaving you only keep up your website.
By design, the hosting environment is always up to date (will the real Cloud hosting please stand up) and can scale as high as most websites will ever need. This makes it a great choice for nearly any type of website. Being able to upgrade your plan to access more scalability means you’ll never have to reconfigure your site for an unexpected rush of new visitors. Just a few clicks and you’re handling that huge traffic surge.
If compared to the VPS style of Cloud hosting, you’ll find that a Container based host takes care of the heavy lifting themselves. With VPS, you’re doing work that a container already has done.
The combination of less maintenance, valuable features for your Web professionals and development team, and logical pricing make Cloud/Container hosting an easy choice and many Web developers dig it.
Dedicated Hosting
The breed of hosting that started it all that still exists today is dedicated hosting. It shares a lot in common with VPS in terms of maintenance and technical requirements. What’s different is dedicated servers are physical computers and associated infrastructure that you pay to use and maintain. The raw performance of such a server is unbeatable and can extend past just one server to multiple computers that help make your site as scalable to sudden traffic as you need it, just as VPS can.
Worth mentioning is that these days, dedicated hosting is usually reserved for those that want to do more than host a medium sized website. The cost of using such a service is particularly high as well!
One of the considerations of using dedicated hosting is the necessity to over-provision. Because you need enough resources to handle expected (or unexpected) spikes, you end up buying something too large or in too high a number than you need on a daily basis, and this leaves you with underutilized resources—costing you money you wouldn’t have had to spend with elastically scaling Cloud hosting.
What does all this mean to me and my website?
After covering all this, the one topic that keeps popping up is “maintenance”! Between the cost of ownership and upkeep of your Web presence, it’s easy to see why you should consider what your choice now means a couple of years in the future. Investment in your Web presence goes well beyond your monthly hosting subscription. If you’re lucky, your technical advisors and Web professionals will let you know what’s right for you. It cannot be stressed enough that there’s no one hosting solution that can fit all needs.
Getting rid of all the question marks is key when choosing the right hosting platform. If you’ve got some you’d like answered, just get in touch! We’d love to hear from you.
During a website redesign, there are many moving parts in each phase of the project. At Constructive, we take our clients through an investigative discovery process while our UX researchers conduct user testing and comparative analysis. We’ll iterate on rounds and rounds of UX wireframes and design comps. Once the information architecture and design are approved, it’s off to the races with implementing the CMS—then suddenly it’s time for content entry. At this moment, if this is the first mention of content needs, clients often start having panic attacks.
Without careful planning for content, you could easily find yourself two weeks from launch realizing that some of your content needs to be reorganized to fit the new site, some pieces of content need to be revised, and some copy needs to be newly drafted. Your content needs to be created, migrated, and entered, and by putting it off, many clients risk pushing their timelines out and blowing up their budget.
At Constructive, we get our clients thinking about content from the beginning. It’s the only way to avoid pre-launch anxiety attacks. We’ll get started with a content analysis during the initial discovery phase. During UX, we help set up a process for gathering content, taking into account factors such as multiple content editors with a tedious review process from a board, legal review, or other situations. Setting up a project plan to get all content written, reviewed, and approved in time for when content entry is set to begin is the critical piece for a successful project that runs on time and on budget.
Useful Tools
If your site is content heavy, or if you plan to write a large amount of new content for the redesigned site, one tool that may be helpful is GatherContent. GatherContent allows you to manage content production for the whole team, with customizable approval workflows that let you to assign tasks and reviews to teammates. GatherContent lets you create structured templates so your authors can easily understand what sections they need to populate. You can even export your content directly to your CMS via their API.
Some of our clients don’t need something quite as robust as GatherContent. We exclusively work with nonprofits and higher education institutions, so the client may not have the budget for such a service. As an alternative, we’ll often develop a content matrix to help serve our clients’ needs. In an Excel document or Google Sheet, fields are created for every possible place on the new website that will need to be filled with content. Titles, subheads, teaser texts, body paragraphs—nothing is forgotten. Each section is clearly marked so that the team is all on the same page with who is responsible for which section.
Our content matrix can also be used as an effective workflow tool, keeping a status of what will be migrated from the old site, what needs to be developed, who will write each piece of new copy, and what the deadline is for each stage of the content development process. You’ll be able to keep track of what piece of content needs review, when it has been approved, and when it’s ready for entry. Once the CMS is built and it’s time for content migration and entry, the matrix can also be used as a way to check off what has been entered into the new site.
As a bonus, we include a second tab in the matrix for image selection. Like content, images are critical to the success of a website. (If you’re looking for help on how to select meaningful website images, check out our insight here.) Using the image inventory tab in our content matrix, our clients can keep track of which images will be moved to the new site, what images are needed, various options for images, and any pricing or terms for selected images. Similarly to the content side of this matrix, we can help our clients index all images that will be used for homepage carousels, header images, headshots of staff members, and more.
If your site is content-heavy, or if you plan to write a large amount of new content for the redesigned site, the task of content migration and entry can be extremely daunting for you and your team members. Don’t let content be the forgotten component of the website redesign process! By having a schedule and process for content development in place, it can be manageable and doable even in the tightest of timelines. Download our sample content matrix to get an idea of how this all works. Feel free to download this matrix and format it for your site and see how it helps your team stay organized!
If you have questions about how to manage the content process for a content-heavy website, get in touch!
In my last article, I discussed behavioral science and its application to marketing strategies. Here at the studio, we’ve increasingly been applying teachings in behavioral science to inform our decision-making on everything from visual design to messaging and technology. Below, I’ve pulled together 6 practical ways you can quickly apply behavioral science thinking to strengthen your brand and audience engagement:
Never Stop Getting to Know Your Audience
While there are many ways to use behavioral sciences to understand your audience, online is perhaps the easiest. Use Google Analytics online, track email campaigns with services like Campaign Monitor or Mailchimp, distribute online surveys with tools like Survey Monkey, and cull user data wherever and whenever you can. It will help fine tune your brand to your audience’s expectations and needs, and who knows, it may even surprise you.
I Assume You Haven’t Forgotten What They Say About Assumptions…
And if you have, then I suppose we’ve proved the rule. Either way, don’t let your perception of your audience—or even your audience’s perception of themselves—overshadow how they really act. Regardless of whether you’re a multi-national consumer conglomerate or a regional non-profit, your audience is your most valuable asset, and you’ve got to understand more than just what makes them tick (or click) if you want them to truly engage with your brand.
Find a Balance That’s True to your Brand
Successful brands don’t happen by accident. They’re carefully curated experiences that are both enchanting and efficient. They balance multiple dimensions holistically, designing to delight their audience with an approach that’s optimized to elicit action. This means being mindful of quantitative and qualitative considerations. The best brands find a way to balance these competing approaches in a way that’s true to their audience, and true to who they are as an organization.
Choice is Crucial
The best brands deliver choice architectures that cater to their audiences. Anyone who’s ever been to the Cheesecake Factory understands the paralysis of choice—though I suppose that paralysis people feel could just as easily be adult onset diabetes. But while too much choice can overwhelm, too little choice can alienate entire audience segments. Effective choice environments are built around your audience, and frame options in a way that is friendly, satisfying, and elicits favorable outcomes.
You Want the Bad News, Then the Good News
Most crisis communications experts will tell you, if your brand has to break mixed news to your audience, start with the bad. Be direct and to the point, and consolidate to whatever extent possible. Then move onto the good news, spreading it around and finishing up on a high note. Research shows that people experience bias in the perception of pain and pleasure; consolidation seems to de-emphasize pain, while dispersion seems to emphasize pleasure. And of course, finishing with great news helps lets the most recent message stay freshest in one’s mind.
Incrementalism is Not a Bad Thing
As anyone who’s ever started a diet knows, behavior is tough to change. The same thing holds true to web-based businesses looking to convert the curious into loyal, paying customers, and for nonprofits seeking to gain an even greater commitment out of supporters to the cause. Rather than ask your customers or your brand to shift behavior overnight, apply a step-by-step approach. Pique their interest, let them get comfortable and then move them along in their engagement with your brand. These subtle shifts and “nudges” can really add up over the long term.
Until recently there has never been a purposeful CSS layout tool. Early web designers were forced to create their own methods for achieving designs. Although very clever, these methods were basically hacks. In this article I’ll talk about some of those hacks, and a new tool called Flexbox; a method specifically designed with layout in mind. Please note: the example in this article is intended for people with a basic understanding of Flexbox and Sass. For a complete guide to Flexbox check out this article on css-tricks.com.
Hack 1: Tables
Before CSS was fully supported in web browsers, designers used table markup to create page layouts. The intended purpose of tables is to display data, but it became a means of achieving web designs. Using tables for page layout solved a problem for designers, but was far from an ideal solution. The markup was heavy and complicated and there was no separation of concerns (structure vs style). As the web grew up and CSS became more widely supported designers began using the CSS float property for laying out pages.
Hack 2: Floats
Although it’s original intent was to allow text to flow around images, the CSS float property became prominent for creating full page layouts. In earlier times of web development we had to contend with browser bugs and clearing <div>’s. We’ve come a long way since then. The browser wars have stabilized, and with the advent of front end frameworks like Neat and Foundation, creating bulletproof, responsive layouts is less of a challenge.
Flexbox
Now we have Flexible Box Layout or Flexbox for short. A method developed with the intention of being used for layout, it allows us to create flexible layouts for both desktop and mobile in an intuitive way. With the help of a few Sass mixins we can create a pretty robust and useful grid system with Flexbox. The first thing to do is setup column width variables. In my case I’m using a 12 column grid:
$one: 8.33%;
$two: 16.667%;
$three: 25%;
$four: 33.333%;
$five: 41.667%;
$six: 50%;
$seven: 58.333%;
$eight: 66.667%;
$nine: 75%;
$ten: 83.333%;
$eleven: 91.667%;
$twelve: 100%;
Then, I create a mixin for containers:
@mixin grid($width: $container) {
$container: $width;
display: flex;
flex-direction: row;
flex-flow: wrap;
flex: 0 1 auto;
max-width: $container;
margin: 0 auto;
}
Lastly, add a mixin for columns:
@mixin column($span: $columns) {
$columns: $span;
box-sizing: border-box;
flex: $columns $columns auto;
flex-basis: $columns;
max-width: $columns;
padding-right: $gutter;
padding-left: $gutter;
padding-bottom: $gutter*2;
}
Conclusion
Part of Flexbox’s power is it’s simplicity. As you can see in the above example, we can build a responsive grid system in less than fifty lines of code. If your users are still largely on IE9 or below, you may want to stick with float based systems, otherwise, support for Flexbox is strong, and getting stronger. The days of layout hacks are behind us and the the future of CSS layout is bright.
A strong brand and strategic nonprofit communications are essential to the health of any social impact organization. And the people in charge of nonprofit brand management and communications are usually loaded with responsibilities—especially because so many nonprofit organizations have smaller communications teams (shout-out to all those Comms Teams of 1, you know who you are!). They plan brand experiences and nurture audience connections. They decide what brand elements should be elevated and developed. They help craft a consistent visual look and feel for the organization. For a Brand Manager to be successful, they need to ensure all these responsibilities are defined clearly and that they use simple, effective brand management tools.
With a properly defined role and the right tools, they can offer deep contributions, especially to nonprofits and educational organizations that lack a large communications staff.
Essential Elements of Brand Management
Let’s first look at what actually needs to be managed. This will depend on how your team has structured their communications, but every organization will have some combination of the following essential elements to work with, or perhaps even create. Because brands are made up of so many varied parts, we can divide the elements up into three areas.
Visuals: Logos, design systems, grids, graphic elements, and design rules combine to define the look of your organization. These elements can be designed in-house or by a branding and design firm and packaged into brand handbooks or guidelines. After the definition and creation phase, those guidelines will need to be maintained, a perfect responsibility for Brand Managers.
Language: These are guidelines and documents on your voice, tone, and brand character. Whether developed internally or by a design firm, what’s essential is that they be clear and accessible so that your team will be able to easily use them in design, communications, and marketing.
Community: These are elements that help you connect with your audience, the people who contribute to the health of your organization. For example, social channels, feedback mechanisms, or even marketing material. The emphasis here is on human connections and elements that will nurture the community.
Defining Your Brand Management Responsibilities Internally
In order to market and promote their organizations externally, Brand Managers need to make sure they clearly communicate their role internally first. While many nonprofits and educational organizations value and promote clear branding, there is always room to do more. For Brand Managers, this may require educating audiences on the role of brand strategy and design in nonprofits, but it’s essential that you speak openly and enthusiastically about what your brand is. Whether your audience is senior leadership or your team members, positive energy is infectious!
One way to start these conversations is to set up short, purposeful, 15 minute meetings, to explain the ways the brand will be realized, like logo usage or social media scheduling. These sessions provide a highly scripted way to introduce your role and techniques you will use to realize your nonprofit’s brand. These meetings can then stay focused on concrete ways the techniques will benefit the organization, rather than more diffuse organizational questions that take longer to address.
Brand Management Tools that Get Results
Everyone is busy—that won’t change. Having tools that extend our reach and help manage the brand is essential to effective nonprofit communications. The most successful tools are those that are easy to use and have measurable results. In order to help your brand succeed and grow, measuring its impact and reach is extremely important.
Visual Design Tools
- Pattern Libraries: front-end code samples of the most common user interface and design patterns
- Brand Guidelines: print or digital guides on how the brand is used visually
- Design Templates: InDesign, Photoshop, Word, and other templates for quickly creating on-brand communications
Brand Messaging Tools
Community Tools
- Social Media Management Platforms: apps like Hootsuite for managing Twitter, Facebook, and other accounts
- Communications Guidelines: guides on appropriate community interactions and messaging
- Crisis Communications Guidelines: guides on responding to crisis situations, harassment, and hacking
Successful Brand Management
So you have a clearly defined brand management role at your organization; one that is continually communicated to everyone on the team. You have some great tools to help you do the job. But how should you define success? All it takes is setting some clear goals and outcomes, then measuring your efforts to see what is improving and what is not.
Measuring Visual Impact: Using email flags or a simple spreadsheet, track the number of internal conversations on correct logo usage. The less it happens, the more your team members are following the brand guidelines. Work with the design team to track visual and user interface standardization projects. For projects that use brand guidelines and pattern libraries, track production time, seeing if simplified code and visual design means faster launches.
Measuring Tone Impact: Use A/B testing on web-sites and email marketing software to see the impact of different language with customers. Track the number of internal downloads on voice and tone documents. Work with the community and marketing managers to track how your team members are using updated communications guidelines.
Measuring Community Impact: The community, and their reaction to a more tightly focused brand, will be crucial to success. Track numbers of likes, reposts/tweets, and other metrics in social media platforms to find out what content the audience is interacting with. Solicit feedback from your customers and team members in controlled questionnaires, to see how sentiment changes over time.
All these metrics can be analyzed and provided as evidence of successful brand management, but also of the success of the brand in general.
Conclusion
Brand Managers have a number of responsibilities—they are evaluators, designers, and strategists. They have the complex task of growing and stewarding an organization’s personality and visual presence. By defining their role clearly, using tools to communicate and track progress, and working closely with their team to manage brand assets, Brand Managers can deepen a brand’s impact, connecting it more deeply with their audience.
In an earlier article, we explored some of the new features in Drupal 8. If any of that piqued your interest, you may be wondering what it means for you. Maybe you’ve got an existing Drupal website and are wondering whether it’s worth upgrading to Drupal 8. Or you might be planning to build a new site and wonder whether Drupal 8 would be right choice. If so, then here’s a look at the new Drupal CMS landscape.
New Development
Drupal 8 is only a few months old. Is it mature enough for professional sites? If you asked the people at Memorial Sloan Ketering I’m sure you’d get a resounding “Yes!” Why? Because their new site uses Drupal 8. And they’re not alone. According to the numbers recorded on Drupal.org, over 50,000 websites are already running on Drupal 8. So if you’re building a new website, there’s no reason to even consider Drupal 7, right? Well, not quite.
Reasons to Start with Drupal 8
Loads of Improvements: Along with the frontend and backend user interface upgrades that we looked at in the last post, Drupal 8 has a lot of core changes to help developers build more stable and maintainable modules for your Drupal site.
The Drupal team has also made significant improvements to the multilingual capabilities of Drupal 8. They’ve also added REST support, which makes it easy to share your website’s content with other websites and with javascript elements on your own site. So if you’re planning to support multiple languages, want to share your website data with other sites, or create a more interactive front end, Drupal 8 is most likely the way to go.
Longer Software Lifetime: Based on the planned Drupal release cycle, Drupal 7 should continue to be actively developed for about another two years and receive security update support for another two years after that. Drupal 8 is slated for another four years of active development followed by a period of security support, making it a better long-term investment.
Reasons to Start with Drupal 7
More Modules: While it’s possible to build a website using only core Drupal — chances are you’ll want to extend its capabilities with some of the more than 30,000 modules built for Drupal. Module developers have been working hard to upgrade their contributions to work with Drupal 8, and no doubt are working even harder now that Drupal 8 has been officially released, but there are still a lot of modules that aren’t production-ready yet. If you’re planning to start development in the next few months, talk to a Drupal developer about your specific needs to determine which version is appropriate for you.
More Developers: Version 8 includes significant changes in Drupal internals—the stuff developers use to create custom Drupal websites. Here at Constructive, we’ve been working hard for months, ramping up our skills and knowledge so that we’d be ready to jump right in and start developing in Drupal 8, and we’re certainly not alone in this. Still, there’s a much larger pool of Drupal 7 developers than Drupal 8 developers, and if you can’t find good developers who are up-to-date with Drupal 8, you’re probably better off going with 7.
Upgrading Existing Drupal Sites
The Drupal team has included a migration tool in Drupal 8 to help people move their content from existing Drupal 6 or 7 sites, but a major version upgrade is never a simple matter. Drupal 8 has introduced a new theme engine which means that your theme will need to be completely rewritten. Custom code will have to be modified as well, and while the migration tool will help with moving content into the new system, it requires customization and testing to do the job.
Drupal 7: If you’re happy with your current Drupal 7 site, it would be hard to justify the effort and expense of upgrading to Drupal 8. On the other hand, if you’ve already been thinking about making significant updates, and especially if they include re-theming, adding multilingual capabilities or sharing content with REST, it may make sense to make upgrading part of the project.
Drupal 6: If you’re currently running Drupal 6, you already have a very good reason to upgrade: security. Drupal.org has announced that Drupal 6 will reach end-of-life on February 24, 2016. But don’t panic. “End-of-life” isn’t as scary as it sounds. Your website won’t expire on the 24th. It will work just as well as it always did. What will expire is security support by the Drupal community. Those security updates that you’ve been applying all these years (you have been applying security updates, haven’t you?) will stop coming. This doesn’t mean your website will become insecure on the 25th, but as time goes by and baddies invent more sophisticated attacks, your website will be progressively more vulnerable, unless you do something about it.
Upgrade Your Website: Chances are, your Drupal 6 site is at least five years old and is probably showing its age. Look at Drupal 6’s end-of-life not as a crisis, but as an opportunity. This is a great time to give your site a complete facelift and to open it up to mobile devices by making it responsive.
Moving directly to Drupal 8 would both maximize the lifetime of the new site, and let you take advantage of the latest improvements to Drupal—but if your site depends on modules that don’t yet exist in Drupal 8 or has been heavily customized, you’d probably be better off upgrading to Drupal 7.
Paid Support: Because Drupal is open source, there’s nothing to prevent others from stepping in and supporting a version of the software, and a few companies are already working with the Drupal security team to provide long-term support for Drupal 6. This means an added expense, but if you have a large, heavily customized site, this may be your best option.
Other Options: Not everyone with a Drupal 6 site is in a position to either upgrade to a newer Drupal version or take on the added expense of paid support. If you’re in this position, there are still things you can do. Check out the What can you do to protect your site, come Drupal 6 support retirement day? section of this post for tips on beefing up overall security for your site. Also, make sure you’re using strong passwords and multi-factor-authenticationfor site logins, especially those with administrative privileges. These aren’t permanent solutions, but they’ll reduce your site’s vulnerability and give you some extra time to start planning and budgeting for a site upgrade.
Final Thoughts
If you’re planning a new website, Drupal 8 is a very attractive option. Along with significant improvements to the administrative interface, it promises a more stable and extensible architecture, a longer period of support, and an easier upgrade path to future Drupal versions. Drupal 7 is more mature, and boasts more modules and a wider user base. And if you want to learn more about which Drupal release is right for you, Get in Touch!
