Responsive Logo Design

The modern logo has to work harder than ever before. In the past, a company logo was perhaps intended simply for a shop sign and printed in local newspaper adverts. Today’s logos have to work with a growing plethora of smart devices with varying screen sizes and resolutions, displaying responsive websites.

Often logos end up suffering within responsive website design. Many have not been designed with responsive frameworks and variable sizes in mind, and are just resized to fit whatever available space has been provided for them or not.

However, there are brands that do well within the responsive web space. These are brands and logos that have been designed carefully, with consideration as to how they will display within changing formats. The very best logos are simple and flexible, with varying formats and layout options so that when a site is optimized for a device, the brand is also optimized to the space allocated for it.

Let's see why simple, flexible and versatile logo design has become so important in today's landscape. Industry-leading, born-in-the-cloud brands such as Twitter, Facebook, Spotify and Google are refining and simplifying their brands owing to responsive web design and the growing impact of the mobile device market. We can consider their solutions when thinking about our own brands, and how to optimize our logos to thrive within responsive web design.

A Simple Fact

The human brain remembers simple forms far more easily than complex ones. One of the most common factors that separates a good logo from a bad logo is the element of simplicity. Quality, memorable, successful brands are always simple. 

This concept is nothing new and was known long before responsive web design started pushing the envelope of simplicity. The simplicity of this design allows these logos to work well at any size on practically anything. Perfect for responsive web design, despite being made decades prior to the availability of such technology.

However, the original branding mistakes of iconic logos like Apple is a common recurring issue for most businesses. Small startup companies typically have a limited budget. To avoid costs they mistakenly turn to the wrong person for a logo, someone who is not a professional logo designer. Someone who feels compelled to add things to create something.

An example of simple and complex logos

Consider the Great Lakes Golf logo above on the left. Somebody spent a lot of time adding things to that design. The result is quite busy and it’s not going to scale down well at all; whereas the Skype logo on the right is simple, clean and memorable. It will work on anything and is scalable to small areas on mobile devices.

The logos as viewed on mobile devices

At full width you can identify the ball sport elements on the Great Lakes Golf logo. But scale down 50% and it’s barely readable. On the right, the Skype logo scales down beautifully. And if space gets too small, the Skype brand is flexible enough to drop the wordmark altogether.

This simple comparison shows how simple, clean and versatile design wins over more complex arrangements. The Great Lakes Golf logo probably suited its original intention just fine. However, in the context of a responsive website, the inability to scale cleanly becomes very apparent.

The Tech Industry Response

FACEBOOK

Web-savvy brands are simplifying their logos to suit responsive mobile web design. Facebook removed the faint blue line from the bottom of its icon’s ‘f’ in 2013. And in July 2015 it simplified its wordmark by removing the ascender on the lowercase ‘a’, swapping it out for a simpler, more rounded version.

Overall, the other letters have also been slimmed and refined. The changes might seem insignificant but the reasoning is not. Facebook is changing its brand as a direct response to viewing on mobile devices.

“This is actually a huge change and it’s much more than the ‘a’. It’s driven by mobile.”

– Howard Belk, co-chief executive and chief creative officer of branding firm Siegel+Gale.

GOOGLE

Another case in point is Google - Google recently unveiled its latest logo update, their simplest yet. The Google logo has been evolving to new levels of simplicity since it first graced our browsers in the 90s.

In recent years it would have quickly become apparent that their thin, serif type was not going to scale nicely within responsive web design. So, like other tech brands, they’ve simplified to a sans serif typeface with a flat design and a friendly and distinctive ‘G’ icon.

Google's recent logo changes for the responsive world

"Once upon a time, Google was one destination that you reached from one device: a desktop PC. These days, people interact with Google products across many different platforms, apps and devices...

Today we’re introducing a new logo and identity family that reflects this reality and shows you when the Google magic is working for you, even on the tiniest screens."

– Posted on the official Google Blog by Tamar Yehoshua, VP, Product Management.

The Trend - No Words

When Prince changed his name to a symbol in 1993 most of us thought he was nuts. But perhaps he was just ahead of his time. An increasing number of companies are refining the simplicity of their logo, moving towards a flat, simple symbol design with no wordmark at all.

Logos for Twitter, Nike, Apple, Starbucks and Pinterest.

Of course, these are all well-known brands that can get away with reducing their logos to only a simple icon. Not everyone can or should do this. However, this is another example of the effect responsive web design is having on brands. Certainly, using an icon graphic as part of an identity increases the flexibility of the brand for use on mobile devices.

Moving Forward

Does this mean all logos are going to end up as simple flat icons or flat sans serif typefaces? I don’t think so. However, there is little denying the influence responsive web design is having on branding and it will be interesting to see how far this goes.

The historically sacred view that a company’s logo is a rigid form that must never change is giving way to a new kind of branding freedom, where logos respond and vary. From horizontal formats to vertically stacked, from wordmarks to simple icons, even changing colours to suit dark and light screen backgrounds.

