Basic Responsive Layout Pattern

reza andriyunanto
Sep 11, 2018 · 3 min read
Layout Pattern Mostly Fluid

As we know, Progressive Web Apps or PWA is hype in last 2 years, and basic for learn PWA is responsive layout pattern. I will explain 4 layout pattern for responsive design, lets check out!

First is Column Drop

Column Drop means when our screen resolution changed into smaller, the column will be drop into under another column, and when changed into bigger width resolution, our column will go up just like this preview.

Column Drop Responsive Pattern Ilustration

For example, this pattern can used for news website or e-commerce which is have many content group, so we can adjust our content as we want.

Second is Mostly Fluid

Mostly fluid is like a column drop pattern, but at one break point, we stop change the ratio change and only change the margin of content, so when we got device with so big resolution, we don’t worry about the ratio of content, let check this illustration.

Mostly Fluid Responsive Pattern

In illustration show that screen have 3 break point, and when we got the last break point (from smaller into bigger), there no change content happen, so no worry about the content when resolution grow bigger.

Third is Shifter

Shifter is responsive pattern that allow us to change order of element on our layout, just like when on mobile, we want our element on far right and when view on website on far left, we can use this pattern just like this illustration

Shifter Responsive Pattern

Last one, Off Canvas

We often see this responsive pattern on navigation bar, almost every web responsive implement this responsive pattern, this show that the element of canvas is out of screen, so we can’t see that until we click button that trigger the canvas show into screen. Here the illustration.

Off Canvas Responsive Pattern

See? that like navigation bar that we see every day, and that useful when we used for mobile view, and when we got bigger resolution, we can hide the hamburger button and show all content on navigation bar.


From 4 Responsive Pattern, we can modify and explore more about responsive pattern, and dig more deep about our content, so we can adjust our content as we want and user can get more great experience with our product.
If you want, you can explore about that using my source code at here,

Thats all, I hope you get it, see you in the next post.

reza andriyunanto

Written by

Backend Engineer, Tech Enthusiasm, Love data and sometime curious about anything.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade