Author Archive

Transform A Tablet Into An Affordable Kiosk For Your Clients


  

Twenty minutes after unboxing my first iPad, I realized this device’s potential to revolutionize the world of kiosks. Ten years ago, my team and I worked with Honda to develop touchscreen kiosks for its dealerships. Potential buyers could customize their purchase with a few touches of their fingertips. While innovative at the time, these early interactive kiosks didn’t come cheap, running Honda $3,000 to $5,000 per installation. Today, we can create such a kiosk for a fraction of the price.

Which industries are the most likely candidates for tablet kiosks? Four that immediately spring to mind are hotels, restaurants, museums and retailers. Kiosks help streamline information-gathering processes, such as signing up for mailing lists, making reservations, ordering products and services and checking in and out of locations. By automating these processes, the kiosk eliminates the customer’s frustration from waiting in line to speak with a representative and, likewise, frees the employees to focus their energies on higher-level tasks.

Recent consumer-privacy laws put limits on the data that retailers may capture during a transaction. For example, a recent California ruling forbids the process of “reverse appending� by ZIP code. Kiosks give the retailer a second chance to collect customer data, away from the cash register. A privacy-savvy customer might balk at providing their personal information to a cashier at the time of purchase and yet be willing to enter the same information at a kiosk for a contest or discount. Success depends on having an appealing interface that encourages interaction.

Step 1: Hardware Considerations

Obviously, your client will need a tablet for this project. We’ll focus on the iPad here because it is what most of our clients choose, but other platforms such as Kindle Fire could also be used as kiosks. Whichever device you choose, consider how to secure the tablet so that it doesn’t disappear! We developed a device that securely mounts an iPad to a wall, counter or desk (we called it Padloc). Remember that physical security is key; an unsecured tablet is an attractive target for thieves.

iPad mounted in retail setting
iPad securely mounted with a Padloc.

Step 2: Software Considerations

This step is optional. Perhaps your client simply wants to display their website or use a third-party app. In our experience, however, a customized interface can make or break the user experience. We recently worked with a client to develop a simple interface for gathering email addresses in exchange for special offers. Here is the process we followed:

  1. We decided to create a Web app rather than a conventional app, thus bypassing a potentially lengthy and complicated submission and approval process through the App Store.
  2. We picked the device to program on (in this case, the iPad). This was important because, knowing we would be using mobile Safari, with all of the interesting little nuances available for it (through HTML5 and CSS3), we were able to streamline production.
  3. We designed an interface that was visually striking, intuitive and compliant with interface guidelines (including those related to the on-screen keyboard, viewport size and touchscreen conventions). (Apple has some great resources for developers, such as its “Human Interface Guidelines.�)
  4. Because we were working in mobile Safari on the iPad, we were able to program some cool features into the Web app. But these came with restrictions, such as:
    • The features would work only in portrait orientation,
    • The Web app had to be saved to the iPad’s home screen and launch from there,
    • All links in the Web app would open in a new browser tab.
  5. We also made some other tweaks:
    • Hid the browser chrome (URL bar and buttons) using <meta name="apple-mobile-web-app-capable" content="yes" />;
    • Created a bookmark icon for the home screen and linked to it using <link rel="apple-touch-icon" href="/path/to/icon.png" />;
    • Set the color of the status bar (the options are black, gray or black translucent) using <meta name="apple-mobile-web-app-status-bar-style" content="black" />;
    • Made all events “touchâ€� events, as opposed to “hoverâ€� events, to accommodate the limitations of the touchscreen.

Do Clients Really Want This?

What is the current demand for touchscreen tablet kiosks? We recently conducted a survey of our existing and potential clients; 89% indicated that they would use a touchscreen for a kiosk, and the iPad was the tablet of choice for 84% of them.

Survey Results
The results of our survey

Pretty eye-opening, eh? We also asked survey participants to identify the biggest factor affecting their decision to move forward with a kiosk (choosing from 10 options, ranging from price to screen size to operating system to security options). Price was most important for 41% of respondents, with screen size coming next at 18%.

Interestingly, a majority of respondents chose the iPad, yet also mentioned price as their top concern. This suggests that lower-cost entrants to the market (such as the Kindle Fire) are well positioned to gain market share and become viable candidates for these kiosk projects. Our survey shows a strong desire for kiosks, and the price barrier has been removed with these low-cost tablets!

A Bright Future With New Possibilities

In addition, a wide array of hardware is constantly emerging, creating previously unimagined possibilities. Consider Square’s reader. Plug this tiny device into the headphone jack of your iPad, download the app, and you’re ready to take credit-card payments. Now, add a locking mount, install it anywhere in your store or in your trade-show booth, and you’ll have the best-looking, quickest-to-set-up cash register you’ve ever seen!

