// you’re reading...

Technology

30 Days of CS5: Ensuring Web site Consistency

I admit it, I’m an Mac fan. All the computers (and music players, and tablets and cell phones) in our studio are of the Macintosh variety. Though Macs are great tools for our line of work in visual communications, using Macs can be limiting when preparing content for the World Wide Web when I know the vast majority of users will be accessing a site from a Windows machine and a variety of different browsers including Internet Explorer, Firefox and Chrome.

To help us view Web sites from a PC perspective, Adobe BrowserLab allows you to preview the appearance of your Web pages on a number of different browsers quickly and easily. To do so, you need to first register for and login to Adobe CS Live, a collection of online services that extend the functionality of Creative Suite applications. Your purchase of the Creative Suite provides one year of free access to the CS Live Services. Adobe has not yet provided estimated costs for the CS Live services beyond the current free year’s subscription.

After logging in, you can preview Web pages through two methods—use the Dreamweaver Plugin or the browser, both display the page within the Adobe BrowserLab Web page.

Along the left column, the black drop-down menu immediately below the View button provides access to the list of supported browsers. Clicking on any of the browsers previews your current Web page within the designated browser configuration.

The View menu allows you to choose between three different preview configurations, 1-up, 2-up or Onion Skin, which overlays two previews of the Web page to detect shifts in the positioning of elements within a page. This is my favorite view as I can easily see the platform-specific substitution of fonts and the change in layout that occurs as a result.



























Of course, desktop Web browsers aren’t the only screens you need to consider for compatibility. The rise in popularity of the iPhone, Droid and other smartphones are finally bringing the US mobile internet audience in line with the rest of the world. Adobe’s Device Central, bundled with Adobe Photoshop, Illustrator, Flash, Dreamweaver, Premiere Pro, After Effects and Fireworks CS5, allows you to preview graphics on a number of mobile devices or create new documents based on common screen sizes.

Noticeably absent from the Device Central test devices is the Apple iPhone and iPad. Should you need to test your site on these devices, you’re best served by using the iPhone/iPad simulator developed by Apple and distributed as part of the iPhone Developer program.

Each of these three testing applications can be used in much greater depth than can be discussed in this short post, but my hope is you at least have an idea of how you can begin testing your online creations on a number of different devices and begin developing a workflow to troubleshoot browser/device inconsistencies and begin developing content optimized to reach both desktop and mobile browsers.

Discussion

No comments for “30 Days of CS5: Ensuring Web site Consistency”

Post a comment