Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

I am creating an iPad App for my business. Can I use the same skeleton for a web app (with a width of less than 1024)? I see many web apps which look like iPad Apps, so that a single layout can be used on both devices.

I know we can use different behaviors for iPad/Web Apps. Are some features and components available for one but not the other?

Alternatively, is it better to use a different skeleton for a Web App?

Example Layout

share|improve this question
    
"Is it better..." is a different question than "Can I reasonably...". Of course it's better to optimize everything to it's exact use case, but I think the more interesting question here is "Can this work?" –  Ben Brocka May 23 '12 at 12:36
3  
I think this question is asked in such a broad way, it is impossible to answer with something more informative than "It depends..." –  André May 23 '12 at 12:58

5 Answers 5

An iPad app translates well into a desktop web app, though not without its trade-offs.

An application or web page designed for a touch-screen device has one especially important attribute: Finger-sized clickable elements.

When developing specifically for a desktop browser, you can create small buttons and links that are easily clicked with a mouse but make an efficient use of space with minimal need for the user to drag their cursor around. You can also use the hover state to show extra information - of course you can still do this, it just won't work on a touchscreen device.

In saying that, if you want your application accessible to tablets, using an iPad-like layout is a better choice than having only a desktop optimised site.

share|improve this answer

There are three questions to be answered:

Can I use a single layout for both an iPad App and a Web App? Yes, you can.

Are some features and components available for one but not the other? Yes, there are. @Tass already gave you some clues

Is it better to use a different skeleton for a Web App? Yes, it’s better to optimize a product to its respective use case, as pointed by @Ben Brocka

As a developer I would try to answer these questions too. Can you explore all the resources and possibilities on your web app using an iPad skeleton? Will you be able to deliver the best UX for your web app using iPad skeleton? Is there any disadvantage for the user?

share|improve this answer

One of the new trends in Web development is to take a Mobile First mindset. Here is one such article: http://www.lukew.com/ff/entry.asp?933

If you design your site with a liquid layout, it should scale nicely from the iPad up. At my company we build web applications and because we used a mobile first mindset to design the app, it only took us 3 weeks to get our app ready for the iPad. This allows us to have something that looks great on the iPad as well as an HDTV.

share|improve this answer
1  
It should be pointed out that a liquid layout also requires far more CPU to render than a simpler one; this means that CPU induced rendering delays are far higher, and can create a poor experience on a lower end device such as an iPhone 3 (very common now that it comes free with your plan) or lower end or older Android device. –  Myrddin Emrys May 25 '12 at 17:16

You may want to try out a grid system for the web app, like the 1140px CSS Grid System or the 960 Grid System. I'm using 1140px. The nice thing is that elements resize themselves, and drop down below depending on how much space is available.

share|improve this answer

That's how Apple's iCloud (as well as its predecessor MobileMe) web apps work—they're stylistically iPad apps but loaded in the web browser.

For example, here's the iCloud web mail app:

Screenshot of the iCloud web mail app

Image taken from GrindGadget

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.