Monthly Archives: May 2017

How to Design a First Desktop for a Responsive Website

Most web designers know about mobile-first design and how it has dramatically affected responsive design. But there is another technique that may be less popular but can solve problems in a clearer fashion.

With a desktop-first approach you can build all the features you want and create them to the highest specs. Then as you test on smaller devices you’ll focus on keeping the interface light while supporting as many “high-end” features as possible.

This workflow is quite different but starting from the desktop can be better for web designers who create feature-rich designs.

The Benefits of Desktop-First

Technically “desktop-first” was the traditional way that everyone made websites up until the responsive era.

Nowadays many people talk about mobile first but there are good reasons to stick with the desktop approach. I often prefer starting with the desktop design when I know my site will have tons of detailed features on larger screens.

Here are some benefits of the desktop-first ideologies.

  • You get to see all major features at once
  • It lets you imagine all the largest possibilities for your design first
  • It’s the best strategy if your audience mostly uses desktops/laptops

When you think of modern websites like Twitter you think mobile. But they do have lots of extra features that come along with the desktop experience. These desktop users clearly get a heightened UX which is just as important as any other device.

Granted there’s no denying that mobile is important. Just recently mobile usesurpassed desktop so it’s definitely here to stay.

But feature-rich websites often depend on a strong desktop design.

This is perhaps the biggest benefit of a desktop-first layout. You get to see the site as it should look with all the bells & whistles. These extras can(and should) be removed for smaller screens as you test and find certain features just don’t carry over well.

Another way to look at this is through the simplicity of mobile-first design. When you create with mobile first you’re inherently starting with the simplest features, then adding extras for larger screens. But it’s real easy to forget features or just lack proper planning to decide where they should go or how they should function

With a mobile-first approach it’s easy to consider dynamic features more like an afterthought. But with a desktop-first approach you’re treating these features as the primary display method, then choosing to remove them as needed.

There is no perfect choice so I recommend trying both to see what you prefer. If you’re like me and really adore the rich desktop experience then you’ll probably prefer starting there and working smaller.

Supporting All Browsers

The trickiest part of desktop-first design is handling browser support.

Just a decade or two ago the only market was desktops & laptops. The smartphone revolution changed all of that with tons of mobile browsers for iOS, Android, and other proprietary devices like Blackberry.

Most older browsers lacked support for modern desktop elements like canvas, audio/video, and dynamic inputs. But a lot has changed in recent years.

Nowadays it’s reasonable for all mobile browsers to basically support the same features as desktop browsers. Modern browsers also render most elements the same way so you won’t deal with rendering issues of the past.

The biggest differences are not in HTML/CSS support, but rather in touch-based support.

Mobile screens are much smaller and they also need to be tapped with a finger. Computer mice are more precise compared to a human finger, not to mention desktop screens are far more spacious and easier to look at.

When moving from desktop to mobile it’s crucial to consider how the different browsers work, what they support, and how to handle the user’s touch-based input.

A few good rules to consider while scaling down your desktop-first design:

  • Make tappable elements larger
  • Increase body text size so links are easier to tap
  • Add JavaScript libraries that support swipe motions

You can always check HTML5 specs for all browsers to see which elements are supported on which browsers. But for the most part touch inputs are a universal thing, so desktop-first is a great solution if you pay attention to the mobile experience too.

And you can find tons of free resources like TouchSwipe that add support for touch & swipe gestures to all websites.

You can use JavaScript to check the browser’s dimensions or the operating system like iOS or Win Mobile. With this info you can load extra stylesheets and create a totally different experience with touch/swipe events that only apply to mobile users.

Start with a list of features you know you’ll want on your website. Organize all the newer CSS3 properties, the newer HTML5 elements, and anything that might be iffy with browser support.

Then look up all the browsers you want to support to consider how you can handle fallbacks and polyfills. As time passes older browsers will phase out and browser support will get easier. This makes an even stronger case for desktop-first design because the rendering engines will be close to identical across the board.

To learn more and dig deeper into mobile interactions check out these related guides:

  • Multi-touch Web Development
  • Support Comparisons Between All Mobile Browsers
  • How to deal with :hover on touch screen devices

Graceful Degradation (And Why It Matters)

The process of graceful degradation looks at higher-level technology first. This means you build all your website’s top features with everything you want on the site, then if other browsers can’t support them you revert to fallback methods.

A common example of this tactic is the removal of dropdown sliding menus for mobile. Since smartphone users can’t hover menu links it makes sense to hide the hoverable menus and instead create a toggle switch or a hidden hamburger menu.

However this isn’t strictly graceful degradation, rather a change in user experience. Instead you’re looking for JS functions or CSS3 properties that literally cannot be supported in a certain browser.

For these you’ll need to find a polyfill or fallback that creates a less glamorous experience, but one that still works for the user.

Check out this list of examples created by the W3C. It covers graceful degradation in detail and it may help you move on the right track.

Thankfully since most modern browsers support JavaScript, HTML5 video, and canvas elements so you really have no limitations. The trickiest part is legacy support for outdated browsers. Yet this market is shrinking rapidly and you can gauge this by studying market share.

If you run Google Analytics you can study all browsers and OS’ from your audience to see which are the most popular. If nobody uses IE7 to browse your site then why support it?

Every problem you solve will be different so take it one at a time. Rely on sites like Can I Use to gauge what type of support you’ll need to deal with.

When Desktop Takes Priority

You may be wondering when desktop-first is appropriate. Should this be your default strategy for every project?

Maybe. But I think it ultimately works best when you’re designing a site where desktop takes priority over mobile.

If the mobile experience can be incredibly simple but the desktop experience needs to be detailed and dynamic, I say start with the desktop and work smaller.

If you always prefer working from desktop and moving smaller then you’ll get a knack for the process and it may become your default. And that’s totally fine because it’ll still lead to great results.

Just make sure you have a plan for the mobile site with at least a vague idea in mind of how it’ll look. Draft some wireframes for both views just to give yourself a starting point.

One great example of a strong desktop approach is Mashable. Their fullsize website spans 1440px wide and contains 3 columns of news with a huge mega navigation menu.

Mashable looks awesome on mobile too, but you can tell the desktop version was not an afterthought.

Same goes for major sites like YouTube where the user experience needs to work for both audiences. And in the responsive era it’s not just “desktop” or “smartphone”.

You also need to consider tablets, smaller netbooks, and laptops that all have varying screen sizes. Desktop-first helps you build an experience that works on larger screens first by focusing on every possible feature.

How to Operate the White Space in a 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.

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.

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.

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.

Use of Web Design To Create a Billing Form

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

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.

These are the best ones I’ve found:

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.

Create a Content Registration Form that Takes 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.