Designing Web Apps for the iPad

Aug 12 2010 by Stephen Vescio | 49 Comments

What’s stopping you from creating a functional app/website for the iPad? My answer was the Objective-C coding language, time constraints and having to deal with the infamous Apple App Store.

But if you’re a web designer, like me, and you think that designing for the iPad is outside the realm of possibility — think again.

Love it or hate it, the iPad is an incredible medium. There is no denying that the touch form factor will have an incredible impact on how designers approach user interaction. So get ahead of the game and start experimenting with iPad web apps now.

In this article, I will guide you through my creative process in which I developed a simple but useful iPad web app in just one weekend: BracketSlash.com.

I do not consider myself a professional iPad app developer, so if you feel a little apprehensive, let my experience be an inspiration to you.

Why Did I Create a Web App for the iPad?

I created a web-based iPad app mainly for my own personal use. I got fed up with the App Store and all the paid apps that didn’t do the trick.

My particular project is a news aggregating app that makes it easy to take 5 minutes every couple hours and keep up-to-date on news stories from a variety of sources.

This helps because I am in business/finance and it takes too long to go through a static newspaper or browse multiple websites.

It turned out better than I thought, so I figure it may be of use to others. I made a landing page at www.bracketslash.com allowing anyone with an iPad to use it 100% free.

Again, I do not consider myself a professional and I truly believe any web/graphic designer can learn from my experiences to create web apps better than most of the ones you find in the App Store currently.

Start with a Functional Goal

Don’t just say "I’m going to create an iPad app" without thinking about how your app will be valuable to the end-user. Even iPad games are targeted towards certain audiences.

Some questions to ask yourself to tease out the functional goal of your iPad app include:

  • What do you want your iPad app to accomplish?
  • Who will use your iPad app?
  • What needs are you trying to fulfill for your users?

The one thing you have to remember is that it is not possible to create the "app to end all apps." Your app cannot be everything to everyone. Think in simple terms and execute your idea flawlessly; you will be more successful this way.

Draw It Out!

If you draw things out by hand, great. If you use a graphics tablet, even better. If you go straight to Photoshop, kudos to you.

Whatever your workflow is, always get your ideas down first.

Personally I go straight into a design software like Photoshop. I use geometric shapes (such as the custom shape tools) to get my ideas down and then I add in details progressively.

My design evolved a number of times — and expect yours to do the same. Always refer back to your functional goal, thinking about how the end-user will be interacting with your app.

The iPad is a highly visual medium so spend time making it pretty. What’s great about designing for that iPad is you don’t have to worry about cross-browser or cross-device compatibility. If it works on your iPad, it will probably work on everyone else’s.

Here are some quick aesthetical tips for the iPad:

  • Create all your designs at 768px x 1024px — the native resolution of the iPad
  • Remember that the iPad displays both in portrait and landscape mode
  • Always note where you want scrolling to occur
  • Don’t be afraid to use native iPad GUI elements (Find the PSD here)

A Cautionary Note Regarding iPad Resolution

One thing I noticed is that the native screen resolution (768 x 1024) appears smaller on your iPad than on your computer monitor. So keep in mind that the iPad resolution will look bigger on your computer monitor.

This presents some issues with sizing and you will quickly find experimenting with typography to be a pain in the rear.

My suggestion is to save your mock design images and open them up on your iPad photo viewer to get a feel for the layout and typography. This is not the most elegant solution, but it worked for me.

Know the Limitations

Never set boundaries when you’re brainstorming. That being said, you will be more productive in your endeavor if you have an idea of what is and what is not possible when developing for the iPad. I got frustrated many times, not realizing some of the limitations.

For your convenience, I have outlined a few of the main limitations below.

No Flash

I think this one is fairly obvious. With all the uproar recently, you should know by now that the iPad cannot display Flash objects. I don’t necessarily agree with this path, but the simple solution is to just not use it.

You can accomplish similar feats with HTML5 and CSS3.

No Mouse Cursor

This means that mouse events, such as mouseover and hover events, are not possible.

You may be able to find some workaround for this, but conveying how they work to your users might be difficult.

Scrollbars Don’t Act as Expected

Scrollbars are not displayed for scrollable divs with overflowing content.

Frames also have height/width issues.

In addition, scrolling requires two-finger gestures. (We’ll discuss this more fully later down the article.)

No CSS Fixed Positioning

HTML elements with the position:fixed CSS property will not show up correctly and are frustrating to control.

