Hype Layouts

Responsive design emerged when the web started showing up on smaller screen sizes. The now established way to deal with responsive design is derived from a separation of content and design putting rules for different screen sizes into so called media queries. These are based on the available horizontal viewport width of the device screen and fluently break the content in to a vertical scroll pane. One important prerequisite is to think about these rules as circumstance of technology, history and habit. Hence, we could also have ended up using infinite plane that scroll in many directions or a horizontal scroll. In fact, the first emergence of the responsive web was tacked onto existing web pages made for desktop computer with 15 to 17-inch monitors. These responsive additions used a hard switch delivering an alternative version of the content for a mobile audience much like the first iteration of mobile content in a world before smartphones (Wireless Application Protocol).

Responsive design in Hype

Hype derived its solution to responsive design by its origin as an animation application and ambition to honor the habits, labor and love for classical animation. Hence, it had to support absolute positioning and stage as part of its solution. To start with Hype already allows the pinning of elements, groups and symbols on a per-scene basis giving you a big variety of layout options in a single layout setup (default). Should pinning not be sufficient Hype supports variations of your scene called layouts. They are by default driven by the width of the Hype document and it that sense distinct to the common notion of driving them based on the width of the screen. This makes sense as the Hype document width is the key driver in most cases to make layout switches useful.

Breakpoints

Hype uses document releated breakpoints and offers a varity of presets. Each new layout is valid and shown for any size from the breakpoint up to the next one or to infinity for the last breakpoint. The built in layouts are only a helper and set the Breakpoint Width. Selecting a device in Hype isn't any diffrent then setting the Break Point width to the same value. In most cases two layouts suffice one for small mobile screen and one for the dektop view.

Behind the scenes of layouts

Hype layouts under the hood are distinct Hype scenes and each deliver a unique design space. This differs from the now established way of doing responsive design by reusing the same content with a different set of rules (media queries). The way Hype solves responsive design with layouts introduces by default redundancy in content. This makes sense for an animation package as things might need different motion paths, animation timelines or design choices. It is a thing a traditional trained or younger web designer has to embrace and not fight against when choosing Hype for animation or a web project. It offers many benefits concerning direct design choices that take each layout serious without the overhead of understanding complicated rules. Also, if you set your Hype document to 100% width on a web page and position it without margins your layouts should match up with regular responsive design media queries.

Define your own responsive design rules

Another benefit of layouts in Hype is the fact that they are switched by the runtime. The internal switching mechanism therefor can be overridden and tailored to your needs. This gives you the possibility to switch design on any other rule or data you can come up with or have access to via JavaScript. The Hype event needed to influence layout switching is called HypeLayoutRequest and should return the desired layout name. To use device information or run one of the known CSS queries in JavaScript please look up window.matchMedia.

Syncing content across layouts

Working with repeating content across layouts (or scenes) becomes an immediate question when starting with Hype. As layouts and scenes are distinct design spaces Hype offers some built in mechanism to deal with shared content. Starting with symbols that if placed in a scene or layout create an instance of themselves and allow to reuse the same content without managing multiple locations to update. Apart from that Hype is based on JavaScript and has an event called HypeScenePrepareForDisplay that is accessible though code and on each scene if you're using the action stack. This event is fired before the scene is displayed or animated in a transition and allows you to update content in the scene dynamically.