Develop(her): Basic Responsive Design

I’ve been working on a portfolio forever, in that distant, out-there, “this-concept-may-or-may-not-work” kind of way. But today I had some clarity and excitement and decided to just make something that worked and that I could create and create well. And during this process, I ended up making something that is actually responsive. In very simple terms, this just means that when I pull up this portfolio website on my cellphone the design will look scaled and pretty and not like I need to look at it on a desktop at a later date.

Here’s a link to the codepen I’ve been working in. The part I was making responsive was the “landing page,” so the main image and the text (“Hi. I’m julie…”).

Anyways! I just want to really quickly type out what I did, so I do not forget.

IMAGES

This was the easiest bit, and it inspired me to learn how to do it with text.

<img style=”width: 100%;” src=”IMG_URL.JPG”>

For my purposes my image was basically my landing/header page, so I just wanted it to fill the entire area, no matter how big the browser was.

It really was that easy.

TEXT

Here’s where things get a bit more tedious; however, the execution is still quite simple.

You’re going to add a some directions to your CSS code which tells your design, “Hey, when the user’s browser gets to XYZ size, this part of the CSS is going to change.”

It looks like this.

@media only screen and (max-width: 950px)

{

      h3 {
             font-size: 2em;
             }

}

For my portfolio site I used this line of code 4 times, for 4 different max-width’s (950px, 770px, 690px, and 480px). If these amounts seem random, they basically are. I just played around with my design by resizing my browser to see when my text needed to be adjusted.

Since font-size is a fixed value and not something variable, I used ems for the font size. I don’t completely understand them yet… And I am realizing now that I could have changed the font size every time to a specific value and the design would still be as responsive as I had intended.

If you understand ems and want to let me know when I should use them or if I just not even bother, please let me know!

The only other thing I want to note is that 480px is usually the max-width for cellphones.

One thought on “Develop(her): Basic Responsive Design

  1. Pingback: Develop(her): My Portfolio Design - Boobs & Backpacks

Leave a Reply

Your email address will not be published. Required fields are marked *