Responsive web design (RWD) is an approach to web design that makes web pages render well on a variety of devices and window or screen sizes. The use of our mobile devices to surf or browse the internet is growing very fast, but unfortunately, much of the web isn’t optimized for those mobile devices.

Mobile devices are often constrained by display size and require a different approach to how content is laid out on the screen. Responsive web design has become more important as the amount of mobile traffic now accounts for more than half of total internet traffic. Therefore, Google announced Mobilegeddon in 2015 and started to boost the ratings of sites that are mobile-friendly if the search was made from a mobile device.

The practice consists of a mix of flexible grids and layouts, images, and an intelligent use of CSS media queries. As the user switches from their laptop to iPad, the website should automatically switch to accommodate for resolution, image size, and scripting abilities. Web pages should not leave out information to fit smaller devices, but rather adapt their content to fit any device.

Responsive Web Design
Responsive Web Layout

So, for a responsive website;

Defining the viewport

The viewport is the viewing window through which users see your page. If you don’t set the viewport properly, your mobile visitors will see a really zoomed out version of your desktop layout.
Put this tag anywhere between your opening and closing head tags:

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

As you can see, this tag tells your browser two things:
width=device-width: Use the user’s device width as the viewport width
initial-scale=1.0: Don’t start zoomed in or out, the initial scale should be 1
With this tag, you’re ready to start making your site responsive, you can two new webpages to test this out. Add this meta tag to one and leave the other without it, then test them on different devices.

Responsive images

Responsive images are images that scale nicely to fit any browser size.
Using the width Property
If the CSS width property is set to 100%, the image will be responsive and scale up and down:

<img src="comnitys.jpg" style="width:100%;height:auto;">

In summary;

  • Responsive web design (RWD) means all content, images, and structure of a site will adjust to fit every screen size.
  • Google accounts for 67 percent of desktop search engine market shares and 83 percent of mobile shares, making it the most popular search engine in the world. So it’s a good idea to listen when they recommend RWD. While Google has stated that dynamic serving and mobile-specific sites are acceptable when done properly, responsive still comes in first. Being mobile-friendly will give you a boost in SEO as Google has officially announced they are using mobile-friendliness as a ranking signal for mobile searches.
  • Without an RWD, visitors often have to mess around with zooming in, horizontal scrolling, or shrinking text and images on screen to simply read a post. With RWD, content is automatically adjusted to perfectly fit the screen of the device making for a hassle-free experience.

The less tweaking visitors need to do to navigate a site, the more likely they will be to revisit. In fact, visitors that have a positive experience with a mobile site are 67 percent more likely to make a purchase. A negative experience can lead to a loss of brand loyalty as 50 percent of consumers reported they would use a site less often even if they like the brand. Ultimately, this means fewer visits and sales.

In this tutorial, I’ve only discussed what responsive web design (RWD) means, its applications, and how it’s incorporated in some levels. A new tutorial will be coming shortly that will discuss the grid system (if you want to know how the bootstrap grid system works).

Leave a Reply