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.

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.

Side note before delving in: all of the following trends assume responsive design practices are being followed. Given that Pew Research Center has determined that 34% of cell users primarily use their phone to go online, it is essential to design for this growing population’s viewing preference and behavior. To learn more about responsive design, take a look at these awesome illustrations.

Drum Roll Please: The 5 Design trends to follow this Year

1. Longer Scrolling Sites

As more and more users go mobile, scrolling has become best practice for usability. Viewers love to scroll, as proven by the study Everybody Scrolls published at the end of 2014. It is more intuitive action than clicking, especially when you have to consider fast load times.

Besides it’s benefit as a usability feature, it proves to be an aesthetically pleasing way to showcase a variety of content, not just homepages. Longer scrolling pages can be used effectively to showcase products, timelines, and about pages, just to name a few.

The Next Web ranks this as their number one trend on the rise from 2014 that will continue this year. Be on the lookout as you browse the web for innovative uses of scrolling too, like horizontal scrolling or scrolling through different vantage points of premium products.

2. Large UI elements: huge, unobstructed background images, blocks of color, and typography

Simplicity and flat design have been around for a while, but now “make it big” appears to be the most important principle for today’s web, at least according to Sitepoint, an online resource focused on the Internet of Things. As visual creatures, we appreciate and gravitate towards larger elements of color that catch our eye. Following Sitepoint’s article, this trend evolved from movies and catalogue covers to provide the maximal visual impact.

Generally these large images are left wholly unobstructed so that they can be seen clearly. Functional elements are often minimized, like in the case of hidden navigation that is revealed by clicking on the navicon toggle or ghost buttons, outlined rectangles that indicate a clickable field, which put all the emphasis on the visual itself.

Having large images is a trend that has carried over from 2014, with the new twist of substituting the image with a large block of color. This image-free trend was featured Designmodo.

As large elements rule, typography is no exception. Awwwards explains that as fonts have become easier to find, and often are offered for free, more emphasis has been placed on them. A pronounced difference in font size on a page creates a clear visual hierarchy in titles and text, making pages more scan-able and digestible, a plus for the mobile user on the go.

3. Tile based design

Tile, or card based web design, like Pinterest and Google Now, is becoming more prevalent for layout design. Web Design Ledger explains that cards are gaining popularity because they can provide a lot of information quickly in a condensed, responsive format.

From the designers’ perspective, tiles make it easy to fit a variety of related content on one screen that also invites functionality–they tempt users to click and interact more by either linking to more information, posting to social media, or uploading your own content.

From the user perspective, tiles are visually appealing because they are heavily reliant on images, are intuitive because they hark to physical objects they resemble, and are inherently social as you can easily share the content across social media platforms.

4. Multimedia Storytelling

Creating a multimedia experience has always been part of the conversation but in 2015 you will see more sites including video, parallax and animation to enhance their storytelling, user experience and engagement. The main goal will be to bring all of these elements together to create an immersive storytelling experience for users.

Video is a valuable element as it is able to improve user immersion in the content, create awareness, and help bring in users because it can clearly communicate emotions. Videos bring interviews to life, stage products and create brand awareness. A newer application of video is the use of short, looping videos for above the fold homepage introduction content, often replacing static banner images. This trend is on the rise because of its eye-catching quality. For examples, see the list Insight180 pulled together.

Animation and subtle parallax will help communicate not only the overall purpose of a particular site but also particular UI behavior. Agreeing with Creative Bloq, small, animated elements, transitions, and subtle movement will be more engaging, fun, and pleasantly surprising for users as they discover increased functionality. 99 Designs explains that HTML 5 Canvas will eventually allow websites to have almost any visual event.

5. Navigation

As mobile website browsing and mobile app usage becomes more frequent, the navicon has gained traction for all sites, even becoming the go to design element for complicated navigation options. When the navicon is used, it often hides the navigation by putting it off screen to create the cleanest visual aesthetic.

Trends with navigation also follow the “bigger is better” model and designers have started incorporating full screen navigation and super-sized menus. By clicking on a navicon or button, the menu appears, either flying out from the side like in mobile apps, sliding in from the top, or taking up the entire screen.

