HOW RESPONSIVE DESIGN WORKS

On a desktop screen, pull the right of your browser to smaller sizes to see how the blocks above reflow

As a product, UX or web designer, it's important for you to know this tricky concept

1

2

3

4

5

This shows you how the content reflows inside the grid from top to bottom and from right to left (yes the content on the far right gets pushed underneath and to the left of the content above when the screen size gets slimmer).

NOTE:  how when moving from Desktop to tablet width, box 4 drops down underneath box no. 1.

So on...
1280px screen width and above, the layout is:
12345

Desktop layout is:
1234
5

Which changes to tablet like this (with the 3 & 4 popping underneath the 1 & 2 etc):
123
45

and mobile in landscape orientation like this:
12
34
5

and finally to mobile layout like this with the boxes vertical:
1
2
3
4
5

.. grab your phone and type in this link to view the mobile version for yourself at www.artfuly.com/responsive-design


To really push this point home and so you can visualise it:

Here is a quick video explaining what responsive design is, and showing content reflowing
(you can ignore the developer terminology)

This video shows how the fluid grid in a responsive website reflows from Desktop size, to tablet size to mobile size
(Watch from the 4 to 6 minutes only)

and here is a site showing how designs change across different widthshttps://mediaqueri.esOpen any of the listed sites in a browser and pull the right hand side of the browser down to a very slim mobile width (on your desktop) [notice how the design reflows between the large (desktop), Medium (tablet), and small (mobile) screen sizes [watch how this works at various different points down the page]

Hopefully now you have a basic idea of how content reflows for different screens sizes, which will enable you to 'think through' things when you're creating your designs in Figma.

For further help, see below.

Design book

Coming Soon

Learn the simple Visual Design Principles that all good UX & Product Designers know,
 so that you can create stunning designs too - Available as e-book for €7.99

Leave your details to hear when it's ready!

Discuss your learning goals
...or ask a question
Book a time
Received!
A reply will be with you shortly!
Form submit error - please email info@waveweb.design instead
Artfuly logo
AboutSend an Email
Follow Wave Web Design on LinkedinFollow Artfuly on YoutubeFollow Artfuly on Tiktok
PrivacyImpressum