Tag Archives: app

Updates to Adobe Touch Apps: Photoshop Touch 1.3 and Proto 1.5

Adobe Photoshop Touch and Adobe Proto, two of Adobe’s Touch Apps designed for tablets, were updated in the past month. Today, Photoshop Touch was updated to version 1.3 with a few new features designed for iPad users with Retina screens. Last month, the web design app Proto was updated to version 1.5 with more integration between desktop and cloud applications.

Photoshop Touch 1.3: High-resolution improvements

Adobe Photoshop Touch

According to Adobe’s blog post, Photoshop Touch 1.3’s primary goal is to support the new batch of high-resolution Retina screens being used by Apple in their new iPads (3rd generation). The app also supports images up to 12 megapixels, including print-quality resolutions. (The blog post makes it sound like you have to sacrifice the number of layers you can work with in order to gain the extra pixels.)

Other improvements include:

  • Two new Effects: Shred and Colorize
  • Smoother animation and scrolling in the organizer, tutorial browser and file picker
  • New three-finger tap gesture to toggle 100 percent view and fit screen
  • New pixel-nudging mode for precise movements
  • Support for Apple Photo Stream on the iPad

Adobe Proto 1.5: Little improvements can mean a lot

Adobe Proto Logo

Proto is one of my favorite Adobe Touch Apps (see my review of it here), but Proto 1.5 provides some very useful improvements that should have been in the original release. The more comprehensive list of improvements is here on John Nack’s blog, and here’s a selection of that list:

  • Email interactive wireframe as attachment or share via Dropbox and other Adobe Touch Apps
  • Copy and paste objects to different pages
  • Share common objects across pages
  • Navigations can now be pinned on all pages
  • Z-index (stacking over) can be changed via Context Menu
  • Show undo/redo count
  • Objects snap to both CSS Column and Design Grid
  • Code generated is now ordered according to the appearance in the page
  • All pinned objects generate a separate common CSS file (common.css)

Generally, the improvements provide a more productive workflow within Proto, a more efficient use of materials like common navigation elements, and more useful code outside of the Proto environment. Dreamweaver users should watch this Adobe TV clip to learn how to bring native Proto files into Dreamweaver CS6.

For more information, check out the product pages for Photoshop Touch and Proto or the Adobe Touch Apps homepage.

REVIEW: Adobe’s Touch Apps for Android

Last month, Adobe released its line of Adobe Touch Apps for Android tablets. Adobe has been testing the mobile and tablet software markets for some time now, first with Adobe Ideas for iOS and Photoshop Express, then the Photoshop SDK and the three Photoshop-related touch apps for iPad, then with Adobe Carousel which also runs currently on iOS, and now with six apps for creative professionals on Android tablets:

  • Adobe Collage, where users can build mood boards with images, text and graphics,
  • Adobe Debut, suitable for presenting graphics and concepts to audiences,
  • Adobe Ideas, a vector application suitable for creating and marking up images,
  • Adobe Kuler, which provides an interface for picking and refining color schemes,
  • Adobe Proto, where layouts for websites can be constructed, and
  • Adobe Photoshop Touch, a tablet-based version of Adobe Photoshop.

I’ve worked with all six and I think the suite of apps are a mixed bag: some really stand out for their usefulness and ability to leverage many tools available in the Android SDK, while others are not as helpful and robust. I can’t tell whether some of the apps are hamstrung by limitations in the APIs or were designed by Adobe to focus on a very specific set of features.

The crown jewel: Photoshop Touch

PS Touch image

Photoshop Touch is probably the Adobe Touch app being promoted the most, and it got a lot of love at the Adobe MAX developer conference in October. Many Photoshop users—including myself—have been wanting “Photoshop on a tablet,” and I think Adobe delivered. Photoshop Touch has a lot of Photoshop’s tools, effects and adjustments, including some I wasn’t expecting (such as Warp). There are a few Photoshop tools that aren’t present, including some animation tools such as the Animation panel. But Photoshop Touch stands out as the most feature-rich and robust of all Adobe’s Touch apps.

I also think Photoshop Touch has the most robust user interface, and incorporates a helpful menu bar at the top of the screen. All the Adobe Touch Apps have a top menu but most only show a few icons and don’t have submenus. Photoshop Touch needs an extensive UI like this, and even though it’s packed with features it’s not hard to use. The only criticism I can make is that some tools aren’t in the same place they are in Photoshop, and Photoshop users might find this counterintuitive. I think the Photoshop Touch development team sometimes strayed too far from the example set by Photoshop.

ps-touch

