UX/UI

I enjoy providing elegant and delightful web and mobile experiences. I balance perfection and production while ensuring the cross-browser compatibility along with clean and transparent design.

Łukasz Siwek

[TOC]

Some web content is not centered, which is quite frustrating. If you don’t like CSS and you have problems with it, you probably also had a problem with centering things on your beautiful web page.

You most definitely headed to Google and searched for a method that will center your content. Then you came across a fantastic solution ***margin: 0 auto;*** which, according to some online CSS tutorials **ALWAYS centers**. Well, **it does not** and this article will tell you why.

## The basics

Before we start talking about margins, it’s crucial to understand what exactly box model is... If you ever used the element selector in Chrome’s dev tools, you probably already know that when you hover on an element with that tool you will see margins, borders, paddings and content - all colored differently. All you need to remember is that: content is the blue element and box is all of those elements (margins + borders + paddings + content).

![](https://s3.amazonaws.com/a.storyblok.com/f/86602/739x706/9a9cd57eea/image8.gif)

<ReadMore> Read also: [6 Steps Of UX UI Design Process](https://selleo.com/blog/6-steps-of-uxui-design-process) </ReadMore>

## Margin and his friends

But what exactly is margin for? Many people think it is just this tiny space to add between elements in order to make them a bit further away from one another... Yes, you can use them to give your elements a little bit of space, but margins are also commonly used to center or position elements in HTML and you might not even know when that happens.

![](https://s3.amazonaws.com/a.storyblok.com/f/86602/739x609/379cf8a0aa/image3.gif)

By setting for example: margin-left: 50px you’ll force your browser to set that empty space to the left from your element, on the other hand, using margin: 0 auto; will tell the browser something like this: “I don’t want any empty space from the top and the bottom, but I want to have as much empty space from my left and right as possible”, it won’t force that in any way.

![](/uploads/image4.png)

To get the full understanding of margins you need to think about those content and box things that I’ve mentioned earlier. On the screen above all these elements are the same except they have different margin:... set, in order from top:

* margin: 0;
* margin-left: 50px;
* margin-right: 100px;
* margin-left: 80px;
* margin-left: 80px; margin-right: 100px;

All these boxes (margin + content) have the same width, so… by setting the margin property we haven’t changed the whole box width, instead we decreased the content (blue rectangle) width.

**So what will happen if we set margin: 0 auto;** to the element above?

![](https://s3.amazonaws.com/a.storyblok.com/f/86602/715x49/7b34bbe689/intr1.png)

**Nothing!**
Why? Because as I said: ***margin: 0 50px;*** will force element to have this margin, but margin: 0 auto; won’t. In this situation, it will add as much margin **as possible…** but how to add margin if our content is **100% wide? Content width == Box width**, there’s no space for margin without forcing it. So what should we do? In this case, it’ll be enough to specify the content width so it’ll be smaller than the box, how to do it? Just set: **width** or **max-width** property in this scenario. So I’ll just add **width: 500px** to that element and...

![](https://s3.amazonaws.com/a.storyblok.com/f/86602/717x48/1f59ec63e9/intr2.png)

**Boom!** Our element is centered, so in result it has: **width: 500px; margin: 0 auto;**
NOTE: Please don’t mistake the element with the text inside of it, we just have centered the element to its container not the text to the element.

Right now I hope you know the difference between **box** and **content**, so now we can resolve our riddle: **When does margin: 0 auto; center?**

<Baner name={frontend-developers} />

### Block

![](/uploads/block2.png)

First things first, each of the elements above are **blocks** and have set ***margin: 0 auto***, but it does not work since **blocks have width equal to 100% by default** (the first example).
The block covers the whole page and therefore cannot be centered. If we set, for example, the ***width 300px*** and ***margin: 0 auto*** it will magically center - like in the second example. You can do the same thing be using **max-width** property (the third example).

### Inline

![](/uploads/image9.png)

As far as inlines go, they just don’t work, because in CSS they are treated more like text. **The whole box** of these elements tries to fit the **content**, so as a result, our box is getting the same size as content inside of it which means our content is not centered because **again the content width has the same size as the box**, but here if we set the **width** property it won’t change, because the box will also get smaller to fit its content, in the end, **it’s useless to use margin:0 auto; on inline/inline-block elements.**

Pssst: In this scenario, you can just simply add a ***text-align: center;*** to their container to center them, so it’s even simpler.

### Flex / table

![](/uploads/flex.png)

With **flex**, it is a similar scenario to **blocks**. It is by default **100% wide** so it won't be centered with ***margin: 0 auto;*** only (the first example). You have to set ***width*** or ***max-width*** to a flex element then it will work (the second example).

In the case of **tables**, they are kind of weird to me, but thankfully they are not commonly used. It is enough to set ***margin: 0 auto;*** without anything else to center a table element (the third example). Why is it so simple? **Tables** have **box width equal to 100%** (like **blocks**), **but the content width is as small as possible** (like **inlines**). Yes, if we set the **width** or **min-width** property to anything but **100%** it will still be centered.

### Absolute

![](https://s3.amazonaws.com/a.storyblok.com/f/86602/623x343/6fe56b860d/absolute.png)

Advanced positioning (absolute/fixed) changes the game here if you set the ***position: absolute/fixed;*** for example, for **block** elements and even if you set the **width** property, it still won’t be centered.
For position: **absolute/fixed** it is important to set the **left** and the **right** property for those elements so the **whole box can be wider than the content**. By default, using ***position: absolute/fixed;*** will make the **box** fit its **content** (the first example), so again we cannot center because the **box is equal to the content**.

It doesn’t matter what is your element **display** property, it can be **block, inline, inline-block, flex or table** all of them will behave the same.

There’s no sense in using *margin: 0 auto;* for centering horizontally **absolute/fixed** elements, a better option is: left: 50%; top: 50%; transform: translateX(-50%);

<ReadMore> Read also: [UX Design For Elearning - 10 Tips to Attract Users](https://selleo.com/blog/ux-design-for-elearning-10-tips-to-attract-users) </ReadMore>

## Summary

If you know the difference between **content width** and **box width** then basically, box width must be wider than content width if you want **margin: 0 auto;** to center your content.

When does **margin: 0 auto;** center:

* For ***position: static/relative/sticky;*** element must be a **block, flex or a table**.
* For ***position: absolute/fixed; display*** can be set to anything, but **left** and **right** properties should be set.
* Logically, a **content width cannot equal 100%**

Need help with your React.js development? [Get in touch](https://selleo.com/react-expert-developers-team)!

Centering elements on a web page can be tricky, but margin: 0 auto is often cited as a foolproof way. Discover when margin: 0 auto may help you center.

When Does margin: 0 auto Center?

A **registration form** is a critical step for converting visitors into users. Make it easy, impressive, and sleek. In this post, we will look into the process of monitoring and optimizing signups and share some best practices that can help you **increase form conversions** and help you achieve an exceptional user experience.

As formisimo has described in their case study Small changes can lead to a [55% increase in conversions](https://www.formisimo.com/blog/case-study-small-changes-lead-to-a-55-increase-in-conversions/). We will present those small changes and many more from other sources. Learn how you can improve your signup **forms conversion rate**!

[TOC]

## 1. Monitor your signup process

Start the optimization with setting up form analytics, like MouseFlow or HotJar which offer:

* **Recordings** - Identify usability issues by watching recordings of real visitors on your site as they click, tap, move their cursor and navigate across pages.
* **Conversion Funnels** - Find the biggest opportunities for improvement and testing by identifying on which page and at which step most visitors leave your site.
* **Form Analysis** - Improve online form completion rates by discovering when and why your visitors abandon your forms.

Collect data for two equal cycles - least two weeks long each. Analyse your data. Where are the people struggling? What impact changes do you have?

Look beyond just conversion rate form metrics. Here are some others to consider:

* Abandonment rate
* Average correction rate
* Failure rate by device
* Top converting / abandoning paths

Getting to the optimal conversion will likely be a trial and error or a series of A/B tests. For best results, optimize forms separately for desktop and mobile.

In the next points, we will go through top **registration form optimizations** best practices.

## 2. Fewer fields is more conversions

Unnecessary fields are to be avoided or made optional. [Imagescape was able to increase conversion rates by 120%](https://unbounce.com/conversion-rate-optimization/how-to-optimize-contact-forms/), simply by reducing their form fields from 11 to four.

If you think one form field question doesn’t matter that much, you’re wrong. Expedia took out the optional form field “Company”, and [increased their yearly profit by $12 million](https://www.zdnet.com/article/expedia-on-how-one-extra-data-field-can-cost-12m/).

Some form fields to consider consolidating/getting rid of:

* Username: do your users really need a username to register?
* Password confirmation: consider “show/hide” feature like [MailChimp](https://login.mailchimp.com/signup/)

Filling out a form is simpler than ever with autofill function, but a browser can only auto-fill if you use easily distinguishable context clues, like “First Name” or “Email”. It’s a best practice to title each form field with a term the browser will recognize, to help your users speed up their own fill-out process.

## 3. Provide social login button

You can also provide **social media logins** as an alternative to registration. Blue Research has done [studies on social login](http://www.prweb.com/releases/2012/1/prweb9086226.htm):

* 92% of people have left a website instead of retrieving a username/password
* 54% of people may leave or not return to a website if asked to login
* 3/4 people say social login options should be offered

Social button login benefits go beyond user convenience with not having to pick and remember password. You can go even further and use social media login to fill in the data that your users would otherwise have to enter manually.

This LinkedIn sign up page includes a good headline, 4 input fields and optional "Continue with Facebook".

![linkedin signup page continue with facebook](/uploads/linkedin-signup-page-with-continue-with-facebook.png)

## 4. If you need a lot of information - split it

Sometimes you really do need a lot of information to register a new user account. Signups that require payment details, like billing address and credit card data. When that happens, consider breaking the registration process down into multiple steps or use conditional logic to shorten your forms.

In fact, some reports like [report from Formstack](https://www.formstack.com/report/form-conversion-2015) shows that **multi-page registration forms** can outperform single-page ones. Signups usually come with a convenient progress bar that lets users know how far along they are in registration.

![Github multi step signup](/uploads/github-multi-step-signup.png)

Another common solution is to **split subscription process** beyond single form, into multi-step flow. It allows you to submit the form when a user has reached a certain step in the form, and then continue providing more information if they want to. Check [3 Common SaaS Sign-Up Flows (and a Friction-Based Analysis)](https://conversionxl.com/blog/saas-signup-flows/)

Want to see how popular web apps handle their signup experiences? Here is a handy list of onboarding processes, including [How Slack Onboards New Users](https://www.useronboard.com/how-slack-onboards-new-users/).

## 5. Top-left aligned labels are best for readability & completion

Most users scan the form before filling out. Aligning and stacking fields and labels to the left of the page decrease eye movement and speeds up the processing time. A **single column form** converts better than two column forms. Form fields should adopt a natural or logical flow.

Google’s [UX researchers found](https://research.googleblog.com/2014/07/simple-is-better-making-your-web-forms.html) that **aligning labels** above fields on the left-hand side increased form completion time. This is because it requires fewer ‘visual fixations’.

## 6. Communicate expectations and errors clearly

Google’s UX researchers’ user interviews with participants in the study revealed which guidelines were most impactful in improving the forms:

**Format specifications** (e.g., requiring a minimum password length) should be stated in the form, prior to submission. The application of this guideline had a large positive impact on user performance, subjective user ratings and was also mentioned frequently in user interviews.

**Error messages** must be placed next to the erroneous field and designed in a way users are easily able to fix the problem. Doing this reduced form-filling time and increased subjective ratings.

Most frequently users mentioned that it was key to be able to tell apart optional and mandatory fields.

![](https://s3.amazonaws.com/a.storyblok.com/f/86602/1215x581/ab2d4d66e6/registration-form-design-best-practices.png)

## 7. Design better forms

Since we try to keep this post a high level guide, we are not going to cover all the aspects of forms design here. Instead, take a look at the incredibly popular post [Design Better Forms - Common mistakes designers make and how to fix them](https://uxdesign.cc/design-better-forms-96fadca0f49c) by Andrew Coyle, product designer at Google. Here are the most important points not mentioned yet:

* **Group labels** with their inputs - Present the label and input close together. 
* **Specify errors** inline - Show the user where the error occurred and provide a reason.
* Use **inline validation** after the user fills out the field unless it helps them while in the process  like in the case of creating a password, username, or message with a character count.
* Don’t hide **basic helper text** - Expose basic helper text wherever possible. For complex helper text, consider placing it next to the input during its focused state.
* Ditch the \* and **denote optional fields** - Users don’t always know what is implied by the required field marker (\*). Instead, it is better to denote optional fields.
* **Group related information** - Users think in batches, and long forms can feel overwhelming. By creating logical groups the user will make sense of the form much faster.

## 8. Use a benefit-oriented headline and CTA

By the time a prospect arrives at your signup page, in most cases they’ve already evaluated your service. But, does that mean you shouldn’t remind them why they’re there?

People don’t fill out forms for fun. They fill them out to achieve the outcome that sits on the other side of your form. The more motivating the outcome is, the more people that’ll complete your form.

Even when nothing on the form changes, you can significantly **increase registration form conversion rates** by changing the outcome that drives people to complete the form in the first place.

As a result of re-titling their sign-up form, [BettingExpert increased their sign-up conversions by 31.54%](https://unbounce.com/a-b-testing/conversion-lift-in-signups/).

![AB split tests improve registration from conversion rate](/uploads/ab-tests-improve-registration-from-conversion-rate.png)

Copywriting best practices should include:

* A clear and compelling headline
* Strong benefits and action words
* Show social proof (i.e. client testimonial)
* Clearly explain why you’re asking for sensitive information

## 9. Make CTA button stand out

The color of your CTA button has a major impact on **conversion rate**. Think of the button design/color as a visual cue that helps your prospects find the button. In other words it answers the question, "Where should I click?"

It is important to make your button stand out from the rest of the page in such a way that it’s easy to spot and identify as a clickable button:

* Start by experimenting with an orange or green button, simply because they often perform well.
* Reduce clutter around the CTA button.
* Make CTA button width match inputs width.
* Consider making your CTA bigger.

It's a final opportunity to convince your visitors that they should fill out those last few fields. Ideas from [31 Call-to-Action Examples You Can't Help But Click](https://blog.hubspot.com/marketing/call-to-action-examples) include:

* Join now
* Sign up for free
* Sign up to \[drive]
* Start riding with Uber
* Get Started
* Give \[Prezi] a try
* Claim Your Free Trial
* Continue
* Continue with Facebook

## Summary

Sometimes the most obvious places for optimization are overlooked. **Optimizing your registration form** can lead conversion efforts on your website. Your signup process should be designed and catered for your specific audience.

It’s important you **test design changes** and monitor their impact. There is no one size fits all, but there are some general principles and best practices you can use to guide to minimize the pain of completing registration form. Support your **form conversion** with benefit driven headlines and supporting images and social proof.

Other pages you can to look into

* [Use this 6-Step Process to Boost Conversions](https://getuplift.co/web-form-optimization/)
* [50 A/B Split Test Conversion Optimization Case Studies](https://blog.wishpond.com/post/98235786280/50-a-b-split-test-conversion-optimization-case-studies)
* [The 7 Principles of Conversion-Centered Design](https://unbounce.com/conversion-centered-design/)
* [16 Tips that Will Improve Any Online Form](https://uxplanet.org/the-18-must-do-principles-in-the-form-design-fe89d0127c92)
* [58 Form Design Best Practices & Form UX Examples](https://www.ventureharbour.com/form-design-best-practices/)

Need help with your UX/UI? Contact our [team of specialists](https://selleo.com/ux-design)!

Boost your registration form conversions. Make sign up form easy, impressive, and sleek. Discover optimizing process and apply best UX/UI design practices.

Read our UX/UI articles on Selleo Blog

Business

Technology

UX/UI Insights

When Does margin: 0 auto Center?

Ultimate Guide How to Optimize Registration Form for Higher Conversion

Tell us about your project