What makes sites responsive?
Responsive web design is a web design approach aimed at crafting sites to provide an optimal viewing experience - easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from desktop computer monitors to mobile phones). Wiki
Learn More -What is responsive design?
As with all web design, a responsive design starts with HTML. Clean, well-structured HTML helps create content that is meaningful and easier to manipulate based on context. Likewise, the care the designer gives when planning the site's semantics in uses of ID and class attributes can go a long way towards making the site more responsive. Clear roles for elements and consistent structure make it easier to control how content responds or displays within a specific design. HTML5 also includes a few features that helps sites be more functional across multiple devices. The new form elements, for example, allow designers to create forms that take advantage of mobile device interfaces and facilitate making phone calls and sending texts without requiring extra markup or scripting. As you would imagine, CSS plays a major role in creating responsive design. CSS media queries allow us to apply different sets of styles based on factors such as screen size, orientation, or resolution. This allows us to change layout and typography to a design that's more suited to the context in which it's viewed. Responsive layouts are typically fluid in nature so that they can flex to fit the screen on which they're viewed. Newer CSS features, such as transitions and transforms, allow designers to change how content displays and interacts with the user without requiring additional scripting. CSS-based graphics can also help reduce the amount of resources requested by the page by replacing icons or other images. JavaScript is also used in varying degrees by different responsive designs. It's primarily used to control resource loading, supply the correct images and media based on the needs of different devices, and to add device-specific functionality like geolocation and touch events to sites. Essentially, these three technologies--HTML, CSS, and JavaScript--form the backbone of most responsive designs. Later in this title, we'll explore some of those techniques in a little bit more detail. For the moment, just remember that it's the concept and goals of responsive design that's important to understand. In many cases, there are multiple techniques to help content become responsive, and in all cases, the techniques and strategies behind responsive design are continuing to evolve. That means that as a designer, you should explore multiple techniques, experiment with your own, and think about how responsive design fits in your overall site strategy.