The results you can achieve with Photoshop Touch are remarkable, particularly with the Scribble Selection tool which lets you mark areas to keep and remove. The app figures out the rest with very good accuracy. This tool reminds me of Photoshop’s old Extract filter, which was removed from that product a couple years ago and still hasn’t been given a suitable replacement. Most of major features are borrowed from Photoshop—layers, brushes, text, adjustment filters and effects are all integrated into Photoshop Touch. One missing feature is the layer mask, which I think is a major oversight. Fortunately, Photoshop Touch exports its files in a new .psdx format, which Photoshop can open with a plugin, so you will be able to bring the full power of Photoshop to your Photoshop Touch projects.

PS Touch image

Photoshop Touch performs best as part of a workflow that also includes Photoshop, though you can do exceptional work without it. Creative professionals who use the Creative Suite extensively will find Photoshop Touch to be a solid extension of their Photoshop tools into the mobile space.

Impressed by Proto

The other Adobe Touch app that really impressed me is Adobe Proto, a web wireframing tool for web designers. Like Photoshop Touch, it has a robust set of tools and a UI that also includes gesture shortcuts. For example, draw a box on the canvas and an HTML div element is created. Draw a “play button” triangle and an HTML5 video element is created. The gesture UI is very easy to work with and I wish Proto was not the only Adobe Touch app that implemented it, but each app has its own development team and the Proto team happened to be the only one to weigh gestures important enough to include in the initial launch. Proto’s gesture UI makes creating website wireframes quick, easy and even fun.

Proto image

Proto projects can contain multiple pages and link between them, and there’s a lot of emphasis on basic HTML elements, form elements and navigation powered by jQuery, the ubiquitous JavaScript framework. Projects can then be pushed up to Adobe Creative Cloud—Adobe’s upcoming cloud service for creative professionals—and then brought into Dreamweaver or any other programming application. I’ve looked at the code Proto renders out and it’s fairly basic but functional, consisting of HTML5, CSS and jQuery as needed. Each page in a project gets its own CSS file, which is not usually advantageous.

Proto image

Proto is a solid wireframing app that provides a lot of tools despite its restrictions in the tablet. Developers need to apply some design work to the output and perhaps clean up some of Proto’s code, but I think Proto can provide a decent starting point for many projects.

Two new apps: Collage and Debut

Collage image

Adobe Collage is a fun tool for producing “mood boards,” which agencies and design teams sometimes use to bring images and text together to communicate a concept for development. Collage leverages the tablet interface very well, including support for multi-touch gestures that brings a tactile behavior to the mood board experience. Moving items around with your fingers is different than using a mouse and a monitor. Collage also interfaces with the tablet’s camera so you can take pictures of your environment and make it part of your mood boards instantly. There’s a small set of tools as well for markup, including a vector brush, text tool and a drop-down menu for duplicating, deleting and stacking elements. You can also include playable video into your mood boards, but they play in a new window and not on the project board itself.

Collage image

Unfortunately, there are not many more features in Collage and I find it to be lacking a few features. Why not include a microphone or allow importing video from the tablet camera? Both of these could really bump up the personal experience of creating projects in Collage. Also, Collage files are currently imported into Photoshop by converting them into a PSD file that can’t be converted back into a Collage file. The converted PSD doesn’t retain video elements either. I think there’s a few kinks to work out in the Adobe Touch Apps/Creative Suite import/export process.

Debut image

Adobe Debut is the least powerful and weakest member of the Adobe Touch Apps family. Debut is a presentation tool that imports graphics and images from various sources and lets users swipe through them. It’s the kind of feature that can be handy in a client meeting or a portfolio presentation. Debut’s best feature is the breadth of sources it can pull images from, including from the tablet’s camera, the Creative Cloud, Google and Flickr. The Creative Cloud gives access to users’ Photoshop, InDesign and Illustrator files, which is a real plus for creative professionals. You can also toggle Photoshop file layers on or off when importing. A vector markup tool allows Debut presentations to be marked up on the fly, which can be handy in client meetings.

Debut image 1

However, the fact that I’ve just described the extent of Debut’s functionality goes to show how little it can really do. Collage can do pretty much anything Debut can do except present multiple slides, which is what makes me think Adobe should combine these two apps into a more powerful mood board creation and presentation app for client experiences.

Adobe Releases Touch Apps Tablet Applications For Android

Today Adobe officially released their lineup of Touch Apps for Android tablets, deepening their dive into products for mobile devices. The company has devoted considerable resources to mobile applications for a few years now, so the Touch Apps represent a major investment for Adobe.

The Touch App lineup released today includes six applications:

  • Adobe Collage, for creating “moldboard” layouts including photos, drawings and text.
  • Adobe Debut, a presentation tool for mockups and Touch App projects.
  • Adobe Ideas, which is similar other vector drawing programs like Illustrator.
  • Adobe Kuler, a color palette builder.
  • Adobe Photoshop Touch, which is designed to deliver core Photoshop features on a tablet.
  • Adobe Proto, for building interactive prototypes of websites and mobile apps.

