Resize Graphics and Photos for iPad and iPhone
Compare Different Devices
Keep File Sizes Small for iPhone and iPad

How to Design for Different Web Browsers

Though your audience may differ, you can create websites that look good in Safari on the iPhone and iPad without compromising the design of the page when viewed in any of the most popular web browsers on the Internet.

If you want to make an amazing-looking website with lots of useful functionality and tons of “wow factor,” you could design your web pages with the code to make them look good in the web browsers that visit your website.

It's a good idea to target (and test) your designs using the two most recent versions of each of the most popular web browsers on desktop and laptop computers.

At the time of this writing, the browsers in the following list were the most popular — and the ones best used to test and target your design:

  • Chrome: Versions 7, 8, 9

  • Firefox: Versions 3.5, 3.6, 4.0

  • Internet Explorer: Versions 8, 9

  • Opera: Versions 10, 11

  • Safari: Versions 4, 5

Discover your audience’s browser preferences

If you’re not sure which browsers your visitors are using, you can probably find out by viewing the traffic logs from your website. Most sites have a way to track traffic, and by searching your web logs, you can see which types of browsers and devices are visiting your site.

A great way to track traffic is Google Analytics, which you can add for free to any site to track traffic sources, measure which browsers visit your site, as well as do many other things. In this figure, you see how Google Analytics lists all the types of browsers and devices visiting one of our websites.

image0.jpg

Traffic patterns and browser usage changes over time, so be sure to review your own reports regularly and test your code with each new browser release. Understanding your own visitors can help you choose the path that works best for your site.

Compare HTML and CSS support among web browsers

When you create websites for the iPhone and iPad and visitors to your website have one of these devices, you can trust that they have the latest version of Safari, which is one of the best browsers for supporting the latest features of HTML5 and CSS 3.

If you’re going to design pages with the right code for the right browsers, you need to identify which browsers support which tags. Fortunately, a number of resources online can help you, including Can I Use and its visually appealing companion site, HTML5 Readiness shown in this image:

image1.jpg

Another useful site for comparing and understanding browser support for CSS 3 is CSS3 Please.

blog comments powered by Disqus
Web Design for the Desktop and Other Devices
Create Web Designs for the iPad
How to Create a Website with HTML5
Page Designs for Landscape and Portrait Views
Send the Right CSS to Target the iPhone
Advertisement

Inside Dummies.com