There are some quick fixes available for this (more on this later on).

Use Your Fingers

This is the fun part. The #1 difference between browsing on your computer or laptop and browsing on your iPad is that you get to use your fingers. There are ways to optimize your site for iPad use with a few simple yet powerful solutions.

Redirect Users Based on Device/Browser

You can add a few lines of JavaScript in your page’s <head> tags to redirect the user to your app if they are visiting your site with an iPad.

The JS code block below checks to see if the user agent is an iPad. If it is an iPad, the user is redirected to the app page.

<script type="text/javascript"> 
  if ( (navigator.userAgent.indexOf('iPad') != -1) ) {
    document.location = "http://www.bracketslash.com/app.php";
  }
</script>

Set the Size of the Viewport

The viewport is the rectangular area that determines how content is laid out and where text wraps on the page when viewed on iPad.

Your computer and iPad viewports are slightly different. Safari on the iPad has no windows, scrollbars, or resize buttons. The user browses with their fingers. Most of the touch gestures can be controlled with some manipulation of code.

To set the dimensions of the viewport, add the following meta markup inside your <head> tags:

<meta name="viewport" content="width=device-width" />

Different Style Sheets for Different Orientations

To use different style sheets for different orientations (landscape mode or portrait mode), just add the following media query in the <head> tags of your web page.

<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">

Note: This is not a necessary component and can be kind of distracting for the user if the two style sheets are significantly different.

Control Your Touch Scrolling with iScroll

This is easily the single most useful bit of code that can help you control your web app. Created by Matteo Spinelli, iScroll is a project developed because the WebKit web browser engine (which is used on the iPhone, iPod, iPad, Android, and Palm Pre) does not provide a native way to scroll content inside a fixed width/height element.

This unfortunate situation prevents any web app to have a header and/or footer with a position:absolute CSS property, and a scrolling central area for contents.

The iScroll code base is extremely easy to work with. If you like iScroll, you may also be akin to these jQuery plugins: jQuery Swipe and JQTouch.

Use the "Add to Home Screen" Button

In the Apple Safari web browser, the user has the option to add your app to their Home screen. This simply adds an icon similar to how a native app looks. To customize this icon, you can link it in the <head> tags using the following code. To be safe, make sure your icon is at least 72pxx72px.

<link rel="apple-touch-icon" href="http://www.yoursite.com/your-apple-touch-icon.png" />

Take Advantage of HTML5 and CSS3

Many high-profile websites have adapted and redesigned their sites, calling themselves "iPad Ready."

In reality, the majority of these sites have simply rearranged their content to fit the iPad’s resolution and aspect ratio.

Personally, I don’t get the point. HTML5/CSS3 is the future and aims to improve the web experience for everyone.

Here are some simple things you can do to take advantage of the emerging standards:

  • Use CSS3 gradients, font shadows, rounded boxes and borders — these are especially useful for menus and simple website designs.
  • If you want to show videos, use an HTML5 video player instead of a Flash one (which obviously won’t work).
  • Use HTML5 to create offline apps and store data offline.
  • Tutorials for these kinds of functionalities are everywhere, and I made use of them when developing my iPad web app. Google them. Get creative.

Keep Moving Forward

Don’t get held back by irrelevant details. If one of your design functions or ideas is not working as intended, find alternate solutions to the problem.

Don’t try to stick to your plan so precisely that you lose sight of your functional goals.

If things don’t work as planned, find a creative alternative and move on. I am an incredibly meticulous designer, which can be both a good and a bad thing.

I found that not everything I planned worked, and I learned that I have to just let things go, figure out workarounds, and learn from my mistakes for my future iPad apps.

Spread Awareness

One of the major barriers for web apps is that they are not as popular as native apps.

There is no Apple App Store equivalents to help you get recognized — especially if you are creating something commercial.

Getting your app out there is infinitely more difficult if you are a no-name developer (like myself, *haha*).

Let as many people know your web app exists. If it’s good, it should do well.

Native iPad Apps versus iPad Web Apps

What is the difference between apps in the App Store and websites created specifically for the iPad?

Many argue that web apps are the future and will quickly outperform their native counterparts; this is because the openness of the web is more appealing than closed platforms.

I have noted some simple comparisons below to shed light on how powerful web apps can be.

Native iPad Apps

  • Native Apps are faster: uses more of the iPad’s resources and capabilities.
  • No need to search the web: one-stop shopping on the App Store.
  • Users feel more comfortable: They know the app was made specifically for their device, not adapted using HTML5/CSS3.
  • Easier to turn on and off: Apps are made to turn on/off without interruption or loss of data.
  • More difficult to develop: requires knowledge of Objective-C and use of Apple SDK.
  • Closed Platform: difficult to adapt for other devices like the Android platform.

iPad Web Apps

  • Emerging coding standards: HTML5, CSS3, JavaScript are bringing incredible client-side functionality to the web; especially with local/offline storage.
  • Tailor the site for any browser: switch between style sheets or redirect pages depending on which device or browser your user is operating. It is possible to make your app universal.
  • Easy to develop: Use HTML, CSS and JavaScript to create iPad web apps instead of learning new languages. These are skills you already have.
  • Steve Jobs can’t censor your web app: The web is an open platform — meaning that you are in control. No waiting to get approved by the App Store.
  • Small market, not enough support: web apps need strength in numbers which means not only attracting users but developers as well.

Related Content

About the Author

Stephen Vescio is a 20 year-old business student and freelance designer. You can visit his personal site at stephenvescio.com. Check out his free iPad app at BracketSlash.com.

49 Comments

Andy Greener

August 12th, 2010

Nice article Stephen – loads of good advice and pointers.

I agree that web designers have a LOT of transferable skills and knowledge for designing and developing iPad and iPhone apps.

Thanks for sharing, nice one!

app developer

August 12th, 2010

Hi Stephen
I can’t believe you’re giving away all the info!
;)
Good post and I’m off to look at your app, now…

beautyboyXoxO

August 12th, 2010

Wow, cool article Stephen!
Very helpful and informative. Steve Jobs is gonna find you lol
btw, an android developement tutorial would be cool too :)

Sylvain

August 12th, 2010

Thanks for this post.
iPads and iPhones not supporting Flash is quite a hassle. We have Flash-based Gantt charts in our project management tool and we can’t manage to show them properly on iPads. Offering non-Flash charts instead requires lots of research, testing and all that stuff. We are not sure whether we’ll fully support iPads or not at this moment, mainly because of that.

Thanks again for sharing this post.

Sander

August 12th, 2010

Hi Stephen,

Nice article! There already is some kind of “webapp”-store:
http://www.openappmkt.com/

Currently it is just for iPhone, but maybe you can persuade them to also support iPad webapps.

I really think this will be the future of webapps. Since android is growing massively and the tablet market will explode soon, being able to easily adjust your application to other platforms will be the key for application developpers. The only downside is that it is much more work to make people pay for your app if you want to. People would need paypal, creditcards or something like that in stead of the easy appstore one-click buying.

densePIXEL

August 12th, 2010

Great article, will check out the app as well. Have you looked into making it a native app, and how difficult it is?

Leicester

August 12th, 2010

Thanks for posting, I’m just starting to design for the iphone so i guess the ipad will be the next step for me..

Brad

August 12th, 2010

Great article. I don’t develop iPhone apps but I do develop websites/apps and now I not only optimize for different browsers but for devices as well. This is a great list of items to consider for all web designers as the tablet world is taking over!

Amber Weinberg

August 12th, 2010

I’ve been learning how to do iPhone apps and am looking forward to jumping into the iPad as well. Is there much of a difference between the two coding wise?

Michael

August 13th, 2010

Nice article, what kind of a background do you have in design/web development?

Randy

August 13th, 2010

Very well written and informative.

Chris

August 13th, 2010

I started to develop a gaming app for myself last winter and then realized that the flowchart was going to get outrageous.

Did you develop a flowchart so you understood the paths users would take?

This article has me thinking about trying this again…

Stephen

August 13th, 2010

Thanks for all the feedback!

@densePIXEL: “Have you looked into making it a native app, and how difficult it is?”
- From what I know, native apps for the iPhone and iPad require understanding of the objective-c coding language. A language I am not familiar with. I was just experimenting, applying my existing webdesign skills towards a new medium.

@Amber: “Is there much of a difference between the two coding wise?”
- If you know Objective-C, I don’t think it will be too difficult to go from the iPhone to iPad. If you are trying to convert a web app, it’s as simple as adding the redirect code-snippet I suggest in the article or linking alternative style sheets depending on what device the user is on.

@Michael: “what kind of a background do you have in design/web development?”
- No formal background at all, just a lot of reading and experimenting.

