We recently wrote about what your footer says about your business. You could say footers have been on our minds a lot. We’ve even asked ourselves, “What makes a good footer, great?” Here’s what we’ve come up with: a good footer must provide valuable information that allows people to navigate the site, engage and re-engage visitors with quality content, and give them a means to seek help.

It’s easy to design footers as an afterthought. Designers assume that visitors just blow past it anyway — and why shouldn’t they? People spend 20% of their attention below the fold. Yet those that scan to the bottom will eventually hit the footer and it’d be a disservice not to use it to your advantage.

A footer is where you can connect even more with your viewers. It’s an opportunity, where you can direct them to other parts of your site or where they can contact you directly. So next time you’re designing a site, ask yourself:

1. Does my footer provide high-value links that will help people easily navigate my site?
2. Does my footer engage visitors with quality content, and have hooks to your social media content channels to re-engage them later?
3. Does my footer build trust with my site’s visitors by provide a clear path to get help and contact us?

1. Provide the Most Valuable Links as a Means to Navigate Your Site

Remember it’s not quantity, it’s quality that search engines and your users care about. On the whole, footer links typically have the lowest click-through rate. However, that doesn’t mean we can ignore them. Keywords in the links still matter, just like elsewhere on the site. Constantly evaluate the click-through rate of each link in the footer. If there are any unnecessary or unused links, remove them from your footer. Always think about what your users want, not what search engines want. That mental model will help you narrow down links that provide a lot of navigational value to your users.

Strong hierarchy – Group high value links into categories

While we are on the topic of providing navigational value, grouping valuable links into easily identifiable categories will help users make sense of all the links in your footer. Your goal should be make the footer as usable and understandable as your header.

Read annotations on what’s working well in this footer

Quality presentation – Use plenty of white space and good typography

Once you’ve organized your links, think about how to make them legible given the relatively small size of footer links. Making people squint to read what’s in your footer is a surefire way to make people not use the footer for its intended navigational purpose. Using good typography and varying the size, weight and letter spacing improves the legibility of links in the footer.

In this example, the designer creates a strong visual rhythm by using italicized headings and contrasting light copy against a dark background.

People also need to be able to perceive the distinction between different groupings of links in your footer. Using plenty of white space helps spatially separate different pieces of content. It helps people easily identify boundaries.

Our new footer, which were about to release another iteration of, does a great job of spatially separating different pieces of content so users can easily comprehend who we are, what we do and how to reach out to us.

Before:

After:

2. Provide Valuable Content that Gives a Reason for People to Return

Be social – engage users in your social ecosystem

It’s very advantageous for designers to find ways to engage users with your social networks. Giving users one-click access to valuable information on your social feeds will provide a means to re-engage them even when they’re not on your site.

Engage with quality content – give users a sneak peek before they sign up

Your site and blog is a great place to engage viewers with quality content. We highlight the four pillars of our business, such as Expo, in our footer. Expo is a site we’ve dedicated to exhibiting feature stories, tutorials and classes on product design. Highlighting it in our footer gives our visitors a clear path to discover interesting and engaging content to read. By creating great content, we attract interest in our services, products, Foundation and educational efforts.

3. Build Trust Through Fanatical Customer Service

The old adage, a company is its people will always stand true. Treating your customers with the same level of respect as your employees, will keep them coming back for more than just your products. Think of strong brands like Zappos, Apple, Rackspace, and Warby Parker. These companies not only have strong brands, but their customers have a cult following for everything they do.

Take Zappos. When they ran out of a particular shoe, a customer service rep went to another shoe store to get a pair for a customer. Or Warby Parker, who shot videos of themselves answering customer questions and uploaded them to YouTube.

Link to contact page or form

The footer serves a functional role, as well as a human one. Helping people navigate and find relevant content is important. Humanize your website by providing a clear path for people to get in touch with you.

Live chat or support number

Offering fanatical customer support begins by prominently showing your phone number. If people have a question about your products or service, they can talk to a sales representative or talk to support if they have questions.

Hours of operation

Don’t make people guess when you’re going to be available. Reinforce that they can reach out anytime for assistance. This will build your brand as a customer service driven company.

Functional Yet Infectiously Engaging

We often overlook the importance of a footer. But as designers we shouldn’t. We should ask ourselves how we can design the footer to meet and exceed your customers’ expectations. Help them quickly and effectively navigate your site, engage them with interesting content to spark their interest in what we have to offer, and provide a clear path to get help.

Source: Zurb and Responsive Design  

The post 3 Techniques to Make a Good Footer Great appeared first on Moby Interactive Media.

Since the release of Foundation 4, we’ve had people asking us to update the Foundation 3 stencils to the latest version of our framework. Well, we heard you and now we present the new and improved stencil sets, now Foundation 4 ready!

When we created the stencil sets for the first time, we knew it would help us produce wireframes and mock-ups faster. This is one of the reasons we decided to update the stencils to the latest version of our framework. We also want to make sure that everyone using Foundation 4 is also able to build faster and better layouts.

