2

Web Design for the iPad: Part 3

Posted by in Apple, iPad, Tutorials, Web Design

In part 2 we looked at creating the basic design for a website specifically for the iPad. In the final part of this series of articles we will code a working example with elements which automatically reposition themselves depending on whether the device is in landscape or portrait and also a scrolling gallery of thumbnails at the bottom which responds to touch.

All the files can be found in a zip file at the end of the post if you get stuck as there is an intermediate level of coding in this tutorial.

PREVIEW

Here is a preview video of a working version of the site on an iPad:


PREPARATION

Firstly we need to export all our slices from our PSD document. If you’re not sure how to do this see the following tutorial (there are many tutorials on the same subject on the web):

http://layersmagazine.com/image-slicing-in-photoshop-cs3.html

Or you can download the image slices here.

One thing to note in the previous part of the tutorial is that we made the psd document 768 pixels wide. Now that we need both landscape and portrait orientations we will need to create a wider version of our main snowboard graphic (1024 pixels wide).

If you are reasonably familiar with Photoshop you can simply drag the group from the PSD into a new document (1024 pixels width by 694 pixel height) and change the mask size. For those unfamiliar I would recommend downloading the slices above.

Once we have our slices, we must download a very handy script called iScroll from the following site:

http://cubiq.org/iscroll

This is the same script that was used on the Nike iPad site we discussed in the second part of the tutorial (don’t worry it’s completely free to use and you can support the project by donating if you like).

STEP 1

Create a new folder called tutorial, copy the images folder and the scroll folder into it like so:

/tutorial/
images/
iscroll/

And also create a css folder:

css/

Open your html editor of choice and create a new document called index.html and save it in the tutorial folder we just created.

STEP 2

Make sure it is completely blank and copy and paste the following:

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" /><meta name="robots" content="all" /><meta name="rating" content="general" />

This is the meta data, some of it isn’t necessary but the most important part is this line which ensures the content can’t be scaled by the user:
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />

STEP 3

Add in the script for iScroll:

<script type="text/javascript" src="iscroll/src/iscroll.js?v3.7.1"></script>

Then add the following script:
<script type="text/javascript">// <![CDATA[
var myScroll;
function setHeight() {
  document.getElementById('main').style.height = '200px';
}
function loaded() {
  //setHeight();
  if (window.orientation == 0) {
  document.getElementById('main').style.width = '768px';
  document.getElementById('main').style.height = '694px'; 
  }
  else if (window.orientation == -90) {
    document.getElementById('main').style.height = '438px'; 
    document.getElementById('main').style.width = '1024px';
  }
  else if (window.orientation == 90) {
    document.getElementById('main').style.height = '438px';
    document.getElementById('main').style.width = '1024px'; 
  }
  else if (window.orientation == 180) {
      document.getElementById('main').style.height = '694px'; 
      document.getElementById('main').style.width = '768px';
  }
  document.addEventListener('touchmove', function(e){ e.preventDefault(); });
  myScroll = new iScroll('scroller');
  }
  window.onorientationchange = function() {
  //setTimeout(scrollTo, 0, 0, 1);
  if (window.orientation == 0) {
  document.getElementById('main').style.height = '694px'; 
  document.getElementById('main').style.width = '768px';
  }
  else if (window.orientation == -90) {
    document.getElementById('main').style.height = '438px';
    document.getElementById('main').style.width = '1024px'; 
  }
  else if (window.orientation == 90) {
    document.getElementById('main').style.height = '438px';
    document.getElementById('main').style.width = '1024px'; 
  }
  else if (window.orientation == 180) {
      document.getElementById('main').style.height = '694px'; 
      document.getElementById('main').style.width = '768px';
  }
};
// Check screen size on orientation change
//window.addEventListener('onorientationchange' in window ? 'orientationchange' : 'resize', setHeight, true);
document.addEventListener('DOMContentLoaded', loaded);
// ]]></script>

Whilst this seems like a lot to take in it’s quite simple. All we are doing is detecting the orientation of the iPad and determining the height and width of the central image thereby positioning our product scroller at the bottom of our screen at all times.

Next we add in our title and a link to an external stylesheet file and close our header:


<link href="css/ipaddesign.css" rel="stylesheet" media="all" type="text/css" />

STEP 4

Let’s create the body of our html file which will be the interface the user sees on screen.


<div id="container">
<div id="header"><img alt="Blue Snow " src="images/logo.jpg" width="173" height="44" /></div>
<div id="main"><img alt="Brand New Boards Available Now!" src="images/main.jpg" width="1024" height="694" /></div>
<div id="scrollertitle"><img alt="Blue Snow " src="images/title.jpg" width="216" height="50" /></div>
<div id="wrapper">
<div id="scroller" style="width: 1536px;"><img style="float: left;" alt="" src="images/product1.jpg" width="154" height="128" />
<img style="float: left;" alt="" src="images/product2.jpg" width="153" height="128" />
<img style="float: left;" alt="" src="images/product3.jpg" width="143" height="128" />
<img style="float: left;" alt="" src="images/product4.jpg" width="122" height="128" />
<img style="float: left;" alt="" src="images/product5.jpg" width="196" height="128" />
<img style="float: left;" alt="" src="images/product1.jpg" width="154" height="128" />
<img style="float: left;" alt="" src="images/product2.jpg" width="153" height="128" />
<img style="float: left;" alt="" src="images/product3.jpg" width="143" height="128" />
<img style="float: left;" alt="" src="images/product4.jpg" width="122" height="128" />
<img style="float: left;" alt="" src="images/product5.jpg" width="196" height="128" /></div>
</div>
</div>
<pre>

In our scroller you'll notice we are repeating the same group of products twice. This is mainly to demonstrate the scroller and you could put as many images as you want in here provided you set the width of the div element accordingly.

STEP 5

Save index.html and create a blank file called ipaddesign.css and place it in the css folder we created earlier in STEP 1.

Copy the following styles into it:

* {margin:0;padding:0;}
img {
padding: 0px;
margin: 0px;
display:block;
}
form {
  clear:both;
}
body {
  background-color:#ffffff;
  background-repeat: no-repeat;
  background-position: 50% 0%;
  color: #ffffff;
  width: 100%;
  }
#container {
  width: 100%;
  float: left;
}  
#header {
  width: 100%;
  height: 44px;
  postion: relative;
  background-image:url(../images/navbg.jpg);
  background-repeat: repeat-x;
  background-color: #000000;
  float: left;
  }
#main {
  overflow: hidden;
  margin:0 auto;
  float: left;
  padding-right:0px;
  padding-left:0px;
}
#scrollertitle {
  background-color:#ffffff;
  width: 100%;
  margin:0 auto;
  float: left;
  padding-right:0px;
  padding-left:0px;
}
#wrapper {
  position:relative;
  background-color:#ffffff;
    z-index:1;
    width: 100%;
    height: 128px;
  float: left;
  padding: 0;
  margin: 0;
  overflow: hidden;
}
#scroller {
  background-color:#ffffff;
  width: 1536px;
  height: 128px;
  padding: 0;
  margin: 0;
  float: left;
}

I won't go through all the styles in turn however there is a good guide on stylesheets here at W3Schools for those who are curious.

Upload your files to a webserver or use your own local web server and try it out!

You can also download the tutorial files here.

Hope you enjoyed this set of tutorials, how did you find them? Should you have any comments or queries let me know :)