Responsive Web Development Tips That Everyone Should Know
In this article, I am going to talk about tips that can help you create a Responsive Website with ease.
Coding a Responsive Website can be a relatively complex process. Luckily for us, there are many tools and techniques that can help us improve the process and write clean, fast and reliable layouts that scale. Let’s look into some of them.
Watch the video or continue reading the article.
Planning
Trying to figure out how things will fit on different screens as you code can be time-consuming. Ideally, before you start developing the layout you should have a high-fidelity prototype that includes the Mobile, Tablet and Desktop views.
A high-fidelity prototype is a realistic representation of the website that you want to build. It’s an interactive, clickable version of the design.
You would also want to have different states for Inputs, Buttons, Images, Errors and so on. Additionally, it would be nice to have the designs of pages such as 404, No Results, FAQ Page, Policies and so on. That’s the ideal scenario.
Base Styles First
There are no set rules for how you code your website. I personally always start from Mobile working my way up to Tablets, Desktops and so on. When I say Mobile, don’t be confused by wrapping everything into a Mobile Query. I start with the base styles first and work my way up. This way I am setting the foundation of the elements that I need and then I can use media queries to progressively enhance them as required.
Base Styles look like this. Essentially the “Card” style applies on all screens and then I am using a Media Query to enhance the card by changing the font size.
// Base Styles
.card {
border: 2px solid #000;
padding: 10px;
font-size: 2rem;
}
// Enhancements
@media (min-width:700px) {
.card {
font-size: 2.4rem;
}
}For those of you who don’t know what Media Queries are, they look like this (see code below) and help us write tailored Style Sheets (Responsive Web Design) for Desktops, Laptops, Tablets, and Mobile phones. In short, any screen size.
/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {...}
/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {...}
/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {...}
/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {...}
/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {...}
// Source: www.w3schools.comSpeaking of Media Queries I feel that the fewer you have the better. Essentially it’s less complicated. Three Media Queries should be good enough, but of course, if you need to add more then go for it.
Use Fluid Grids / Query-Less Grids
Fluid Grids are a way of creating layouts that change depending on the size of the screen without using Media Queries. They are most often used for Responsive Web Design, where the layout is optimized for any size screen.
One of the benefits of Fluid Grids is that there is no need to specify how many columns should be in a row or in total. The number of columns can be set at any time by adjusting a percentage value.
The main advantage of fluid grids over traditional Grid-based layouts is that they allow more flexibility and adapt well to different screen sizes.
To achieve fluid grids or Query-Less Grids you can use Flexbox and or CSS Grid.
// Flex No Wrap Example
.row {
display: flex;
flex-wrap: no-wrap;
grid-gap: 2rem;
}
.col {
flex-basis: 200px;
flex-shrink: 1;
flex-grow: 1;
}
// Flexbox Wrap Example
.row {
display: flex;
flex-wrap: wrap;
grid-gap: 2rem;
}
.col {
flex-basis: 200px;
flex-shrink: 1;
flex-grow: 1;
}
// CSS Grid Example
.row {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
grid-gap: 2rem;
}Avoid Fixed Widths and Heights
Fixed Widths and Heights are bad for Responsive Web Development because they make it difficult to create a layout that is flexible across different screen sizes. It could result in you writing more Media Queries to ensure that your layout is flexible. Avoid them whenever you can and instead use properties such as max-width and max-height instead.
Build Reusable Blocks
Think of everything as its own little component. If you develop a Search Bar make sure that the Search Bar can fit in reasonable sections of your layout with a simple copy and paste. This way you can save time by not having to create new elements or modify elements for every layout variation.
Responsive Typography
Responsive typography is a technique that allows the text to be readable on any device. The use of Relative Units in Web Development is a great way to make sure that the layout is responsive and adapts to different screen sizes. And so it is important for us to understand how to use units such as EM, REM, Clamp and Percentages in order to create Responsive Typography.
As you might know, typography is probably the most important part of any website because it can make or break its design, usability and accessibility.
Typography should use EM, REM, or Percentage units for font sizes instead of pixels so that it can scale with the size of the screen.
You can also use modern CSS such as the Clamp property and of course, Media Queries to make sure that your typography adapts well on different screens.
Always use relative units such as EM, REM and Percentage:
@media screen and (max-width: 768px) {
p {
font-size: 1.8rem;
}
}Responsive Images
Make your images Responsive as default. To do that you can use the following snippet using a max-width of 100%. This allows the image to scale with the parent width.
img {
max-width:100%;
height:auto;
}Even when we want our images to be responsive, you should always try to add the width and the height property to avoid rendering issues (jumps).
<img src="..." alt="..." width="500" height="200">
Additionally, you can use the Picture HTML5 element to define different images for different window sizes. This is not only great for performance, but also it gives you the opportunity to adjust your content so it’s as useful and legible on all screens.
<picture> <source media="(max-width: 633px)" srcset="img/cat320w.png"> <source media="(max-width: 833px)" srcset="img/cat480w.png"> <source media="(max-width: 1033px)" srcset="img/cat640w.png"> <img src="img/cat.jpg" alt="A photo of a cute cat smiling."> </picture>
Scalable Vector Graphics
SVG (Scalable Vector Graphics) is an XML-based markup language that can be used to create two-dimensional graphics.
SVG images are also more compact than other formats like JPEG, GIF and PNG since they don’t use any compression algorithms. This means that SVG images take up less storage space on your website which means faster loading times and less data usage.
The advantages of using SVG in web design are scalability, flexibility, and lightweight.
You can use SVG for pretty much everything from Logos, Backgrounds, Icons and Illustrations. One great thing about SVG is that it can be animated.
Use CSS Pre-Processor
My favourite way of writing CSS is by using the SCSS pre-processor. The preprocessor is a program that processes the CSS code before it gets compiled. It’s used to write CSS in a more efficient way.
There are many benefits of using SCSS preprocessor over pure CSS. It helps in writing more efficient and cleaner code, it provides better support for variables, mixins and other features, it allows developers to create their own custom functions and last but not least – it’s faster.
Let me give you a very simple example of creating reusable Media Query Mixings:
// Standard Media Query For Desktop
@media (min-width: 1200px) {
/* Target devices wider than 1200px. */
}
// Creating Reusable Mixing
@mixin desktop {
@media (max-width: 1200px) { @content; }
}
// Using The Desktop Mixing
.card {
font-size: 2rem;
@include desktop {
font-size: 3rem;
}
}Use CSS Methodology such as BEM
BEM stands for Block Element Modifier. It is a CSS methodology that helps developers to create robust and maintainable websites. The methodology is based on the idea of separating a website’s code into Blocks and Elements. Blocks are the name of the section or modules, while elements are the individual parts of a block.
This methodology was developed by Yandex in 2009 for its internal use, but it was later released as an open-source tool for others to use too. It’s super popular among front-end developers and it makes it easier to maintain large web projects with many different stylesheets.
What’s Next – The Future is bright
- CSS Container Queries
- CSS Subgrid
- Object View Box
Struggling with Responsive Web Design?
Don’t worry there are plenty of tools that can help you get started. You could try Bootstrap or TailwindCSS to start with. There are also a ton of NoCode editors, but I won’t be mentioning them here as we are mainly focusing on custom development.
Good Articles To Read:
- The State Of Mobile First and Desktop First
- How to Make a Media Query-less responsive Card Component
- Say Hello To CSS Container Queries
More Resources:
Thank you for reading this article. Share it with friends, pets and family.
Thank you for reading this article. Please consider subscribing to my YouTube Channel. It’s FREE!
Author
Hi! I’m Raddy. I am a web developer, often making YouTube Videos, Blog Posts and side projects. Enquiries: [email protected]
