It seems like everybody is adopting into the smartphone era of communications. It’s so much easier working within apps for your contacts list and text messages. Plus the mobile web for Android and iOS offer a simply beautiful experience. It’s for this exact reason that I recommend all web designers get in touch with creating a mobile strategy.
You’ll need to plan ahead for what type of mobile web layout would work best. In this article I want to share some tips and ideas for getting started with planning your ideas. After you’ve got a solid foundation it’s not difficult coding the layout and directing mobile users over. Your website will likely pull in much more attention and will receive a whole lot more positive feedback from users.
Take a look at your website and write notes on which pieces are most important. There simply isn’t enough room to fit everything in the same order unless you code a responsive layout first. Consider where your navigation menu will fall and how users can traverse between pages.
I really like the idea of links which drop down from the top or slide in from the side. This effect has been created in various iOS apps which keeps the navigation links initially hidden. But it’s also just as easy for your visitors to tap a menu icon and open up the nav box. You could alternatively place the links at the very top of your page in a repositioned, focused layout.
The most important facets of your mobile layout should be focused on big content. Written blog posts or videos or image galleries are often the cornerstone to creative webpages. It’s your job to offer this content in the simplest and most straightforward fashion.
Sketch a Prototype
Paper may not be the place you want to start off initially. Websites are a lot more difficult to sketch since you have so many different elements and so much screen real estate. But with mobile devices you’re working with a limited area and page elements can fit much easier.
It would only take 10-15 minutes at most to sketch some mobile web views. I find this step is almost crucial because it forces you to sit and think before designing or coding anything. Each mobile layout should accurately reflect your main website but repositioned for much smaller device screens. You can use this to your advantage when you learn how to focus on single specific elements within each page section.
Most websites these days have at least some media aside from text on the page. Images, video, audio, or even other Flash-based content could be considered different forms of web media. Unfortunately Flash doesn’t play so well on mobile browsers. But there are alternatives for setting up images and other similar files.
You can use the CSS property width: 100%; on all images to resize them accordingly. This will automatically scale down if the visitor is on their mobile device and the screen is too small to fit. What’s great is that as your visitors turn their smartphone from portrait to landscape the images will also resize themselves. This is a responsive technique which has become popularized by more than just a few designers.
It’s best if you can let your text naturally fall around this other media content. Reading from a smartphone is tough so you want to make the process super easy for even your average visitor. Headings should dominate and clearly stand out from the rest of the page. Also be sure to use plenty of extra space between lines in your paragraphs. This style can be set using the line-height property in your CSS.
Running Case Studies
If you are working in a team of developers try to get as many opinions as possible. People who are familiar with the mobile web will know exactly what they’re looking for in a good design. Gathering feedback is crucial because it helps you nail down which interface elements are just not going to work.
Even if you can’t share a demo with any teammates you could still launch something up online very quickly. Instead of re-coding the entire layout you could redirect mobile users to a subdomain like m.mysite.com. This provides a live sandbox where you can see who is visiting from their mobile devices and how are they interacting with each page. This analyzation is necessary for you to grow as a user experience designer and pick up which mobile trends work and which are just annoying.
Hopefully these ideas can get you thinking forward about mobile development. Mobile Safari and Firefox allow you to resize websites and pan around even at 100% zoom. So technically a non-mobile optimized site can still look good on nearly any smartphone.
But it’s worthwhile to develop an alternative layout so that mobile users can get a richer experience. This also builds credibility for your website where visitors on their phones can expect a much nicer layout. It takes practice and a lot of time checking out other examples of mobile layouts before you will feel totally comfortable coding your own. Get out there and start practicing now, because the mobile revolution is in full swing!