Image: Screenshot/Webmonkey

The company sent out an email this week informing Windows Live Messenger users that the service will be going the way of Clippy. Instead users (and their contact lists) will be migrated to Skype, which Microsoft acquired in May 2011.

As with most service shutdowns, expect this one to be bumpy, especially given the relatively short notice and the fact that Skype lacks a number of features Messenger offers, including controlling a remote screen, custom emoticons and offline messages. There are already numerous threads on the Skype community forums complaining about the features lost in the move to Skype.

But thus far, complaining hasn’t stopped the transition. To get started making the switch you’ll need to download the Skype client app and then login using your Microsoft account. From there you should have access to all your Windows Live Messenger contacts. If you’re already a Skype user as well you can login with your Skype account and link it to your Messenger account.

According to Microsoft’s FAQ, between now and the cutoff date, Messenger will continue to work as it always has, though you’ll see a banner encouraging you to download Skype (provided you’re using a newer version of Messenger). If you click the banner and follow the install instruction Messenger will be uninstalled after Skype is ready to go.

After March 15, you’ll no longer be able to sign into Messenger.

Windows 8. Photo: Microsoft

When Windows 8 arrives it will be “cloud-powered”, as the Building Windows 8 blog puts it. That means the Windows Live Essentials app suite (a separate download for Windows 7) will no longer be around. Instead Metro-style apps that handle mail, photos, calendars and sharing are a default part of Windows 8 and come already connected to the cloud.

When you sign into a Windows 8 PC or tablet with your Microsoft account — that would be the account formerly known as Windows Live ID — your e-mail, calendar, contacts, messages, and shared photo albums are synced to that machine.

What’s slightly confusing about the changes is that they represent an about face not only in branding, but in goals. When Microsoft introduced the Windows Live Essentials suite of apps for Windows 7, it touted the fact that they were separate applications that could be updated more frequently than Windows itself. Now Microsoft is once again integrating the apps and their syncing components into the OS and this time around it’s touting the integration rather than the separation.

Microsoft's chart of software and services in the coming world of Windows 8.