@Chris: “Did you develop a flowchart so you understood the paths users would take?”
- Yes, I drew out how the user would interact with the app. Given the complexity of a game, I would strongly suggest that you give yourself a visual. Break it down into pieces if it makes it easier. No one is forcing you to create one giant complicated chart. Whatever works for you.

Designerist

August 14th, 2010

Hi Stephen
Thanks a lot for sharing your knowledge!
The article is full of very useful information.

Javier Wasserman

August 14th, 2010

really usefull! thanks

harly

August 14th, 2010

Web Apps don’t really work like this; HTML, CSS, and the standard javascript libraries really just don’t provide any of this functionality. It looks like Apple has something up their sleeves to make iPad Web Apps a bit more.. app-like.

dean martin

August 15th, 2010

Very good and useful post, im just starting the web-app-ipad-ness, and was very useful :D

Glenn

August 15th, 2010

Great article!

Very useful if I ever need to develop web apps instead of native apps.
I’d just like to add one thing;

If tested your web app in several other browsers on the iPad and it doesn’t work great in all of them. It’s essential to check the size of the browser to see what resolutions you have to work with.

Liam

August 16th, 2010

Great article.

For those people who haven’t discovered it yet (it took me a while), you can set the iPad simulator to 50% via window>scale.

Also, I have needed to add {display:none} to the landscape and portrait CSS files (ie. hide the other one).

Kyle Hayes

August 16th, 2010

Apple does provide an area for showcasing webapps: http://www.apple.com/webapps/

Not as popular as the App store of course.

Michelle Blum

August 16th, 2010

Great article!! iPad web apps rock my socks. I’m so obsessed actually that I made http://ipad-webapps.com to list the best web apps for the awesome device. I will definitely add bracketSlash to the ongoing list. And if anyone out there has made or come across an iPad web app, please shoot me a message.

Leo Balter

August 17th, 2010

Great Article. I´m interested in developing apps for iPad, but web apps everytime looks more like “State of the Art”.

Nick

August 17th, 2010

NICE job on this! We just released ours a couple weeks ago as well. Visit on your iPad

http://spilledmilkdesigns.com

Cre8ive Commando

August 18th, 2010

Nice tips on “designing” for the iPad, looking forward to the next article; Tips on “developing” for the iPad. :-)

Jean-Philippe

August 18th, 2010

Thanks Stephen, nice article.

More on this here: http://kaskooye.over-blog.com
See demo video and download source code.

Ricardo

August 23rd, 2010

Why can’t we use it on a desktop browser too? Where is the device independence of the web? :/

Edward Sanchez

August 23rd, 2010

I think it’s worth checking out frameworks like Sencha Touch (www.sencha.com) or JQTouch or the upcoming JQuery Mobile. Would be nice if the article was updated to talk about these as they allow you to create native-like apps on webkit quite easily!

Sebastian

August 24th, 2010

Thanks for the great tips! Just recently we converted our web app at http://www.idonext.com to work better on the iPad. The challenges were the far slower Javascript performance and the completely different way of handling pointer events for drag & drop. And a native iPad app is already in development for a better user experience.

Frederick Weiner

August 24th, 2010

Another issue has to do with the listbox. It is converted to a dropdown and truncated text that is too long for the dropdown. Do you know any way around this limitation?

Connor Crosby

August 24th, 2010

Very nice article. Thank you for sharing. I was wondering how to redirect to an iPad friendly site. Thanks!

Gene

August 28th, 2010

Stephen, excellent tips and a nice app. Wondering if you have any thoughts on using a framework vs. rolling your own code.

Might contain a link to this post in one of my future blog posts (already tweeted it).. keep up the good work!

Hoodgrown

September 15th, 2010

Hello,
I’m developing web based content that I want only people with an ipad (and maybe Galaxy Tab) down the line to see.

Can u post a modified script that bounces someone to a different URL if THEY’RE NOT USING AN IPAD to view the site?

Mohamed

December 24th, 2010

Great iPad app! You should also consider advertising on the Open App Market @ http://www.openappmkt.com

Omar

January 24th, 2011

Hi, good article! I have been wanting to create an App for my website e-newsdigest.com for long now. Basically it will show offline contents after its connected to the internet. Hope to code that soon! thanks.

Dhawan

February 12th, 2011

I wanted to know if there was a way to make a website offline….so that it can work on ipad as an app or something like dat…..i want my inventory on my website to be acessible on my ipad nd i can browse through all categories and prices….nd it should be OFFLINE…i mean it should work without net connection also….plss help….
Thank you.

