Tag Archives: Tablet

Smooth as Butter Animations in the Visual Layer with the Windows 10 Creators Update

The Windows 10 Creators Update marks the third major release of the Windows UI platform APIs. With each release, an attempt is frequently made to simplify features introduced in prior releases. This encourages Universal Windows Platform (UWP) developers to standardize on these features. The new hide and show implicit animations are an example of this.

At the same time, too much standardization can potentially lead to conformity, so with each new release more powerful visual features like the new custom animations are also added, which allow developers who are willing and able to dive into them to customize their user interfaces and stand out from the crowd. This inherent tension between ease of use and the power to customize rewards developers for their efforts while also making sure that no one gets left behind.

Hide and show animations for page transitions

Page transitions, often accompanied by state transitions as visual elements, are added to the visual tree of the new page. In fact, a lot of interactivity in UWP simply involves deciding which content to show and which content to hide as the state of the app changes. More often than not, this is tied to changing the value of the Visibility properties of the elements on the screen.

In the Creators Update, two new implicit animation techniques have been added to help you make these transitions more fluid: ElementCompositionPreview.SetImplicitShowAnimation and ElementCompositionPreview.SetImplicitHideAnimation. Whenever a UIElement is loaded or when that element’s Visibility property is set to Visible, the implicit animation associated with it using SetImplicitShowAnimation will play. Similarly, whenever the user navigates away from a page or when a UIElement is hidden, an animation associated with it using the SetImplicitHideAnimation method will be invoked. These two mechanisms make it easier for you to include motion as an inherent aspect of all your visual elements, while providing a seamless experience for your users.

Connected animations

Implicit animations are great for animating controls inside a page. For navigation transitions between pages, however, the Visual Layer provides a different mechanism known as connected animations to help you make your UI even sweeter. Connected animations help the user stay oriented when she is performing common tasks such as context switching from a list of items to a details page.

The Windows UI platform APIs provide a class named the ConnectedAnimationService to coordinate animations between the source page and the destination page during navigation. You access the service by calling the static GetForCurrentView method. Then in the source page, you invoke PrepareToAnimate, passing in a unique key and the image that should be used for the transition animation.


ConnectedAnimationService.GetForCurrentView().PrepareToAnimate("MyUniqueId", image);

In the destination page, you retrieve the image from your ConnectedAnimationService service and invoke TryStart on the ConnectedAnimation while passing in the destination UIElement.


var animation = ConnectedAnimationService.GetForCurrentView().GetAnimation("MyUniqueId");
if (animation != null)
{
    animation.TryStart(DestinationImage);
};

In the Anniversary Update you did not have much control over this animation technique. Everyone got pretty much the same standard one. With the Creators Update, on the other hand, you have lots of new superpowers to personalize your transitions with:

  • Coordinated animations
  • Custom animations
  • Better image animations

Just to reiterate the point made in the introduction, the goal in designing the Windows UI platform APIs is to provide an awesome experience out of the box so you can copy the standard samples and get beautiful, fast and visually appealing visuals. At the same time, this shouldn’t ever take away from your ability to personalize the user experience to create something truly unique and wonderful with powerful new tools, like coordinated animations and custom animations.

Coordinated animations

A coordinated animation is a type of animation that appears alongside your connected animation and which works in coordination with your connected animation target. A coordinated animation gives extra visual flair to your page transition.

In the coordinated animation sample above, caption text that is not present in the source page is added to the destination page. The caption text is animated in tandem with the connected animation. We are doing two things here (in designer terms): providing context between the source and the destination using our connected animation while also adding visual interest with a coordinated animation at the destination. In user experience terms, though, all we’re doing is making the app’s transition animations look really cool.

Coordinated animations are fortunately also easy to implement. The TryStart method of the ConnectedAnimation class provides an override that allows you to pop in an array of visual elements you want to animate in a coordinated fashion. Let’s say that your caption text is in a visual element that you’ve named “DescriptionRoot.” You can add this as a coordinated animation by tweaking the previous code like so:


var animation = ConnectedAnimationService.GetForCurrentView().GetAnimation("MyUniqueId");
if (animation != null)
{
    animation.TryStart(DestinationImage, new UIElement[] { DescriptionRoot });
};

That’s a lot of power packed into a little argument.

Custom animations

By default, the connected animations in the navigation sample move in a straight line from the origin position in the source page to the target position in the destination page. If you select a box in the far-left column, it will move more or less straight up, while if you select a box in the top row, it will more or less move directly left to get to that target position. But what if you could put some English on this?

You can with custom animations, introduced in the Creators Update. The custom animations feature lets you modulate your transitions in four ways:

  • Crossfade – Lets you customize how elements crossfade as source element reaches destination
  • OffsetX – Lets you customize the X channel of Offset
  • OffsetY – Lets you customize the Y channel of Offset
  • Scale – Lets you customize scale of the element as it animates

In order to customize a particular part of a connected animation, you will need to create a keyframe animation and add it to your page transition using the SetAnimationComponent call like so:


var animation = ConnectedAnimationService.GetForCurrentView().GetAnimation("MyUniqueId");

var customXAnimation = Window.Compositor.CreateScalarKeyFrameAnimation();
customXAnimation.Duration = ConnectedAnimationService.GetForCurrentView().DefaultDuration;
customXAnimation.InsertExpressionKeyFrame(0.0f, "StartingValue");
customXAnimation.InsertExpressionKeyFrame(0.5f, "FinalValue + 25");
customXAnimation.InsertExpressionKeyFrame(1.0f, "FinalValue");

animation.SetAnimationComponent(ConnectedAnimationComponent.OffsetX, customXAnimation);

Note that you use expressions to get the starting and ending values of the connected animation.

Awesome image animations

The Creators Update also introduces improved image interpolation for connected animations where the image size and even the relative dimensions are changing between the source and the destination—for instance transitioning from a square to a rectangular image.

This interpolation happens automagically so you have less to worry about.

Implicit animation support for property sets and shadows

Finally, animation capabilities are also extended in the Creators Update by allowing you to apply implicit animations to property sets and shadows.

This change provides developers with even more creative flexibility and the ability to modify shadows in interesting new ways, as shown in the code sample below.


var shadowBlurAnimation = compositor.CreateScalarKeyFrameAnimation();
shadowBlurAnimation.InsertExpressionKeyFrame(1.0f, "this.FinalValue");
shadowBlurAnimation.Duration = TimeSpan.FromSeconds(1);
shadowBlurAnimation.Target = "BlurRadius";