Padloc in Restaurant setting
iPad mounted with a Square reader to accept payments.

As more advanced devices are introduced to the marketplace, the traditional limitations of kiosks are being surmounted. It’s time for us to think outside the box and imagine a new future for low-cost tablet kiosks!

Conclusion

The clunky, expensive kiosks of yesterday are becoming irrelevant in today’s world of elegant low-cost touchscreen devices. Whether clients want to capture email addresses, enable customers to sign up for events in the store or add interactive elements to their artwork, a touchscreen kiosk can deliver the results they’re looking for. Tablet kiosks can be integrated into any decor smartly and sleekly. Now that affordability is no longer a factor, you can start working with clients to develop apps that bring imagination back to their business solutions.

(al)


© Jason Mark for Smashing Magazine, 2012.


How To Make An eBook





 



 


Making an eBook is easy, regardless of your coding experience. This is good, because 99.9% of your time should be spent on writing and getting your book out there, rather than on technology.

EPUB And Kindle

Any electronic book can be called an eBook, but because over 90% of all eBooks are read on Amazon’s Kindle, Apple’s iOS devices (iPad, iPhone and iPod) and the Barnes & Noble Nook, I’ll focus on the formats for those platforms:

  1. EPUB
    This is an open standard adopted by Apple (iOS), Barnes & Noble (Nook) and many other makers of eBook readers (such as Sony). Thankfully, Amazon has said that its next Kindle will also support EPUB, but the newest version of Kindle doesn’t support it. (Update: Unfortunately, Amazon has decided NOT to support EPUB in the next version of their Kindle.)
  2. Kindle
    This is a proprietary format that Amazon uses for its Kindle, which is a modification of the Mobipocket format.
  3. PDF
    PDF is inherently made for print and doesn’t display well on digital devices. But if you really need to get data out to an iOS or Android device now, then it’s a useful format. We’ll have to wait one more generation for the Kindle to support it. (Update: Kindle DOES support PDF.)

Aside to geeks: The current version of EPUB is based on XHTML 1.1, which was officially proposed in 1999. That was the year when Internet Explorer 5.0 was released and grabbed over 50% of browser market share from Netscape Navigator. This is great because XHTML is an open standard that many developers know; unfortunately, it’s very old.

What Kind Of Book Makes The Best eBook?

EPUB was truly designed to display text, possibly with some inline images. While creating an EPUB illustrated children’s book, comic book, travel book or cookbook is possible, it’s a lot more work and doesn’t work very consistently across platforms. A good rule of thumb is that eBooks are best for books with a lot of words (think New York Times bestseller list).

How a picture book should look and how it looks in EPUB. Novels don’t have this problem because images don’t matter.
eBooks don’t handle pictures well.

When deciding whether your book is a good candidate for an eBook, keep in mind that the “killer feature� of eBooks, surprisingly, is their ability to increase in font size. This means that every book becomes a large-type book, which is why baby-boomers have driven the adoption of digital books over the past few years.

Also keep in mind that more than half of all eBook-reading devices are black and white, which is another reason to steer clear of picture-based books.

These demographics and format limitations will change over time. But for now, my recommendation is to make your first eBook a text-based one.

Aside to geeks: If you’re interested in making a picture book for iOS devices and aren’t afraid of code, check out Elizabeth Castro’s excellent guide on how to code a fixed-layout EPUB file.

Making Your First eBook

The easiest way to make an eBook is to outsource it. A number of services, such as Lulu and Smashwords, will translate your Word document into an EPUB fairly inexpensively. These services have relationships with Amazon and Apple (as well as other digital bookstores) and will not only create your digital eBook but submit it to these bookstores for a small fee. For more information on choosing a service, see Christine Mark’s guide on choosing an EPUB publisher.

If you want to sell your book only in Amazon’s Kindle Store, you can convert your Word file for free by submitting it yourself to Amazon’s Kindle Direct Publishing (KDP). Creating an account is free, and the service is easy to use.

If you’re mostly interested in Apple’s eco-system, then you probably already have a copy of Pages on your machine (if not, you can get it for $20). Pages is Apple’s version of Microsoft Word and has a simple and effective EPUB export option. To create your book, simply make the first page your book’s cover, use section breaks between chapters, and then select FileExportEPUB.

Using Pages to make an EPUB book
In my experience, Pages’ EPUB exporting is rock-solid.

If you don’t have a Mac or want to convert to more formats, your best choice of software is Calibre. Calibre is relatively easy to use and does a good job of converting from many standard formats (including Microsoft Word) to the top eBook formats (EPUB and the Kindle’s Mobipocket format). You can download Calibre for free. Alternatively, if you need to convert only to Kindle, Amazon provides free conversion software called Kindlegen.

