CSS Media Queries for Mobile Devices

Freeway
1

I’m start this new thread for anyone to chip in with techniques on optimising Freeway websites to appear on smaller mobile devices using CSS Media Queries for mobile Devices

Rather than serving a completely different mobile website duplicating content and all the problems that can cause.

–

David

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

2

I can see one of the first hurdles to cross would to do would be to prepare the Freeway site with some basics ticked;-

  1. Make sure all elements are named suitably for reference in the mobile style sheet.

  2. No internal styles on any div elements (what actions if any are there available to do this?)

Next would be to #div {display:none} to strip out divs you don’t need

…I need to test this

–

David

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

3

OK a quick proof of concept

http://www.printlineadvertising.co.uk/demo/mobile/

Try looking at this page on an iPod or iPhone

Although Freeway is really backing me into a corner with all the inline styles when working with individual objects.

Is there an action to strip out inline styles on selected objects?

–

David

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

4

Is there an action to strip out inline styles on selected objects?

I used to use the Remove Div Styles action.

Todd

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

5

Hi Todd,

Thanks, thats a good start.

–

David

On 17 Jan 2011, at 16:17, Todd wrote:

I used to use the Remove Div Styles action.

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

6

Tim Plumb’s Externali(s|z)e Action.

Walter

On Jan 17, 2011, at 11:17 AM, Todd wrote:

Is there an action to strip out inline styles on selected objects?

I used to use the Remove Div Styles action.

Todd

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

7

David:

Looked great on my iPad. Double-tapped it and it filled the screen just right. Expanding and pinching with two fingers worked just right, too.

Martin

On Jan 17, 2011, at 11:12 AM, David Owen wrote:

OK a quick proof of concept

Mobile test

Try looking at this page on an iPod or iPhone

Although Freeway is really backing me into a corner with all the inline styles when working with individual objects.

Is there an action to strip out inline styles on selected objects?

–

David

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

8

Thanks Walt,

Drawback with that is that (I believe) a style sheet is created for every for every page.

I know i’m making work (lots of it) for me here. I think its worth exploring the possibilities to extend the skill set.

Anyone please feel free to chip in to add to this thread with any questions ~ it’s not so much help for me but to act a resource for others too.

For anyone interest I’ve added this before 

<link rel="stylesheet" href="css/mobile.css" media="handheld, screen and (max-device-width: 480px)" type="text/css" />
~~~~

And added an extra stylesheet file mobile.css

David


On 17 Jan 2011, at 16:26, Walter Lee Davis wrote:

> Tim Plumb's Externali(s|z)e Action.


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

Hi Martin,

You need to look on a small screen (iPod / iPhone ) to see the different page. On the iPad you will be seeing the “desktop” version.

–

David

On 17 Jan 2011, at 16:29, Martin Rice wrote:

Looked great on my iPad. Double-tapped it and it filled the screen just right. Expanding and pinching with two fingers worked just right, too.

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

10

Drawback with that is that (I believe) a style sheet is created for
every for every page.

Yep, unfortunately it does.

Todd

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

11

Aha . . . yep, that’s what you said from the beginning :slight_smile: Well, I guess I’m glad that I looked on the iPad first so that I was able to see the difference, namely that the photo I saw on the iPad wasn’t on the iPhone Safari page – assuming it was supposed to be. Other than that, the gestures worked fine.

Martin

On Jan 17, 2011, at 11:42 AM, David Owen wrote:

Hi Martin,

You need to look on a small screen (iPod / iPhone ) to see the different page. On the iPad you will be seeing the “desktop” version.

–

David

On 17 Jan 2011, at 16:29, Martin Rice wrote:

Looked great on my iPad. Double-tapped it and it filled the screen just right. Expanding and pinching with two fingers worked just right, too.

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

12

The reason for this is mobile user don’t always want to see or want to download all the prettiness and bloated image files of a desktop version. They just want to get to the content.

–

David

On 17 Jan 2011, at 17:01, Martin Rice wrote:

Well, I guess I’m glad that I looked on the iPad first so that I was able to see the difference, namely that the photo I saw on the iPad wasn’t on the iPhone Safari page – assuming it was supposed to be.

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

13

Your site looks tiny on the iPhone. Lots of white space.

One of the simplest sites i’ve found that has pages for the iPhone: http://www.echometry.com/mobile

Super simple and effective nav, and sized for iPhone.

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

14

This test was just thrown up in a few minutes. Just a proof of concept. I will test and style it further later.

David

On 17 Jan 2011, at 18:51, “chuckamuck” email@hidden wrote:

Your site looks tiny on the iPhone. Lots of white space

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

15

A little late, just been back to update the mobile style sheet for this page. You need to compare the desktop version with the iPhone version.

http://www.printlineadvertising.co.uk/demo/mobile/

David

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