FW7 Responsive Design (pixel widths)

Looking at this guide to device sizes raises two questions:
http://en.wikipedia.org/wiki/List_of_displays_by_pixel_density

  1. FW’s first pre-set media width is 768 — presumably chosen as this is the pixel width of an iPad—but the list says that the width for an iPad 3rd and 4th gen (and latest iPad mini) is 1536. So I’m wondering does the breakpoint actually use pixels to work? I checked the new Softpress web site on my iPad Air and it does break correctly in the same place as it does on my old IPad 2 or narrowed desktop browser.

  2. How do we design to cater for all the various different device widths?

Thanks.


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

Perhaps answering my own questions:

  1. I see the column for CSS Pixel ratio and for the iPad Air it is 2. Does that mean by CSS somehow two pixels are squeezed into 1 so the page still has a breakpoint at 768?

  2. I found this in the Introduction To Responsive Design PDF (not in the Extended Reference guide):

“The widths defined for your breakpoints are maximum widths. This means that design changes made for a breakpoint are not just changes for that specific width – they are changes that will affect all devices with screens of that size or smaller.”

Presumably, then, to accommodate various device widths, always design to the widest tablet or the widest phone?


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

There is a school of thought that says you should assign breakpoints when your layout falls apart.

This is not a FW specific thing - it applies no matter how you are putting your site together.

The preset sizes that are in FW are not hard and fast rules as you have seen there are more devices appearing every day with differing screen sizes.

In an ideal world you would test with the most common devices but not add breakpoints for everything - that is just not practical.

Here is a piece from Brad Frost on the subject How To Use WordPress Tutorial [2023]

David


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

The “retina” resolution devices use more than one actual screen pixel per measured pixel. An iPad (all iPads regardless of age) is 1024 x 768. The mini, the Air, the first generation “just call me iPad” – all the same pixel dimension, regardless of the physical resolution of the display.

Walter

On Aug 1, 2014, at 8:36 PM, John Cooper wrote:

Perhaps answering my own questions:

  1. I see the column for CSS Pixel ratio and for the iPad Air it is 2. Does that mean by CSS somehow two pixels are squeezed into 1 so the page still has a breakpoint at 768?

  2. I found this in the Introduction To Responsive Design PDF (not in the Extended Reference guide):

“The widths defined for your breakpoints are maximum widths. This means that design changes made for a breakpoint are not just changes for that specific width – they are changes that will affect all devices with screens of that size or smaller.”

Presumably, then, to accommodate various device widths, always design to the widest tablet or the widest phone?


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 all I have run into an issue, Id like to throw out there… on few of my sites I have a css menu with no dropdown, so they are wider, all perfect on 1200, 1600, and I apply show Icon at 768 and below, but 1024 breakpoint is a bit of a quandary… and the menu drops to 2 levels( breaks).
Is the only solution to make a second css menu(apply smaller fonts sizes) for that 1024 breakpoint and apply display for that smaller menu?
I also have tried to apply show icon at 1024 but the z-index at 999is not quite right, as the icon menu falls behind the page

just wanted to here more thoughts on this
thx


freewaytalk mailing list
email@hidden
Update your subscriptions at:

Responsive question. Getting started to make the transition to responsive with Freeway. Been using all the previous version for years.
Am I better off practicing with a FW template or downloading something like Backdraft?
Thanks John


freewaytalk mailing list
email@hidden
Update your subscriptions at:

I have a css menu with no dropdown, so they are wider, all perfect on 1200, 1600, and I apply show Icon at 768 and below, but 1024 breakpoint is a bit of a quandary

Share a link Carla and we can offer a specific solution.

D


freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

Responsive question. Getting started to make the transition to responsive with Freeway. Been using all the previous version for years. Am I better off practicing with a FW template or downloading something like Backdraft?

As to your question John - it probably deserves its own thread as the answer is subjective. What is your comfort level?

Would you prefer the hand-holding that Backdraft and/or a Template would give you? If so then either offer a reasonable starting point.

If you want to break the mould a bit then that is probably easier in a straightforward FW site.

D


freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

sorry Dave… I can’t provide link for privacy reasons, although you have the file
Its just a general question overall

thx


freewaytalk mailing list
email@hidden
Update your subscriptions at:

If you are looking for a general answer then yes - your solution may be to show a different menu at those intermediate sizes but management of 2 menus can be tricky.

Is there no way that you can introduce some sub menus to cut down on the overall width?

D


freewaytalk mailing list
email@hidden
Update your subscriptions at:

yes I can Dave , for future sites and normally I design drop down CSS menus, but I was using esperanto template that has all on main and no dropdown…, its something I will have to watch out for in the future… thx buddy…


freewaytalk mailing list
email@hidden
Update your subscriptions at:

Just because the Template doesn’t use drop downs there is no reason you can’t add any.

These templates are meant to be tweaked - don’t feel you have to stick rigidly to them.

And if the site you are thinking of is the one that is animal related then I am sure there are synonyms for some of the menu items that are much shorter in length.

D


freewaytalk mailing list
email@hidden
Update your subscriptions at:

Yes you are correct Dave and I know I could have added submenus of course but I was asked not to… anyway that project is over but thx


freewaytalk mailing list
email@hidden
Update your subscriptions at:

but I was asked not to…

Very often we are asked to do things that we know aren’t right.

So as Thomas often says “Who is the Designer here?” - I paraphrase of course.

D :wink:


freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

absolutely correct hence is the reason I called it quits ha!!!

to all those in the US… happy thanksgiving!!! and those in Scotland and the UK - a Thank you from me

x


freewaytalk mailing list
email@hidden
Update your subscriptions at: