Official website for Web Designer - defining the internet through beautiful design
FOLLOW US ON:
Author: Steve Jenkins
27th December 2012

Creating swipe-gesture content for webpages

Use swipe gestures in your websites to move between content, giving your users bite-sized pieces of information

Creating swipe-gesture content for webpages
As users now access our work on different devices, we are going to create a website based on swipe gestures for moving through page content. This might not be that useful for text-heavy sites, but will definitely work for visual sites such as portfolios. Given that we are going to be swiping through our content by dragging a finger left or right, that could pose a problem for the desktop. For this solution we could have used buttons, but instead we’ve opted to go for swiping with the mouse clicking and dragging left or right. To achieve this we’re using Matteo Spinelli’s SwipeView open-source project as a starting point, which is available from cubiq.org/swipeview. This solves the important issue of loading up content on lower spec devices, and the project weighs in at a lightweight 1.5KB. We’re going to custom format this and add in a menu for site functionality. We’re also going to make the images responsive so they scale up slightly on larger-screened devices and the desktop, but scale down for lower sized screens to give optimal viewing to our users.

DOWNLOAD FULL CODE

Getting started

From the resource disc copy the start folder to your computer and open index.html in Dreamweaver. Now add the code shown below to the head section of the page. This tells the device not to scale the content, because we’re going to produce a responsive design that will work across different screens.

001 <meta name=”viewport” content=”width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-
scale=1.0”>
002 <meta name=”apple-mobile-web-app-capable”
content=”yes”>
003 <meta name=”apple-mobile-web-app-status-
bar-style” content=”black”>

Create the links

Staying in the head section of the page, we then add a link to the typeface we are going to use. We also link up with our stylesheet, which is going to control the look of the page. Finally we add links to our two JavaScript libraries. The first is a self-contained link that handles the swiping, and the second one is jQuery for the drop menu.
001 <link href=’http://fonts.googleapis.
com/css?family=Advent+Pro’ rel=’stylesheet’
type=’text/css’>
002 <link href=”style.css” rel=”stylesheet”
type=”text/css”>
003 <script type=”text/JavaScript”
src=”swipeview.js”>
</script>
004 <script type=”text/JavaScript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.7/
jquery.min.js”>
</script>

Page structure

Moving into the body section of the document we add the tags for the page structure. As you can see the header section just contains a page title and the wrapper will hold the swipe content. You will also notice that there is a sizable chunk of JavaScript code in the body section, which powers the swiping.

001 <div id=”header”><h1>Built By Bots</h1></
div>

002 <div id=”wrapper”></div>

Swipe content

Inside the JavaScript code in the body section, find the fifth line down, which should be empty, the previous line will end slides [‘ and the next line will have ‘]; This is where we will add the content for each of the swipeable slide contents in the code below. The square brackets denote that this is an array with JavaScript objects being placed inside.

001 { img: ‘images/bot1.gif’,
002 width: 420, height: 420, desc: ‘Welcome,
please swipe to explore’},
003 { img: ‘images/john.gif’,
004 width: 420, height: 472, desc: ‘My name is
John Smith’},

Remaining slides

Creating swipe-gesture content for webpages
Add the next section of code which adds the next slides in the array. You can see that each slide contains a link to the image with the width and height properties being passed in. We also add the description in here – but we’re not adding a huge description because of the different screen sizes that this could potentially be displayed upon.

001 { img:
‘images/interaction.gif’,
width: 420, height: 341,desc: ‘I am an interaction designer’},
002 { img:
‘images/uk.gif’,width: 420, height: 292, desc:
‘Based in the UK, but working globally’}

Style up the page

Save the page and then open styles.css. Add the CSS for the HTML and body sections into the page here. Notice that we are preventing being able to select the page and adjusting the size, which is important for tablet devices. We also change to our custom typeface Advent Pro here for the whole page.

001 html, body { height:100%; }
002 body {
003 padding:0; margin:0; background:#333;
004 -webkit-user-select:none; -webkit-text-
size-adjust:none;
005 color:#eee; font-family: ‘Advent Pro’,
sans-serif;
006 font-size:100%; }

Change the heading

Next we change the heading to float over to the left of the page, the reason will become clear later on. We also add a small logo next to this as a background image. We therefore move the text across slightly so that we have some padding to the left of the text. The font size is also scaled down slightly so it isn’t too big.

001 h1{
002 margin-left: 10px; padding-left: 40px;
003 float: left; font-size: 1.3em;
004 text-shadow: 0 1px 0 #000;
005 background-image: url(images/mini-bot.gif);
006 background-repeat: no-repeat;
007 }

Dividing the display

Now we give our header the full width of the page, but ensure it has at least a minimum width and height to display its content. The wrapper is again set to have a width of 100% of the browser and a height of 90%. The wrapper is the section where the page content is going to appear, so for that reason it is given the majority of the space.
001 #header {width: 100%; min-width:320px; min-height:10%;
002 overflow:visible;}
003 #wrapper {
004 width:100%; min-width:320px;
005 height:90%;}

Setting the image width

Now scroll to the selector ‘#swipeview-slider img’ and add the following code into the curly brackets. This allows the image to scale with the display but stop scaling up when it reaches a maximum width of 480 pixels. When it scales down below this, it will match the browser window.

