[Pro] In FWP7 why 768, 480 and 320 in breakpoints?

Why these values? Is it because the Retina display of iOS devices is considered a x2 size?
iPhone 4 and 5 series are 640 pixels wide (320 x 2) and iPad Air is 1536 wide (768 x 2).
I have no problems with the 480 breakpoint on iPhones, but have continual issues with the 320. I think because the 480 is just resizing the 768 tablet and not reaching 320 size at all.
Can anyone give me a little idiot’s guide to these sizes?


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

I’m not sure how folks are dealing with breakpoints in general - there are
other device indicators as well, such as orientation, which can make a big
difference to the viewing experience.

I’m not yet on FWP7, but the breakpoints I’ve been paying attention follow
these lines - http://css-tricks.com/?p=7667


Ernie Simpson

On Fri, Sep 12, 2014 at 3:23 PM, Iain Mackenzie email@hidden wrote:

Why these values? Is it because the Retina display of iOS devices is
considered a x2 size?
iPhone 4 and 5 series are 640 pixels wide (320 x 2) and iPad Air is 1536
wide (768 x 2).
I have no problems with the 480 breakpoint on iPhones, but have continual
issues with the 320. I think because the 480 is just resizing the 768
tablet and not reaching 320 size at all.
Can anyone give me a little idiot’s guide to these sizes?


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 think because the 480 is just resizing the 768 tablet and not reaching 320 size at all

One of the important considerations with these sizes is that there are landscape modes in there too.

While these sizes are not exhaustive - especially with the release of new hardware - it does cover most devices.

If you come across issues with a particular device then it is pretty easy to add an additional breakpoint.

But viewing on a Desktop browser and resizing the window is not really the way to test your sites. Folk in the real world don’t actually do that - what they do is visit from multiple devices.

David


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

I’m not yet on FWP7, but the breakpoints I’ve been paying attention follow
these lines - http://css-tricks.com/?p=7667

Two things to note here:

It’s not possible in Freeway setting min-width breakpoints yet (and I assume it never will).

and

even Chris doesn’t follow them.

He has a pretty liberal way of understanding breakpoints which can be described with “device range” rather than “the specific device”.

So his breakpoints are 1200 (for the tabloid range) and 600 (for the mobile range) - that’s it.

All I do is introducing a min-width 1824 for 27" cause I don’t deal with max page-width.

In Freeway I set the “canvas” for tabloid on 768px as the smallest available and 320px for the mobile range. My default canvas is 1823px.

This requires two things:

Full inflow construction and a modern, content-first oriented artwork.

Cheers

Thomas


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

Thanks guys. I remain confused.
Try this.
Put a full line of text in a HTML box, and put a different background colour for each of the 4 default breakpoints.
Obviously, set the page width of each breakpoint to 768, 480 and 320. Make the width of all the HTML boxes available or 100%.
What happens is that:

  1. on a desktop browser, it’s fine
  2. on an iPad it is also fine as the 768 kicks in and moving from landscape to portrait orientation works OK as the text looks the same in both orientations, i.e. the same number of words on each line, just different sizes
  3. on an iPhone 5 things are now become confusing. In portrait it looks OK, in the sense that the text is spaced in the way it looks in FW7 preview 320 mode, but in landscape it does not look like the Phone (Landscape) 480 mode. Distribution of the words is different across lines, but the background colour is correct for 480 mode.
    I still don’t get why these breakpoint pixels are specified as the iPhone since iP4 is 640 wide and the iPad 1536 wide yet still react to 320 and 768.

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

As an aside, why do my end of para returns not work here when I post a message? All goes through as one para.

I’m trying 2 returns here to see if that’ll do it!


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

The Web interface to this mailing list uses Markdown formatting, and there’s a little preview window to show you how it will appear, so there’s real-time feedback. You can learn more about Markdown here: Daring Fireball: Markdown

Walter

On Sep 13, 2014, at 7:49 AM, Iain Mackenzie wrote:

As an aside, why do my end of para returns not work here when I post a message? All goes through as one para.

I’m trying 2 returns here to see if that’ll do it!


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

On 13 Sep 2014, at 12:46, Iain Mackenzie email@hidden wrote:

I still don’t get why these breakpoint pixels are specified as the iPhone since iP4 is 640 wide and the iPad 1536 wide yet still react to 320 and 768.

Now that we’ve got high resolution displays, a ‘pixel’ can now mean two things: a unit of measurement (as in positioning an item 10 pixels from the left), and a component of a computer display that defines the screen resolution. In web design, pixel measurement pixels are often called CSS pixels to help differentiate them from hardware pixels.

The reason there is a difference is because high resolution displays use 4 or more pixels to display what would be a single pixel on a standard definition display. If a CSS pixel was just a direct mapping to a hardware pixel then an item that’s 10 pixels from the left would be in a different position on different screens depending on the pixel density (how many hardware pixels are used in a given area, typically a square inch – pixels per inch, or PPI).