Web Designer Depot outlines their essential navigation trends for 2015: one, the navicon, two, full screen navigation, and three, super-sized menu.

Moving Forward

In sum, the top five trends to pay attention to are: scrolling sits, large UI elements, tile based design, multimedia storytelling, and new uses of navigation. All of the elements and trends above need to be combined to create a great user experience; rarely can any one element stand on its own.

If you want to learn more, take a look at our work. We invite you to reach out to us to see how applying these design trends can improve your website and digital marketing.

In the past, many B2B businesses have viewed mobile as a luxury add-on, but today, failing to embrace mobile is risky. Companies once slow to embrace mobile are now recognizing its potential to contribute to an effective mobile strategy that can positively effect every facet of the business, from marketing to sales and to the bottom line.

The Facts About Mobile Users and Your Business

Mobile Business Research

Mobile users are doing much more than accessing email and social media. The latest IDG Global Mobile Survey reports that 77% of business decision-makers use their smartphone to research a product or service for their business. Reaching these important executives wherever they work, whether it’s at the office, at home, or commuting is critical.

While this report shows that executives rely on mobile devices to conduct business research, many B2B sites are catering strictly to desktop users. One of the keys to long-term success and competitive advantage may be how quickly a company can develop and implement an effective mobile platform.

Responsive Response

Implementing a responsive web design is a cost-effective method of optimizing a site for mobile devices. With the growing array of mobile devices available to access the Internet, it’s important to ensure that every user visit is optimized. Marketers who implement responsive design report a 20 percent increase in clicks and conversions on average.

A responsive site automatically scales the layout to the screen size of the device. We often use an analogy that responsive design is like liquid that spreads out or in as the space of the container it is in changes. It’s the same for website elements as they flow seamlessly to fill the screen for different devices.

Benefits of a Responsive Mobile Platform

Excellent User Experience

Responsive sites provide optimal user experience on all devices. Our goal as web strategists, designers and developers is to create a site that allows any user on any device to easily and effortless access and consume content and create immersive interactive experiences.

Responsive Design Increases Mobile Traffic

Mobile traffic volume, conversions and other key metrics increase on sites that are responsive because of better user experience. Lack of mobile enabled websites remains one of the biggest barriers. Websites without a mobile framework offer poor user experience which dramatically impacts mobile traffic, conversions, page views, time on the site, and reduces return visits. Businesses without a mobile site cannot accurately evaluate the potential mobile audience based on the current website analytics.

Cost-Effective

Creating a responsive mobile site is efficient compared to having a separate desktop and adaptive mobile site.

SEO

Switching to responsive design will help attract customers searching from mobile devices. Google recommends responsive web design as the industry best practice, and tailors search results to favor mobile sites for queries using a mobile device.

Next Steps

Optimizing your B2B site for mobile, no matter how large or small the mobile audience segment is, can contribute not only to your digital marketing and your overall business success. Responsive web design is a smart, cost-effective way to reach and engage all your audiences no matter where they are or what device they are using. Contact us to find out more about our approach to responsive design and to talk about options to create a responsive mobile site for your B2B business.

It sounds rather complex when you break it down, but this is generally how we navigate the web today and visual cues, actions, feedback loops, and affordances make up our mental model of how websites and applications should behave. These terms and ideas are what make up the building blocks of human-computer interaction (HCI), as well as interaction (ID) and user experience (UX) design.

Today, we’ll look at one interactive element in particular: the hover state. We’ve all seen hover states designed and employed. For example, when I hover over a link in Google, that link becomes underlined. The underlining is providing me with feedback that says that that text affords clicking. Additionally, Google delivers other types of feedback by showing links in purple to indicate that I have already visited those sites. Being one of the first ever search engines, Google also provides us a good mental model of how search tools should behave—but you can read our other article on search tools for more on that.

Back to hover states! Because they have been around for some time, hover states provide us with a consistent feedback loop that helps the interface communicate with the user by saying that the application is listening. Viewing websites or applications on a desktop computer with a mouse (for most of us) used to be the only method of browsing, making hover states one of the most important aspects of interactive feedback—but that all changed with the arrival of touchscreen devices. Why, you ask? Because—how does one hover without a mouse? Acting as an advocate for accessibility, it’s also worth pointing out that hover states have never been user-friendly toward people only navigating with a keyboard or other devices for impaired individuals. So banking on displaying special features or information on your online project probably isn’t going to provide you with the best reward.