One might argue that looking at the branding direction of the tech industry isn’t relevant to, say, a law firm or a restaurant. However, all industries are going to eventually end up within responsive web design one way or another and become affected by the rise of mobile devices. Some companies may wonder why this doesn’t seem to work as well for their brand as it does for Twitter or Pinterest.

Those who understand the design principle of simplicity and embrace this flexible approach to their branding will respond best within this new medium. At the very least, how a brand appears when scaled down on a mobile device will become a staple test for any logo designer or branding project.

Logo designers ought to help educate clients to embrace this new flexible approach, where logos can be optimized within responsive web design while maintaining brand consistency. Otherwise we will witness more web builders taking it on themselves to alter a problematic logo on the fly to suit their individual project. Not an ideal solution for anyone.

Reducing Abandoned Shopping Carts In E-Commerce

In March 2014, the Baymard Institute, a web research company based in the UK, reported that 67.91% of online shopping carts are abandoned. An abandonment means that a customer has visited a website, browsed around, added one or more products to their cart and then left without completing their purchase. A month later in April 2014, Econsultancy stated that global retailers are losing $3 trillion (USD) in sales every year from abandoned carts.



Clearly, reducing the number of abandoned carts would lead to higher store revenue — the goal of every online retailer. The question then becomes how can we, as designers and developers, help convert these “warm leads” into paying customers for our clients?

Before Cart Abandonment

Let’s begin by looking at recognized improvements we can make to an online store to reduce the number of “before cart” abandonments. These improvements focus on changes that aid the customer’s experience prior to reaching the cart and checkout process, and they include the following:

• Show images of products.
  This reinforces what the customer is buying, especially on the cart page.
• Display security logos and compliance information.
  This can allay fears related to credit-card and payment security.
• Display contact details.
  Showing offline contact details (including a phone number and mailing address) in addition to an email address adds credibility to the website.
• Make editing the cart easier.
  Make it as simple as possible for customers to change their order prior to checking out.
• Offer alternative payment methods.
  Let people check out with their preferred method of payment (such as PayPal and American Express, in addition to Visa and MasterCard).
• Offer support.
  Providing a telephone number and/or online chat functionality on the website and, in particular, on the checkout page will give shoppers confidence and ease any concerns they might have.
• Don’t require registration.
  This one resonates with me personally. I often click away from websites that require lengthy registration forms to be filled out. By allowing customers to “just” check out, friction is reduced.
• Offer free shipping.
  While merchants might include shipping costs in the price, “free shipping” is nevertheless an added enticement to buy.
• Be transparent about shipping costs and time.
  Larger than expected shipping costs and unpublished lead times will add unexpected costs and frustration.
• Show testimonials.
  Showcasing reviews from happy customers will alleviate concerns any people might have about your service.
• Offer price guarantees and refunds.
  Offering a price guarantee gives shoppers the confidence that they have found the best deal. Additionally, a clear refund policy will add peace of mind.
• Optimize for mobile.
  Econsultancy reports that sales from mobile devices increased by 63% in 2013. This represents a real business case to move to a “responsive” approach.
• Display product information.
  Customers shouldn’t have to dig around a website to get the information they need. Complex navigation and/or a lack of product information make for a frustrating experience.

Unfortunately, even if you follow all of these recommendations, the reality is that customers will still abandon their carts — whether through frustration, bad design or any other reason they see fit.

After Cart Abandonment

The second approach is to look at things we can do once a cart has been abandoned. One tactic is to email the customer with a personalized message and a link to a pre-populated cart containing the items they had selected. This is known as an “abandoned cart email.”

The concept is pretty simple. At the right time, a customizable email is sent, complete with a personalized message and a link to the customer’s abandoned cart. Of course, this approach assumes that the customer has submitted their email address — effectively, they’ve done everything but paid. Abandoned cart emails represent one last attempt by the merchant to convince the buyer to check out.

In September 2013, Econsultancy outlined how an online cookie retailer recaptured 29% of its abandoned shopping carts via email. This is a huge figure and one we might naturally be skeptical of.

To get a more realistic perspective, I asked my colleagues at Shopify to share some of their data on this, and they kindly agreed. Shopify introduced “abandoned cart recovery” (ACR) in mid-September 2013 (just over a year ago at the time of writing). Here’s a summary of its effectiveness:

• In the 12 months since launching automatic ACR, $12.9 million have been recovered through ACR emails in Shopify.
• 4,085,592 emails were sent during this period, of which 147,021 carts were completed as a result. This represents a 3.6% recovery rate.
• Shop owners may choose to send an email 6 or 24 hours after abandonment. Between the two, 6-hour emails convert much better: a 4.1% recovery rate for 6 hours versus 3% for 24 hours.

It’s worth noting that the 3.6% recovery rate is from Shopify’s ACR emails. Many merchants use third-party apps instead of Shopify’s native feature. Given that Shopify is unable to collect data on these services, the number of emails sent and the percentage of recovered carts may well be higher.

Given the statistics, abandoned cart emails are clearly an important part of an online retailer’s marketing strategy. Luckily, most leading e-commerce platforms enable merchants to send custom emails, either in plain text or HTML. Knowing how to implement these notifications is a useful skill if you are designing for e-commerce, and they represent added value to your services.

Conclusion

