Let's create a responsive photo gallery - mobile first

#html #css #tutorial #webdev

As web developers, we want our hard work to reach as many people as possible. This means adjusting our websites to different audiences with different devices, especially with the popularity of smartphones and tablets. This is where Responsive Web Design comes along: one page where the elements adjust according to screen size. I wrote an article here before which makes the case that a responsive design should start with mobile first because of convenience. In this article, I will show you an example of designing a photo gallery in this way.

Let's get to it! 🔥

Steps

1. Find photos

First of all, before we create our website, let's go to Unsplash and find some photos to add to our gallery. I've found 10 photos from Unsplash for our tutorial.

In my project directory, I've created a photos directory and added all my photos there.

2. Our HTML

Next, we create our web page. It's going to be a very basic HTML file with an <h1> heading and a <div> which contains our photos (<img>s):



<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My gallery</title>
</head>

<body>
    <h1>My gallery</h1>

    <div id="photos">
        <img src="photos/01.jpg" alt="A photo" />
        <img src="photos/02.jpg" alt="A photo" />
        <img src="photos/03.jpg" alt="A photo" />
        <img src="photos/04.jpg" alt="A photo" />
        <img src="photos/05.jpg" alt="A photo" />
        <img src="photos/06.jpg" alt="A photo" />
        <img src="photos/07.jpg" alt="A photo" />
        <img src="photos/08.jpg" alt="A photo" />
        <img src="photos/09.jpg" alt="A photo" />
        <img src="photos/10.jpg" alt="A photo" />
    </div>
</body>

</html>

☝️ Hang on, hang on! Before you grab your pitchforks, I know "A photo" is an awful alt text, especially for all 10 of our photos. But this is a tutorial, so you'll have to live with it for a bit.

Now if we open our page in a browser, it will look awful with large misplaced images.

So let's add our CSS next.

3. Style for mobile

Now that we have our HTML in place, we're going to grab our browser window by its side, and reduce its width to about 300px. Now we can design our gallery for mobile. This is what our CSS looks like:



*{
    margin: 0;
    padding: 0;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

#photos{
    margin-top: 30px;
}

#photos img{
    display: block;
    width: 100%;
    margin-top: 9px;
}

This is what our CSS does:

First, we reset our CSS using margin: 0 and padding: 0.
Set the font for the entire site
Give our photos a little margin.
Set each photo to fill up the width of our screen and give each photo some margin.

That's it.

Just like that, we have a mobile-friendly photo gallery.

Notice we haven't used flex or grid even once? That's because we're basically taking advantage of a browser's default flow, which is every element being placed under the other.

3. Adjust for larger screens

Now that the mobile version of our website is ready, we can slowly increase our browser window's width and see how we can adjust for larger screens.

Let's now update our CSS so that if the screen size is 500px and above, the photos appear in a 2-column grid:



@media (min-width: 500px){
    #photos{
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-gap: 6px;

        margin-top: 0;
    }
}

Now we're starting to add enhancements to our CSS like grid. All we need to do, is to add a new lines of code. It's a lot easier to enhance than to remove stuff. This is what makes mobile-first so great.

4. Adjust for even larger screens

Now that we've adjusted for larger screens, we can now increase our screen sizes a bit further to adjust to desktop displays.

This is even easier to make. All we need to do is change the grid columns from 2 to 3:



@media (min-width: 900px){
    #photos{
        grid-template-columns: repeat(3, 1fr);
        width: 900px;
        margin: auto;
    }

}

We've also set it so that our gallery grid doesn't go over 900px and it's stuck in the middle with margin: auto.

And just like that we have a nicely layed out gallery for desktop:

Conclusion

People use the web in different ways. On a phone, on a desktop, in landscape mode, in portrait mode. Whatever they choose to browse the web with, as a web developer you have to cater for this, or else you'll lose them. Responsive web design is the best and most popular way to make sure your site is suitable for every scenario. Mobile-first is the most efficient way to implement responsive design and the way that makes the most sense. This post has proven this.

Have you made your own responsive website? Did you start with mobile or desktop? Let me know!