I spent years (literally) getting my websites up to scratch on a desktop only to find they look shocking on everything else!
I've been reading a lot of the posts on this forum and elsewhere and have some tips for anyone out there who's struggling with the same problem....
1) The first step is to accept that you may have to make a "stripped down" version of your site. Why? Because Visual Site Designer is too complicated for most mobile browsers, and although there are
conversion tools available I've found none of them works reliably for all my pages. If you want to guarantee that all devices will be able to read your content then the easiest and quickest way to get going is to start using a HTML editor to make really simple, mobile-friendly versions of your main pages. If you've never done this before it can be a bit tricky but there are some great sites like
http://www.echoecho.com/ and
http://www.w3schools.com/html/default.asp which contain lots of helpful examples to use until you become confident.
2) I've created a new directory using
http://filezilla-project.org/ called ".../Mobile" where I can upload pages and they don't become mixed up with the ones which VSD generates.
3) Once you're done that, there is an easy trick which you can use to direct mobile users to a simplified version of your site. Simply copy and paste the following into the header:
<!--
if((navigator.userAgent.match(/iPhone/i)) ||
(navigator.userAgent.match(/iPod/i)) ||
(navigator.userAgent.match(/BlackBerry/i)) ||
(navigator.userAgent.match(/Android/i)))
{
location.replace("http://YOUR_MOBILE_SITE_HERE.html");
}
-->
</script>
4) That should work for most browsers but in case it doesn't I've written a bit of HTML which you can copy and paste into an HTML box using VSD and put at the top of the page. It reads "To view the mobile friendly version of this site click here"
<font size="2" face="@Arial Unicode MS" color="#999999"><b><div align="center">To view the mobile friendly version of this site click <a href="http://wYOUR_MOBILE_SITE_HERE.html" title="Access the site from your mobile" >here</a></b></font>
I hope that helps. If you want to see it in action go to
http://www.noveltea.co.uk/.