What’s New in This Version of the Stencils, You Ask?

Well, we added tons of goodness in this new version of the stencils!

You can find all of the elements from the previous version of the stencils plus a whole bunch of new goodies that you can use to create your awesome wireframes and mockups for your projects.

Checkout some of the new hotness we included:

• Switch
• Custom Forms
• V-Cards
• Progress Bars
• Pricing Tables
• Sections
• Thumbnails & Placeholders

Pretty cool, right!? Ready to start creating great wireframes that you can use on your projects that look awesome and saves you tons of time? Check the OmniGraffle and .PDF stencils on our playground page, download ‘em and wireframe away!

Get the Stencils Today!

Source: Zurb and Responsive Design  

The post Stencils for Foundation 4 are Now Here! appeared first on Moby Interactive Media.

  

The post McDonald’s Serves Up a Feast of Characters for Fast-Food Photog appeared first on Moby Interactive Media.

Quantum computing took a giant leap forward on the world stage today as NASA and Google, in partnership with a consortium of universities, launched an initiative to investigate how the technology might lead to breakthroughs in artificial intelligence.

The new Quantum Artificial Intelligence Lab will employ what may be the most advanced commercially available quantum computer, the D-Wave Two, which a recent study confirmed was much faster than conventional machines at defeating specific problems. The machine will be installed at the NASA Advanced Supercomputing Facility at the Ames Research Center in Silicon Valley and is expected to be available for government, industrial, and university research later this year. Read more…

More about Google, Nasa, Science, Artificial Intelligence, and Tech

Source: Smashing Magazine  

The post Google and NASA Launch Quantum Computing AI Lab appeared first on Moby Interactive Media.

As I wrapped up the last interview with Intel’s outgoing CEO, Paul Otellini, for my feature on his legacy, he strode over to the whiteboard in the conference room. As he began to draw, he joked that he was showing me the “history of the computer industry in one chart.” (I’m not sure if he knew ‘in one chart‘ posts are one of our specialties.)

He’d shown this chart to Intel’s management in 2005, two years before the iPhone, and long before smartphone ubiquity. And yet it describes the movement of computing devices from expensive machines ($10,000) to very cheap machine ($100). It was a call for Intel to understand that it would have to do very different things to succeed in a $100 computer world than in a $1,000 computer world. Here’s how I described it in the story:
Read more…

More about Charts, Intel, History, Computers, and Tech

Source: Smashing Magazine  

The post Intel CEO Draws 'History of the Computer Industry' in 1 Chart appeared first on Moby Interactive Media.

  

The post Photos of Mangled Cars Find Beauty in the Wreckage appeared first on Moby Interactive Media.