Even though it’s considered part of the “Touch Apps family,” the previously-announced Adobe Carousel photo management app isn’t listed as one of the “Adobe Touch Apps.” It also is only available on iOS devices at the moment; see below for more details. Kuler and Ideas both exist in other forms as well.

I received a demo tablet from Adobe just last Saturday and I’ve just started to work with the applications, so no review for now. However, these applications were shown extensively at Adobe MAX (including the Day 1 keynote) and I’m fairly familiar with how they work. Together, they provide a solid collection of core tools from most of the major Creative Suite products—Photoshop, Illustrator, InDesign, Dreamweaver and minor elements from a couple others. The hurdle Adobe has to clear is to provide a user interface that works in a tablet but has the power and flexibility to get serious work done in a variety of environments.

The Touch Apps are on the Android Market now and sell for $9.99 each, a price well over the $3.13 average price of paid Android apps. Adobe will have to appeal to the professional community to justify the price. The apps are also restricted by language (English only) and by hardware specs: 8.9-inch, 1280×800 minimum screen size and resolution with Android 3.1 or higher, which eliminates all current Android non-tablets. The apps are currently available only on Android, but they will be ported over to iOS devices in early 2012. There’s no word yet whether the apps will be restricted to the larger iPad.

Adobe Announces Carousel For Cross-Device Photo Management

Last month at Photoshop World, Adobe announced the release of Adobe Carousel™ for iOS and Mac OS X devices. Carousel is a cross-device application for browsing, adjusting and sharing photography with synchronization in the cloud for multiple devices. It’s definitely a consumer product, and I’ll explain its severe limitations on working with professional photography, but the notable aspect is its focus on the iPad, iOS and (eventually) other mobile and tablet devices.

“With Adobe Carousel we are extending the power of Adobe’s imaging expertise beyond the desktop and onto tablets and smartphones, delivering instant access to your complete photo library and the freedom to edit and share photos anywhere, any time,” said Winston Hendrickson, vice president of Digital Imaging Products, Adobe. “Thanks to Adobe Carousel, users never need to worry about wasting time syncing, remembering if a photo was saved to a particular device, or worrying about maxing out storage on their iPhone or iPad.”

Adobe has a really slick way to marry the cloud and device storage with Carousel. Images are hosted on the main computer but they’re copied to the cloud’s servers immediately and Adobe’s system distributes the copies on demand to other devices. The press demo showed images being uploaded to Carousel and available on other devices almost immediately. Chris Quek, Senior Product Marketing Manager for Carousel, called it a “content-aware mesh.” This system also allows users to edit images at the same time and merge their changes, though I think doing so can lead to wild results.

Carousel is currently available for Apple iOS devices only, which is intriguing to me since Adobe has a colder relationship with Apple compared to other device manufacturers such as Google (Android) and BlackBerry. Adobe’s efforts have shifted around as the tablet and mobile device landscape fluctuates, and they are protecting their Flash Platform product as well as investing in technology like iOS and HTML5, with projects like Project ROME (now defunct) and Edge, which generates HTML5 animations.

Carousel seems like a product that was developed only for iOS to go after the iPad market, and it was decided later to embrace the “create once, publish anywhere” mantra and extend it to Android and Windows Phone. Carousel is expected to reach those platforms in 2012, and in the future I expect there might be a web application to complement these device-specific apps—an internal prototype does exist within Adobe.

Carousel is a subscription-based service and 30 days are complimentary. After that, it will be $59.99/year or $5.99/month. You can import unlimited photos, with no cap on file sizes, and manage them on unlimited devices, but you can only have five carousels and they can be shared with only five people each. Another limitation is Carousel only handles JPEG images. This was asked about quite a bit by my press colleagues during the demo, but the press attendees were generally pro or prosumer photographers shooting RAW images. Adobe has squarely targeted the consumer market with Carousel, and it doesn’t surprise me that JPEGs from point-and-shoot and mobile device camera are the main focus. For the same reason, professional color management and detailed ratings/flags are not really a part of Carousel, though you can “favorite” an image.

Carousel looks like a fun product to me but the photo management market already has a lot of solutions—from Picasa and Flickr to social media tools like Facebook, which I’ve read has more of the public’s photos than any other service. Carousel’s strengths is in its integration with Apple products—you can import from Aperture and iPhoto, and iPhone pics can go to Carousel automatically—and its smooth synchronization capabilities. It also has decent cropping and adjustment tools, which not every service offers. However, the other services have a strong head start and Adobe didn’t do itself any favors by delaying the release to Android. It’s hard to tell where Carousel will be in five years, but Adobe is at least on the right path.

