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

## We live in a mobile era

On the streets, in restaurants, on a bus, waiting in line… Everywhere you look people are using mobile phones. From kids at a rather young age to middle-aged businessmen and elders - **we seem glued to our smartphones** from sunrise to sunset. The development of a mobile phone that evolved into a smartphone changed the way we communicate, shop, browse the web, take pictures etc. It has revolutionized our world and changed it forever.
Companies recognize the **importance of being mobile-friendly**. More and more websites are being adapted to smaller screens or getting dedicated [native applications](https://selleo.com/blog/react-native-vs-pwa-which-should-i-choose). Let’s face the facts, your business cannot operate well if your website sucks, no matter what kind of business you run. This is why a **mobile-first approach** to **website development** was born and it is not going away.

[TOC]

## What is a mobile-first design?

Some time ago, **websites were desktop-oriented**. Features, functions, special graphics, audio and visual effects were adapted to bigger screens, providing a great **user experience**, but also requiring faster internet connection. ‘Traditional’ industries are still focused on desktop but this is **not** a good way of thinking in 2019.

As a response to the popularity of mobile phones with built-in browsers rising, a notion of **mobile-friendly web design was** created. It means that it will render on a smaller screen, but we should not expect it to look that great. Those websites opened on a mobile phone look exactly the way they look on a bigger screen. This means zooming in and out to navigate between pages is a must - a user experience killer.

Then the **responsive web design** came to life. This is a process of creating websites that work on any mobile device with any screen size without the necessity to zoom in and out to see the entire content. This way, the content is preserved and user experience is saved.

But things went a step further when the **mobile-first design** was born. But, what exactly is the mobile-first design and why is it so important? Well, it is all quite simple. Mobile-first design is literally sketching, designing and developing websites for mobile-first and later on, scaling them up to larger screens.

Among the advantages of a mobile-first approach is improved **Google Ranking** - since in 2018 Google switched to **mobile-first indexing** it ranks the mobile version of your website before the desktop one as well as increased **mobile conversions** - the better the mobile website the more probable customers will come back.

## Mobile-first web design principles

Mobile-first design follows principles that are in many cases different from the traditional website designs.

### Content-first approach

When implementing a mobile-first design **content is of the highest importance** since mobile devices have the most limitations considering their **screen size**. Here, the principle **‘the longer the content the better’** does not apply. Mobile content has to be **clear and to the point** with all the essential information **at a first glance.**

### Simple design

A simpler design means **less time and energy spent on programming**. When creating a mobile website we can **forget about popups, hoovers and other fancy desktop-only features**. Here we have to ‘think’ with our fingers, instead of the cursor. Also, keep in mind **one-handed users** - everything should be easily reachable.

### Performance is key

When creating a mobile website we should make **performance** **our priority**. I cannot stress enough how crucial it is that your website works seamlessly on smartphones, especially taking into consideration connection speed.

### Easy contact

An easy way to contact you is crucial for **good customer service**. Consider adding a **live chat** to your website, so your customers get an instant reply to their query and will definitely be easier on a mobile device than sending an email.

### Visually pleasing

**Graphic design** is as important in mobile-first as the written content. Your images should be **vivid, attention-grabbing, with contrasting colours**. That way, your website will be more memorable and easier to distinguish from others. Here, keep in mind your images cannot be too big (performance is key, after all).

## Implementing mobile-first design

### 1. Evaluation

To start the process, you should first evaluate your existing website (if you have one). You can take a **Google** [**Mobile-Friendly test**](https://search.google.com/test/mobile-friendly)  to see if your website is ready for the next step. If not, look for errors like slow load times, big images, broken links, pop-ups etc.

### 2. Use Media Queries, they are the Technical Heart of Responsive Web Design.

To account for different browsing conditions, **responsive web design** dictates that different rules must take place under different circumstances, usually the browser’s or **device’s screen (the “viewport”) width**.

How do we define these rules? **Media queries**. Media queries are CSS commands that determine under what conditions other CSS selectors take effect.
For example, one media query might tell a browser, “pay attention to rules 1–10 when the screen is up to 320 pixels wide,” while another might say, “pay attention to rules 11–20 when the screen is 321 pixels wide or greater.”

Media queries are easy to identify: they begin with **“@media”.** Browsers read the CSS rules (e.g. selectors) listed between the media query’s { curly brackets }

There’s no technical limit to the number of conditions a media query can display. This query is perfectly valid:

`@media screen and (min-width: 480px) and (orientation: landscape) and (aspect-ratio: 4/3) and (color: true) { … }`

Media queries give us plenty of possibilities, there are a few of them:
**Aspect-ratio**: a comparison of a browser window’s width and height.
**Color**: whether a device has a color screen or not.
**Color-index**: the number of colors a screen can display.
**Device-aspect-ratio**: a comparison of the screen’s width and height.
**Device-height**: the number of pixels a displayed vertically by a device.
**Device-width**: the number of pixels a displayed horizontally by a device.
**Height**: the number of pixels displayed vertically by a browser viewport screen.
**Monochrome**: how many bits that pixels in a grayscale screen use.
**Orientation**: whether a user is currently holding the device horizontally or vertically.
**Resolution**: the number of pixels per inch or centimetre displayed by a screen.
**Width**: the number of pixels a browser viewport uses horizontally.

Writing **custom styles** and media queries gives us full control of the layout and as little code as it is really needed without unnecessary libraries and frameworks, that is what I prefer in my work. But if you don’t care about it, you can just use some CSS framework like [**Bootstrap**](https://getbootstrap.com/) which also has built-in media queries.

### 3. Choosing the right framework

An **HTML framework** will be good for enhancing the design of mobile websites. A framework that uses **columns and rows** will make it easier to optimize sections for any screen resolution. Currently the most use CSS framework is Bootstrap, based on a 12-column grid, which has components and options for laying out your project, including **wrapping containers, a powerful grid system, a flexible media object, and responsive utility classes**.

### 4. Alternatives to rich and complex frameworks

There we also have **Sass extensions** to create flexible layouts like **“Susy and Breakpoint”.**
Creating **responsive layouts** can be challenging because of the maths involved, so it's common for designers to turn to frameworks and/or Sass to simplify the process. A lot of frameworks are based on a **12-column grid**, but a responsive site doesn't always fit into this structure. In that case, we can use just “Susy and Breakpoint”
For more information, you can take a look [here](https://www.oddbird.net/susy/).

### 5. Size your body text appropriately.

Differences in **font size** should be reduced for a smaller viewport. Viewports also differ in more than **physical or pixel dimensions**. Think about how the user interacts with the display. Generally, the scale of fonts **should go down** when going from desktop to mobile, but it is also obvious that people tend to hold their phones closer to their face. Think about how people will consume the content and adjust the typography accordingly. So Off the desktop, there's less space to play with, but the user is closer to the screen and they can read much smaller texts. Your typography should scale with regard to reading.

A **“max-width”** declaration of content and  **“font-size”** with **“media-query”** gives us control of the number of characters per line on different devices. A guideline is to have from **45 to 75 characters per line**. Longer lines, up to 95 characters, are read faster on screen, but it’s not clear if that means readers enjoy reading more or understand better.

### 6. Use visual variation other than size:

![](https://s3.amazonaws.com/a.storyblok.com/f/86602/535x311/afc03bb589/example.png)

Page layout and typography should **adapt in harmony to work at different scales**.
For example in expansive desktop design, you might make headings several times bigger than body text for **clarity and drama**. On a mobile screen, **oversized headings** just push body text down, breaking continuity and demanding excessive scrolling.

### 7. Be aware of responsive images and videos

By **responsive image**, we can understand it as a method for providing the browser with multiple image sources depending on **display density, size of the image element** in the page, or any number of other factors.

**Different sizes of devices need a different resolution for the same image**. The problem is that images have **inherent dimensions**. We can’t stretch a photo that’s 500×250 pixels to anything beyond 500 pixels wide because it’ll get pixelated. 

Retina displays and mobile devices complicate things even more. To make our images responsive, we now have to take three things into consideration:

* The device’s dimensions
* The image’s dimensions
* The device’s screen resolution

The idea of having the browser resize images has been a key part of **responsive web design** from the beginning. CSS and HTML already allow us to handle this issue and load a proper image to the appropriate device by using srcset and image-set(). For more details go to this example: <https://css-tricks.com/responsive-images-css/>.

![](https://s3.amazonaws.com/a.storyblok.com/f/86602/884x664/4c606646df/screens.png)

The other thing is that we should care to compress images before we put it on the page. We can use, for example, an online tool like [TinyPNG](https://tinypng.com/) to reduce the file size as much as it is possible.

### 8. Responsive typography

**Choose fonts wisely** - working at multiple scales demands even more of your typefaces. **Choose fonts sparingly.** Don’t load too much, two to three different kind of fonts are completely enough. Make sure to test real type in the browser on various platforms for appearance, page weight and render speed.
Layout can break the most meticulous typography. Remember about the white space around the words – where your eye can rest – and use of imagery. This is where the responsive designer needs to be particularly alert. On a narrow screen**,** images might reduce readability**.** A **floated image** could wrap long words below it rather than next to it.

### 9. Adjust line spacing

**Line height**, traditionally known as 'leading', is often neglected. What's just enough to keep lines distinct at one scale or measure may be too much at another, losing the reader's eye as they try to move from one line to the next. No-one enjoys reading between the lines.
Just remember to optimise line-heights at different break points.

### 10. Responsive content

**Width and padding values** will need to vary with viewport size to keep layouts feeling visually 'right' as well as managing line length. For example when setting break points between **multi- and single-column layouts**, a wider single column with horizontal space may be more comfortable on medium-size screens.

### 11. Use flexbox and grid

**Flexbox** is great for individual modules, controlling the layout of pieces of content within each of the modules. There are layouts we attempt to deliver that can be more easily achieved using Flexbox, and this is even more true with responsive sites.
**Grid** is more for the macro-level layout. The Grid layout module gives you a great way to describe your layout within your CSS. The one thing is about the grid that it doesn’t work on older browsers.

### 12. Responsive and device forms

![](/uploads/screen-sizes.png)

**Forms** are one of the most important elements in any **digital product design**, and whether you need a signup flow or a **multi-view stepper**, you need to design it so that'll work effectively on mobile devices just as well as on the desktop. 

* Design for vertical scroll

![](https://s3.amazonaws.com/a.storyblok.com/f/86602/338x250/7b9e530764/smartphone2.png)

When it comes to laying out forms, you should design the entries in one column: if a form is in a single column, the path to completion is a straight line down the page.

* Place labels above fields

![](https://s3.amazonaws.com/a.storyblok.com/f/86602/341x262/8744b50b52/smartphone.png)

Labels tell users what the corresponding input fields mean. When choosing where to place your labels you have two options: **left-aligned** or **top-aligned**.
Left-aligned labels work well if the form is being completed on a desktop or tablet. However, they are an awful solution for mobile devices where there is limited screen estate.

### 13. User experience above all

As mentioned above, **user experience** on mobile devices is one of the highest priority. Make sure that visitors are able to explore your website thoroughly and that the crucial information is available at first glance. Your written content should be **appropriately sized** for various screen sizes, this also applies to buttons and images.

### 14. Simple navigation

Not every type of menu and navigation will work as well on mobile as on desktop.
When we have, for example, only free options then for mobile we can just change their **axis to column**, center it and place in some top part of the layout. But the most recognizable mobile menu is called **Hamburger**. Top-level **menus with dropdowns** should be replaced with a hamburger menu because people are used to it :)

### 15. Advances techniques for responsive content.

There we also have some tools to manage content in a more dynamic way like **conditional** and **lazy loading**. 
One technique is to hold off loading something until the user shows intent to use that feature. This would be considered **conditional**. You can hold off loading in the social icons until the user **hovers over or touches** the icons, or you could avoid loading an iframe Google Map on smaller viewports where the user is likely to prefer linking to a dedicated mapping application.

**Lazy loading** is defined as something that you always intend to load on the page – images that are a part of the article, comments or other related articles – but that don't need to be there for the user to start consuming the content.

### 16. Speed optimization

The speed of your website is crucial for good **SEO**. Google uses a ranking factor to check it, so you should do everything within your power to make your website fast and reliable. You can try **installing plugins for caching**, **optimizing images and switching to HTTPS.**

## Need Help with mobile-first web design?

As you can see, a **mobile-first approach** is crucial to have an amazing webpage that is frequently visited and scores high in **Google**.

If you need help in adapting your existing website to mobile-first standards or are thinking about creating one from scratch, feel free to [contact us](https://selleo.com/ux-design). 

Our teams of experienced developers and UX team will be happy to help you get there!

The development of a mobile phone that evolved into a smartphone changed the way we communicate, shop, browse the web, take pictures etc. It has revolutionized our world and changed it forever. Companies recognize the importance of being mobile-friendly.

What Is A Mobile-First Design?

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.

Łukasz Siwek

Blog posts that I worked on

What Is A Mobile-First Design?

Ultimate Guide How to Optimize Registration Form for Higher Conversion

Tell us about your project