Blogging for Beginners: Understanding Responsive Design

Geri Mileva on Marketing Design

Responsive design refers to an approach in website development wherein a website is made to adapt to a variety of devices and screen sizes.

Basically, your website layout changes according to the user’s screen size and resolution.

Why Is Responsive Design Important?

Responsive design is becoming a prerequisite now in web design. Around 52% of worldwide online traffic was generated through smartphones, with users spending an average of 5 hours online using their phones. And these numbers keep increasing every year. 

It’s quite clear, then, that if your website doesn’t deliver a great mobile experience, you are essentially missing out on millions of potential online visitors simply because they have no opportunity to access your website.

Experts even recommend that web design should start with small screens rather than desktop computers. Indeed, when a majority of customers are discovering products and purchasing them through online channels, then businesses have to push for responsive design.

Features of Responsive Design

Since mobile devices are more constrained in terms of display size, you need a different approach to achieve responsive design. Responsive design mainly works using HTML and CSS code to automatically resize, enlarge, and hide parts of a website so that it fits all screens.

Here are some key features that you can take note of so that your site can adapt to screen sizes today, as well as in the near future.

1. Viewport

This is the visible area of a webpage, which varies according to the device used by your audience.

Naturally, smartphones have smaller screens, so in your website design, try to use programs (e.g., CSS media queries) to scale down the entire page to fit screens that are smaller than a computer’s.

It’s important that you set the viewport so that users scroll vertically. You can avoid horizontal scrolling by using smaller width elements, or better yet, using relative width values for page elements (e.g., width: 100%).

This way, no element falls outside of the viewport and users can enjoy vertical scrolling on your website.

2. Grid-view

Grid-view is the technique where designers divide the page into several columns so that it’s easier to place elements on the page.

A responsive grid-view generally has 12 columns and has a width of 100%. Responsive design also means that the grid-view shrinks and expands when the user resizes the browser window.

3. Breakpoints

A breakpoint is the point where you make a change to how the content is presented in the page layout. Breakpoints are added so that certain portions of the web design will be laid out according to what screen size the user has. 

One useful tip here is “Mobile First”: start with the smallest viewport first (mobile phones) and expand to desktops or other devices.

Since mobile phones have different measurements, you can address this dilemma by targeting the most common heights and widths set for phones (e.g., 600px, 768px, 992px, and 1200px). 

4. Multimedia and Images

Images and multimedia are an integral part of any website. They draw attention and add more meaning to your site. But like every other element, they have to be responsive. 

Responsive images enable the website to control the image resolution according to the device. You can have them adjust automatically to the screen size by using CSS width property set to 100% and height to auto. 

Meanwhile, for videos, integrate them effectively by adding a “controls” attribute to the site. Then, put a “poster” image to let users have a peek at the video content.

Also remember to add multiple “<source>” elements that specify video formats, and it wouldn’t hurt to give users an option to download in case they want to watch the video offline.

How to Apply Responsive Design

Now that we have discussed its main features, let’s take a look at how the following 5 strategies can help your website transition into responsive design: 

1. Fluidity

Fluidity in a website means that the layout is adjustable according to the user’s screen resolution.

In a fluid layout, the majority of the webpage elements have percentage widths instead of fixed figures. It enables white space to be consistent across all browsers and screen sizes.

Responsive design uses fluid percentage layouts and adds CSS media queries to further specify the scale for different devices.  

For example, you can make a navigation menu fluid (horizontal for desktop and vertical for mobile screens) using the code below:

@media screen and (max-width: 600px) {
    .topnav a {
        float: none;
        width: 100%;

When executed well, a responsive, fluid layout maximizes the screen view and boosts user experience.

2. Media Queries

Responsive design is all about using CSS media queries to modify the features of your website. Media queries can be applied to a range of functions through the @media rule to include a block of CSS properties in your program.

The most common use of media queries is in setting the viewport height and width. For example, if you want to create a responsive column layout for different screens, you can use the code below: 

/* On screens that are 1200px wide or less, go from six columns to four columns */
@media screen and (max-width: 1200px) {
    .column {
        width: 50%;
    }
}

/* On screens that are 768px wide or less, make the columns stack on top of each other instead of next to each other */
@media screen and (max-width: 768px) {
    .column {
        width: 100%;
    }
}

Media queries can also be used to hide certain elements when the browser’s width is 600px or less, to make the page load faster.

@media screen and (max-width: 600px) {
  div.example {
    display: none;
  }
}

Media queries can be used for things like the width and height of the viewport, device resolution, and screen orientation.

3. Flexible Images

Responsive design for images can be categorized into two aspects: resolution switching and art direction. 

Resolution switching simply means multiple display resolutions with the same content. To make an image flexibly scale down, but never scale up larger than its original size, put max-width:100% in your code. 

img {
    max-width: 100%;
    height: auto;

Or, if you want to set a maximum size, put a pixel value in the max-width property. 

Meanwhile, art direction involves wanting to change the image according to the display size. For example, you can use a wide, landscape image ideal for larger screens and have more compact, portrait images for web browsers.

/* For width smaller than 400px: */
body {
    background-image: url('img_shoes.jpg'); 
}

/* For width 400px and larger: */
@media only screen and (min-width: 400px) {
    body { 
        background-image: url('img_closet.jpg'); 
    }
}

This gives you more creative control to make sure that your image fits the screen of a particular gadget.

4. Scale Video 

Just like images, video has the same considerations: aspect ratio, quality, and size.

You can make video responsive by applying CSS coding that is similar to what is used for images. The CSS-only approach is better than JavaScript, because you have more predictable code that is less prone to errors.

For instance, make your video responsive to device size by using the max-width: 100% and height: auto option in your coding. This makes the video player responsive and scale up and down, but not go larger than its original size.

Video content needs wrapping and padding-bottom for it to be placed on a website. For this, use an absolute position for the video element so that it takes up the whole height and width of the wrapper.

Set the wrapper height to 0 and add the padding-bottom percentage based on the aspect ratio. For an aspect ratio of 16:9, you will use 56.25% for the padding-bottom. 

You can further set separate classes for the padding-bottom based on the aspect ratios you choose to target.

5. CSS Website Templates

There are online resources that provide website templates incorporating responsive design features. These are free, modifiable, and sharable for all website developers.

W3 School is one popular site where website templates for a myriad of themes—architecture website, blogs, fashion website, and photo portfolio—are available for free.

There are also some templates that can be purchased for a relatively small amount, like responsive WordPress themes.

Responsive design has become essential in establishing your digital presence. Knowing the basic features and techniques to incorporate it into your website will open opportunities for your interactive site and ultimately get you one step closer to your business targets.

 

Comment Below