The Challenge

The size of GLOS’ mobile users presented us with a unique challenge—how do we create a cohesive multi-platform user experience that is both visually stunning and highly usable on both desktop and mobile considering GLOS’ high percentage of mobile visits and the complexity of their tools.

Most sites faced with the level of complexity GLOS presents will simply resign themselves to a reduced mobile experience, removing certain functionalities and forcing users to visit the site on their desktop in order to have full access. For example, Google Drive’s website allows users to view files on their phones but does not support sharing or editing documents. We believed that it was important to GLOS’ users to retain full-functionality across all devices. In order to develop an all-platform-inclusive solution to crafting the best possible user experience, we took a mobile first strategy in designing the site.

Mobile First Design Strategy

As mobile browsing traffic continues to grow, responsive design is now a necessity. Every site we develop should retain its usability on mobile. However when it comes to sites that we know are being heavily trafficked by mobile users we start with a mobile-first design philosophy. This additional focus places the user experience of the mobile user first and ensures that all desktop functionality must be designed translate to a phone or tablet. A mobile-first design philosophy means the mobile user will have just as complete an experience as the desktop user. When designing the site, we created the desktop design knowing how elements would shift with screen size and what would create the best, most consistent user experience for users going between mobile and desktop platforms. Below, we have detailed three elements that embody this methodology.

Navigation

Navigation is one of the most important and difficult factors of a responsive, mobile-first design. As we have written previously, there are several potential implementations of mobile-friendly navigation. GLOS had two levels of navigation that were important for users to have easy-access to, so we chose to implement a multi-level push navigation. Although many sites use this form of navigation for their mobile sites, less choose to also use it on their desktop site. However, using a hamburger-activated navigation made perfect sense for the GLOS site. Not only did we want to keep the navigation experience consistent across platforms, but also by reducing the navigation to the hamburger icon, we were able to create greater emphasis on the beautiful Great Lakes photography that is used across the site.

Sticky Header

Sticky headers—navigation bars that remain static at the top of a page as you scroll—are great for sites where the navigation would otherwise be buried by the amount of vertical space on a page. We wanted the user to easily access the search and navigation, particularly on the mobile platform when the user is scrolling through the tile-based pages. However, screen real estate is incredibly limited on mobile platforms and sticky headers, if poorly implemented, can hog valuable space. Our solution was to make the sticky header as compact as possible, reducing the size of the logo and having the search bar appear below the navbar when activated. The result was an easy-to-navigate mobile experience that does not distract from the main content. Having access to the navigation at all times greatly improves usability for browsing the site and accessing data tools.

Accordion

The accordion of featured data tools is a great example of a web component that we wanted to use on the GLOS homepage, but only if it was just as functional on mobile as it was on desktop. We wanted this accordion to open and close three different tabs of information on GLOS’ data tools. Many of the horizontal accordions on the web either are not responsive or shrink to match the screen’s width, dramatically reducing visibility and usability on mobile. Because we wanted our accordions to feature text over an image, we struggled to find an example of an accordion that allowed for varying amounts of text and good readability. After some research, our design and development teams crafted a solution for a horizontal accordion that would collapse into a vertical format, preserving both readability and the photo-heavy aesthetic to remain intact regardless of screen size.

Summary of Our Solution

The Great Lakes Observing System site challenged us to craft a great site experience for both mobile and desktop platforms. By utilizing a mobile first strategy and focusing on how elements such as the navigation, sticky header, and accordion behaved on mobile devices, we believe that we succeeded in designing an excellent responsive website that accomplishes our goal of making data tools easy to find. We hope that this case study has showed you the importance of small details in mobile user experience design. If your site is lacking a solid mobile user experience, reach out to us to learn more about how we can help you improve your mobile first design strategy.

GLOS monitors data on the Great Lakes including water temperature, wave height, fish population and pollution and makes its data available to all those who want to use it to study the waterways through data sets and web tools. Our goals with their new site were to create intuitive paths for users to find the data tools that they need and to make the data more accessible for new users. Beyond creating concise user flows, we also wanted to demonstrate GLOS’ impact on the Great Lakes community. Visual storytelling was the natural tool to accomplish this goal. The following three methods were used to build our GLOS experience:

