What tool do you use the most for web development? Pretty sure web developers would answer, Visual Studio/Netbeans (oops, depends on the language :p) or even Notepad++. But we, designers, we love everything visual, we need something that comes handy when creating compelling standard-based websites, something like Expression Web 3.
Yes, i am always a big fan of Expression since I heard about it from our local designer community, CABEIJO (http://cabeijo.com – site no longer active). Did you know that before Expression Suite 1.0, back in 2006 it was called “Microsoft Expression Graphic Designer, Web Designer, and Interactive Designer (now Blend)?
*btw komunitas designer ini kemana yah kok menghilang? Udah lama gitu? Kok gw baru tau..Too bad designers don’t have community anymore..*
Well now that i always use Expression Web practically on ANY website project, i’m feeling the urge of sharing :)
In this post i’m gonna point out some of the MAJOR features of Expression Web 3 from a web-designer’s perspective. It’s important to mention it because i don’t play much around the developer-tidbits on detail, such as: Working with ASP.Net / PHP sites, publishing to FTP, WebDAV, FrontPage server extensions simultaneously, Visual Studio TFS integration for source control, XSLT Support, (okay enough, i don’t know what i’m talking about :p)
So here goes the list of Expression Web features that will definitely improve your whole site-making process. In this first part I’m going to explain from the very basic feature as an introduction for beginners.
1. Cool Design Surface + Professional Code Editor = SAVES TIME!
Expression Web has a powerful design surface and manageable stylesheet panel. You can even manipulate position, paddings, size, and margins directly from the design workspace. But trust me, even designers will always gonna need to look-up onto the CODE VIEW. This is why a professional code editor with intellisense + color coding CSS-HTML-JS is always gonna be helpful for a lazy coder like me :)
And of course, the CSS-hyperlinking to the original stylesheet source is just what i need, especially when i have to switch back and forth between the HTML page and the CSS file. All you have to do is Ctrl+click on the CSS reference!
Other good improvement in Expression Web 3 SP1 now is the Code-Snippets. Try open the code-view and press Ctrl+Enter (or via Tool > Page Editor Options > tab Code Snippets), you will see options for code snippets, including Meta tags specific to IE8 and Web Slice. Yes! Creating webslices are now easier & faster than ever!
See how it automatically creates DIV with predefined class=”hslice” and id=”webslice1”, like below:
(First make sure that your copy of Expression Web 3 has been updated to the latest service pack, check in Help > About Microsoft Expression Web 3 > be sure the version is 3.0.3813.0)
2. See, Compare, and Debug Web Output Instantly
In Expression Web 3, there are two ways of previewing your sites: directly inside the editor (via Snapshot panel) and using the SuperPreview. Ask the community, I’m guessing that SuperPreview is the most popular feature in EW3 :p
My friend Ronald, Developer Advisor at Microsoft Indonesia had blogged about it, but now it got some improvement by adding the Tag Name (at bottom left) and DOM tree so you can see quickly which HTML elements went wrong. Here’s a comparison when viewing pages via snapshot panel (left pic) and SuperPreview (right pic). Both supports IE6/7/8/Firefox.
3. Rich Media Integration, REAL EASY!
In short, you can add Silverlight application (.xap) or video, Deep Zoom, Flash content, Windows Media files; via drag-and-drop controls. Yes, who doesn’t love drag and drop? I tried this when creating the homepage of Indonesia Student Portal (to be launched very soon).
Anyway, for adding Silverlight video you’re gonna need Expression Encoder, which enables you to insert high-quality video in FULL HD using IIS Smooth Streaming. Just like the Wimbledon Live Online Streaming and the King of Pop’s Memorial Broadcast back in 2009. Oh and, did you know that Silverlight wins Emmy Awards? :)
----------
So what do you think? Very basic, yes? :)
On the next part i’m going to cover some interesting new feature, so stay tune...
Cheers!