Serge Limontov - Introduction to responsive website design header
Stylised diagram - My idea was to show a variety of web page elements in one image.

Note

Before we begin, you might want to check out my previous article about the history of web and website design to learn some background information. Otherwise, let us continue with the responsive website design discussion.

Programming languages

I have chosen to list 5 of the main languages that many web designers and web developers use to create websites and web applications. This information should assist you to better understand what is used and how things work.

If you ever want to become a website designer, you do not need to learn all the programming languages that exist. The most basic responsive websites can be created using only HTML and CSS. You can just start with the basics and build from there.

Hypertext Markup Language (HTML) – This is used as a backbone to create the general structure of websites and web applications. The file extension is “html” – e.g. “mypage.html”.

Cascading Style Sheets (CSS) – This is used to style a website, add responsive capabilities and basic animations. The file extension is “css” – e.g. “mystyles.css”.

JavaScript (JS) – This is used to add interactivity and perform more complex operations. The file extension is “js” – e.g. “myscripts.js”.

PHP: Hypertext Preprocessor (PHP) – This is used to add dynamic content, connect to databases and perform various advanced operations. The file extension is “php” – e.g. “mycontent.php”.

My Structured Query Language (MySQL) – This is used to create databases with structured data using tables, rows and columns. The file extension is “sql” – e.g. “mydatabase.sql”.

Overview

The general idea behind responsive website design is to allow users access to a website using the same domain on any device. This is achieved by using HTML, CSS3 media queries and other CSS options. You could use JavaScript to achieve a similar results but I would suggest sticking with CSS.

JavaScript should not be excluded entirely because it will be required for more complicated calculations and additional functionality. You will require an up to date browser to take full advantage of viewing and creating modern responsive websites.

Basic example of HTML 5

The code below shows how a basic web page is structured using a variety of “tags”. Tags are created using angle brackets and a predefined keyword – e.g. “<div>”.

There are two main types of tags, the first type is self contained – e.g. “<hr/>” or “<br/>” and the second type is open/close – e.g. “<p>Paragraph text here.</p>”. Some tags can be used to structure layouts and contain other tags – e.g. “<div><p>I’m a paragraph in a division.</p></div>”. Some tags can have special properties like “href”, “alt”, “id”, “class” and several others.

Note: An “id” must be unique and only used once per page, it is used for targeting an individual item. A “class” can be used as many times as needed, it is used to style or target multiple items. This will be very important when dealing with advanced CSS and working with JavaScript.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Page Title</title>
</head>
<body>
<div id="page-container">
<h1 id="myid">This is a Heading</h1>
<p class="myclass">This is a paragraph.</p>
<p class="myclass">This paragraph has <strong>bold</strong> and <em>italic</em> text.</p>
<a href="https://www.sergelimontov.com">This is a link</a>
</div>
</body>
</html>

Additional HTML info: https://www.w3schools.com/html/

Basic examples of CSS

The primary HTML tags can be targeted by adding the tag name without angle brackets for example “body”, “a”, “p” or “div”. A tag “id” property can be targeted by adding a “#” symbol. A tag “class” property can be targeted by adding a “.” symbol. Take a look at the examples below.

body {
  background-color: white;
}
#page-container {
  width: 50%;
}
#myid {
  color: #FF0000;
}
.myclass { 
  color: #333333;
  font-size: 16px;
}
a {
  color: blue;
}

Additional CSS info: https://www.w3schools.com/css/

Basic examples of CSS media queries

The code below can be used to change the look of HTML tags based on the device screen. This is what makes the responsive magic happen.

@media screen and (max-width: 800px) {
  body { 
    background-color: #CCCCCC;
  }
  #page-container { 
    width: 100%;
  }
}
@media screen and (min-width: 600px) {
  h1 { 
    font-size: 20px;
  }
}

General functionality

Most responsive websites are created to fit 100 percent of the screen width. This removes the ability to scroll the page container horizontally (left and right).

The height of the page container is usually set to “auto” which allows the user to only scroll vertically (up and down). Typically, the content stacks on top of each other with elements adjusting as needed.

There are some experimental layouts that break the mould, but in most cases, it is structured as I mentioned above.

Serge Limontov - Introduction to responsive website design diagram 1
I created this diagram to show how responsive content fits on different devices.

General structure

This is where it might get a bit confusing for some readers.

The page container can have multiple sections or sub-containers. These sub-containers can be used to group rows. Rows are containers that can contain columns or other types of content. Columns can contain various types of content, even rows with columns.

Take a look at the diagram I created to show the general structure of a web page. Also note that containers, rows and columns are usually created using the HTML “<div>” tag.

Serge Limontov - Introduction to responsive website design diagram 2
I created this diagram to demonstrate the general structure of responsive content.

Conclusion

I hope you found at least some of the information useful and that you now have a clearer understanding what responsive website design is all about. There are many more things I could add, but I will leave them for another time.

Links to additional CSS information:

HTML and CSS cheat sheet links: