Responsive web design, essential

Responsive web design, essential

Friday, 1 September 2017

What is responsive web design?

Responsive web design facilitates the build of a single site that will work across multiple screen resolutions. For example, a responsive web site may display in multiple columns when viewed on a desktop/laptop but automatically scale to two columns when accessed via a tablet and one column via a mobile phone. The illustration below shows how a responsive web site might adapt when viewed on different devices.

Responsive front end frameworks

Responsive frameworks are grid structures that are used as the building block for scalable web sites. It saves time by giving us the building blocks required to build an effective responsive web site. In short, it is a set of code that can be reused so that developers are not constantly reinventing the wheel.

Example responsive frameworks are Bootstrap, Base, The Responsive grid System, Skeleton, Foundation and Gumby.

Advantages & disadvantages of responsive web design

Advantages:

  • Cost: you have one web site to design and develop against having different sites for different devices.
  • Maintenance: you do not have to manage multiple web sites. Updating the content on the one site works across all devices accessing your site.
  • Consistency: visitors to your site get the same experience if they are using a desktop, tablet or mobile phone.
  • Browser compatibility: responsive sites generally render well across different browsers and operating systems.
  • Large support base: hundreds of thousands of active developers are constantly working to adapt, improve and support responsive frameworks.

Disadvantages:

  • Jack of all trades: certain pages will look perfect on a desktop but not quite as good on a mobile phone when it is resized.
  • User experience: viewing a web site on a mobile phone can require a completely different experience to that of a desktop. Having one site restricts the ability for you to have this flexibility.
  • Possible bloat: you will not always use all of the elements available in a responsive framework meaning there could be left over code that is not required.

Like what you see?

Get in touch