Responsiveness, One Wonder Of Frontend Designs.
Have you ever thought of how intriguing and fascinating it is to have web pages dynamically change relative to different user devices? “like Jesus turned water to wine and spared the Bridegroom (client) the shame of not being able to meet the guests (user devices) demands” such would be the feeling of accomplishment that would transcend in the minds of frontend gurus who incorporate responsiveness in their designs. Though you wouldn’t want to call me a frontend guru yet “yeah am the guy who just learned responsiveness in web design not quite long ago”, I might know quite a few things about it and jeez I can’t wait to share.
I remember having a phone conversation with a friend who is into Tech and he asked if I know how to make a responsive web page and I couldn’t give a straight reply, well with what I know now I would want to have that conversation again.
Just like you would read in many articles “responsiveness is the combination of flexible grids, flexible images, and media queries”. Yes if you could combine these three concepts you would definitely get a responsive webpage. Although these concepts are quite broad and would require more than an article to actually discuss in length their approaches and how to go about them. However, this article will cover an overview of the three concepts.
One important thing to note when designing responsive webpages is to include the meta tag in the following manner;
<meta name=”viewport” content=”width=device-width, initial-scale=1" />This is included within the opening and closing tag of the head element and this will reset the viewport width to the size of the device and it works on every device. It also sets the scale to 1 which means its’ neither zoomed in nor out.
Flexible grids entail using a fluid layout and relative units for structuring the dimensions of HTML elements with CSS. Fluid or flexible layout can be achieved using the CSS flexbox or responsive grid system in arranging the layout of the page. Flexbox is quite simple to initiate, you start by setting the display property of the parent element lets say “container” to flex and this will make all items within the container flexible. Then you will go ahead to set the flex-direction to either column, column-reverse, row, or row-reverse.
Flexbox is richly endowed with properties such as flex-basis, justify-content, align-items, order, flex-grow, flex-shrink and lots of others to help you create a good responsive layout. While instead of using fixed units like pixels and ems for text, CSS has new units that are relative to the viewport width of devices and they include vw = view width, vh = view height, vmin & vmax = viewport minimum & maximum width or height respectively.
Flexible images can be achieved by setting the max-width of the image to 100% or the percentage you would want the image to show then set the height to auto. Images are quite helpful for illustrations on a webpage so it is needful for them to be responsive so they can be displayed in all devices to further portray the message the webpage wants to pass.
Recall when I said I had a conversation with a friend right, that was my first time hearing the phrase media queries and you could actually guess that I was quite blank on what it was. Now I know a thing or two about media queries and just like I said before I would really love to have that conversation again. Media queries are CSS rules that are used to apply other styling rules to elements for specific media types or device screens. Also, it can be used to specify rules for landscape and portrait view of a device.
So much for responsiveness, yet not many applauds is given to this frontend magic. Most clients won’t understand the work that goes underneath this, but they sure would have greater scope of users. You can check up other articles and materials using Freecodecamp, responsivedesign.is, and plenty others for more insight on how to make your webpage responsive.