001 width:100%;
002 max-width:480px;
003 height: auto;

Test the page

If you save the CSS and test it in the browser, you will see that it is fully working, but we have no way of navigating to other pages, so let’s build a space-saving drop menu. In index.html, add the following code into the div tag with the header id before its closing tag.

001 <nav id=”nav-wrap”>
002 <div id=”menu-icon”>Menu</div>
003 <ul id=”nav”>

Menu content

In the previous step we’ve added an unordered list, so we continue that with the list items as our links for the menu. The menu will display the menu text and the list will be hidden, but drop down as the user clicks the menu. This is useful in keeping a condensed layout for small screen devices.

001 <li><a href=”index.html”>Home</a></li>
002 <li><a href=”work.html”>Work</a></li>
003 <li><a href=”#”>Facilities</a></li>
004 <li><a href=”#”>Contact</a></li>
005 </ul>
006 </nav>

Document ready?

In the head section at the top of the document add the following code in. This will check to see if the document is loaded and when it is, it will add a click event to the menu text. When this is clicked on it will use the slide-toggle jQuery function to drop the navigation menu into place.

001 <script type=”text/JavaScript”>
002 jQuery(document).ready(function($){
003 $(“#menu-icon”).on(“click”, function(){
004 $(“#nav”).slideToggle();
005 $(this).toggleClass(“active”);
006 });
007 });</script>

Style the menu

Save the document and move to the style.css document. Add the CSS to the bottom of the document. This positions the entire navigation to the right, placing the logo on the left. The text is increased slightly in size to make it more visible in the menu.

001 #nav-wrap {
002 position:absolute;
003 top: 7px; right: 7px;
004 font-size:1.2em;}

Position the heading

The menu heading is moved over slightly so that an icon can be placed in the background of the div tag. The width and height of the blocks are set here, and when the cursor moves over this on a desktop device it changes to a pointer so the user knows that this element has navigational functionality.

001 #menu-icon {
002 color: #000; width: 150px; height: 30px;
003 background: #ecebeb url(images/menu-icon.
png) no-repeat 2px center;
004 padding: 8px 10px 0 42px;
005 cursor: pointer; display: block;}

Change colour on rollover

We want the menu to change it’s colour on rollover so that again it aids the user in thinking that this is a navigational part of the page. Here we set the hover and the active state so there are changes in colour to the background of the block element. The active state is when the menu is dropped down.

001 #menu-icon:hover {background-color: #f8f8f8;}
002 #menu-icon.active {background-color: #bbb;}

Removing the menu items

This positions the navigation absolutely so that it is exactly below the menu. The z-index is placed above other content on the page. The display is set to none because this is made visible when the user clicks or taps on the menu button. jQuery makes this visible by scrolling it out from under the menu.

001 #nav {
002 position: absolute;
003 width: 192px; z-index: 10000; padding: 5px;
004 background: #f8f8f8;
005 display: none; }

Style the list

In the next block of code we set the list elements to have no bullets and to have a margin around each one. The text is set to have no underline as typically found on webpage links. The colour of each text element is also set at this point but will change on desktop computers that can rollover.

Change of states

We next add the hover states for desktop computers so that the text changes colour as the mouse rolls over the link in the menu list. A generic set of instructions are added for the unordered list element in the display. Save this document and test the design in your browser. You should be able to jump to the work page which is already completed.

001 #nav a:hover, #nav ul a:hover {
002 background: none; color: #000;}
003 #nav ul {
004 padding: 0; margin: 0;
005 width: auto; position: static;
006 display: block; border: none;
007 background: inherit;}

A small problem

When viewing on tablet devices the display is good, because these have a reasonably large viewing area and we’re shrinking the image slightly. The problem is that on phone displays, the menu overlaps the heading, so let’s change that by adding a media selector in the bottom of the CSS document.

001 @media only screen and (max-device-width:
360px) {
002 h1{
003 padding-left: 0;
004 float: none;
005 text-align:center;}

Scale down the content

Creating swipe-gesture content for webpages
In the previous step we set the h1 tag to align in the center. Now we position the navigation below that and also scale the width of the image down to 60% –allowing it to fully display on the very small screen of mobile devices. Without doing too much, we have a responsive display.

001 #nav-wrap {
002 position:relative; float:none;
003 margin-left: 60px; margin-top: -10px;
004 font-size:1.2em;}
005 #swipeview-slider img { width:60%;}

Change the position

Because some mobile devices have a navigation bar at the bottom of the display we are going to move the caption text of the image up the screen slightly to make it much easier to view. It shouldn’t make too much difference on other small screen devices.

001 #swipeview-slider span {bottom:35px;}
002 }

Save and finish

We are now finished with the CSS so save this and reload it in the browser to see it in action. If you have access to a tablet device it is well worth taking a look, because the swipe action really does enhance the experience of browsing through visual content that you would find in a portfolio site.

  • Tell a Friend
  • Follow our Twitter to find out about all the latest web development, news, reviews, previews, interviews, features and a whole more.
    • Jan

      Link to download does not work …

    • Jan

      Question: if I wanted to link to another page when the user taps on an image – how would I do this in the code?

    • R

      Download link is still not working! Please re-link.