Smartphone and Mobile Website Design Tips
It is inevitable that all Webmasters running a Web site will have to create a mobile or smartphone version of their Websites sooner than later. Designing a mobile version of a Website is in many ways similar to creating a Website fifteen years ago. Simple, basic HTML tags, low on graphics with emphasis on clear navigation.
Knowing the mobile and smartphone environment is important. Trying out the design on a phone is the best testing for a design. Those designing Websites for mobile users and do not have access to a mobile phone can get emulators for viewing Websites through the mobile eye. An emulator is included in the Android SDK that can be set to different OS versions and sizes. Therefore, a lack of phone is no excuse.
Keeping the design of a mobile Website as simple as possible is a wise choice. The screen is small, the Internet connection is often slow and the attention of the user can be short lived. From a user's point of view, it is important to offer choices such as having a link visible on top of the mobile version that links to the full version.
Speed is of the essence. Websites for mobile and smartphones have to load fast. It is unacceptable to let the user wait holding his/hers phone while the Website loads. It is indeed very easy to create mobile Websites that load fast. Avoid long pages, use as little graphic as possible and stick to standard Html tags.
There is no guarantee that Flash and JavaScript will work on a mobile phone or even on a smartphone. The time is not there yet even though good number of smartphone users might experience it as expected.
Smartphone users turn their phones around from portrait view to landscape. It is important to deal with this perfectly when designing mobile Websites making the Web pages scale nicely between screen sizes. A Meta tag that is very helpful when adjusting Web pages to screens and adjusting Web page content size is the "viewport" tag. Example: "<meta name="viewport" content="width=240, height=320, user-scalable=yes, initial-scale=0.7, maximum-scale=5.0, minimum-scale=1.0" />"
For more tips and knowlegde on smartphone and mobile Web design take a look at the great links below.
Mobile and smartphone design links:
