What is Responsive Design?

  • By: Cris M.
  • Jan 21, 2013
  • 0
Share

Responsive design is a method of developing web pages that can adjust themselves according to the device used. These include desktop computers, laptops, tablets, smartphones, etc.

How can you tell if a website is responsive?

In order to find out the responsive features of a website, just open it on different devices, e.g. your desktop PC, mobile phone, and tablet. If the site is responsive, you will see the format and structure resized depending on the device. This generally means that the web page opened will automatically adjust to the size of your device’s screen.

Responsive Design
Responsive Design – Example

What is a responsive design?

Rather than just a simple technology, responsive design incorporates a number of methods and concepts that make it all function well. With modern technology, many compact devices have found their way through commercial usage, slowly putting aside massive and non-portable desktop computers. For instance, you can virtually use the Internet to it’s full potential with a smartphone or tablet today. This is exactly why the importance of newly designed mobile devices should be seriously taken into consideration, in terms of web design and development. What’s more, the idea of having a responsive design is directly influenced by the popularity of new portable gadgets – mostly the resolution of such devices.

Naturally, users want to be able to browse web pages fully and freely on their mobile phones and tablets. Letting them enjoy all the site’s content from any device is a great plus. This way users will not feel ignored, which will directly reflect the visit and traffic rates.

Responsive web design vs. mobile version

When the mobile industry has increased in popularity, web designers began designing mobile versions of websites in order to let mobile users enjoy web content easily and quickly. Unfortunately, this idea was not very productive, even though, at the time, it felt like a rational concept. There was a standard version of the site, one uses on a desktop PC, and a mobile version for mobile fans.

Responsive Design
Responsive Design – Different Devices

Nevertheless, this idea has started to fall short with the appearance of the highly developed touch screen tablets and other portable gadgets with different screen sizes. With a responsive web design, this is not a problem, you can browse a website regardless of your device, which is the key difference between the two.

Guide for developing responsive websites

Here is a complete list of CSS media queries for standard mobile devices:

CSS

/* Smartphones (portrait and landscape) ———– */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ———– */
@media only screen
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ———– */
@media only screen
and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ———– */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ———– */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ———– */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
}

/* Desktops and laptops ———– */
@media only screen
and (min-width : 1224px) {
/* Styles */
}

/* Large screens ———– */
@media only screen
and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ———– */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}

source: css-tricks

Comments

Your email address will not be published.