Web Pattern Library

Github Repo

Menu


Global styles

Global components


Template Structure


Bag, Wishlist, & Checkout

Home / Login

Marketing Modules

Product Listing & Detail

Size & Fit Guides

Personalization

My Account / History

Static pages


JavaScript Helpers

QA Resources

Visual Consistency Reference

The following styles are used in the project code and are fully supported in the target browsers.

For more information on browser support for CSS properties, visit caniuse.com.

Feature What happens when not supported QA considerations
animation (transform or transition) The element will simply move, or hide and show without any animation
Not supported in: Internet Explorer 9 and older, WP7.x, Opera Mini. May be very slow on older Android and Blackberry.
Animation CSS is only applied in browsers that support animation properties, otherwise it can break the experience in a browser that can't interpret those rules. For example, in a browser that doesn't understand animation CSS, clicking a menu button that animates open may not show the menu at all. To limit the application of these rules, we use a feature test to target capable browsers. Look out for animations running so slowly they may impact the usability of the site, expecially in Android.
background gradient A simple flat background color is shown instead of the CSS-based color gradient that smoothly fades between two or more colors.
Not supported in: Internet Explorer 9 and older, WP7.x, Opera Mini
Specify a flat background color as a fallback; choose a color from the gradient with good contrast and usability. If an element does not have a background color specified, flag that as an issue.
box shadow The element will not have a shadow.
Not supported in: Internet Explorer 8 and older, WP7.x, Opera Mini
Ensure that the lack of a drop shadow doesn't make the UI difficult to use. For example, when only a shadow delineates the edges of a text input, the input may not be visible in browsers that don't support box-shadow. A light border should be specified as a fallback.
custom fonts System fonts will be displayed (Verdana or default san-serif) in place of custom fonts.
Not supported in: Internet Explorer 8 and older, WP7.x, Opera Mini
There are slight differences in size, alignment and positioning between system and custom fonts. This is an expected variance, but flag any places where this causes usability issues (text cut off or hard to read), or skews the layout.
rounded corners (border-radius) The element will show square corners instead of rounded or pill-shaped corners.
Not supported in: Internet Explorer 8 and older, WP7.x, Opera Mini
There is no known usability difference between rounded or square corners, rounding just won't appear in some browsers.
text shadow The element will show the text with no shadow effects under the letters to give it greater contrast against the background. Text color should be sufficiently contrasted with the background, even without the shadow.
Not supported in: Internet Explorer 9 and older, WP7.x, Opera Mini
Check to make sure that text contrast still has good contrast without the shadow.
touch events Some browsers only support mouse events, like click, even if they have touch screens. These browsers do not support advanced gestures like dragging a carousel to advance, only a tap/click will advance the image.
Not supported in: WP7.x, Opera Mini
Ensure that all UI controls, such as carousels and scrollers can be operated by pressing buttons or links. Each UI component is designed and built to use mouse or touch, so flag anything that isn't usable with a tap/click gesture.

Testing Tools

Manual testing

Most of our testing is done manually on devices because this gives us the best impression of the overall speed and usability of the site.

Automated QA

Page Performance

Why page performance metrics are important and best practices for ensuring fast page load times: How we make RWD sites load fast as heck.