In this tutorial, you will learn about the fundamentals of creating a responsive website design.
To create a fluid grid we will need to use relative units rather than absolutes. This means you will be working with percentages, em, and rems, rather than pixels for all layout related lengths.
In modern fluid grid design, there are three main techniques of creating a fluid grid:
Images will not scale automatically when the viewport changes. When you create a responsive design you will need to ensure that images adapt nicely. One method of making an image flexible is to specify the dimension in percentages.
As image usually take up the most amount of page weight so you will want to consider image optimization based on viewport size.
Media queries allow the styles to be changed based on breakpoints. Each breakpoint you define in your CSS will usually be related to a device. A basic common breakpoint guide is mobile is anything less than 640px, a tablet is between 641px to 1007px and a desktop would be anything over 1008px
In a mobile-first approach, you might write a call to action component that displays full-width on mobile, e.g. width: 100%. You could then write a media query to change the width of the div to 50% if the viewport ever exceeds 641px.
Software Architect, Programmer and Technologist Jon Jones is founder and CEO of London-based tech firm Digital Prompt. He has been working in the field for nearly a decade, specializing in new technologies and technical solution research in the web business. A passionate blogger by heart , speaker & consultant from England.. always on the hunt for the next challenge