Responsive Layouts Mastered With Readz’ Smart Layout Feature

As a brand, you want to be build content that is responsive across all devices. This means that when you change the size of your browser, your content will adjust to better fit the size of the window. In order for your layout to stay consistent when this happens, web browsers have to know the positioning of the elements.

In code (CSS), developers use many positioning schemes such as floats, relative positioning, and absolute positioning to control how elements are positioned in relation to one another. Positioning schemes can be complicated and confusing,  and especially, we want you to be able to create the most awesome microsites with Readz without ANY coding, which is why we created the Smart Layout feature in Readz.

The Smart Layout feature will automatically determine the most logical default positioning and placement, but it also gives you the power and control to override default layout settings to create any layout effect that you would wish for.

How does it work? The Smart Layout feature allows you to control the stacking relationship between elements on a page. You can set the spacing between elements that will remain consistent even when screen sizes are different. This is important because when a screen size becomes smaller, text boxes become narrower and longer. If there is an image right under a textbox, the text could overlap the image as it lengthens.

Here is an example to illustrate this. Let’s say you add a textbox and then place an image below it. The system will automatically set the smart layout so that the image is stacked below the text box. When you select the image, the text box above it will be outlined in red with a picture of an anchor at the bottom of the textbox, which indicates the image  will keep its position below its anchoring element (in this case the textbox).

anchor-elements-screens

 

This way, when you look at your publication on a smaller screen like an iPhone 5 versus a larger screen like a Nexus 6, the layout will look great on either device, and the textbox will not overlap the image.

phones-big-small-layout

 

 

For the most part, Smart Layout happens automatically. If you want to create more complicated arrangements, you can set the smart layout manually.

You can read more about this in our how-to guide.

 

Subscribe
Our blog highlights delivered bi-monthly to your inbox
Subscribe to email updates
Our blog highlights delivered bi-monthly to your inbox
TOTAL SHARES 16

Builder. Marketer. Technologist. CEO @Readz | The one-stop solution for brands to create interactive brand content for the web | organic foodie beerie | paleo | cyclist | Los Angeles