I have been working with websites designed to be responsive since I started to work in web development in 2012. By then responsive web design (RWD) had become a must have to include when planning a web site build. Nowadays, when you talk about web design you are talking about responsive web design due to the growing number of different mobile devices that are used to access web content.
There are different approaches to RWD, nevertheless there are certain concepts that seem to be here to stay for a while.
Graceful degradation vs. progressive enhancement
Earlier the two competing concepts were graceful degradation and progressive enhancement.
According to the definitions supplied by the W3C:
'is the practice of building your web functionality so that it provides a certain level of user experience in more modern browsers, but it will also degrade gracefully to a lower level of user in experience in older browsers.'
'is similar, but it does things the other way round. You start by establishing a basic level of user experience that all browsers will be able to provide when rendering your web site, but you also build in more advanced functionality that will automatically be available to browsers that can use it.'
Read more on progressive enhancement here.
Adaptive vs. Responsive
Then came the practices of building either an adaptive or a responsive web application.
The adaptive web design approach detects the device and adapts to the screen width by loading from a predefined set of distinct layouts based on the screen size of the used device. It could mean less code than when using RWD.
Responsive web design is a single layout that fluidly changes and responds to fit to any screen width on any device. This is usually achieved by using fluid, proportion-based grids, CSS3 media queries, flexible images, sizing declared in relative units.
Read more about how I built this website here:
Barefoot in the Park website project – Responsive Web Design
px, em, and rem
Font sizing is a fundamental topic to get your head around when starting...
Avoiding using floats
Using inline-block grid and justify instead
Utilising built-in basic behaviour of HTML and CSS can give you a break...
Fluid, dynamic element height with padding-top trick
One of the main learning points of building this website was that there...