The Startup
Published in

The Startup

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.

Small egg, big egg
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.

Get smarter at building your thing. Follow to join The Startup’s +8 million monthly readers & +756K followers.

Recommended from Medium

Google is redefining mobile with artificial intelligence

Three reasons why I stopped using design mockups to present my work.

The Process of Restructuring a School’s Information Architecture — a UX Case Study

Blender 3D: A brief introduction to the most popular open-source 3D software

Design for outcomes, not devices

Project 3 Type & Hierarchy

A Look Back At 2017 (I): Best Web UI Kits, Design Video Tutorials, and UI/UX Designers

Figma Guide for Auto Layout & Constraints

featured image with figma constraints visualization

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Lydia Gregory

Lydia Gregory

Full-Stack Software Engineer, Designer, and salsa dancer.

More from Medium

Top CSS Code vs Real Pic Challenge

Three design principles for your CSS layout

How I made a google clone in 2 hours

5 CSS Customization Tricks to Take your Squarespace Website to the Next Level