//Associating animations with triggers 
implicitAnimationShadow["BlurRadius"] = shadowBlurAnimation;
implicitAnimationShadow["Opacity"] = shadowOpacityAnimation;
implicitAnimationShadow["Scale"] = shadowScaleAnimation;

implicitAnimationVisual["Translation"] = translationAnimation;
            

//Applying Implicit Animations to objects 
content.Properties.ImplicitAnimations = implicitAnimationVisual;
shadow.DropShadow.ImplicitAnimations = implicitAnimationShadow;

Wrapping up

The visual power being made available to developers through the Windows UI platform APIs have basically always been a part of the UI Framework. They just haven’t always been accessible until now. Think of this as a UI nuclear reactor being handed over to you to play with. With this awesome power, however, also comes the responsibility to create sweet UI and beautiful interactions. Go forth and be amazing.

To learn more about the topics covered in this post, you are encouraged to voraciously consume the following articles and videos:

Read More

Windows Template Studio 1.1 released!

We’re extremely excited to announce the Windows Template Studio 1.1. In partnership with the community, we’ve been cranking out and iterating new features and functionality. We’re always looking for additional people to help out and if you’re interested, please head to our GitHub at https://aka.ms/wts.

How to get the update:

There are two paths to update to the newest build.

  • Already installed: Visual Studio should auto update the extension. To force an update, Go to Tools->Extensions and Updates.  Then go to Update expander on the left and you should see Windows Template Studio in there and click “Update.”
  • Not installed: Head to https://aka.ms/wtsinstall, click “download” and double click the VSIX installer.

Improvements to the Wizard:

  • Page Reordering
  • The first page doesn’t have to be the Blank page
  • Renaming of pages and background tasks
  • Offline improvements
  • Initial work for supporting localization
  • Code analysis was added

Page updates:

  • Grid page added
  • Chart page added
  • Media/Video page added
  • Web View page has been enhanced

Feature updates:

  • Store SDK Notifications added
  • SettingStorage now has a binary save option (not just string based)

Template improvements:

  • Navigation panel moved to UWP Community Toolkit
  • Styling adjustments
  • ResourceLoader performance improvement

For a full list of issues fixed in the 1.1 release, head over to Github.

 What else is cooking for next versions?

We love all the community support and participation. We’re partnering with additional framework Caliburn.Micro and have a branch currently under development with Nigel Sampson. We’re talking with Prism and Template 10 to see how those frameworks can also be added in. In addition, here are just a few of the things we are currently building out:

  • Fluent design in the templates
  • Project Rome features as options for your project
  • Right-click->add support for existing projects
  • Localization in the wizard
  • Accessibility supported in both wizard and in the templates

If you want to help out, please head over to https://aka.ms/wts.

Read More

Sweet UI made possible and easy with Windows.UI and the Windows 10 Creators Update

Since its original debut with the Windows 10 November 2015 update, Windows.UI.Composition has been empowering developers to build fast, beautiful, sweet user interfaces in UWP and has been providing enhancements with every subsequent Windows release. At Build 2017, we revealed what all of this continuous work has been leading up to: The Fluent Design System (aka ‘Project Neon’).

Moving from classic ‘Flat Design’ to Fluent Design requires the visual and performance capabilities that the Composition APIs offers along with the interop features that let you draw on this power from your XAML layer. In case you are not yet familiar with the concepts behind the Composition APIs, here’s a quick refresher on what the Composition APIs are all about.

The Windows.UI.Composition namespace allows Universal Windows Platform (UWP) developers to use a new Visual Layer that will get them closer to the metal, graphically speaking, while still using familiar technologies like XAML and C#. By getting closer to the metal, actually down to the system compositor level, developers are able to get great visual performance and custom UI experiences. By working through the XAML layer, developers get the ease of use they have come to expect out of UWP. This is basically a best of both worlds scenario that puts great responsibility in the developer’s hands. And with great responsibility, as we all know, comes great power.

So why do you need all these graphical and UX superpowers? In addition to giving pizazz to your UWP apps, access to the system compositor level also helps your users to accomplish their tasks faster and more fluidly. For instance, when you use Composition effects to blur a background in response to a click, you are focusing the user’s attention on her current task and removing distractions. This is the sort of subtle UI implementation that actually makes your user’s life easier – and it works best when your user doesn’t even know that you did anything for them. They are just left with the impression that your app is easy to use and feels fast, even if they can’t exactly put their finger on the reason.

The Visual family

To better understand the basic principles of Windows.UI.Composition, it’s important that we also introduce you to the visual family. In order to get fast and fluid effects, you need direct access to something called the system compositor (sometimes also referred to as the DWM). The system compositor is agnostic to the UI thread and doesn’t really care about being on the UI thread or blocking threads. Things happen very quickly at the system compositor level, where everything that is about to be sent to the display screen gets put together. This is also where you get to add additional effects if you want to just before shipping all your visuals to the display.

The visual family lives down at that compositor level where things happen rapidly. The visual family is made up of Visuals, ContainerVisuals and SpriteVisuals. The SpriteVisual class inherits from container visual, and the ContainerVisual class inherits from the base Visual class. There is also a Compositor class which acts as the senior member of the visual family. It quite literally creates visual objects if you need them and also manages the relationship between an application and the system compositor process.

The visual family is a lot of fun. Let’s say your XAML, many levels above, has a Grid object. That Grid will have a member of the visual family assigned to it. In technical parlance, we say that the Grid is backed by a visual. Once you grab hold of this backing visual, you can start to animate it using the composition animation system. If it is a ContainerVisual, then you can add additional visuals to it. Finally, you can also create sprite visuals, using the compositor factory class, in order to add brush effects to your visual using the Windows.UI.Composition effects system.

What’s new for sweet UI in the Windows 10 Creators Update

Several highly requested UI.Composition features have been added in the Creators Update to support fast and fluid UI as well as the Fluent Design System, for instance:

  • SVG support
  • Normal and Virtual Surfaces
  • Hover Interactions
  • Implicit Show and Hide
  • Expression Helpers
  • Offset stomping fix

At first these can seem like small disconnected improvements. Brought together, however, they will make creating beautiful UI both faster and easier.

XAML support for static SVG files

Vector images are often better for icons and logos because they can be resized without losing image quality. Before the Windows 10 Creators Update, however, vector graphics were not supported in XAML and working with iconography in UWP typically involved multiple versions of every image to adapt for multiple DPIs.  Now that that problem is solved, not only does XAML support static SVG files, but they also work with the Composition APIs.

