Responsive web design frameworks

Anil Kumar
Oct 7, 2020 · 9 min read
Image for post
Image for post

Why should I switch my website to RWD?

Your website looks great of the desktop screen but it may not be true when your site is viewed on a smartphone or a tablet. Once you make the design responsive, the website will look good (and readable) on all screens.

With Responsive Design you can create one design and it will automatically adapt itself based on the screen size of the mobile device. This approach offers plenty of advantages:

  • It saves time and money as you don’t have to maintain separate websites for desktops and mobile phones.

What should I know to get started with Responsive Design?

Responsive Design is pure HTML and CSS. You create rules in CSS that change style based on the screen size of the user’s device.

How do I check if particular website is using Responsive Design?

That’s easy. Open that website in any desktop browser and resize the browser. If the site’s layout changes as you resize, the design is responsive.

What is The Viewport?

The viewport is the user’s Visible area of the browser, where the user can read, write, update the data of the web page.

Unlike in good old days where desktop view was the only way to go, users have now started surfing the internet by using phone or tablet and hence, we started developing websites according to different viewports which are called responsive design.

At first, the best solution seemed to be creating multiple stylesheets for different screen sizes. Now, a single stylesheet can service a site on multiple devices, with responsive design. Less code to look after.

Responsive design removes the need for serving up a separate stylesheet for each device, but it still uses the standard practice of detecting the user’s device first.

Setting The Viewport

HTML5 introduced a method to let web designers take control over the viewport, through the <meta> tag.

Going ahead for any web development, you should include the following <meta> viewport element in all your web pages:

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

How does responsive web design work?

Responsive sites use fluid grids. Rather than pixels, all page elements are sized by proportion. So if you have three columns, you would define how wide they should be in relation to the other columns, rather than how wide each should be. Media, as in, images are resized relatively too, this way an image can stay within its column or relative design element.

Building a Responsive Grid-View
First, make sure that each one HTML elements have the box-sizing assets set to border-box. This makes sure that the padding and border are included inside the overall width and peak of the elements.

Add the following code for your CSS:

* {box-sizing: border-box;}

Typical Device Breakpoints

There are many monitors and gadgets with one-of-a-kind heights and widths, so it is tough to create an specific breakpoint for each device. To maintain matters simple you can target 5 groups:

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {…}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {…}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {…}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {…}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {…}

Flexible Media

The final, equally important issue to responsive web layout involves flexible media. As viewports begin to change length media doesn’t constantly follow suit. Images, videos, and other media types want to be scalable, converting their length as the dimensions of the viewport changes.

One quick manner to make media scalable is by the usage of the max-width belongings with a value of 100%. Doing so guarantees that as the viewport gets smaller any media will scale down according to its container’s width.

img, video, canvas {max-width: 100%;}

If the max-width property is set to 100%, the image will scale down if it has to, but never scale up to be larger than its original size which cannot be achieved using CSS width : 100%, the image will be responsive and scale up and down.

Responsive Text Size

The text size can be set with a “vw” unit, which means the “viewport width”.

That way the text size will follow the size of the browser window:

Responsive Web Design — Frameworks

There are many existing CSS Frameworks that offer Responsive Design.

They are free and easy to use.

  1. Bootstrap => It uses HTML, CSS, and Javascript.

Bootstrap 4: Getting started

What is Bootstrap?

Bootstrap is a free, open-source front-end framework. It is used for designing and developing responsive websites and web applications. It is the most popular framework of its type and the second most starred project on GitHub.

As more and more people predominantly access the web on their phone it is easily argued that developing mobile-first is what we should be doing. Bootstrap have taken a mobile-first approach. Mobile-first styles are part of the core framework.

The latest release is Bootstrap 4. It is more responsive than previous versions, has a bunch of new components and a faster stylesheet. Other significant changes from previous versions include a move from Less to Sass; dropping support for Internet Explorer 9 (and older); and adding flexbox support (alongside dropping non-flexbox support).

Importantly Bootstrap is compatible with all modern browsers. These include Chrome, Safari, Firefox, Edge, Internet Explorer 10 and Opera. It even handles those annoying inconsistencies across browsers using Reboot.

Starter Template

The hardest part of trying anything new is just taking the first step. So if you’re looking to get up-and-running with the latest Bootstrap v4.0.0, here is the quick-n-dirty need to know…

Option 1: Codeply Playground

The fastest option is to use Codeply since Bootstrap 4 is built into the editor. Bootstrap 4 templates, components and example snippets are included so it’s easy to drop in whatever you need. This is the best option if you’re looking to play with Bootstrap, understand the basics, and mock-up designs.

Option 2: Bootstrap CDN

It is possible to download the Bootstrap source files but, to get started quickly, I would recommend using the template below. It uses BootstrapCDN provided by StackPath. Using the CDN is also beneficial to your users as using it leads to faster load times. The template contains all stylesheets and scripts you need to build your Bootstrap powered sites and apps.

<!doctype html>
<html lang="en">
<head>

