Author: Edit Olah

Responsive web design

Basic concepts

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:

Graceful degradation

'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.'

Progressive enhancement

'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.

Adaptive web design (AWD)

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 (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 on Adaptive vs. responsive web design here.

Frameworks

There are frameworks that you can use to quickly get a responsive web site up. These frameworks are downloadable packages of structured files and folders of standardised code of HTML, CSS, and JavaScript. Awwwards.com lists 14 ‘Simple frameworks’ and 9 ‘Complete frameworks’ of the currently (as of 20th Feb 2015) available responsive web design front-end frameworks, identifying the difference between the two categories based on level of complexity and/or the required flexibility.

The two most popular frameworks are Twitter’s Bootstrap and Zurb’s Foundation. Typically, in these packages, you have html and css grid system templates, JavaScript/jQuery plugins and other developer tools available for further extensions.

Read more about how I built this website here:
Barefoot in the Park website project – Responsive Web Design

Related blog posts

  • Font sizing

    Font sizing

    px, em, and rem

    Font sizing is a fundamental topic to get your head around when starting...

    More details >>

  • Avoiding using floats

    Avoiding using floats

    Using inline-block grid and justify instead

    Utilising built-in basic behaviour of HTML and CSS can give you a break...

    More details >>

  • Intrinsic Ratios

    Intrinsic Ratios

    Fluid, dynamic element height with padding-top trick

    One of the main learning points of building this website was that there...

    More details >>

Contact Edit

Get in touch

If you are interested in hiring me, please drop me an email. I would be happy to send you my up-to-date resume.

Drupal Association member
Image of Edit