There’s one exception to the Windows-Live-to-Metro-app migration — Microsoft’s blogging software, Windows Live Writer, which is not mentioned at all in Microsoft’s announcement. While far from the most popular of the Windows Live Essentials apps, Live Writer has a vocal and enthusiastic user base as is evidenced by the numerous comments on the Building Windows 8 blog. Microsoft did not respond to our inquiries regarding Live Writer in time for this post. [Update: Microsoft tells Wired that it will have "more info soon," but in the mean time points out that "all desktop apps work great and are supported on Windows 8, including Windows Live Writer." In other words, even if Live Writer doesn't get a Metro makeover, the standard desktop app will work just fine in Windows 8.]

To learn more about the changes and see the new Windows 8 syncing features in action, be sure to watch the video on the Windows 8 blog.

We just had a moment similar to the time we first saw content-aware scaling in action, but this time it’s even better — we’ve seen the future of programming tools and it looks awesome.

Check out the video above of Bret Victor‘s recent talk, “Inventing on Principle.” Victor has worked on experimental UI concepts at Apple and also created the interactive data graphics for Al Gore’s book, Our Choice. The video above of Victor’s keynote at the Canadian University Software Engineering Conference, captures a wonderful talk on living your life based on principles, but for many developers what’s most arresting are the software development tools demoed.

Do your current tools suddenly feel incredibly outdated? Perhaps you thought you were using a well-tuned coding machine but suddenly realize you’re really just hitting two stones together? Thought so. Sadly, the apps demoed in the video aren’t available. That’s all right, though; it just means someone needs to build them. Be sure to let us know if you do.

Lightroom 4 beta

Lightroom 4 beta is a free download available from the Adobe Labs website, but do keep in mind that this is beta software intended for testing. Be sure to use duplicates of images that have been backed up elsewhere when testing Lightroom 4.

While many of Lightroom 4′s upgrades are subtle tweaks there are some bigger changes as well, including two new modules — a new Map Module for adding and storing geodata and a Book Module for designing and printing books.

The new Map Module requires an internet connection and uses Google Maps to show satellite, hybrid and other Google Maps views. You can drag and drop images from the film strip onto the map and Lightroom will add the geodata to the image. Naturally, while that works it’s rather tedious for large imports. Those with thousands of images to add will be happy to know that Lightroom supports so-called track logs. For example, if you use a mobile app to log your image locations, Lightroom can read the data (provided the app can export it) and then attach it to your images. If your camera records geodata directly, Lightroom will use that info. Once you have the geodata added you can search images by location or browse through them using the map.

LR4 Map Module

Along with the geodata comes some new privacy settings for your images, including an option to ignore any geographic data Lightroom might find.

The other entirely new menu item in Lightroom 4 is the Book Module which does exactly what you think it does — helps you layout and typeset a book for printing. The Book Module works much like what you’d find in other software and online services: Select your images, choose from a number of templates and then start customizing. The difference with Lightroom is the level of customization possible, which includes everything from layouts to fonts to even the leading and kerning applied to fonts. Actual book printing is handled through Blurb.com (or you can export a PDF to print on your own).

Creating books in Lightroom 4

Another notable new feature worth mentioning before we dive into the revamped Develop Module is that Lightroom 4 includes much improved support for HD videos. While Lightroom 3 can import and store videos, it can’t edit or even play them back. Lightroom 4 steps up the video support. Playback is handled by some components borrowed from Adobe Premiere and Lightroom itself treats the movies as just another image. That means you can adjust levels and make basic tweaks to your video directly in Lightroom 4 using most of the tools in the Quick Develop panel (except for Crop, Highlights, Shadows and Clarity, which are disabled for video). The editing tools are obviously nowhere near as powerful as what you’ll find in dedicated video editors, but it will work for serious photographers who occasionally dabble in video.

The Develop Module

The Develop Module is the heart of Lightroom and it’s where most of the refinements in Lightroom 4 have happened. At first glance the Develop Module looks about the same, but the basic development tools have been considerably reworked. Instead of the somewhat obscure tone sliders like Recovery, Fill Light and Brightness, Lightroom 4 has been reorganized to Highlights, Shadows, Whites and Blacks. Each slider controls exactly what its name suggests.

Adobe has also changed the sliders so that all of the tone adjustments default to the middle. Drag the slider left and whichever effect you’re using gets darker; drag it to the right and it gets lighter. It’s a small change, but it makes adjusting images more intuitive and also makes it easier to get back to where you started.

The basic panel in the Develop Module. The old, LR3 is on the left, the new LR4 beta on the right

Of course while the new controls may be more intuitive and somewhat easier to use that’s really only an improvement if they’re capable of producing the same or better results. After testing them on a variety of images over the course of a few days it’s clear that the new tools are an improvement, though there’s definitely a learning curve to perfecting them. (Hint: apply your adjusts in order, from top to bottom.) And sometimes the loss of the Brightness slider is annoying. Despite Adobe’s assurances that Exposure covers the same ground as Brightness used to, sometimes it doesn’t look that way.

The new Highlights and Shadows sliders essentially do the work of the old Recovery and Fill Light sliders, respectively. In most situations the Highlights and Shadows sliders work much better than their predecessors. Highlights in particular is more useful than Recovery and actually lightens or darkens all of an image’s highlights, rather than washing out the middle highlights in kind of neutral gray color the way Recovery often did. (This is particularly noticeable in images with snow, clouds, concrete or any other situation with a wide but subtle range of highlight tones.)

Where Highlights is more powerful than Recovery was, Shadows seems more restrained than Fill Light. Indeed in some images I tested it was hard to tell any effect at all with the Shadows adjustment until it was paired with the Blacks slider. However, the subtleness of Shadows makes it perfect for adjusting shadows in darker images where more subtly is called for. If you’re just looking to create greater contrast look to the Blacks or Contrast adjustments.

In the end Highlights and Shadows are not intended to be one-to-one replacements for Recovery and Fill Light; they’re similar, but different enough that it takes some practice to get comfortable with them. However, after practicing for a few days I found that I was able to produce better results than I had on the same images using Lightroom 3.

[Note that should you export some images from Lightroom 3 to test in Lightroom 4, you may not see the new sliders in the Develop Module. Instead you'll see a small exclamation point icon at the bottom right corner of the image window. Click that icon and Lightroom will offer to upgrade your images to the "current process." Once you've converted the images the new adjustment tools will appear.]

RGB Channel adjustments

There are a number of other changes in the development panel — for example, the algorithms behind the Clarity slider have been updated to reduce halos — but perhaps the most interesting small change is the ability to make Point Curve edits to individual RGB channels. Previously this sort of fine-grained tweaking necessitated a trip to Photoshop (or similar), but now you can tweak your RGB channels right in Lightroom.

Other Improvements

There are a number of small but welcome changes in Lightroom 4 that solve some “paper cut” problems in previous releases. For example Lightroom 4 now has an option to e-mail a photo. Strange that it took four revisions to get something so simple in, but it’s there now. Another nice new change is the ability to hide the main menu items you don’t need. Outside of verifying that it works for review purposes I’ve never used Lightroom’s Web Module, so now I can stop it from taking up screen real estate — handy considering that with the Book and Map menu items the menu is occupying more space than ever.

Under the hood Adobe has made some changes to the DNG format which will affect anyone who is converting Camera RAW images to DNG format. The most significant change for Lightroom is something Adobe calls fast load data. Fast load data lets Adobe apps display images faster using just the core data, without waiting for the entire set of image data to load. Adobe claims that images using fast load load up to eight times faster. If you’re worried about backward- or cross-compatibility with other apps Adobe assures me that apps that don’t understand fast load will still be able to process those images. The new fast load feature is enabled by default.

The second change to the DNG format is the addition of a lossy compression option. Given that part of the appeal of DNG (and more generally, Camera Raw) format is that it preserves all your data it’s hard to see why anyone would want lossy compression in DNG, but it’s there if you do. (The new lossy compression option is, thankfully, disabled by default.)

Conclusion

The Lightroom 4 beta sees Adobe playing a bit of catch-up — tools like the Map and Book modules have been available in competitor Aperture for some time — but also focusing on improving the core of Lightroom, the Develop Module. It might take a day or two to wrap your head around the changes in the revamped tone adjustment tools, but once you do you won’t want to go back. Indeed that’s the biggest problem with this beta release — it’s a beta and, much as you might like to, I wouldn’t suggest using it with your actual images yet. However, Adobe tells Wired.com that the Lightroom 4 beta period will likely be somewhat shorter than the rather long Lightroom 3 beta test.

Of course, given that, at least on the surface, Lightroom 4 looks like less of an upgrade than the move from Lightroom 2 to 3, it’s worth asking whether or not Lightroom 4 will be worth the price. The answer will depend on your image workflow and whether the new adjustment tools help you develop better images. For that reason I would suggest trying the beta now and spending some time with it before the final (paid) release rolls around later this year. Keep in mind though that this is an early beta and, if past beta release are any indication, Adobe may well add some more features before Lightroom 4 is finalized.

Are you sure you want to restart?

If you’d like to experience the joys of restarting OS 2, classic Mac OS, Windows 1 or even Amiga Workbench, head on over to The Restart Page (which naturally will load and then abruptly reload). The Restart Page was created and designed by Soon In Tokyo and built by the developers at Rehab Studio.

If you journey through the various restarts in chronological order one thing that jumps out is how much less information newer startup screens offer — a simple progress bar or spinner has replaced the detailed messages and loading icons found in older systems. In many cases holding down a key at startup will display a more detailed screen, but it’s almost never the default these days.) While we’ve no desire to return to the good (bad?) old days there is something about the slow march of system extension icons across the Mac OS 8 splash screen that’s oddly satisfying, even when it’s simulated.

Twenty years ago today Bram Moolenaar unleashed Vim on the world and text editing was never the same again. Short for vi iMproved, Vim was originally written as a vi clone for the Amiga and then soon spread to just about every computing platform known to man.

Our friends over at Ars Technica have a great retrospective of Vim, including the history of Vim, vi and a nice overview of what makes Vim so powerful. Even if you’ve never used vi or Vim, you’re enjoying some of their legacy every time you use the h, j, k, and l keys for directional navigation on sites like Gmail, Google Reader and more.

If you’ve never used Vim before and would like to know what makes it different (that’s polite Vim-speak for better) than your current editor of choice, head on over to OpenVim, which has a great online interactive tutorial explaining Vim’s various editing modes and how to get started.

If you’d like to try Vim online, check out knowvim, a Javascript implementation of Vim that you can use right in your browser. If you decide to dive in and teach yourself Vim, be sure to watch Derek Wyatt’s fabulous series of screencasts: Vim novice tutorials.

I’m not going to lie to you, the learning curve for Vim is long and steep. I gave up several times before Vim finally sank in, but once you pass a certain point and Vim begins to make sense, there’s no going back.

[Written, like all Webmonkey posts, in Vim, natch.]

See Also:

• Happy Birthday Opera: The Innovative Web Browser Turns 15
• Happy Birthday WWW: The Web Is Now Old Enough To Drive
• VI Tutorial for Beginners

Adobe has released updates for several of its Creative Suite applications, including Dreamweaver and Flash. The new Creative Suite 5.5 adds some new tools designed to target tablets and mobile devices, as well as improved HTML5 and CSS3 support in Dreamweaver 5.5, Adobe’s flagship web development app.

Creative Suite 5.5 Web Premium is $1,800. For those already using CS 5 Web Premium, upgrades are $400. Adobe has kicked off a new subscription-based pricing model, with Web Premium going for $130 per month, or $90 per month if you commit to a one year contract.

What’s New

Dreamweaver 5.5 adds several new HTML5 and CSS3 tools to the mix, including a newer version of the WebKit rendering engine, which Dreamweaver uses for live previews. Dreamweaver’s WebKit renderer is now up to par with what you’ll find in the latest release of Chrome, Safari and most mobile web browsers. That means the Dreamweaver Live Preview and Multiscreen Preview features will mirror what you’ll see later in the browser.

Dreamweaver added the Multiscreen Preview panel in an earlier update, but the latest release is considerably more polished. The Multiscreen Preview panel shows your site design in desktop, phone, and tablet screen sizes, and makes it easy to tweak your CSS so that your site looks nice on any screen.

Combining the Multiscreen Preview with Dreamweaver’s new @media support means the app is considerably more adept at responsive design — that is, making sure that your site looks good regardless of what device it happens to be viewed on.

Multiscreen Preview in Dreamweaver 5.5 (click for larger image)

This release improves Dreamweaver’s ability to work with content management systems like WordPress, Joomla and Drupal. The Dynamically Related Files feature provides direct access to any page’s related files, for example, any php files used to render the current URL. While it’s a nice feature, it won’t help those of you working with lower level frameworks like Rails or Django.

The updated Dreamweaver 5.5 even turns to some outside tools to offer even more options for those targeting the small-screen world of mobile devices: Both jQuery Mobile and PhoneGap have been integrated into this release. JQuery Mobile makes it easy to add touch-based events and other mobile tricks to your site, while PhoneGap can convert your HTML, CSS and JavaScript into native mobile apps for Android and iOS. Keep in mind that both of these outside frameworks are pre-1.0 releases, and jQuery Mobile in particular is still an alpha release, so use with caution.

Among the smaller, but nice to see, additions to Dreamweaver 5.5 are support for HTML5 tags in the code hinting. You’ll also find new options to use the HTML5 doctype and more code hinting for CSS3 selectors and attributes.

Flash CS 5.5 also hops on the multi-screen bandwagon with new features to scale objects in the timeline, shared asset libraries and new publishing options for a variety of platforms — Android and iOS as well as traditional Flash movies.

