Home Guide How to create a Responsive Website

How to create a Responsive Website

Shreya Bose, Technical Content Writer at BrowserStack -

57% of internet users say they won’t recommend a business with a poorly designed website on mobile. This isn’t surprising since, as of February 2021, 55.56 % of global web traffic comes via mobile phones.

Mobile web traffic

Optimizing websites for mobile devices requires the implementation of responsive design. This is why most web developers now find themselves wondering how to make websites responsive in almost every project they handle.

What is Responsive Design?

Responsive web design refers to a design strategy that creates websites that work well for mobile, tablet, and desktop devices. Websites without responsive design risk alienating a significant number of users.

Additionally, Google looks at “mobile-friendliness” as a parameter for ranking. To quote the Google Webmaster Central Blog,

“Starting April 21 (2015), we will be expanding our use of mobile-friendliness as a ranking signal. This change will affect mobile searches in all languages worldwide and will have a significant impact in our search results. Consequently, users will find it easier to get relevant, high-quality search results that are optimized for their devices.”

Google Search Central also advises,

“Mobile is changing the world. Today, everyone has smartphones with them, constantly communicating and looking for information. In many countries, the number of smartphones has surpassed the number of personal computers; having a mobile-friendly website has become a critical part of having an online presence.

If you haven’t made your website mobile-friendly, you should. The majority of users coming to your site are likely to be using a mobile device.”

Naturally, website developers and designers put great emphasis on creating responsive websites. This article will explore some methods by which they can accomplish this, and test websites for adequate levels of responsiveness.

How to create a Responsive Website

1. Set Appropriate Responsive Breakpoints

In responsive design, a breakpoint is the “point” at which a website’s content and design will adapt in a certain way in order to provide the best possible user experience.

Every website is accessed via devices with different screen sizes and resolutions. The software has to render perfectly across each screen size. Content or images cannot be distorted, cut out, or obscured.

To allow this, developers have to use responsive breakpoints, sometimes called CSS breakpoints or media query breakpoints. These are points defined in the code. Website content responds to these points and adjusts itself to the screen size to display the accurate layout.

Free Responsive Design Checker

With CSS breakpoints in place, the website content will align itself with screen size and displays itself in a way that pleases the eye and facilitates visual consumption.

Use breakpoints for the most commonly used device resolutions used across mobile, desktop and tablet. These would be:

  • 1920×1080 (8.89%)
  • 1366×768 (8.44%)
  • 360×640 (7.28%)
  • 414×896 (4.58%)
  • 1536×864 (3.88%)
  • 375×667 (3.75%)

To learn more about setting the right responsive breakpoints, explore the ideal screen sizes for responsive design.

2. Start with a Fluid Grid

Previously, websites were based on pixel measurements. Now, however, they are built on what is called a fluid grid.

Basically, a fluid grid positions and sets web elements on a site in proportion to the screen size it is displayed on. Instead of making things in a single, specific size set in pixels, elements on a fluid grid will respond and resize to fit the size of the screen.

A fluid grid is divided into columns; heights and widths are scaled, not set to fixed dimensions. The proportions of text and elements depend on the screen size.

A fluid grid also helps with keeping a site visually consistent across multiple devices. It also offers closer control over alignments and enables faster design-related decision-making.

Have you heard about CSS Grid? Find out.

3. Take touchscreens into consideration

When wondering how to make a website responsive, think of touchscreens. Most mobile devices (phones and tablets) are now equipped with touchscreens. Some laptops are also catching up, offering touchscreen along with the keyboard functions.

Naturally, a responsive website will have to calibrate itself for being accessed via touchscreens. For example, let’s say there is a drop-down menu on the homepage.

  • On desktop view, each menu item must be large enough so that it can be pressed with a fingertip of a touchscreen.
  • On mobile screens, smaller elements like buttons should also be easier to detect and select.

To do so, use images, CTAs or optimize these elements to render properly on multiple screens.

Run a Quick Test to check Touch Event

4. Use Responsive Images and Videos

Responsive Image

Use modern image tag attributes to make images responsive to multiple device and screen resolutions. Study the example below:

<style>
img {
max-width: 100%;
}
</style>

<picture>
<source type="image/webp" srcset="https://my-image.com/my-image-100.webp 1x, https://my-image.com/my-image-200.webp 2x">
<source type="image/png" srcset="https://my-image.com/my-image-100.png 1x, https://my-image.com/my-image-200.png 2x">
<img alt="my image" src="https://my-image.com/my-image-200.png" loading="lazy" width="100" height="100">
</picture>

Source

Code breakdown:

  • Setting max-width allows the image to adjust its size based on its container width.
  • picture, source, and img tags are combined so that only one image is rendered, and that it fits best on the user’s device.
  • source is used to reference a WebP image that can be used by browsers supporting it. A second source tag references a PNG file of the same image for browsers without WebP support.WebP is an image format with advanced compression for web-based images.
  • srcset notifies the browser about which image should be displayed, depending on the particular device’s screen resolution.
  • loading=”lazy” attribute / value pair: Implements native lazy loading.

Responsive Video

An effective way to create responsiveness in videos is using aspect-ratio. The code below explains this:

<style>
.videoWrapper {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
height: 0;
}

.videoWrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>

<div class="videoWrapper">
<!-- Copy & Pasted from YouTube -->
<iframe width="560" height="349" src="http://www.youtube.com/embed/n_dZNLr2cME?rel=0&hd=1" frameborder="0" allowfullscreen></iframe>
</div>

Source

The code above embeds a YouTube video as an iframe and a div container with videoWrapper class.

Code Breakdown:

  • position: relative is placed on the container element so that child elements use absolution positioning relative to it.
  • height: 0 is combined with padding-bottom: 56.25% implements dynamic behavior with a 16:9 aspect ratio.
  • position: absolute, top: 0 and left: 0 is set on the iframe in order to make web elements place itself relative to their parent.
  • width and height of 100% make the child, iframe element 100% of its parent, videoWrapper which establishes the aspect ratio layout.

Responsive Design Checker

5. Typography

Generally, web developers define font sizes with pixels. These work on static websites, but responsive websites need a responsive font. Font size must change with respect to parent container width. This is necessary to make typography adjust to screen size and be easily readable on multiple devices.

In the CSS3 specification, look for the unit named rems. It is similar to the em unit, but acts relative to the HTML element. Because of this, the code must reset the HTML font size:

html { font-size:100%; }

Now define the responsive font sizes:

@media (min-width: 640px) { body {font-size:1rem;} }
@media (min-width:960px) { body {font-size:1.2rem;} }
@media (min-width:1100px) { body {font-size:1.5rem;} }

Source

6. Use a pre-designed theme or layout to save time

If developers and designers are wondering how to build a responsive website on an exceptionally tight deadline, they can opt for using a theme or pre-designed layout with built-in responsive properties. WordPress provides multiple options in this regard (both free and paid). All designers have to do, after picking a theme, is to decide on colour, branding, and text.

7. Test Responsiveness on Real Devices

When researching how to make a website mobile responsive, something that often gets overlooked is the necessity of testing on real devices. Developers can tweak the code all they want, but its functionality has to be verified in real user conditions.

When defining and implementing responsive design, it is important to check how the website appears on a range of devices. As far as possible, test responsive design on real devices, so as to verify what the design will look like exactly to end-users.

Once coded, put the website through a responsive design checker. BrowserStack offers a number of the latest real devices on which to check how a website looks, and if it is responsive enough.

Simply enter the website URL, and the tool will show how the site looks on multiple devices (iPhone 11, iPhone 8 Plus, Galaxy Note 20, Galaxy S9 Plus, and more).

Additionally, BrowserStack also offers a real device cloud of 2000+ real browsers and devices. Simply sign up for free, select a device-browser-OS combination, navigate to the website and check how it renders on that device resolution.

To conclude,

Following the steps detailed above will answer questions about how to make your website responsive. The amount of effort that goes into establishing responsiveness is directly proportional to the experience of the end-user. Keep in mind that users expect any website to be perfectly complementary with every single device they own – desktop, tablet, or mobile. If a website’s responsive design does not align with a certain device resolution (especially a commonly used device), the site is at risk of missing out on a segment of its target audience. Avoid this by investing time and research into studying how to make a web page responsive at the beginning of a project.

Tags
Responsive

Featured Articles

How to Perform Responsive Testing for a Locally Hosted Website

How to make a website mobile friendly?

How Device-Browser Fragmentation can affect your Website Business

BrowserStack Logo Perform a quick test on our Responsive Design Checker Try for Free