Skip to main content
April 1, 2026Noble Desktop Publishing Team/7 min read

Customizing the App for iPad

Master iPad App Customization for iOS Development

Tutorial Focus Areas

Storyboard Creation

Learn to create dedicated iPad storyboards that leverage the larger screen real estate effectively.

Interface Orientation

Configure proper orientation settings for optimal user experience across different device types.

Universal App Design

Transform iPhone-specific apps into universal applications that work seamlessly on both platforms.

Topics Covered in This iOS Development Tutorial:

Creating a New iPad Storyboard, Setting the Interface Orientation

Exercise Preview

preview customize for ipad

Exercise Overview

The app we've been developing was designed exclusively for iPhone. In this exercise, you'll master the art of adaptive design by learning how to optimize your application for iPad's larger screen real estate and unique interaction patterns. This is a critical skill in modern iOS development, as universal apps that work seamlessly across all Apple devices command higher user engagement and App Store rankings.

Prerequisites Required

This exercise builds directly on previous band app exercises 1B through 4D. Complete those first or use the provided starting files to follow along effectively.

Getting Started

  1. We strongly recommend completing the previous band app exercises (1B–4D) before proceeding with this advanced tutorial. These foundational exercises establish the core functionality we'll be adapting for iPad. If you did not complete the previous exercises, follow the alternative setup process outlined in the sidebar below.

    If you've completed exercises 1B–4D, re-open Jive Factory.xcworkspace (located in yourname-iOS Dev Level 2 Class > Jive Factory).

    Initial Setup Process

    1

    Open Project

    Navigate to your iOS Dev Level 2 Class folder and open Jive Factory.xcworkspace to begin customization.

    2

    Switch Simulator

    Change active scheme from iPhone 13 Pro to iPad Pro 12.9 inch to preview current iPad appearance.

    3

    Test Current State

    Run the app to observe sizing issues and low-resolution display problems on iPad simulator.

