Why does text not appear the same in browsers as it does in FWP? Spacing and formatting seems to be different, and hence positioning is thrown out.
Graphic boxes are OK, so what is the problem with text?
If I could work out how to post images here, then I would attach screen grab examples.
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Your issue is well known. Here’s the reason why it is so. Freeway is not an HTML editor, and unless you are in the Preview mode, is not using a Web browser to show you the page, but rather a desktop publishing application, similar to InDesign or QuarkXPress. When you are working in the layout view, and are moving things around on the page, you are not seeing HTML, but the internal document’s approximation of what HTML would look like. Since browsers and platforms don’t always agree on what that should look like, this is necessarily an approximation. If you click on the Preview tab, Freeway will generate the current page as HTML, and show it to you in a WebKit view, which is similar to Safari or Chrome, but is explicitly not either of those browsers. The hitch is that you cannot change or edit anything while you’re in that view.
It’s important to really internalize the fact that Web pages are flexible, unpredictable things, and you do not have the ultimate say in how they will look. Any number of user-controlled settings, or the platform (google Windows Typography – you will get “oxymoron” as the first result), or the computer’s settings (Big Fonts setting in Windows, or MobileSafari on iPhone enlarging text to be more readable) can all conspire to make your page look entirely different than you anticipated. For anyone coming from the security of print design, this can be an awful fall from grace; after all, your printed pages don’t get up and rearrange themselves if you view them in a different room, do they.
Knowing this fact, and not trying to fight it, you design to allow for things to grow and stretch and rearrange themselves, and you do so understanding that this is a flexible and fluid medium, not fixed like print. Get into the practice of looking at your sites on different devices, or adjusting the font size in your browser a couple of clicks in either direction, as a part of your regular proofing process. (Be sure to set the Zoom Text Only option on in your View menu before you do, or you will be lulled into a false sense of security.)
Getting a page to look exactly the same on all devices should not be your ultimate goal – that way lies madness. Getting your pages to be usable and useful on any device should be your measure of a job well done.
Walter
On Jun 10, 2014, at 12:19 PM, Iain Mackenzie wrote:
Why does text not appear the same in browsers as it does in FWP? Spacing and formatting seems to be different, and hence positioning is thrown out.
Graphic boxes are OK, so what is the problem with text?
If I could work out how to post images here, then I would attach screen grab examples.
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Getting a page to look exactly the same on all devices should not be your ultimate goal — that way lies madness. Getting your pages to be usable and useful on any device should be your measure of a job well done.
Couldn’t have said it better.
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Thanks a lot, Walter, for your in-depth reply as usual.
I sort of understand that, and I do try to view on as many devices as possible.
However, what I find odd, is that with a bit of trial and error, I can usually make things look OK in desktop browsers and Safari on iPad. The problem I usually have is that some sites just don’t seem to work at all well on iPhones. Some do, but some don’t. When I say they don’t work well, I mean that the text takes up about twice the height it does on desktops or iPads, which means it overlays graphics etc. in its path.
Now, I wouldn’t have though that the difference would be so dramatic.
I feel it must be down to options I’m selecting.
Is there any way of posting images in this forum?
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Is there any way of posting images in this forum?
You can use markdown. This is the code for an image: .
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Awesome explanation Walter—as usual.
Ian, here’s a tool that I use a lot to help me approximate what my sites will look like on various IOS devices. It’s not perfect, but it’s pretty darn close. I’ve taken the liberty of demoing Caleb’s website using it. 
http://www.responsinator.com/?url=http%3A%2F%2Fonrampwebdesign.com
-K
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Oops, sorry Iain. I didn’t realize that my spell checker tried correcting your name before I hit send.
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
RavenManiac, I’ll let you off with the misspelling!
Thanks for the link, but unfortunately it doesn’t represent what my sites look like at all! The 3 sites I tried, it just seems to show cropped screens for iPhone and iPads, but that is not the reality.
In reality, they all show the full page on iPads and iPhones, but sometimes the text boxes are elongated.
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
If you want or need to use a simulator then try the iOS Simulator in Xcode. Free download MAS.
Todd
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Thanks guys, but to be honest, it’s not a simulator I need, it’s an understanding of why it’s happening.
I am an Apple iOS developer, and I have all sorts of iPhone and iPads at my disposal, so I know how they look.
For a start, I don’t get why sites can look OK even in portrait on a iPad with some auto resizing going on, but they don’t on the iPhone. Text boxes get stretched vertically and over-run other boxes.
… and don’t say, well you’re the iPhone developer!!!
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
What you are seeing is something I mentioned in my note – MobileSafari on iPhone or iPod touch only (not iPad) will adjust text sizes for readability. There is a CSS rule you can add to your page to turn this off, but it’s there for a reason – so I don’t advise turning it off as your first step in making your site work well on iPhone. The key to making your site usable at small screen sizes is to ensure that text enlarging doesn’t destroy your layout. Read up on inline or box-in-box layout techniques and start using them. That’s the real way forward here.
Walter
On Jun 10, 2014, at 2:29 PM, Iain Mackenzie wrote:
RavenManiac, I’ll let you off with the misspelling!
Thanks for the link, but unfortunately it doesn’t represent what my sites look like at all! The 3 sites I tried, it just seems to show cropped screens for iPhone and iPads, but that is not the reality.
In reality, they all show the full page on iPads and iPhones, but sometimes the text boxes are elongated.
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Thanks Walter. Helpful as ever. I think my point is that I don’t understand why some of my sites work and some don’t.
Look at www.countryskittles.com on an iPhone or iPad and you will see it looks fine - portrait or landscape - full site visible.
Then look at a site (under development) www.eyemack.co.uk which gets completely messed up on the iPhone.
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
On 10 Jun 2014, 6:34 pm, Todd wrote:
If you want or need to use a simulator then try the iOS Simulator in Xcode. Free download MAS.
Todd
http://xiiro.com
Thanks Todd. I tried that, but I couldn’t figure the darn thing out.
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
When I say they don’t work well, I mean that the text takes up about twice the height it does on desktops or iPads, which means it overlays graphics etc. in its path.
Are you using the Box Model to construct you site?
http://freewaytalk.net/thread/view/131687#m_131787
Marcel
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
So, what’s everyone’s opinion on the IOS simulator I posted? http://www.responsinator.com
Aside from Xcode, is there another, better solution?
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
So, what’s everyone’s opinion on the IOS simulator I posted? http://www.responsinator.com
Unless you own both an iPhone and an iPad, I would say that the simulator inside Xcode is the only way to test websites on iOS. The problem with responsinator.com and friends are that they aren’t using Mobile Safari’s engine to render the page, they are simply sticking the website in an iframe set to the size of the device.
Over the last year and a half (since I started Backdraft) I’ve seen countless responsive websites that work great when scaled to mobile sizes on a desktop browser, but that break/overflow when viewed on an iDevice. This is because the mobile browsers have a lot more “rules”, if you want to put it that way.
The way iOS handles iframes is a great example of this. Create a 100% width iframe, and you get a flexible iframe on desktop browsers. View it using an iPhone, and you will find that the Safari developers decided to never let an iframe be smaller than it’s content - so if the website in the iframe is 960px wide, the iframe will be 960px wide. And you’d never know this unless you viewed the site on an iPhone or using the iOS Simulator.
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
On 10 Jun 2014, 7:41 pm, RavenManiac wrote:
So, what’s everyone’s opinion on the IOS simulator I posted? http://www.responsinator.com
Aside from Xcode, is there another, better solution?
As I said above, it doesn’t seem to come anywhere close to what the sites look on iPhone and iPads. In fact, it just seems to crop the image to fit a frame.
I might be wrong there, but that’s what it looks like to me.
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
I just tried it on one of my sites, and the font-resizing thing happened there. Of course I designed ActionsForge to behave well in that context, so it didn’t blow up or anything. But the iOS simulator in iPhone mode very definitely doesn’t just show a sized WebKit window.
I also just found out that a 20" Cinema Display can only show an iPhone in Retina resolution in horizontal orientation without cropping. I thought these displays were a decent size!
Walter
On Jun 10, 2014, at 4:03 PM, Iain Mackenzie wrote:
I might be wrong there, but that’s what it looks like to me.
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Okay, so I need to learn how to use the Xcode simulator.
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Wow, that was a lot easier than I thought. Thanks Todd.
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options