The Basics of Responsive Design
Sites need to respond to the device they appear on
These days people access the internet on a wide variety of devices, this means that different approaches need to be taken when laying out a site as these devices can be constrained to the particular display size they have.
Simply put, a responsive design fits the needs of the device the user is using. The layout can then change based on the capabilities and size of that device. An example of this is a tablet user seeing content in two columns, while a phone user would see this in one column. Because screen sizes are constantly changing with the many different devices that are also changing every day we need our site to be able to adapt to any size thrown at them.
This might sound scary, but really there are a few places we can start that make the process of turning your site into a responsive one pretty easy.
First, set the viewport.
Pages optimized for lots of different types of devices have to have a meta viewport tag in the head of the document. This gives the browser instructions on how to control scaling and sizing. Typically in trying to make the content look better mobile browsers render the page at a desktop screen width of 980px and then increase the font sizes and scaling to fit the screen.
<!DOCTYPE html><html lang="en"><head>…<meta name="viewport" content="width=device-width, initial-scale=1">…</head>…
So using the meta tag with name=”viewport” and content=”width=device-width” basically tells the page to match the screen’s width in its own device’s pixels. This allows the content to match different screen sizes.
When an image with fixed dimensions has a larger size than the viewport it creates a scrollbar. One way this could be dealt with is giving all images a max-width of 100%, causing the image to shrink to fit the space it has should the viewport size be smaller than the image. You can also set max-width: 100% to prevent the image from stretching beyond its natural size too.
You can also adjust the layout using Flexbox, CSS Grid, or Multiple-column to help customize and add responsiveness to your site’s layout. Also you can create Media queries based on the viewport size of the device Below are the following things you can test for…
-width (min-width, max-width)
-height (min-height, max-height)
-orientation
-aspect-ratio
In my next blog post, I will talk more about Media Queries and continue with other basics on making your site responsive. In the mean time please check out this reference.
