Monthly Archives: March 2017

How to Manage the White Space in Mobile Responsive Layout

White space is a crucial design tool whether you realize it or not. Many designers adjust page elements until they “look good”. Most often this leads to a natural balance of white space between page sections just from gut instinct.

But when you get into responsive design this subject gets a bit tricky. White space needs to be adjusted at different breakpoints to create a seamless experience for all users.

This can be done with many different techniques and I’d like to cover the best ones here. All modern websites should be fully responsive so it’s no question that responsive design is important. The only question is how to handle white space so that all users have an awesome experience.

Rearranging The Navigation

Naturally the first thing every designer considers is how to handle the navigation menu.

If a site has dozens of links you really don’t have many options. You could use a select input field or a hidden menu with the three-bar hamburger icon.

Here’s an example where the top navigation doesn’t even resize. Once your browser window hits a certain breakpoint the links automatically hide into a menu and get replaced with a hamburger icon.

But pay attention to the extra whitespace added between each link. This is a common technique and generally a great idea to space out links for finger taps on mobile.

Most websites rearrange their navigation a few times before finally settling on the three-bar icon. For example Dorigati uses a full-width navigation menu which eventually breaks down into a grid system.

Then at the 960px breakpoint the entire layout shifts from a top header to a sidebar navigation. The logo and links all rearrange themselves into the new sidebar.

Once you go even smaller the nav links eventually move back to the top with a hidden hamburger menu. It’s a very complex solution but it provides a more natural experience for different browser resolutions.

And remember if the navigation is small enough then you won’t even need the hamburger. It’s generally a good idea to avoid hidden menus when possible, so a solution like Regent College would be perfect for sites with smaller menus.

All links are still visible but they get rearranged into different widths. Font sizes get reduced and eventually the links are crammed together.

As long as visitors can still browse the site and tap on the right links then you can squeeze them together as much as needed.

Shift From Horizontal To Vertical

White space on a desktop layout moves across and down the page.

But when you’re dealing with smaller devices you should be more concerned with vertical space. This defines the pace of content and it’s the natural “flow” for smartphones & tablets with resolutions that are longer than wider.

On Jisc you’ll notice there are many horizontally-oriented page sections. Once you resize the page all these little block elements drop beneath each other.

One page section would ideally span the entire width of a 320px smartphone screen. But the responsive layout needs more vertical negative space between elements to create that vertical flow.

The idea of negative space is powerful in web design. You need that space to break up sections of the page and to let blocks of text breathe. Nobody enjoys reading a wall of text.

This is true with corporate websites and with blogs like Mashable. When you’re on a desktop the entire homepage spans 3-4 columns of content.

But responsive users need to get a simplified version of one really long column.

All the other columns can either drop beneath the main column, or they can be hidden from the responsive page. Each site has a different solution.

But when you’re shifting white space for mobile you always need to think vertically.

The horizontal should be controlled by one element at a time. You should instead focus on how much space you need between elements and between other sections of the page.

Font Sizes & Spacing

Some designs can get by with the same traditional font sizes. But if you have oversized headers or tiny paragraph text then you’ll need to adjust sizes at specific breakpoints.

There’s a lot you can do with responsive typography beyond the typical sizing properties. You can also adjust line height, letter spacing, color, and the margins between two blocks of text.

The Next Web’s desktop layout has a lot of white space between the header and the top navigation. But their mobile responsive layout shortens this space dramatically.

Meanwhile the header text is also reduced in size while spacing out the paragraphs a bit.

You’ll have to trust your gut when it comes to mobile typography. Try to feel out what would look best and try to achieve that.

Also consider how your site behaves on mobile screens. Agra Culture has a series of image blocks that display text on hover.

But since mobile users can’t hover the text is automatically displayed past a certain breakpoint. It seems like a small consideration but it makes a big impact in the mobile experience.

White space increases between page sections giving the illusion of crafty content areas.

This same effect can be seen on Cartoon Network’s page where they have a top navigation with icons.

Past a certain breakpoint the CN logo shrinks down along with the main links. You’ll notice links that had icons will shrink down and completely lose the icons on smaller screens.

It is true that graphics can improve navigation. But there’s only so much space on mobile and you have to be judicious.

