If you’re a web developer, you need to consider how your designs will appear on mobile sites. Responsive web design is an excellent way to adapt to all screen sizes. These GIFs can teach you how it works.
If you’re unfamiliar, responsive web design is a concept where a website shrinks or expands to fill the space it’s on. In fact, Lifehacker uses such a design, so if you want to see it in action, open our front page on your desktop and resize the window down to the size of a phone screen. All the elements on the page will automatically readjust to a layout better suited for the space they occupy.
Design blog FROONT breaks down some of the key building blocks that go into responsive design, such as using relative unites (depicted above) or establishing breakpoints where wide content can move further down the page on thinner screens. Check out all the GIFs, along with an explanation of each one, at the source link below.
9 basic principles of responsive web design | FROONT via Design TAXI