In our 7+ years designing and building websites for nonprofits and other community-oriented organizations, we’ve seen many trends come and go, while technologies have emerged and changed the way we think about designing and coding for the web.
What are these shifts, and how can we design for the present with an eye fixed toward the future?
We believe websites are in transition — and we’re moving from a programmer-driven experiment to a user driven experience, with established conventions and expectations. Whereas sites were once calling cards, or data clearinghouses, they are now an everyday media that enrich knowledge, compel action, and activate emotion.
As mobile devices come to the fore, responsive design has become an essential part of any new site. Responsive Web Design has become perhaps the biggest shift in our fundamental approach to development.
The change: to use one site, with moving parts, and shifting elements, to align and optimize across devices and screens. The same site serves a high resolution monitor, a netbook, and iPad and a smartphone — and will be subtly optimized for each experience.
As the internet becomes a recreational tool, consumed more and more via mobile and guided by social media, Responsive Design builds upward, mobile first. By starting from the bottom up, we can nail down the essential semantic architecture, and then build outward to fit larger and more active screens and interfaces.
Beyond the Homepage: User Flows
The recent internal memo from the digital team at the NYTimes demonstrated the changing way we use the web. One of the key findings was that fewer and fewer of the site’s readers go to the homepage first. What drives traffic to the site? Search and Social. It used to be an assumption that users will start at home and branch out from there, but no longer.
Our design approach therefore moves beyond conventional ‘pages’ to think about ‘flows’ — starting points, pathways, and end points, and how we can shape a user’s experience according to her needs and your desired outcomes.
Part of these flows are designing for navigation–thinking about multiple access points and menus based more on how people think than how machines do.
Be Highly Resolute
A combination of modern browser compatibility and increased access to high speed internet has given designers a greater range of flexibility to leverage high resolution photography, illustration, and even short video loops to add immediate visual impact and a sense of depth and complexity. Typical applications of this approach are as a ‘hero’ image — a large image at the top of the page, or as a backgrond image of a panel, often stretching across the entire screen, or a ‘full bleed’ background image or video, which fills the entire browser window, regardless of height and width.
This approach can produce a powerful and effective site with relatively low economic impact, and works best for call-to-action campaigns or other magazine or brochure type websites. One area of crossover with this type of approach is the microsite, which we discuss in an earlier entry from 2013.
Infinite Scrolling & the Parallax View
Web interface is more than a static layout-there are moving parts which shift and react to user action. In addition to the usual suspects–mouse pointing behavior on links or buttons that activate on a hover or a click, there has been increasing attention to scrolling behavior, both with regard to content placement and animating and shifting the scrolling effect itself.
Let’s look first at the “deep” or “infinite” scroll approach. This relatively new technique embraces scrolling as a more natural way for us to view more content — more natural than clicking on a ‘next’ or similar link to load a new website.
Why the long scroll? One word: touch. Increasing use of touch-based devices (your phone and table, for example!). Since ‘flicking’ is easier than ‘clicking’ with a finger or a stylus, this deep scroll approach has gained traction.
As part of our design approach, we’ll work together to decide whether your content is best suited for a ‘deep scroll’ approach, based on your desired outcomes, audiences, and the nature of your content itself.
Narrative and Storytelling
It turns out that stories are a really effective way of engaging new audiences and creating an emotional attachment to your work!
What would you click on, a link to someone’s mission statement or a dramatic story about a work-related experience?