Friday, 15 March 2013

SuperPreview

Hi friends while working for a web page according to the requirement of  client i found many browser comapatibility issues .
According to web developers, we know that designing web pages for multiple browsers was a major pain point (and a major pain). In addition to the time it takes to preview pages in multiple browsers, there are a host of other issues:
  • Most browsers can’t have multiple versions installed side-by-side. The newest version replaces older versions. So, you can’t have IE6 and IE7 on the same machine (unless you’re using virtual machines or unstable registry hacks).
  • Many browsers support both Mac and Windows. Devs want to test in (at least) Mac Safari, which doesn’t render the same as Safari on Windows. 
  • The ergonomics of browser testing is awkward. Many devs load their site on a staging server and have a battery of machines running different browsers. They have to manually load a page in each machine and then walk to each individual machine to compare the different monitors.
We built SuperPreview to simplify the process of testing and debugging layout issues across different web browsers and platforms. You can view your pages in multiple browsers simultaneously or view how a page renders in a browser and compare it to a comp or mock-up image of a page.
When we watched web developers work, we found they always start with a single “baseline browser” as they initially design their pages. Once the page is working correctly in this browser, they begin tweaking the page to work in other browsers. So, in SuperPreview, you can load up any number of different browsers, but we’ve set it up so that you define a baseline browser. When you work in SuperPreview, you’re typically comparing a browser against this baseline rendering.
We also found that many web devs build pages from Adobe Photoshop comps. So, you can also use SuperPreview during initial design by loading a comp image to compare against your baseline browser.
SuperPreview lets you view your pages in a variety of different ways. You can view browser renderings side-by-side horizontally or vertically, or overlay them to identify differences. You can use rulers and guides to measure and highlight visual problems. You can zoom in and out of a page and see all the browser renderings update in tandem.
There are a few big differences between SuperPreview and other browser comparison tools. All of the other tools we’re familiar with are strictly “service-based,” meaning that you need to point these services at a public URL, they render the pages in specified browsers on a set of remote servers, and then send you the results. This makes them slow, and it also makes it more difficult for them to work with pages under development (on your local file system). Although we are looking at a web service as well (for Mac browser renderings, among others), SuperPreview works directly with your installed browsers—meaning, you don’t need to package or publish your pages before using it. SuperPreview also includes the IE6 rendering engine, built-in. You can use it side-by-side with other versions of IE.
SuperPreview was designed to integrate well with Expression Web. You can easily test pages at any stage in the design process, and launch SuperPreview from directly within the app.
Other browser comparison tools show you only images of different browser renderings, allowing you to visually compare them. This only gets you part of the way. It helps you to identify problems, but doesn’t help you find the element that’s causing the problem. SuperPreview couples image renderings with DOM data, letting you highlight specific DOM elements within the image, and showing you differences across browsers. It also provides element information such as position, dimensions and ID. This helps you pinpoint the element that’s causing the compatibility issue.
SuperPreview will be included as part of a future version of Expression Web. The final feature set and its availability have not been announced. The SuperPreview demo shown at the MIX09 conference was a technology preview and not a product announcement. However, because we’d like to get feedback on this technology and on its implementation, we have announced a beta version of SuperPreview. This free download will allow you to compare renderings of IE6 with whatever other version of IE you have installed on your machine. If you have installed IE8, you’ll be able to compare IE6, IE8 and IE8 running in IE7 compatibility mode, side-by-side. The final “shipping” version of SuperPreview will continue to be available for free. The Expression Web team hopes that it will be useful in helping to make the process of developing web pages for IE (and in general), faster and easier.
I found this article very useful as a web devolper ,using this tool(superpreviw) i can deliver the web page with a confidence without any browser compatibility issues.

No comments:

Post a Comment