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.
For my session at Dreamforce ’14, I also built a simple demonstration using an unauthenticated Force.com site – a blog containing a few recent posts, comments on those posts, keyword searches, and links to my twitter and facebook profiles. The article includes links to access the site and other resources including the code on github and many other resources. If you’re interested in responsive design using JavaScript, HTML5 and Visualforce, and need a good reference then you’ll want to add this article to your reading list.
The slide deck to the original session can be found here in case you’d like to following along.