"You can never have too much Responsiveness"-Edem Gold
SUMMARY
All the tips in this article were made by Thomas Ejembi I just made it all into an article.
Responsiveness is a very important aspect of building Websites and Web Applications.
Responsiveness is the act of making web apps and websites adapt to any screen size in order to optimize the user's experience.
CSS is a style language that is used to design websites and web pages to make them more attractive.
The creation of smart phones and tablets has made application responsiveness a very important part of the development of any web application.
Above is a picture about responsiveness
Application responsiveness is a topic every Web Developer should master and I've been getting a lot of questions on web responsiveness and I have also seen a lot of how do I make my website more responsive?, How do I improve my responsiveness questions on Twitter.
So I wanted to write an article that could make responsiveness a little bit easier for beginners without all the technical words which just seem to always complicate things, but unfortunately, responsiveness is not really my strong suit so I asked a friend Thomas Ejembi who is a front end developer, so he gave me some great tips on responsiveness and my job was to make all those ideas into an article (I'll leave it to you to determine if I did well).
Before we get into the cool stuff let's find out...
What Responsiveness Is All About
Below is a youtube video explaining responsiveness
According to Wikipedia, Responsive web design an approach to web design that makes web pages render well on a variety of devices and window or screen sizes from minimum to maximum display size. Recent work also considers viewer proximity as part of the viewing context as an extension for RWD. Content, design and performance are necessary across all devices to ensure usability and satisfaction.
In simple words, Responsive Web Design is simply the ability of your web application or website to adapt to any screen size be it on a smartphone, a tablet or a Laptop or Desktop, and still be able to look attractive to the user.
Now we've got the responsiveness down let's find out the
Meaning of CSS
CSS which stands for Cascaded Style Sheets, according to Wikipedia is defined as a style sheet language used for describing the presentation of a document written in a markup language such as HTML.
In simple words, CSS is simply a language tool that is used to design websites and web pages to make them look more attractive
CSS is a very important tool in the toolbox of every web developer. I'll try to stress its importance using the human body, if a website or a web app was a person, HTML would be the skeleton, Javascript would be the brain and CSS would be the flesh (don't ask me about the soul :D)
So far we've talked about Responsiveness and CSS. Now for the fun part
Tips On How To Improve Responsiveness In CSS
In the explanations, I will give links to deeper explanations for those who wish to know more about the different tips.
Let us Begin
CSS grid and/or CSS flex layout
By default CSS grid and CSS flex layout are responsive. CSS grid will adjust the width of the layout to fix the width of the device. While CSS flex has a flex-wrap property that would wrap a container and move it below the page if the page width is smaller than the width of the container. The point of responsive design is displaying content on any device properly. Content on a responsive website would look good on any screen size. CSS grid and CSS flex properties give us this freedom with little or no media queries. CSS grid and CSS flex properties are very easy and pretty straightforward to learn. You can learn more about the CSS grid and CSS flex layout here
Mobile-First Development
The mobile-first approach is recommended because it is easy to adjust a website UI from a small view to a larger view. Some people might argue that they could just use the @media screen and (max-width:;) properties when building for desktop and mobile but those properties can be easily overwritten for example if you write:
@media screen {
max-width: 300px ;
}
@media screen {
max-width: 500px ;
}
the code in the latter will overwrite the formal, and this would be disastrous. But this is not the case for the @ media screen and (min-width:;) use for building for mobile to desktop. Click here to learn more about building mobile-first.
Use min-width 0r max-width for container instead of fixed values (height: 300rem)
Min-width is the minimum width of a container while the max-width is the maximum width of a container. Using these CSS properties will decrease the number of media query one would write. For example:
.container {
Max-width: 500rem;
}
using the following code on your container class will make it not grow larger than 500rem in width on a larger device.
.container {
Min-width: 10rem;
}
Using the following code on your container will make it not go smaller than 10rem on a smaller device. Using the above is far more preferable when building responsive apps . To learn more about the moon-width and max-width properties click here
Using % unit, vw, rem unit
Using percentage and VW unit is the preferable unit of width value. A container that is set to width 50% or 50vw will occupy 50% or 50vw of the page on all screen size. It is a relief cause we would not need to write different sizes of a container for different screen size. To make it better, use % unit with max-width. Setting a container to a width of 100% will occupy a page 100% as we’ve discussed on all screen size, but then adding a max-width of 30rem means the container would not get wider than 30rem on a large screen but on a small screen it would occupy the width 100%. With this approach, we would write fewer media queries. The VW means viewport width. The entire page width is the viewport width to put it simply. Setting our body element, container, text or image to a viewport width means the element will not overflow the page or screen regardless of the screen size. Which comes in handy. Rem unit is a relative unit. 1rem = 16px. Use rem unit when writing fixed value for padding, margin or height. To learn more about CSS units click here%20is%20the%20CSS%20unit.)
Set the body overflow-x property to hidden
setting the body overflow-x property to hidden would reduce the anxiety of scrolling horizontally especially when one has a very large image. Setting this property hidden would hide all the content that has overflowed the width of the body or page. Unless we want to write code for horizontal scroll effect, then we can set the overflow-x property to auto or scroll.
I and Thomas Ejembi really hope this helps you on your journey Web Development Mastery