When restyling type always consider horizontal and vertical space issues. Mobile users deserve a workable solution even if the page has to be lengthened considerably just to hold everything.

Restyling Images

One other consideration is the use of widescreen images. Since most monitors are widescreen the web has adapted to include images that are typically wider than taller.

Mobile responsive sites either have to shrink these images down or rearrange them to fit properly.

UPP Broadgate Park has an interesting solution where the top header image resizes to fit vertically. The image slideshow is built to fit the full width of the screen, but any screen smaller than 500px gets a lengthened image.

This adds a tremendous amount of vertical space into the page which can be good if you’re looking for that.

I’ll admit this is a tough strategy to pull off. You need to know your image sizes and the focal points of each image to properly resize them.

But if you’re willing to put in the effort it will ultimately lead to a greater experience.

In other scenarios you might choose to hide longer images and completely remove them from the mobile experience. The Golden Isles website uses this technique on the top header slideshow.

All other images on the page get rearranged into single columns with added white space. But since the carousel doesn’t add much to the user experience it can be hidden for mobile users.

Consider how you want to handle images and how much space you need between them. A thumbnail gallery might be closer together than a slideshow or a featured stock photo.

Each scenario is different so be willing to try different strategies to see what works best.

Wrapping Up

White space is a crucial aspect of web design and it plays a big role in content flow for responsive websites. Most designers can estimate white space values by eye, but it helps to understand why you’re adding whitespace into a design.

If you think of any related trends or tips for crafting responsive white space feel free to drop a comment below.

Use of Web Design For Billing Forms

Each ecommerce site has its own checkout flow moving the user from a shopping cart to the final purchase. This differs based on what the user is buying and their intentions, but finalizing payment is always the toughest part.

Your billing fields need to really keep visitors engaged and encourage them to complete the checkout process. I’d like to share some usability tips you can follow to improve your billing form designs and increase user checkout conversions.

Clarify Intent

Your goal is to design forms that encourage users to buy. So you want to make this process as simple as possible, especially at the billing phase where money is on the line.

There is no single way to clarify an entire billing form. You just need to keep each field clear and concise, never let the user feel confused or unsure of their decision to check out.

Here are some techniques you should keep in mind that work well:

  • Larger typography
  • Labels instead of placeholders(or both)
  • Extra padding between fields
  • Custom tabindex for easier navigation

Also add plenty of icons to demonstrate visuals where needed. The Threadless checkout page offers a great example.

The credit card icons make it crystal clear what the user is selecting as a payment method. The same goes for icons lower in the field which clarify the location of CVV numbers.

Do everything in your power to let the user know exactly what they’re doing at each stage of the billing form. There should be no ambiguous terms, no unclear directions, and plenty of tooltips/icons to answer any questions along the way.

Custom Input Spacing

Some data requires a certain text format like phone numbers and credit cards. This spacing can be dynamically generated on-the-fly using JavaScript and it’s one of the best techniques you can add to your website.

Custom spacing lets users know they’re on the right track when filling out form fields.

You can do this with zip codes where the form automatically tabs onto the next field once the user enters the proper digits for a zip code. Same with phone numbers where you can auto-style the digits to match a phone number. You can see this on eBay’s checkout form.

But the most useful is the credit card 4-digit spacing format. Credit card numbers are long and they’re easy to screw up. An incorrect CC number also means the order will completely backfire.

This custom CC spacing in your billing field makes it that much easier for customers to enter their numbers and double-check that they’re correct. You can find a nice example on the BodyBuilding checkout screen which also includes error messages when you have an invalid entry.

There are tons of free plugins you can use to create the auto-formatted text. Most run on jQuery but you can find some vanilla JS solutions too.

Simplify The Action

Some checkout forms are longer than others so the process always feels different for every website. This can be confusing for many visitors and it’s one reason why ecommerce stalled for so long in the early 2000s.

But regardless of your form’s length there are two ways to design around this:

  • Smaller forms should try to keep everything on one page for simplicity
  • Larger billing forms should break into steps with breadcrumbs

For example, the smaller billing form on SEMrush is fantastic. Very quick to use, easy to read and everything you need to know is clearly visible on the page.

