What is Mobile-First design?
Mobile-first essentially means you are designing for smaller, mobile screens before considering desktop designs. The process would be to start at mobile phones, followed by tablets, small desktop screens and then larger desktops.
Why think Mobile-First?
We’ve entered a time where more people are using mobiles over desktops (see article on statistics). While we’re all in the habit of looking at desktop screens first, the fact of the matter is that mobile matters! Some people don’t ever look at your website on desktop, so it’s time to start thinking about those users.
How does Mobile-First design improve my website?
Designing for mobile screens first means the designer and client are forced to consider hierarchy of content due to having less width to work with. The process means that the designer needs to think about the user and what their priorities are before considering look and feel. After all, content and target audience should dictate look and feel!
Some drawbacks.
Desktop web designs were always created first, simply because this was the format that included all elements in their entirety. Many elements of a website are removed or reduced for smaller screens, so starting with the screen including the most information made sense. It can take some getting used to, but luckily, the process of mobile-first means you take desktop elements and layout into consideration in the early stages.
Content-First.
What do you want to achieve from your new website? More customers? More interaction? Sign-ups? Don’t even think about the look of the website until you have thought about it’s message, goal and what content is required. Once you know what you need, prioritise the content and put into a logical hierarchy. This can then easily translate to how your mobile design is laid out, top to bottom.
Object-oriented.
Object-oriented User Experience (UX) design is where we pull out elements of a brief in order to form objects. It is thinking in terms of layout before look and feel. This is essentially a technique for content-first design. You are working out what the objects are, how they are categroised and where they go. You need to think about how the user interacts with these objects. Where are the calls to action and links?How does each object interact with other objects? There’s a process to this, but we’ll save that for another blog!
Mobile design.
Now that you have your content prioritised, gather the actual content (copy, images, etc). This should slot nicely into the hierarchy you have laid out. And there you have a sort of wireframe to work from. Create the look and feel of your mobile website based on that. The UX is clear in your head as you design, so your design is sure to suit the user. I know, it’s not as exciting designing for mobiles first. There is so much restriction! No big canvas to work with. Believe me… when you get to the desktop design stage, the design decisions will flow and you’ll end up with a better result.
When can I do the desktop design?
After designing for mobile, work on your tablet designs, often expanding slightly on the content in the mobile size. You have some more room for nice infographics and design elements. Then you are ready for desktop designs! It’s not easy. You are faced with content from a more restricted format and you now need to make it more robust. Think about spacing out the design elements, add more elements if relevant and build on the great core content you have.
Now what?
Whether you are a web designer or someone setting up a website for their business, have a look at your current approach and think about how content-first can benefit you. It can take some time to get your head around, but it is more systematic and keeps your users in mind. You want to engage your users and give them the content they need in a way that’s easy for them. Thinking about the content before designing means you leave no stone unturned and are less likely to have late design changes. A client shouldn’t be forced to fit their text and images into a website that has not been designed with their users and content in mind.
Useful links
http://metamonks.com/mobile-first-vs-responsive/
http://wearejh.com/design/benefits-of-a-mobile-first-approach/
