What is the difference between a scene and a layout?

Getting Started
1

Simple Question. Cannot find a simple answer.

Just want to build a desktop site for my Family.

Do I use scenes or layouts, they seem to be identical to me.

2

If you only want a desktop size, no need to use additional layouts.

However, if you’d like to build an adaptive site that displayed differently on a desktop, iPad / Android Tablet, and iPhone or other smart phone, you’d use a layout. The alternate layouts are automatically displayed depending on browser’s width.

Try this:

  • Build a single scene with 2 layouts. One for a desktop and another for a phone.

  • Add a text box with some text and / or some images to the desktop layout. Copy those elements to the phone layout. Change the width of the text box and width / placement of the image.

  • Publish or preview then resize your browser. The scene will automatically swap between the two widths for you.

3 Likes
3

Tried that Steve, interesting thank you.

I have noticed that if I have one scene and two layouts if I delete the scene then all images in the layouts also disappear! So i am forced to use scenes, is this correct?

4

That’s correct:) When you create a scene, it seems like it creates a layout for you based on the document configuration. It’s just hidden until you create another layout. Scenes are where new segments are created.

5

Does this work for iBooks? Meaning if I create two layouts and export as an iBook widget, would it automatically adjust between iPhone and iPad setting? Thanks.

6

Unfortunately not: The size that the HTML widgets detect is the same size whether viewing on an iPad or iPhone. The reported size is always 1024x768.

7

Scenes are like a series of animated slides in a slide show. Layouts are used for presenting the content of a scene so that the sizes, positions, etc., of the content of a scene will look good in different browser sizes.

Create one scene with a stage of 900 px and click the checkbox for horizontal scaling. Insert a text object and a rectangle side-by-side. Select them and in the flexible layout panel click on the left and right pins so that each retains its relative position horizontally. preview it in a browser. Grab the right edge of the browser and drag it to the left. The two items will move closer together, retaining their relative positions. Make the window narrow enough and they will overlap.

Go back to the scene, then create a new layout that is much more narrow - such as 450 pixels. You will notice that one of the elements is now off the stage. Move it back onto the stage and reposition them so that the text is above the rectangle. Now preview them. Now, when you drag the width of the browser window you will see that when you hit the 450 mark the 900 px layout will switch to the 450 px layout. Same scene, but different layouts.

1 Like