[Pro] iPhone Viewport width

Hi

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.

Thanks for any help

Mark

http://www.advocatedesign.co.uk/trial/


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

On 28 Sep 2012, at 11:14, Mark wrote:

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


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Hi Heather

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.

There must be a simple simulator website?

Mark


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

On 28 Sep 2012, at 11:38, Mark wrote:

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


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Going back to my original question does anyone know what the iPhone Viewport options are suppose to do?

Mark


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Hi Mark,

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:

CloudApp — Not Found

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.

Joe


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Hi Joe

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.

Any ideas?

Mark


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

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.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Hi Joe

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).

Thank you

Mark


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Sure, here you go:

CloudApp — Not Found


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

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!

Mark


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

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!

Mark


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

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.

Mark


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

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.

Mark


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

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

Thank you


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

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

Thank you


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

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.

Mark


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options