Best practice workflow for working with desktop and mobile

(lasse kramer) #1

I’ve been using Hype for about 6 months now.

All of my projects always contains at least two “layouts” - one for mobile (380 px width) and one for desktop (620 px width). I still wonder what would be the best practice here - how to start and how to prevent double work, when making changes to one of the layouts.

The way I’ve been doing this has been : starting out with the desktop version - when done here, then copying it all (with animations) to the mobile layout…and then start modifying. BUT is this the best/right way to do it ?

Any help would be appreciated.

Best regards Lasse

(Freelancer) #2

this is the right way, using only the regular hype options.
Here you can find a way to avoid text clones, this is a good start

I’m working on a full set of CSS to make responsive images, text and some other elements , not just a text box but a stretchable symbol with centered elements.

(lasse kramer) #3

Thanks a lot :slight_smile:

( #4

My personal suggestion is to always work with symbols: if not you work twice! I wanna make tutorials about it: I developed a technique in which, using multiple timelines, I adapt the object to the context. :wink:

This is how I structured my website:

You can see how the same symbol “universe” and also the others adapt to mobile and desktop, and if I change something, it changes in both versions! :smiley:

I also use a lot the flexible layout with the “Zoom Contents” option, so everything inside a group adapts maintaining the absolute positioning.


Nice Work on your Behance portfolio.

(lasse kramer) #6

Really great work - thanks :slight_smile: