Fotos und mehr ...

WebApps for iPads

Is it really necessary to develop native apps in objective C and go through the app-store procedure to publish it? I was interested to learn how difficult it would be to develop a web-app that feels like a native app on an iPad.

And here is my first result: My blog in a special iPad layout (of cause best viewed with an iPad, but it works also - mostly - in desktop Safari and FireFox).

That's what it looks like (click on an images to enlarge it):

img_0006-190.png img_0008-190.png img_0007-190.png

This layout works completely without JavaScript. And it does not contain any layout graphics. It's just CSS3.
The WebApp has a fixed header and footer and a scrollable content and navigation area. Just like most typical iPad Apps.

Navigation changes when you switch from portrait to landscape.
In landscape mode you see a left hand navigation. In portrait mode you get a navigation button on the top and the navigation is shown as a popup when you click this button.
In addition I moved the normal "sidebar" of my blog to another popup on the right.

If you open this special site layout in desktop Safari or FireFox you can simulate landscape and portrait mode by resizing the browser window: If the width of the window is smaller that its height, the layout switches to portrait mode.

No JavaScript

Well - that's not completely true. As I mentioned in my last post, mobile safari is not able to scroll in div's with overflow=auto|scroll|hidden. I use a small piece of script to emulate the scrolling. But the layout itself - including the popup areas - don't use any script.

Here is how it works:

Different CSS for portrait an landscape

Just use the following code in the HTML head:

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

The second stylesheet will only be used if the ipad is in portrait mode.
If your left hand navigation is contained in a <div id="nav">...</div> the basic.css has #nav{display:block} while protrait.css says #nav{display:none}. That's it.

Popup's without JavaScript

To show one of the popup's I could use a simple onclick-script on the buttons to show/hide the corresponding popup-area. In addition you need a script for an window-click to hide the popup.

However I used a method that works without such a script.
Here is the code:

<button onclick="this.focus()">Navigation
   <div id="nav">...</div>

The navigation div is contained inside the button HTML code.

I used the following simple CSS to enable the popup:

button:hover #nav{display:block}

Because the button does not get the "hover" automatically on click  (and I have no idea why this is the case) I do this manually by adding onclick="this.focus()".

(UPDATE: changed CSS code from :focus to :hover because we get problems with links inside the popup otherwise)

No Grafics

CSS3 has excellent features to create gradients and I used them for the header and footer as well as for the popup's. Even the small arrow in the popup's is done in CSS by "transforming" a <div> using -webkit-transform: rotate(45deg).

Native Apps vs. WebApps?

There are plenty of apps in the app store that simply can't be implemented in a browser.

On the other hand there are also many apps in the app store that could easily be implemented just using CSS/JavaScript and running in the iPad browser. All RSS readers I have seen so far are examples for this.
The advantages: no installation, no individual updates and Apple will not review your app.

Bitte geben Sie hier Ihren Kommentar ein:

Verwende Markdown Syntax

Powered By

  • OpenWGA Blogs 2.4.1 Build 131
    Running on:
    womodo CMS Server 7.5.3 Maintenance Release (Build 669)