Day 1 Announcements From Adobe MAX: Adobe Creative Cloud And Adobe Touch Apps

Today Adobe announced a variety of newsworthy items, mostly acquisitions and new products that will greatly impact creative professionals. Ironically, “Flash Platform” was not mentioned once at this event, traditionally Adobe’s largest for Flash developers, but I and other press colleagues think more developer news will be announced at tomorrow’s keynote.

Adobe Creative Cloud Combines Apps, Services and Community

This was the big-picture announcement: Adobe has a new service called Adobe Creative Cloud that combines their desktop products, tablet and touch applications, a community website with cloud storage, and a variety of services. The Adobe Creative Cloud’s discrete components will be detailed separately below, but the outline includes:

General pricing and availability of the Adobe Creative Cloud will not be announced until November 2011. The product itself looks absolutely beautiful, and is what I expected from a company like Adobe responding to huge changes in mobile computing and data distribution. Apple and Amazon are doing the same thing in the cloud computing landscape. However, right now we don’t know what a service like Adobe Creative Cloud will cost, so until then we can’t judge how successful it might be.

Another complication is the fact that the Creative Suite 5.5 products have been available with a subscription since May. Will that option go away now that users can subscribe to those and more through the Adobe Creative Cloud? I doubt it will—I know the CS5.5 apps and suites will still be available as standalone products and for sale through the conventional way, and I expect Creative Suite subscriptions will also continue. I also think you can look at the prices of those CS subscriptions, add a bit more money, and have an idea what the Adobe Creative Cloud will cost.

Adobe Touch Apps Released, Includes Photoshop Touch

Adobe has been investing considerable resources into tablet and mobile applications, first with Adobe Ideas and then with Photoshop Touch SDK apps like Eazel and Nav, and the iOS-only Carousel. Today Adobe announced six new “touch apps” currently on Android, which will all be available to Adobe Creative Cloud subscribers.

  • Adobe Photoshop Touch brings basic Photoshop features to tablets, including layers, adjustments, selection and background extraction among other features. Out of all the apps this is the only one to be named after an existing desktop product, and I predicted a “Photoshop on the iPad” product at some point. However, Adobe has made a strategic decision not to put too many Photoshop features into Photoshop Touch and so the app is nowhere near as powerful as its namesake. This was out of both necessity and UX considerations, but I think it will hurt its reception by users.
  • Adobe Collage helps creative people combine imagery, drawing and text to create storyboards and basic layouts. I see this being more useful in the conceptual phase of a creative project, and it doesn’t take the place of Illustrator or InDesign.
  • Adobe Debut is a client presentation application for displaying project materials in meeting situations. Photoshop and Illustrator files can be displayed, among other Creative Suite file formats.
  • Adobe Ideas is a vector drawing application whose files can be opened in Illustrator or Photoshop for refinement. As with Collage, it can’t take the place of Illustrator and it’s useful for off-site work when a laptop isn’t an option.
  • Adobe Kuler is a tablet-based version of Adobe’s existing kuler application, previously just a web and AIR application. Users can build and share color palettes.
  • Adobe Proto builds wireframes and prototypes for websites. It’s the only app that incorporates gestures in a major way: users can draw an “x” to insert an image, or squiggly lines to create headlines and text. There are roughly 16 different gestures already created for Proto.

All the touch apps integrate with Adobe Creative Cloud and share projects and assets in the cloud, so projects can be touched by multiple apps. For example, a project can be conceived by a project manager in Collage, passed on to a designer who builds the color palette in Kuler, then to a web developer who wireframes the product in Proto, and approved by the client in Debut before moving on to final production in Creative Suite. All these apps are also built with Adobe AIR, so they could technically be deployed on the desktop, but the apps’ user interface is designed for small devices and touch screens.

All apps will be available separately for $9.99 each.

Conclusion

After all these announcements, I wasn’t sure if life will be easier or harder now for the traditional creative professional—those who design or develop with Adobe products and have been using the Creative Suite products for years. The Adobe Creative Cloud moves resources to everyone, not just the creative professionals, and the touch apps seem like they are designed for creative users who aren’t necessarily the ones putting publications to bed or deploying code to the web. Even Photoshop Touch, whose namesake is Adobe’s flagship product, feels lightweight and lean. Adobe seems to be focusing on a larger creative audience, and it could complicate things for creative professionals.

However, I like the direction Adobe is taking in marrying everything through the cloud—it had to happen eventually, and the opportunity is huge for business and also for creative productivity. The notion of web fonts being available in the cloud via TypeKit makes sense not only for web fonts but for all fonts—imagine being able to license the entire Adobe type library without installing files on your own network. Out of all this news, the Adobe Creative Cloud has the most implications for Adobe and for consumers.

Adobe Announces CS5.5, Subscriptions, Photoshop SDK and Touch Apps

Major changes are coming out of Adobe today as they announce several new products and technologies:

  • CS5.5, the next iteration of the popular Creative Suite applications for creative professionals,
  • The Photoshop Touch Software Development Kit (SDK), which allows applications using Android, BlackBerry Tablet OS and iOS to interact with Photoshop,
  • Adobe Nav, Color Lava and Eazel—three iPad apps that implement the Photoshop SDK, and
  • A new yearly upgrade cycle and subscription plans for Creative Suite products.

CS5.5 for Design: InDesign leads the way

Besides the Photoshop Touch SDK (described below) and the addition of the already-released Acrobat X, the CS5.5 Design suites have all their major new features in one product: InDesign CS5.5. The emphasis is on improving the use of the Adobe Digital Publishing Suite, which was released last fall as a tool for major interactive publications.

InDesign CS5.5 has a new set of tools dubbed Folio Producer, which allows interactive elements to be added to standard page layouts. This includes 360-degree graphics such as QTVR, embedded websites, hyperlinks and slideshows. The Folio Producer outputs a .folio file, which is digested by the Digital Publishing Suite for packaging and final distribution. If you’re not using the Digital Publishing Suite, the benefits don’t apply.

What I like a lot more are the improved authoring features for eBooks, which don’t require the Digital Publishing Suite. Support for HTML5 video and audio for eBook readers and auto-resizing images are the two main features. There’s also a way to apply character and paragraph styles to EPUB, HTML and PDF tags so, for example, a heading style can be applied to an h1 tag for HTML output and another tag for the PDF output. A new Articles panel lets you sequence content elements so they are read in the appropriate order.

Photoshop Touch SDK and Touch Applications

The Photoshop development team is releasing a SDK which will allow developers to build software that interacts with a user’s Photoshop application. Unlike the CS5.5 products, the Photoshop Touch SDK is available immediately. I’ve not looked at the various methods and functions available to applications through the SDK so I can’t tell the scope of what it can do, but the three applications developed by Adobe (below) suggest it can move artwork, color swatches and tool selection from the app to Photoshop and applications can be aware of what’s open in Photoshop.

The three applications are:

  • Adobe Nav, which makes the iPad an input surface for selecting tools in Photoshop and displays open Photoshop files on the tablet,
  • Adobe Eazel, a neat app for painting with fingers or an iPad-sensitive brush,
  • Adobe Color Lava, a color mixer that can deliver swatches to Photoshop.

I am a member of the prerelease beta team testing these three apps and have been using the shipping version for a few weeks now. I feel the three apps need some more work before they are fully mature. Eazel offers a decent painting experience—whether with fingerpainting or by brush—but the five-fingered user interface can be clunky at best and downright difficult when you’re using a brush or happen to be missing a finger. Color Lava is the best of the bunch in my opinion—the water well and mixing action is very intuitive—but I personally think it belongs as an integrated component of Eazel.

Nav was released to the beta team after the others, and we’ve had it just a few weeks. I’m not sure what its usefulness is: selecting a Photoshop tool on the iPad so you can grab the mouse and actually use it on your computer doesn’t seem helpful. Why not just click the tool with your mouse? Nav’s only other major feature is the ability to browse open Photoshop documents from the iPad and select one as the active file on the computer. This at least makes the iPad a portable window into what’s open in Photoshop, which can be useful when showing images in a meeting. However, Photoshop has to be open and your iPad and computer have to be connected via the Internet to get files into Nav.

A far better application using the Photoshop Touch SDK is the brief demo John Loiacono provided at last week’s Photoshop World event. That app demonstrated layers, layer masks, a desaturation tool and a unique “exploded layer” view. We are moving toward a “Photoshop for iPad” app, and whatever app achieves that level of photo manipulation will be very successful. I think the Photoshop Touch SDK will be the catalyst for such an app, but I’ve not seen this app materialize yet.

The three apps will be available in May 2011 on the iTunes App Store and will be priced at $4.99 for Eazel, $2.99 for Color Lava and $1.99 for Nav.

BOOK REVIEW: Two iOS App Books

This review covers two books on iPhone and iOS development: Visual Quickstart Guide: Objective-C by Steven Holzner and iPhone App Development: The Missing Manual by Craig Hockenberry. Ironically, the iPhone App Development book was published just after the release of the iPad and nowadays we call this iOS development after the operating system these devices use. This also includes the iPod Touch.