While there are many tactics to persuade customers to buy, inevitably some people will get to the payment screen and decide not to continue. Any tactic that helps to seal the deal is certainly worth considering, and given the small amount of work involved in implementing an email to recover abandoned carts, it’s a great place to start. Designers and developers are in a powerful position to help their clients increase their revenue, and being armed with tactics such as the ones outlined in this article will hopefully enable them to offer a wider range of services.

Flat And Thin Are In

In the last several years, we’ve seen a rapid shift in software and app interface design, from 3-D and skeuomorphic to flat and minimal. Although this trend has become nearly ubiquitous, let’s take a moment to consider how we got here and what influence it’s having on interface design as a whole.

What Happened?

So, how did the collective consciousness swing from a love of all things textured, beveled and drop-shadowed to a desire for flat colors and simple typography? Many factors have fuelled this transition, but here are a few that stand out.

INFORMATION OVERLOAD

As a constantly connected culture, we deal with a nonstop flow of information, some of it important and relevant, most of it not. We are constantly evaluating, filtering and, of course, creating content, and it all gets pretty exhausting. In addition, much of our content consumption has moved to devices with small screens, thus exacerbating that feeling of overload. Becoming overwhelmed is all too easy, and a reduction of clutter in a user interface (UI) can create a little visual zen.

Free of clutter: Geckoboard‘s visualisations are designed to make key data easy to interpret at a glance.

SIMPLICITY IS GOLDEN

In a similar trend, a lot of disruptive Web apps and services are offering highly focused tools with extremely limited feature sets. Whereas traditional software developers tend to load their products with a glut of features to justify the high price tags, this shift towards focused micro-apps favors simplicity over feature set. Simpler apps mean simpler interfaces.

Beautiful and minimal: The Blue weather app by Oak.

CONTENT IS KING, AGAIN

As so often happens when new devices and technologies enter the market, we become fascinated by what they can do and how we can advance interactivity. This interface frenzy is usually followed by a return to a focus on content. Media consumption, whether of text, audio or video, is probably the activity we engage in most on our devices, and for that use case, we just want the interface to get out of the way.

TECHNOLOGICAL LITERACY

As smartphone and tablet adoption has rapidly penetrated all user demographics, concern about the obviousness of controls has reduced. Whereas we once feared that users might miss a button if it didn’t pop off the screen, we are now willing to explore subtler interactions. Windows 8 and Chrome for Android even support touch commands that start off screen, without any visual indicator.

Fitbit’s dashboard is a bright, bold, and easy approachable visual identity.

TECHNOLOGY’S INFLUENCE

Most software will be limited by the platform on which it runs. Screen dimensions and pixel density are the confining factors of hardware. A minimal interface demands a very limited design palette, which means that every element needs to sing. Typographic scale and font weight will largely determine both the aesthetics and usability of a flat design.

If your target devices can’t handle that level of nuance, you’re out of luck. As screen size and pixel density continue to increase on mobile devices, thinner and smaller type can be presented with better clarity. Of course, support for @font-face has also boosted the appeal of minimal typographic-focused designs.

Live sales monitoring with Wallmob: keeping track of the figures from any device that has a browser.

RESPONSIVE DESIGN

With the proliferation of connected devices of various dimensions, UIs have had to become more fluid, and the responsive design movement has responded. While responsive design does not call for a particular aesthetic, one could certainly argue that flat UIs lend themselves to it more easily than many other styles. The other advantage of minimal design is the reduction in page weight and loading time.

To the point and weightless: OnSite.

Best Practices

OK, enough with the theory. Let’s get down to some practical considerations. Creating an effective minimal design is surprisingly challenging. As you strip away common UI tricks (drop shadows, bevels, textures and the like), you quickly realize how important the few remaining elements become. While the following tips are mostly universally applicable, they are especially relevant to flat UIs.

As with any project, the first step is to ensure that your chosen style makes sense. Before diving into a flat design, make sure it aligns with your target users’ sensibilities and your target platform, devices and application type. Following a trend is pointless if it’s the wrong solution for your project.

Here are some ideas to keep in mind when aiming for simplicity:

• The Process you follow is pretty important, no matter what style you are adopting. 
• The Grid plays a crucial role in so much of interface design, and no exception here. 
• The Colors are obviously always a key component of visual design and with minimal interfaces, it is even more critical.
• The Typography is the hero when it comes to flat content-driven websites, so don’t be afraid to experiment.
• Intuitive Interaction in a flat UI is crucial and indicating that an element is interactive can be tricky. 

Wrapping Up

I don’t believe in hard and fast rules in design. Seeing designers so heavily invested in creating extremely clean and simple user interfaces is pretty awesome. Does exploring flat design mean using absolutely no gradients or shadows? Of course not. In fact, some of the most intriguing work I’ve seen recently balances flatness and dimension by presenting content intelligently while keeping the interaction intuitive.

In this highly connected, information-rich and feature-packed digital world we live in, minimal design’s widespread resurgence is refreshing to witness. It is by no means the right solution for everything (no style is), but when applied thoughtfully and appropriately, it makes for a highly usable and enjoyable digital experience.