Normal and virtual surfaces

The CompositionDrawingSurface has been a core component of the Composition APIs since the beginning, facilitating interop between XAML and Direct2D or Direct3D. The Creators Update is introducing the CompositionVirtualDrawingSurface for situations where only a portion of the content needs to be shown to the user at any given time. It basically bridges the concepts of graphics culling in video games and the development of infinite lists in desktop enterprise apps.

Independent hover interactions off the UI thread

One of the most powerful things about the Composition APIs is that they allow effects and animations to run independently of your main UI thread at 60 frames per second. With the Creators Update, this feature will also apply to hover animations in order to light up the many pointer activated effects that are a major part of fluent design.

There is also a subtle computer etiquette benefit to this new feature. Have you ever watched a busy animation play while your app’s UI was hanging and tried to move your mouse around in circles to try to make the animation go faster, but it has no effect? That is now a thing of the past.

Implicit show and hide

If you look at the code behind any UWP app, you will likely find that a large portion of UI code is devoted to setting visibility properties on UIElements in order to alternatively hide and show content. With this understanding, the Composition APIs now allow you to associate animations with your visual elements that are implicitly triggered when you hide or show them.


    ElementCompositionPreview.SetImplicitShowAnimation(MainContent, mainContentShowAnimations);
    ElementCompositionPreview.SetImplicitHideAnimation(MainContent, mainContentExitAnimation);

Implicit hide and show animations allow you to continue using this basic UI metaphor while also making it easier to create elegant visuals around them.

Expression helpers

Expression animations provide a way to create mathematical relationships between composition objects that can then be used to drive animations. The results of applying expression animations can often be breathtaking.

One piece of feedback we received about how we implemented expression animations is that it depends heavily on long strings of text like the following:


  rotationAnimation.Expression = "ACos( ( (A.Offset.X * B.Offset.X) + (A.Offset.Y*B.Offset.Y) + (A.Offset.Z * B.Offset.Z) ) / ( Length(A.Offset) *  Length(B.Offset) ) )";
  lineVisual.StartAnimation("RotationAngle", rotationAnimation);

The phrase “magic number” may even have been raised with respect to this. Just in time for the Creators Update, the Expression Builder Library is being introduced to provide you with type safety, IntelliSense and autocompletion as you create your own amazing expression animations.

Translation property

In earlier versions of the Composition APIs, there was a complication in the way UIElement properties were shared between the XAML layer and the Visual Layer that could cause the actual position of the visual to be overwritten or “stomped” in response to layout changes. While there was a workaround previously, there is now an actual fix with the new translation property. To prevent offset stomping, you now just need to enable the new Translation property through the ElementCompositionPreview class.


ElementCompositionPreview.SetIsTranslationEnabled(Rectangle1, true);

This is one of those issues that, if you’ve run into it before, you will feel a slight sense of relief. Just add a mental bookmark for yourself about the Translation property until you need to use it.

The sample gallery

The best way to deep dive into Windows.UI.Composition is by pulling down the sample code that the Composition team created and published to Github. The Windows UI Dev Labs samples, as they’re called, are extensive and visually rich. The samples extend from simple photo effects to complex parallax animations on XAML controls.

Don’t hesitate. It’s hard to really grasp the magnitude of the visual capabilities you are getting with Windows.UI.Composition until you see for yourself all that it empowers you to do.

Wrapping up

In addition to diving into the sample gallery on Github, which is highly recommended, you can also learn more about Windows Composition through the following articles, videos and blog posts.

Read More

Monetizing your app: Set your COPPA settings for your app

The Children’s Online Privacy Protection Act (COPPA) prohibits operators of commercial websites and online services (including mobile apps) from targeting children below the age of 13 using targeted ads. The Dev Center provides an option for an app developer to specify whether an app or ad unit is targeted to children.

We reminded our developer community back in 2015 to set their application COPPA settings, but several developers have not set their COPPA settings correctly. Doing so greatly affects the revenue that a developer can earn on apps that are not targeted to children under the age of 13.

If a developer selects the COPPA compliance option that his app is directed at children under 13, Microsoft will disable its behavioral advertising services when delivering advertising to the app. If a developer’s app is directed at children under the age of 13, he or she must select this option in “Monetize with ads” under the Monetization section in Dev Center for that specific application.

However, if your app does not target children under 13, then targeted ads are a great way to monetize, so make sure you select the right COPPA setting depending on your app’s content and target audience.

Note that developers may have other legal obligations under COPPA. You should review the FTC’s guidance and consult with your legal counsel regarding COPPA obligations.

Stay tuned for additional tips to increase ad monetization!

Read More

Save the date: Microsoft Edge Web Summit 2017 comes to Seattle on September 13th

We’re thrilled to announce that our third annual Microsoft Edge Web Summit is coming to Seattle on September 13th, 2017! Registration opens next month on dev.microsoftedge.com.

Microsoft Edge Web Summit is your one stop to see what’s next for the web on Windows. Join us for a jam-packed day of energetic technical sessions, where we’ll take a closer look at what’s new and what’s next for Microsoft Edge. We’ll dive deep into what’s new in EdgeHTML, the Chakra JavaScript engine, and the user experience of Microsoft Edge.

You’ll learn how to use exciting new web platform features like Service Worker, Web Authentication, and CSS Grid to build modern, performant experiences with native-like capabilities. And you’ll have an opportunity to try out next-generation experiences built with technologies like Progressive Web Apps, WebVR, and lots more.

Best of all, you’ll find great opportunities for networking during and after the event. You’ll make new friends and valuable connections with passionate developers from the Seattle web community and around the world. You’ll also get to know the team that builds Microsoft Edge, and make sure your voice is heard as we chart our course for future releases.

Representatives of our Quality team will be on hand to help debug issues with sites and chase down bugs in the platform, and experienced web performance experts will be standing by to squeeze that extra ounce of efficiency out of your code.

We’ll have lots more to share next month – in the meantime, mark your calendar now! We can’t wait to see you there!

Kyle Pflug, Senior Program Manager, Microsoft Edge

Read More

How to distribute your existing Desktop Applications via Windows Store to Windows 10 PCs – including the new Windows 10 S configuration

Overview