But I don’t mind a longer checkout process so long as it has breadcrumbs. These offer a clear indicator of how far the user has traveled into the checkout process and how much longer they have before completion.

This confidence makes it easier for someone to commit to the billing form at each step. If they have no idea when the checkout process ends they might get confused, anxious, or just annoyed and leave.

Breadcrumbs are huge and I absolutely recommend adding them to larger billing forms. The Wiggle checkout uses clear breadcrumbs at the top of each form page.

Smaller & larger billing forms can work well just varying different techniques. Be willing to try both!

Run some A/B split tests and see which style performs better. You might be surprised at the results.

Recap The Purchase

Once the user enters their billing information it can be tough to hit that final “submit” button. Hesitation is the death of conversion.

By recapping the purchase order you give customers a final peace of mind. They can see everything at once from the items they’re purchasing to the total fees(plus processing) and even the delivery date if applicable.

GitHub’s pro upgrade billing field recaps the purchase all on one page. It clarifies how often you’ll be billed, what the final fee is, and when you can expect the next fee. Most fields are filled out from your profile so if you have an account this process is very quick.

Another example is Amazon, the mother of all ecommerce shops.

Once you enter all your details like shipping address & payment info, one final screen recaps the whole order to make sure you really understand what you’re purchasing.

This reduces returns for wrong items and helps the customer feel confident when they press that “purchase” button.

Recapping the order can be tough on a smaller billing form. But just be openly transparent with your customers and share as much detail as possible.

Wrapping Up

Your site’s billing form is the only thing standing between a potential customer and a paying customer. That’s why form optimization is so important.

I hope these trends can help you craft usable and encouraging billing forms that’ll bring more revenue to your shop and all of your clients. Optimization is an ongoing process but if you’re constantly testing new ideas you’ll always be ahead of the competition.

Designing Forms for Upgrading Content Registration Taking People’s Attention

The best email opt-in forms use a lead magnet to draw attention and gather emails. You can spend weeks tweaking a signup form but the biggest factor is usually the content offer.

There’s a special type of lead magnet called a content upgrade which gets placed on a relevant piece of content. This usually converts much higher and it’s a great way to add value to your subscribers.

In this post I’ll explain the basics of an e-mail opt-in content upgrade, how you can design one yourself, and some examples you can study to get the ball rolling.

Intro To Content Upgrades

The idea behind a content upgrade is simple: you offer something valuable to visitors in exchange for their email.

This valuable item could be a free PDF guide, icon set, photography pack, or really anything. But this technique works best on specific posts where your free resource actually upgrades the existing content.

So for example, if you write a post about “best icon design styles” you might add a small opt-in form at the bottom of the article offering a freebie icon set. When the user enters their e-mail to sign up they get a link to download the icon pack & they get added to your list.

This resource is relevant to the content and valuable to the reader. It’s a fantastic example and just one of many you could run.

Backlink expert Brian Dean has this tactic scattered on many of his Backlinko posts and they work well. He suggests thinking outside the typical “norms” you see in most blogs.

Try to offer genuine value to your readers and make it almost impossible for them to pass over your freebie.

No matter what you offer the end result is always the same. You want to add more subscribers to your email list. And the way you’re trying to gain those subscribers is always through some type of content upgrade.

You just need to decide what sort of upgrade you can push that’ll encourage more signups. That’s the secret sauce to any great content upgrade field.

What To Offer

If you’re stuck for ideas you should find posts that get the most traffic and design around those.

Dig through your analytics and find your top performing pages. Think about what sort of resource(s) you could offer on that page that might convert.

One thing people don’t want is something unrelated to the content. If people land on your post about React.js they probably don’t want a PDF on the 10 upcoming design trends for this year.

Instead they might want a PDF on React.js trends, or the best learning resources, or maybe a look over the history of React.js as a PDF/infographic.

The sky’s the limit on what you can offer. Just make sure it’s fairly short and genuinely relevant to the content.

Here are some ideas to get you started:

  • A small how-to or PDF guide
  • Free resources like photos, icons, code snippets
  • Extra tips/tricks on the subject
  • Behind-the-scenes tips from experts in the industry
  • A detailed “getting started” guide or case study

