As the number of mobile devices increase, so does the need to make a website display properly on them. Sometimes this is solved by having a main website and a mobile website which then of course requires both to be maintained.

A responsive website tackles this issue head on by having a single website for all devices, laid out so as to be easy to read and navigate with a minimum of resizing, panning and scrolling. A responsive website essentially indicates that a website has been created to use CSS3 media queries, an extension of the @media rule, with fluid proportion-based grids, to adapt the layout to the screen size.

Depending on the complexity of your existing website you could just plug-in the responsive elements directly without a re-build.

This simple website example demonstrates Lotus XPages written to respond to varying screen sizes.

Try dragging the side of your browser to make the view port bigger and smaller and see what happens to the website. Try looking at the website using your smart phone.