If not only with accessibility in mind, it’s remarkable how much touchscreen devices and responsive sites are making us rethink the necessity of hover states. Even if you’re designing a site that isn’t responsive, people use their tablets or other touch devices to browse the same websites or use the same applications that you would traditionally only use on a computer with a mouse. So let’s dissect more issues with the hover state, as well as some solutions.

The Biggest Pain Points of the Hover State

Dropdown Menus

One of the most prevalent examples of using hover states can be found in websites with drop-down navigation menus. This has certainly been the convention for years to show menu items when the navigation is hovered over, so there’s nothing necessarily wrong with using hover for a menu. But, have you ever tried to see a dropdown menu on your touchscreen smartphone? Were you frustrated with the feedback that the interaction provided? How were you able to navigate through the site?

Too Many Hover Items

There are times when tools that are supposed to be useful end up being used to the point of interference. Hover states are intended to provide a user with helpful feedback about what the site affords to do. However, by over-utilizing hover states, an interface and quickly get congested and busy, without indicating anything helpful to the user. Sometimes the windows that pop up with hover obstruct what the actual user is trying to accomplish and causes frustration.

Information Bubbles, Dialog Boxes and Pop-Ups

Little pop-ups or “click here for more” indicators should be avoided in areas that require more explanation or context—like in e-commerce sites. Product list pages, for example, often provide a little bit of information about a product on hover, which is an easy way to de-clutter interfaces while also letting potential buyers explore more about the product. That information (and everything else about the product) needs to also be available on the product page itself, so that it doesn’t detract from the experience of a touchscreen user, but adds some additional usefulness only for those who do see it.

Solutions for Going Above and Beyond Hovering

The key is to provide visual cues that UI elements afford clicking. Keeping a consistent color for links or buttons, or rethinking a navigation scheme that doesn’t utilize dropdown menus on hover can be a start. Below are some more solutions.

On-click Accessibility

Retail giant Target, famously sued for their site’s lack of accessibility, now uses an on-click solution for their “quick info” pop-up while offering a hover state for the button too. On top of these visual indicators and feedback loops, they show a description of the object (the “alt text” in the yellow box) to provide the utmost accessibility for people on any type of device or browsing ability. This design and functionality is now in accordance with the WAI and 508 Compliance—which, if you haven’t heard of, you should probably familiarize yourself before you end up being the next Target.

Utilizing Style Sheets for Different Device Types

One of the most common workarounds that I’ve seen are when sites utilize hover states on responsive sites in the desktop version, and then design and code different states for the tablet or mobile versions. Although this provides a good solution for the time being, it doesn’t necessarily create a seamless experience for the user and is the most expensive and time-consuming solution because 1) you’re paying a designer to design multiple views of the same object, and 2) you’re making your developer code different states for those designs. In my opinion, you’re better off…

Designing with Mobile/Hover in Mind

By constraining the design to eliminate hover events, you not only make the experience good regardless of what device your users are on, you make your site more accessible, and you also make is easier to create a touch specific native application later on. By coming up with the best possible design solution that accompanies a lack of hover states, you create the most seamless, cost-effective solution for any device type or user. Although it may take some getting used to, by implementing these parameters into your design you’re already one step ahead of the game when it comes to catering to the ever-growing mobile (and touch screen) audience. Of course, if you’d like to know more about the state of the hover state, you can always get in touch with us!

With this vocation in mind, I’d like to talk about something I’ve been noticing a lot of lately: single-page websites. Unlike conventional websites that host several pages (and usually with a hierarchy), single-page websites keep all the content on that site in one, scrollable location. They may feature a conventional navigation, or other nods to familiar website practices, but you’ll know a single-page site when you see it because as you click around the URL will not contain child folders or references to other indexed content. One common practice is that single-page sites will anchor links all on one page, so when a user clicks on a link within the universal navigation or otherwise, they’ll simply go to an anchored section somewhere on that that page rather than an entirely different page on the site. This may be hard to detect at first, but hopefully the following examples will give you a better idea of what I’m spotting in this growing trend.

