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.
How do we design to cater for all the various different device widths?
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?
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?
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:
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?
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?
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
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
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.
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.
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?
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…
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.
