Responsive design is an approach to building web pages that aims to provide an optimal viewing experience across a wide range of devices, with a minimum of zooming, panning, and scrolling, plus easy navigation. The term was coined by Ethan Marcotte in his 2010 A List Apart article .
Technically, responsive design is a way of designing web pages so that they respond to the device that is displaying them. The page changes its content and layout based on features like the viewport size and orientation of the device. An important point to note is that all content and functionality should still be accessible from all devices – responsive design is not about punishing readers because they accessed your site via a smartphone, it’s about optimising their experience.
This week I published an article for Salesforce Developers, Responsive Design with Twitter Bootstrap and Visualforce, based on the developer zone session that I presented at Dreamforce 2014. If you’d like to watch the entire presentation, it’s right here.
However, the article summarizes why responsive design is important. Aside from being the preferred Google approach, it makes it much easier to track visitors to a single site than M-Dot sites and it can improve overall performance. That article also shares the three cornerstones to making your Visualforce pages more responsive using the Viewport meta tag, using a fluid grid and CSS Media Queries.
The slide deck to the original session can be found here in case you’d like to following along.