Making your website responsive is a must nowadays, nearly 53% of people all around the world use their phone to access the internet and that number is growing each day.
You want your website to be accessible to everyone no matter their device be it small or large screens. In this article, I'll be sharing what methods I use to make my websites responsive.
1. Mobile-first design
Mobile First means designing for mobile before designing for desktop. It will also make the page load faster on a smaller screen.
When you're starting a new project make sure to always design it for mobile screen first and to do that, I usually size my browser to 320px wide (the screen size of an iPhone 5/SE).
Personally, I found that expanding my design to fit bigger screens is much easier than trying to compress the design to fit smaller screens.
2. Set the viewport
The viewport is the area of the screen that the browser can render content to, to make a website responsive it has to be set properly, and to do that we use a meta tag.
<meta name="viewport" content="width=device-width, initial-scale=1">
width=device-width tells the browser to match the dip (device independent pixels can determine the size that elements will appear on the user's device, regardless of the user's screen resolution. ) and thus the page can reflow to allow content to resize to match the width of the browser
initial scale 1 set the dip to CSS pixel ratio to one, CSS pixels are the ones we work with most of the time and without initial scale set to one, the width of some browser would stay the same when you rotate your phone or tablet to landscape mode.
3. Use relative units
To avoid fixed images, use a relative unit like % instead of px.
img, embed, object, video {
max-width: 100%;
}
// I always put this in my CSS file just to be safe
4. Tap targets should be wide enough
Tap targets (buttons, input field, anything the user will touch, tap, click) must be at least 40px wide and tall. The recommended height and width are 48px.
This isn't much of a problem for large screens since a mouse can be pretty accurate but on mobile, it can be a big problem when the tap target is too small to be able to accurately tap on the button/input field. The same problem may occur with navigation links so make sure to also adjust them accordingly.
button, input {
min-width: 48px;
min-height: 48px;
}
// Again, I always put this in my CSS file just to be safe
6. Use flexbox
Flexbox makes designing for all types of screens easier. Its a layout model that allows responsive elements within a container to be automatically arranged depending on the screen size.
Trust me using flexbox will make your life easier.
5. Use media queries
Media queries are used to rearrange your design to fit different screens. The most commonly used are max-width and min-width.
max-width viewport width is less than the value specified whereas min-width viewport width is greater than the value specified.
When I'm done working on the 320px screen, I use media queries to apply styles depending on the screen breakpoint.
@media screen and (max-width: 500px) {
changes will apply when the viewport width
is less than 500px;
}
@media screen and (min-width: 500px){
changes will apply when the viewport width
is greater than 500px;
}
// If you started mobile-first, I recommend using min-width
6. Determine breakpoints
By breakpoints I mean the width you'll be using with media queries to change the layout accordingly. There are two types of breakpoints:
- Major breakpoints were layout changes significantly
- Minor breakpoints to make small changes like setting the margin, padding, or font size
When setting breakpoints use the content, after coding with a mobile-first approach adjust the browser and see where your content needs a breakpoint. This is a much better approach than following devices sizes that are given by default by the dev tools since they change and vary widely from brand to brand.
That's it, I hope this article will help and if you have any advice make sure to leave it in the comments.
Top comments (3)
I have some questions. How do you deal with font-sizing on mobile first responsive designs? I mean, I know the way I do it but I'm looking for insight into how other developers deal with this.
For example,
What units do you use? Do you use SASS/SCSS variables to hold font information? How do you deal with different font families etc
If you could I'd love to see an example. Thanks, and great article!
My default unit is rem, except for images and videos where I use %, everything else its rem.
As I'm still not familiar with using multiple font families in one project, I tend to stick to using one font-family.
For mobile, the font-size will obviously be small usually I give them a size of 0.8-1rem and as the screen widens and layout shifts I increase the font-size accordingly.
You can check this repo github.com/chrissiemhrk/sass-boile..., I use it as a template for all my small project and it has the different default styling that I normally use.
Nice