1. Strong imagery
2. Precise typography
3. Interactive elements.

Continue reading to learn about the specifics of our implementation of these three methods.

Photography & Visuals

In our initial strategizing of the GLOS site, we knew that we wanted to convey the Great Lake’s beauty through an atmospheric space. We saw the opportunity to push the site aesthetically further and to use NOAA’s incredible photo library to create an immersive digital experience. One of the most striking aspects of the Great Lakes is the way in which they respond the the seasons. In the winter, the Lakes are often partially frozen over; in the fall, they are surrounded by an abundance of red and orange foliage; in the summer and spring, they are accompanied by blue skies and gorgeous sunsets. We decided that the GLOS website should also shift with the seasons, so we implemented a large homepage header image that pulls from a library of images dependent upon the current season. Each refresh displays a different image so the homepage never feels stale.

Typography

Typography is an often forgotten detail that plays an important role in supporting the story that a website tells. When it came to choosing what typefaces should be used for the GLOS site, we immediately knew that a monospace font would be an appropriate way of signifying data and code. Inconsolata was our final choice as a header font—it both immediately connects the viewer to ideas of data, is highly legible, and has a slight human touch with its calligraphy-esque strokes. The typeface on top of the beautiful photographs of the Great Lakes immediately tells the user about GLOS—that it is an organization that organizes Great Lakes data—without verbal explanations.

Interactive Elements

The third piece of our visual story puzzle is interactive elements. Interactive web design is a great way to engage users’ curiosity and to create a fun digital experience. We conceived of a tile mosaic design for GLOS’s landing pages as a way to combine Great Lakes imagery and interactive elements. Each tile flips on mouse-over to reveal more information about its represented data tool or page. The flip effect is playful and encourages the user to enjoy exploring the site, instead of overwhelming them with long blocks of text.

On the homepage, we also utilized a responsive accordion slider that opens and closes to show information about different featured data tools. Not only does the accordion attract the user’s attention, it encases a large amount of information in an effective amount of space thus improving user experience.

Take Aways

Our implementation of the above three methods for GLOS shows how visual storytelling can improve the user experience of a website and brand. By combining dynamic images, thoughtful typography, and interactive elements, a website can become a platform for engaging with the user on a much more direct level.

To learn more about how great design can impact your users, reach out to us and let’s start a conversation.

1. Consider what the customer wants to know

Instead of thinking what your organization would like to tell its customers, dig into the psychology of your customer to determine what they want to know. A user should read through your content and feel as though you have read their mind. By proving to the user that you know their needs, not only will the user have a much more personal, meaningful experience on your website, but you will build rapport between you and your users.

2. Direct the user to what they want

Creating a path for the user to follow is the next step in creating a user-driven website. Think of the pages on your site that they would want to visit. Make an easy-to-follow trajectory from your homepage to those pages. One strategy that we often implement is placing visually striking calls-to-action on the homepage. Another method is using different sections act as launchpads into important pages. These sections should have visuals and content that tease the user into navigating to these pages. Regardless of how you choose to create these directions, make sure that the user has a clear way to navigate to important content on your website.

3. Keep the user engaged

You do not want the user to stray from the path that you have laid out for them. By burying pages many levels deep, using too much dry content, and not designing a visual hierarchy, you risk the user becoming bored with your website. Make your site easy for the user to digest; we at Manning recommend using strong visuals and succinct copy that is both easy for the user to quickly understand and is also highly engaging for the user. The user should be enticed to scroll and navigate to the next page of your site in order to avoid click-aways. Reducing the number of clicks and scrolls that a user must make to navigate to important content is also paramount—put your most important information above the page fold (where the user must begin to scroll) and make secondary pages easily accessible with one or two clicks.

4. Divide your users into multiple audience profiles

