Test of responsive layout


(Hans-Gerd Claßen) #1

We’ll expose to provide our daily magazin-dps-app also for iPhone in summer.
it’s got a article with eventtips and I currently try to switch it from indesignlayout to hmtl as it will be to much work to change its layout within indesign. separating layout and content this is my current state. Targets are tablets (landscape: iOs, Android), iPhone (portrait) and later on smartphones driving Android within a webview. Would be nice to get some advise if it’ll works for those (layout, video …)


(strmiska) #2

ich schreib dir in deutsch-geht besser:
auf nexus 7 scrollt der text immer über die fotos und die texte sind links verschoben. (chrom und firefox).
die videos sind im portraitmodus hochgestellt - am ipad alles normal.
am iphone 6 plus spielt das video im hochformat. im landscape modus ist alles abgeschnitten.
anbei screenshots
der ton in android hört nicht auf, wenn ich den browser wechsle.


#3

One quick performance thing I recommend:

For your video overlay which slides on from the left, I would slide it in and then animate opacity. Combining an opacity change with movement might be what’s making the animation jumpy. (It’s jumpy on iphone 6 and ipad mini 2).

This might be what @strmiska mentioned, but video is sideways on iPhone 6.

The reading area is a bit small on portrait Iphone. I recommend scrolling the header image up when scrolling down. (Or making it smaller).

Great work and attention to detail! If someone showed me this document and said it was built with Hype I would need to see it to believe it.


(Hans-Gerd Claßen) #4

thx for good response :smile:

disabled the slides of map and video.
will have to see how to handle video best for smartphoneportait.
as tabletmode will always be landscape and smartphonemode will always be portrait - both fullscreen - within the app there will be less spaceproblems …


(ocultor) #5

totally off topic, but that page looks awesome H_classen.


#6

Would you like to shoot a hype example? I really want to learn how to do it. Having treble make my prototype responsive.Thank you!


(strmiska) #7

i think you took the wrong person > @h_classen! :smile: