Liquid Layout: A Unique Responsive Web Design Tool
Our liquid layout feature automatically adjusts your web design to fit any size screen or window: from mobile to laptop to desktop monitor and anything in between.
There is a fundamental obstacle in web design:

Web browsers need to know the positioning of elements in order to display a page correctly. But controlling where an element displays on a page is very complicated especially in today’s world of ever growing device and screen sizes. When you code a responsive website, you have to have a clear grasp of non-obvious coding principles like media-queries, and methods like floats, relative, and absolute positioning. Other - traditional - WYSIWYG web creation tools offer you a semi-flexible environment, with limited drag-and-drop capabilities. Typically, you will have to create a stack of boxes, or containers or div’s or whatever name the platform uses. You then fit your content into these stacked boxes, and to make your layout look good, you are required to manually add margins and padding.
image
Who wants to manually type in dimensions for all those arrows??
This method works, but it does come with certain design restrictions: everything has to fit into that Tetris-like stack of boxes, and if your design is not repetitive, it gets tedious to create this. Also, it causes most sites to start to look alike because of its restrictions. We thought it would be cool if you didn’t have restrictions.
We imagined that you could create layouts with elements positioned anywhere you would want them, without having to worry about manual padding, margins, spacing or fitting everything into a box scheme.

So we created a layout engine that does all of that. It's called 'liquid layout'.
homepage-drag-drop
Goodbye design restrictions
With our liquid layout engine, you can freely move any element around and place it where you want it. Next to another element, under another element, on top of another element, in the top header... anything is possible. When you drag-and-drop an element on the canvas in the location where you want it, our liquid layout engine will automatically create its own positioning, proportionally to other elements on the canvas. If you drop an element directly beneath another element (in the shadow, as we say), it will automatically ‘anchor’ to the one above it. This means that whenever you move that above element, the bottom one will move with it. This is shown to you, as a user with a colored indication. Imagine the elements in your layout, connected by (invisible) threads that tell the browser where to position them. Sounds a lot more flexible than Tetris-boxes, right? We designed this feature so that this anchoring is only automatic if the two elements are right above/below one another - we found that automatically anchoring any two elements caused more problems than solutions. (If you would, however, like to connect two elements that didn’t automatically anchor, please view our guide about manual anchoring and binding :) Where it gets really cool though is that this ‘web’ adapts itself to the size of the browser window that your visitors are using. On a small browser window, the liquid layout contracts and on a larger web browser window, the liquid layout expands. So your layout looks like you intended it across screen sizes. But wait. There is more. Contracting and expanding is all nice and well, you might say, but does my layout look as intended when the distance between the elements is variable? Wouldn’t it all look quite crowded on a smaller screen, or sparse on a large screen?
liquid-layout
It would - except that all your elements will scale as well. Images will adapt in size, and even your fonts! We use ‘rem’ in our font sizes, so even your fonts will adapt themselves to the browser window size and preserve your layout. Adaptive behavior And to finally conclude all of the aspects of our liquid layout: it is adaptive. Our platform will ping the user’s device and send the appropriate version (desktop/mobile) to that device.
web element- menu web element- blue menu
Back to Menu
LEARN MORE
DELIVER BETTER CONTENT EXPERIENCES
web element- close
readz logo- mobile
twitter logo
facebook logo
linkedin logo
web element- close
DELIVER BETTER EXPERIENCES
LEARN MORE
SUBSCRIBE
label 1
Email:
readz logo
SUBSCRIBE
readz logo- bold
readz logo
DESIGN THE WAY YOUR BUSINESS GROWS
Powerful, intuitive content creation software for marketers and designers.
VISIT READZ.COM
TRUSTED BY SOME OF THE WORLD’S SMARTEST COMPANIES
readz client- nonprofit readz client- health care readz client- sporting goods readz client- financial readz client- legalreadz client- technology readz client- mediareadz client- cosmetics readz client- hospitality readz client- telecommunications readz client- outdoor advertising readz client- ecommerce
label 1
Email:
SUBSCRIBE
readz logo- mobile twitter logopink twitter logofacebook logopink facebook logolinkedin logopink linkedin logo
Share:
pinterest logopink pinterest logo
USING READZ
BEST OF
LATEST