Not all users have the same motivations and you avoid making sweeping generalizations about the mind of all of your customers. Instead, think of the different sorts of users that will frequent your site; think of the various personas that make up your audience. What motivates each persona? What do they want from your organization? Craft a deep understanding of your audience members and their needs. In Manning’s Digital strategy process, this is one of our most important undertakings. Multiple paths should be laid for different sorts of users to get to the content that they want. Of course, not all users are as important as others, so you should prioritize some user groups’ needs over others.

5. Leave in some informational material

One of the reasons why a user might come to your website is so that they can learn more about you, so you should not eschew informative content all together. FAQ and About Us pages are great places to give your audience a better understanding of what your organization can do for them. However, your content in these sections should still be written with the question “what does the user want to know?” in mind.

User-driven web design is certainly the new standard in digital. We encourage you to think of how you can redesign your website with user experience at the forefront and to contact Manning Digital on your personalized steps towards a better web experience.

We at Manning have been producing video for the web for 20 years and have a strong understanding of how to use this medium to maximum benefit. So what can you do to create a video that helps your website as opposed to videos that can actually negatively impact your digital marketing efforts? We’ve listed some quick tips for how to best avoid common web video mistakes.

Story Telling Medium

The first mistake is failing to understand the medium. Video is a story telling medium that is the ideal digital tool to connect emotionally with you audience. Conversely, it’s poor at communicating stats and complex detailed messaging.

Kitchen Sink

One common mistake is trying to cram your entire story into one video. Online videos should be short — ideally 1-3 minutes. Focus on one point that you want to be the takeaway message for your audience. Be clear, direct and above all use visuals that resonate rather than just talking heads.

Poor Quality Production

The truth is that we are all expert judges of video quality based on our experience watching television our entire lives. We can recognize a poorly produced presentation and negatively react to the product or service depicted. If you are going to create low quality videos, you might as well save your money and produce no videos at all.

Lights, Action, Camera

There is a reason this saying starts with lights. Any director will tell you that one of the keys to creating compelling programs is the lighting. How scenes and talent are lit is often the biggest thing missing or poorly executed in low quality or internal productions. Lighting provides depth and contrast in the frame that makes a two dimensional screen appear to be three dimensional. Lighting sets the mood and controls where the viewer’s eye is drawn and helps hold their attention. Importantly, with poor lighting viewers will think the entire program – including the messaging – is amateurish and won’t take the presentation seriously.

Compression is Making Sausage

Compressing a video is kind of like making sausage. The final product is only as good as the raw materials going in. Many in the digital industry often don’t understand well the art of compression and how to maximize quality and the experience users have. We have learned from our two decades of video compression experience the ideal settings for streaming video. With our productions we strictly maintain a network broadcast quality level of production through to the final compression. You may want to look at YouTube’s recommended upload settings for some initial guidance.

YouTube

It’s important to recognize that viewers are using a wide variety of platforms from smart phones to tablets to desktops — with different browsers and different video player software). And Internet connection speeds vary for those on a cellular network, Wi-Fi or hardwired connection. We highly recommend NOT hosting multimedia files on your web server, but uploading them to YouTube and embedding the YouTube video on your web page. Hosting videos on your own site will add significantly to your server load, but more important, if you provide the wrong compression format or codec, your users may not be able to see your video at all. YouTube streams out a variety of different resolutions and codecs based on the user’s browser, device, screen resolutions, and Internet connection speed.

Integration

How a video is integrated within your website is also critically important. The tendency is to feature videos on the home page because that page gets the most traffic. Video should be an element within a broader digital strategy. What is the goal of the video? It may be that a video on an SEO landing page may improve conversions more than it would on the home page.

We’re happy to share with you more of our insight into online video. We welcome your thoughts encourage you to reach out to us to talk about how to utilize video to improve your digital marketing.

More than two-thirds of ALL emails are read on a mobile device according to a new study by Movable Ink. What this means for marketing professionals is quite simple. The email blast you just sent was likely deleted without being read, and the viewer may have unsubscribed altogether, unless your email was designed for display on mobile devices.

Source: Movable Ink

The Fatal Mistake

