Responsive Design – Coding Media Queries, Flexible Visuals, and Fluid Grids

Responsive design is very important for a website because it allows the visitor, on whichever device they prefer, to have the most meaningful view with the device that they are using.

For example, if a visitor is on a phone but the website is made for only larger screens, like a desktop or laptop, then the website will become hard to navigate, pictures and ads will not resize, and some of the website might even be cut off. If a visitor is having trouble with the website and they’re not able to navigate it properly, they will leave the website sooner then they would have if the website was working properly.

 

 

Media queries are an important factor which resizes or swaps different parts of the website so that it will be easier for the user to use. The website is usually created for a desktop or laptop views and is then coded for tablet and mobile views. As the website is resized for different devices the media queries uses the sizes to determine which code to use, either desktop, tablet, or mobile.

 

Flexible visuals are just as important as media queries and are usually located within media queries. If an image cannot be resized for a mobile device then the user will end up looking at an image that is cropped or zoomed in weird.

 

Fluid grids can be used for websites on large screens, tablet, and mobile views. The screen can be split into different sections using columns and rows. Columns can be used to place pictures, articles, navigation, buttons, paragraphs, headers, and any other visuals into a specific spot. Padding, margins, opacity, and z-indexes can utilized to add more layers to the website and with the availability to use columns and rows it will be easier to arrange the content to your pleasing. Columns can be arranged to all be equal, for example three columns each of 33%. The columns can also be arranged to each be different values, for example three columns with one column 33%, another 24%, and another 43%. Remember that the web page will have a total of 100%. W3Schools has a tutorial which further explains how to code fluid grids.

Visuals taken from Pinterest.

One thought on “Responsive Design – Coding Media Queries, Flexible Visuals, and Fluid Grids

  1. I found this blog post was well explained and I liked that you included a tutorial for coders to follow along. I would make a few tweaks to your wording for example using a different word instead of the same one twice or rewording it entirely. Pinterest is an excellent example of responsiveness because of the different layouts in the sizing of the images however I would’ve liked to see another website that may have had more text in it just to see how it would affect the size and layout of the text. Great blog post!

Comments are closed.