discover
scroll to

RESPONSIVE DESIGN

RESPONSIVE DESIGN

PATTERNS

Wednesday – February 24

At the beginning of web pages, it was very common to access them through a computer so it was not very complex to design a web page. Currently, there is a great variety of screens that sometimes we do not know how to structure our design on our website, so some design patterns emerged to facilitate their design and subsequently the development. The most popular design patterns are mostly fluid, column drop, layout shifter, tiny tweaks, off-canvas, we can even see a mix of various design patterns.

The most popular design patterns are mostly fluid, column drop, layout shifter, tiny tweaks, off-canvas, we can even see a mix of various design patterns.

Mostly Fluid

It is one of the most used in large or medium screens, it remains with the same size only by adjusting the margins on larger screens. On smaller screens it makes the main content readjust as the columns stack vertically.

Column Drop

This type of layout usually on large screens starts with three columns, but as the content becomes narrower each column is stacked vertically.

LAYOUT SHIFTER

This is characterized by having a lot of breakpoints depending on the width of the screen, but it is one of the most complex to develop since some elements of the page have to change their CSS properties

TINY TWEAKS

Tiny tweaks are one of the simplest to implement since you only have to change the size of the font, images, other elements of the web page. This is perfect for one-page or heavy-text websites.

OFF-CANVAS

This instead of stacking the elements vertically hides the elements and can only be seen by means of a gesture on small devices, but as the size of the screen is larger they appear

We can say that when designing our website, it is necessary to know these design patterns to have a better adaptation in multiple devices and most importantly choose the one that best suits our needs.


Job Coronado – FrontEnd Developer

VIEW
CLOSE