Mobile-First for Web Designers

If you are involved in the process of web design, (web designers, designers, accounts managers etc.) you need to think small before you can think big. As we covered in a previous blog post, smartphone and tablet usage may be surpassing desktop usage, and this might be hard to swallow for web designers who are used to envisioning their grand desktop experience right away. Especially when clients want to see desktop-sized mockups first, it seems counter-intuitive to first focus on the stripped down, less flashy mobile experience.

For a developer, responsiveness is not up for debate. Building from a small to a large screen is the easiest way to keep code clean and simple. It’s much easier to start with the basic, simplified version of the website and add on features and functionality as the screen size expands. Building the opposite way (from large to small) often results in a lot of rearranging and hiding of elements and sometimes, a mobile experience that seems to be an afterthought.

Web designers can start with a layout wireframe. Imagine each element on the page as a block (the logo, navigation menu, article with picture, etc.). Think about how the blocks will stretch and reposition based on screen size. If you have four consecutive news articles on your homepage, you might re-adjust the layout at tablet size so that there are only two articles in each row. In mobile display, one article at a time will suffice.

On mobile, your site might be as simple as a logo, navigation, and four articles. You want the mobile experience to be fast, simple, and utilitarian. On desktop, you might want additional features because there’s room for them, and users will have a fast enough connection to handle them. At this point, it’s simple to build off the initial mobile design. As a result, your desktop site will start out streamlined and easy to use, and grow from there.

These days, mobile-first just makes sense. Being optimized for the mobile experience is not just for certain businesses with certain demographics. Everyone, from your teenage niece to your favorite company’s CEO, is accessing websites on their phone. Don’t make their experience an afterthought.

Tags

Scroll, or tap/click a list item to filter posts by that tag.

• Web Development
• Mobile