Windows 10 S is a specific configuration of Windows 10 Pro that offers a familiar, productive Windows experience that’s streamlined for security and performance. By exclusively using apps in the Windows Store and ensuring that you browse safely with Microsoft Edge, Windows 10 S keeps you running fast and secure day in and day out. Windows 10 S was inspired by students and teachers and it’s the best Windows ever for schools. It’s also a great choice for any Windows customer looking for consistent performance and advanced security. By limiting apps to those in the Windows Store, Windows 10 S is ideal for people who have everything they need in the Windows Store and prefer the peace of mind that comes with removing the risk of downloading apps from other places.

What do I do with my existing non-Store app? Desktop Bridge is the answer

With the Desktop Bridge you can easily package your current desktop application or game as an .appx, distribute through the Windows Store and target all Windows Desktop devices including Windows 10 S to increase your user reach and easier monetization.

You can package any desktop application such as: WPF, WinForms, MFC, VB6, etc.

Once completed, your users will enjoy from smooth installation and update experiences: Clean, simple and fast install/uninstall updates via differential packages, streaming and many more.

Now you can also modernize your app with the Universal Windows Platform (UWP) to increase user engagement and reach all Windows devices.

We have a lot of customers that already went through the process such as: Kodi, Slack, Evernote, Adobe Photoshop Elements 15 and many others.

Here are few customers that shared their stories:

  1. MusiXmatch is the world’s largest lyrics platform with millions of lyrics available online and more than 50 million users on various platforms
  2. Tale of Wuxia (侠客风云传) is a traditional desktop Win32 role-playing game (RPG) that was created by Heluo Studio
  3. CLIP STUDIO PAINT is the leading paint tool software that supports creation of animation and manga

A quote from Evernote:

“The Desktop Bridge vastly simplifies our [Evernote] installer and uninstaller. It also opens up UWP APIs including Live Tiles and notifications. And having the full-featured Evernote app in the Windows Store means future improvements will reach users faster.”

—Seth Hitchings, VP Engineering, Evernote

What should I do next?

  1. Register as an app developer in the Windows Dev Center
  2. Prepare to package your application
  3. Sign up and get started using the Desktop Bridge
  4. Package your current desktop application as an .appx
  5. Test your Windows app for Windows 10 S, you can also check out this blog post for more details
  6. Submit your app to the Windows Store

Resources

Did you find this post helpful? Please let us know in the comments below—and also let us know if there’s anything else you’d like us to dig into for you about this topic.

Enjoy!

Read More

Using color fonts for beautiful text and icons

In this post, we’ll introduce you to a text technology called color fonts. We’ll discuss what color fonts are, when they can be useful and how to use them in your Windows 10 apps.

What are color fonts?

Color fonts, also referred to as “multicolor fonts” or “chromatic fonts,” are a relatively new font technology that allows font designers to use multiple colors within each glyph of the font. Color fonts allow apps and websites to draw multicolored text with less code and more robust operating system support than ad-hoc techniques implemented above the text stack.

Most fonts for reading and writing—the fonts you are probably most familiar with—are not color fonts. These fonts define only the shape of the glyphs they contain, either with vector outlines or monochromatic bitmaps. At draw time, a text renderer fills the glyph shape using a single color (the “font color”) specified by the app or document being rendered.

Color fonts, on the other hand, contain color information in addition to shape information. Some approaches even allow fonts to include multiple color palettes, giving the font artistic flexibility. Color fonts typically include fallback information for platforms that do not support color fonts or for scenarios in which color functionality has been disabled. In those situations, color fonts are rendered as normal monochromatic fonts.

One color font you may be familiar with is Segoe UI Emoji—the default font used in Windows to display emoji. Below, you can see an example of a glyph from Segoe UI Emoji rendered in monochrome (left) and in color (right).

Why use color fonts?

Now that you know what color fonts are, let’s talk about how they can be useful.

Color fonts were originally designed to enable multicolored emoji in text communication scenarios. They excel at that task, but they are useful for other scenarios as well. Color fonts offer a way to implement rich text effects with the simplicity and functionality of regular fonts. To apps and the operating system, text rendered in a color font is the same as any other text: It can be copied and pasted, parsed by accessibility tools and so on.

Color fonts are a better alternative to raster graphics for rich text scenarios like website headers or document section titles. Although raster graphics are commonly used in these scenarios, they do not scale well to all display sizes, nor do they provide the same accessibility features as real text. If you find yourself frequently generating raster images of text from multicolored artwork, consider using a color font instead.

Color fonts can also be used for your app’s iconography. Some app developers prefer using icon fonts to standalone image files, due to the convenience and layout functionality offered by fonts. With color fonts, you can pack rich, scalable, full-color icons into a single icon font.

(Note: Starting in Windows 10 Creators Update, you can also achieve scalable vector iconography by using standalone SVG images directly in your XAML app. For more information, see Vector iconography: Using SVG images in your app.)

What kinds of color fonts does Windows support?

The OpenType specification defines several ways to embed color information in a font. Starting in Windows 10 Anniversary Update, Windows supports all of these approaches. The different approaches are summarized below.

Vector-based color fonts define glyph shapes using mathematical curves and lines. They may use the traditional font outline syntax coupled with color palettes (via OpenType’s ‘COLR’ and ‘CPAL’ tables), or they may use embedded SVG assets (via OpenType’s ‘SVG ’ table). These formats excel at representing most iconography compactly, and as vectors, they offer infinite scalability.

Bitmap-based color fonts define glyph shapes using embedded raster graphics, such as PNG images. They may use OpenType’s ‘CBDT’ and ‘CBLC’ tables, or they may use OpenType’s ‘sbix’ table. This approach makes it straightforward to control every pixel of a glyph’s shape and provide photorealistic content, but designers must provide multiple image sizes to ensure high-quality visual scaling.

Using color fonts

From both the developer’s perspective and the user’s perspective, color fonts are “just fonts.” They can be installed and uninstalled from the system in the same way as monochromatic fonts, they can be included in your app package as a local asset, or they can be used as a web font by your website.

In the XAML and Microsoft Edge frameworks, you can style just about any text with a color font in the same way as a regular font, and by default, your text will be rendered in color. However, if your app operates at a lower level and calls Direct2D APIs (or Win2D APIs) to render its text, then it must explicitly request color font rendering.

Using color fonts in XAML

The XAML platform’s text elements (like TextBlock, TextBox, RichEditBox, and FontIcon) support color fonts by default. Simply style your text with a color font, and the styled text will be rendered in color. The following code example shows how to style a TextBlock with a color font that has been packaged with your app assets. (The same technique applies to regular fonts.)


