Design Trends: Minimalism in the Age of Mobile

The more stuff in it, the busier the work of art, the worse it is. More is less. Less is more.
— Ad Reinhardt, fine artist (1913 – 1967)

No Kid Hungry Sample

These samples illustrate minimalism in web design for nonprofits. There is a definite theme in three of these samples, in that they all feature large, mobile-responsive slideshows in the masthead and little else in the way of design embellishments.

As the number of mobile web users continues to boom, many brands are finding increased success with a more minimalistic design approach. Because such layouts are easier for the eye to scan, load quicker, and render with more fluidity and better reactivity on a wide range of displays, and within a limited amount of visual space, minimalism is becoming the latest trend in many online designs.

Minimalism is a long-established technique used by graphic designers, fine artists, architects, and industrial designers. The philosophy behind minimalism is that by reducing a subject down to its core, stripping it down to its most necessary elements, a designer (or artist, architect, etc.) maximizes point of view and creates visual and emotional clarity. And although it’s not a new idea, of late there’s been a major resurgence of its use in graphic design, especially online. Major brands, such as Starbucks, Coca-Cola, and Google — long recognized for setting the standards for brand design — have been steadily paring their visuals down to the barest of bones. And they’re not alone, more and more brands are turning toward minimalism in their overall marketing — especially in regards to their online presence. We’re seeing the decline of heavy-handed, visually weighty layouts, laid thick with the skeuomorphism (illusionary textures and lighting effects) that’s become fashionable over the last few years. In their place are layouts featuring a cleaner, more metropolitan look that makes use of subtle gradients, limited color palettes, sharp edges, clean and crisp font faces, and bold use of white space.

World Wildlife Fund Sample

Because a minimalist design removes any extraneous clutter that can potentially distract or confuse a user, they can be moved to act — and act quickly — with just a glance. And mobile users, in particular, can do so without having to wrestle with a non-responsive page or get hung up on one that renders slowly. Users are less likely to abandon a page if they don’t have to sift through too much visual input or do a lot of scrolling to find what they need. And they are more likely to act because call-to-action renders properly, and in plain view, on their mobile device.

There are other benefits to using a minimalist design, besides their tendency to display well in both the mobile and desktop environments. Minimalism also helps to keep a brand consistent. In order for a brand to be taken seriously and even to be remembered, it must remain uniform. When a user goes from an email to a landing page to a donation or checkout page, having a thoroughly consistent design helps a user feel confident and makes a brand look more professional and, thus, taken more seriously. By removing clutter and stripping an online brand of anything that might be disorienting or extraneous, a core brand shines through and stays steady and stable in a perpetually fluid digital environment.

Charity Water Sample

Unfortunately, many people think that minimalism must mean boring or shallow. Conversely, if approached correctly, minimalism often creates some of the most beautiful and eloquent (as well as functional) visual results. Think of minimalist design as a sort of Zen rock garden; peaceful and elegant, a harmonious place to reflect and relax the senses. And, in our increasingly busy and distracting lives, how could that kind of tranquility NOT be a beautiful thing, and powerful in its own right?

As mobile web use becomes more common, we are definitely going to see the trend toward minimalism grow and evolve. The growing need for web pages to be fully responsive to a wide variety of screen sizes, to cut through the clutter of the increasingly complex digital sphere, and to inspire with potentially limited visual space will only continue encourage simpler, more tranquil, and more elegant designs.

Less is definitely more and less is definitely better in the current mobile-ready environment.

Further reading:

Minimalist Design – Just Creative

White Space and Simplicity: An Overview – Smashing Magazine

Why Brands are Leaning Towards Minimalism –Webdesigner Depot

Keep It Simple, Stupid –Digital Web

Anthony Blair Borders is the senior web designer at Donordigital, the online fundraising, marketing, and advertising company. Contact: anthony@donordigital.com or (510) 473-0368.

Best Practices for Mobile-Friendly Email Design

When designing for mobile optimization, it is important for the design to be easily resized for various widths from desktop width (about 640 pixels across) to mobile width (about 320 pixels across). Thus, designs need to be as fluid and flexible as possible. Below are some standards and practices we have found that work best for rendering emails on both mobile screens and desktop monitors.

  • A mobile optimized layout, because of its limited width, is best reduced to a single column. This means that the traditional desktop email layout (which often features large, photographic images and multiple sidebars) renders horribly on a mobile device, often with elements and multiple columns rendering as a confusing jumble. Additionally, the mobile browser often resizes photographic images, creating a loss of image quality and text legibility.
  • Mastheads need to be as clean, simple, and straightfoward as possible for resizing. This is best achieved by having a single logo or simple image, less than 300 pixels wide, be the sole occupant for the space.  Or, alternately (but not recommended) the logo can be placed in tandem with a short “live-text” headline using a “universal” font (such as Arial, Helvetica, Verdana, Times, Georgia, or Courier).
  • Sidebars, if absolutely necessary, also need to be as clean and as simple as possible. Because we need the layout to be as fluid as possible, a solid background color and/or a single, solid, hairline border are strongly recommended over gradient or image backgrounds. The sidebar should be less than 280 pixels wide, so that it rests comfortably within the smaller 320 pixel mobile width. Keeping your sidebar on the slim side also means that your sidebar image won’t need to be resized and suffer from a subsequent loss of quality. Sidebars ideally stack above the main copy on mobile screens and, in a sense, become a sort of masthead with a headline and call-to-action up front. Because of this, it is recommended that sidebars be kept copy light and as succinct as possible.
  • Borders are often used to wrap around entire email messages. In a mobile-optimized environment, these work best as a thin hairline of a single solid color (again, avoiding gradients or images).
  • The rounded corners often seen in web and email design elements are not recommended because of cross-browser incompatibility and errors in rendering in the slimmer, mobile environments.

In conclusion, because of the wide array of monitor and screen sizes in both desktop and mobile environments, your email templates need to be simple and flexible. Because mobile and desktop emails are not separate entities, but rather one email that adapts differently when rendered on different devices, your templates need to have simple mastheads that fit to any size screen, a single, slim sidebar that can stack above or below the main body copy, and as few extraneous design embellishments as possible.

This all said, simple does not mean designs can’t be attractive and attention grabbing. In a world where we are increasingly bombarded with information and visual stimuli, designs that are simple and elegant tend to cut through the clutter much more effectively than designs that are ornate or busy. For an email message to be successful (both in and out of the mobile environment), it is better to keep your layouts simple and elegant than to loose an audience due to clutter or poor browser rendering.

Examples

Mobile-Friendly Desktop Example with SidebarMobile-Friendly Mobile Example with Sidebar
Click thumbnails to zoom

Anthony Blair Borders is the senior web designer at Donordigital, the online fundraising, marketing, and advertising company. Contact: anthony@donordigital.com or (510) 473-0368.