Making a Site Responsive

While it’s easier to design and style for various screen sizes from the beginning, sometimes we realize the need to add flexibility to our projects after we've begun. If you are retroactively adding responsiveness to an existing app, you've come to the right place.

Some background:

Learning to code in a Bootcamp program has lots of advantages. A project-focused program was great for me to solidify what I was learning. I built databases, CRUD backends, Jamstack applications, and modern web frameworks in four-day-long project sprints, and presented these projects to my classmates at the end of the week.

As a former graphic designer, I always made time to plan out and implement basic wireframes, colors, and typography in my projects. But I never got the time to learn or implement responsive design in any of my projects during the Bootcamp, which meant that after graduating I was left with four projects that I was proud of, but had no responsiveness.

Since I still hoped to deploy some of them, learning responsive web design and adding it to already existing projects was something that I wanted to do after graduating. After all, the majority of sites get more traffic from mobile devices than they do from a desktop.

When Adding Responsiveness...

1. Find What Breaks

Take some time fiddling with the size of your browser window and make a list of components that need the most work. You can also use your chrome developer tools to snap the browser to key breakpoints including tablet and mobile. Note that absolutely positioned items are very hard to work with and should be used sparingly.

2. Use a Sass or SCSS file instead of CSS

Using variables and mixins will make your stylesheet much more organized and readable. Variables also let you easily make one edit that will update your entire stylesheet.

3. Convert CSS Units from absolute to relative

Replace any absolute length units (px, pt, pc, in) to relative length units (em, vh, vw, %). This will automatically make your application much more flexible.

4. Use Media Queries

Start fixing the most glaring scaling issues first, and work your way down to the details. Set your breakpoints with Sass variables and then use a media query such as @media (max-width: 600px) or @media (max-width: $phone).

5. Flexed items

Items that are flexed in the desktop version rarely have the horizontal space on mobile. One media query that I found myself writing often was:

.text-container
     display: flex
     @media (max-width: 600px)
          flex-direction: column

// also written like:
.text-container
     @media (min-width: 600px)
          display: flex

6. Images

Images can be finicky when scaling down the screen size. By putting your image inside a div, you can fit the image to the div, which is easier to manipulate. Here are two ways to fit the image:

.image-container
     .image
          object-fit: contain
//or
.image-container
     .image
          max-width: 100%

Thanks for reading!

If you have any comments or suggestions, please feel free to email me at lydia.gregory.dev@gmail.com.