The new content resizing options are especially nice and work a bit more like what you’ll find in other Adobe apps, such as Photoshop. Simply select the content you’d like to resize and either drag, or enter specific dimensions in the dialog box.

Improved resizing tools in Flash 5.5 (click for larger image)

The emphasis on mobile carries over to the new code snippet options as well. Snippets are little chunks of Actionscript designed to handle common events without forcing you to write everything out by hand. Previous versions of Flash include options like button events or data handlers. Flash CS 5.5 adds about 20 new snippets that target mobile devices — gestures, finger events, swiping and so on. Applying snippets is also easier thanks to a new floating panel display that previews code snippets and then allows you to drag and drop the code onto an object on your stage.

Verdict

There are some great new features in both Dreamweaver and Flash, but whether or not either is worth the upgrade depends on what you do with the apps. For designers this is a less compelling upgrade. There are few new tools, but the emphasis in both apps’ new features is clearly on developers working with code, particularly those coding for mobile devices.

At $400 just for the upgrade from CS 5, CS 5.5 is a lot of money for what you get. It’s a much better deal if you’re still using CS 4 or older versions, but it almost seems as if Adobe is using this upgrade mainly to push its new subscription-based sales model.

Scott Fegette, Senior Product Manager at Adobe, says that the company is moving to “a 24 month major release cycle, with interim updates.” Since this is one of those interim updates and will still set you back $400, the subscription model begins to look more appealing. Especially given that with subscriptions updates are automatic — new features are added as the are developed — there’s no waiting for a big release date.

See Also:

• Adobe Takes On Mobile World With Creative Suite 5.5
• Adobe Adds HTML5 Creation Tools to Dreamweaver
• Dreamweaver CS5 First Look: More WordPressy, More Firebuggy
• Make a Big Splash on Tiny Screens With Media Queries

Adobe has updated several of its Creative Suite applications to version 5.5, adding some new tools designed to target tablets and mobile devices. The primary interest for web developers is the improved HTML5 and CSS3 support in Dreamweaver 5.5, Adobe’s flagship web-development app.

Creative Suite 5.5 Web Premium will be available one month from today for $1,800. For those already using CS 5 Web Premium, upgrades will be $400. Adobe has also unveiled a new subscription pricing model, with Web Premium going for $130 per month, or $90 per month if you commit to a year contract.

The CS 5.5 release is unusual for Adobe, which typically releases only full-point upgrades for its Creative Suite. This time around not every application in the Creative Suite has been updated, which explains the .5 upgrade number. In those apps that have been updated, the new features almost exclusively revolve around mobile and tablet development.

For example, Photoshop gains a new Touch SDK that allows tablets and other devices to interact with Photoshop, but there are almost no new features in the app itself. Dreamweaver on the other hand does see some new features, including more support for web standards and better development tools for building mobile web apps.

Dreamweaver 5.5 adds several new HTML5 and CSS3 tools to the mix, including a newer version of the WebKit rendering engine, which Dreamweaver uses for live previews. Dreamweaver’s WebKit renderer is now up to par with what you’ll find in the latest release of Chrome, Safari and most mobile web browsers.

Dreamweaver has added some HTML5 love to its “starter templates,” some of which now use HTML5′s semantic tags to layout your content. For example, there’s a new template built with aside for sidebars and article for blog posts. You’ll also find new options to use the HTML5 doctype and code hinting for all the new HTML5 tags. Similar code hinting is available for CSS3 selectors and attributes.

The Dreamweaver team has also embraced what’s fast becoming the tool of the moment for savvy web developers — CSS3′s @media queries. Media queries make it easy to serve up different site designs based on the screen width of the current browser. (See our earlier write-up for more on using @media.)

Dreamweaver added the Multiscreen Preview panel in an earlier update, but the latest release is considerably more polished. The Multiscreen Preview panel shows your site design in desktop, phone, and tablet screen sizes, and makes it easy to tweak your cascading stylesheets so that your site looks nice on any screen.

