RepEquity® Blog: Digital Brand Management Distilled

Navigating Your New Mobile Friendly Website

Responsive design: What was once the frontier in mobile is now a standard part of business and content strategy for companies of all sizes.

With the rollout of Google’s Mobile Friendly Algorithm, it’s become more important than ever to make your content easy to navigate on mobile. But how do you do that?

As a professional UX designer, I spend my days answering this question – among others – for our clients. Here are some navigation tips and best practices that I rely on throughout the redesign process to produce an excellent experience for users, on any device.

Mobile Context Design Tips

(1) Trim the Fat

Start by taking a fresh look at how the user navigates the content. Most likely there’s a legacy to why certain items are in the header and primary navigation. Given today’s user-centered design and mobile context, be flexible and rethink the whole information architecture. Edit the primary navigation choices, keeping only what’s essential and relevant for the user to understand your product and services. Remove the nonessential navigation items from the top level to play supportive roles at relevant points along the user flow.

Below you’ll find the responsive website for Dorigati Wines. Notice the four breakpoints of differently designed interfaces for the primary navigation – these breakpoints render the content flexible and usable on many devices. Be careful though, as this seems to be an exercise in designing for devices instead of designing engaging contextual content. The takeaway: when you make your site mobile friendly, your previous information architecture might not work anymore.

Dorigati Responsive Navigation UIs

Dorigati

1- large desktop width, 2- small desktop width, 3- tablet range, 4- handheld range

Your design choices can have a real effect on your bottom line. Forrester Research has estimated that as many as 50% of online sales are lost when users can’t find the information or products they want. Guide your re-architecture by user behavior and needs. Take a look at your analytics to give priority to the information at each level of the site map and bring popular content and actions to the top of each user flow defined by user research.

Addressing Consumer Concerns

swimsuitsforall

Swimsuitsforall.com addresses consumer needs with an emotional connection. The “Fit Solutions” category describes product features that satisfy customer needs at the beginning of the product search.  This great example demonstrates well-thought-out content strategy and navigation UIs, which inspire confidence in users while making it easier for them to discover solutions and make a purchase.

(2) Reduce digging

For even shallow information architecture on the smallest screen, rely on a combination of navigation elements and test different UIs specifically for mobile. You want your navigation UIs to be obvious, useful, and friendly – cut out complex and repetitive motions by displaying your navigation elements in useful page locations. The visibility of navigation systems will change in relation to the primary content on mobile, but finding the options should be easy.

Quick Tip: Creating dynamic and contextual content blocks for related information will lessen the burden on navigation UIs and assist the primary message.

Responsive websites require adaptive content and navigation UI patterns. The William & Mary University responsive website exemplifies many of these tips.

Article template relies on a combination of navigation elements

WilliamsandMary

Internal article template on desktop 1. Utility navigation, 2. Search, 3. Primary navigation, 4. Local navigation, 5. Breadcrumbs, 6. Focused content and page links, 7. Continued related conversations 8. Helpful links footer (Not highlighted)

Quick link to local navigation 

On the mobile version of the article template, the “Page Menu” button prevents repetitive scrolling to the local navigation, now positioned at the bottom of a long single column.

williamsandmary2

1. The “Page Menu” button

Fewer options for visual relationship 

Note that on the smallest screens, the primary and local navigations aren’t present, but the breadcrumb navigation clarifies the relationship of the page content to previous conversations in the content flow, essentially covering for the primary nav UI and outlining the expectations of content for this page. When we associate the title “Undergraduate Programs” with the broadly labeled section of “Academics,” there is an expectation of how much detail (or introductory-level content) there will be on this page.

wandmary3

Breadcrumb navigation circled

(3) Design with User Expectations

We’ve been designing responsive websites long enough to know that user expectations are different on each device.

wandmary4

In this version of the responsive header, you’ll notice that the mobile navigation UI focuses on the tools previously located in the utility navigation on desktop. These tools now serve as the first choices in the menu drawer. In this mobile context, the links in the utility navigation are given priority over the primary navigation on the desktop UI.

Adaptable menus like this can even exceed user expectations when users find the actions they perform more frequently on mobile front and center in the navigation. This experience will positively impact users’ perception of your brand, and will help to establish you as a leader in your industry.

Bonus: Test Your New Architecture and Responsive UI

Now that you’ve invested time in redesigning your information architecture and developing your mobile friendly website, we advise following up with usability testing to define the most effective display beyond best practices.

An example of this testing can be seen in the following IBM home page variations, where a multivariate test of the header UI design determines the most customer-satisfied design.

IBM

IBM Multivariant Test for Header Designs

Navigating Success

While Google has turned up the heat on the mobile marketing initiatives and your SEO may be taking a hit, take heart – this is only a temporary hiccup. RepEquity knows you’re not alone: from Fortune 100 websites to your competition down the road, everyone is adjusting to the new algorithm. RepEquity can address these new requirements while providing flexible solutions to help you reach your ultimate goal – meeting your users’ needs.

HTML5: The Future is Now

RepEquity - HTML5: The Future is Now

