Did this ever happen to you?
You visit a website on your phone and some of the information is cut off or displayed in a manner that no human would ever think was a good idea. Then you go have a look on your desktop or laptop computer at the same website and it looks fine. No cut off data or rearranged elements. This is a lack of responsive design.
Well what is responsive design?
An approach to web design where the site renders well on a variety of screen sizes and devices. You might have noticed if you visit this very web page on a desktop vs a mobile device it will look different but still look good and function well. That is responsive design at work. Responsive design is so prevalent in today's internet that most people only notice when it's not there.
A majority of web traffic is from mobile devices.
According to statista 58.99 percent of web traffic in q2 of 2022 is from mobile devices. While this a majority there is still 41.01 percent from tablets, laptops and desktops. The same user might use your website on both mobile and desktop. They expect the site to look and feel mostly the same both times. If it's not, they might get frustrated and leave the site. This really exemplifies the importance of responsive design.
How do I implement responsive design for my blog?
I use SVGs (scalable vector graphics) for my logo and icons. This means they look the same regardless of size. Any size attributes use relative units like %, em, vh or vw and not pixels. This way everything is relative to other elements or screen size and your page should look relatively the same on a mobile device or a large gaming monitor. The most important part is the framework I use that does a lot of the heavy lifting for me
bootstrap
This front-end framework is set up with mobile first responsive websites in mind. Originally released in 2011 by developers at Twitter. The framework was the blueprint for Twitter's front end since 2010 and still powers it to this day. Using a grid system with breakpoints that change the display based on screen size. Bootstrap is an incredibly powerful tool with way more functionality than I utilize in my little blog website. Anyone interested in front-end development or UI/UX design should consider using bootstrap.
The framework has the option to use compiled css or to customize the framework using your own sass pipeline. This is the approach I took so as to reduce the file size of my css because as I said before bootstrap has a lot more functionality than I plan to utilize.
In conclusion
Responsive design is imperative to have in any modern web application in my opinion. The variety of devices people use is only growing larger. Just look at the new folding smartphones. So the need for responsive design will only grow. Next time I'll talk about hosting in more detail and how I plan to actually get this project online.
Top comments (0)