Designing for mobile devices such as iPhones, Androids, and iPads is quickly coming out of the “hot new trend” stage and becoming standard practice. If you have put off implementing a mobile version of your website, don’t worry; the design and development communities have had a few years to experiment with mobile technology to get things right. So, there are far more options to chose from when creating a mobile website. This article aims to point out these options and provide links where you can find out more information.

Mobile Website or Mobile App?

The first thing to decide is whether you need a mobile version of the website or an actual mobile app. For example, when going to any banking site on a PC, you use an app when logging in to your online banking. To mobilize this, you probably would want to go the way of the mobile app. In that case, you can start by visiting this article on SmashingMagazine.com. If you only need a mobile website, then continue reading.

Mobile Web Design Trends

A logical first place to start is studying mobile websites and picking out common characteristics. But, this can be time-consuming and very monotonous. Fortunately, Smashing Magazine also published their findings in a case study back in December 2010.

How Do I Design For Hundreds of Screen Resolutions?

When the mobile Internet was in its infancy, developers only had to worry about creating two or three versions of their website, each site optimized to fit the screen of a particular device. Presently, there are over 400 variations of screens on the market. Designing a custom site for each resolution would be crazy. The solution is “Responsive Web Design”. Responsive Web Design means that the developer creates a function to detect the visitor’s device and/or screen resolution and adjusts the layout accordingly. This also means that web sites need to be designed with fluid layouts rather than static. Visit Guidelines for Responsive Web Design to get more detailed information.

How do I Design A Mobile Website?

Designing for mobile devices is quite different from the regular web with respect to a few things. First, you need to design your links to be accessible on touch screens such as the iPhone. This means increasing the hit areas to the link’s surrounding real estate. Second, you need to have the website respond to the visitor’s screen resolution. This means using CSS3 media queries, JavaScript, or implementing a user-initiated method. Third, phone numbers need to be clickable. In other words, when the mobile device user clicks it, the phone calls the number. And finally, remember that the iPhone and the iPad don’t render Flash.

How do I get Started?

The process of designing a mobile site depends on how you design regular websites. I design web sites by laying out the interface in Photoshop, then translating that into HTML and CSS. If this is the same method you use, then you may find this link helpful.

Mobile web design is the new norm, yet there are new ideas on the horizon. For instance, many app developers are starting to play with the idea of making mobile web apps that can be utilized from any mobile browser. What other new trends do you foresee for mobile web design?