BKG_Blog_Image_v1

We all know how easy it can be to get distracted these days, especially online. Current trends in web design are all about cutting down on unnecessary elements and making your message shine. This is a perfect strategy when thinking about creating a successful advocacy campaign website.

You’ll notice that the trends outlined below are all driven at least in part by the massive increase of mobile devices. In 2013, global mobile phone ownership exceeded desktop ownership and today, hours per day on mobile dwarfs time spent on desktops or laptops. As more people browse your website on the go, you want to make sure that the experience they have is helping, not hindering, engagement.

 

  1. The Long Scroll

Thanks to the proliferation of mobile devices, we’re all comfortable doing a lot of scrolling these days. Many sites now opt for a single page in which to organize all of their content. Rather than clicking through multiple pages in an unnecessarily confusing site map, the long-scrolling site puts all of your important content front and center. This can be great for an advocacy campaign website where you want all of your messaging to be clearly readable and your ask to be easily understood.

Design_Blog_StopTheDataBreaches

Example: http://www.stopthedatabreaches.com/

 

  1. The Hamburger Menu

We’re all familiar with that little icon by now. Three lines stacked on top of each other. Click it and the menu will appear. That’s a hamburger button, and it seems like it’s probably going to be sticking around for a while. Up until recently, it’s been common to show the full website navigation on the desktop version of a website while opting for the hamburger menu on the mobile responsive versions. But more often, the hamburger seems to be appearing across all platforms. This can be helpful for most websites since it cuts down on visual clutter, again allowing your main messaging to stand out. Using the hamburger menu button everywhere also helps to keep the user experience of your website consistent no matter how your advocates are accessing it.

Design_Blog_BTWF

Example: https://bornthisway.foundation/

 

  1. Card- or Tile-Style Layouts

Websites with a lot of regular updates such as social media posts, blog posts and photos can often benefit from a card-style or tile-style layout. Organizing your posts into a grid of consistently-sized boxes can be great for showing a large amount of information in a flexible space. These grids automatically adjust into different numbers of columns to fit whatever device the site is being viewed on which is great when considering all the different ways your visitors will be accessing your website. If your advocacy campaign is going to be constantly updated with new posts, consider a card-style layout.

Design_Blog_TXOGA

Example: https://www.txoga.org/

 

  1. Rethinking the Slider

Almost every website has one. But is this the best way for you to set the stage for your campaign? While some in the community wonder if thinking about content “above the fold” is even relevant anymore, there’s no doubt that the first thing a user sees upon arriving to your site is still important. We believe that telling a story is a great way to engage potential advocates, and a large hero image can be a great way to do this. Avoid using stock imagery here; users have learned to spot tired stock photos. A large, unique and relevant hero image can help make your campaign feel more real and allow your audience to more easily connect with your message. Video content used in this same space can also be a great way to add a sense of movement and dynamism. Starting with a compelling message or story and strong visuals will drive your visitors to scroll down and find out more about your campaign.

Design_Blog_FederalBudget

Example: http://federalbudgetinpictures.com/

 

  1. Flat Design

You may have noticed that design on the web has been getting a lot simpler lately. Good design allows visitors to easily identify the content they’re looking for, and flat design cuts down drastically on visual clutter to allow this to happen. Google’s Material Design is one of the best recent examples of a design system for the web, and many of the digital products we currently use have been influenced by this system. Of course, this can extend to advocacy campaign websites as well. Everything we’ve discussed in this post is about cutting out the unnecessary elements and paring down to your core message, allowing your advocates to easily learn about and interact with your campaign. Flat design is the concept that ties all of these other elements together to create rich, streamlined and engaging experiences.

Design_FAAR

Example: http://responsibility.org