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
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
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
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
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.
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)