Last Updated on Friday, 27 August 2010 12:32 Written by MauiDeveloper Thursday, 6 May 2010 05:14

David Appleyard on May 6th
A few months ago, we published a set of resources for iPhone developers, covering a huge range of different types of resource. From podcasts and conferences to design kits and frameworks.

Today we’re doing something similar, but specifically with designing websites for the iPad in mind. It won’t be quite as extensive (let’s face it, the iPad is still fairly new!), but should offer a brilliant set of resources for developing a browser-based site or application for Apple’s latest gadget.

Getting Started

The main focus of this article relates to designing websites for the iPad. The entry barrier to this type of development is virtually non-existant.

That said, if you’re wanting to develop a native application, there’s a considerably more complex process. As with the iPhone, you’ll need to enrol on the iPhone Developer Program. This gives you full access to all Apple’s resources, the SDK, and the latest beta builds of the software for your iPhone and iPad.

You can either register for free if you’d like just the basic access to Apple’s SDK, or pay $99 per year to have the ability to test applications on your iPad itself, and submit them to the App Store.

Once you’ve done one of the above, you’re ready to get started! Download the SDK, and take a look at our iPhone developer tookbox for a whole range of resources that are still perfectly suited to iPad development.

Apple’s Resources

Though focused primarily on native app development, Apple do have a few great documents that relate to web design – or interface design in general. These make for a good initial port of call:

• Preparing Your Web Content for iPad – This article talks through details of the user agent code for Mobile Safari on the iPad, why you should use W3C standard web technologies instead of plug-ins (Flash is, of course, not supported), and how you should modify CSS code previously targeting the iPhone. There are also a few useful tips relating to the challenges of developing for a touch device – there’s no hover or mouse-over state, for instance.
• Human Interface Guidelines – This is a mammoth document, and essentially outlines Apple’s “best practices” for designing iPad interfaces. Although primarily aimed at native apps, if you can implement these standards in your web application you’ll be on the road to offering a great experience for the user.
• Safari Web Content Guide – A guide on how to ensure your web design works well in Safari (whether on the desktop, iPhone, or iPad), and tips on extra events and handlers you can use with the touch interface.

Interface and Wireframing Design Kits

One of the most important things to consider when designing for the iPad is how you’re going to structure the interface of your application. It’s all about touch, and it needs to be obvious for the user as to how and when to interact with your website or web application.

Wireframing your design from an early stage is a great move, and there are a few handy resources below:

• iPad Wireframe EPS – A great illustrator file that provides everything you need to create accurate wireframes for the iPad. The rest of Sarah’s blog is pretty brilliant as well, and she’s an incredibly talented interface designer.
• iPad Stencil Kit – Something a little bit different, this metallic stencil kit is perfect for wire framing on paper (often the best place to start). There are also kits available for the iPhone if you’d like to try them out.
• iPad GUI PSD – For the actual iPad interface elements themselves, this PSD kit is one of the best options to experiment with. It contains everything from buttons to toolbars and pop-over windows.

General iPad Design Articles

For general design principles, we’ve rounded up a few other articles below that will give you a little guidance:

• Design Tips for Your iPad App – The tips shared here aren’t just relevant to the iPad, but design in general. Focus on knowing who your user is, keep it minimal, and experiment with every orientation.
• Ember’s iPad Category – Ember is packed with iPad interface screenshots, snippets and information. Browsing through here will give you no end of ideas for designing something that looks great.
• Designing for iPad: Reality Check – A fantastic, rambling, in-depth article looking at all manner of different design aspects. From typography to interaction, there are some really interesting thoughts here.
• How iPad Affects the Way we Design Websites? – Another fairly general walkthrough of a few design decisions that you might want to make.
• Quick and (not so) Dirty iPad User Testing – A fun look at how you can emulate the experience, size, and feel of the iPad if you’re yet to purchase one but still want to perform some testing.

Developing and Coding

From a technical point of view, you’ll need to detect that a reader is using an iPad in order to show them a particular version of your site. You’ll also want to know all about the interesting things you can do on an iPad that aren’t possible on the desktop!

Here are some great pieces of advice:

• iPad Detection using PHP and JS – Three code snippets are offered here, to detect the iPad using PHP, JavaScript, or a .htaccess file. This lets you easily redirect the user to a different design (be sure to let them easily view the original site though!)
• iPad Orientation CSS – Unfortunately, you can’t pick up your computer monitor and turn it portrait. You can with the iPad, and it’s important to have CSS that accommodates both orientations. These rules will let you do just that.
• Detecting Device Size and Orientation in CSS – A slightly more in-depth look at how you can target the iPad using CSS.
• iPad Web Development Tips – Working through a number of different CSS/JS techniques, and explaining why the browser really isn’t all that different from the desktop.

Dealing with WordPress

Optimising your WordPress theme for the iPad is something you might like to consider, but fortunately there usually isn’t too much that you have to do. Generally speaking, your beautifully crafted theme will probably look fine on the iPad out of the box (assuming it looks good in Safari on OS X).

This short article covers a few things you might like to consider, and it’s also worth taking a look at a plugin called WP-UserAgent if you’re wanting to detect if a reader is using an iPad.

Of course it’s also worth mentioning the WordPress app for the iPad, which is far more usable than the iPhone equivalent.

Hiring a Developer

Of course, you may find that it simply doesn’t make sense to develop a website, and a native application is the best way to go. Luckily, there are a range of different sites that can help to make the process of finding a developer remarkably straight-forward.

We covered all these in our recent iPhone developer post, and you can find the full list at the bottom of the article.

Remember to check out a variety of previous work to gain a strong idea of quality before hiring anyone in particular!

Share Your Tips!

Are there any other handy links, resources, and tips you’ve picked up about developing for the iPad? I’d love to hear them in the comments below – feel free to share!

Last Updated on Friday, 27 August 2010 12:32 Written by MauiDeveloper Wednesday, 7 April 2010 05:57

iPhone and iPod touch users who just added Apple’s third device to their inventory of gadgets know that the out-of-pocket expense on the iPad itself could eventually pale in comparison to the total cost spent on applications.

For those of us left with much less discretionary income after purchasing our pricey product, we need to maximize our iPad app budget. Thankfully Apple promised that most the applications we already know and love would work on the iPad too. Practice has proven a tad disappointing with some of these apps, but we have found a number of iPhone games that sparkle on the big screen.

Here are five that you should definitely try out on the big screen. What other iPhone/iPod touch games have you found to look beautiful on the iPad?

1. Bejeweled 2

Some iPhone games just look amazing and play spectacularly on the iPad even though there may not be an iPad equivalent just yet. PopCap Games’ iPhone version of their popular online game Bejeweled 2 is a testament to that notion, and speaks to how games we loved in miniature form can transform themselves and be even more entertaining double-sized.

If you’re already familiar with the game and own the iPhone version, make sure to add it to your iPad’s app collection immediately. Even though Bejeweled 2 [iTunes link] on the big screen only offers a bigger experience, bigger is most certainly better in this case. Bigger diamonds and bigger action translate into an immersive experience that both enthralls and infuriates when you’re racing against the clock in Action or Blitz mode.

If you’re new to Bejeweled 2, the game was made for the iPhone/iPod touch and sells for $2.99. It offers a captivating variation on a now classic game (even my mom loves it), and you can wuss out on the Classic and Endless versions, challenge yourself with the Action game, or compete with Facebook friends in the one-minute, action-packed Blitz version.

2. The Sims 3

EA has been fast to adapt a plethora of their games for the iPad, but no such luck for fans of The Sims. Those of us, however, that shelled out $6.99 for the iPhone/iPod touch version of The Sims 3 [iTunes link] (because we just love our Sims) should certainly add that app their iPad for a much larger Sims experience.

The transition over to the iPad isn’t totally seamless and you won’t be able to access or import the Sims characters you’ve already nurtured or tortured on your iPhone, but if starting fresh sounds like fun, you won’t be disappointed. Game play is exactly the same, with zero hiccups, and you’ll still be tasked with creating and growing a Sim.

The big bonus is that the size constraints of the smaller screen are non-existent. Just imagine being able to maneuver your Sim, redesign your house and socialize with the neighbors in giant proportions. It’s a marvelous experience for those of us who have come to appreciate the pleasantries of playing The Sims with our fingers but just want more room to do so. As our Sims would say, nevel boobsinorb (though we’re not sure on the actual Simlish spelling).

read more..