1. Redirect mobile users to a mobile friendly version of the site
To ensure proper display, if a mobile device user visits your site (yousitename.com), it is best to automatically be redirected to, example, mobile.yoursitename.com or m.yoursitesname.com.
2. Wonder about structure and code
Ask yourself these questions before starting to code you mobile site:
- Do you go with a mobile-friendly language like WML or the XHTML mobile profiles?
- Do you build an app for iPhones, and then one for the Android?
- What about modern standards like HTML5 and CSS3?
3. Think about the speed and user cost
Keep the sizes of everything on your site
as low as possible.
4. Consider layout essential when designing your mobile site
- A design’s layout in mobile devices is problematic because:
- Mobile devices come in all shapes and sizes
- Mobile devices have different levels of quality and resolutions
- Mobile devices may or may not support zooming, others scroll content
- Scrolling in mobile devices is more difficult because of their small screen
5. Keep it simple
It pays to use a single column layout. With such limited space to contend with, multi-column layouts often break.
6. Avoid scrolling
Having to scroll down a content-heavy page isn’t a fun experience on cell phones. A good mobile design should have a clean layout with simple navigation options.
7. Big navigation and clickable objects
Ensuring that your mobile layout has large and easy-to-press links and clickable objects will be essential in streamlining the experience. Reducing the amount of clicks required to achieve an action — which is a good practice regardless of whether or not you’re designing a mobile site — is all the more important in mobile web designs.
8. Interaction in Mobile Devices vs. Personal Computers
We interact and consume information differently with a mobile design screen versus a regular computer screen. With the lack of a mouse and the way our hands gesture to instigate actions and reactions, the traditional interaction patterns we’re accustomed to, such as hovering over a link (for example), is different.