Visual Quickstart Guide: Objective-C, like most Visual Quickstart books, offers a solid introduction to the topic and many exercises to get readers familiar with the programming language. Objective-C is the native language for writing iOS applications and for awhile Apple would not accept apps written with other languages and cross-compiled to Objective-C. This has since changed but many developers believe coding with the native language makes for a better application.

The Visual Quickstart Guide teaches the basic elements of Objective-C but it doesn’t address every aspect of the language. Readers who are new to object-oriented programming will benefit more from this book, which teaches the concept and its implications in iOS development. Experienced developers who know OOP or similar languages like ActionScript 3 can learn a few things from the book but I think there are better resources out there.

The Missing Manual sets itself apart by offering beginning-to-end training for iOS development—everything from installing Xcode to selling apps from the Apple App Store. I really like this aspect of the book, and developers who want to make money with their products will find this very useful. I think there’s less emphasis on Objective-C but part of that is because Craig uses Apple’s developer tools like the Interface Builder to create the applications demonstrated in the book. The obvious downside to this is the fact that Apple’s developer tools are available only on Mac OS X computers—Windows users are out of luck, even though iOS devices are marketed to them too.

Both books are good buys, and as with most things each one offers something a little different. Objective-C is a solid introduction to the language and green developer would find it very useful. The Missing Manual is a more complete resource for iOS development and is written for the entrepreneurial developer who wants to sell apps as much as develop them.

Visual Quickstart Guide: Objective-C
Steven Holzner
Published by Peachpit Press
US $29.99
Rating: 8/10

iPhone App Development: The Missing Manual
Craig Hockenberry
Published by O’Reilly
US $39.99
Rating: 9/10

Adobe Web Apps, Part 2: BrowserLab

Adobe has become more and more aggressive in the field of web applications, producing various services like Photoshop Express and Acrobat.com to complement their shrink-wrapped software. According to Devin Fernandez, Senior Product Manager for Dreamweaver, the company’s “hosted services” strategy takes advantage of the convenience and quick development times inherent in online applications. Shorter production times means that these applications can be developed and improved faster and more often.

Betas for two new online applications were announced recently by Adobe. One is InContext Editing, a streamlined online content editing system that’s handy for Dreamweaver users. The first part of this series comprises an analysis and review of InContext Editing. The other application is BrowserLab, a service that allows website testing for multiple browsers. This practice is essential for any web designer and any tool that makes the process easier deserves a look.

Pain points

Adobe looks for “pain points” when developing products: I’ve heard this phrase more than a few times during various demos and discussions over the years. BrowserLab is Adobe’s response to several of customers’ pain points: speed, convenience, simplicity and productivity. BrowserLab is designed to improve these four points for users. The browser emulator concept is not new—BrowserCam and browsershots.org are two services similar to BrowserLab—but Adobe hopes to improve on the concept.

BrowserLab is currently in limited distribution. Adobe planned to accept only 3,500 users for the initial preview but demand was high enough that this was increased to 8,300. The service is being tweaked and improved in preparation for a full launch, at which point it will become a paid service. For now the development team is focused on improving stability and performance.

The BrowserLab experience

BrowserLab has the same professional black/gray design as most of Adobe’s other web applications. The application is easy to use, though BrowserLab has relatively few functions and doesn’t need much user interface to be effective. There are only three view modes: 1-up, 2-up and onion skin view. Onion skinning overlays one browser image on another, which is a good way to see small differences between browsers. Users can also zoom anywhere from 75% to 200% to get a close view of the results.

Onion skinning overlays one browser result with another—in this example, Designorati.com is being tested with Firefox 3 and Internet Explorer 7.
Onion skinning overlays one browser result with another—in this example, Designorati.com is being tested with Firefox 3 and Internet Explorer 7.

I like using BrowserLab, but for a product like this the big question is whether or not it can faithfully test all the browsers you need tested. At this time BrowserLab can emulate four modern browsers and one browser that I consider non-modern:

  • Internet Explorer 6 for Windows
  • Internet Explorer 7 for Windows
  • Firefox 2 for Windows and Mac
  • Firefox 3 for Windows and Mac
  • Safari 3 for Mac
BrowserLab already has most of the browsers I test for, and several others are in the works.
BrowserLab already has most of the browsers I test for, and several others are in the works.

Internet Explorer 8, Safari 4, Opera and Chrome and next up for addition to BrowserLab. I think BrowserLab needs to emulate all these browsers in order to be successful: the ability to test all needed browsers in one application is what will make BrowserLab popular. Fortunately, the BrowserLab team tells me they are working on this right now. For now BrowserLab has a limited browser set, and that’s one reason why I still use bonafide web browsers to test my websites. Dreamweaver’s Live View is also a nice tool for website testing, but it’s not always accurate.