[Editor's note: The following is a guest post from Igor Faletski, CEO of Mobify, which provides tools for adapting web sites for smartphones and tablets.]

You’ve probably heard people say we’re living in a “post-PC world.” What does that mean for web developers? It means that 30% to 50% of your website’s traffic now comes from mobile devices. It means that soon, desktop and laptop users will be in a minority on the web.

How do we deal with this tectonic shift in user behavior? We’ve moved beyond the era of m-dot or t-dot hacks, into one where responsive and adaptive design techniques rule the day — what the W3C calls a One Web approach. The key part of the W3C’s recommendation is that “One Web means making, as far as is reasonable, the same information and services available to users irrespective of the device they are using.”

For developers that means that taking a One Web approach ensures that not only does your site work on the smartphones and tablets of today, but it can be future-proofed for the unimagined screens of tomorrow.

There are currently three popular approaches to developing a One Web site: using a responsive design; client-side adaptive designs; and server-side adaptive designs.

One is not better or worse than the other; each has its own strengths and weaknesses and the wise web developer will consider the benefits and drawbacks of each before picking the one that works for their next project.

Responsive Web Design

Responsive web design is the most common One Web approach. The approach uses CSS media queries to modify the presentation of a website based on the size of the device display. The number of responsive sites is rapidly increasing, from the Boston Globe to Disney to Indochino.

A key advantage of this approach is that designers can use a single template for all devices, and just use CSS to determine how content is rendered on different screen sizes. Plus, those designers can still work in HTML and CSS, technologies they’re already familiar with. Additionally, there’s a growing number of responsive-friendly, open-source toolkits like Bootstrap or Foundation which help simplify the process of building responsive sites.

On the other hand, there are few shortcuts to a sound responsive design. To go responsive, organizations often have to undertake a complete site rebuild.

The design and testing phase can be quite fussy, as it can be difficult to customize the user experience for every possible device or context. We’ve all seen responsive site layouts that look like a bunch of puzzle pieces that don’t quite fit together. Responsive web design works best in combination with a mobile-first approach, where the mobile use case is prioritized during development. Progressive enhancement is then used to address tablet and desktop use cases.

Performance can also be a bugbear for responsive sites. At Mobify, we recently completed an analysis of 15 popular responsive e-commerce sites. Among these sites, the home pages loaded an average of 87 resources and 1.9 MB of data. Some responsive pages were as big as 15MB.

The numbers are that high because a responsive approach covers all devices. Your user is only using one device, but they have to wait for all of the page elements and resources to load before they can use it. Put simply, performance affects your bottom line. On smartphones, the conversion rate drops by an extra 3.5 percent when users have to wait just one second. By the three second mark, 57 percent of users will have left your site completely.

While responsive design is fast becoming the de facto standard, it also creates new challenges for online businesses, including how to handle images, how to optimize mobile performance and often means sites need to be rebuilt from the ground up with a mobile first approach.

Client-Side Adaptive

Adaptive design builds on the principles of responsive design to deliver user experiences that are targeted at specific devices and contexts. It uses JavaScript to enrich websites with advanced functionality and customization. For example, adaptive websites deliver Retina-quality images only to Retina displays (such as the new iPad) while standard-definition displays receive lower-quality images.

There are two approaches to adaptive design — one where the adaptations occur on the client side, in the user’s browser, and another where the web server does the heavy lifting of detecting various devices and loading the correct template. Examples of client-side adaptive sites include Threadless and ideeli. One of the strengths of the adaptive templating approach is the ability to reuse one set of HTML and JavaScript across devices, simplifying change management and testing.

A client-side adaptive approach means you don’t have to rebuild your site from the ground up. Instead you can build on existing content while still delivering a mobile-responsive layout. For expert developers, this approach also enables you to specifically target particular devices or screen resolutions. For example, for many of Mobify’s online fashion retail clients, 95% of their mobile traffic comes from iPhones. Client-side adaptive means they can optimize specifically for Apple smartphones.

Unlike responsive design, adaptive templates ensure that only the required resources are loaded by the client’s device. Because device and feature detection is shifted to the mobile device itself, CDN networks like Akamai and Edgecast can use most of their caching functionality without disrupting the user experience.

The client-side adaptive approach has a higher barrier to entry than responsive design. Developers need to have a solid grasp of JavaScript to use this technique. It also depends on a site’s existing templates as the foundation. Finally, because the client-side adaptations are a kind of layer on top of your existing code base, you need to maintain them as your site as a whole evolves.

Server-Side Adaptive

We can achieve the server-side adaptive approach in a variety of ways, through server-side plugins and custom user agent detection. Sites that use server-side adaptive include Etsy, One Kings Lane and OnlineShoes.com.

Why choose server-side adaptive? It typically offers distinct templates for each devices, enabling more customization, and it keeps device-detection logic on the server, enabling smaller mobile pages that load faster. Additionally, there are numerous server-side plugins available for common CMSs and eCommerce systems such as Magneto.

This approach isn’t for the faint of heart–it typically requires significant changes to your back-end systems, which can result in a lengthy (and costly) implementation. The requirement to manage multiple templates raises ongoing maintenance costs. Finally, this approach can encounter performance issues when servers are under heavy load. When mobile user agent detection is performed on the server, a lot of common caching mechanisms deployed by CDNs like Akamai need to be turned off. This can result in a slower user experience for mobile and desktop visitors.

Of course, many companies are still wrestling with the basics of responsive, and they’re not ready to confront the more sophisticated flavors of adaptive. Increasingly competition and mobile traffic, however, will drive more and more organizations to kick the tires on all three approaches, and pick the one that works best for their users.

Source: Webmonkey – Website Design Tutorial  

The post The Two Flavors of a ‘One Web’ Approach: Responsive vs. Adaptive appeared first on Moby Interactive Media.

As you might know, Foundation 4 doesn’t support Internet Explorer 8. With IE8 slipping in usage, we thought it was the right time to let it go. But one person couldn’t. Too much of site’s traffic used IE8 to just let go. After taking our Foundation class, he came up with a jury-rig that combines Foundation 4 with IE8-friendly Foundation 3.

The setup

The first step involves setting telling IE which version of Foundation to choose —3 or 4 — based on Explorer’s own version. Below is what he came up with, which looks fairly solid.

In the HTML head:

And after the close body tag:

The conditionals determine which version of Foundation IE loads. IE8 and older will grab Foundation 3 code. Others, Foundation 4.

The grid

The syntax for Foundation 4’s grid, which accounts for mobile and widescreen devices, uses two prefixes: small-# and large-#. Foundation 3, though, uses spelled out English words: one, six, twelve etc. That means the two systems can intermingle without interfering:

Having to manage three sets of grids isn’t ideal, but if you use Foundation 4 and need to support older browsers, this unofficial workaround may do the trick.

Source: Zurb and Responsive Design  

The post Getting Foundation and IE8 to Play Nice appeared first on Moby Interactive Media.

  

The post Jill's SEO Tools and Extensions appeared first on Moby Interactive Media.

  

The post High Rankings Question of the Week appeared first on Moby Interactive Media.