A true mobile website isn’t just a desktop website on a smaller screen. It is a completely unique experience. Designing for a mobile environment requires a different thought process than designing for a traditional website.

Technology is constantly changing and evolving. New computers and mobile devices are being created every day. New browsers and browser versions are released all the time. As a web designer, you need to stay on top of technology, whether or not you are designing for mobile.

You need to know how to design within technical constraints. You need to know what is possible and not possible on a screen, regardless of the size.

And finally, test, test, test! There is nothing worse than a website that doesn’t function properly, mobile or not. We’ve all had that unpleasant experience.

Ten Tips for Better Mobile Web Design

1. Think mobile. A mobile phone is completely different than your traditional computer. You can use it anywhere! The screen is small, and the UI (user interface) takes up the entire screen. The user is probably multitasking and not as focused as a desktop user. You need to give users what they need quickly and easily – because they’re on the go.
2. Think of your users. Why would they be accessing your website on a mobile device? Where are they when they are accessing your mobile site? What type of information are they most likely looking for? Focus on their needs. Make sure that the information they need is easy to find.
3. Don’t just adapt your traditional site. A mobile website shouldn’t be the exact translation of the desktop website.  Think about what mobile does well, and modify your mobile site to cater to those ideas.
4. Think simple. When designing a mobile website,you need to keep in mind that simple is better. This doesn’t mean that your design has to be boring; it just needs to make sense for the device. Take a look at our mobile website. It is simple and easy to use, but the design and use of color make it a fun user experience.
5. Easy navigation. Try to eliminate the ‘fluff’ from your traditional websites navigation and only focus on the important information that would be important to a mobile user. If people frequently visit your business, make sure that it is easy for the user to find directions. Remember, the mobile experience should be different from the desktop experience.
6. Flawless UX (user experience design). When designing for mobile, the UX needs to be foolproof. This is not the place to break the rules. People’s fingers aren’t going to shrink just because you decided to include a small un-clickable link in your design. You don’t want your user to have to zoom in to read the font.
7. Prototype first. Start off by drawing your design on index cards to fully understand the size of a mobile device. Use a prototyping tool, such as Justinmind Prototyper or Balsamiq, to see how your ideas flow.
8. Consider RWD. Responsive Web Design is a method of designing and developing a website so that the display of the site adjusts to the size of the browser or device. It is a great tool to use when the situation is right.  If you can’t decide whether a responsive site or a true mobile site is right for the project, then consider the content. If there are a lot of pages and information on your site, you should build a mobile website. If the website or landing page doesn’t contain a lot of content, you should go with a responsive design.
9. Don’t use flash. This may be obvious, but flash will not work on most mobile devices.
10. Always include a link to the desktop version of the website. Sometimes people prefer this version to the mobile site. Make it easy for the user to get there.

Questions or comments?

Please feel free to contact me at lconstantino@skmgroup.com for more information about mobile web design.