What is HTML5?

HTML is how web developers structure the content on web pages, and increasingly, use its structure to manipulate the style of your page, how your page displays images and video, and how interactive components, such as JavaScript, act with the user and content. HTML5 is the newest iteration of the HTML markup language with particular attention to multimedia. Currently, each browser interacts with these components differently, and that can make for a long, complicated HTML file. HTML5 aims to solve this bloating (along with other issues), creating both cleaner markup and more efficient sites.

Why is it making waves?

HTML4, developed in 1997, is the current standard for web development.  Its limited functionality means that to display things like Flash or Java, users must have a plugin enabled and updated to view certain components on your site such as video or multimedia files.  This process consumes more memory and energy on users’ machines and relies on users to update plugins.  HTML5 works to fix some of these problems. So what makes HTML5 so interesting?

  • HTML5 aims to limit use of external plugins
  • HTML5 creates a uniform experience across devices
  • HTML5 has location support, and with Google’s hyper-local search algorithm changes, this could mean better visibility to users in your area!

Ok, so why do we care about this when building websites?  I am so glad you asked!

Websites that adhere closely to markup standards generally are more efficient.  This improved functionality means not only a smoother experience for your user, but better SEO results as well!  A HTML5 site will load faster, use less of your user’s machine resources, reduce reliance on external plugins, and work across browsers and devices.   This will be more evident as HTML5 is adopted.  We already see large web companies (such as YouTube) using HTML5 for default video format over Flash.  Of the top 1 million sites accessed on the web, over 300,000 utilize HTML5.  While adoption of HTML5 across the web will take some time, the development team at RepEquity is excited about the advantages this new technology can bring to our clients.

Another perk: HTML5 makes our work more enjoyable. HTML5 allows us to create neat, readable code on the back end of clients’ sites – always a plus when reading line after line of HTML markup! It also means we don’t have to worry as much about whether or not users have updated their Flash, Java, or other plugin to get the full experience of our clients’ sites.  HTML5 allows us to write our markup with a bunch of new tags to help SEO efforts for our clients.  Benefits such as nofollow tags for links, alternative text for images, the ability to more accurately describe the type of links on a site, and the improved speeds due to less plugin reliance allow us to make the most efficient, accessible, and clean sites on the web. The future is now at RepEquity!

Want to learn more? Check out these links:

Content May Be King But It Doesn’t Reign Alone

RepEquity | Content is King

Is content promotion a part of your brand’s SEO strategy?

This question may throw you off guard, but it’s absolutely essential to ask. When it comes to an effective and successful search engine optimization campaign, content is at the core—but not just any kind of content. The content created must be original and engaging, offering valuable information around a specific topic. When marketers publish unique content that strikes a chord with their audiences, it is much more likely to be shared and attract links from other websites.

There are various forms of content beyond the written word. Content consists of infographics, videos, images, contests, guides and more. Visual assets are great marketing tools because they appeal to the eye and can be easily shared on social media and personal websites. Marketers must decide what type of content will relay their message best and resonate most with their target audience.

However, great content means nothing if no one sees or reads it.

Read More

RepEquity Named to Washington Business Journal’s “Best Places to Work” 2015

RepEquity | WBJ Best Places to Work

Anyone here at RepEquity will tell you that May was a banner month. Our company grew with a few new hires and four summer interns, we strengthened our Google Analytics chops by getting ten team members certified, and we watched the Blue Angels perform with finesse in the sky over Annapolis.

Our most exciting news, though, is that the Washington Business Journal recently named us to its list of “Best Places to Work” in the Washington, DC area. RepEquity was ranked #8 in the metropolitan region, and we’re the highest ranked company within DC’s city limits.

The “Best Places to Work” list honors the area’s leading employers that go above and beyond the norm to foster an enjoyable and meaningful work environment for their employees. Companies are judged based on the results of an employee survey that evaluates everything from team effectiveness and trust in senior leaders, to individual contribution and feeling valued.

RepEquity’s accomplishment stems from our commitment to providing the best possible home away from home for all of our employees. In addition to encouraging idea sharing and collaboration across teams, we embrace more contemporary office perks, including a creative open floor plan, a fully stocked kitchen, a break room with ping pong and darts, and a drink cart that makes the rounds on many weekday afternoons.

“Our people make this a great company and great place to work. We are passionate about our clients’ success, driven to solve challenges, and unified in building a great company,” said Tripp Donnelly, RepEquity’s CEO and founder.

Learn more about RepEquity’s career opportunities.

RepEquity Tech Day: Code, Camaraderie, and Cocktails

On May 9th, the RepEquity Washington, DC offices hosted a Tech Day in collaboration with General Assembly DC and the JavaScript Guild. The event brought 30 – 40 people together for training sessions and collaborative work on personal projects.

RepEquity Tech Day Attendees

Tech Day began with introductions, both from sponsor organizations and the diverse array of participants. Attendees ranged from HTML and CSS beginners to programmers and developers with over 10 years in the field. Many different languages and skills were represented including front end, back end, designers, data engineers, and full stack developers.

Read More

Older Entries