Another common choice for building eBooks is InDesign, but I’d recommend that you steer clear from it until you have a few eBooks under your belt. Even though it technically can export to EPUB and Kindle formats, it’s a bit clunky and adds a lot of crud. More importantly, InDesign was built from the ground up to handle print, so it encourages you to think in print metaphors, which don’t always apply to eBooks and which will lead to layout problems. In our experience, programming your own EPUBs by hand is easier. Even still, I don’t recommend it…

Coding By Hand

If everything said above sounds too easy and you’re looking for a challenge, another option is to code your EPUB by hand. This feels like programming in a time warp. EPUB is built on such an outdated version of XHTML that half the time you’ll be reminding yourself that everything in the EPUB must be declared in the manifest file (really?), while the other half of the time you’ll be recalling how you used to program HTML in the ’90s.

If you’re still not convinced and have a pressing desire to learn how to code an EPUB by hand, you have two options:

  1. Grab an EPUB from the Web that doesn’t have any DRM in it. Change the extension from .epub to .zip and unZip it (you may need to use Stuffit Expander if you’re on a Mac). Now you’re free to hack away at the file and see what happens. Keep in mind that every file in the EPUB must be in the manifest (package.opf). There are a couple of books you can pick apart to get started (including my best-selling children’s book, which you can get for free on my website or buy from the Apple bookstore to show your love).
  2. Check out “EPUB Straight to the Point� by Elizabeth Castro, and she’ll walk you through it.


The typical structure of an EPUB file.

The container.xml file, MIME type, and folder structure are pretty standard for all books. Images can be in PNG, JPEG, GIF or SVG format. I usually stick with PNG, with JPEG as a fall-back.

The epb.ncx file is the table of contents and is pretty straightforward.

The epb.opf file is the manifest where you set the meta data (title, author, ISBN, etc.), but it’s also where every other file in the EPUB is declared. Every image, HTML or CSS file must be listed here. It’s a pain in the butt and one reason why I personally avoid hand-coding EPUB if possible.

The CSS is pretty much what you’d expect, although a very limited subset.

The HTML is also very straightforward. Below is a sample of the HTML that Apple Pages spit out for my book. As you can see, it’s not very pretty (<div class="s6"> instead of a simple <h1>), but it’s functional and easy to understand.

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE html

PUBLIC "-//W3C//DTD XHTML 1.1//EN"

"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>1 Moving Day | Ghost Hunters - Book 1 The Haunted House</title>

<link rel="stylesheet" href="css/book.css" type="text/css"/>

<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8"/><meta name="EPB-UUID" content="3B0A6B89-F890-4843-AA2A-01C27CE8D573"/>

</head>

<body>

<div style="white-space:pre-wrap">

<div>CHAPTER 1</div>

<div>Samantha and Dylan looked eagerly out the car window. Today was the day that they were moving to their new house. They were both excited, but sometimes a look of worry would cross Sam’s face.</div>

</div>

</body>

</html>

If you are creating your own EPUB, be sure to validate it with Threepress’ validator, and consider using Calibre to convert your EPUB to a Kindle-friendly format.

The Future Of EPUB

EPUB 3.0 holds a lot of promise and includes the following changes (many of which Apple has already adopted):

  • Support for HTML5 (yay!) and CSS 2.1;
  • Various structural changes to file names and locations;
  • Support for embedded fonts, audio and video, as well as media overlays and triggers and scripts.

Unfortunately, EPUB 3.0 doesn’t support illustrated books, so we can expect to see some fragmentation as Apple and other vendors innovate around these limitations.


Olivia was one of the first fixed-layout EPUB books released by Apple. Also pictured is the bestselling fixed-layout EPUB book The Girl Who Wouldn’t Wash Her Hands.

With the next version of Kindle supporting EPUB, we’ll see over the next year or two whether we wind up with an “Apple EPUB� and an “Amazon EPUB,� or a “pure� EPUB format. Ultimately, the answer will depend on how quickly the International Digital Publishing Forum (IDPF) can finalize its standards.

Of course, all of this speculation about the future is somewhat theoretical. If you have a book to publish now, my suggestion is don’t worry about the future; just dive right in and make it. And let me know in the comments how it turned out and what worked best for you.

Other Resources

You may be interested in the following articles and related resources:

(al)


© Jason Mark for Smashing Magazine, 2011.


  •   
  • Copyright © 1996-2010 BlogmyQuery - BMQ. All rights reserved.
    iDream theme by Templates Next | Powered by WordPress