Adding Responsive Site Design

While it’s easier (and better practice) to design and style your app for various screen sizes from the beginning, it IS possible to add responsive design to your projects after you’ve begun. Want to retroactively add responsiveness to an existing app? Here are 6 tips to get you started.

Learn how to scale your websites for various screen sizes

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 projects that I was proud of, but weren’t responsive. After I deployed the first project (actually my portfolio) and proudly sent the link to all my friends, I realized the glaring error in my ways. My site that looked perfect on a desktop was UTTERLY unreadable on mobile.

This blog post is meant to serve anyone who’s at the same daunting fork in the road. I know that the thought of re-opening that CSS file knowing your about to perform major surgery on it fills you with dread but I also know you don’t want your hard work misrepresented just because it was opened on the wrong screen size.

Without further-a-do, here are 6 things that helped me to focus my energy on, and that I hope will help you too. If you go step by step, you’ll have a website that looks great anywhere before you know it.

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

Last but not least, I want to talk about 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, feel free to email me at lydia.gregory.dev@gmail.com.