Mobile Web Specialist Series: Responsive web design(patterns).
Following the process to train me for the mws exam, I continue with responsive web design topic and most important The Patterns.
For an easy explanation about the behavior of patterns, I had taken the material from Google Web Fundamentals by Pete LePage like content and samples, not being more, let’s start.
The most used layouts for patterns are five patterns: mostly fluid, column drop, layout sifter, tiny tweaks, and off canvas. In some cases a web pages requires of pattern combinations, These patterns, originally identified by Luke Wroblewski, provide a solid starting point for any responsive page.
Mostly fluid
This pattern consist in a fluid grid. On large or medium screens usually remains the same size, simply adjust the margin for the wider screens.
On smaller screens, the fluid grid causes the main content to re-flow, while columns are stacked vertically. The major goal of this pattern is that usually only requires one breakpoint between small screens and large screens:
In the smallest view, each content div is stacked vertically. When the screen width hits 600px, the primary content divremains at width: 100%, while the secondary div's are shown as two columns below the primary div. Beyond 800px, the container div becomes fixed width and is centered on the screen.
.container {
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
}
.c1, .c2, .c3, .c4, .c5 {
width: 100%;
}
@media (min-width: 600px) {
.c2, .c3, .c4, .c5 {
width: 50%;
}
}
@media (min-width: 800px) {
.c1 {
width: 60%;
}
.c2 {
width: 40%;
}
.c3, .c4, .c5 {
width: 33.33%;
}
}
@media (min-width: 800px) {
.container {
width: 800px;
margin-left: auto;
margin-right: auto;
}
}Column drop
For full-width multi-column layouts, column drop simply stacks the columns vertically as the window width becomes too narrow for the content.
Like the mostly fluid sample, content is stacked vertically in the smallest view, but as the screen expands beyond 600px, the primary and secondary content div's take the full width of the screen. The order of the div's is set using the order CSS property. At 800px all three content div's are shown, using the full screen width.
.container {
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
}
.c1, .c2, .c3 {
width: 100%;
}
@media (min-width: 600px) {
.c1 {
width: 60%;
-webkit-order: 2;
order: 2;
}
.c2 {
width: 40%;
-webkit-order: 1;
order: 1;
}
.c3 {
width: 100%;
-webkit-order: 3;
order: 3;
}
}
@media (min-width: 800px) {
.c2 {
width: 20%;
}
.c3 {
width: 20%;
}
}Layout shifter
The layout shifter pattern is the most responsive pattern, with multiple breakpoints across several screen widths.
Key to this layout is the way content moves about, instead of reflowing and dropping below other columns. Due to the significant differences between each major breakpoint, it is more complex to maintain and likely involves changes within elements.
This simplified example shows the layout shifter pattern, on smaller screens content is stacked vertically, but changes significantly as the screen becomes larger, with a left div and two stacked div's on the right.
.container {
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
}
.c1, .c2, .c3, .c4 {
width: 100%;
}
@media (min-width: 600px) {
.c1 {
width: 25%;
}
.c4 {
width: 75%;
}
}
@media (min-width: 800px) {
.container {
width: 800px;
margin-left: auto;
margin-right: auto;
}
}Tiny tweaks
Tiny tweaks simply makes small changes to the layout, such as adjusting font size, resizing images, or moving content.
As its name implies, not much changes with this sample as the screen size changes. As the screen width gets larger, so do the font size and padding.
.c1 {
padding: 10px;
width: 100%;
}
@media (min-width: 500px) {
.c1 {
padding: 20px;
font-size: 1.5em;
}
}
@media (min-width: 800px) {
.c1 {
padding: 40px;
font-size: 2em;
}
}Off canvas
Rather than stacking content vertically, the off canvas pattern places less frequently used content — perhaps navigation or app menus — off screen, only showing it when the screen size is large enough, and on smaller screens, content is only a click away.
Rather than stacking content vertically, this sample uses a transform: translate(-250px, 0) declaration to hide two of the content divs off screen. JavaScript is used to show the divs by adding an open class to the element to make visible. As the screen gets wider, the off-screen positioning is removed from the elements and they're shown within the visible viewport.
body {
overflow-x: hidden;
}
.container {
display: block;
}
.c1, .c3 {
position: absolute;
width: 250px;
height: 100%;
/*
This is a trick to improve performance on newer versions of Chrome
#perfmatters
*/
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transition: -webkit-transform 0.4s ease-out;
transition: transform 0.4s ease-out;
z-index: 1;
}
.c1 {
/*
Using translate3d as a trick to improve performance on older versions of Chrome
See: http://aerotwist.com/blog/on-translate3d-and-layer-creation-hacks/
#perfmatters
*/
-webkit-transform: translate(-250px,0);
transform: translate(-250px,0);
}
.c2 {
width: 100%;
position: absolute;
}
.c3 {
left: 100%;
}
.c1.open {
-webkit-transform: translate(0,0);
transform: translate(0,0);
}
.c3.open {
-webkit-transform: translate(-250px,0);
transform: translate(-250px,0);
}
@media (min-width: 500px) {
/* If the screen is wider then 500px, use Flexbox */
.container {
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row nowrap;
flex-flow: row nowrap;
}
.c1 {
position: relative;
-webkit-transition: none 0s ease-out;
transition: none 0s ease-out;
-webkit-transform: translate(0,0);
transform: translate(0,0);
}
.c2 {
position: static;
}
}
@media (min-width: 800px) {
body {
overflow-x: auto;
}
.c3 {
position: relative;
left: auto;
-webkit-transition: none 0s ease-out;
transition: none 0s ease-out;
-webkit-transform: translate(0,0);
transform: translate(0,0);
}
}Not being more, until the next post of Mobile Web Specialist Series, thanks for reading 😬.