Issues Single-Page Sites Solve

As interaction becomes more and more screen-based, I think of responsivity (how well your application or website reacts to displaying on a desktop computer vs. a phone or tablet) to designers and developers like the black smoke monster in the TV show LOST—it can sniff out weaknesses, it’ll creep up on you if you’re not watching out, and it can be a beast to tangle with. Because of the complexity of responsivity, I believe single-page sites are a reaction/solution to fully optimizing content for the ultimate, browser- and device-compatible experience. So, is this just another new trend like gradients and rounded-corners, or is it here to stay? Hard to say just yet, but here are some of the difficulties that single-page sites address:

• Complicated Navigation. Single-page sites require only one (or sometimes in the case of scrolling, none) type of navigation. No matter where users go, they’ll ultimately be guided through the site in a linear or non-linear fashion, no matter how the navigation (or lack of) is displayed.
• Catering to minimal or maximum content. Single-page sites range in complexity. For the most part, they’re meant to inform a user about a product or service and generally only have one call-to-action, or funnel the user towards one goal. I’ve also noticed that some companies use single-page sites to cross-promote other services, products, or initiatives within their own company, which take users to entirely different sites.
• Designing for Responsivity. As we move towards an increasingly mobile audience, how well your web page appears on a mobile device is vital. Whether you’re having trouble creating a mobile-friendly menu, or deciding the hierarchy of content for mobile, fully responsive, single-page sites solve these design hurdles by stacking all the content and forcing users to scroll from the get-go. This way, you take a mobile-friendly approach to your design, and the technology doesn’t dictate design.
• Simplistic technology, expedited development. A basic information architecture (IA) and simpler design make for easier programming.

Single-Page Sites in Action

Now that you’ve got a good idea of some of the perks of single-page sites, let’s see a few in action. Here are a few that I have recently discovered, in order from least to most complex:

Pied Piper

This is probably one of the simplest single-page sites you’ll find. Its purpose is simply to promote/satirize the HBO series Silicon Valley. Since the content is so simple and short, there’s no need to even use the main nav menu, but if you do, notice that the ScrollSpy dots on the right tell you where you are on the page. It’s also fully responsive, allowing for seamless viewing between devices of any size.

General Electric’s Ecomagination Global Impact Site

This site, in my opinion, is beautifully designed and intricately executed. Much more complex than Pied Piper, GE’s Ecomagination Global Impact single-page site is a culmination of rich media and diverse content, helping keep users (and designers and developers like me) very engaged! The page’s anchors take the form of different “bands” of content within the site. Instead of a top, horizontal navigation, you’ll notice a ScrollSpy-enabled right nav. Clicking on one of the dots takes you to different bands, or (like one of my outlined characteristics of single-page sites) you can ignore the navigation altogether and simply scroll. Scrolling, by the way, provides a lovely experience as well, since Parallax scrolling is employed. Parallax scrolling is another fun and trendy thing happening on the internet. Perhaps you’ve noticed it while surfing other sites.

Another thing that GE’s Ecomagination site does well is it provides an opportunity for horizontal content. You’ll notice tiny horizontal dots in the middle of your browser frame within almost every band of content. We are familiar with these dots through mobile applications, and they therefore signal to us that there is other content to explore, in addition to the text, video, or images already provided. Since GE is one of the largest companies in the world, you can appreciate the use of cross-promoting other services, products, reports, and divisions within the company. For this reason, the use of a single-page design for the Ecomagination site provides the utmost exposure to content, as it is not buried within other pages like in a conventional site. Finally, the only thing that does not make me die of starvation from the digital drooling I do over this site is the fact that it’s not fully responsive. Almost a perfect 10, but not quiet… sorry, GE!

IGN Presents Museum of Mario

