A swipe-based responsive design experiment and template

Swipely Pages is a template for a Responsive Design-based web experience that scales easily up from a limited phone to desktop, centered around swiping pages and panels from a central menu. Swipely Pages is not a finished web template, but an example of how this could be done; it will need to be heavily customized for every deployment. This experiment is based on Torkil Johnsen's Swipe.

Swipely Pages is best used for web sites that have a limited number of pages that are all related to through a central menu. It arranges these pages based on the size of the view-port of the browser and the JavaScript capabilities.

The starting page of a Swipely Pages site is index.html . It contains the opening paragraph and menu to go to the other pages.

Limited phones The index.html is loaded, and the user can jump from the menu to any page, as usual.

Small smarter phones that run JavaScript the index.html page will load the first sub-page and show it in a panel. Touch devices will let the user swipe the panel in and out of view, other devices can use the menu to swipe the panel into view.

Tablets, larger viewports index.html will use JavaScript to load all panels in a continuous ribbon. The user can either swipe to the desired page or jump from the menu. Desktops do not have touch and scrolling horizontally is not enabled, so the user goes to the next panel using the Next button.