[Pro] Defining Breakpoints

Once I figured out the mobile re-direct, I have been working on scaling my pages to work on each popular phone’s size. I have breakpoints set for iPhone 4 portrait and landscape, iPhone 5 p&l, iPhone 6 and 6+ p&l, then iPad mini. That’s actually the easy part, the mobile menu was a little tricky to get to work properly but again FW is pretty straightforward and with the help of this forum & the internet you can figure it out.

My question is… Is there a better way to do this rather than define each breakpoint for devices out there? Are site engineers really looking out for each device size and setting custom breakpoints for each or is there a more flexible way to do this?

http://www.yuskophotography.com


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

Your Breakpoints should be based around the way your site works - ie if you reduce the width and it falls apart then set a BP.

Crazy to set a BP for every device on the planet - sizes change all the time.

David


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

Oh okay. I must have understood breakpoints wrong then.

Can you give me an example of what you mean by that though? Before I set breakpoints the page wouldn’t work as expected on mobile devices - in the sense mostly that my menu function was acting goofy. For instance… In portrait my page works great on most devices (since I’ve defined bps for them). If I go into landscape, the page sucks. The menu is mostly what goes haywire. Do you think this is because on my mobile site the menu is set up on the right?


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

Before I set breakpoints the page wouldn’t work as expected on mobile devices

I didnt say you shouldn’t set Breakpoints - just not a BP for every device.

mostly that my menu function was acting goofy.

Can we see an example?

D


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

And of course there are many opinions on this - 1 example is http://responsivedesign.is/strategy/page-layout/defining-breakpoints

Some advocate ‘Mobile First’ as Justin does in his piece - others approach from the other direction.

D


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

Dave - If you have an iPhone, try accessing my site “www.yuskophotography.com” in landscape. Then you’ll see what I mean.

That was a good read, thanks for that. I will perhaps try to remove breakpoints for each device like he says and come at it the other way which seems far less stressful! Before I tell people my page is mobile ready I have been trying to get it to perform the way I want. In portrait right now it performs the way I want on most common devices, but at the iphone landscape level I’m all messed up still.


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

Then you’ll see what I mean.

About what specifically? The slideshow is too big for my 5S and you appear to be redirecting to an m subdomain.

And yes I do think it is a mistake to have your menu at the right and also it appears you have the hamburger menu set to appear at 1050px. I would reduce that.

D


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

Dave - I removed my breakpoints between 320 and the tablet of 768. Is there something I’m missing as to why when you look at the page (www.yuskophotography) on mobile device, it works fine in portrait (on the 5s only) [320 width], but then on a larger 6/6+, or in landscape on the 5 the slideshow is sticking to the right side? I can’t see where I’m able to center that slideshow so that no matter what width the page it is centered. Driving me bananas!


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

At 768px item1, the Exhibeo slideshow, has the following settings: #item1 { left:70px; top:153px; width:632px; height:423px }

So simple maths tells us that an item with a width of 632 positioned 70 left (total 702) will not fit on a 667 wide device (iPhone6 landscape).

The 6+ is 960 wide so will be using the 1050 BP settings

D


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

The 6+ is 960 wide so will be using the 1050 BP settings

Correction to that:

The 6+ is actually 736 wide so will use the same 768 BP and fit better - but not right!. Dont have either to do an actual test.

D


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