Another reason why I test in actual browsers is because BrowserLab is not a browser emulator: it works by screen-capturing websites in various browsers and displaying the resulting images. These images are not interactive, so you can’t test JavaScript or CSS interactivity and you can’t see Flash or other animations. Flash can also give BrowserLab a false image: in one test, BrowserLab showed a Flash animation’s mask did not work in Firefox 3 for Windows. I checked it out in that browser and learned the browser applied the mask a split-second after rendering the rest of the page. BrowserLab captured the screen too soon to reveal this. Scott Fegette, Technical Product Manager for Dreamweaver tells me the BrowserLab team is looking to actual emulation of browsers in a web application, but for now they are going to stay with screen captures.

Top: A website I designed, tested in BrowserLab. Bottom: The same website viewed with the same browser being tested in BrowserLab. The Flash graphic and headlines (styled with sIFR 3) are not visible in BrowserLab but do work online.
Top: A website I designed, tested in BrowserLab. Bottom: The same website viewed with the same browser being tested in BrowserLab. The Flash graphic and headlines (styled with sIFR 3) are not visible in BrowserLab but do work online.

Top: A website I designed, tested in BrowserLab. Bottom: The same website viewed with the same browser being tested in BrowserLab. The Flash graphic and headlines (styled with sIFR 3) are not visible in BrowserLab but do work online.

Still, BrowserLab is a handy tool if my computer’s unavailable, and it’s online so I can use it anywhere. I want to see more available browsers (such as Internet Explorer 8) and it would be nice to be able to mark a particular capture as a model and have BrowserLab show where other browsers fail to duplicate it, but I think BrowserLab is on its way to becoming a good tool for web designers.

One more thing for Dreamweaver users

Dreamweaver users can leverage BrowserLab even further with an extension that allows screen capturing and testing directly from Dreamweaver CS4. The BrowserLab extension requires Extension Manager 2.1 and comes in two parts, but completing the installation process will add a BrowserLab panel to Dreamweaver CS4. From there users can send a local or server copy of the active page to BrowserLab for viewing. The combination of Dreamweaver’s Live View and BrowserLab allows users to preview dynamic interfaces, including JavaScript and Ajax, and also preview websites from behind a firewall. Other service-based solutions can’t do this.

Adobe Web Apps, Part 1: InContext Editing

Adobe has become more and more aggressive in the field of web applications, producing various services like Photoshop Express and Acrobat.com to complement their shrink-wrapped software. According to Devin Fernandez, Senior Product Manager for Dreamweaver, the company’s “hosted services” strategy takes advantage of the convenience and quick development times inherent in online applications. Shorter production times means that these applications can be developed and improved faster and more often.

Betas for two new online applications were announced recently. One is BrowserLab, a service that allows website testing for multiple browsers. This practice is essential for any web designer and in the second part of this series I analyze and review BrowserLab. The other is InContext Editing, which I first saw last year at Adobe headquarters in San Jose and has since been upgraded to version 1.5 in late April.

InContext Editing

InContext Editing is a streamlined online content editing system deployable by Dreamweaver CS4 or the InContext Editing website, incontextediting.adobe.com. While many content management systems are proprietary and others like Drupal are open source and web-based, InContext Editing is a standalone web application so it doesn’t require extra code or installed software to work—all it requires is a modern browser. The user interface has the same gray design style found in BrowserLab and other Adobe web applications, and it looks good and works well.

Editing with InContext Editing is simple and effective.
Editing with InContext Editing is simple and effective.

InContext Editing has more functionality than BrowserLab but that also creates some weak user interface elements: for example, in order to reconfigure a website’s settings you have to click its Manage Users button, which then takes you a screen where the Configure Site button resides. It makes more sense to have both buttons available from the main window. Another example is the Remove Site button, which I had to use when one of my client’s websites launched and the testing site was no longer valid. It’s possible to remove a site from InContext Editing, but it’s not clear that all users must be deleted and all invitations rescinded before the Remove Site button reveals itself.

Managing users with InContext Editing is easy, but it can be hard sometimes to find what you need to administer users or site settings.
Managing users with InContext Editing is easy, but it can be hard sometimes to find what you need to administer users or site settings.

The other difficulty I had with InContext Editing is some difficulty handling content modified with JavaScript or Ajax. I learned this after using InContext Editing with a website modified with sIFR 3, which replaces text with Flash text so designers can use fonts beyond standard web fonts. InContext Editing was set up to edit a content block with only headings and paragraphs, but it said it could not function because prohibited tags were in the content block. I learned after some troubleshooting that sIFR, which was modifying the headings, caused the fatal error even though the HTML code was not modified. InContext Editing works well for simple webpages running standard HTML code, but scripts and dynamic content can make it incompatible. Adobe hopes to improve InContext Editing’s handling of these components in the future.