While this may go against one of the solutions I laid out earlier about expedited programming, the fact that this single-page site tells a most intriguing timeline-based story about one of our most beloved (and Italian!) gaming heroes of all time makes up for it. Plus, it is unquestionably skillfully, and exquisitely executed. Because Mario’s evolution is as simple as a timeline, the story is told in the most linear fashion as you scroll from the top to the bottom of the site. Keep in mind that this linearity is not ideal for most types of content—as outlined in the two previous examples. Using principles of game theory, a playful design, savvy tech, and rich media, this single-page site is one of the more complex examples you will see. Did I mention it’s also responsive? Take that, smoke monster! I won’t give all the magic away by going into every tech-heavy, nitty-gritty detail, but you should definitively take the time to appreciate this designer/developer’s dream of a site.

Drawbacks of Single-Page Sites

Although so far it seems like single-page sites jump over a plethora of hurdles that UI/UX designers and developers face every day, there are some drawbacks to be aware of:

• Content. As mentioned in the Mario example, sometimes your content just doesn’t fit the single-page model. Remember that content is king, so if you are thinking of creating a simple story about a product you’re working on, a single-page site might do the trick. Otherwise, perhaps a more conventional approach is the way to go. This is probably the biggest point to consider if aspiring to build a single-page site.
• Simplicity. Have you ever heard of just keeping things simple? Sometimes the best approach to showcasing an idea, or service, or product through a website is by letting the simplicity tell the story. Don’t get caught up in techy gimmicks or overly complicated designs—if it doesn’t get your message across, it’s not worth the time!
• Trendy is just that. Just because Flash animations were the trendy thing circa 1998 doesn’t mean they’ve held their ground in today’s web world. Remember that things change quickly in the tech world, and just as fast as one trend comes, another one goes. Sometimes taking a more conventional approach is the way to go, but sometimes, trends hook audiences. And we like risk-takers anyway!

Think You Can Spot a SPS?

When it comes to building a site, taking a look at the newest practices is essential. Now that you’ve been introduced to single-page sites (SPS), do you think you can spot some good or bad examples? Or maybe times when a conventional, multi-page site should have been used instead? We urge you to keep an eye on this growing trend, so let us know if you spot any! And of course, if you’d like help building your own SPS, Manning is here to help.

Monday

AM

Senior Staff Meeting

We start each Monday with meetings designed to help us all get on the same page. The first of these is a senior staff meeting where myself, our senior developer and our owner discuss things like business objectives, client relations, and workload. We’ll plan strategy, use our task management and time tracking software to evaluate performance and generally try to forecast our upcoming week. The goal is to provide a weekly analysis of how the company is running at the most basic levels.

Traffic Meeting

We then move on to a traffic meeting with the full staff to discuss the status of client work, review timelines and set goals for the week. Project managers typically lead this discussion and my role is to be aware of the status of all of our creative work. This allows me to create my own to-do list as well as work with developers and designers to keep their workflow on target.

Creative Staff Meetings

Once the week is planned out on a company-wide level, there’s usually a lot of catching up and planning with other design and development staff to go over specifics. I might review a design, or the latest build of a website. Often times we give each other things to do, ask questions or set meetings for later in the week.

PM

Research

My philosophy is that no great work is done in a vacuum — which is to say that to be an effective creative, you always need to be keenly aware of the world you’ll be bringing your work into. That means doing your best to stay on top of technical advancements, design trends and a whole host of cultural factors. So I try to devote some time each week to reading blogs, websites, Twitter feeds, etc. that keep me informed or inspire me. These resources represent a variety of fields including design, fine art, technology, video, food, music and fashion. Hopefully, diligent attention to research of this kind translates into better ideas down the road.

Design

As the Art Director, I am responsible for the overall direction of our design work regardless of who it is completed by. But, because we are a small company, I do actually roll up my sleeves and do a good portion of the actual design work myself. So during the afternoons, I might spend a few hours working on a website design, or a logo or a storyboard for one of our clients.

Tuesday

AM

Information Architecture/ Wireframe Meeting

Our belief is that good designers work as much with their brains as they do with their mouse, and so we place a great deal of importance on the work that takes place before one pixel is moved in Photoshop. One of the key points of any interactive project is the process of outlining the information architecture and translating it into wireframes to be used for creating comps.