The updated Dreamweaver 5.5 even turns to some outside tools to offer even more options for those targeting the small-screen world of mobile devices: Both jQuery Mobile and PhoneGap have been integrated into this release. JQuery Mobile makes it easy to add touch-based events and other mobile tricks to your site, while PhoneGap can convert your HTML, CSS and JavaScript into native mobile apps for Android and iOS. Keep in mind that both of these outside frameworks are pre-1.0 releases, and jQuery Mobile in particular is still an alpha release, so use with caution.

Also worth noting, Adobe has released Flash Pro 5.5 which is primarily geared to those hoping to write mobile apps for Android and iOS without delving into separate native SDKs.

For more info on everything that’s new in Web Premium, check out Adobe’s series of videos (Flash, natch) on the new features.

See Also:

• Adobe Adds HTML5 Creation Tools to Dreamweaver
• Dreamweaver CS5 First Look: More WordPressy, More Firebuggy
• Make a Big Splash on Tiny Screens With Media Queries

There’s a new conversion tool for fans of Adobe’s popular Illustrator desktop publishing app that lets developers export their vector drawings and animations as HTML5 code that runs natively in the latest web browsers.

The new tool is called Ai>Canvas, and it does exactly what the name implies. You can take any vector illustrations you’ve made in Adobe Illustrator and export them as 2D graphics that can be drawn on web pages using the HTML5 Canvas element. It can even animate your drawings.

The plug-in can handle gradients and transparencies, complex pattern fills, drop shadows, complex line styles and text, exporting everything as HTML5 Canvas code. In cases where your illustration contains something that can’t be done in Canvas (like an opacity mask) the plug-in rasterizes that bit and positions it properly.

The plug-in also supports commands for animation. You can add rotation, object scaling, fades, and movement along a path. All of your parameters are defined inside Illustrator, but when you export to HTML5, you can tweak the resulting web code to fine-tune the results. You can also add interactions, like sounds, or click events.

The plug-in works in Illustrator for Creative Suite versions 5, 4 and 3. There are versions for Windows and Mac OS X.

Oddly, it doesn’t come directly from Adobe. It’s a product of Microsoft’s Mix Labs, an initiative the company has set up to experiment with open web technologies. Microsoft has taken a larger interest in open web standards ever since work began on building in support for HTML5 and advanced web technologies into Internet Explorer. The next version, IE9, is already in beta, with the final version due some time next year.

The creator of the plug-in, Microsoft developer and platform evangelist Mike Swanson, is also the author of the XAML exporter for Illustrator. He got interested in HTML5 and Canvas after a passionate conversation about the technology with his co-worker, Thomas Lewis. You can read the whole story — and see some of his working examples and test files — on Swanson’s blog. Lewis has written his own post, as well.

Adobe Labs recently released an SVG pack for Illustrator which can export drawings as SVG that run in browsers that support the format. But this new Ai>Canvas exporter uses HTML5 Canvas, which is quickly becoming widely adopted by developers working on games and virtual worlds that run in the browser. Check out the Asteroids and Rumpetroll experiments for some cool Canvas work.

See also:

• Tips and Tricks for Better HTML5 Canvas Animations
• Play Pac-Man in HTML5
• Take a Peek Into Rumpetroll’s HTML5 Pond

The following tutorial comes to us courtesy of Adobe. The company introduced some new enhancements to its BrowserLab service last week to improve its cross-browser testing abilities, and this is an overview of how to use some of these enhancements.

We told you about BrowserLab here on Webmonkey when it first showed up as part of Dreamweaver CS5 in April. It’s a hosted service that lets web developers preview their work across multiple browsers and operating systems in a single environment. Since it’s a hosted service, Adobe can update the backend with the latest code from all the popular browser engines as they’re updated in the real world.

It integrates fully with Creative Suite 5, so if you’re using Dreamweaver, you can launch BrowserLab previews at any point in your workflow and test your live code against all the major browsers.

Adobe may eventually turn BrowserLab into a paid service (the cost will likely be between $200-300 per year), but if you sign up for access before April 30, 2011, you can secure an account for a full year at no charge. All you need is an Adobe ID login, which is free.

