1

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

Improve this question
2
  • "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?"
    – Zelda
    Commented May 23, 2012 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é
    Commented May 23, 2012 at 12:58

5 Answers 5

Reset to default
2

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.

Improve this answer
1

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?

Improve this answer
1

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.

Improve this answer
1
  • 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
    Commented May 25, 2012 at 17:16
1

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.

Improve this answer
0

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

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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