Notice: Function _load_textdomain_just_in_time was called incorrectly. Translation loading for the updraftplus domain was triggered too early. This is usually an indicator for some code in the plugin or theme running too early. Translations should be loaded at the init action or later. Please see Debugging in WordPress for more information. (This message was added in version 6.7.0.) in /home4/cfusionm/public_html/dev/manningdigital/wp-includes/functions.php on line 6131

Notice: Trying to access array offset on value of type null in /home4/cfusionm/public_html/dev/manningdigital/wp-content/themes/jupiter/components/shortcodes/mk_icon_box/vc_map.php on line 142

Notice: Trying to access array offset on value of type null in /home4/cfusionm/public_html/dev/manningdigital/wp-content/themes/jupiter/components/shortcodes/mk_icon_box/vc_map.php on line 149

Deprecated: The each() function is deprecated. This message will be suppressed on further calls in /home4/cfusionm/public_html/dev/manningdigital/wp-content/plugins/js_composer_theme/include/classes/core/class-vc-mapper.php on line 111

Warning: Cannot modify header information - headers already sent by (output started at /home4/cfusionm/public_html/dev/manningdigital/wp-includes/functions.php:6131) in /home4/cfusionm/public_html/dev/manningdigital/wp-includes/feed-rss2.php on line 8
Manning Digital – MD-DEV https://md.cfusionmm.com Just another WordPress site Wed, 10 Aug 2016 16:25:09 +0000 en-US hourly 1 https://wordpress.org/?v=6.9.4 Online Video Mistakes https://md.cfusionmm.com/online-video-mistakes/ https://md.cfusionmm.com/online-video-mistakes/#respond Thu, 05 Nov 2015 15:09:34 +0000 http://manningdigital.wpengine.com/?p=799 We have all seen evidence how video can provide tremendous benefits to an organization’s website to engage an audience, create an emotional connection, compel a positive action or reaction, improve SEO, and increase conversions. But little is said about how video can hurt your goals if not done well.

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.

]]>
https://md.cfusionmm.com/online-video-mistakes/feed/ 0
Email Marketing in a Mobile World https://md.cfusionmm.com/email-marketing-in-a-mobile-world/ https://md.cfusionmm.com/email-marketing-in-a-mobile-world/#respond Fri, 11 Sep 2015 16:05:31 +0000 http://manningdigital.wpengine.com/?p=857 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.

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.

bp-pie-chart

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.

]]>
https://md.cfusionmm.com/email-marketing-in-a-mobile-world/feed/ 0
Key Insights to Promoting a Business Blog https://md.cfusionmm.com/key-insights-to-promoting-a-business-blog/ https://md.cfusionmm.com/key-insights-to-promoting-a-business-blog/#respond Wed, 24 Jun 2015 16:07:48 +0000 http://manningdigital.wpengine.com/?p=859 Creating a business blog is an important step, but most companies fail at delivering and capitalizing on the opportunity from their blog.

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!

]]>
https://md.cfusionmm.com/key-insights-to-promoting-a-business-blog/feed/ 0
​The Rise of the Mobile-Only User https://md.cfusionmm.com/%e2%80%8bthe-rise-of-the-mobile-only-user/ https://md.cfusionmm.com/%e2%80%8bthe-rise-of-the-mobile-only-user/#respond Wed, 17 Jun 2015 16:10:05 +0000 http://manningdigital.wpengine.com/?p=861

New data reveals a growing phenomenon of users who only use a smart phone or tablet for ALL online activity. ComScore reports more than 1 in 5 users age 18-34 ONLY use a mobile device.

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.

]]>
https://md.cfusionmm.com/%e2%80%8bthe-rise-of-the-mobile-only-user/feed/ 0
A Website 800 Years in the Making https://md.cfusionmm.com/a-website-800-years-in-the-making/ https://md.cfusionmm.com/a-website-800-years-in-the-making/#respond Wed, 11 Mar 2015 16:13:16 +0000 http://manningdigital.wpengine.com/?p=864

We’re honored to have been selected by the American Bar Association to build the “Icon of Liberty” website, commissioned to commemorate the 800th anniversary of Magna Carta.

The ABA’s Division for Public Education is providing the site as a comprehensive collection of images of original documents, public art, architecture, and other depictions of Magna Carta throughout the world and throughout history.

