Building a screen responsive webpage

Now more than ever, websites are getting viewed more often on a smaller screen. "... In 2019, 52.2 percent of traffic came from mobile phones." (via. Internet Usage Statistics). And that percentage is not even including tablets. The trend has smaller screen webpage views going up and typical computer screen views going down. That means if you are developing a website (for anything other than small projects), you should keep this trend in mind. A good developer builds your users' foundation on an HTML landscape that can adapt to different screen sizes.

How do you use HTML and CSS to automatically resize, shrink, or enlarge a website and make it look good on all devices? Well, that is a loaded question. Some developers are great at customizing CSS that can fluidly resize on different screens. Others utilize front end libraries that can produce great looking and adaptable website with just a few utility classes. The choice is up to you and your team. I can show you a couple of options that may make your choice a little easier.

The basics to making HTML more responsive to screen size:

Let's being by taking a look at a webpage built with vanilla HTML, zoomed to mimic a Moto G4 cellphone screen.

The text looks pretty good. But the horse photo is not the size I wanted due to a lack of scaling the dimensions of the image. The screen is smaller, but the picture is still displayed as if on a computer monitor. To fix this, we can add the following tag inside our HTML head.

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

Here we are, with the photo filling up the entire screen. Not quite responsive all together but much closer to what I was expecting.

If you would like to make your HTML images and components respond even better to screen size changes, you can begin by following the guide on [W3schools - responsive HTML (https://www.w3schools.com/html/html_responsive.asp). Now I would like to show you three front-end frameworks that can do some of that work for you and give you many more options for style and functionality.

1. Bootstrap

The first framework that I will introduce is the most popular. With Bootstrap, designing for smaller screen sizes is no longer a separate project in itself. If you include the relevant Bootstrap classes, the design will automatically adjust for different screen sizes.

The code below courtesy of bootStrap docs

    <div class="jumbotron">
      <h1 class="display-3">Jumbotron heading</h1>
      <p><a class="btn btn-lg btn-success" href="#" role="button">Sign up today</a></p>
    </div>

Let's Consider the impressive documentation library and the large scale community online. FullStack developers who want a straightforward framework with a large community have a lot to like about BootStrap.

Pros:

Easy to pick up and use: apply the right CSS utility classes to your standard HTML components, and you can have a sharp-looking and responsive web page. A beginner can install the script and begin building their front end with little research.

A large community: By large, I mean massive. Bootstrap is the most popular front-end framework out there, and because of that, you will almost certainly find the solution to most code-related problems. Just google an error or a design you would like to build, and you will likely find the answer.

Cons:

A little too popular: The biggest con I continuously read about from experienced front end developers is how boring a Bootstrap layout can become. (I am not yet tired of the look) because Bootstrap offers so many pre-built components, out of the box, the internet has become populated with website styles that look very similar to one another. BootStrap can become dull for a more experienced designer wanting to create a fresh look.

2. Tailwind CSS

Another less popular utility class-based framework would be TailWind CSS. Tailwind has a set of small CSS class names that you can use to change your element's style. Let's check out what a Tailwind website can look like on the small screen.

//Tailwind example

code below courtesy of fifthre.com

  <div class="section__side relative z-30 bg-fifth-dark-green">
    <span class="side-text">
      <span class="font-tuesday normal-case">The</span> sweet spot <span class="line h-10 bg-fifth-yellow inline-block"
        style="width: 1px;"></span>
      <a href="https://www.instagram.com/fifthnre/" target="_blank"><i class="fab fa-instagram text-xl mb-2"
          aria-hidden="true"></i></a>
      <a href="https://www.facebook.com/FIFTHNRE/" target="_blank">
        <i class="fab fa-facebook-square text-xl mb-2" aria-hidden="true"></i>
      </a>
      <a href="https://www.tripadvisor.nl/Restaurant_Review-g188582-d17733481-Reviews-Fifth_NRE-Eindhoven_North_Brabant_Province.html"
        target="_blank">
        <i class="fab fa-tripadvisor text-xl" aria-hidden="true"></i>
      </a>
    </span>
  </div>

Pros:

Also easy to use: Tailwind makes use of utility-first classes that are reusable and customizable. I continue to read about developers who are unsure about the framework at first, but they can't put it down when they use it. For example, the fluid, container, or text-color classes that you can pop right into your div class to give it the utility and style you want.

A unique look compared to Bootstrap: I feel that a tailwind website has sharper edges and a more minimal, cleaner look than bootStrap. (But that is just opinion) The boxes seem to pop out and make you focus on the content of the containers. Great if you've already designed a dozen sites in bootStrap and want something new.

small community?: Yeap, this can be a pro for some designers. There is a sense of accomplishment in designing a beautiful and responsive website in a less popular framework. It can be a joyful challenge to know that you will have to read the docs and experiment independently.

Cons:

Code can become crowded: Utility-first CSS is excellent for functional and clean looking websites, but the implementation can get a little rough as you build more complicated code. Even in the above code snippet, you can see the elements and classes are getting crowded, unlike other designs where you may have more utility or style separated in a CSS file.

Smaller Community: This con would be for those developers that are not looking for the accomplishment of building a beautiful website with a framework that has less support and pre-build components. Some full-stack builders would prefer easy examples and resources for their front end so they can concentrate on other parts of their site.

3. Bulma

Bulma is a relatively new framework, but its popularity has snowballed in a short amount of time. Its attractiveness lies in a strict, CSS-only approach (there are no JavaScript components) and elegant default classes, making many developers tired of BootStrap sigh in relief.

The code below is courtesy of Free Bulma Templates

  <section class="hero">
    <figure class="image">
      <img
        src="https://images.pexels.com/photos/167636/pexels-photo-167636.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940">
    </figure>
  </section>

  <section class="section">
    <div class="container has-text-centered">
      <h2 class="title">The Band</h2>
      <p>We have created a fictional band website... </p>
    </div>
  </section>

Pros:

popular: Not quite as popular as Bootstrap, but the Bulma community is dedicated, and the support online is more significant than many other frameworks. Bulma is an excellent option if you are looking for that different style but with a lot of community help.

easy learning curve Bulma has easy to understand class names and is built to be more modular and solve practical, everyday problems. You may find that Bulma is straightforward to learn even with just a little background in CSS.

Cons:

Some Compatibility issues: The CSS of this framework runs very slow on IE web browser. IE compatibility may not be much of a problem because many frameworks, i.e., Bootstrap 5, are dropping support for IE altogether.

Still in development stage: Meaning there are still many updates to come, and the actual documentation still has a lot of growing to do.

Conclusion

If you want to continue learning about these or other front-end frameworks, I linked some excellent resources below. Ankush Thakur wrote a great article about the '10 Best CSS Frameworks for Front-End Developers'. But whichever path you and your team choose to develop a visually stunning and responsive website, I know you will have success.

What is your favorite front end framework?

And as always:
Stay focused || Love your code

Blog

Building a screen responsive webpage

JerryMcDonald

Resources:

Join Our Newsletter. No Spam, Only the good stuff.

Related