The new features of the include a BrowserLab add-on for Firebug and the ability to smart-align screenshots. There are also some further integrations with Creative Suite 5. To walk us through using these new features, Webmonkey has collaborated with Scott Fegette, a technical product manager for Dreamweaver and BrowserLab.

So, take it away, Scott.

Testing Pages With the BrowserLab Add-On for Firebug

The ability to use BrowserLab in any Flash-enabled browser has always been one of BrowserLab’s benefits, but the only way you could get to a screenshot of anything aside from the initial page as it loaded (like interactive menus/states/content/etc.) was to use Dreamweaver’s BrowserLab integration to send the current state of your page –- with edits and interactive elements -– directly to BrowserLab.

Using the new BrowserLab for Firebug (alongside the magnificent Firebug plug-in itself) within Firefox allows you to send the current state of your local page in Firebug – including design and CSS tweaks you may have made directly in Firebug – right up to BrowserLab and see how that handy hack you just added works across all the browsers.

This new Firefox plug-in will help you be effective with BrowserLab whether you’re in Dreamweaver or Firefox, and make the smooth BrowserLab experience more attainable within any workflow you may have established for yourself.

Once it’s installed, right-click the BrowserLab icon on the lower right corner of your browser, or right-click the page you’re viewing. You can also use the “Tools” menu.

Here’s a video that provides a more in-depth look at the Firebug integration:

“Smart Align” your screenshots

The new Smart Align feature lets you specify an alignment point on one screen shot, and then align all of your other screen shots to that point.

You’ve had the ability to custom-register your screenshots in BrowserLab for a while now. You just drag out from the upper left corner of your rulers in 2-up view and adjust for page-level offsets directly.

The idea was to let you be able to adjust for page-level misalignments and focus on a particular area of your page or application accurately, particularly within Onion-Skin View, where a page-level offset will ruin any changes of a “clean” view of your pages together. But in practice, the workflow was clunky, hard to master and ultimately inefficient. This feature has been redesigned, here’s the new workflow.

Click the Alignment icon. You’ll immediately get a “virtual loupe” you can drag across the current screenshot and find the area you’d like to align everything to. Finding a good, clear area like a corner or recognizable markup element is best -– particularly one you know will be reasonably consistent across browsers.

Then, either choose to align everything to that point, or reset your alignment (i.e. your zero point) to that point. By choosing to align all, you’ll get a quick status window that lets you know the progress (this does take some horsepower), and the accuracy of the matches BrowserLab finds.

And once it’s completed, you should be able to flip into Onion-Skin View and see that particular area of your page perfectly (or very close to perfectly) aligned with the other screenshots. This truly allows you to adjust for global inefficiencies and really use BrowserLab for some minute, fine-grained detail work.

BrowserLab goes local

I’d also like to talk about a feature Adobe launched in May that enhances BrowserLab’s integration with Dreamweaver. When testing content in Dreamweaver’s Live View using BrowserLab’s Local setting, BrowserLab “sees” what Live View sees. This lets you test content that you’re working on privately without publishing it to the internet, such as sites on your local web server. You can also test local content served by intranet web servers and content management systems like WordPress, Drupal or Joomla.

This works by securely pushing content to the BrowserLab service and ultimately delivering that content into the list of available browsers. BrowserLab leaves you in full control of what content is allowed to leave your system via permission settings, which lets you maintain an allow/deny list of URLs.

Also, when content is requested by a page you’re testing, BrowserLab references that list before pushing that content to the BrowserLab servers. If a URL isn’t in the allow/deny list, you’ll be prompted before uploading the content. The allow/deny list works with partial URLs too, meaning that the first portion of a URL must match the entire URL stored in the list.

You can set your file location preference and adjust permission settings in Dreamweaver.

If you’re new to to BrowserLab, try it out for free. As a part of the Adobe CS Live family of online services, you’ll receive 12 months of complimentary access.

This tutorial was authored by Scott Fegette, a technical product manager in Adobe’s Creative Suite Web business. He manages Adobe Dreamweaver and BrowserLab.