Responsive Web Design - Introduction

What is Responsive Web Design?

Responsive web design makes your web page look good on all devices.

Responsive web design uses only HTML and CSS.

Responsive web design is not a program or a JavaScript.

Designing For The Best Experience For All Users

Web pages can be viewed using many different devices: desktops, tablets, and phones. Your web page should look good, and be easy to use, regardless of the device.

Web pages should not leave out information to fit smaller devices, but rather adapt its content to fit any device:

It is called responsive web design when you use CSS and HTML to resize, hide, shrink, enlarge, or move the content to make it look good on any screen.

Responsive web design is an overall approach to building websites that encompasses web specification standards and flexible design models. The philosophy behind it stems from the desire to make the web accessible to as many devices as possible.

Responsive design ensures that a website displays properly on desktops and mobile devices like smartphones and tablets. This relatively simple idea has spawned an entire generation of frameworks and tools like Bootstrap that automate much of the grunt work involved in designing responsive sites.

Around the late 2000s, web designers faced some new challenges when smartphones started to dominate. An explosion of different devices hit the market, with the first-generation iPhone leading the way. Web designers were walking through a digital minefield of cross-compatibility problems when it came time to building websites. They had to deal with inconsistencies with window width, screen resolution, different input devices, and numerous other idiosyncrasies that took forever to fix.

In response to this problem, the open source community of software engineers and designers got together to create a set of standards to achieve better cross compatibility. Those standards helped shaped best industry practices, which include responsive design. Collectively, these methods and specifications are known as responsive web design.