Sealed in 1215 by King John of England to quell a rebellion by a group of barons, Magna Carta (the Great Charter of Liberty) has come to symbolize the ideals of freedom and the rule of law. Magna Carta was an inspiration to our nation’s Founding Fathers, who incorporated the principles of liberty it represents into our cherished founding documents, including the Declaration of Independence, the Constitution, and the Bill of Rights. Today, Magna Carta is one of the world’s most recognized and respected symbols of freedom under law.

The site features nearly a hundred images in a gallery that can be filtered by different characteristics and an interactive timeline tracing the history and impact of Magna Carta through the centuries. The goal of the site is to engage a wide public audience, and provide a rich, rewarding interactive multimedia experience that conveys the significance of Magna Carta as a symbol and promotes understanding of the role of the rule of law in establishing and maintaining free societies.

And while the content of the site was 800 years in the making, the Icon of Liberty website was designed and developed on a tight deadline to take full advantage of the anniversary year celebration.

]]>
https://md.cfusionmm.com/a-website-800-years-in-the-making/feed/ 0
An Oscar for Web-based Videos? https://md.cfusionmm.com/oscar-for-web-based-videos/ https://md.cfusionmm.com/oscar-for-web-based-videos/#respond Fri, 20 Feb 2015 16:15:34 +0000 http://manningdigital.wpengine.com/?p=866

Should there be an Oscar for web-based video? Maybe not a gold statue, but the principal of recognizing what makes a good web video versus a lack-luster one is critical to the success of any site.

We’re been producing video for the web for 20 years, and video for broadcast going back even further and have a strong understanding and 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 hurt your digital marketing efforts?

And the Judges say…

Some think that any video will help boost web traffic and a connection with your audience. 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.

And the winner is…

behind-the-scenes

Our recommendation is not to lower your creative standards even if your budget is limited. We recently produced a series of web-based videos for Navistar to showcase a new vehicle that the company’s Defense unit has developed. Our approach was to think of the project like creating a high-end car commercial – on a fraction of the budget.

Test Drive…

We wanted to accomplish two key goals

  1. Make the viewer feel like they took a test drive by showing them a variety of compelling shots of the vehicle in action
  2. Drive home the enhanced performance capabilities or specs that this new vehicle offers.

helicopter-launch

Our solution was to use a remote-controlled helicopter to get a wide array of compelling aerials that accentuate the power, speed and performance of the truck. We also utilized GoPro cameras to show unique POV and under the carriage shots.

The Award for Best Editing…

And the magic that holds it all together is the editing. In this case we utilized After Effects to combine animated graphics with the video elements to dive home our story. The final videos are now proudly displayed on the Navistar Defense website where users can experience a test drive of this new prototype vehicle. And the true measure of success that 20% of all visitors to the entire site are navigating into vehicle pages to look at these videos.

We welcome your thoughts encourage you to reach out to us to talk about how to utilize video to improve your digital marketing.

]]>
https://md.cfusionmm.com/oscar-for-web-based-videos/feed/ 0
The Word is Out: Top 5 Design Trends from 2015 https://md.cfusionmm.com/top-5-design-trends-from-2015/ https://md.cfusionmm.com/top-5-design-trends-from-2015/#respond Tue, 17 Feb 2015 16:20:32 +0000 http://manningdigital.wpengine.com/?p=870 At the start of the New Year, design blogs everywhere publish their insights for upcoming trends. A month and a half into 2015, there is a lot of content out there; here is a list of the five ideas that have risen to the top.

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.

apple

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.

born

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.

pinterest

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.

airbnb

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.

square-space

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.

]]>
https://md.cfusionmm.com/top-5-design-trends-from-2015/feed/ 0
The Importance of Responsive Mobile Web Design for B2B Sites https://md.cfusionmm.com/the-importance-of-responsive-mobile-web-design-for-b2b-sites/ https://md.cfusionmm.com/the-importance-of-responsive-mobile-web-design-for-b2b-sites/#respond Thu, 15 Jan 2015 16:35:21 +0000 http://manningdigital.wpengine.com/?p=828 The web today is the dominant channel in B2B company–customer interactions and communication. And now we’ve experienced the global tipping point–what is one of the biggest shifts since the Internet began with mobile web browsing surpassing PC usage for the first time.

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.

idg-graphic

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.

]]>
https://md.cfusionmm.com/the-importance-of-responsive-mobile-web-design-for-b2b-sites/feed/ 0
The Unsettling State of the Hover State in Reaction to Responsive Design https://md.cfusionmm.com/state-of-the-hover-state-in-reaction-to-responsive-design/ https://md.cfusionmm.com/state-of-the-hover-state-in-reaction-to-responsive-design/#respond Fri, 26 Sep 2014 15:20:32 +0000 http://manningdigital.wpengine.com/?p=803

