Before we begin building a responsive website, let us understand what it means. It does not mean that your website responds back to the user. If you were thinking your website will have a chat feature that sends users some answers, you can take a pause and laugh because when I started web development and was introduced to this concept, I thought the same.
Responsiveness is essentially a web design strategy where your website responds to the user’s device size and orientation. Here is a meme for you to ponder upon:
Earlier when smartphones were not available as they are now, websites were made desktop-first which means the developer thought of how the website will look on a desktop. And if then smartphones existed, these desktop-first websites would look no less than a puzzle. But now, when not only there is an abundance of smartphones and desktops, they exist in different sizes, orientations, designs and types.
To ensure your website is easily viewed on each kind of device and each kind of user is able to use it completely, you need to think about responsiveness and apply it for a wholesome user experience.
What will be building today?
There exist numerous frameworks which let you make your website responsive with ease. But what if you have just started in web development and your mind has already overflowed with information about HTML, CSS and JavaScript? Even if you are already well versed with all the three technologies, and you are ready to use a framework, it is important to understand their ‘behind-the-scenes’, to understand how exactly responsiveness is being implemented within a few lines of code.
Always remember, clarity of basic concepts leads to the creation of wonderful pieces of technology. We will be building a basic webpage which will contain an introduction, a quote and some wallpapers of Kakashi Hatake, a popular Naruto character. The introduction text on the webpage is taken from, the quote is an original quote written by Masashi Kishimoto (author of Naruto series) and the wallpaper images are taken from Pinterest.
This is how the webpage will look on a mobile device:
This is how the website will look on a desktop device:
Notice how the wallpaper images are three in a row on the desktop version and one image in a row for the mobile version. Also notice how there is a significant margin and everything is centralised in the desktop version whereas in the mobile version, everything seems to be attached to the boundaries of the screen.
Now that we know what to build, let’s dive into the code and see how we can actually build this website.
Writing the code
Writing the HTML code is like preparing a skeleton for our webpage, let’s break it down in very simple terms. We need a header image, a bold heading of the webpage, some content, a quote, six wallpaper images with a download button associated with each image to offer a download functionality.
This is a basic head skeleton of our webpage. ‘reset.css’ is added to reset all the browser styles and make sure your webpage is viewed the same across all browsers. After that there has been added another stylesheet ‘desktop-style.css’, this is our main stylesheet which will contain styles that will make our website look pretty on a desktop.
Following ‘desktop-style.css’, there has been added ‘mobile-style.css’. This stylesheet contains all the styles required for a pretty version of our website on a mobile. Notice there is another attribute in this link tag, media. This attribute controls the display of the stylesheet. Here I have added the property which will enable ‘mobile-style.css’ to get executed when the device width goes below 630px. You can play around with different device widths and orientations and add as many stylesheets you want.
One thing you should keep in mind is, the stylesheets get executed from top to bottom, so make sure you have added them in the correct order.
Here I have put all the content to be displayed on my webpage into a container to give a nice centralised effect on the desktop screen. There are a header section and different sections for different content. It helps to make your code look cleaner and more readable. I have also added a blockquote to highlight my favourite quote by Kakashi Hatake.
This section contains all the wallpapers and the download buttons. Notice that there are two rows and every image and its associated button is wrapped together in one div container with the class ‘wallpaper-item’. This will help in aligning our items as the way we want them to be.
Notice the hyperlink tags, if you were wondering how the download button will work, let me tell you, it is fairly simple. Just add the ‘download’ attribute when you are declaring your link, and voila! You turned a normal button into a button that will help the users to download beautiful wallpapers for their mobile devices.
This marks the end of our HTML, if you open your website now, it will be a cluttered collection of images and text. Let us now style the page using CSS and make it look good on all devices.
These are the general styles that you can not only use for this page, but for any other page you want to build. One important property that will save a lot of your time is ‘border-box’ it enables you to actually get the width and the height you specify without thinking about the addition and deletion of space caused due to padding and margin properties. It is really a life saviour when you are working on a big project.
On my desktop, I have set the container to have a width of 1000px and have a nice margin of 100px and some other border styling properties. Keep in mind, we will be changing the container style when we would be writing our mobile stylesheet.
Notice that I have made the size of my image exactly the same as the size of the container. This is where I meant it to cover the entire width of my container.
Let’s go on every property one by one. Here is where your website’s responsiveness actually starts to build. CSS Flexbox is a basic property which lets you create responsive websites in no time! The entire wallpapers container has been given ‘display:flex’. This is how you can incorporate the usage of flexboxes on your website.
Everything inside the section with the class wallpaper is now wrapped inside a flexbox. ‘justify-content: centre’ aligns everything inside the flexbox horizontally and centrally while ‘align-items: centre’ aligns everything inside the flexbox vertically and centrally. ‘flex-direction: column’ will ensure that my items inside the wallpaper class are stacked on top of one other. Which means, the div containers with class ‘row’ will be one on the top of other, giving us two rows on our webpage.
Then, the div container with the class row is also declared as a flexbox, but now the flex-direction has been specified as row, this means that the three wallpapers inside the row will be stacked one besides the other. The images inside the rows have been given padding of 5px and have been given a width which is almost 1/3rd of the container’s width so that every image covers almost equal space.
There is yet another flexbox used on the webpage, which is the div container with the class ‘wallpaper-item’. Here, the flex-direction property is a column which means the wallpaper image and the download button will be stacked one on the top of other.
The button and the hyperlink have been given some styling in accordance with the theme of the webpage. This marks the end of our styling of the desktop-style CSS. Now we will begin styling the mobile-style CSS and we will be only specifying those properties which we want to override in our original stylesheet (desktop-style).
According to the design we saw in the beginning, we want our content to have no margins and cover the entire mobile screen. Hence, the width of the container has been changed to 100%.
We also witnessed that the image covers 100% of the screen as well, and hence the image with the class hero-image has been given a width of 100%. This will enable it to cover the entire screen.
Here, we have made one small change that changes the entire perspective of our webpage. In the row class flex-direction has been changed to column instead of row. This means, now all of the three wallpaper images in a row will be displayed one on the top of another giving an effect that there exists only one image in each row.
We have now completed creating a responsive image using purely CSS!
Apart from CSS Flexbox, CSS Grids are also used to add responsive functionality. If you understood everything in the blog properly, your task now is to explore CSS Grids and create a webpage which is not only suitable for desktops and mobiles but also for tablets. After you are done, post the final output on your social media handles and tag Coding Ninjas.
Happy learning!
By Pooja Gera
