Design Web Page using CSS

Many people use the terms Responsive Design and Adaptive Design interchangeably, but creating a distinction between them does help clarify two different approaches to the modern challenge of designing web pages that work on small and large screens.

In the world of web design, the only thing harder than keeping up with the ever-evolving standards in HTML, CSS, and other technologies, is keeping up with the vocabulary. This article is about helping you understand what responsive and adaptive design mean, and how these approaches differ.

Many approaches to mobile web design

When people first started using mobile phones to connect to websites, many of us created special versions of our sites specifically optimized to work only on small mobile devices. Today, some sites still use this approach, creating one simple mobile site for visitors with cell phones and directing everyone else to the main desktop website.

As mobile devices have become “smarter, ” two new approaches to designing for small and large screens have become popular — adaptive and responsive design.

Adaptive design was developed to meet the diverse needs of a growing number of cell phones with different capabilities and screen sizes. Adaptive design requires that you create many different versions of each web page, and install complicated programming on your web server that detects each device and delivers a version of the site optimized for the specific size and features of that cell phone visitor. Adaptive design is complicated, expensive, and generally used only by large, well-financed websites.

Fortunately, a new, simpler approach called responsive design is quickly gaining popularity. With responsive design, you create one web page and then use multiple sets of CSS rules to change the format and layout based on the size of the browser window.

What Responsive and Adaptive web design have in common

First, what they have in common. Both responsive and adaptive web design are essentially about creating web designs that are optimized for the size of the screen or the type of device that is used to view them.