While many organizations have recognized the importance of mobile and have created responsive versions of their websites, only 56% are utilizing mobile-friendly email design techniques. The rest are still playing catch-up and are using emails designed primarily for desktop platforms. This is a fatal mistake for email initiatives. According to BlueHornet 75% of all mobile viewers immediately delete an email that doesn’t render well on their device. More than 16% unsubscribe, and only 4% read it anyway. These are alarming numbers.

Research shows that open rates and conversion rates both significantly increase with responsive emails.

Responsive Email Design

Our solution is to take a mobile-first approach to email template design. There are a number of important considerations that our creative team applies:

• Designing in a single column so the email looks flawless on all platforms
• Designing with finger-targets in mind – requiring a minimum width for ease of navigation
• Keeping Calls-to-Action easily tappable
• Keeping the message short and sweet – studies show that mobile users tend to skip reading emails that involve a lot of scrolling – and only 1/3 spend more than 15 seconds reading an email.
• Using white space so readers can easily ski through and digest content more effectively
• Keeping the header clean and moving any required navigation to the footer
• Using fonts that are display well and are readable on mobile devices
• Making sure that any linked website landing pages are mobile-friendly

Our responsive email templates provide flexibility for all platforms while still allowing for significant creative freedom.

Responsive Email Best Practices

It’s critical for organizations to understand their audience, what devices and email clients they are using, what times of day when mobile devices are used most, and what marketing tactics are most likely to drive conversions or achieve other campaign goals.

Industry studies show that morning hours between 6-10AM have the highest peak in mobile email viewership — but that mobile email viewership remains strong and tops desktop viewing throughout the traditional work day.

Keep the subject line under 30 characters to display fully on mobile devices.

Display important content within an HTML text format to ensure that it will be seen because images are unreliable and may not load.

Finally, be sure to thoroughly test emails on different platforms and clients before distribution.

We encourage you to look at email marketing from a new mobile perspective and encourage you to reach out with questions or for help in improving your email campaigns.

We recently tackled this problem with the redesign of E S Foods’ website. When we were approached by E S Foods to revamp their site, we knew that their products—grab-n-go meals and frozen entrees for school children—had to be the focal point of our designs. E S Foods’ strength is in its diverse variety of innovative products, so we wanted to highlight just how many options they offer. We would like to offer the solutions that we crafted as advice for other companies that wish to create sites with similar functionality.

Show & Tell: Displaying Product Variety

When breadth of products is your strength, it’s imperative to visually show thet range of options without overwhelming the user. Our solution was to create a playful interactive interface to encourage the user to explore the product varieties such as for the company’s well-established Breakfast BREAKS meals.. The layout is responsive so that the user can have the same experience regardless of whether they are using a desktop or any mobile device. Creating an engaging interface that demonstrates your variety avoids boring the user and encourages them to explore the full list of products.

User-focused Navigation

We organized product information so food service staff can find and explore relevant products when searching by meal (Breakfast, Lunch, After School) as well as by product category. This approach provides improved user experience as well as enabling E S Foods to promote their hottest new product category Protein Innovations. Having different methods of browsing products allows the user to easily sort through products based on their own needs.

On Informative Pages, Reemphasize Your Products

The E S Foods website is not entirely contained to its products pages; they also have several pages that promote the educational benefits of the school breakfast program and how schools can take better advantage of available federal funding. On the non-product pages of the E S Foods website, we reemphasized their products both pictorially and verbally. The banner images prominently displayed E S Foods products and we frequently included links back to product pages. Think of your informative pages as supporting players that back up the value of your products.

Concluding Thoughts

Strategizing the most effective way to showcase your products is tough, especially for companies with a huge range of products such as E S Foods. We believe that these three solutions—displaying product variety, providing user-focused navigation, and reemphasizing products on informative pages—are excellent tips to keep in mind when planning out your website. If you would like a customized plan-of-action for your product site, get in touch with the Manning Digital team!

A recent paper published by Lithium Technologies and Klout tackled the time issue by studying half a million Facebook and Twitter users and over 144 million posts. By examining post-to-reaction times and comparing behavior for users in different cities, the researchers identified the best time of day and day of the week to post content by geographic location.

