Designing Web Apps for the iPad in detailent

What’s preventing you from making a functional app/website for the iPad? My answer was the Objective-C coding language, time imperatives and managing the notorious Apple App Store.

In this article, I will show you through my imaginative procedure for Web iPad App UI Design and Development.

For what reason Did I Create a Web App for the iPad?

I made a web-based iPad app for the most part for my very own utilization. I got tired of the App Store and all the paid apps that didn’t work.

My specific project is news collecting app that makes it simple to take 5 minutes each couple hours and stay up with the latest on news stories from an assortment of sources.

This aides because I am good to go/money and it takes too long even to consider going through a static newspaper or peruse various websites.

It turned out superior to anything I expected, so I figure it might be useful to other people. I made a landing page at www.bracketslash.com enabling anybody with an iPad to utilize it 100% free.

Once more, I don’t view myself as a professional and I trust any web/visual designer can gain from my encounters to make web apps superior to anything the majority of the ones you find in the App Store as of now.

Begin with a Functional Goal

Don’t merely say “I will make an iPad app” without contemplating how your app will be relevant to the end-client. Indeed, even iPad recreations are targeted towards specific groups of onlookers.

A few things to ask yourself to coax out the functional objective of your iPad app include:

  • What do you need your iPad app to achieve?
  • Who will utilize your iPad app?
  • What needs would you say you are attempting to satisfy your clients?

The one thing you need to recall is that it is absurd to expect to make the “app to end all apps.” Your app can’t be everything to everybody. Think in straightforward terms and execute your thought immaculately; you will be progressively effective along these lines.

Coax It Out!

If you coax things out by hand, amazing if you utilize a graphics tablet, shockingly better. If you go directly to Photoshop, praise to you.

Whatever your work process is, dependably get your thoughts down first.

By and by I go straight into a design programming like Photoshop. I utilize geometric shapes, (for example, the custom shape tools) to get my thoughts down and afterward, I include subtleties dynamically.

My design advanced on various occasions — and expect yours to do likewise. Continuously allude back to your functional objective, contemplating how the end-client will interface with your app.

The iPad is a very visual medium so invest energy making it lovely. What’s extraordinary about designing for that iPad is you don’t need to stress over cross-program or cross-device similarity. If it deals with your iPad, it will most likely work on everybody else’s.

Here are some snappy aesthetical tips for the iPad:

  • Make every one of your designs at 768px x 1024px — the local resolution of the iPad
  • Keep in mind that the iPad shows both in picture and scene mode.
  • Continuously note where you need looking to happen.
  • Try not to be reluctant to utilize local iPad GUI components

A Cautionary Note Regarding iPad Resolution

One thing I saw is that the local screen resolution (768 x 1024) appears little on your iPad than on your computer monitor. So remember that the iPad resolution will look greater on your computer monitor.

This gives a few issues measuring, and you will rapidly observe exploring different avenues regarding typography to be agony in the back.

I propose to spare your fake design images and open them up on your iPad photograph watcher to figure out the format and typography. This isn’t the most comfortable arrangement, but it worked for me.

Know the Limitations

You have never defined limits when you’re conceptualizing. That being stated, you will be increasingly beneficial in your undertaking if you have a thought of what is and what is beyond the realm of imagination when producing for the iPad. I got disappointed commonly, not understanding a portion of the limitations.

For your benefit, I have plotted a couple of the primary limitations underneath.

No Flash
I think this one is genuinely self-evident. With all the hullabaloo as of late, you should know at this point the iPad can’t show Flash articles. I don’t concur with this way, but the straightforward arrangement is to just not utilize it.

You can achieve similar accomplishments with HTML5 and CSS3.

No Mouse Cursor
This implies mouse occasions, for example, mouseover and float occasions, are impractical. You might most likely discover some workaround for this, but passing on how they work to your clients may be difficult.

Further more:

  • Scrollbars Don’t Act surprisingly.
  • Scrollbars are not shown for scrollable divs with flooding content.
  • Edges likewise have stature/width issues.
  • Moreover, looking over requires two-finger signals. (We’ll examine this all the more completely later down the article.)
  • No CSS Fixed Positioning
  • HTML components with the position: fixed CSS property won’t show up conclusively and are baffling to control.
  • There are some handy solutions accessible for this (more on this later on).

Utilize Your Fingers
This is the fun part. The #1 difference between perusing on your computer or PC and perusing on your iPad is that you get the opportunity to utilize your fingers. There are approaches to advance your site for iPad users with a couple of straightforward yet incredible arrangements.

Divert Users Based on Device/Browser
You can include a couple of lines of JavaScript in your page’s <head> labels to divert the client to your app if they are visiting your site with an iPad.

The JS code block beneath verifies whether the client specialist is an iPad. If it is an iPad, the client is diverted to the app page.

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

Share your opinion

About the author

Author avatar
This post is written by a guest writer. We give everyone the opportunity to share their stories with us. In return they're allowed to place a little intro about themselves at the beginning of their post. These little pieces with information often contain some links with info about the writer and their works. If you're interested in writing for us, don't hesitate to contact us and we will see what we can do for you!

Follow our latest hunts

Facebook Twitter Google+ Instagram Pinterest

Loading...