iPhone & iPad Web Design - Design Strategies

Sorted by:  

CSS 3 Animations for Websites

If your goal is to convey information creatively on your website for displaying on the iPad or iPhone, one of the best options for adding animation and other interactive features is to use CSS 3. CSS 3 [more…]

How to Create Transformations with CSS 3

CSS 3 lets you create many cool effects on your website for displaying on the iPhone and iPad. The CSS 3 transform properties enable you to transform an element to create effects in 2D and 3D. You can [more…]

How to Create Transitions with CSS 3

CSS 3 gives you many exciting features to create cool effects in the design of your website for displaying on the iPad and iPhone. The CSS 3 transition properties make it possible to change the state of [more…]

How to Create Animations with Keyframes

To create animated effects on your website to display on the iPad and iPhone, you need to use keyframes. More complex CSS 3 animations rely on keyframes. [more…]

How to Save Space on the iPhone Screen

When you design websites for the relatively small iPhone screen, every pixel is precious. The script shown here is designed to scroll the page down automatically, hiding the address bar and giving you [more…]

iPhone and iPad Design: Use JavaScript Frameworks to Add Advanced Features

JavaScript frameworks help you add rich features to your iPhone and iPad web designs. If HTML5 and CSS 3 aren’t enough of a challenge for you and you want to add more advanced features with scripts, you [more…]

Design a Site for Video Views

Make no mistake: Video is a key ingredient in the success of Apple’s devices. Industry experts dubbed Netflix as the killer app of the iPad because it offers the capability to stream movies in surprisingly [more…]

Make CSS 3 Work in More Web Browsers

If you want to use HTML5 and CSS 3 in the design of your website, you should know that both HTML5 and CSS 3 are still under development. The CSS specification has not yet been approved by the W3C, but [more…]

Compare Mobile Website Testing Solutions

The most important principle to understand when testing your website for the iPhone and iPad can be summed up in one well-worn aphorism: “In theory, there is no difference between theory and practice — [more…]

Test Your Site with the iPhone and iPad

One huge advantage of focusing on the iPad/iPhone as you design a website is that you can relatively easily test your designs. Even if you have only the desktop version of Safari [more…]

Enhance Safari’s Testing Features with Extensions

When testing your newly designed mobile-commerce website, sometimes it’s easier to work with what you have. If you already have Safari or Chrome installed on your computer, you're in luck. They render [more…]

Link Your Website to the jQuery Library

If you use Galleria to build a photo portfolio for your website to display on the iPad and iPhone, you will need to link to the jQuery library on Google’s content delivery network [more…]

How to Use Developer Tools in Safari on iOS

Enabling the Debug Console in Safari on iPhone, iPod touch, or iPad allows you to see HTML, CSS, and JavaScript errors directly in the device. This is the most reliable way to ensure that you have no surprise [more…]

How to Activate User Agent Switcher in Safari

When you’re testing a website intended for the iPhone and iPad on a desktop computer, if the device detection script on a server recognizes that you’re using a browser on a computer, it doesn’t show you [more…]

How to Install Safari Testing Extensions

Safari or Chrome installed on your computer will help you test your website meant for the iPhone and iPad. They render mobile sites similarly to how they would be rendered on an iOS device, and they have [more…]

Test Mobile Sites with the Chrome Web Browser

To test your iPhone or iPad website in the Chrome web browser, you can launch the developer tools by clicking the Wrench icon in the top right corner of the browser window and choosing Tools →Developer [more…]

Test Your Mobile Site with DeviceAnywhere

A great option for testing mobile designs on a wide variety of devices using a desktop computer, DeviceAnywhere lets you access more than 1,500 handsets and test them as they would perform on carriers [more…]

Test iPhone Designs with Safari

The closest you can come to having Safari on an iPhone or iPad is Safari on a computer. It has a few notable differences, including the larger screen size that most people use on computers and the fact [more…]

Test Your Code with the W3C Tools

Testing your web designs with the World Wide Web Consortium (W3C) validation tools has always been a good idea, but it’s even more important for mobile web design. Desktop web browsers, including Internet [more…]

Create a Mobile Site Testing Plan

Test early and test often — repetitive testing is the key to developing a site for iPhone and iPad quickly and with confidence. Creating a detailed testing plan is an important addition to any good project [more…]

Quality Assurance Testing for Mobile Websites

Before you launch a new site intended for the iPhone and iPad, always fully test its design and functionality on the iPhone or iPad, to ensure that the site looks and works the way you think it should. [more…]

More Extensive Testing for Your Mobile Website

The biggest challenge for most designers who create sites for the World Wide Web is having to test it in many different web browsers and on different operating systems and devices. If you’re worried only [more…]

Load Testing to Gauge Site Speed

Load testing helps you gauge the impact of having many site visitors at one time, and services that help you do so are much easier to use than, say, coordinating all your neighbors to visit your site at [more…]

Usability Testing for Your Mobile Site

When investing a lot of time developing a site for the iPhone and iPad, you get to know it quite well — so well that you may overlook elements that are obvious to you. Usability testing watches how actual [more…]

Testing Your Code with Dreamweaver’s Site Reporting Features

If you've used Dreamweaver to build your mobile website, you can check your work using the Dreamweaver Site Reporting features. It lets you create a variety of reports and even customize them to identify [more…]


Inside Dummies.com