Written by:
9/22/2011 5:50 PM 

• Use CSS percentages for layouts and fonts to allow for fluid changes depending on screen sizes
• Don't have any fixed width divs if you can help it, if you do try to make them aligned to the centre.
• Use images as little as possible or if you do ensure they are small to save bandwidth.
• Test in as many mobile browsers as you can, there are emulators available for Android, iPhone and Windows Mobile.
• Keep the content relevant and concise to save space, scrolling down on a mobile or handheld becomes a chore after a while.
• Use tags that allow clicking to call, that way the user doesn't have to type in the number to contact you.
• Don't use buttons or links that are too small for a clumsy digit on a small screen to press, the last thing you want to do is be concise clicking a link in a rush in the pouring rain!
• Ensure you use the correct doctypes.
• Add resets at the top of your CSS, this resolves many issues with font sizes etc in different browsers.
• Don't use tables.
• Don't use flash if you don't need to, try to stick to CSS.
• Use a different CSS file for different platforms.
• Its far better to design a mobile site from the ground up than alter an existing desktop site to suit a handheld.
• Use high contrast and bold colours because its easier to see on a small screen in harsh sunlight.
• Don't scale large images down, size them to suit your site as it saves bandwidth.
• Make sure you get your message and contact details across at the top of your site so its seen on a small screen as soon as its opened.
• Put any JavaScript at the bottom of your markup, then at least the site loads completely before it hangs due to an error.
• Some developers ignore developing for Internet Explorer Mobile because its a Class C browser, however there are thousands of people who use it.
• Simple, Bold, High Contrast is better for a small screen, think of a mobile site as a virtual business card rather than a full on bells and whistles site.
• Be clever with your code, great things can be done with simplistic markup.
• You can develop a mobile site in standard ASP.Net and it will work on most handhelds - no need to be specialised other than for clever CSS and design.
• Keep navigation simple, easy to use and minimal.
• Use simple fonts, not all mobile browsers support fonts like a desktop does.
• If its a handheld like an iPad or iPhone sometimes its better not to redirect them to a mobile site as Mobile Safari can render normal sites and the user may want to look at the main site. Let them have the choice.
• Try to minimise the use of forms - it can be a pain to fill in fields on a mobile even with predictive text input.

Copyright ©2011

Trackback Print

Tags: Mobile Site Design , iPad , iPhone , Android , Mobile Web Design

Categories: ASP.Net, Web Design

Location: Blogs AnodisedBlue Blog

Your name:
Your email:
	(Optional) Email used only to show Gravatar.
Your website:
Title:
Comment:
Security Code Enter the code shown above in the box below
Add Comment   Cancel