<!-- THESE ARE THE META TAGS YOU MUST INCLUDE -->

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- NEXT IS THE BOOTSTRAP CDN --><link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> <title>My Bootstrap Project!</title>
</head>
<body>

<!-- YOUR CONTENT GOES HERE -->
<!-- NEXT IS THE JAVASCRIPT: JQUERY FIRST, POPPER.JS SECOND, BOOTSTRAP JS THIRD --> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script> </body>
</html>

CSS

The CDN included in the Bootstrap starter template shown above pulls through all the Bootstrap styles into your project. The CDN used is the most up to date one at the time of writing.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

JS

There’s a bunch of components in Bootstrap that use JavaScript to function so you need to include the relevant scripts in your project. They should be placed just before the closing </body> tag.

The order of the scripts is important and must be in the order shown in the template. jQuery first, Popper.js second and then Bootstrap third, as can be seen above in starter template.

Bootstrap Grid FAQ’s

Q: Can I put content and HTML elements directly in the Container? Do I have to use the Rows & Columns?

A: Yes, the .container is used to control the width of the page layout, and components such as the Navbar. You don’t have to use .row > .col-* inside the .container, but when you do the .row should be inside a .container.

Q: Can I put content and HTML elements directly in a Row? Do I have to use Columns inside the Row?

A: No, the .row is only used to contain .col-* , and content should never be placed directly in the .row. Only columns should be the immediate children of the row. This is because the .row has a negative margins to counteract the padding on the columns.

Q: Why are there “12” columns? Why not 5, 10, or 16 or something else?

A: Because 12 evenly divides into 6 (halves), 4 (quarters) and 3 (thirds). This makes adapting to a variety of layouts much easier.

Q: Can I use more than 12 column units in a .row? Can I use less than 12 column units?

A: Yes. 12 is the most you’ll see span across the width. Once you have more than 12 the columns will “wrap” to the new line (horizontally) across the screen.

Semantic UI: Getting started

Semantic ui all the way!

If you plan on customizing one of these libraries then don’t go with material UI. It’s very opinionated and not meant to be that overwritten with the exception of colors. Semantic ui however is meant to be fully customized. Look at their theming.

Semantic UI is a modern front-end development framework, powered by LESS and jQuery.

First off, it has a robust grid system. Semantic’s system uses a 16-column base (although this can be changed) instead of Bootstrap’s 12.

Instead of using abbreviations, as other frameworks do, it utilizes real words in a manner closer to plain English.

The framework uses em and rem units for its elements, making it fully responsive and adaptive to any size. You need only to change the base font and all other elements will adjust accordingly.

Before we get started, let’s consider how Semantic UI works. All component definitions begin with a class of ui followed by the name of the component. For example, to add a Button element you just give it a class of ui button. To add states and/or variations just insert the needed classes. For example, to create a button that changes its color to blue on hover, add the hover state class and blue variation class: ui hover blue button.W3CSS

W3CSS

W3CSS is presently one of the most famous and widely used CSS framework for constructing responsive websites. W3CSS is based totally on simple CSS which makes it extraordinarily fast. It doesn’t use JavaScript or JQuery which saves it from additional overhead which slows a website. W3CSS is well matched with all of the browsers which include chrome, firefox, safari, opera etc. It is also like minded with most of the devices presently in use ranging from small screen cell phones to large-sized desktops.

How to apply W3CSS

W3CSS is open source and is genuinely free to use. To use W3CSS in your programs, genuinely add the subsequent stylesheet report in your programs “href=”http://www.W3schools.Com/lib/w3.Css””. This is basically CDN for W3CSS. Now let’s test our first simple instance to peer how W3CSS can without a doubt be used to your website.

<!DOCTYPE html><html><title>W3.CSS</title><meta name=”viewport” content=”width=device-width, initial-scale=1"><link rel=”stylesheet” href=”https://www.w3schools.com/w3css/4/w3.css"><body><div class=”w3-container w3-teal”><h1>My Title</h1></div><img src=”/your image path” alt=”Abc” style=”width:100%”><div class=”w3-container”><p>A car is a wheeled, self-powered motor vehicle used for transportation.</p></div><div class=”w3-container w3-teal”><p>My footer information</p></div></body></html>

Bootcamp

From idea to product, one pixel at a time.

Anil Kumar

Written by

Experience with Front-end Technologies and MERN / MEAN Stack. Working on all Major UI Frameworks like React, Angular.

Bootcamp

Bootcamp

The best resources for designers starting in Design, UX, and UI. Bootcamp is a new product publication from the team behind the UX Collective (http://uxdesign.cc). To submit your story: hello@uxdesign.cc

Anil Kumar

Written by

Experience with Front-end Technologies and MERN / MEAN Stack. Working on all Major UI Frameworks like React, Angular.

Bootcamp

Bootcamp

The best resources for designers starting in Design, UX, and UI. Bootcamp is a new product publication from the team behind the UX Collective (http://uxdesign.cc). To submit your story: hello@uxdesign.cc

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

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