The results were partially as one might expect—people do not read their social media feeds as frequently during the weekends. Activity plummets during the weekends, especially on Twitter. Instead, the days of the week with highest engagement were found to be Tuesdays and Wednesdays. However, the drop-off in activity on Facebook during the weekend was not as severe; interestingly, Saturday actually had the most consistent activity throughout the day. Regardless, the study’s takeaway is that posting in the middle of the workweek is your best bet for optimizing viewership.

What about how the time of day affects your post’s visibility? Again, when not to post is fairly self-evident—post reaction is at its lowest in the middle of the night when most people are sleeping. Visibility instead peaks during working hours (9 a.m. to 5 p.m.) and has a secondary peak between 7-8 p.m. As was with day-to-day reactions, Twitter post reactions were found to be much more sensitive to the time-of-day than Facebook. These findings were near universal for the cities observed—San Francisco, New York City, London, Paris, and Tokyo—with one small caveat; San Francisco users tended to interact with posts made earlier in the day whereas New York users responded more to posts made in the afternoon.

This report gives you a good idea of when to push new content out to your Facebook and Twitter platforms, but what about figuring out how to fine-tune your emails? We understand that every company’s audience segment is different and requires specific optimization in order to maximize readership. At Manning, our approach is to use this study as a guide to set up our own controlled testing that gauges response to your organization’s content.

In particular, we often implement A/B Split Campaigns in order to determine the best delivery time, subject line, and from name. This testing involves sending out a small sample of emails to be sent with two different variables—for example, sending out half of the campaign’s emails at 9 a.m. and the other half emails that at 3 p.m. We can track which set of emails has the highest number of clicks in order to determine what variables work best for your company. As there may be variations in response based on the type of content that you’re pushing—such as discount coupons versus posts about new services or products—we make sure to test across all of these potential variables. If you’re ready to include email and social optimization in your digital strategy, get in touch.

Full Screen Overlay Navigation

For sites with only a first level navigation, full-screen overlay nav is an excellent way to combat a lack of screen-space on mobile devices. With this method, the navigation is triggered by the touch or click of a button—often the three-lined “hamburger” button—and is displayed on the entirety of the screen. Sites which do this well include HugeInc.com, a marketing agency. In their iteration, the full-screen overlay is semi-transparent, allowing the user to still see the main content on the page even when the nav is activated.

Tabbed Navigation

Another option for smaller sites that have very few pages, tabbed navigation is a unique, out-of-the-box choice. When the phone or tablet is flipped to landscape mode, the tabs can even switch to be lined up in a column on the side of the site instead of in a row on top. Tabbed navigation, as seen in Codyhouse’s demo, only proves effective in a very particular setting—one with few navigation options, only first level navigation, and succinct navigation category names.

 

Multi-Level Side Push Navigation

Another option for smaller sites that have very few pages, tabbed navigation is a unique, out-of-the-box choice. When the phone or tablet is flipped to landscape mode, the tabs can even switch to be lined up in a column on the side of the site instead of in a row on top. Tabbed navigation, as seen in Codyhouse’s demo, only proves effective in a very particular setting—one with few navigation options, only first level navigation, and succinct navigation category names.

Multi-Level Collapsable Navigation

Collapsable navigation is a common choice for sites that have multiple layers of navigation. This form of navigation can be pushed down from the top or side of the screen. Like push navigation, collapsable nav only shows the first level upon opening the navigation. When the user clicks on or hovers over a first level category, the second level navigation opens up. As the first level of navigation is still shown on the screen, this method of organizing navigation takes up more screen space than push nav; however, it has the benefit of previous levels being more readily accessible. An excellent example of collapsable navigation is the mobile version of Barack Obama’s website—his site also shows how a responsive site can transition from traditional dropdown navigation to mobile-friendly navigation.

Perspective Navigation

