My idea is to one page, but when you screen size is smaller than 'x', then you will not see the desktop content, only the mobile content.

This will work something like this; http://jsfiddle.net/9rq43qq2/

Now just drag this thing to left to see the difference

drag this thing

Okay, so is it good and safe to use an Adaptive Design? What are the benefits and drawbacks of using an Adaptive Design?

  • The title of this question was edited, and I accepted the edit. However, @Fubz, since the difference between adaptive design and responsive design aren't always clearly differentiated (look at the answers, below, for example), would you like to confirm that it is adaptive design you're asking about? If you're unsure, here's a blog post that can help you decide: techrepublic.com/blog/web-designer/… and of course Google will help you find more.
    – JeromeR
    Aug 7, 2015 at 8:24

3 Answers 3


0. TL;DR

Yes, the media queries are matching your purpose.

Although I think it would be safer if you wrote the first media query as max-width: 900px and the other one as min-width: 901px.

1. Different devices

You will surely need more breakpoints (media queries) in order to accommodate the most part of the mobile/tablet market share.

The best way to find out how many and which widths you should adopt is to testing. The easiest way is resizing a desktop browser window to see when the layout looks broken.

2. Different content between devices

Some people like to offer shortened versions of their sites on mobile devices. I really think it is best if you offer the same content but with a layout adapted to the screen size of the device.

  • okay, but is it safe? does it lag?
    – Fubz
    Aug 6, 2015 at 12:03
  • It is perfectly safe. Performance will not be affected. Aug 7, 2015 at 7:20

What you are proposing is an Adaptive Design and yes it safe and commonly used. Examples of popular websites with Adaptive Design include:

It can commonly be mixed up with the term Responsive Design. The differences between Adaptive Design and Responsive Design, the following is a good summary from Mozilla:

Both responsive and adaptive design attempt to optimize the user experience across different devices, adjusting for different viewport sizes, resolutions, usage contexts, control mechanisms, and so on.

Responsive design works on the principle of flexibility. The idea is that a single fluid design based upon media queries, flexible grids, and responsive images can be used to create a user experience that flexes and changes based on a multitude of factors. The primary benefit is that each user experiences a consistent design. One drawback is a slower load time.

Adaptive design is more like the modern definition of progressive enhancement. Instead of one flexible design, adaptive design detects the device and other features, and then provides the appropriate feature and layout based on a predefined set of viewport sizes and other characteristics. This can result in a lack of consistency across platforms and devices, but the load time tends to be faster.

So to summarise the trade-offs of using an adaptive design for the example you've provided, you may not achieve a consistent design across all device sizes since you've only defined two view sizes, but design and build times should be quicker as you are only designing for two set screen sizes.


This is called "responsive design" and is implemented by many front-end frameworks (foundation, bootstrap etc)

  • 1
    Actually in this question the OP is proposing an 'Adaptive Design' rather than a 'Responsive Design', since the OP is suggesting two predefined designs based on two different viewport options.
    – Clint
    Aug 7, 2015 at 6:29

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.