What is responsive design ?

Posted by | · · · · · | Responsive Design

Wikipedia Definition :

Responsive web design (RWD) is an approach to web design 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).

A site designed with RWD[1][4] adapts the layout to the viewing environment by using fluid, proportion-based grids,flexible images, and CSS3 media queries, an extension of the @media rule, in the following ways:

  • The fluid grid concept calls for page element sizing to be in relative units like percentages, rather than absolute units like pixels or points.
  • Flexible images are also sized in relative units, so as to prevent them from displaying outside their containing element.
  • Media queries allow the page to use different CSS style rules based on characteristics of the device the site is being displayed on, most commonly the width of the [Web browser|browser].



Latest statistics show that by the start of 2015 more traffic / bandwidth will be delivered to mobile devices than to desktops. What this shows is the ever increasing need for a site to be responsive or adaptive to the media device that is querying it. There are some standard sizes to target and this is primarily done using media queries. One can develop a responsive site from the ground up if you are willing to take the time and effort to test all versions of the site on all the major browsers. At Cocopine Solutions we use responsive frameworks that are already on stable versions and have been tested and are supported by a large community of developers. Our favourites are Foundation (http://foundation.zurb.com/) and Bootstrap  (http://getbootstrap.com). Granted there is a bit of a learning curve as you need to get to know the markup. But once you have gotten your feet wet it is an absolute breeze creating responsive sites with these frameworks. You can also find these frameworks widely used in the template industry which allows you to build sites in popular content management systems like joomla and wordpress.


Have a look at what some people have created using the Foundation framework.. http://foundation.zurb.com/learn/website-examples.html  as well as some bootstrap examples http://expo.getbootstrap.com/


A little about Foundation

Foundation had its secret origins in the ZURB style guide in 2008, which we used on every client project. Eventually, we decided we needed a framework that allowed us to prototype rapidly. We took our global CSS, jQuery plugins, common elements and best practices, and whipped them into what became Foundation, which we first released in 2011.

Like Hari Seldon, we predicted the future. We saw that mobile was becoming more popular — and more important. We knew we had to have something more functional and fluid to work on different screens, different orientations. That the framework had to be responsive was a no-brainer. And we were the first open-source framework to be responsive. We were also the first semantic framework and the first to be Mobile First. With Foundation 5, we’ll also be the first with partials.

A little about Bootstrap

Bootstrap was created at Twitter in mid-2010 by @mdo and @fat. Prior to being an open-sourced framework, Bootstrap was known as Twitter Blueprint. A few months into development, Twitter held its first Hack Week and the project exploded as developers of all skill levels jumped in without any external guidance. It served as the style guide for internal tools development at the company for over a year before its public release, and continues to do so today.

Originally released on , we’ve since had over twenty releases, including two major rewrites with v2 and v3. With Bootstrap 2, we added responsive functionality to the entire framework as an optional stylesheet. Building on that with Bootstrap 3, we rewrote the library once more to make it responsive by default with a mobile first approach.


If you are looking to have your site redesigned and want a team from Johannesburg , South Africa who are reliable and highly skilled then contact us and we will give you a no obligations quote.