Responsive Web Design
Responsive web design means a design that can respond to the various screen sizes your visitor could be using, i.e. mobile, tablet, small desktop or large desktop, and serving a design that presents well on that device.
How to Make a Website Responsive
This is done by using CSS Media Queries, which can apply different CSS styles to your layout divs depending on screen size.
Design for mobile first, i.e. a screen size of 320px. This screen size can be simulated on your desktop by decreasing the size of your browser window. With Google Chrome you can press Ctrl+Shift+I and then type in a width of 320 to simulate a mobile device.
As you widen your browser window from 320px, a design can start to look terrible, e.g. the lines of text get very long and therefore difficult to read. This is when you need to set a Media Query Breakpoint, which applies new CSS rules to make things look better on a larger screen size.
Typically breakpoints are set for devices as follows:
768px for tablet.
992px to 1024px for small desktop screen.
1200px for large desktop screen.
Note, in time, I hope to expand this article to give all the HTML and CSS to create a responsive website from scratch. For now however, if you need a responsive website template, then take a look at Bootstrap, which is a web design framework that takes care of the responsive design for you.
See also: Media Queries for Standard Devices from CSS-Tricks.
Resources for Responsive Web Design
44 Responsive Web Design Resources: The Ultimate List from the User Testing Blog
All Content ©2020 WebRef.eu