Creating Adaptive Design with CSS

In a sense, adaptive design is not as involved or tricky to figure out as RWD, because multiple goals are not being served by a single design. The complexity comes from a different direction, in that it typically involves server-side scripting. The first thing is to identify target devices and their screen sizes. A common set of these includes iPhone (320-480), tablet (760), laptop (900­1200), and desktop (1200-1600). Designing for each device is no different from when creating any fixed layout design. There is usually no need for the determination of breakpoints the same way as done in responsive design. Once all versions are built, a device-detection script is needed on the server side for sensing the screen size and possibly other features of the user’s device. This information is then used to deliver the appropriate version to the device. Beyond this principle, how complex an adaptive design is depends on whether device-specific readymade pages are static and delivered as they are, or built and optimized dynamically to suit specific devices upon detection.

Source: Sklar David (2016), HTML: A Gentle Introduction to the Web’s Most Popular Language, O’Reilly Media; 1st edition.

Leave a Reply

Your email address will not be published. Required fields are marked *