Website jumbled on I phone - Post ID...

User 1986958 Photo


Registered User
1 post

I have visual site designer 6.0 build 6. I just uploaded my new site www.rebeccasusi.com and it looks fine on several different computers. On the iphone, however, some pages come out jumbled with parts of the page on top of eachother. Also, my name at the top of the website is the only special text I used and I checked "used advanced text" so that this would stay true in any browser. On the iphone it comes through in default text. How can I fix these two things- the overlapping being way more of a problem? Thanks!
User 103173 Photo


VP of Software Development
0 posts

Unfortunately, Visual Site Designer cannot create pages that adjust to fill the browser screen (liquid layouts). You can enter a custom width/height setting to fill more of the screen, but keep in mind that anyone whose screen is smaller than your defined size will get a scrollbar (horizontal and/or vertical depending on what isn't viewable). You can center the design within the browser window so that any extra space is filled with the background color/image using the Page Window.
Learn the essentials with these quick tips for Responsive Site Designer, Responsive Email Designer, Foundation Framer, and the new Bootstrap Builder. You'll be making awesome, code-free responsive websites and newsletters like a boss.
User 1924622 Photo


Registered User
13 posts

Rebecca --

Go to this discussion:

http://www.coffeecup.com/forums/suggest … -websites/

It's another discussion in coffeecup forum, with comments about iPhone and other mobile / noncomputer devices.

Look especially at comments from ad99wd. There is one that offers a gold mine of info and links about websites for iPhone and other mobile devices.
User 482679 Photo


Registered User
3 posts

Hi Rebecca, I hope some of the following helps you. 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/.
User 98235 Photo


Registered User
55 posts

While this is somewhat off topic it may still offer up a solution,....some of the hosting providers have available for a nominal fee a "service" that consolidates the contents of your website and renders it compatible with mobile devices. I've never used it in that I don't think that large a majority of my different sites visitors are accessing my sites via mobile devices according to the site metrics available to me. In my case the hosting company charges a $2.99/month fee.

It might be worth looking into whether or not your hosting provider has available this type of option. For three bucks a month it's a whole lot easier than putting together a folder of pages optimized solely for mobile access.

I'll keep watching my metrics to see if there's any significant increase in mobile web access usage.

I work in a field where there's a large percentage of business conducted via mobile devices (I use 800-1500 min/mo in phone service and 20-50 texts a month and I'm a low volume user) but what I see being used regularly are texting and e-mail and little if any web browsing. I still use a plain flip phone digital with texting and a tablet for e-mail.
Redmond, OR - the High Desert
User 187934 Photo


Senior Advisor
20,271 posts
Online Now

I love my Palm Pre. Websites look almost the same as they do on my laptop. Palm doesn't do flash yet. :( I'm posting this from my Palm. I love technology.:)
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 539803 Photo


Registered User
2,156 posts

http://www.domainmonster.com/domain-nam … e-builder/

link above may be useful, not sure but they may still be doing a free trial for a year.
Started using CC VSD in January 2009, I don't do HTML code, Sales from CC site exceeding expectations taken me out of semi-retirement
Hosted FREE on CC S DRIVE www.chauffeurdrivenluxurycars.co.uk
My new VSD & SCCP site Oct 2011 www.deloreanjewellery.co.uk
My friendly window cleaner www.mwcwindowcleaner.co.uk

User 2049272 Photo


Registered User
1 post

Does anyone know what size I need to make the page for mobile phones. VSD 7 makes everything look great even on older smaller monitors but I plan to create a mobile page just for the newest content on my page www.archerynewsnow.com I am currently writing at I think 860 pixels wide. And that jumbles like crazy on smart phones. Thanks for any replies
User 414501 Photo


Registered User
564 posts

People are more willing to use a scrollbar for simple text articles (if thats what most of the aux pages on your site contain), but browser compatibility is most crucial for the pages where people have to interact with photos/links etc to find out where they want to go. With this in mind, Wordpress generates code that works PERFECTLY with regular browsers as well as mobile devices. Maybe design your index page in Wordpress and then create the auxiliary pages using Visual Site designer....
Chad Spillars
"Look I finally made myself a signature!"
User 104702 Photo


Registered User
293 posts

More or less the same discussion here: http://www.coffeecup.com/forums/designer/text-overflow/

John
John van Hulst

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.