Alternative Setup: If You Haven't Completed Previous Exercises (1B–4D)

  1. Close any open files and navigate to your Desktop.
  2. Open Class Files > yourname-iOS Dev Level 2 Class.
  3. Duplicate the Jive Factory Ready for Customizing iPad folder.
  4. Rename the duplicated folder to Jive Factory.
  5. Launch Jive Factory > Jive Factory.xcworkspace.
  • Before implementing any changes, let's evaluate how our current iPhone-optimized app renders on iPad hardware. In Xcode's top toolbar, click on iPhone 13 Pro and switch the active scheme to
    iPad Pro (12.9 inch). This simulation will reveal the limitations of our current single-device approach.
  • Click the Run button to build and deploy to the iPad simulator.

  • When the simulator loads, observe how the app displays. You'll notice significant sizing issues and suboptimal use of screen space. This occurs because our build configuration targets iPhone specifications exclusively, resulting in a scaled-up iPhone interface rather than a native iPad experience.

    NOTE: If the simulator window exceeds your monitor size, you'll need to scroll or resize it for complete visibility.

  • Should the simulator prove too large for your display, hover over any corner until the resize handle simulator resize handle appears. Drag to achieve optimal sizing for your workspace.
  • Experiment with the zoom controls in the bottom-right corner. Click 1X, then 2X to observe the scaling behavior. The pixelated appearance at 2X demonstrates why proper universal app design is essential—simple upscaling delivers poor user experience and fails to leverage iPad's capabilities.

  • Return to Xcode to begin the transformation process.

    Our objective is creating a truly universal application that leverages the unique strengths of both iPhone and iPad platforms. Rather than starting from scratch, we'll intelligently adapt our existing codebase—a more efficient and maintainable approach.

  • Access the Project navigator tab project navigator icon if it's not already active.
  • Select the Jive Factory project name (the top-level project, not the folder) to open the comprehensive Project Settings Editor.

  • In the targets section (located between the Project navigator and General tab), ensure Jive Factory is selected as the active target.

    targets jivefactory

  • Navigate to the General tab if not already active.

  • Locate the Deployment Info section and change the Devices setting from iPhone to Universal. This single change signals to iOS that your app should optimize for all device types—a fundamental requirement for modern app distribution.

    NOTE: Apple's current Xcode templates default to Universal apps, reflecting the platform's evolution toward device-agnostic development.

  • Test the immediate impact by clicking Run again.
  • When the simulator reloads, notice the dramatic improvement in layout utilization. The app now employs iPad-appropriate spacing and sizing.
  • Navigate to the Map tab to see how different interface elements adapt to the larger canvas.
  • Explore the Featured tab to observe the enhanced content presentation.

  • Tap the Nicole Atkins cell to access the detail view.

    While functional, the detail view reveals the limitations of automatic scaling. The content positioning still reflects iPhone constraints rather than embracing iPad's expansive interface possibilities. This demonstrates why professional iPad apps require dedicated design consideration.

  • Return to Xcode to implement proper iPad-specific optimization.

    • Now that we've established universal device support, let's create a sophisticated iPad-specific interface that truly capitalizes on the platform's capabilities.

    Creating a New Storyboard for iPad

    Professional universal app development involves creating device-specific storyboards that optimize user experience for each form factor. We'll develop a dedicated iPad storyboard while preserving our iPhone design—a strategy that maintains code efficiency while maximizing platform-specific advantages.

    1. In the Project navigator, select Main.storyboard to establish the insertion point for our new file.
    2. Press Cmd–N to invoke the new file dialog.
    3. Under the template selector, navigate to iOS > User Interface and double-click Storyboard.
    4. In the Save As field, enter: Main_iPad.storyboard
    5. Verify you're saving within the Jive Factory folder and click Create.
    6. We'll now duplicate all interface elements from our iPhone storyboard to create the iPad foundation. Select Main.storyboard in the Project navigator.
    7. If the Document Outline is visible, click Hide Document Outline show hide document outline icon to maximize workspace.
    8. Close the Debug area if open by clicking Hide the Debug area show hide debug area in Xcode's top-right corner.
    9. Click in the Editor's blank area and press Cmd–A to select all storyboard elements.
    10. Copy the selection with Cmd–C.
    11. Switch to Main_iPad.storyboard in the Project navigator.
    12. Click in the empty Editor area and paste with Cmd–V.
    13. Toggle the Document Outline with Hide Document Outline show hide document outline icon for optimal viewing.
    14. Ctrl–click or Right–click in the Editor and select Zoom to 50% for comprehensive view management.
    15. Click in a blank area to deselect all elements.
    16. Select the Tab Bar Controller by clicking its header bar.
    17. While holding Shift, systematically select each additional controller until all display blue selection outlines.
    18. At the Editor's bottom, click View as: iPhone 13 Pro (or current device setting) to access display configuration options.
    19. Select iPad Pro 9.7" to optimize for iPad dimensions.

    20. Arrange the view controllers to match the iPhone storyboard's logical flow, as illustrated below. This organization facilitates navigation and maintains development consistency:

      ipad storyboard arrangement

    21. Reestablish the entry point by selecting the Tab Bar Controller.
    22. In the Attributes inspector attributes inspector icon, locate the View Controller section and enable
      Is Initial View Controller.
    23. Now we'll configure the project to utilize our iPad-specific storyboard. Select the Jive Factory project name in the Project navigator to access Project Settings Editor.
    24. In the General tab's Deployment Info section, set Devices to iPad.

    25. From the Main Interface dropdown, select Main_iPad.storyboard to establish it as the iPad interface foundation.

    With device-specific storyboards established, let's optimize the interface orientation to maximize each platform's strengths.

    Universal App Strategy

    Creating separate storyboards for iPhone and iPad allows you to maintain device-specific layouts while sharing the same codebase, maximizing code reuse and design flexibility.

    Storyboard Creation Workflow

    1

    Create New Storyboard

    Use Cmd-N to create a new storyboard file under iOS User Interface templates, naming it Main_iPad.storyboard.

    2

    Copy Existing Elements

    Select all elements from Main.storyboard using Cmd-A, copy with Cmd-C, then paste into the new iPad storyboard.

    3

    Configure for iPad

    Switch view to iPad Pro 9.7 inch and rearrange controllers to match the original iPhone layout structure.

    4

    Set Initial Controller

    Select Tab Bar Controller and check 'Is Initial View Controller' in the Attributes inspector to establish entry point.

    Setting the Interface Orientation

    Strategic orientation choices significantly impact user experience. For iPad, we'll implement landscape orientation to accommodate an elegant split-view layout where band listings appear alongside detailed information. This approach mirrors professional iPad applications and maximizes content density. Simultaneously, we'll maintain portrait orientation for iPhone to preserve the familiar, thumb-friendly navigation our users expect.

    1. Ensure you're in the Project Settings Editor. If not, select the Jive Factory project name in the Project navigator.
    2. Configure iPhone settings first by setting Devices to iPhone.
    3. In Device Orientation, ensure only Portrait is checked. Uncheck any additional orientations to maintain consistent iPhone experience.
    4. Switch to iPad configuration by setting Devices to iPad.
    5. Configure orientation by checking only Landscape Left and Landscape Right. Disable portrait orientations to ensure optimal split-view presentation.
    6. Preserve universal compatibility by setting Devices to Universal. This maintains the device-specific orientation rules we've established.

    7. Test the configuration by clicking Run.

      The iPad simulator now launches directly into landscape orientation, demonstrating the effectiveness of our orientation strategy.

    8. Verify orientation locking by selecting Hardware > Rotate Right. The interface should remain stable, confirming our landscape-only configuration.
    9. Return to standard position with Hardware > Rotate Left.
    10. Return to Xcode and click Stop to halt the simulator.
    11. Open Main_iPad.storyboard in the Project navigator.
    12. Notice the controllers still display in portrait mode. Select the Tab Bar Controller to begin orientation adjustment.

    13. In the Editor's bottom section under "View as," change Orientation to Landscape landscape orientation.

      Observe how all connected controllers automatically transition to landscape mode, demonstrating the hierarchical nature of storyboard relationships.

    14. If controllers overlap after the orientation change, reposition them to maintain clear visual separation and logical flow.
    15. Save your progress with File > Save.

    16. Maintain this file in active state. The subsequent exercise will implement advanced split-view controller functionality—an iPad-exclusive feature that transforms our application into a truly professional iPad experience with master-detail navigation paradigms.

    Device Orientation Strategy

    FeatureiPhoneiPad
    Recommended OrientationPortrait OnlyLandscape Only
    Design RationaleOptimized for vertical layoutBetter for split view controllers
    User ExperienceFamiliar mobile interactionDesktop-like productivity
    Recommended: Lock orientations to match each platform's strengths and intended user interaction patterns.

    Orientation Configuration Steps

    1

    Configure iPhone Settings

    Set device to iPhone and ensure only Portrait orientation is checked in Device Orientation section.

    2

    Configure iPad Settings

    Switch device to iPad and check only Landscape Left and Landscape Right orientations for optimal split view usage.

    3

    Set Universal Deployment

    Change device setting to Universal to preserve both iPhone and iPad orientation configurations simultaneously.

    4

    Update Storyboard View

    Switch storyboard controllers to landscape orientation to match the new iPad orientation settings.

    Key Takeaways

    1Universal apps require separate storyboards for iPhone and iPad to optimize layouts for different screen sizes and user interaction patterns.
    2The Project Settings Editor allows you to configure device-specific orientation locks, with portrait recommended for iPhone and landscape for iPad.
    3Copying existing storyboard elements to new device-specific storyboards maintains functionality while enabling platform-optimized design customization.
    4iPad apps benefit from landscape orientation when implementing split view controllers for enhanced productivity and desktop-like user experiences.
    5Simulator testing reveals layout issues early in development, allowing developers to identify and address device-specific display problems before deployment.
    6The Initial View Controller setting must be reconfigured in new storyboards to establish proper app entry points for each device type.
    7Universal app deployment preserves device-specific settings while enabling a single codebase to serve multiple platforms effectively.
    8Interface orientation configuration impacts user experience significantly, requiring careful consideration of each platform's design conventions and usage patterns.

    RELATED ARTICLES