What are the differences between adaptive design and responsive design?
Adaptive Design | Responsive Design |
---|---|
The adaptive design focuses on developing websites based on multiple fixed layout sizes. | The responsive design focuses on showing content on the basis of available browser space. |
When a website developed using the adaptive design is opened on the desktop browser, first the available space is detected and then the layout with the most appropriate sizes is picked and used for the display of contents. Resizing of browser window has no effect on the design. | When a website developed using responsive design is opened on a desktop browser and when we try to resize the browser window, the content of the website is dynamically and optimally rearranged to accommodate the window. |
Usually, adaptive designs use six standard screen widths - 320 px, 480 px, 760 px, 960 px, 1200 px, 1600 px. These sizes are detected and appropriate layouts are loaded. | This design makes use of CSS media queries for changing styles depending on the target devices properties for adapting to different screens. |
It takes a lot of time and effort to first examine the options and realities of the end-users and then design the best possible adaptive solutions for them. | Generally, Responsive design takes much less work to build and design fluid websites that can accommodate content from the screen depending on the screen size. |
Gives a lot of control over the design to develop sites for specific screens. | Not much control over the design is offered here. |