Hype Reflect, breakpoints and more

Responsive
1

Hi, the question again without typos!

I have a simple hype project. I am designing a website to work on desktop, iPad and iPhone. I am not a complete novice or indeed idiot. I am a professional photographer, film maker and designer with limited to little coding experience.
I am having huge problems with breakpoints and feedback from Hype Reflect. I am happy for the landscape iPad layout and the Desktop to remain the same, however I need the iPad portrait layout to change and the iPhone portrait to change. I have redesigned these layouts numerous times and deleted and resdesigned with different breakpoints. The first problem I get is that Hype Reflect doesn’t display the design correctly. The second is that when I turn the iPad from landscape to portrait it displays the iPhone layout. Similarly the destop layout changes to the iPhone layout way before the breakpoint, or so it seems.
It’s hard to explain in great detail. My question is am I fundamentally going wrong and/or is Hype Reflect buggy and not representational of the designs I’m creating. I have applied flexible layout settings to each of the designs and elements within them.

Any help and opinions welcome. I am using Hype because of the WYSIWYG and minimal coding needed. I have been using Hype for 3 years though this is the first time I’ve tried flexible layouts and breakpoints

I’m using a Mac Pro running El Capitan, iPad Air 2 and iPhone 6 running iOS 9

Thanks

3

Hi Jeff, (@jrl)

A few things,

What exactly does it not display? Can you elaborate a little more.

Maybe check that the breakpoints are different. For example:

•

The breakpoint here is 320px but the next one is 480px so any resize in between these numbers results in this layout being shown.

•

Here the breakpoint is 480px so the layout for landscape is shown. Now the next size is iPad Portrait so I would create a layout with a breakpoint of 768px and then another of 1024px, etc.

So, in theory when a user resizes (or uses the appropriate medium) to those breakpoints he should see the responding layout.

Hope this helps!

D

4

Thanks. This was a huge help. I have customised the break points and its starting to work better, I still need to tinker. The default breakpoint for the iPhone 6 seems a little odd though.
As for the Hype Reflect, I have worked it out and I was being a bit of an idiot, it was a flexible layout setting.

Cheers.

5

Hi Jeff,

Glad to see you’re on your way and progressing.

Here is a little template I setup to get a responsive / layout project going. It’s a kind of jumping off point for any future projects. Have a look and see if you can get anything from it.

responsiveBreakpoints.zip (49.1 KB)

D

1 Like