So, in summary – the iPhone and iPad have a screen width of 640 and 1536, but because each CSS pixel is made up of 4 hardware pixels (a 2 by 2 square), they only have a CSS width of 320 and 768.

Hope this helps!

Joe


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

Thanks Joe for the detailed reply. That was what I was alluding to in my OP when I asked about retina displays being considered x2 (in each dimension).

I’m still confused by a few things however.

Have you tried my little example in my post from 11:46 yesterday?

There is something I’m missing here.


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

No sorry, but do bear in mind that a landscape iPhone 5 has an unusual width, not the more common 480px found on most phones. There are two solutions to this:

  1. Add a new breakpoint for iPhone 5 in landscape (568px)
  2. Ignore devices altogether and add new breakpoints when your layout breaks. This way you don’t have to worry about new devices at different sizes (iPhone 6 and 6 plus spring to mind)

Joe

On 14 Sep 2014, at 12:22, Iain Mackenzie email@hidden wrote:

Thanks Joe for the detailed reply. That was what I was alluding to in my OP when I asked about retina displays being considered x2 (in each dimension).

I’m still confused by a few things however.

Have you tried my little example in my post from 11:46 yesterday?

There is something I’m missing here.


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

Thanks Joe. I tried 568px previously and it just doesn’t work.

Look at the simple example I posted above. Ignore the 768 and Default items as they work fine. With 320 and 480, the 320 shows up on my iP5 as per FW7 preview with text in the same orientation, etc. However, switching to landscape shows the background colour as set for 480, but the text not showing as per preview.

Now, as the iP5 has a width of 568px, why is it breaking at the 480 point? Surely it should still be at the 768 point.

Additionally, if I set a 568px breakpoint in FW7, the landscape 480 view still comes up on iP5 and the 568 is ignored.

Help!


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

This is happening because the iPhone scales the page to try and make the text on it more readable. This changes the width of the viewport so that it’s less than 480px.

To get round this you need to check the Initial Scale option in the Mobile settings of the page and make sure it’s set to 100%.

Joe

On 14 Sep 2014, at 13:05, Iain Mackenzie email@hidden wrote:

Thanks Joe. I tried 568px previously and it just doesn’t work.

Look at the simple example I posted above. Ignore the 768 and Default items as they work fine. With 320 and 480, the 320 shows up on my iP5 as per FW7 preview with text in the same orientation, etc. However, switching to landscape shows the background colour as set for 480, but the text not showing as per preview.

Now, as the iP5 has a width of 568px, why is it breaking at the 480 point? Surely it should still be at the 768 point.

Additionally, if I set a 568px breakpoint in FW7, the landscape 480 view still comes up on iP5 and the 568 is ignored.

Help!


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

Joe
In layman terms
1: Should we change the iPhone dimensions to accommodate the iPhone 6, add new ones or just ignore and carry on as before.


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

I have only a limited knowledge/understanding, but as I’ve fiddled around building a couple of sites with FW7, I’ve rigorously used percentages, assuming that this will avoid most of these hardware resolution issues.

Am I mistaken about this?

Are there pitfalls that I haven’t imagined?


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

Breakpoints should be determined by the layout and content, not the hardware, so it’s unlikely your content will need to break at those default settings. In other words, stretch and compress your design and see where you need to insert a breakpoint(s).

Todd

Should we change the iPhone dimensions to accommodate the iPhone 6, add new ones or just ignore and carry on as before.


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

Breakpoints should be determined by the layout and content, not the
hardware, so it’s unlikely your content will need to break at those default
settings. In other words, stretch and compress your design and see where
you need to insert a breakpoint(s).

I usually think in terms of device classes - desktop, laptop, tablet and
mobile. The actual screen widths are less important than say how content is
accessed in those situations. Fluid layouts (inline box-model) mean
slightly different device widths only play a minor role responsively, so I
think it’s still more important to improve those skills than to get hung up
on exact breakpoint sizes.

These default sizes are suggestions - good ones for beginners, but by no
means Gospel. If you focus on building fluid layouts for user experience,
this all becomes less concerning.


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

I can understand that. In a vague way I do something similar. But my point was that approaching breakpoints with a predefined mindset isn’t the best way forward.

Todd

I usually think in terms of device classes - desktop, laptop, tablet and
mobile.


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

Good advice. Thanks guys


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

Hey all, one question regarding breakpoints… as Im still a newbie
Im fine with 768,480, 320. These have been perfect viewing.

My question is the default breakpoint
as I hope the default will work both on 15 in macbook pro and desktop. I may be wrong

My default is set at 1050. I wonder if I should change default to 1200 so it will sit better on a desktop screen & the 15 in screen. Ive only made a few sites so I can go back and reset if this is the right way to go… I just want to think ahead as I continue with FW7
thx all
C


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

on a desktop screen & the 15 in screen

Depends what sort of 15" screen.

Retina MacBook pro is native 2880 but other 15" screens only manage 1024

Have a look at http://www.hobo-web.co.uk/best-screen-size/ but other sites may disagree.

David


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