2

When you open Amazon's website with developer's tools and try to re-size its viewport size, the site seems to be static. But when you open it in a mobile device it perfectly fits to the screen.

What technique is used here, and what are the advantages of making site static for the desktop browsers, unlike bootstrap which adapts itself in the desktop version too?

3

They will likely use server side device detection based around the User Agent to show an alternative version of the website. This method is know as Dynamic Serving.

Bootstrap uses the viewport width to change the layout via CSS, known as Responsive Web Design.

There are use cases and arguments for both techniques.

EDIT: I'll expand on the cases for each a little:-

Dynamic serving allows you to serve two (or more) distinct versions of the HTML, CSS, JS and media files such as images and video. This means you can refine and optimise every detail for a certain scenario and only load the elements needed. However you have to maintain each of these different versions separately.

Responsive web design uses the same HTML for all scenarios then applies different CSS rules to change the look of the site dependent on viewport dimensions. Which allows you to maintain a single codebase, rather than distinct versions of the site, however can sometimes mean loading elements that you might not use.

Then there is "Progressive enhancement" which could be used as icing on the cake of either, to add functionality based on feature detection.

|improve this answer|||||
  • Just to add an additional bit of info, using both Dynamic Serving and RWD together is a good idea. This will help you handle different screen sizes and device type well. Also highly recommend a book called Adaptive Web Design by Aaron Gustafson – Stephen Keable Nov 17 '16 at 10:08

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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