Responsive Websites

Photo by Pankaj Patel on Unsplash

I made the decision that I want to focus more on Front-End development. So I want to start working on my HTML/CSS, Javascript and React, and I just started learning PHP. So for this post, I’m going to talk about how to make a responsive site. What I mean by that is a site that looks appropriate on a desktop, tablet, or phone. I’m not going to really dive into basic HTML setup but will go over the CSS to make your site responsive.

The best way to start is to decide how you want your website laid out. One of the ways to do this is to create a wireframe. You can be as detailed as you want or you can just create a basic outline. Wireframes are something I’m still trying to get good at so I just created a basic one.

Wireframe of Phone layout

As you can see I sectioned off five parts of the website. I started with the phone since it's the smallest. Then I will do the tablet and then the desktop.

Tablet View

For the tablet view, you will notice that you can make out more of the text. As I said earlier I’m still working on my wireframes, so these probably aren’t exactly accurate.

There is one thing I wanted to point out that's a little different on the desktop. You will notice two white spaces on either side of the content and sidebar sections. Those are there to help center the main parts of the site. With monitors getting so large, imagine if you had to scroll the whole width of a screen to read something. This makes the user experience just a little better.

Now that we have our wireframes worked out we can start working on our HTML/CSS to make it look like this. I will create all the sections for the different parts of the layout.

<!-- Main Content -->
<main>
<!-- Header -->
     <header class ="header">
        Header
     </header>
<!-- Hero -->
   <section class="hero">
      
       Hero
   </section>
<!-- Content -->
   <section class="content">
      
      Content
   </section>
<!-- Sidebar -->
   <aside class ="sidebar">
     Sidebar
   </aside>
<!-- Footer -->
    <footer class ="footer">
       Footer
    </footer>
</main>

I labeled each section to make it easier to reference as well as adding in a little text to label it on the screen. Next, I will add in some CSS to match the colors as well as add some borders.

main, header, section, aside, footer {     margin: 0;     padding: 20px;     border: 1px solid #000000;     color: #ffffff; }  
main {     
   
   background: #000000; 
}  
.header {     
   
   background: #d22b1f;
}  
.hero {     
    background: #03a9f4
}  
.content {     
    background: #673ab7;
}  
.sidebar {     
   border: 1px solid #000000;     
   background: #129a22;
}
.footer {     
   
    border: 1px solid #000000;     
    background: #616161; 
}

Then to fix the content and sidebar to never expand past a certain size I will enclose it in a wrapper. then set the CSS to keep it to a certain width.

HTML
<div class= "flex-container wrapper">
<!-- Content -->
<section class="content">
   <p id = "info">
       ...
   </p>
</section>
<!-- Sidebar -->
<aside class ="sidebar">
Sidebar
   <p id = "info">
     ...
   </p>
  </aside>
</div>

Then the CSS.

.wrapper {
    margin: auto;
    max-width: 75rem;
}

CONCLUSION

That is one way to create a website, that is responsive. Hopefully you find this a little helpful.