Chapter 7
Designing for iPad
WHAT YOU WILL LEARN IN THIS CHAPTER:
- Knowing special design considerations for iPad
- Understanding limitations of Safari on iPad
- Creating a Split View app
The iPad is mobile, but it is not a phone device. That statement is a “no-brainer” obviously, but when designing for the iPad it is easy to fall into the trap of thinking of it as a “giant iPhone.” On the contrary, the iPad is almost a perfect blend between the mobile and touch qualities of an iPhone and the larger visual experience and interaction capabilities of a desktop computer. Therefore, as you design web apps for the iPad, you need to give it the individual attention it deserves rather than just treating it as a bigger iPhone viewport.
In this chapter, I highlight some of the special considerations you should think about when designing an app for iPad. I then focus on creating a split view UI (user interface) design that emulates the look of a native iPad app.
When you create a web app for iPad, you need to perform many of the same things you do when creating an iPhone app. Chapters 5 and 6 discuss the process of creating apps in full detail, but the following are a few of the key ways you can transform a normal web page into a web app that targets iPad:
- Adding the viewport meta tag to the document head:
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no;"/>
- Adding an iPad-specific media query:
<link media="only screen and (min-device-width: 768px) and (max-device-width: 1024px)" type="text/css" rel="stylesheet" href="iPad.css" />
- Adding iPad-specific styles:
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) { /* Add iPad styles here */ } - Enabling the iPad app to run in full screen mode when launched from the iPad home screen:
<meta name="apple-mobile-web-app-capable" content="yes">
Design Essentials
The following are some additional essentials to keep in mind as you design for iPad:
- Design for both portrait and landscape modes. You need to design your app at 1024 × 768 in landscape and 768 × 1024 in portrait.
- Be sure your design is flexible enough for both portrait and landscape modes. If needed, add a listener for the orientationchange event and adjust your design dynamically. The exercise later in this chapter demonstrates one way to do this.
- Minimize your use of modal windows. This enables users to work with your app in more flexible, non-linear behavior. When you do want to use a modal view for users to perform a given task, I recommend a popover-like window, which I demonstrate later in the chapter.
- For edit elements, don’t use the contenteditable attribute, as Safari on IOS doesn’t support it. Instead, use a textarea for multi-line editing.
- Unless you use one of the popular mobile frameworks or iScroll (discussed in the next section), avoid using the position:fixed CSS property. It will not display as you intend. Specifically, fixed elements can scroll off screen if users zoom or pan on a page.
Dealing with Scrolling
Scrolling inside of Safari on iPad doesn’t behave as you expect from the desktop browser world. A single or double finger swipe triggers window.scroll(). As a result, there is no way to scroll overflowing content inside a fixed-sized block, as Safari interprets a swipe inside the element as a window scrolling action. What’s more, Safari on IOS doesn’t support single finger scrolling for div elements.
In order to overcome these limitations, a handful of open source solutions have been developed. Arguably the most popular of these is iScroll 4, a project originally developed by Matteo Spinelli. You can add this JavaScript library to your project to have the kind of scrolling experience that users will be looking for in an app that targets the iPad device. You can download it at http://cubiq.org/iscroll-4.
In addition to more native-like scrolling capabilities, iScroll 4 also provides several additional touch event capabilities including pinch/zoom of content, pull down to refresh, snap to element, and custom scrollbars.
Split View Design Pattern
One of the key iPad design patterns for native apps that you should look to emulate when it makes sense is a master-detail view known as split view. The split view design pattern consists of two side-by-side panes in which a list of items is displayed on the left and detailed information about the currently selected item from the list is shown on the right.
On the desktop, you see this pattern utilized all of the time. It’s used in most email applications, such as Outlook or Apple Mail, in which the list of messages is displayed next to a message viewer.
The iPhone makes use of the master-detail concept, but can’t show both master and detail views in a split manner due to space limitations. However, the iPad — the man in the middle of the phone and desktop worlds — behaves like either the desktop or the phone depending on the context. In landscape mode, both master and detail views are displayed (see Figure 7-1). However, in portrait mode the master view is shown in a popover box (Figure 7-2).
When you read Chapter 16 you find out that you can create a web app for iPad using popular mobile frameworks, such as jQuery Mobile, and have it behave nicely within the Safari on IOS environment. However, because most of these frameworks are cross-platform, they don’t attempt to emulate IOS design standards. Instead they provide a more neutral, agnostic-looking UI. The Hello World app I created in Chapter 5 is a perfect example of this technique. However, suppose you would like your web app to follow closely the native IOS UI guidelines, so that it has a basic “look and feel” that is similar to the native apps that users are familiar with. You can create this “look and feel” from scratch using CSS and JavaScript or you can explore open-source options available on the Web. One such option is Slablet, an open source framework that you can add to your web app to re-create a native-looking iPad UI. You can download it from https://github.com/fellowshiptech/slablet.
Although Slablet and other templates of its ilk are not the full, comprehensive solutions that jQuery Mobile, Sensa Touch, or iWebKit are, Slablet is a great example of a lean, easy-to-use add-on that you can quickly use to transform your app into a rather impressive-looking app for iPad users. The following exercise walks you through the steps needed to create a Slablet-based app.
TRY IT OUT: Creating a Split View App Shell
Get an idea of how to create an iPad app by following these steps.
1. Download the Slablet library from https://github.com/fellowshiptech/slablet.
2. Unzip the contents of the zip file into your app folder. Make sure that Slablet’s assets folder is directly inside your root app folder.
3. Create the following HTML document in your text editor and then save the document as BIDHJ-Ch07-Ex1.html.
<!DOCTYPE html>
<html lang="en">
<head>
<!--
Credit: This example utilizes the Slablet template
URL: https://github.com/fellowshiptech/slablet
-->
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="x-ua-compatible" content="ie=edge" />
<title>iOS WebAppster Conference</title>
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="viewport" content="width=device-width, initial-scale=1,
maximum-scale=1, user-scalable=no" />
<link rel="stylesheet" href="assets/stylesheets/master.css" />
<!--[if IE 8]>
<link rel="stylesheet" href="assets/stylesheets/ie8.css" />
<![endif]-->
<!--[if !IE]><!-->
<script src="assets/javascripts/iscroll.js"></script>
<!--<![endif]-->
<script src="assets/javascripts/jquery.js"></script>
<script src="assets/javascripts/master.js"></script>
</head>
<body>
</body>
</html>
Code snippet BIDHJ-Ch07-Ex1.html
4. Add the main page content inside of the document body:
<!-- Begin Page (shown in both landscape and portrait -->
<div id="main" class="abs">
<!-- Begin Page Header -->
<div class="abs header_upper chrome_light">
<!-- Main menu button -
shown only in Portait mode
displays popover menu when pressed
-->
<span class="float_left button" id="button_navigation">
Menu
</span>
<!-- Left toolbar button -->
<!--a href="#" class="float_left button">
Back
</a-->
<!-- Right toolbar button -->
<!--a href="#" class="float_right button">
Command
</a-->
My Title
</div>
<!-- Toolbar -->
<!--div class="abs header_lower chrome_light">
</div-->
<!-- End Page Header -->
<!-- Begin Page content -->
<div id="main_content" class="abs">
<div id="main_content_inner">
<!-- Add content here -->
</div>
</div>
<!-- End Page content -->
<!-- Begin Page Footer -->
<div class="abs footer_lower chrome_light">
<!--a href="#" class="float_left button">
</a-->
<a href="#">View full site</a>
</div>
<!-- End Page Footer -->
</div>
<!-- End Page -->
Code snippet BIDHJ-Ch07-Ex1.html
5. Add the following sidebar-related code after the previous content block inside the document body:
<!-- Begin Sidebar (shown as sidebar in landscape, shown as popover in portrait -->
<div id="sidebar" class="abs">
<span id="nav_arrow"></span>
<!-- App Name -->
<div class="abs header_upper chrome_light">
My App Name
</div>
<!-- Begin Sidebar Menu -->
<div id="sidebar_content" class="abs">
<div id="sidebar_content_inner">
<ul id="sidebar_menu">
</ul>
</div>
</div>
<!-- End Sidebar Menu -->
<!-- Begin Sidebar Footer -->
<div class="abs footer_lower chrome_light">
<a href="#" class="icon icon_gear2 float_left"></a>
<span class="float_right gutter_right">Slogan</span>
</div>
<!-- End Sidebar Footer-->
</div>
<!-- End Sidebar -->
Code snippet BIDHJ-Ch07-Ex1.html
How It Works
In this exercise, you created a basic split view UI shell that, although devoid of content, enables you to build a complete app on top of the basic shell. You begin by adding the essential meta tags and links required to create the app structure. The app-mobile-web-app-capable and viewport meta tags are discussed in Chapter 6. The remaining code in the head adds all the essential CSS style sheets and JavaScript libraries (including jquery.js) that are utilized by the Slablet template.
The Slablet style sheets and JavaScript libraries make heavy use of the id and class attributes of an element to define its look and behavior, so each of the core parts of the UI are given a specific id and/or class attribute value.
Figures 7-3 and 7-4 show the empty app shell in both landscape and portrait modes. As happens in a native iPad app, the sidebar appears when in landscape mode and is hidden in portrait mode. Notice also that the Menu button appears in portrait but is not visible in landscape.
As you can see from this simple example, Slablet offers you considerable functionality when you have correctly defined the right elements in your HTML file. Looking under the Slablet hood, there are a few key parts of the template that are worth looking at. First, the master.js file is used to define all of the behavior of the template. Particularly noteworthy is how Slablet adjusts to orientation and toggles the visibility of the sidebar. Here’s the relevant code:
function adjust_angle() {
var angle = window.orientation;
var body = $('body'),
var body_width = body.outerWidth();
var sidebar = $('#sidebar'),
if (angle === 0 || angle === 180 || body_width < 1024) {
body.addClass('is_portrait'),
$('#button_navigation').removeClass('button_active'),
sidebar.hide();
}
else {
body.removeClass('is_portrait'),
sidebar.show();
}
}
adjust_angle();
$(window).bind('resize orientationchange', function() {
adjust_angle();
});
As you can see from this code, the adjust_angle() function is assigned as the event handler for the browser’s orientationchange event. Therefore, when the iPad orientation changes the window.orientation property is evaluated. When it is determined that the iPad is in portrait mode, the sidebar is hidden using sidebar.hide(), but if the iPad is in landscape mode, then the sidebar is shown.
Although the app so far is purely a shell with no content or working parts, it doesn’t take much to transform this UI shell into a usable application. The following exercise walks you through the steps needed to do just that.
TRY IT OUT: Creating a Split View Conference App
Use the following steps to turn the empty UI shell into a conference app.
1. Open the BIDHJ-Ch07-Ex1.html file you created in the previous exercise and save it as index.html.
2. Replace the empty page content so that it looks like the following:
<!-- Begin Page (shown in both landscape and portrait -->
<div id="main" class="abs">
<!-- Begin Page Header -->
<div class="abs header_upper chrome_light">
<!-- Main menu button -
shown only in Portait mode
displays popover menu when pressed
-->
<span class="float_left button" id="button_navigation">
Menu
</span>
<!-- Left toolbar button -->
<!--a href="#" class="float_left button">
Back
</a-->
<!-- Right toolbar button -->
<!--a href="#" class="float_right button">
Command
</a-->
IOS WebAppster Conference
</div>
<!-- Toolbar -->
<!--div class="abs header_lower chrome_light">
</div-->
<!-- End Page Header -->
<!-- Begin Page content -->
<div id="main_content" class="abs">
<div id="main_content_inner">
<h1>Welcome to IOS WebAppster Conference 2013</h1>
<p>You are now at the most amazing conference in the
history of the Web. Ok, maybe
that's hyperbole. But we think you are going to like it.</p>
</div>
</div>
<!-- End Page content -->
<!-- Begin Page Footer -->
<div class="abs footer_lower chrome_light">
<a href="#" class="float_left button">
About the Salsa Conference Center
</a>
<!--a href="#" class="float_left button">
Bar
</a-->
<!--a href="#" class="icon icon_bird float_right"></a-->
<a href="#">View full site</a>
</div>
<!-- End Page Footer -->
</div>
<!-- End Page -->
Code snippet index.html
3. Replace the empty sidebar content so that it includes the following code:
<!-- Begin Sidebar (shown as sidebar in landscape, shown as popover in portrait -->
<div id="sidebar" class="abs">
<span id="nav_arrow"></span>
<!-- App Name -->
<div class="abs header_upper chrome_light">
ConfApp
</div>
<!-- Begin Sidebar Menu -->
<div id="sidebar_content" class="abs">
<div id="sidebar_content_inner">
<ul id="sidebar_menu">
<li id="sidebar_menu_home" class="active">
<a href="#"><span class="abs"></span>Home</a>
</li>
<li>
<a href="#">Welcome to IOS WebAppster</a>
</li>
<li>
<a href="#">Sessions</a>
<ul>
<li>
<a href="#">Session 100: Hello World</a>
</li>
<li>
<a href="#">Session 110: Designing for Mobile</a>
</li>
<li>
<a href="#">Session 210: Styling with CSS</a>
</li>
<li>
<a href="#">Session 220: Advanced JavaScript</a>
</li>
<li>
<a href="#">Session 225: Designing for iPad</a>
</li>
<li>
<a href="#">Session 300: Touch Events</a>
</li>
<li>
<a href="431.html">Session 431: Distributing Your
App</a>
</li>
</ul>
</li>
<li>
<a href="#">Speakers</a>
<ul>
<li>
<a href="#">Doug Majoring</a>
</li>
<li>
<a href="#">Kyle Exwhi</a>
</li>
<li>
<a href="#">Jason Masters</a>
</li>
<li>
<a href="#">Samantha Goodface</a>
</li>
<li>
<a href="#">Jess Gentleman</a>
</li>
<li>
<a href="#">Lex Landry</a>
</li>
<li>
<a href="#">Rachel Furgeson</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
<!-- End Sidebar Menu -->
<!-- Begin Sidebar Footer -->
<div class="abs footer_lower chrome_light">
<a href="#" class="icon icon_gear2 float_left"></a>
<span class="float_right gutter_right">Bringing Conferences to Life</span>
</div>
<!-- End Sidebar Footer-->
</div>
Code snippet index.html
4. Save the file.
5. Using this file as starting point, save the file twice under the names welcome.html and 431.html.
6. Open welcome.html in your editor.
7. Replace the code in the main_content_inner div with the following code:
<div id="main_content_inner">
<h1>Welcome to the Conference</h1>
<p>We're going to have a great time!</p>
</div>
Code snippet welcome.html
8. Save the file.
9. Open 431.html in your editor.
10. Replace the code in the main_content_inner div with the following code:
<div id="main_content_inner">
<h1>Session 431: Distributing Your App</h1>
<p>In this compellings session, Doug Majoring leads you through how
to distribute your
web app in the App Store.</p>
<p><button onclick="alert('View Slides')">View Slides</button></p>
<h1>Session Details</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce suscipit
diam id ipsum sagittis ac rhoncus enim dignissim. Phasellus venenatis
risus in eros sollicitudin vel posuere magna convallis. Aenean malesuada
luctus arcu ac tincidunt. Ut ultricies mattis metus, vel tempus elit
cursus ut. Pellentesque dui orci, rutrum id facilisis vitae, porta sed
tellus. Morbi venenatis ornare eros a varius. Integer convallis euismod
urna, sed imperdiet purus tempor elementum. Pellentesque metus tortor,
fringilla a ullamcorper eu, semper ut nulla. Phasellus ullamcorper leo
in lectus vestibulum lobortis. Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Sed at est ut turpis venenatis lacinia consectetur et
ante. Maecenas feugiat pulvinar sagittis.</p>
<p>In eu velit magna. Phasellus felis lectus, rhoncus ut ultricies nec,
porttitor sed nunc. Nulla sit amet purus metus, sed molestie diam. Nam
pellentesque dui vitae mauris tincidunt venenatis. Cras a adipiscing risus.
Morbi lorem turpis, suscipit iaculis hendrerit non, auctor ut augue.
Phasellus at urna a nisl tempor sodales. In hac habitasse platea dictumst.
Cras at augue massa, non suscipit nulla. Morbi bibendum ultricies luctus.
Phasellus rutrum blandit dui ac facilisis. Mauris vitae augue eros.
Suspendisse fermentum ultricies risus quis viverra. Donec ut ante id nisi
fringilla mollis sed nec velit. Phasellus ornare, nulla ut rutrum
hendrerit, felis diam cursus purus, quis fermentum erat lacus posuere
odio. Fusce ac odio tortor.</p>
<p>Nullam tempor, est in ultrices luctus, diam lectus tincidunt sem, nec
ornare dolor lectus a magna. Vestibulum accumsan suscipit aliquet.
Mauris at lorem quam. Aenean ac augue quis sem commodo accumsan a vitae
nunc. Maecenas luctus velit et erat dignissim ut commodo arcu malesuada.
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere
cubilia Curae; Nulla viverra, enim sit amet placerat venenatis, tortor
odio feugiat mauris, sit amet vehicula purus tellus pulvinar libero.
Phasellus id feugiat turpis. Donec aliquam luctus iaculis. In faucibus
neque in lorem tincidunt pellentesque. Vestibulum condimentum augue vel
ante euismod euismod sed ac urna. Phasellus scelerisque, quam id dapibus
sagittis, nulla nibh hendrerit est, vel aliquam tellus augue vitae sem.
Aenean commodo, urna a sagittis varius, nulla metus tempor nunc, ac
suscipit elit odio sed leo. Vivamus ut lobortis velit. Nam pretium
vestibulum tellus non vehicula.</p>
<p>Proin dolor diam, laoreet vel faucibus nec, malesuada sit amet purus.
Proin turpis orci, ultrices at laoreet quis, vulputate ac mi. Sed nec
tristique justo. Maecenas cursus sem et tellus gravida nec semper neque
suscipit. Curabitur vitae convallis metus. Fusce porta elementum molestie.
Quisque neque eros, vehicula nec cursus ac, tincidunt accumsan lacus.
Nulla facilisi. Donec id nisl ligula, eget cursus quam. Donec euismod
iaculis rhoncus. Aliquam malesuada dignissim libero nec scelerisque.
Donec mauris sapien, dignissim ac blandit a, consequat bibendum felis.</p>
<p>In dignissim varius eros, eu mattis metus fringilla ut. In ultrices
orci nec libero sollicitudin a dapibus mi tempor. Donec neque justo,
condimentum ac vehicula quis, iaculis eget lacus. In at elit nisl.
Donec vel aliquam dolor. Phasellus hendrerit justo in elit ultrices
ac pulvinar turpis viverra. Nullam ornare nisi vitae risus vulputate
malesuada. Nam vulputate lobortis velit, sed iaculis arcu fermentum
pharetra. Aliquam dolor massa, pretium sit amet ultrices sed, pellentesque
ut lectus. Sed aliquet pharetra dolor eget pharetra. Mauris sit amet purus
odio. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
posuere cubilia Curae; Quisque lobortis, dui pulvinar dapibus facilisis,
lectus enim pretium odio, ut imperdiet sem sem nec augue. Nulla facilisi.
Integer et risus eget purus posuere varius. Donec ac nibh quis mi lobortis
sagittis quis ut est.</p>
</div>
Code snippet 431.html
11. Replace the code in the float_left link in the page footer with the following code:
<a href="#" class="float_left button"> View Doug's Bio </a>
Code snippet 431.html
12. Save the file.
How It Works
In this exercise, you transformed the UI shell into a sample app that could be filled out to serve as an app that a conference presenter could utilize. To demonstrate it, you created the main index page, the welcome page, and an example session page. The main app page is shown in Figure 7-5. The pages are accessible via the list of links defined in the sidebar, as shown in Figure 7-6. As discussed earlier, when the app runs in portrait mode, the sidebar is hidden and displayed as a popup when the user clicks the Menu button (see Figure 7-7).
Figure 7-8 shows the example session page. However, what’s important to note about this page is that the content scrolls inside the page div using the popular iScroll.js library.
EXERCISES
1. True or False? Although the iPhone should use the viewport meta tag for web apps, the viewport tag is not needed for iPad web apps.
2. Is it better to design for landscape or portrait modes?
3. How can you overcome the limitation of being unable to scroll overflowing content inside of a fixed size div?
Answers to the Exercises can be found in the Appendix.
• WHAT YOU LEARNED IN THIS CHAPTER
| TOPIC | KEY CONCEPTS |
| Key meta tags to add for most every iPad web app | Viewport meta tag, apple-mobile-web-app-capable meta tag |
| Design for portrait and landscape | Design your app to work at 1024 × 768 in landscape and 768 × 1024 in portrait |
| Split view design pattern | A core iPad design pattern, used frequently in native iPad apps |