iPhone & iPad Web Design For Dummies

Many people surfing the mobile web do so on an iPhone or iPad, so designing mobile web sites targeted to these devices makes sense for many web designers. Start creating your web design for the iPhone or iPad by choosing a design strategy. If you decide to design targeted websites for the iPhone and iPad, start by understanding the web design basics that make a site work well for iPhone or iPad users.

>

>

Choosing a Strategy for Your Mobile Web Design

People now view web pages on everything from tiny cellphone screens to projectors that light up the side of a barn. The constraints you face in mobile web design for the small iPhone screen can feel like painting Easter eggs in a straitjacket. And even seasoned professionals find designing mobile websites that look great on screens of every size and dimension challenging — even on the slick-looking iPhone screen.

One of the most exciting aspects of creating websites for the iPhone, iPad, and iPod touch is that they offer you a chance to completely rethink how you design for the Internet.

Design is highly subjective — you either love pink or you hate it and there's probably not much we can do to change your mind. But beyond the color choices and font preferences (which we leave up to you), here are two approaches to mobile web design for the iPhone and iPad:

• Create multiple designs for optimal display on the iPhone, iPad, and iPod touch. This strategy enables you to make the best use of the screen whether it's in portrait or landscape mode. You can also take advantage of the larger iPad screen while sticking with a single-column design that works best on the iPhone and iPod touch. Creating all these designs is, of course, more labor intensive than creating one web page or mobile web page. If your audience uses mobile devices like the iPhone and iPad to visit your website, however, the work is worth the effort.

  
  



• Designing one flexible page layout that can adapt to the size differences of an iPhone, iPad, and even laptops and the monitors people still keep on their desks. If you choose this mobile web design strategy, you don't have the flexibility that targeted designs offer. You can deliver a website that meets your visitors' needs and works well on a range of devices by sticking to a few guidelines. First, don't use Flash in your website design because Flash doesn't work in the iPhone or iPad. Also, you want your site to fill the screen on an iPad in portrait mode, so don't cut off the length of your page at 600 pixels. Instead, size the page to 980 pixels wide by at least 980 pixels long. Last but not least, when testing, view your site on the devices most important to your audience, making sure the images load quickly and look clear no matter what the sizes of your visitors' screens are.

  
  

>

>

>

Optimizing Your Mobile Web Designs for the iPhone

Yes, the iPhone screen is small, but you should stop thinking about constraints and start focusing on the amazing new opportunities iPhone web design offers — such as attracting an audience of people on the move, people who may be standing right outside your restaurant, for example, while they look at your menu on their iPhones and consider whether to eat there.

When designing a website for the iPhone, remember the following key points:

• Every pixel counts. You don't have much room to play with, so be sure not to waste a single pixel in your mobile web designs.

  
  



• Create mobile iPhone designs with only one column of information. Multicolumn layouts just don't fit well on small screens like the iPhone screen.

  
  

When you create a special design for the iPhone, be sure to include a link back to the desktop version of your website. Visitors to your mobile website may already be familiar with the desktop version and may prefer to visit the version that's already familiar to them, even if they're using an iPhone. The mobile version of the Safari web browser aims to display any desktop site as well as a desktop computer does, and with the exception of the smaller screen size, it comes darned close.

>

>

>

How to Create iPad-Friendly Mobile Web Designs

The iPad, with its big beautiful screen, may lead you to believe you don't need to do anything special in your mobile web design, but the best web design techniques for the iPad are not the same as those for the desktop.

Although the iPad provides far more screen real estate than the iPhone, it still creates new challenges for mobile web designers. Remember the following when designing mobile websites for the iPad:

• Design for both orientations: The ability to turn the iPad from landscape to portrait mode dramatically alters the screen space for your web designs.

  
  



• Make the most of HTML5 and CSS 3: When you're designing for the iPad, you don't have to worry about all the web browsers still used on desktop computers, so you can take full advantage of the latest in these web design technologies.

  
  



• Test iPad designs on an iPad: When you create content for the iPad, you're probably using a machine that's quite different from the iPad. Don't test your work in the same place you develop it. You may still have to do most of the design and coding of your iPad sites while sitting at a desktop or laptop computer, but when you're done, get up, stretch out, and go sit in a comfy chair to see how your website looks and works on an iPad.

  
  

Test your web page designs in different lighting situations. Take the iPad outside to see how your pages look in bright sunlight, and bring the iPad to bed with you to see how your mobile web design looks when you hide in the dark under the covers. (Don't you just love not needing a flashlight to read on the iPad, the way we did when we wanted to stay up late to read books as children?)

>

>
dummies

Source:http://www.dummies.com/how-to/content/iphone-ipad-web-design-for-dummies-cheat-sheet.html