Use phone horizontally to view websites?

Freeway
1

Hi

I’ve created a website primarily for desktop monitors, but it also needs to work on smart phones. http://www.greensparkmarketing.co.uk/ It looks fine and is very readable when the phone is horizontal, but much less so when the phone is vertical (the text is too small).

Does anyone know if there is any information on whether people use their phone horizontally to view websites?

Thanks

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

2

Hi Mark,
The easy way to fix this is to change the body style you have in there;

body { -webkit-text-size-adjust:none }

to

body { -webkit-text-size-adjust:auto }

This will force the browser to resize the text on Mobile Safari to make it a bit more readable.

Another option is to use media queries to target specific tags and adjust the text size at a finer level. For example the following CSS will increase the intro and nav text on mobile browsers in portrait mode;

@media screen and (max-device-width: 320px) and (orientation: portrait){
	.Intro, .style1 { font-size:32px; line-height:42px; }
	.Nav { font-size:20px;  }
}

By the way the words ‘clear focus’ in the intro paragraph have a style called ‘style1’ applied to them which looks like an error as it is exactly the same as the Intro (enclosing) style.
Regards,
Tim.

On 4 Dec 2012, at 10:21, Mark wrote:

I’ve created a website primarily for desktop monitors, but it also needs to work on smart phones. http://www.greensparkmarketing.co.uk/ It looks fine and is very readable when the phone is horizontal, but much less so when the phone is vertical (the text is too small).

Does anyone know if there is any information on whether people use their phone horizontally to view websites?

Experienced Freeway designer for hire - http://www.freewayactions.com

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

3

Hi Tim

Thanks for your advice.

I’ve tried the auto adjust, but the mobile browser does annoying things. It increases the size of the body copy (to make it more readable), but doesn’t increase the size of headings (which are already large) - i.e. it doesn’t scale everything to keep the same proportions.

I’d like to use the media queries. Where would I add this CSS in FW?

Thanks for spotting the errant ‘style1’. FW likes to throw these in when editing text. Very annoying.

Thanks

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

4

Hi Mark,
Before you try media queries (which will take you longer) try changing that body style to a percentage;

body { -webkit-text-size-adjust:160% }

This should tell mobile Safari to scale the fonts to 160% of their defined size.

You can do the media query work in several ways but the easiest for you is probably going to be to create a copy of your page in Freeway and adjust the text sizes and line heights (leading) until you are happy with the overall look on the phone.

You can then make a note of the style name (class or ID) and add this to your block of CSS. This code will then get added to the original Freeway page as markup in Page > HTML Markup > before .

Your boilerplate CSS code is;

<style type="text/css">
<!-- 
@media screen and (max-device-width: 320px) and (orientation: portrait){
	/*
	This is an example;
	.class or #id {
		font-size:(whatever)px;
		line-height:(whatever)px;
	}
	etc.
	*/

	.Intro, .style1 { font-size:32px; line-height:42px; }
}
-->
</style>

Regards,
Tim.

On 5 Dec 2012, at 10:52, Mark wrote:

Where would I add this CSS in FW?

Experienced Freeway designer for hire - http://www.freewayactions.com

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

5

Hi Tim

Brilliant. I like the idea of being able to dictate the % increase to all my styles - so all my styles should be proportionately the same.

I’ll give that a try first. The media quires looks a bit out of my depth, but might be something I’ll play with, or ask the client to pay you to do it, if you’d be interested?

Thank you

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

6

Hi Mark,
Certainly. Let me know how you get on with this and if you (or your client) need more help please feel free to get back in touch.
Regards,
Tim.

On 5 Dec 2012, at 11:17, Mark wrote:

I’ll give that a try first. The media quires looks a bit out of my depth, but might be something I’ll play with, or ask the client to pay you to do it, if you’d be interested?

Experienced Freeway designer for hire - http://www.freewayactions.com

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