How to create one site for phone, iPad & computer


(Stephen N. Larcovicc) #1

How can I carry over a web site that I buil in Hype for a phone; convert it to iPad size & computer size?

Thanks

Weet


(Jonathan Deutsch) #2

There are two methods in Hype that help with multiple device layouts:

  • Responsive Layouts - have entirely different layouts (basically scenes) based on the width and “breakpoints” determine when to show which
  • Flexible Layout - adjust the position and size of individual elements based on the container width/height.

Often these two are used in conjunction.


(Nick ) #3

@weet335

Here is a template that may help you get started.
I used the Responsive method. Just a personal preference.

It has some javascript to make the navbar "sticky"
You can use the color blocks to hold images etc and then attach links etc.

Also I find that when working with responsive designs you will want to get Hype Reflect for your tablet and phone it is just the best experience for testing.
Any questions let me know.

RESPONSIVE.zip (204.2 KB)


Upload files simultaneously for same design site for phone, iPad, MacBook pro
(Stephen N. Larcovicc) #4

Thank you, Jonathan! I will try these out!

Weet


(Stephen N. Larcovicc) #5

Thank you, Nick!


(Jonathan Deutsch) #6

Awesome example @nick!