AnodisedBlue Web Design Blog

Mobile Website Design Tips

Sep 22

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

  • 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


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


Recent Posts

Google Analytics Not Working

Custom MailChimp Email Templates

Building a Simple Contact Form in DotNetNuke 5

Mobile Website Design Tips



Comments

Submit your website
Web Design Blog Ipswich - AnodisedBlue - AnodisedBlue Blog - Google Analytics Not Working
# SEO software


electronic cigarette