Despite these usability issues, and what seems to be a lot of time loading pages and building editing screens, InContext Editing is a handy tool for web designers whose clients have small pages and want to revise some content. I like that it’s simple, quick, and doesn’t require any software installation. It’s supposed to be so easy that anyone can use it, but there’s a learning curve and I had to consult with the help files a few times.

InContext Editing + Contribute?

One thing that excited me about InContext Editing was the possibility of using it in tandem with Contribute. One of my clients in particular already uses Contribute in-house for content management and the combination of Contribute and InContext Editing would have allowed them to edit content inside and outside the office. However, it seems that Contribute CS4 will not allow editing if InContext Editing code is detected on a page. Adobe’s position is that InContext Editing is designed to make simple updates to basic webpages, while Contribute is designed for more sophisticated webpages and workgroups.

Two benefits for Dreamweaver users

Adobe has made both BrowserLab and InContext Editing especially tempting for Dreamweaver CS4 users. InContext Editing is easily deployed by Dreamweaver CS4, with editable and repeating regions available with a click in the InContext Editing panel. You can also manage the CSS classes available to clients with this panel. The code for InContext Editing regions is quite clean, with a single div tag around the editable content:

< div ice:editable="*" > Content here < /div > (spaces added for clarity)

Editable regions can be inserted with Dreamweaver CS4, very much like template editable regions.
Editable regions can be inserted with Dreamweaver CS4, very much like template editable regions.

The asterisk property for the “editable” attribute allows all available HTML formatting in InContext Editing, including strong/em, indenting, creating lists, inserting images and more. The web designer, working with Dreamweaver CS4, can restrict these however he or she chooses. Regions can also be created directly with InContext Editing from the web browser. The other treat for Dreamweaver CS4 users is the ability to set up a keyboard shortcut for invoking InContext Editing within a web browser—however, it involves editing a JavaScript file and looks like anyone with an HTML editor (or a text editor) can hack it. Here’s how it’s done:

  1. Open the ice.conf.js file. If you use Dreamweaver to set up a website for InContext Editing, this will be found in includes/ice/ by default.
  2. Rewrite the PC keyboard shortcut (found in line 43) and the Mac keyboard shortcut (found in line 60).

The future of InContext Editing

I’m curious to see how InContext Editing fares in the future, given the many choices available to web designers for editing and managing content. Adobe is currently meeting with InContext Editing customers for feedback for a version 2 to be released in the future, but we’ll see how that turns out. It’s hard to say how much InContext Editing will change from version 1 to version 2, but I think InContext Editing’s simplicity and its browser-based ease of use gives it a lot of potential. More robust editing and management tools will help InContext Editing secure a place in the web designer’s toolkit.

BOOK REVIEW: Universal Design for Web Applications

univdesign-webapps

Wendy Chisholm is co-editor of the W3C’s Web Content Accessibility Guidelines 1.0; Matt May is an accessibility engineer at Adobe and leader of the Web Standards Project Accessibility Task Force. With credentials like theirs, their book Universal Design for Web Applications has all the makings of an essential resource for web designers and developers who need their web applications to be accessible for everyone—and who doesn’t need their web applications to be accessible?

Lean but worth reading

This book is published by O’Reilly, and it seems to me that O’Reilly puts out books that are either (1) small and compact or (2) large and dense. Universal Design is one of the former, at less than 200 small pages. I actually prefer these to the larger tomes, and in this case it works great because the book is full of useful knowledge. The book’s title suggests it’s about web application design but most of it pertains to HTML/XHTML structure, forms and tables, scripts and some Ajax—all of which are just as pertinent for web designers if not more so. If you build websites for a living—but not necessarily web applications—then Universal Design is just as valuable a book for your bookshelf.

The information in this book is fairly comprehensive but not complete—the sections on structure and accessible code are fairly thorough but I wish there was more written about the process of creating such code, which is in the final chapter and only takes up a small portion of the book. It’s pretty good but experienced web designers who know next to nothing about universal design may need a little more help getting in the habit of building accessible web applications. But with the first couple chapters, which introduce and promote the concept of universal design, those in the field will have a pretty good idea of why it’s important and how to approach it on a basic level.

It’s ironic to me that web designers and developers are often manic about validation—they’ll proudly show their sites are XHTML-compliant and pooh-pooh those that aren’t—but sometimes don’t know much about all the factors involved in universal design, which is probably more important to their clientele. I would recommend any web designer or developer to pick up Universal Design for Web Applications, supplement it with online material from W3C and other accessibility resources, and change the way they construct their web products.

Universal Design for Web Applications
Wendy Chisholm and Matt May
Published by O’Reilly
US$34.99
Rating: 9/10