- And Now for Something Completely Different
- Think of It As an Enigma Machine for the Web
- All That Matters Is the Bottom Line
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Think of It As an Enigma Machine for the Web
What sets Expression Web apart from its competitors, and what makes it my chosen application for all the work I do on the web, is how it disentangles code and makes it meaningful. Experts at HTML, CSS, PHP and all the other web languages out there will tell you the difference between meaningful, semantic code and complete chaos is very small. And those same experts will tell you horror stories of projects picked up from other developers where making sense of the original code bore more resemblance to deciphering a coded message written in Sanskrit than cleaning up some stray divs. What’s needed is an Enigma Machine for the web. Enter Expression Web.
The power of Expression Web is two-pronged: It serves up standards-based code (and nothing else) and it tells you, with just one click, exactly what is happening to any element on a page.
Consider this: A client comes to you with an already built website and says “I need to change the width of this sidebar. And I also need all the links to be blue and the main headers to be all caps. Oh, and it needs to be done in one hour because we have a big presentation happening!” This could easily turn into a developer’s worst nightmare. But what if I told you that with write access to the server you could have all this done in less than five minutes? Even without ever having seen the code before? With Expression Web it is not only possible, it is the baseline standard.
When you click to select an element on a web page, Expression Web gives you the complete DOM tree (list of nested tags) for that element and also tells you what CSS styles affect it. In our example, that means if you want to change the color of the links, all you have to do is click on a link in Design View, right click the style Expression Web highlights in the Manage Styles panel, click Modify Style from the drop-down menu and make the changes necessary. The same goes for the sidebar width and the header font as well. Simply click the element, go to the highlighted style in Manage Styles and select Modify Style.
To show you just how powerful this feature is I’ve created a short video demo.
Why I use Expression Web (and why you should too) from Pink & Yellow Media on Vimeo.
Standards Based, Cross-Browser Compatible
Another major challenge for web designers and developers is the plethora of web browsers out there. Ideally these would all be based on the same set of rules (and technically they are) but in reality they are all different, and they all interpret web code in their own special way. As a result, unless you are diligent about writing code that is 100% standards based you are likely to see a divergence in how the same page is displayed in different browsers.
Using Expression Web, however, this problem becomes pretty much a non-issue. Like I said before, Expression Web creates standards-based code out of the box. In fact, the only way Expression Web will ever produce code that is not standards-based is if you manually type it in. And when you do, the application will tell you the code is not up to snuff.
If you trust Expression Web and its many code writing tools, your HTML and CSS will validate to web standards every time. That doesn’t mean your site will be perfect, and it doesn’t mean there won’t be cross-browser issues, but they will be few, far between and relatively easy to fix. And it doesn’t stop there.
It’s no secret that a large majority of cross-browser issues are caused by the different versions of Microsoft’s Internet Explorer browser and their idiosyncratic way of interpreting web code. The early versions of the browser—in particular version six—are so bad that “IE6” has become a curse word in web development circles. And even though the browsers have gotten progressively better (IE8 was close to web standards and IE9 will be standards compliant) there are still millions of computers around the world that run Internet Explorer 6 and 7 that have to be accounted for. The challenge for web designers and developers has always been that, due to the nature of Internet Explorer as an integrated part of the Windows operating system, you can only have one version of the browser installed at any one time. So to test a page or site against several different versions of the browser, you would have to either run several computers, virtual machines or use an online browser testing tool. None of these options were particularly workable or attractive.
The Expression Web team were well aware of this problem, and they created a solution: SuperPreview.
Superpreview: Cross-Browser Testing Made Simple
Integrated in Expression Web is a stand-alone application called SuperPreview that lets you test a web page against multiple browsers simultaneously. You provide the address to a page on your local computer or on the web and tell SuperPreview what browsers you want to test against. In return, SuperPreview renders the page as it would look in the respective browsers, complete with active areas, DOM highlighting and the works. Once the pages are rendered, you can hover over any element and see how it differs between browsers, and you can even use an onion-skinning technique to superimpose one browser rendering on top of another for direct comparison.
But what makes SuperPreview unique is the fact that it accurately renders browser output from Internet Explorer 6, 7, 8 in compatibility mode, and 8 as well as Firefox (if installed on your computer). And with the release of Expression Web 4 it can even render output from Safari running on a Mac through the SuperPreview online service, with more browsers to come. That means you can incorporate cross-browser testing all the way back to IE6 as part of your design and development process, weeding out code incompatibility issues as they arise, rather than at the end of the build process. It may seem insignificant, but as with Expression Web itself, SuperPreview is a huge time saver. In fact I would dare say SuperPreview is so valuable to a web designer/developer that it is worth buying Expression Web for this feature alone, even if you don’t end up using the main application at all.
You can read more about SuperPreview in my article SuperPreview: The Brave New World of Browser Testing, published in the Microsoft Expression Newsletter.