Picking a resource to offer is just the first step, but it’s an important one. If the freebie sucks then you haven’t really upgraded your content at all!

This example is a post about floating sidebars in web design. The author has a content upgrade with a swipe file of copy, code, and resources for anyone building floating sidebars. This relates directly to the post and it probably wasn’t too difficult to compile these resources either.

Don’t spend too much time thinking up ideas but make sure you settle on one you like. From there you can develop the resource and edit your blog post with an opt-in form.

And if you’re really stuck on ideas then read through this article to get the juices flowing.

Marketing Your Upgrade

How you showcase the upgrade is yet another crucial aspect of the opn-in form. You might be offering the coolest PDF guide in the world. But if nobody knows what it is then why would they want it?

Written copy sells and it’s always something you need to consider. Sometimes you can get away with smaller text-based forms or simple CTA buttons. The only way to know is through A/B testing so try a lot of different styles to see what works.

And try adding multiple opt-in fields within the post. You could have one near the beginning, another fixed in the middle, and one at the very end of the article. This way readers continually see what you’re offering and hopefully it draws their attention.

The example above from Authority Hacker doesn’t use any special graphics or previews. It just has large text with bright colors to grab your attention.

This is certainly a way to go if you can’t find any graphics to use. But you might see better results if you can get screenshots from your resource added to the form.

A much simpler example can be seen at the bottom of this post by Wishpond. It just has a blue CTA button with a bit of white text.

Each piece of content has a unique target audience so you’ll want to design your opt-ins for those readers. There isn’t really a “right” way to do this.

I recommend studying your favorite blogs and keep a sharp eye for these content upgrades. They’re hard to miss and the ones you do miss probably aren’t that good.

Read their copy and see how they push their upgrade. Does it make you want to sign up? Is there incentive?

This Forbes post just has a simple text link near the bottom of the article. No button, no graphics, nothing. Just a link pushing an e-book on the billionaire’s secrets of wealth, a very magnetic link which ultimately leads to this lander.

Follow whatever marketing strategies work best for your resource. Be willing to test and don’t get stuck with one specific method.

The more marketing techniques you try the more likely you are to find one that converts well.

Visuals Sell

Along with amazing sales copy you should also try adding visuals to the top-in form.

These can be simple graphics, mockups, photographs, or pretty much anything that represents your freebie. It doesn’t matter what you’re giving away as long as it’s clearly noticeable.

Take for example this opt-in field in the sidebar of Michael Hyatt’s website.

It specifically targets the headline of the post by promoting a free e-book on shaving 10 hours off your workweek. The book cover mockup is placed into the form to draw attention.

You can find tons of free ebook mockup PSDs in Google which you can modify for your opt-in field. Just take the front cover design and paste it onto these skewed mockups. A gorgeous eye-catching visual ready in minutes.

But visuals aren’t just pictures or graphics. You also want to think about your opt-in field colors, fonts, and related aesthetics like spacing.

According to Brian Dean’s post a yellow opt-in box near the top works very well. This color draws attention and if you’re offering something cool it will get people interested.

But just because one visual technique works on Brian’s blog doesn’t mean it’ll work for you.

Testing is the name of the game so don’t get discouraged if you can’t find a winning design right away. Just be consistent and keep trying.

A great content upgrade doesn’t always sell itself so you’ll need to push for growth. But it also doesn’t take much to get people interested. Place yourself in the shoes of a typical visitor and design your opt-in form with the goal of getting their attention.

Moving Forward

Content upgrades should become a staple for any site with a newsletter. They do take patience to set up and you’ll need to put in effort creating a valuable asset.

But if you already have a large blog with a sizable audience then you’ll have content ready to optimize. Hopefully the tips & examples in this post can get you started on the right foot.

Proper Tips for Designing Newsletter Layouts

Newsletters still offer the best way to reach your audience directly and increase sales. But if you’ve never managed an email list before this can be an intimidating process.

Once you have a list you’ll need to send out emails that connect with subscribers and offer real value. This means great content and great design all wrapped up in a pretty bow.

Let’s dig into the UX side of email design to consider what makes an email engaging. This goes far beyond a great headline and once you know how to design emails you’ll see incredible results with your open rates.

Single-Column Layouts