There are myriad fancy digital tools created for this purpose, but I like to just gather the PM, developer and designer in a room and work through ideas on a large chalkboard. It allows us to work in a loose and collaborative way that seems to let people be less precious with ideas. Any idea can be erased or modified easily, and people can physically share the space in order to work together. At this stage, I try to facilitate the discussion and lean heavily on the perspective of each of the other people in the room to guide the work.

PM

Business Development Meeting

Another part of working for a small company is that there’s rarely someone dedicated to business development. At our company, this responsibility is primarily handled by our owner, but I am occasionally brought in as a sounding board, or to help provide ideas. Meetings like this may also include discussing spec work or marketing efforts.

Motion Graphics/Animation

As a designer/art director working in interactive, there is a much greater emphasis on animation and motion graphics. All of our design staff are capable of doing motion work, and this leads to a high level of integration between things like content, video and interface design. For many projects, I create the animation or motion sequences. This may include things like video titles or animation for an iPad app.

Wednesday

AM

Web Analytics Strategy

For a lot of our work, creating it is only half the battle. We often have a role in the promotion or outreach. One of the things I do most frequently in this vein is analyze web traffic in order to develop SEO or paid search strategies. This involves evaluating user behavior, goal performance, traffic sources and other metrics. We use this data in order to help us do things like write copy, optimize web pages, or allocate PPC funds.

Content Development/Copywriting

I did a lot more work with copy when I was working in advertising, but it does play a critical role in much of our current work as well. In terms of message development, the two are similar. However, the interactive component adds some significant differences. People tend to read interactive content differently, and as you write, you must make sure to provide an experience in which users can navigate coherently. You must also account for things like SEO, dynamic content, page scrolling and other interactive-specific factors.

PM

Design Review

We review and discuss design work internally before sharing it with clients. Sometimes this may just be myself and another designer. In other cases, it may involve developers and project managers. We try to evaluate the design against the project goals and other documentation as well as recommend modifications.

At various points in a project, these review sessions also involve presenting designs to clients. We try to walk them through our decision-making, then take notes and discuss feedback that will inform the revision process.

Front-End Development

Our developers are wildly talented, so this is not something I have a huge hand in. But I do try to actively participate in ensuring that our working sites/apps are as close to the original designs as possible. So I may go through a site and touch up CSS or make slight modifications to HTML. In other cases, I may be working to optimize media or helping to create graphic effects.

Thursday

AM

Client Meeting Prep

A global client list and the marvels of modern technology mean that most of our communication is via phone or internet, but we do meet in-person whenever possible. Since face-to-face time can be limited, we try to be as organized and efficient as possible. This means planning and creating notes or meeting agendas. Occasionally we will use tools like Keynote to build presentations.

Design

Even in off-peak periods of projects, there is still usually enough design work to require a few extended sessions per week. Because uninterrupted time can be difficult to come by, I usually try to split this work by a period that involves another member of the team or a client. For example, I may finish work on a few designs Monday, share them with a client on Wednesday, and then work on the revisions on Thursday.

PM

Client Meeting

Occasionally we host meetings at our office, but most often we are trying to catch up with busy people. So meetings usually involve travel to the client’s office. A lot of the time this means travel within the Chicago area, but there are also times that we may fly to places like New York, San Francisco or Washington, D.C. Meetings can range from a casual lunch to lengthy presentations or brainstorming sessions. We really value this time as it often gives us insight that we use to significantly improve the quality of our work.

Friday

AM

Proposal Development

In many ways, this is the single most critical thing that we do at Manning. A proposal contains the kernel of an idea that has the potential to shape our work, our relationship with a client and the direction of our business. Every project has to start somewhere, and it’s essential that it’s given the best chance to succeed. Creating a proposal involves research, brainstorming with the rest of the staff to develop concepts, outlining objectives, audience profiles and budget projections.

PM

Video Shoot

Our company has its roots in video production, and it still plays a significant role in much of our work. We shoot a variety of places and subjects such as military vehicles in the Nevada desert, factory workers in Indiana or interviews with scientists in Philadelphia. Each shoot has its own unique challenges, but my role is typically to oversee that the video we’re capturing matches up to the concept developed back in Chicago.