Jose

March 25th, 2011

Very nice, now i know the limitations of iPad

Marco Vega

April 20th, 2011

This is simply awesome, I was looking at Xcode and I don’t have the time to learn it. I’ll make the app I need in HTML and that’s it.

R083r7

May 1st, 2011

Thanks for a great review of the essentials. Was very helpful.

Archer

May 16th, 2011

BracketSlash appears to be down now.

Colin Boyd

June 22nd, 2011

I found when I get started that creating programming for the iPhone and iPad was not as hard as I thought. Reading tutorials like the one above, a couple of books from Amazon, starting with the “Dummies Book” and a video tutorial that I purchased from InfiniteSkills I quickly built my first app, granted it was not a programming master piece, but it was a start. The problem most people have is thinking the process is harder than it really is.

The resources that I used for anyone interested where:

http://www.amazon.com/iPad-Application-Development-Dummies-Goldstein/dp/0470920505/ref=sr_1_3?ie=UTF8&qid=1308743728&sr=8-3

http://www.amazon.com/Complete-Idiots-Guide-iPhone-Development/dp/161564010X/ref=sr_1_6?ie=UTF8&qid=1308743753&sr=8-6

http://www.infiniteskills.com/training/learning_to_build_apps_for_iphone_ipad.html

jasper

July 10th, 2011

I am looking to develop a web-app which i can use to keep inventory of a video collection. I need it to be able to work seamlessly from the back-end to the front. I am looking for it to be able to be run in an in-store server and will be running on multiple ipads. I would like it to be able to send weekly reports of what is in store and what has been removed.

On the display of the ipad i want something in between a plex and netflix feel. Simple coverflow with information about each video and if it is in stock or not. I would also like to be able to have catogories which include recently updated, top tens, genres, etc. I also would like a search option on each page which will be able to search tags (ex. Actors, Directors, Genres, etc.). There needs to be a shopping cart or queue which people would be able to mark videos wanted. Easy clearing option and checkout which would have nothing but the ability to remove inventory numbers and update to the in-store server. The video information can be input manually only on the server.

does web-apps have this capability?
im looking into sencha touch right now

thanks

Will

September 12th, 2011

Great example, thanks fella. Inspired me to focus much more time to tablet based web apps. I really do believe its the way to go bypassing the app stores, iTunes and developer fees. I’ve also been creating some apps for a client using local storage. I really hope the sqlite database becomes an official standard in the near future, however that is up for debate!

Baylock

September 19th, 2011

Thank you for the article.
One thing that bugs me regarding the ipad webapps Vs native apps is the fullscreen feature.
Is there a way to get a fullscreen app without the need of setting a homescreen icon first?
The way it is right now, the webapp is always discovered with the navigation bar first and, if (and only if) the user decides to bookmark it on its homescreen will it appear fullscreen later.
I wonder how we could achieve one of those two things:
1) having the app fullscreen directly (I doubt it would be possible).
2) having the ability to download (from a website) the icon to the homescreen and THEN open the webapp for the first time from that icon.
Any idea?
Thank you.

anonymous

September 21st, 2011

Very informative!
Do you know how to how the camera on ipad2 can be utilized in your webapp?

Girija

October 4th, 2011

Hi,, Nice Article…..

digitalrgorilla

October 19th, 2011

This is a great article. Lots of very useful info especially about what to look out for and knowing realistic boundaries.

I did check out the Web App. Just a few of things though. Health section only shows if you go to it in app mode without the address bar. Health section does not show in landscape mode. Entertainment section seems to have a second row overlapping the first row slightly.

A nice tweak would be to get the headlines to snap into place when scrolling left to right/right to left.

Overall; Nice.

dah1202

October 19th, 2011

Informative and motivating article. I’m working on iPad variants of my business’ web apps.

Pankaj

October 21st, 2011

Given the popularity of iPad and other tablets, no software player can keep away from an iPad interface for long.

Roy

December 9th, 2011

Thanks!!! I too have been frustrated by what’s available in the app store… I have been looking for an app to perform a particular function, one that the iPad is particularly suited for, but no one has yet created. It’s amazing to me that of the 4500 apps catagorized as photo/video and 5400 apps catagorized as business in the app store not a single one performs the basic tasks I and many other field photographers would like. It never occurred to me to create a web app! Thanks!

Leave a Comment

Subscribe to the comments on this article.