Lastly, there is perspective navigation—an experimental, visually-engaging animation that is a stand-out choice to use for websites with a single layer of navigation. Like the side-bar navigation, activating the menu pushes the main content elsewhere on the screen. As its name suggests, perspective nav moves the main content in a three-dimensional way in order to create the illusion of perspective and depth. Developed by Tympanus, there are several different ways in which the screen can move—pushed to the right or left, rotated up or down, or even “laid down” on the bottom of the screen. This form of navigation is fully responsive and, like overlay navigation, functions well on smaller screens by allowing for a large area to be used for displaying navigation.

In Conclusion

As more and more web users browse using mobile and tablet devices in lieu of a desktop, it becomes vital to develop forms of navigation that are viable on all platforms. Here at Manning, we consider how to optimize screen space, how to design for different levels of navigation, and how to create navigation functionality that seamlessly fits in with the rest of the website. We encourage you to get in touch with us if you would like to learn more on how we can help you to implement responsive navigation.

Creating a business blog is an important step, but most companies fail at delivering and capitalizing on the opportunity from their blog. We’ve worked with clients to implement new strategies to significantly increase the digital reach and client engagement. At Manning, we believe even if the blog does not impact the bottom line, staying on top of your corporate blog can be a great opportunity to generate some buzz around your company, increase your digital reach and get your clients and potential clients engaged with your organization and its insights.

We’ve helped clients like FONA optimize their corporate blog over the past 8 months to increase their blog traffic over 300% when comparing a month in 2014 to the same month in 2015. Let’s get into some key insights we shared with FONA to help optimize their blog:

Search Optimization

If you’ve devoted some time to strengthening your company’s website, your branded keywords – company name and related terms – should be performing fairly well in search results. At the same time, consistently publishing blog posts opens up the opportunity to improve incoming organic traffic. Content has been and will always be king, so not only should your content stay fresh, original and valuable to the reader, but titles, headers, images and links (calls-to-action) all need to be relevant and optimized.

Ease of reading and sharing

Every email that is sent with the newest blog post should be responsive – it helps, trust us! Almost everyone who has a smart phone has their email account connected, let’s make it easier for them to view the email and click through to read the entire blog post.

Whether it’s social media or simply forwarding the email to a colleague, sharing the latest blog post should take place in just a few clicks. Once the new blog post is published, sharing on all of the company’s social media profiles is a must. From there, your company should encourage employees to ‘Like’ and ‘Share’ on Facebook and ‘Retweet’ on Twitter.

Share insights and expertise

In today’s business ecosystem, transparency has been a buzzword that crosses over all industries. Corporate blogging provides another way for a company to be more open to its customers, clients and partners to increase loyalty and trust. Sharing industry insights and expertise can put your company in a position to be a thought-leader and the go-to source for industry trends.

Analytics

Corporate blogging isn’t just a “set it and forget it” campaign. There has to be follow up analysis on what blog posts are being read most, how many visitors are clicking through to your call-to-actions, and knowing if your readers are bouncing after reading the post or if they are moving on to read more content published by your company.

Implementing these features will help improve and optimize your blog to increase your readership and customer loyalty. If you’re interested in speaking with us about, we’ll help you every way we can!

The number of mobile-only users is significant for older Americans too at 6%. Surprisingly, the most rapid growth was among an audience age 55 and older where the percentage of mobile-only users has doubled in the last year.

Altering the Digital Landscape

Mobile browsing has already dramatically changed the digital landscape even without the evolution of mobile-only users. Mobile devices today account for 60% of the total time that users spend online. Major online retailers are reporting mobile users comprise more than half of all visitors – and the number for B2B sites is commonly more than 20% and growing.

A new Harvard Business Review article explores this growing phenomenon and the impact mobile users are creating. “You don’t get to decide which device your customer uses to access the internet. They get to choose. It’s your responsibility to deliver essentially the same experience to them — deliver a good experience to them — whatever device they choose to use.”

New Urgency to Create Responsive Mobile Sites

This new research provides new urgency for businesses to have a strong mobile presence that provides excellent user experience on smart phones and tablets. At Manning, we’ve worked hard to develop smart, efficient ways to create an effective responsive mobile site. Retaining a competitive advantage is a must for every business, and those that fail to embrace mobile do so at their own risk. Get in touch and we’ll provide recommendations and options for your business to embrace the mobile world.