Getting started with the SplitViewController on the iPad
In this screencast, I show you how to build a simple iPad app using the new SplitViewController. The SplitViewController is a new UI view controller for the iPad (only) and is the basis of many iPad applications. It manages two side-by-side view controllers – a list of items that appears on the left side (in landscape mode) and a detail view on the right side.
The template also provides all the code to manage the popover view which is how the item list is displayed when the iPad is rotated into portrait mode, so you don’t have to write any of that code!
As we build the app, you’ll learn the basics of creating a SplitViewController-based app, and how to implement a simple XML reader to read an XML feed, display a list of article titles and load an article into the detail view when its title is tapped in the list.
I’d love to hear your feedback, and I hope you find it helpful.
(I recommend right-clicking and selecting watch on YouTube for the higher res version so you can see the code).
Update (6/26/2011): Get the source code here. Note that I created this using XCode 3 (the previous version to the current, which is XCode 4), so if you run into any trouble getting the code to work, that’s why. I will do an update on this screencast and the code as soon as I can!
Using CSS Media Queries to Style Your iPhone and iPad HTML
In my previous post, I showed how you can use JavaScript to detect orientation and style your iPhone and iPad pages.
You can also do this purely with CSS Media Queries!
Visit our CSS & HTML resource center for a full listing of new, events, and products.I’ve reworked the file I made for that example to use CSS Media Queries to do just that. I split the iPad style into two files: ipad-portrait.css, showing the upcoming and new content under the news content; and ipad-landscape.css, showing the upcoming and new content to the right of the news content. The behavior of the web page is the same in the previous example, but doesn’t require any JavaScript to make it all work. (Caveat: I was not able to get the iPhone simulator to respond to the orientation property in my CSS Media Queries; for this example, it didn’t matter, but keep that in mind if you want to load a different style on the iPhone on an orientation change).
Here are the new links, showing the updated CSS Media Queries:
<link rel="stylesheet" media="all and (max-device-width: 480px)" href="iphone.css">
<link rel="stylesheet" media="all and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)" href="ipad-portrait.css">
<link rel="stylesheet" media="all and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)" href="ipad-landscape.css">
<link rel="stylesheet" media="all and (min-device-width: 1025px)" href="ipad-landscape.css">
As you can see, I’ve got three CSS files; one for iPhone, two for iPad and I use the ipad-landscape.css file also for desktop machines with a minimum width of 1025px.
I’m attaching screenshots below showing the results in iPad portrait and landscape, and iPhone.
iPad in landscape orientation:
iPad in portrait orientation:
iPhone:
Styling your web pages for iPhone and iPad
Now that the iPad is out, it’s time to style your web pages so they look good on both the iPhone and the iPad.
If you participated in the online video course I recently taught, Learn to Build iPhone Web Apps with HTML, CSS and JavaScript then you already know most of what you need to know to style your web pages for the iPad too.
In this screencast, I create one page of content that is styled in two different ways: one for the iPhone and the iPad, and show you how to use CSS Media Queries to select the correct style sheet depending on the device you’re using. I also demonstrate how to change the style on the iPad depending on whether you’re in portrait or landscape orientation, using a little JavaScript.
p.s. sorry about the occasional audio interruption, my iPhone was too close to my mic!
Head First HTML5 Programming
Head First HTML and CSS 
Head First Design Patterns
1 comment