Basic Responsive Layout Pattern
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.
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.
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
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.
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.