It is a well-established expectation of online browser-based users that hovering over an object with your mouse may initiate an action. This is called a feedback loop, and if that object is a link or a button the feedback of, say a color change and/or your mouse turning from a pointer to a little hand, tells the user that that object affords clicking. And by clicking on an object a user completes their desired action.

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

Target_hover_accessibility_example

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!

]]>
https://md.cfusionmm.com/state-of-the-hover-state-in-reaction-to-responsive-design/feed/ 0
Pair Programming: A Developer’s Story on Collaboration https://md.cfusionmm.com/pair-programming/ https://md.cfusionmm.com/pair-programming/#respond Mon, 11 Aug 2014 16:27:48 +0000 http://manningdigital.wpengine.com/?p=823 Have you ever thought about the people behind your favorite application or website? Developing a whole site takes an entire team that is dedicated to collaboration, open communication, and well-written code. Once designers and strategists brainstorm and come up with ideas, it is the job of the developers to make those ideas come to life.

As you may know, pair programming is an agile development methodology in which two developers work together on the same workstation. As both developers focus on the same line of code, one is responsible for coding while the other one reviews it, and then regularly switching roles. It is similar to flying a plane, in which one person is the pilot and the other is the co-pilot, who ensures the pilot is always steering in the right direction.

Here at Manning, we are big believers in the agile development methodology. Our developers team up and program in pairs during initial code, or to resolve development issues or application bugs. Pair programming is a practice that is gaining popularity amongst coders, but we’ll explain what it entails and how beneficial it is for the projects that we are working on.

Pros vs Cons of Pair Programming

There is a lot of speculation about pair programming and if the advantages outweigh the disadvantages. Because pair programming may not be fit for every development project or scenario, here are a list of advantages and disadvantages:

Pros

  • Productivity – pair programmers spend approximately 15% more time programming than they would alone
  • Quality – small bugs are caught quicker and issues are resolved faster
  • Satisfaction – developers are more confident in the code written with someone versus if they wrote it alone
  • Learning – different ideas and knowledge are shared between the two developers
  • Collaboration – pair programing enables team members to resolve problems as they code instead of going back through the issues

Cons

  • Cost – even though it’s typically more efficient, having two developers coding together is more expensive
  • Socializing – developers can easily get into socializing instead of programming
  • Distraction – developers get distracted easier working under the pressure while someone is watching them code
  • Skill Set – sometimes developers are not good matches as they have different skill sets
  • Getting Along – sometimes coders work differently and putting aside egos can be tough

As you can imagine, it is difficult to translate those bullet points into a real world situation since every developer is different, and dependent upon every project they’re working. We find pair programing useful in more complex cases where thinking through a solution is needed, and we often find that the best solutions require input from more than one developer.

Variations of pair programming

Because one advantage of pair programming is the opportunity for learning, here are a few variations in the types of developers:

  • Expert-Expert – this is the obvious choice for highest performance and great results
  • Expert-Novice – this pair is set up for learning possibilities or training
  • Novice-Novice – least optimal for results, but much better for learning and having two novices working together rather than an individual

Real world usage of pair programming

Numerous tech companies like Pivotal Labs, Hashrocket, Braintree, Facebook, Square, Twitter and Groupon have implemented this agile development practice. They use pair programming to secure stability of their code as well as improve quality and efficiency. Instead of revising the code all at once, there are two people working on it to ensure that it is written correctly—it is sometimes safer to trust two developers rather than one.

Pair programming is also well known in IT-focused universities. Professors usually pair their students for either individual tasks or full semesters. Similar to working in a group, they want to take full advantage of the learning benefits from pair programming.

Nowadays, you could also observe smaller boutique studios, like Manning, using pair programming to provide their clients with better results. Our in-house development team would rather work together on harder issues in order to be more efficient. This is beneficial for clients because it usually expedites the process of creating web sites or applications, and lessens the time spent on fixing programming snags. Especially in a profession where you constantly need to be practicing your coding skills, we prefer pair programming because it allows our staff to keep each other informed on best practices.

Best solution

We believe that the best solution is to give freedom of choice to developers. They don’t have to be forced to pair program, but they have that option if it is necessary to do so. Our team of developers typically knock out all the simple coding tasks alone, but when challenges or issues come, they usually team up to get better results—which translates to better value for our clients. Let us know if you’re interested in using us to develop your next website!

]]>
https://md.cfusionmm.com/pair-programming/feed/ 0