Emails need to be designed smaller because email readers like Outlook have more restrictions than web browsers. This means your average newsletter is rarely larger than 600px wide, so it’s best to use a 1-column layout or at most a 2-column layout.

When you plan your content it’s good to organize this into a single column format. Think about how you can organize your writing so it flows down the page and offers an easy reading experience.

Take for example the WistiaFest 2017 newsletter design. Each section of the design spans the entire width of the newsletter so content streams down straight in a clear linear fashion.

Slanted angles and custom graphics help loosen up the stiffness, but ultimately it’s still just a one column layout.

You’ll want to be conscious of how your content is organized and how readers will consume this content.

If you use alternating patterns with a 2-col design you can split your layout into two columns as well. Take for example this design from The Short List.

Each photo alternates in a grid structure alongside content and a CTA.

You can follow this same two-column strategy if your newsletter has enough content to match. Just make sure you leave plenty of room to read the information and to hopefully make your email responsive as well.

Include A Strong CTA

If you’re looking to increase engagement then you need a call to action.

This is a button or link that encourages the user to click and do something. This could get people to continue shopping on your store, or to read through your latest blog post, or to download your new ebook.

Regardless of what you send in your email it’s always good to include a CTA. And even if you’ve never designed a CTA before you can learn a lot by studying other examples.

Here’s a design by Postmades with a share $100 message across the whole email. The entire purpose of this email is to have people send a $100 free delivery credit to any one of their friends using a special code.

The CTA reads “Send $100” which is pretty clear.

When writing the button copy always stay focused and be quick. Emails are like a sign in a shop window; skimmed quickly and meant to lure people inside.

Another cool example is this design from American Airlines. The CTA “check in now” is pretty direct and there’s no confusion about the purpose of this email.

You can also try running two CTAs next to each other if you have a larger audience.

This works if you have a more general goal in mind with a large subscriber base. For example Adidas has two bright yellow CTAs in their email: men’s and women’s sneakers.

The goal is to get people onto the website and you’ll want to send them to a place where they might actually buy.

All of these ideas are just examples so use your own best judgement and see what type of CTA works best for your newsletter.

Images Above The Fold

Since emails are so basic you can’t really do a lot with CSS3. They also don’t have a navigation since you just want to get visitors right onto your website.

Images are great for immediately grabbing attention and selling an idea. That’s why I always recommend adding a highly-engaging image right above the fold near in the header of your newsletter.

This image could be a stock photo or a illustration/logo for your company’s brand. It could also be a product photo like this one from the iPhone 7 red launch.

Following in Apple’s traditional minimalist style it makes sense that their photo is very basic.

However this is all you need to grab attention if your product is interesting enough. The goal is to have just enough visual information to get people curious and to click your CTA.

This slightly different example from Of a Kind pushes specific products with real sales photos.

Great photography can always pre-sell whatever you want visitors engaging with. Sometimes that is literally selling something, but other times you’ll want to sell a blog post or maybe your social media profiles.

Use photos as engagement tools to grab attention and share information visually along with text.

Box & Grid Lists

If you get a lot of newsletters then you probably recognize the box/grid layout design.

It’s very common with emails because they have a few distinct traits:

  • Narrow page designs
  • Short copy
  • Meant to be consumed quickly

Subscribers typically open your newsletter with only a few minutes(or seconds) to spare. Organizing the content into a nice grid is the best way to showcase everything you’re promoting.

This holiday newsletter by Google is a fantastic example of the grid system promoting their products.

You’ll find a clean product image floating to the right along with a small headline and a CTA link on the left. Once the reader recognizes this pattern they’ll have an easier time skimming the document.

But you could also do fullscreen box sections like Bose while alternating colors for contrast.

When you design with boxes you’re trying to grab attention and clarify the purpose of your newsletter. High contrast colors have the same effect so they’re perfect if you can design such a layout.

Notice how the Bose newsletter also adds incredible photography into each box.

Combine all the techniques from this post into your design to further increase engagement.

You don’t have to look at these trends as separate items. They’re individual pieces that ultimately make up a great newsletter design.If you’ve never created a newsletter before then these tips will prove more than valuable in the design process. As long as you focus on simplicity and place the user experience first you’ll create a very engaging newsletter.