<TextBlock FontFamily="Assets/MyColorFont.otf#MyFontFamilyName">Here is some text.</TextBlock>

Applying a color font to a XAML TextBlock

The FontFamily property points to the relative location of a font file that has been added to the app package. Since a single font file may include multiple font families, you also need to specify the desired font family using the hash syntax illustrated above.

If you never want your XAML text element to render multicolor text, set its IsColorFontEnabled property to false. For example, you may choose to have your app render monochromatic text when accessibility features are enabled.

Using color fonts in Microsoft Edge

As with XAML, Edge supports rendering color fonts by default in websites and web apps, including the XAML WebView control. Simply use HTML and CSS to style your text with a color font, and the styled text will be rendered in color.

Using color fonts in Direct2D

In contrast to the UI frameworks, the lower-level graphics APIs, such as Direct2D and DirectWrite, do not render color glyphs by default. This is to avoid unexpected behavior changes in text-rendering apps that were designed prior to color font support.

If your app renders text with Direct2D’s DrawText and DrawTextLayout APIs, you must “opt in” to color glyph rendering. To do so, pass the D2D1_DRAW_TEXT_OPTIONS_ENABLE_COLOR_FONT flag to the relevant drawing method. The following code example shows how to call Direct2D’s DrawText method to render a string in a color font:


// If m_textFormat points to a font with color glyphs, then the following 
// call will render m_string using the color glyphs available in that font.
// Any monochromatic glyphs will be filled with m_defaultFillBrush.
m_deviceContext->DrawText(
    m_string->Data(),
    m_string->Length(),
    m_textFormat.Get(),
    m_layoutRect,
    m_defaultFillBrush.Get(),
    D2D1_DRAW_TEXT_OPTIONS_ENABLE_COLOR_FONT
    ); 

Drawing multicolored text with Direct2D’s DrawText method

Using color fonts in Win2D

Like Direct2D, Win2D’s text drawing APIs do not render color glyphs by default.

To opt in to color glyph rendering with Win2D, set the EnableColorFont options flag in the text format object your app passes to the text drawing method. The following code example shows how to render a string in a color font using Win2D:


// The text format that will be used to draw the text. (Declared elsewhere
// and initialized elsewhere by the app to point to a color font.)
CanvasTextFormat m_textFormat;

// Set the EnableColorFont option.
m_textFormat.Options = CanvasDrawTextOptions.EnableColorFont;

// If m_textFormat points to a font with color glyphs, then the following 
// call will render m_string using the color glyphs available in that font.
// Any monochromatic glyphs will be filled with m_color.
drawingSession.DrawText(
    m_string,
    m_point,
    m_color,
    m_textFormat
    );

Drawing multicolored text with Win2D’s DrawText method

Building OpenType SVG color fonts

Color fonts are a relatively recent development in font technology, so support among font-building tools is still in its early stages. Not all types of color font are supported by all font tools, but support continues to improve as color fonts gain popularity.

Building a font from scratch is a complex process, and it’s more than we can cover in this blog post. But color fonts aren’t just for professional type designers—if you’re an app or web designer with a monochromatic icon font, and you’d like to upgrade it to a color font, we’ve developed a small tool to help make the process easier: the OpenType SVG Font Editor.

This app lets you take an existing font and add color by embedding your own SVG artwork for each glyph using a simple drag-and-drop interface. SVG is a popular vector art format supported by tools like Adobe Illustrator and Inkscape. On platforms that support OpenType SVG fonts (like Windows apps, Edge and Firefox), the color glyphs are rendered. Other platforms will automatically fall back to the monochromatic glyphs. For more information, please see the OpenType SVG Font Editor’s GitHub page.

The tool was developed by a group of Microsoft interns on the Windows graphics team. We found the tool useful, so we’ve made it available as an open-source project for others to use and improve.

Conclusion

Color fonts are an exciting new technology that unlocks richer text scenarios than were previously possible without sacrificing platform support for accessibility, fallback, scalability, printing and complex font capabilities. For more information, please see the following resources:

Read More

Native Ads in Microsoft Advertising SDK

Overview

Native Ads is a component-based ad format that gives publishers the flexibility of placing the individual components of a creative – title, image, logo, description, call to action text – so as to provide the best possible fitment to the look and feel of the rest of the app. This enables the developers to use fonts, colors and animations of their own to stitch unobtrusive user experience in their app while earning high yield from advertising. For advertisers as well, this provides high performing placements since the ads experience is tightly built into the app and users tend to interact a lot more with such sponsored content. According to a report by Mobile Marketing, native in-app ads typically see five times greater engagement than traditional banner ads and, hence, get greater spend from advertisers as well (as per eMarketer and other reports).

Starting now, developers can create Native Ad slots in their apps or games using the latest version of Microsoft Advertising SDK (10.0.4 or later). Microsoft Monetization platform provides developers with the maximum amount of freedom to create their own presentations and is available to a limited set of publishers in a closed pilot. Please contact aiacare@microsoft.com to express your interest to be part of this pilot.

Where Do I Start?

As always, start with downloading the Microsoft Advertising SDK. This provides you the libraries to include Native Ads into your app or game.

Create a “Native” ad unit for your app in ‘Monetize with ads’ section on DevCenter (dev.windows.com). This is the ad unit that you will use in your app when you request for an ad in the code.

How Do I Get Native Ads Integrated into my App?

This section assumes that you are familiar with the Microsoft Advertising SDK for your UWP app or game. If you haven’t played around with this, consider going through the Get Started guide.

To show Native Ads in your app, follow the instructions for project type:

XAML/.NET

HTML/JavaScript

XAML/.NET

This section provides C# examples for your XAML/.NET project. You will need to go through these simple steps to get Native Ads in your code.

Step 1: Setup References

Open your project in Visual Studio. In Reference Manager, expand Universal Windows, click Extensions and then select the check box next to Microsoft Advertising SDK for XAML.

In appropriate code file in your app (for example, in MainPage.xaml.cs), add the following namespace reference.


using Microsoft.Advertising.WinRT.UI;

Step 2: Setting up Native Ads Manager

In an appropriate location in your app (for example in MainPage or some other page), declare a NativeAdsManager object and string fields that represent the application ID and ad unit ID for your Native Ad. The following code example assigns the myAppId and myAdUnitId fields to the test values for Native Ads provided in Test Mode values. These values are only used for testing; you must replace them with live values from Windows DevCenter before you publish your app.


