Making your website mobile-friendly with responsive CSS web design

Let’s face it: most people nowadays own a smartphone and use it to do just about anything from checking in with their friends, ordering food or cab services to sending urgent work emails. This means that most of the websites that are currently active on the internet will most likely be viewed on screens that are significantly smaller than those of a desktop or laptop.

With that in mind, an industry-wide initiative is underway to optimize websites for access on mobile devices (smartphones and tablets). For most, this typically implies either modifying their sites for the smaller screen sizes found on such devices, or creating a separate page that can be viewed on its own, or, most commonly, using what is called “responsive web design” to make their website automatically adapt to different screen dimensions.

Most browsers designed for modern smartphones are written with the knowledge that websites are traditionally designed for desktop monitors. As such, they adapt by simply pretending that the device has a computer-sized screen and scaling everything to fit in it. That may inconvenience users, because they will have to zoom in to read any relevant portions.
You can overwrite this default setting by adding the following HTML tag to the <HEAD> section of your web page:

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

Media queries

The key that unlocks responsive CSS web design is a tool called “media query”. Here’s an example:

@media screen and (min-width:320px) and (max-width:640px) {
  /* for screens that are at least 320 pixels wide but less than or equal to 640 pixels wide */

You can, of course, modify the min-width and max-width values to suit your own needs.

You can also attach media queries in the link element, so that an entire stylesheet is only applied when that particular set of conditions is met. In the example below, there are three separate stylesheets. One is designed for portrait mode, another for their landscape mode, and the last one for desktop and laptop computers.

<link rel="stylesheet" type="text/css" media="screen and (max-width: 360px)" href="portrait.css">
<link rel="stylesheet" type="text/css" media="screen and (min-width: 361px) and (max-width: 480px)" href="landscape.css">
<link rel="stylesheet" type="text/css" media="screen and (min-width: 481px)" href="desktop.css">

Landscape / portrait mode

Instead of using specific resolutions to check if a device is in the portrait or landscape mode, you can also use the condition “orientation: portrait” and “orientation: landscape”.

@media screen and (orientation:portrait) {
  /* ... */
@media screen and (orientation: landscape) {
  /* ... */

There are a few other tricks that you can use to optimize your website for mobile access by using responsive CSS web design, but the ones shown above are the most common. We hope the information shared will save you some effort and will make your website more easily accessible on any device.



Leave a Reply