4 mental approaches to mobile web design

workerbee

As the landscape of the internet continues to expand into tablets and mobile phones, the ability to design across these browsing mediums becomes all the more valuable. With that said, designing for multiple devices is easier said than done and the scope can become overwhelming.

This article breaks off a bite size piece by focusing on mobile web design and, specifically, several mental approaches that can help you get a foot in the door.

1. Keep it simple

Keep It Simple

What are the bare essentials needed to get the message across? Editing down the site content for a mobile version is helpful in many ways. It presents the designer with an opportunity to make an impact with one or few elements rather than making a clutter with many elements. It also spares the users from scrolling endlessly to get the content they need. Lastly it helps to keep with the quick and instantaneous pace of the cell phone world.

2. Embrace the vertical overflow

Vertical Overflow

Perhaps one of the most intimidating aspects of mobile web design is the small screen size. This can be intellectually relieved by embracing the vertical overflow or, in other words, by viewing mobile web design as a, sort of, scroll design rather than a small rectangular design. This allows a designer to think about how the page flows rather than how it sits in the confines of the screen.

3. Typographic execution

Typographic execution

When working with a simplified design palette it is extremely important to execute well and pay attention to the details. In mobile web design, the screen space often becomes consumed by copy so therefore typographic execution is especially important. Here, perhaps the most important thing to keep in mind is legibility.

It is important for a designer to continually read through the design text in order to maintain a comfortable point size as well as a comfortable word-per-line count. Furthermore, to use an analogy, forgetting to continually read the text is like a chef forgetting to taste their food!

4. Work in code

Work in Code Retro

Learning how to code is a big commitment, but it’s never too late to start and it comes with the incredible advantage of being able to see your design on a physical phone! Nothing can give a mobile web designer more confidence in handing over a design to a client than to know it looks and works perfectly on an actual phone.

Not to mention that this skill dissolves the commonly seen artistic disconnect between designers and web coders; designers should be in complete control of how a website looks and works. By neglecting to learn code mechanics, a designer is missing out on half the potential of the art of web design.

Note: One easy workflow for viewing code on a phone is to edit server files directly in your code editor through an FTP client such as Cyberduck. This way a designer simply needs to click “save” and reload the mobile site on their smart phone each time changes are to be seen.

Conclusion

Although mobile sites often contain less content than desktop sites, this does not make the design process simpler. In fact, the details and execution become even more important. With that said, using the tips above can serve as a jump start into learning the language of the mobile web design.

Cover Photo: Viktor Hanacek (via PicJumbo)

Related articles

The fundamentals of responsive website design

The fundamentals of responsive website design

The days of designing a website for a single desktop screen are well and truly over. Technology and the expansion of mobile websites are pushing web designers to re-think how their work is displayed across various devices. Think about it: how much browsing do you do every day on your phone vs. your desktop? Enter:…

30 beautiful mobile apps for design enthusiasts

30 beautiful mobile apps for design enthusiasts

With an ever-growing supply of mobile apps, it takes a lot to stand out from the crowd—both in functionality and design. With that in mind, we sloshed through app stores to handpick 30 beautiful mobile apps that designers and design enthusiasts will love. We’ve organized this article into seven sections, so you can easily find the mobile app that fits…

The new Google Fonts is a win for designers

The new Google Fonts is a win for designers

Google launched Google Fonts in 2010 to provide web fonts free of charge. Over the next six years it grew considerably, becoming very popular with web designers—for the obvious reason of affordability. The original website was definitely what the startup world would call an MVP: minimal viable product. It got the job done, but it…

Current Design Contests

Designers, check out these contests so you can start building your career.
0%