Can anyone tell me what the iPhone > Viewport width options do? I can’t seem to find them mentioned in the FW manuals.
I presume they will shrink the width of my website to the viewport width of an iPhone?
But when I’ve gone to a couple of iPhone emulator websites the width hasn’t scaled at all. Without owning a smart phone how can I see what my website looks like on a smart phone?
I presume the FW iPhone viewport settings work for all smart phones?
If anyone has a smart phone could they tell me what my trial web page looks like.
Without owning a smart phone how can I see what my website looks like on a smart phone?
I have the same conundrum.
Did you know you can download Apple’s developer software, Xcode, for free from the App Store? It includes a iOS device simulator which lets you preview and play with web sites in mobile Safari. You can switch around between various iPhone and iPad variants to see how things behave. Open a local web site page by dragging it from the Finder or even your desktop browser onto the simulator.
My only bugbears with this route is Xcode is mahoosive, and finding the iOS simulator is tricky. Once I’d located it, I made an alias into the Applications folder so I don’t need to run the whole shebang when I want to test something.
While I’d love to own an iDevice, currently I can’t afford a real one. The simulator works adequately for now.
Hope that helps.
Heather
Imagic Design * Good Design - No Compromise
email@hidden http://www.imagic-design.co.uk
Twitter @Imagic-Design
T: 01634 864017
I’ve had a quick look at the Apple Developer site (I had to join), but it appears that Xocde is for Lion OS. I’m still using 10.5.8. So I guess I can’t use it and as you say it looks frighteningly big and way to complicated for me.
Adobe do ‘Edge Inspect’ but again they force you to sign up to sign up to something called Creative Cloud and I haven’t got a clue what that is.
I’m still using 10.5.8. So I guess I can’t use it and as you say it looks frighteningly big and way to complicated for me.
Ah, yes, that would be a problem. It is Lion and up.
Once I found where they hid the simulator, I didn’t need to run the whole Xcode thing again. If I could be sure I wasn’t deleting a needed resource, I’d remove the whole package now and just keep the sim.
Perhaps what we need is a cadre of FreewayTalk users who have various iDevices and don’t mind acting as unpaid testers for sites.
Heather
Imagic Design * Good Design - No Compromise
email@hidden http://www.imagic-design.co.uk
Twitter @Imagic-Design
T: 01634 864017
The iPhone has a variable width screen based on the orientation of the device. The viewport (the visible area of the page) can be adjusted (its dimensions and scaling) to make sure web pages fit into the visible area. Without doing this, a large page might get cropped and a small page might appear as a tiny speck in the top left corner (Safari mobile expects pages to be around 960px wide unless told otherwise).
The options in the iPhone section of the Inspector (it’s labeled iPhone but actually affects almost all modern devices with smaller displays) tell the browser what to expect from your page. The default in Freeway is to set it to the page width, meaning pages just automatically work, but if you’re making a small page that’s designed specifically for a smaller display you’d want to turn scaling off.
Here’s what I see when I look at your page on the iPhone:
You don’t necessarily need to get yourself a handset, or even download the 4GB worth of Xcode just to get the simulator, but if you’re trying to design with smaller displays in mind, not doing so is going to make life pretty painful.
Thanks for the info and photo. I’m not sure what is happening. I expected the text and the page to be smaller (scaled down to fit the smaller viewport). I think this is happening? But strangely the text is also reflowing, there are less words per line. It looks like my page has been scaled down AND the text box made thinner.
I want the page to scale down, but I don’t want it to reform / reflow my layout.
You can’t guarantee the same text flow across platforms or browsers. In this case I think the iPhone may be resizing the text. I believe there’s a style you can use to prevent this from happening, but I don’t know if it has any consequence on the non-mobile version of the site.
I understand that text will flow differently on different platforms and browsers - but this is extremely different. It looks to me like something else is happening in addition to scaling the page?
I don’t suppose you could take another photo of what it looks like on an iPhone (I’ve added an image the same width as the text box so it should be easier to see what is happening).
The iPhone and iPod Touch versions of the Safari browser use a clever scaling algorithm that works to keep font sizes relatively large. This is to save your eyes, not your design. If you really have to, you can turn off this scaling for a particular element or the entire page by adding this attribute to the relevant style rule:
-webkit-text-size-adjust: none
This will force the tiny-screen browser to behave more like its larger-screen brethren, and not do this differential scaling trick.
Long term, your better solution is to be aware this will happen, and design your page to react gracefully to it. Your users over 40 will thank you.
Walter
On Sep 28, 2012, at 10:58 AM, Mark wrote:
Thank you so much.
Have to say I’m confused. The page and text is scaling down, but the text isn’t scaling as much as the design… arghh!
I would add this attribute to the style for the element(s) that need it. If you add it to the entire site, you won’t get the advantage of the scaling algorithm in places where it could be useful.
If you want to add it to the entire site, then make a new style with the Tag set to ‘body’ and the Name set to nothing (you have to tab out of the Name field to get that empty attribute to “stick”). Click the Extended button in the Edit Style dialog, and then New, and then add the following pair to the sub-sub-dialog:
Name: -webkit-text-size-adjust
Value: none
Okay out of the stack of dialogs, and preview on your iOS device.
Walter
On Oct 1, 2012, at 6:44 AM, Mark wrote:
Hi Walter
Thanks for the info. How do I add this attribute to my entire website / page?
I’m basically thinking about building a website that looks similar to this http://informationarchitects.net/ without the tricky responsive bit.
It’s a fantastic site and I really like the ideas behind it; big easy to read text, no clutter etc.
Yes, and I urge you to use it surgically. Test your work on the iPhone or iPod touch for the worst-case scenario, and only adjust things that A) have no need to be legible at ridiculously small sizes, like maybe a tagline under a logo, and B) are being adjusted only to hold decorative parts of the layout together. Learn to make a layout that responds gracefully to larger text sizes. You need that especially in a desktop browser, because visitors with limited vision will have tweaked their browser to have extra-large type. Your layout shouldn’t go all Picasso when they do that.
Walter
On Oct 1, 2012, at 9:08 AM, Mark wrote:
I presume that mean I can use this attribute just on the type styles I choose to - by using the Extended button for that particular style
Hi Tim. The 160% scale works great. Everything is kept in proportion. Only thing is, when viewed in landscape the text is too big. But then I presume most people will view websites in portrait.
Thanks for your help. I don’t think we’ll use media quires at this stage.