Responsibility of Responsiveness
Responsive design refers to the ability for a website to adjust according to a different screen sizes. An app that looks beautiful on your laptop should look just as beautiful on your phone. In creating a responsiveness design, you avoid the need to re-create an application for your phone with different code.
Responsive design is accomplished through CSS ‘media queries’ and it almost like conditionally rendering a different layout based on the users device.
/* Mobile Styles */
@media only screen and (max-width: 400px) {
body {
background-color: #F09A9D; /* Red */
}
}
/* Tablet Styles */
@media only screen and (min-width: 401px) and (max-width: 960px) {
body {
background-color: #F5CF8E; /* Yellow */
}
}
/* Desktop Styles */
@media only screen and (min-width: 961px) {
body {
background-color: #B2D6FF; /* Blue */
}
}If you’re anything like me, you start off by developing for a desktop. In order for me to make it responsive to a different device, I can add the tablet and user styles and it will avoid the need to develop the same app for a different screen size.
Take a look at what’s happening too. When using the media query for mobile for example, your saying “Hey, if the size changes to 400px and below, show me red. If the size is anywhere between 401px and 960px show me orange. Anything greater than that, show me blue.
The same concept can be made for more complicated components such as a navigation bars. If you ever condensed a website, you’ll see that the navbar turns into a hamburger icon to accommodate for the changes in size.
I personally like to use flexbox as it makes responsiveness much more manageable. You may want to hide text or customize some element on the website but flexbox is a great foundation to start making your website responsive.
In the image above, you can see how you may benefit from using flex-box or grid to make your site responsive while keeping a clean aesthetic.
To help me with this, I’ve been using the resource internetingishard.com as I find that it is written concisely and has some of the best visuals to help understand concepts before implementing them on your own. I highly suggest checking it out as I don’t want to reiterate and possibly run the risk of plagiarizing their content. As always happy coding!