NativeAdsManager nativeAdsManager = null;
string appId = "d25517cb-12d4-4699-8bdc-52040c712cab";
string adUnitId = "test";

In code that runs on startup, instantiate the NativeAdsManager.


// Ad Events

nativeAdsManager = new NativeAdsManager(appId, adUnitId);

Step 3: Request for an Ad

When you want to show an ad, request for one using the NativeAdsManager and wire up the events.


nativeAdsManager.RequestAd();

nativeAdsManager.AdReady += NativeAd_OnAdReady;

nativeAdsManager.ErrorOccurred += NativeAd_ErrorOccurred;

Step 4: Using components of the Ad to stitch up the experience

Assume you have a XAML page which has various placeholders for Title, Description, Sponsored By, Call To Action of an Ad and a container which contains all these elements. Sample StackPanel containing all the elements.


<StackPanel x:Name="NativeAdContainer" BorderThickness="2" BorderBrush="Azure">
   <StackPanel x:Name="IconImageContainer" BorderThickness="2" BorderBrush="Azure" Visibility="Collapsed" >
       <Image x:Name="IconImage" />
   </StackPanel>   
   <TextBox x:Name="TitleBox" Text="The title will go here" Margin="78,0,-78,0"/>
   <TextBox x:Name="DescriptionBox" Text="The Description will go here" Visibility="Collapsed" />
   <TextBox x:Name="SponsoredBy" Text="The SponsoredBy will go here" Visibility="Collapsed" />
   <StackPanel x:Name="MainImageContainer" BorderThickness="2" BorderBrush="Azure" Visibility="Collapsed">
        <Image x:Name="MainImage" Margin="0,8,0,4" />
   </StackPanel>
   <Button x:Name="CallToAction" Margin="0,8,0,4" Visibility="Collapsed" />
</StackPanel>

Based on components of the creative that you want to stitch up in your app, your code may differ. Here is a sample OnAdReady event listener where Title, Description, CallToAction and Image is being used.


