Table of Contents
Mobile design is becoming more important as more and more people use mobile devices to access the Internet. The problem is that creating great mobile design and delightful experience is not easy. There are many things designers have to do right. Otherwise, people will not be willing to stay on the website for a long time. And, they may not give us another chance. So, we have to it right on the first try. Here are some tips to make it easier.
1. Define and understand your audience
Understanding our audience is the first step to create and build great mobile design. How can we optimize anything if we don’t know who are we optimizing it for? This just doesn’t work. We need to have at least some idea about the people who will use our website. Only then can we form some theories and assumption that will survive first contact with our users. Otherwise, creating great mobile design will not only be much harder, it might even be impossible.
The next step is simple. We need to start asking questions. We need to form some idea about our perfect user. And, no. Our target user is not “everyone”. If we want to create great mobile design and delightful experience, we must be more specific. How much specific? We can start with demographic and psychographic data such as personality traits, values, opinions, attitudes, interests, lifestyle, age, income, behavior and character archetypes.
We should also consider user’s goals, jobs to be done, aspirations, frustrations, motivations, interests and hobbies. All these information will help us create something called user persona. This is basically an analogy to a real living person, with her own life. When we put this together, we will understand our perfect user much better. Then, we will have a higher chance to make our mobile design a perfect right fit for our user.
The key is to remember that there are different types of people. Trying to create design that will fit all of them is a lost battle. Instead, we should pick just one type of user, understand her, and create the best mobile design for her and her only. So, define your perfect user first. Create a persona for her. Then, use this persona to understand her. Then, you can start thinking about the design.
2. Design for mobile first
One way to make creating great mobile design easier is starting with it. In general, there are two was of creating a design for web. First approach is desktop first. Here, you create layout for desktop devices first and then move on to smaller screens. Mobile layout, or mobile design, comes as the last one. The result also usually looks according to that. Mobile layout is just smaller or squeezed version of the desktop. This is not even real mobile design.
The second approach is mobile first and it is the opposite of desktop first. You start designing for mobile screen and move up, with desktop being the last. This is the approach I suggest you adopt. When you start with mobile design or layout, you have to tackle the smallest screen as first. This forces you to really think about your layout. You choose what elements to use and what is the best way to structure them. There is also no garbage like it would be if you started with desktop layout.
When you start with desktop, it nudges you to think about how to take the content you already have and fit (squeeze) on a smaller screen. Mobile first is different. You start with blank canvas. Sure, you are still limited by the size of the screen. However, there is no content you “have” to use just because you already used it layout for desktop. This gives you more freedom and flexibility you may not have. Do you want to know more? Take a look at my Guide to Mobile First Web Design.
I have to warn you. Some designers still like to create mobile design or layout while sticking to the old school of desktop first. They think that they can work on both layouts separately, without one affecting the other. For some designers, this may work. I tried this approach and it didn’t work. I still had in mind the layout for desktop and I was still thinking about what I used there. There were still those voices like:“You should use this.” or: “Structure on desktop is completely different.”
For this reason, I think it is better to stick to mobile first approach. This eliminates any possibility of you being influenced by different version of the layout. Anyway, try it on your own and see what works you. Then, stick to it.
3. Forget prescribed breakpoints
There is one thing I want to mention that’s related to mobile first design. Stop focusing too much on specific breakpoints. It is okay to use the most common breakpoints as your guide. However, they should be here only to assist you, not dictate how you should bend or break the content. It doesn’t matter if it is a common practice to “break” or “change” the layout when it reaches 480, 768 or 992 pixels. If these breakpoints don’t work for your content, simply don’t use them.
There is a big problem with letting these breakpoints dictate your layout. You can’t over all possible breakpoints this way. There are just too many devices with too many different screen sizes. What’s a better approach? Let the content define the breakpoints. For example, if your navigation breaks under 591 pixels, use that as your breakpoint. Or, if it breaks under 1018 pixels, use that (and read the next section about simplicity). Apply the same approach to any other element in your layout.
So, please, if you want to create great mobile design that feels natural let the content dictate the breakpoints. And not the other way around. This might require more work than the “common” approach. However, you will not have to think about what screen size will be trendy the next year. Your layout will be able to adapt to any screen, future or past.
4. KISS – Keep it simple
Next, keep it simple. Mobile screen offers only so much space. Don’t try to fill it with elements and content just because you can. Instead, focus solely on essentials don’t over-complicate things. Also, embrace white space, don’t try to suppress it. It is usually better to give elements and content more space and let it breath. This will help you make the content too dense which could lead to overwhelming people. In other words, it will make it for people easier to read and understand.
Another tip for creating great mobile design and experience is by reducing the number of tasks per page to one. One screen for one task. Don’t fill the page with number of possible actions. Instead, choose one action, task or goal and make its completion as easy as you can. This will help you reduce the effort people have to put in to get what they want. As a result, they may spend more time on your website and come back again in the future. This also means only one CTA per screen.
Also, apply this simplicity to navigation. Not every piece of content needs a separate page. And, you don’t even have to use all the content. It is often better to do more with less than trying the opposite. So, think carefully about the content and every page. Ask yourself every time whether it is necessary. Then, test your assumptions on real people. Smaller number of links in navigation will make it easier for people decide where to go. Just make sure to stay away from the extremes.
Make your forms short
Finally, the forms. I like to follow one simple rule. If some input is not necessary or required, don’t include it. Easy, right? We often like to use dozen of inputs and mark only half of them as required. Why? We should do our best to make filling the form fast and easy. From this point of view, isn’t using unnecessary input counterproductive?
Imagine you arrive on a website with form that stretches across the whole page. It doesn’t matter that 70 % of those inputs are optional. You will leave the page with disgust before you can even realize that you have to fill in only 30 %. If you want to increase conversions on your website, this is one way to do it. Simplify your forms as much as you can. If you don’t need some information, omit it. Or, you can ask for it later.
However, in that specific moment, ask only for those information you need to get so your user finish the action. When it comes to mobile design and form, there is a lot we can do. I suggest you read these 10 Best Practices for Designing More Usable Mobile Forms Pt1 and Pt2.
5. Prototype, test and iterate
Let’s talk about the dirty part of mobile design and development. Don’t worry. This one will be quite short and simple. Don’t spend too much time on thinking about your mobile design. Trying to make every pixel perfect is a waste of time. On the web, you will never have as much control as in Photoshop or Sketch. However, this doesn’t mean that you should skip it completely. Instead, focus on creating just a few basic sketches and designs that will help you form the bigger picture. Then, build your first prototype and test in the real world with real people.
This agile approach is much better than playing with pixels for weeks in your favorite editor for a couple of reasons. First, it gives you real data. When you build mobile design on your own or only with a small group of people, all you have are theories and assumptions. The problem is that you don’t know if your theories and assumptions are valid until you test them, but that might be too late. Imagine spending a month or two designing something that is completely wrong.
This brings me to the second reason. You have much tighter feedback loop. Instead of creating mobile design in vacuum without any feedback, you get a lot of it and more often. Let’s say you decide to work in weekly sprints. Then, you get feedback at the end of each week. That will help you work much faster. Or, what if you test new iteration every day, or two days? Can you imagine how quickly you can move from initial sketch to working mobile design?
The third reason of prototyping and testing your design as soon as you can is that it will put you in contact with real users. Why is this so important? You never know how some people may interact with your design. Some people may not understand icons you used. Or, the flow may not seem natural to them and make it harder for them to help them achieve their goals. It can also happen that you chose wrong color palette or the text is not readable or legible.
There are many details you may either miss or consider “natural” or “logical”. However, that doesn’t mean other people will agree with you. Something that may seem “logical” to you may seem weird to some people. The opposite is also true. You can see some behavior pattern weird, but it can be natural for some people. You will never know about these “details” until you let other people (real users) test your mobile design. So, move to prototype and test it as soon as you can.
6. Focus on speed
The last tip is about focusing on speed. Some of us use our mobile devices to access the Internet when we are in a hurry. For example, when we want to quickly check something. Who knows, we may have only minute or two. In that situation, we don’t have the time to turn on our computer and wait till it’s ready to use. Another time when mobile device is better is when we are outside and phone in our pocket is our only option. This is probably the most common.
Last example of a perfect situation is when we have nothing else to do and some time to kill. Whatever the case may be, there is one metric that will determine the quality of our experience. This metric is speed. If the website we want to visit is painfully slow, our experience will be also bad, even painful. On the other hand, if the website is blazingly fast, there is a chance our experience will be quite good. We have to focus on optimizing our websites not only for the eye (visuals), but also for speed. We have to make sure our website loads quickly. So, how to do it?
Resize, scale and compress
One of the easiest things to do is to optimize assets used on our website. If we use images or videos, we should also optimize them. Meaning, we should resize them and create multiple versions, each version served to appropriate device. There is no reason to serve the same high resolution image or video to desktop and mobile devices. Instead, let’s keep these resources only for desktops or devices with similar resolution. Then, let’s use smaller version on mobile.
Next, we should also use various tools to compress these resources. Tools such as JPEGmini, PNGoo, pngquant, imagemin, FileOptimizer and so on. This will help us save some kilobytes and increase loading speed of our website. Another, more technical, step is minifying CSS as well as JavaScript files. We can also minify our HTML files to save some additional kilobytes. Doing so will again help us make the website load faster. However, the difference will depend on its overall size.
We should also consider removing some CSS or JavaScript files completely. It is can be a good idea to use various plugins to make the website look great. However, these plugins can have significant impact on the loading speed of our website. This may not be such a problem on desktops with better hardware and faster internet connection. However, mobile devices can have performance or connection issues. So, it may be a good idea to prioritize performance over gloss.
Use lazy and conditional loading
Finally, there is lazy and “conditional” loading which can also help us improve performance of our website across all devices. Although we may not be able to remove any resources, we can delay their loading or load them only under certain conditions. Lazy loading for images and videos is well tested and proven technique. Another one is splitting our CSS and JavaScript files into smaller pieces or modules and load each of them only when necessary.
For example, we don’t have to load the whole stylesheet on every page. Instead, we can use one general stylesheet with components we use across the web. Then, if we have some page-specific styles, we can put them into separate stylesheet and load it only on that specific page. And, we can apply the same approach or technique to our scripts. If we use certain script only on one or two pages, there is no reason to include that script everywhere.
Instead, we can put it into separate file and use it only on those two pages. And, this will be even easier to do when ES6 modules will be fully supported in browsers. Then, we will be able to use include different scripts in HTML as “modules” and load them asynchronously. For now, we can work with good old scripts spit into multiple files. So, instead of using everything everywhere as default, we can use only what is necessary and when it is necessary.
Closing thoughts on great mobile design
There is one last tip I will give you that will help you create and build great mobile design. When you design for mobile screens, focus only on that. Don’t think about desktops or even on tablets. You will get to them later. Dedicate your whole attention to creating the most delightful experience for those devices in people’s pockets. When you work on responsive design, see it as multiple different experiences, not just multiple variants of one experience. Try it and see the results.
If you liked this article, please subscribe so you don't miss any future post.
If you'd like to support me and this blog, you can become a patron, or you can buy me a coffee 🙂
Become a Patron
