• Expression Web team blog

    SuperPreview Usability Study

    • 0 Comments

    The Expression Web team is seeking individuals with web design experience for a usability study focusing on Expression Web SuperPreview.

    In particular, we are looking for individuals with experience designing web pages (writing and diagnosing markup, CSS)  for compatibility in multiple browsers.

    Participant Criteria:

    • Participants do not need to have experience with Expression Web SuperPreview.We are looking for new users and experienced users.
    • Participants will need to sign a non-disclosure agreement (NDA).
    • Participants must be in the Redmond or Seattle area.
    • Study will take approximately 1-hour to complete.

    The usability studies will be conducted between March 26 and April 3.

    If you or somebody that you know meet the participation criteria and would like to participate, please contact justin.harrison@microsoft.com.


    Thanks!

    Justin Harrison

    Program Manager – Expression Web

  • Expression Web team blog

    Displaying pages that use NTLM authentication in SuperPreview

    • 0 Comments

    As Steven posted earlier, if you try to display a password-protected page in SuperPreview, the program instead displays the page that appears when a site visitor tries to access the page without supplying login credentials.

    I wanted to follow up Steve’s post to briefly clarify that SuperPreview does support NTLM authentication, which is commonly used by websites on corporate intranets. Pages on networks that use NTLM authentication don’t require the user to login to view the pages, instead, they rely on the site visitor’s Windows login credentials. So if your computer is on the same network as the page that relies on NTLM authentication, you should have no problems opening the page in SuperPreview. (For in depth information about NTLM, see http://msdn.microsoft.com/en-us/library/aa378749(VS.85).aspx.)

    Anna

  • Expression Web team blog

    New content portal for FrontPage users transitioning to Expression Web

    • 0 Comments

    The Expression community website has a new portal devoted exclusively to helping FrontPage users transition to using Expression Web: http://expression.microsoft.com/frontpage

    The FrontPage to Expression Web portal currently features:

    • A Getting Started area:

      menu of Getting Started articles
    • A Community Resources area that presents a different resource each time you visit the page:

      Community Resources
    • Step-by-step solutions written exclusively for FrontPage users:

      image
    • And How Do I? Videos which feature a different video each time you visit the page:

      How Do? I Videos

    The initial launch of this website was done with the input of FrontPage MVPs and Expression Web MVPs, as well as Microsoft employees. To make this portal as useful to FrontPage users as possible, we need YOUR ongoing input to ensure we’re providing FrontPage users with the resources they need to successfully move to Expression Web. To suggest article ideas and other content for the FrontPage to Expression Web community website please email fp2xweb@microsoft.com.

    Anna

  • Expression Web team blog

    Moving to Web Standards with SuperPreview

    • 0 Comments

    Internet Explorer 8 was an important release because it signaled a renewed emphasis on Web Standards at Microsoft. My team—which develops the authoring tool, Expression Web—is also pretty emphatic about Web Standards. We’re in the process of doing significant tooling (and retooling) so we can support existing and emerging specifications, reliably.

    The Expression Web team recently shipped SuperPreview for Internet Explorer a FREE tool for performing cross-browser debugging in multiple versions of Internet Explorer, as well as helping migrate sites from earlier versions of IE to Web Standards in IE8. This is a subset of the full version of SuperPreview (which also supports Firefox) and which ships with Expression Web 3. You can download SuperPreview for Internet Explorer  here: http://www.microsoft.com/downloads/details.aspx?displaylang=en&FamilyID=8e6ac106-525d-45d0-84db-dccff3fae677 or the full version of SuperPreview with Expression Web 3 here: http://www.microsoft.com/downloads/details.aspx?FamilyID=0a73a3a7-3e06-4125-b3c6-f9c10387e9cc&displaylang=en

    Expression Web SuperPreview in vertical Side-by-Side mode 
    Expression Web SuperPreview in vertical Side-by-Side mode

    As part of our product planning process, we talk to, and observe web developers in their “natural habitats.” During these sessions, it was clear that designing web pages for multiple browsers was a major pain point (and a major pain). In addition to the time it takes developers 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).
    • 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. With SuperPreview 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. SuperPreview helps web site authors address an important part of that problem—namely, how to identify and fix cross-browser layout issues.

    By default, SuperPreview comes up in side-by-side mode with the Selection tool active. This tool highlights the bounds of HTML elements using the extents calculated by the browser when it renders the page. Note, the element size and position are shown in the lower left of each screen, and the positions of the selected element are shown by the shaded outlines.

    The overlay view shown below allows users to “onion-skin” two renderings together, which helps highlight significant differences. In either of these modes, I can click on any of the other browsers in the browser list (at the screen bottom) and instantaneously see that browser rendering. Additionally, if I have based my page layout on a PSD design, I can load up the Photoshop™ file as one of my comparison “browsers.”

    SuperPreview in Overlay (Onion skin) Mode 
    SuperPreview in Overlay Mode

    In this example, there was clearly an issue with the position of the Expression logo. This appeared to be an issue with IE6.

    In the SuperPreview UI, we drew inspiration from browser-based development/debugging tools like the IE Dev toolbar. SuperPreview provides similar DOM views of the baseline and comparison browser pages. You access the DOM view by clicking on the DOM tab at the bottom of the page. Like the IE Dev toolbar, the DOM view can be used as a navigation tool by using the arrow keys, as well as a means for gathering information.

    SuperPreview in horizontal Side-by-Side mode showing the DOM tree
    SuperPreview in horizontal Side-by-Side mode showing the DOM tree

    In doing cross-browser debugging, it’s pretty easy to spot differences between pages. But, identifying the offending page element can be trickier. It’s not immediately apparent whether an element, its parent, or even a sibling is causing the problem. In the case of the misplaced logo, I used the DOM view to check the <div> containing the logo and its parent <div> for peculiarities. I also confirmed that the logo was rendering correctly in, IE7 and IE8. The position of the logo is about twice as far from the left margin as it should be when displayed in IE6.

    Since, I was clearly dealing with an IE6-specific issue, I visited one of my favorite sites that compiles IE peculiarities, positioniseverything.com (http://positioniseverything.net/explorer.html). There, right in the table of contents, was the Doubled Float-Margin bug. I’ve also had good luck with Chris Coyier’s CSS-tricks site, http://css-tricks.com/ie-css-bugs-thatll-get-you-every-time/.

    Doubled Float-Margin Bug

    As it turns out, in IE6, if you add margin to a floated element in the same direction that element is floated (float:left, margin-left, or float:right, margin-right), IE6 will double the margin width. Go figure… Fortunately, the solution is bizarre, but very simple. Setting the CSS display property to display:inline, fixed the problem.

    Expression Web SuperPreview gives Web authors a powerful tool for visualizing and debugging cross-browser layout issues. And, SuperPreview for IE is free, providing a potent way for developers to move their pages forward in a Standards-consistent fashion. Please give it a try! To learn more about Expression Web and SuperPreview, check out:

    Download SuperPreview for Internet Explorer: http://www.microsoft.com/downloads/details.aspx?displaylang=en&FamilyID=8e6ac106-525d-45d0-84db-dccff3fae677

    Somasegar’s blog on Expression Web 3: http://blogs.msdn.com/somasegar/archive/2009/06/05/expression-web-3.aspx

    Erik Saltwell on Expression Web SuperPreview:

    http://visitmix.com/News/Expression-Web-SuperPreview

    Expression Web learning resources:

    http://expression.microsoft.com/en-us/cc197140.aspx

    - Steve Guttman, Product Unit Manager, Expression Web

  • Expression Web team blog

    Why doesn't Expression Web SuperPreview work with Firefox 3.5.5 on Windows XP?

    • 0 Comments

    [Update 12/16/09: Firefox 3.5.6 has fixed the bug so it can again be used in SuperPreview.  If you followed the steps below to revert to an earlier version of Firefox, you may now turn auto-updates back on.  Firefox will then update to 3.5.6 and continue to work with SuperPreview.]

    Unfortunately, this particular Firefox update included a change that broke the ability of 3rd party applications, such as SuperPreview, to embed Firefox on Windows XP and Windows Server 2003.

    Those affected by this issue will see the error text:  "Attempted to read or write protected memory.  This is often an indication that other memory is corrupt." 

    Firefox 3.5.5 Error

    Until Firefox releases an updated version with the fix, the only solution is to roll back your version of Firefox to 3.5.4 or earlier.  To do this you will have to:

    1. Uninstall the 3.5.5 version of Firefox

    Once you've reinstalled you will need to turn off auto-updates for Firefox to ensure it doesn't update back to 3.5.5. To disable the auto-update functionality in Firefox, follow these steps:

    1. Disable your Internet connection so Firefox does not attempt to automatically update.
    2. Start Firefox.
    3. On the Tools menu, click Options.
    4. Click Advanced.
    5. Click the Update tab.
    6. Disable auto-update.
      • Click to clear the Firefox check box OR
      • Click the radio button to “Ask me what I want to do” when updates to Firefox are found.
    7. Click OK to apply the changes.
    8. Re-enable your Internet connection and restart Firefox.

    NOTE: The above is a temporary workaround as this will also stop you from picking up all further updates of Firefox. 

    The Firefox team is aware of the bug and has fixed it.  However, an updated version of Firefox containing the fix is not yet available.    We will update this blog when we have more information.

    For those interested in the technical details:

    Precise Firefox change that broke other applications:
    https://bugzilla.mozilla.org/show_bug.cgi?id=521750

    Bug logged that fixes the issue caused by the above:
    https://bugzilla.mozilla.org/show_bug.cgi?id=526586

    MSDN article including note on problems with this implementation in XP and 2003:
    http://msdn.microsoft.com/en-us/library/9w1sdazb(VS.80).aspx

    Alex Moskwa
    Program Manager
    Microsoft Expression Web

  • Expression Web team blog

    “Bring on the PHP” – SitePoint review of the Expression Web code editor

    • 0 Comments

    Raena Jackson Armitage , SitePoint Community Leader and hand-coder, recently checked out the code editor and PHP support in Expression Web 3 and wrote up a review of her experience:

    http://articles.sitepoint.com/article/expression-web-3-php

  • Expression Web team blog

    Latest version of Firefox 3.5 works in SuperPreview

    • 0 Comments

    Last month we blogged about a Firefox bug our customers encountered using SuperPreview with Firefox version 3.5.5. This bug caused Firefox 3.5 to stop working with SuperPreview on Windows XP and Windows Server 2003. With the newest release of Firefox 3.5.6, the Mozilla team has fixed the aforementioned bug. We recommend that you update to this latest version of Firefox 3.5 to use it again in SuperPreview. If you followed the steps in the previous blog post to revert to an earlier version of Firefox, you may now turn auto-updates back on.

    Michelle Rosenthal
    Microsoft Expression Web

  • Expression Web team blog

    Software update for Expression Web 2: KB957827

    • 0 Comments

    Microsoft has released an update for Microsoft Expression Web 2.0. This update fixes a problem that prevents macros from running on a Windows Vista-based client computer.

    http://support.microsoft.com/?kbid=957827

    Note: If you’ve set Windows to automatically update, the update for Expression Web 2 appears in the Office 2007 list of updates as shown in the following screenshot.

    Update for Expression Web 2

  • Expression Web team blog

    Free BETA version of Microsoft Web Platform Installer

    • 0 Comments

    Microsoft has released a free BETA version of the Web Platform Installer which corrals together all the free components you need for developing web applications on Windows Vista. To download the installer, go here: http://www.microsoft.com/web/channel/products/WebPlatformInstaller.aspx .

    The first screen of the BETA installer lets you select Complete, ASP.NET Developer, or Your Choice:

    first screen in the Microsoft Web Platform Installer Beta dialog box

    If you select Your Choice and click Next, you can select just the options you want. You can also select a profile in the Recommendations list on the Web Server tab to distill the options down to the profile that fits your development the best, including ASP.NET Developer, PHP Developer, or Classic ASP Developer:

    Recommendations in the Microsoft Web Platform Installer Beta dialog box

    Anna

  • Expression Web team blog

    CSS Layouts without the headache

    • 0 Comments

    Beck WeinholdHi, I’m Beck Weinhold, one of the newest testers on the Expression Web team and also a newcomer to the world of CSS layouts. While there have been a couple of excellent posts here recently about writing your own CSS layout from scratch, at my skill level I’m really only ready to get started with the predefined CSS layouts that Expression Web provides. If you're also new to CSS layouts, this post is for you.

    First, I should note that in version 2, there have been a few changes to the CSS generated by Expression Web for the predefined CSS layouts. One annoying problem that’s been fixed: with a version 1 layout that includes a footer and more than one column, you could easily find your footer overlapping the side column(s) if the main column content is shorter than the side column content.

    To take a look at the possibilities, launch Expression Web and choose File > New > Page. Select the CSS Layouts option in the left column.

    blog_1_new_dlg

    As you scroll through the list of layouts in the middle column, the preview on the right changes to show how content will be laid out on the page. Dark grey shading and a solid line across the middle of a region indicates that the region has a fixed width in the page layout, while light grey shading with a dotted, arrow-headed line stretching across it indicates that the region expands to fill the remainder of the browser window.

    Choosing the “Header, nav, 2 columns, footer” layout, my Design view looks like this:

    blog_2_design_view

    If you're working with the Design view of your page, make sure that your Visual Aids (on the View menu) are On as well – in particular, the Empty Containers and Visible Borders options – otherwise you’ll just see a blank page with no hints as to how the page is divided.

    The HTML for this looks like:

    blog_html_pre_stretch

    This layout doesn’t look a whole lot like the preview right now. In fact, I’m tempted to stretch the page_content div, the one that will contain most of the text, just to see how it would look. But if I do that by re-sizing the div in the Design view, I’m effectively telling Expression Web that I’d like the page_content div to fix the layout at that height – even if the content requires a larger container. You can see the result in the HTML below.

    blog_html_post_stretch

    Leaving the fixed height on the page_content div for now, I’ve added content to my page to see how the layout looks. I’ve also given background colors to the footer div and the page_content div to highlight the div placement. You can see by the background coloring that the right column content has overflowed the page_content div, which means that although the footer doesn’t overlap with the page_content div, it does overlap with the overflowing text. Not so good.

    blog_3_design_view

    Next time, instead of stretching the page_content div, I can just put some content into my page first to get a feel for how the layout works. Or I can just remove the height property from the page_content div, as I’ve done in the image below. As you can see, the page_layout div expands to fit the text and there’s no overflowing text to overlap with the footer.

    blog_4_design_view

    I’m pretty happy with the layout I’ve chosen, but I’ve decided that I don’t need the navigation container.

    To do this easily, I’ll start by clicking on one of the navigation links. In order to make sure the entire top_nav div is deleted, I’ll click on the <div#top_nav> breadcrumb at the top of the view (just below the title bar) to select the whole div, then hit the Delete or Backspace key.

    blog_5_split_view_with_notes

    In the Code half of the view, I can see that the <div id=”top_nav”> tag and its contents are gone; in the Design view, I can see that it didn’t affect the rest of the layout of the page. And if I add more pages later and need to provide navigation, I can just insert a new top_nav div tag below the masthead div, put my links there, and I’ll be in business.

    blog_6_split_view

    If you’re feeling bold after this introduction to Expression Web’s predefined CSS layouts, take a look at the recent posts that I mentioned earlier from Steve and Morten. Keep an eye out for my next post, where I’ll make my page prettier by customizing Expression Web’s predefined style sheets!

  • Expression Web team blog

    Sessions, Workshops, and Unsessions announced for Microsoft MIX 2009

    • 0 Comments

    Register now for MIX 09 which presents a slew of sessions on working with Expression programs, including:

    Microsoft Expression Web: No Platform Left Behind

    Steve Guttman, Expression Web PRINCIPAL PRODUCT UNIT MANAGER

    Come learn how to use Expression Web to build resilient standards-based sites for use across a wide range of browsers and platforms. Hear about the current version of Expression Web and also some sneak peeks at future work that will make creating great sites even easier for designers. With a focus on workflow, you will also see how well Expression Web integrates with ASP.NET and PHP.

    Web Form Design

    Come hear key considerations and best practices for Web form design based on international usability testing, eye-tracking studies, and over ten years of designing Web applications. Learn how the interaction and visual design of Web forms can make the difference between acquiring a customer and completing a transaction or not.

    From Concept to Production: Design Workflow with Microsoft Expression Studio - Christian Schormann

    Learn successful workflow models between designers and developers using Microsoft Expression Web, Blend, Design and Encoder. This session specifically focuses on creating rich Internet applications with Silverlight, and shows how the next generation of the Expression suite will make the design workflow faster, easier and richer. Explore how developers and designers can integrate and divide production tasks in a meaningful and harmonious way.

    Go Deep with Microsoft Silverlight Controls

    Learn how to encapsulate structure, animation, and logic inside custom controls that handle theming, layout, validation, and data binding. Using Microsoft Visual Studio and Microsoft Expression Blend, explore advanced design, coding, debugging, and testing techniques for building components that work interchangeably in Silverlight and Windows Presentation Foundation (WPF).

    Improving UX through Application Lifecycle Management - Chris Bernard

    Learn how you can leverage Microsoft Expression and Microsoft Visual Studio Team System to improve your overall application lifecycle, decrease your time to market, and ultimately raise the quality of your applications.

    Integrating Microsoft Expression Blend with Adobe Creative Suite -Joanna Mason

    Explore how Expression Blend integrates with the design tools from Adobe's Creative Suite. Learn how to use content from Photoshop and Illustrator to efficiently create Windows Presentation Foundation (WPF) and Microsoft Silverlight-based applications, and see a range of useful tips and tricks from one of the core Expression Blend team members.

    Optimizing Performance for Microsoft Expression Encoder  - James Clarke

    See demonstrations of how to fine tune your media for best encoding and Microsoft Silverlight playback performance. Learn encoding best practices to make sure your video playback is as fast and smooth as possible.

    The Future of Microsoft Expression Blend  - Douglas Olson

    Hear about the future plans for Expression Blend. See how Expression Blend improves the productivity of visual designers, providing better access to data and enhanced tools for interactivity. Learn how designers can be deeply engaged and remain in control of the creative decisions while enjoying improved collaboration with developers throughout the project lifecycle.

    Visual Design with Microsoft Expression Blend  - Celso Gomes

    Come learn how to use the XAML graphics features of Expression Blend to create impactful visual content. See how amazing, functional user interfaces can be created without code using a range of powerful features in Expression Blend.

    What's New in Microsoft Silverlight 3

    Joe Stegman

    Hear about some of the new experience-oriented Silverlight 3 features, and see how to build applications for Silverlight 3 using Microsoft Expression Blend and Microsoft Visual Studio.

    And much much more.

    All  Sessions:

    http://2009.visitmix.com/Agenda/Sessions.aspx

    All Speakers:

    http://2009.visitmix.com/Agenda/Speakers.aspx

    All Workshops:

    http://2009.visitmix.com/Agenda/Workshops.aspx

  • Expression Web team blog

    HTML, CSS, and JavaScript reference at your fingertips: FireScope add-on for Firefox

    • 0 Comments

    SitePoint has released the “first phase” of their JavaScript reference, and they’ve also completely redesigned their Reference Site for improved usability. To coincide with the redesign, they’ve released a handy Firefox add-on called FireScope to integrate their HTML and CSS reference (sadly not their new JavaScript reference) into Firebug and your Firefox browser:

    FireScope logo

    http://tools.sitepoint.com/firescope

    Here’s a screenshot of the new Reference panel in Firebug:

    FireScope reference panel in Firebug in Firefox

    Read the list of features on the SitePoint website to learn more about the tool:

    http://tools.sitepoint.com/firescope/

  • Expression Web team blog

    How to get 60 days out of your free 30 day Expression web 2 trial

    • 0 Comments

    The free trial version of Expression Web 2 is described as a "30 day" free trial on the FAQ for Expression Web 2 and in one of the screens that appears during installation of the program. In theory, after 30 days have passed the program should not start unless you enter a product key that you've purchased.

    In reality, the trial period ends and the trial program stops running at the end of the month that follows the month you installed the program. This means that if you download and install Expression Web 2 on July 1, 2008, the program won't expire until August 31, 2008, or 62 days later. If you install the program on July 31st, the program will also expire August 31...giving you only 32 days with the program. So if you want to get the most out of your free trial period, download the program at the start of the month!

    After the trial version of Expression Web 2 expires, don’t forget that you can get the upgrade version for only $99 if you own any one of the following:

    • Licensed copy of an earlier version of Expression Web
    • Microsoft Office - any version
    • Microsoft FrontPage® - any version
    • Quark QuarkXPress - any version
    • Adobe Creative Suite - any version
    • Adobe/Macromedia Flash or Director - any version
    • Adobe/Macromedia Dreamweaver - any version
    • Adobe GoLive - any version

    Anna

    anna_head_greenbg100

  • Expression Web team blog

    Spifftacular borders with CSS3

    • 0 Comments

    I've been reading a lot about CSS3 lately, where it's going and all the cool stuff I can't wait for browsers to implement. My personal favorite at the moment is the ability to easily use graphics for borders. Say I want to go crazy with my borders and create something like this:

    This is my spiffy box with any graphic border I want.

    To give you an idea of how we'd have to do that in CSS 2 world you would need eight individual images, and a big honkin' code block like this.

    xhtml

    <div id="mycontent">
      <div class="tb"></div>
      <div class="bb"></div>
      <div class="lb"></div>
      <div class="rb"></div>
      <div class="trc"></div>
      <div class="tlc"></div>
      <div class="brc"></div>
      <div class="blc"></div>
      <p>This is my spiffy box with any graphic border I want.</p>
    </div>

    CSS2

    #mycontent {
      margin-left: 10px;
      position: relative;
      width: 200px;
      height: 140px;
      padding: 10px;
      float: left;
    }
    #mycontent .tb, #mycontent .bb {
      position: absolute;
      height: 10px;
      width: 200px;
    }
    #mycontent .lb, #mycontent .rb {
      position: absolute;
      height: 140px;
      width: 10px;
    }
    #mycontent .tb {
      background-image:url('images/top.png');
      top: 0;
      left: 10px;
    }
    #mycontent .lb {
      background-image:url('images/left.png');
      top: 10px;
      left: 0;
    }
    #mycontent .bb {
      background-image:url('images/right.png');
      left: 10px;
      bottom: 0;
    }
    #mycontent .rb {
    background-image:url('images/bottom.png');
      top: 10px;
      right: 0;
    }
    #mycontent .trc, #mycontent .tlc, #mycontent .brc, #mycontent .blc {
      position: absolute;
      height: 10px;
      width: 10px;
      background-repeat: no-repeat;
    }
    #mycontent .trc {
      background-image:url('images/topright.png');
      right: 0;
      top: 0;
    }
    #mycontent .tlc {
      background-image:url('images/topleft.png');
      left: 0;
      top: 0;
    }
    #mycontent .brc {
      background-image:url('images/bottomright.png');
      right: 0;
      bottom: 0;
    }
    #mycontent .blc {
      background-image:url('images/bottomleft.png');
      left: 0;
      bottom: 0;
    }
    #mycontent p {
      margin: 10px;
    }

    Whew, that was an exhausting amount of typing, especially if you hunt and peck.

    Additionally, problems with the above method abound. For one it's limited to fixed pixel sizes. So if your content starts pushing the height limits of its box it's not the easiest to fix.

    Here's how it's improved in CSS3. Less code and only one image is needed.

    xhtml

    <div id="mycontentcss3">
      <p>This is my spiffy box with any graphic border I want.</p>
      <p>Only its CSS3 improved</p>
    </div>

    CSS3

    #mycontentcss3 {
      margin-left: 10px;
      float: left;
      width: 180px;
      height: 120px;
      padding: 10px;
      border-width: 10px;
      border-image: url("images/polyborders.png") 10 10 10 10 repeat;
    }
    #mycontentcss3 p {
      margin: 0;
      margin-bottom: 10px;
    }

    Fingers are much less tired in the CSS 3 version.

    If your browser has support for border-image the results below will match the top example. Otherwise you'll see a double blue border:

    This is my spiffy box with any graphic border I want.

    Only its CSS3 improved

    The new CSS3 attribute border-image is where all the magic happens. To break down the anatomy of a border-image property it's as follows:

    1. url to the image you want to use for the border
    2. pixels to use from top of image for top border
    3. pixels to use from right of image for right border
    4. pixels to use from bottom of image for bottom border
    5. pixels to use from left of image for left border
    6. stretch, repeat or round

    At first I was confused by the above too but it actually turns out to be really simple. Basically you create an image that looks like a mini version of your border box. My image was:

    Polygon Borders

    Then you specify in the 2-5 options above how many pixels you need from each edge to form your borders. It automatically does the intersections of the numbers to grab the correct corners. Then you tell it how it should render the border.

    • Stretch will take a single border edge and stretch its height or width to match the pixel dimensions you need.
    • Repeat will repeat the graphic over and over to fill the area.
    • Round will do almost the same as repeat only it will stretch the border segments individually so that you don’t have any one border graphic split in the middle.

    Additionally, unlike the CSS2 border method this has no problem easily resizing and growing based on the content inside the bordered box.

    As of July 2008, Safari and other webkit-based apps are the only browsers supporting it and you have to use the -webkit- prefix to get it. But fingers crossed we'll see other browsers hopping on board and be able to add this to our developer toolbelt.

    Cheers.
    Alex
    Program Manager, Microsoft Expression Web

  • Expression Web team blog

    Take the survey of web professionals @ a list apart

    • 0 Comments

    If you subscribe to this blog or are reading this post, chances are very good that you make a living creating websites or contributing to them in some way. If you consider yourself any of these:  “designers, developers, information architects, project managers, writers, editors, marketers, and everyone else who makes websites”, then go represent and fill out the 2nd annual survey of web publishing professionals at A List Apart: The survey closes Tuesday, August 26 so you better scurry!

    http://www.alistapart.com/articles/survey2008

    The Survey, 2008

  • Expression Web team blog

    newest member of the expression web team: steve hebert

    • 0 Comments

    Steve Hebert recently joined the Expression Web team as a Development Lead and is working out of our new Saint Paul/Minneapolis development office. We’ve added a link from our BLOG ROLL to Steve’s blog at http://codebetter.com/blogs/steve.hebert/ where Steve has been blogging about .NET and development topics for several years. Whenever Steve blogs about something of interest to the Expression Web and web development community, we’ll be sure to mirror his blog post here on the Expression Web team blog.

    Steve Hebert, Expression Web development leadSteve’s development background ranges from manufacturing and control systems to high availability hosted web applications.  Steve authored the dotMath Expression Compiler back in 2004 (still available at http://www.codeplex.com/dotMath), and has done some patent and standards work along the way.  Apparently Steve also has a black belt in karate, which should come in handy when he needs to tackle bugs in the program.  Welcome Steve!

  • Expression Web team blog

    Just What is UX Anyway?

    • 0 Comments

    Working with design & authoring software all day, every day for many, many years got me thinking that great UX is just the latest buzzword for user interface design. We all appreciate a well-designed website, a beautiful, immersive game environment, and a computer program that is intuitively designed so you can get started right away with it.

    But all of this assumes that UX only takes place only within the confines of my fine LCD monitor.

    So, it was eye opening for me, to say the least, to hear presentations at UXWEEK.com on creating engaging UX:

    • A Chicago-based theater troupe that takes the philosophy of "try hard, fail fast, try hard again" to engage their audiences with a continual stream of new plays
    • The design of Zipcar's UX, from initial customer contact, through rental/usage of the car, and then follow up
    • A game designer's perspective on the future of happiness through UX
    • Knowing demographics and your user's requirements are not sufficient to design great UX…the essential starting point, yes, but not sufficient

    I'll write more about some of these sessions in future posts (assuming that my editor lets me!).

    What this tells me is:

    • UX is about engagement with your customers and that engagement is based on communication in one form or another, maybe on a computer screen, but just as likely not
    • You, whether you're a technical writer, a user interface designer, or a performer create that user experience or part of it
    • Without your communication skills, your user's experience will be less engaging and your product, whatever it may be, will be less successful.

    So, there you have it. UX is way bigger than I thought and there are many, many more people working on UX in ways that I never thought of. Seems that's the reason they send us to conferences, no?

    As a footnote, the UX Week site is now posting slide decks and other session materials from the conference. Go check them out!

    Ed Meadows' face


    Ed Meadows
    Product Manager, Expression

  • Expression Web team blog

    Survey on Expression Web Help

    • 0 Comments

    UPDATE - 8/6/07

    The survey had ended.  Thanks to everyone who took the time to respond to this survey!

     Microsoft Expression Web team

     END UPDATE - 8/6/07

     Members of the Expression Web team have created a survey about the Expression Web Help and the printed guides that were provided in boxed copies of Expression Web. Please fill out this survey to help us provide you with the documentation you need to use Expression Web.

    You can access the survey here: https://connect.microsoft.com/ExpressionWeb/Survey/Survey.aspx?SurveyID=3457

    You can remain anonymous, or if you want us to know who you are, make sure you click Sign In at the top of the page before you fill out the survey.

    thank you!

    Anna

  • Expression Web team blog

    Expression Web available to MSDN Premium Subscribers

    • 0 Comments

    Expression Web is available starting today to all MSDN Premium subscribers. Expression Blend will also be available shortly after the Expression Studio release.

    For more information, see Listening to your feedback - Expression and MSDN. For more on MSDN Premium, see the MSDN Premium Subscription home page.

  • Expression Web team blog

    Working with xml in Expression Web

    • 0 Comments

    One of the features of Expression Web is the ability to add xml files  to your website and then to style that xml appropriately as html without needing to learn messy technologies like xslt.  One of the things we have received feedback about in the product is that it can be hard  to figure out how to use this feature with remote xml files - like rss feeds.  One of our Program Managers, Andrew Jewsbury, has written a post in his blog about how to do just this.  It's pretty neat, you should check it out.

    Erik Saltwell

    Development Manager - Expression Web

Page 5 of 5 (120 items) 12345