DEV Community

Chrissie
Chrissie

Posted on

How to build a responsive website

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">
Enter fullscreen mode Exit fullscreen mode
  • 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

Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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)

Collapse
 
emmanuelnk profile image
Emmanuel K

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!

Collapse
 
chrissiemhrk profile image
Chrissie

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.

Collapse
 
rwoodnz profile image
Richard Wood

Nice