We’re always thrilled when we see businesses and institutions embrace responsive design. Just recently, the Edmonton Journal (EJ), our city’s local news publication, launched its new fully responsive website. Recommended by Google as the best configuration for smartphone-optimized websites, responsive design is entering our everyday vernacular and moved beyond a fleeting trend. It has become best practice for any online property being built today.
For anyone looking to redevelop their own website it can be a daunting task. Redeveloping the Edmonton Journal website was undoubtedly a huge undertaking, one that we can knowingly assume involved countless hours of debate, research and experimentation. And while the goals and needs are unique to their organization, there are a few takeaways we can glean from their recent launch and apply to any responsive design project.
1. Scale up instead of scaling down
Organizations like the Edmonton Journal have a wide breadth of objectives when it comes to the departments and key stakeholders involved. We can assume each party is vying for a piece of the proverbial pie and looking for adequate representation on the website. So how do you reconcile diverse needs with limited screen real estate? You prioritize the needs of the customer above all else.
“You need to make sure that what stays on the screen is the most important set of features for your customers and your business. There simply isn’t room for any interface debris or content of questionable value. You need to know what matters most.”
— Luke Wroblewski
There are two principles at play when approaching a responsive design—graceful degradation and progressive enhancement. Graceful degradation is the process of deciding how a large site should fit smaller screens or less feature-rich browsers. The second, progressive enhancement, begins with understanding critical needs of the user and supplementing those needs as screen real estate becomes available.
An approach known as a ‘mobile-first’ takes progressive enhancement further by recognizing display size constraints and encourages the need to focus on prioritized content. This line of thinking “provides a great opportunity to re-evaluate what content/functionality is necessary and gives us an opportunity to strip away the cruft across the board (and not just for mobile users either).” (Brad Frost)
Comparing the Edmonton Journal’s desktop experience with its mobile experience, we can surmise that a top-down approach is used. Content shifts and stacks from desktop to mobile, but remains consistent. Every piece of content is there, in its entirety. At this point, one must question if all of this content is relevant to a mobile user. The perils of this approach typically include lengthy page load times and decreased usability (more on this below).
2. Get fries with that: Support the hamburger menu
When it comes to mobile, the hamburger menu has become the go-to way of handling navigation. It saves space and looks great. Unfortunately, this method is becoming more and more problematic as it can negatively affect usability by hiding global navigation.
On the EJ’s desktop version, users are provided with a redundant horizontal menu that provides visibility into the ‘Sections’ hamburger menu. With the mobile version, that menu is removed. While we’re not suggesting the menus be the same, the practice of providing visibility and access to relevant items is a good one to follow as it can lead to increased engagement. For instance, if a user was interested in the Sports section, a secondary menu would be a great opportunity to link to contextually important features, such as ‘Latest in Sports’ or ‘Highlights’. When used in conjunction with a mobile-first approach, a supported hamburger menu would deliver a truly targeted experience.
3. Even colour can be taken out of context
Colour can be a powerful tool when used appropriately. Reams of research on colour psychology and application already exist. Yet, despite all the research and intentions, we discovered in the case of the EJ site that colour carries context.
From Postmedia, “The Edmonton Journal’s redesigned masthead combines its classic nameplate with an abstract representation of Edmonton’s River Valley. Rendered in shades of orange, inspired by the fall colours, harvest time and the beautiful sunsets over the Edmonton city skyline, the new masthead reinforces our connection to the city and unifies our print, web, smartphone and tablet platforms.”
Given the political climate of Alberta, it seems the abstraction was lost on many. Unless you’re Jay-Z and you copyright your own colour, colour can be co-opted by others. In this case, strong associations between the newly elected NDP government and the EJ’s political allegiance were assumed.
4. Make site performance a goal and measure it
An often overlooked optimization tactic that has emerged over the last few years is page speed. Recognized by Google as a ranking factor, “your site speed should be a priority as slow sites decrease customer satisfaction and research has shown that an improvement in site speed can increase conversions.” (Geoff Kenyon)
In the case of the Edmonton Journal, the size and complexity (image galleries, ad networks, etc.) of the site inevitably impacts page load speed. When tested, we saw a page load speed of 5 seconds. At Top Draw, our optimization experts aim for page load speeds between 2-3 seconds as a milestone. Now this is not to say that the EJ site is performing badly, but merely questioning the need for any superfluous content, design elements (like fonts and images) and code that may be negatively affecting conversion and site performance. A question you should be asking yourself over and over.
74% of consumers will wait 5 seconds for a web page to load on their mobile device before abandoning the site. (Source: Gomez)
One method to ensure a fast experience is to establish a performance budget. Emerging as a key function of design, performance budgeting allows project teams to make decisions on what components to add so long as it stays within budget. Used correctly, a performance budget acts as a framework, a point of reference for debating what does and doesn’t get added to a page.
Ultimately, performance is about respect. Respect your users’ time and they will be more likely to walk away with a positive experience. Good performance is good design. It’s time we treat it as such.
— Brad Frost
We’ve taken the liberty of using the Edmonton Journal website as a familiar and recognizable example for this article—not to criticize, but to understand their solution to a unique set of problems. When set into the wild, this new website was as vulnerable as a new born cub in the jungle. It became the target of public dissection and criticism, even hate. As creators and purveyors in this industry, we have a duty to ensure every new-born site is given the best opportunity to succeed. And as we continue to evolve and apply new learnings from each other, we are not only building better websites but creating a supportive and thriving ecosystem.