Responsiveness

Responsive design is an approach to web design that makes your web content adapt to the different screen and window sizes of a variety of devices.

resp-gif.gif
Responsive Design

Users will access the same basic file through their browser, regardless of device, but CSS code will control the layout and render it differently based on screen size. A responsive website shows content based on the available browser space. If you open a responsive site on the desktop and then change the size of the browser window, the content will move dynamically to arrange itself (at least in theory) optimally for the browser window.

Easy Maintenance

Responsive design is easier and takes less work to implement. It affords less control over your design on each screen size, but it’s by far the preferred method for creating new sites at this moment.

Fluid Layout

Responsive designers create a single design to be used on all screens and will generally start in the middle of the resolution and use media queries to determine what adjustments will be made for the lower and higher end of the resolution scale. This tends to make users happy, because that familiar web design seems guaranteed to translate across to any device’s screen. Uniformity and seamlessness are crucial considerations in providing a good user experience.
 

Hierarchy

It’s important to keep an eye on the visual hierarchy of responsive design projects; you want to try to maintain this as your elements shuffle around the screen.

SEO Friendly

SEO is another big argument for using a responsive design. Sites that use responsive design (i.e., ones with a URL that serve all devices) are currently more search engine friendly.
 

Adaptive Design

Adaptive design has multiple fixed layout sizes. When the site detects the available space, it selects the layout most appropriate for the screen. So, when you open a browser on the desktop, the site chooses the best layout for that desktop screen; resizing the browser has no impact on the design.

Screen Size

In adaptive design, it’s normal to develop six designs for the six most common screen widths;

320  |  480  |  760  |  960  |  1200  |  1600 pixels.

Better User Experience

Adaptive design will (theoretically) ensure the best user experience according to whichever device the user is using to interface. Unlike responsive design, where a screen “flows” from desktop design into a smaller device’s, adaptive design offers tailor-made solutions.

Faster Rendering

research shows that a company with an adaptive website will often outperform, on speed tests, a company with a responsive website. This isn’t a small difference either; adaptive sites are often 2-3 times faster than responsive ones and give rather less data to the user in order to deliver the user experience.
 

Best Practices

Mobile First

Mobile first approach is the better solution as scaling up a design to bigger sizes is fairly easier than scaling down to smaller size.

Fluid Layout

Set the containers as ‘’relative’’, specifying proportions and percentages of the elements instead of absolute pixel size.

illustration - responsiveness.png