void NativeAd_OnAdReady(object sender, object e)
        {
           NativeAd nativeAd = (NativeAd)e;
           TitleBox.Text = nativeAd.Title;
		
		//if description is not null show description textbox
           var description = nativeAd.Description;
           if (!string.IsNullOrEmpty(description))
           {
               DescriptionBox.Text = nativeAd.Description;
               DescriptionBox.Visibility = Visibility.Visible;
           }

           //if sponsoredBy is not null show sponsoredBy textbox
           var sponsoredBy = nativeAd.SponsoredBy;
           if (!string.IsNullOrEmpty(sponsoredBy))
           {
               SponsoredBy.Text = sponsoredBy;
               SponsoredBy.Visibility = Visibility.Visible;
           }

           //if CallToAction is not null update Button
           var callToAction = nativeAd.CallToAction;
           if (!string.IsNullOrEmpty(callToAction))
           {
               CallToAction.Content = callToAction;
               CallToAction.Visibility = Visibility.Visible;
           }

           // Assets consists further information about Ad
           var assets = nativeAd.AdditionalAssets;

           // Loading images
           var icon = nativeAd.IconImage;
           if (icon != null)
           {
               var bitmapImage = new BitmapImage();
               bitmapImage.UriSource = new Uri(nativeAd.IconImage.Url);
               IconImage.Source = bitmapImage;
               // Best view when using the Height and Width of the image given
               IconImage.Height = nativeAd.IconImage.Height;
               IconImage.Width = nativeAd.IconImage.Width;

               IconImageContainer.Visibility = Visibility.Visible;
            }

            // There might be multiple main images sent by the server
            var mainImages = nativeAd.MainImages;
            if (mainImages.Count > 0)
            {
                var mainImage = mainImages[0];
                var bitmapImage = new BitmapImage();
                bitmapImage.UriSource = new Uri(mainImage.Url);
                MainImage.Source = bitmapImage;
                // Best view when using the Height and Width of the image given
                MainImage.Height = mainImage.Height;
                MainImage.Width = mainImage.Width;

                MainImageContainer.Visibility = Visibility.Visible;
            }

            // It is required to show the AdIcon in your container
            NativeAdContainer.Children.Add(nativeAd.AdIcon);

            // Register any xaml framework element for clicks/impressions
            nativeAd.RegisterAdContainer(NativeAdContainer);

P.S: The developer is required to “Register” the XAML ad container (any framework Element) with the Native Ads object. This is required for handling impressions and click tracking and is critical for ad earnings. Failure to do so may result in ad-units and advertising payouts being blocked by Microsoft.

HTML/JavaScript

More details on the HTML feature will be coming soon! Please reach out to us (aiacare@microsoft.com) if your apps are in HTML/JS and you need this feature.

Guidelines

Even though the developer has complete control over how to create the ad experience and which components of the creative is displayed to the user, the advertiser’s creative should get its due message out to the user. There is a fine balance that needs to be achieved to reap maximum value from the Native Ad.

Here are some guidelines to ensure the balance.

Required to Show

There are two advertiser assets that must always be shown to the user in your Native Ad design. Failing to include any of these could result in low performance of your ad unit and eventual low (or no) yield. These assets are:

  • Ad Title
  • Either Distinguishable ad icon (This Ad Icon is sent as part of NativeAd object – property named AdIcon) or Sponsored By or texts such as ‘Sponsored’, ‘Promoted’, ‘Recommended’

Not following these guidelines may result in the removal of the adUnits from the advertising system.

Ad Experience

Your Native Ad should be clearly delineated from the rest of your content and have space around it to prevent accidental clicks. Use border, background or some other treatment to separate the ad content. Always remember, getting user to accidentally click on the ad is not beneficial in the longer term for your ads based revenue and for end user experience.

You should always show the distinguishable “Ad” icon in the ad view. Whenever possible, show the “Sponsored By” field to clearly call out that the content is an ad and provided by an advertiser.

Text Display Requirements

Native Ads should always have the Title displayed. Provide enough space to display at least 25 characters of the title. If the title is longer, ensure to replace the additional text with an ellipsis.

Ensure that the Call-to-Action (CTA) is separated out from the rest of the promotional text from the advertiser.

If you choose the rest of the promotional text (Description) from the ad response, provide space to display at least 75 characters of the same. It’s best to use animations to show the full content of the ad description.

Call-to-Action

Native Ads should always have the CTA displayed to the user as something clickable like a button or hyperlink.

CTA string should always be displayed in its entirety as it is a critical component of the advertiser’s creative.

Learn and Optimize

It is recommended that different ad units are created and used for each different placement of Native Ads in the app. This enables reporting and learning for each placement which then can be used for optimizing each placement separately till optimal performance is achieved.

In case of any further queries, please reach out to aiacare@microsoft.com and we’ll be glad to help you out.

Read More

Toolkits, Toolkits, Toolkits!

As a UWP developer, you have many options to help build your application quickly and reliably. In fact, there are so many options that you may feel like you can choose only one. Luckily, that’s not the case, and many toolkits complement each other in various ways.

Today, we’ll talk about two open source toolkits:

Both are open source, but each has different strengths. These two particular toolkits can bring tools and controls for a variety of application scenarios. Let’s start by introducing the toolkits and how they can help.

UWP Community Toolkit

The UWP Community Toolkit is the ultimate collaboration between Microsoft and the UWP developer community. With dozens of features such as helper functions, custom UI components, animations and app services, the UWP Community toolkit is a great time saver and can bring your application to the next level.

The toolkit has had 12 releases so far and is currently on v 1.4 (released on April 3, 2017). It has more than 80 contributors, with thousands of commits, and the community is constantly working on improvements. Conveniently, it’s broken up into several nuget packages so you can pick and choose exactly what you need.

Examples of this toolkit’s power can be found in the Services namespace, where you can easily interact with social media services with as little as two lines of code.

Here’s an example of getting a Twitter user’s timeline:


TwitterService.Instance.Initialize("consumer-key", "consumer-secret", "callback-uri");
ListView.ItemsSource = await TwitterService.Instance.GetUserTimeLineAsync("user-screenname", 50);

You can find a full demo application here in the source code or here in the Windows Store. Go here to see a full list of the available features (controls, helpers, etc.) and go here to find the documentation.

Telerik UI for UWP

Telerik UI for UWP, from Progress Software, is a recently open sourced toolkit that contains an amazing set of Line of Business (LOB) controls with which you can create native, business-focused, UWP applications. With controls such as DataGrid and RadListView, the Telerik UI provides the powerful sorting, grouping and editing experiences you might expect from a desktop application, as well as rich data visualization experiences with controls such as Charts, Gauges and BulletGraphs.

We recommend you check out the Customer Database Example application here on GitHub to see the DataGrid in action, as well as the SDK Examples app here. You can see a full list of available controls here and find the documentation here (if you’re looking for a little extra help, Progress Software also offers professional support in the premium package).

An example of this toolkit’s power is the RadDataGrid. With one line of code you get a bunch of out-of-the-box features like grouping, sorting and filtering.

You can install UI for UWP in your application using the nuget package or build from the source directly. If you would like to read more about why Progress Software open sourced Telerik UI for UWP, we recommend you check out this great article.

Contributing

If you’re a developer who likes contributing to GitHub repos and giving back to the community, or if you have ideas to make things better for other developers, both toolkits accept pull requests and each has its own contribution guidelines (here for UWP community toolkit and here for Telerik UI for UWP).

Wrapping up

Both toolkits complement each other. You can use them side by side in your application to bring the user a delightful, yet powerful, experience in your UWP application. With dozens of UI controls, helpers, services and more, you can get your UWP app to market faster and with more confidence than ever. We look forward to seeing your UWP Community Toolkit and UI for UWP powered applications in the Windows Store!

Resources

Read More

Improving input responsiveness in Microsoft Edge

As the web becomes more interactive, web pages are becoming increasingly reliant on JavaScript for core functionality, such as input, rendering, layout, and composition. As more and more of this core functionality moves to the client side, it becomes imperative for browsers to adopt smart scheduling mechanisms to ensure that JavaScript workloads are processed in an efficient manner.

With EdgeHTML 15 and the Windows 10 Creators Update, Microsoft Edge takes a big leap forward in how it schedules JavaScript work, leading to noticeable improvements in the usability, responsiveness, and performance of the modern web. In this post, we’ll share some behind-the-scenes details on how the EdgeHTML engine works, as well as the huge impact these improvements have had on making the browser feel faster and more responsive.

Timers: death by a thousand cuts

The web is surprisingly complex when it comes to task management. Rather than running one long JavaScript operation, most websites tend to execute a series of small-to-medium-sized operations that add up over time: event listeners, timeouts, Promises, and various other asynchronous tasks.

Even on a page that looks relatively quiet, below the surface there may be quite a lot of work going on. News and content sites that rely on advertisements, analytics trackers, and scroll listeners are often a good example of this. For instance, here’s a sample site illustrating some problems we often see on poorly optimized sites in the wild:

While this page is loading, and even well after it’s “settled,” there is still an enormous amount of work going on under the hood. A web page such as this one may make network requests for additional resources, or it may call setTimeout to queue a task for the next “tick” of the event loop. Each of these callbacks can then schedule other timeouts and network requests, starting the process anew. It’s the browser’s job to coordinate these tasks, and to ensure that they’re processed correctly along with event listeners, Promises, and any other work in accordance with the HTML5 event loop spec.

Where it gets complicated is with input tasks. As noted in “Scrolling on the web,” Microsoft Edge already offers best-in class scrolling performance, because the vast majority of scrolling devices can be handled on a background thread. This means that these input methods are unaffected by a page that schedules lots of JavaScript work, so scrolling on a mousewheel, touchpad, or touchscreen should always feel smooth.

Due to hardware limitations, though, some scrolling methods (such as using the keyboard) are still processed on the UI thread. This is also true of many other website interactions, such as clicking links and typing into a form field. And since these input events must be processed on the same thread that handles the JavaScript event loop, this is where things can go south very quickly.

Input blocking: the “Is this page broken?” effect

You’re probably familiar with this experience: you load a page, and the content appears on the screen, so you believe you can start interacting with it. However, if you try to click a link, several seconds pass by without anything happening. Or you might try to scroll using your keyboard’s up and down arrows, but the page moves at a glacial pace, or it doesn’t even scroll at all.

This often occurred in previous releases of Microsoft Edge on pages that queue up a lot of setTimeouts or other callbacks. This is because our scheduling system didn’t prioritize input over regular JavaScript tasks, meaning that all scheduled timeouts had to be processed on the main thread before any input could be received.

Beginning with EdgeHTML 15, Microsoft Edge now allows input events to “cut in line” ahead of JavaScript work, using a technique called input prioritization. With this new scheduler in place, input events can be handled nearly instantly, even if the page has queued up a large backlog of setTimeout operations.

The impact on some pages can be startling. We’ve already heard feedback from Windows Insiders that the performance improvement of Microsoft Edge is “night and day,” thanks to the new ability to immediately scroll and immediately click links. No more waiting multiple agonizing seconds for a JavaScript-heavy page to finish its loading process!

For example, the “news site” below is doing several seconds’ worth of work on the UI thread while it’s loading. If you try to click the first link during that load, the navigation may be blocked, because mouse input is not being prioritized.

As of EdgeHTML 15, however, Microsoft Edge now prioritizes the click event ahead of other work, meaning that the next page loads nearly instantly:

Here’s another example showing the impact on scrolling. This page, like the sample news site, is running several setTimeouts in the background, which can interfere with keyboard scrolling:

As of EdgeHTML 15, the page remains scrollable with the keyboard, even while the setTimeouts are being processed. This reduces a common source of blocked or laggy scrolling on very active web pages.

Giving priority to the user

To understand what EdgeHTML 15 is doing under the hood to achieve this performance boost, let’s whip up a quick metaphor. Note that, as is often the case, the actual implementation is a bit more complex, but we’ll simplify a bit in the interests of clarity.

With a little help from some illustrations courtesy of Rachel Nabors, we can visualize the way tasks are processed in a web page by imagining a trendy club with a lineup of eager customers stretching out around the block, and a stern bouncer letting in only one client at a time.

Illustration showing a club, "The UI Thread." In front of the club, a long queue of customers are lined up, labelled "JS, Style, Layout," etc.

In the pre-Creators Update implementation, everybody had to get into the same line: JavaScript timers, layout and style updates, and input events alike. Worse, since JavaScript timers can queue their own timers, these could actually cut in line ahead of other events, if the original timer took so much time to complete that the next timer was now “scheduled” to run.

In our club metaphor, this would be like a particularly inconsiderate patron calling their friend on the phone to say, “No problem, I can hold your place in the line. I’ll just tell the bouncer you’re on your way!” And then, insult of insults, the bouncer would actually allow them to hold up the entire line, waiting for their friend to show! All the while, the poor input event is still waiting at the back of the line.

As of the Creators Update, though, this lineup has been completely redesigned. Rather than maintaining a single queue to process all events, there is now a priority queue for input events. This is as if our club added a special VIP line, allowing high-profile guests to get in ahead of the thoughtless patron trying to call their buddy.

Illustration of a character dressed as User Input, with mouse pointers for earrings, skipping the UI Thread line in a separate "VIP" line.

This is a much better system, because input events fundamentally deserve higher priority than any other operations on a web page. Ultimately, the user is the king or queen of their browser, and whatever work a website is trying to complete is less important than what the user wants to accomplish. Even if a page is very busy running JavaScript timers, any input from the user’s mouse or keyboard should be considered top priority.

Prioritizing the browser UI itself over web content

In addition to creating a “fast lane” for user input to web pages, another improvement we made in the Creators Update was to make another special queue for input to the browser UI itself.

You can imagine that, if input is shared between a web page and the browser frame – i.e. the URL bar, tabs, favorite button, etc. – then a misbehaved web page could potentially render the entire browser unresponsive. For some web content, this was the situation before the Creators Update, but now Microsoft Edge is more intelligent about handling browser UI input separately from web page input.

In this example, we’re using crashmybrowser.com, a wonderful site that does exactly what you’d think. In one of the site’s tests, we can create a “fork bomb,” where a timeout spawns two more timeouts, each of which spawns two more timeouts, and so on, causing the page to become completely hung. Prior to the Creators Update, this kind of unrelenting JavaScript assault would prevent users from being able to close the tab or to open a new one, since browser UI input was not handled any separately from other kinds of input.

In the Creators Update, however, browser UI input has been given special priority, allowing the user to close a misbehaving tab without waiting for it to respond. Note that this input is handled even earlier than the in-page user input. For instance, in the case of an infinite loop (another fun option on crashmybrowser.com), input to the web page itself would never be handled, but input to the browser UI itself should be able to respond regardless of what the web page is up to.

Circling back to our trendy club example, this special treatment of browser UI input would be like a hidden side entrance to the club, only available to members of the band and their entourage. While VIPs may get first dibs to line up into the club, the band is even more important! So they should be able to fast-track into the green room.

Illustration showing a band member entering the club through a side door, labelled "Browser Only"

Real users see web content responsiveness improvements

To see the impact of this work on web content responsiveness, we can look at aggregated telemetry from EdgeHTML 15 Windows Insider devices, comparing November builds (before input prioritization was implemented) to March builds (after it was introduced). For interactions, we broadly bucket responsiveness into “great” sessions (<300ms), “poor” sessions (300-1000ms), and “terrible” sessions (>1000ms).

Bar chart showing input responsiveness in EdgeHTML 15 November (before) versus March (after). Microsoft Edge has increased the number of “great” sessions from 88.71% to 95.53%, while decreasing the number of “poor” sessions from 5.68% to 3% and the number of “terrible” sessions from 5.61% to 1.46%.

As you can see in the above chart, Microsoft Edge has increased the number of “great” sessions from 88.71% to 95.53%, while decreasing the number of “poor” sessions from 5.68% to 3% and the number of “terrible” sessions from 5.61% to 1.46%.

The confirms that Microsoft Edge users are seeing the benefits of this input prioritization effort firsthand. For most sites, users have a great session.  However, when a site is bad, it can be a terrible experience. Aggregated Windows telemetry clearly shows that the input prioritization improvements in the Creators Update have significantly reduced the number of less-than-great sessions on heavy websites.

Conclusion

All these input changes serve one unique purpose: to put users in control of their browsing. Regardless of what a web page is trying to accomplish, the user should be able to interact with their browser and manage their tabs, scroll their content, and navigate to new pages as fast as their fingers can move. With these improvements in the Creators Update, Microsoft Edge users will enjoy a faster, more fluid, and more responsive browser.

As Bret Victor famously said, “creators need an immediate connection to what they’re creating.” This is true not only of creators but also of web surfers: when you type or click, the web page should immediately respond. This responsiveness helps maintain the most immersive aspects of the web, and creates a strong visceral connection between the user and their browser. Immediate feedback is crucial not only for creative flow, but also for seamless web surfing.  With the Creators Update, Microsoft Edge has made a big step in achieving that vision.

Nolan Lawson, Program Manager, Microsoft Edge
Todd Reifsteck, Senior Program Manager, Microsoft Edge
Rachel Nabors, Program Manager, Microsoft Edge

Read More