iPhone & iPad Web Design

Sorted by:  

Create an Adaptable Framework with HTML5

Before you create a Framework for a website that will be displayed on the iPhone and iPad, it’s helpful to think ahead about how you want your pages to look when you add the styles. This is where wireframes [more…]

Assess Your Current Web Presence

The first step in developing a plan for a new website for the iPhone or iPad is to assess what you have (or don’t have) in the here and now. If you’re creating a completely new website, you need quite [more…]

Develop a Project Plan for Your Website

A good project plan for your new website to display on iPhone and iPad is composed of a series of tasks, a budget, a timeline, and a list of needed resources and materials. Taking the time to create a [more…]

Define Goals and Objectives for Your Website

Take the time to ask yourself why you want a website that displays on the iPhone and iPad and what you want it to do for you. Your final site will help you accomplish your goals and provide a better user [more…]

How to Create a Wireframe

A wireframe describes the structure of your website, without getting bogged down in all the web design details. Whether you’re building a simple site for iPhone or iPad or a highly complex, interactive [more…]

Resources and Software for Creating Wireframes

You can create a wireframe document for web design in almost any software program. Some designers use common applications, including Microsoft Word or PowerPoint, but a number of programs and online services [more…]

Demonstrate Path Users Will Take on Your Website

Think of your website pages as reusable building blocks. For example, the header of your site is usually in the uppermost part of the page, and you usually want to keep it consistent across the site. It’s [more…]

Sketch Out a Site Map for Web Design

The web site map shows the website’s major sections, and how the pages of your new website displayed for iPhone or iPad will link to each other.

A site map like the one shown provides a visual overview [more…]

Web Design for the iPhone and iPad

Web pages are now viewed on everything from tiny cellphone screens to projectors that can light up the side of a barn. The constraints you face when creating sites for the small iPhone screen leave many [more…]

Page Designs for Landscape and Portrait Views

When you turn on an iPhone or iPad, the orientation of a web page automatically adjusts accordingly. The Safari web browser cleverly enlarges (or reduces) web pages to fit the screen, but it’s not perfect [more…]

Create Specific Web Designs for iPhone and iPad

If you want to optimize your pages to look their best, you need to consider the screen size and resolution differences between the iPhone and iPad. Notice the simplified diagram illustrating a common way [more…]

Compare Different Devices

If you want to design web pages optimized for the iPhone, iPad, and desktop computer, you need to first understand the design differences of these different devices. The table gives a quick overview of [more…]

Screen Resolution and Color Depth on Hand-Held Devices

If you’re new to creating images, video, and other multimedia for the mobile web, understanding the concepts behind terms like color depth and resolution [more…]

Aspect Ratios of Hand-Held Devices

When designing websites that will be displayed on iPhones and iPads, keep in mind aspect ratio — the ratio of the width to the height of an image or video. Aspect ratio is particularly important when you’re [more…]

Two Web Design Approaches

When you create multiple versions of your website design to be displayed on hand-held devices like the iPhone and the iPad, at some point you have to step back and think about what the site should look [more…]

Optimize Web Designs for the iPhone

The iPhone screen is small, but try to stop thinking about constraints and start focusing on the amazing new opportunities — such as attracting an audience of people on the move — people who may be standing [more…]

Design for a Mobile iPhone & iPad Audience

No matter which device you target in your designs, the first element to consider is your audience. When an audience is using an iPhone, you can safely assume that they’re mobile and quite likely on the [more…]

Create Web Designs for the iPad

The iPad, with its big beautiful screen, may lead you to believe you don’t need to do anything special, but the best design techniques for the iPad are not the same techniques that many have used to design [more…]

Web Design for the Desktop and Other Devices

Many web designers focus on the cutting edge (or, as some would say, bleeding edge) of web design today. When you focus on creating designs for Safari on the Apple iOS, you can take advantage of the latest [more…]

How Users Navigate in a Touch Screen World

The way that your website visitors interact with your pages and navigate your links is dramatically different on an iPhone or iPad than a desktop or laptop computer. Site visitors using an iPhone or iPad [more…]

Don’t Clutter the Screen with Navigation Options

In the navigation options at most traditional websites, links to all the main pages are always visible. A typical website includes a row of links across the top or the upper left or right side of the screen [more…]

Use the Best Image Formats and Sizes

If you’ve been doing web design for a while, you probably have realized that the PNG and GIF formats are generally best for line art, such as logos or cartoons, and that the JPEG format is best for photographs [more…]

Change the Opacity of Colors in Web Design

For years, web designers have been using transparency in websites by saving images in either the PNG or GIF format and making one color transparent. Although this method isn’t ideal, it has worked as a [more…]

Create One Web Design for All Devices

If the idea of designing an iPhone portrait and landscape web design and an iPad portrait and landscape design — just for one web page — has you feeling overwhelmed, here is some relief. [more…]

Design for Safari and Chrome Browsers

Safari and Chrome are WebKit browsers, based on the same WebKit rendering engine, which controls how the browser interprets HTML, CSS, and other code. All WebKit browsers follow the same rules [more…]

Inside Dummies.com