Developing mobile responsive sites

The use of mobiles (or smartphones) is increasing day-by-day and almost everyone today has a mobile (or a smartphone). So developing mobile responsive websites is a must.

Mobile responsive sites mean websites that look different on mobile devices than they look on a normal desktop. The normal desktop version has a full-fledged site with full visible menus and other sidebars along with the main content. Whereas in mobile devices the content is focused mainly other than menus and sidebars. Menus are kept hidden under some menu icon (usually three horizontal bars). This makes the user comfortable in reading the main content rather than finding the main content among the other clutter.

The websites which are specifically designed for mobile devices are called mobile-first websites. There are three different in which you can design your site responsively.

1. Using different pages:

You may use completely different pages for desktop and mobile devices. For example, the normal version of Facebook is http://www.facebook.com whereas the mobile-first version is m.facebook.com. These are two different pages. The server checks the device in the request headers that the device sends while requesting the page from the server. The server then accordingly redirects the user to the site specifically designed for the device.

2. Using different style sheets:

You can use the same webpage, but link to different style sheets with respect to the viewport dimensions (the height & width) of the devices. For example, the below code will link to normal.css for desktops and to mobile.css for handhelds:

<link rel="stylesheet"
      type="text/css"
      media="all and (min-width: 480px)"
      href="normal.css" />
<link rel="stylesheet"
      type="text/css"
      media="all and (max-width: 480px)"
      href="mobile.css" />

3. Using @media queries in a single style sheet:

You can even write all the styles in one single style sheet and separate them with @media queries:

@media all and (min-width: 480px) {
  .menu {
    display: block;
  }
}

@media all and (max-width: 480px) {
  .menu {
    display: none;
  }
}

These are the three ways which you can use to make your responsive. Use whatever you like. I use the 3rd method. Creating a single style sheet makes all the styles visible at once.

Advertisements

One thought on “Developing mobile responsive sites

Your Thoughts -

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s