Modals
These are examples of existing modals, they can be adjusted to any type of task or experience.

Test Modal A - B - C


 

Product Tile Carousel (Target ONLY)


 

Design Proposals
Here are some examples around tiles design, please use these as influence for future considerations.

Coupon or Product Carousels (App, PU)

Horizontal Carousel Coupon

Vertical Carousel Tile


 

Vertical Tiles Samples

Horizontal Tiles Samples

Hero Banner Sizes

These are the new banner sizes to consider, they have been adjusted to compress the page and allow the content to be more visiible at the right break point.

Auto Modal
Dynamic modal (currently hidden)

Section # Full Banner

Section 2A
Product images are feed directly from the existing product listing PDP.

Section 2B

Section 3A

Section 3B

Section 3C - Bottom Tiles (4/6/10)
Product images are feed directly from the existing product listing PDP.

Section 4

Section 5

Section 6

Section 7

Section 8

Section 9

Section 10

Section 10A (Mobile Carousel)

Section 11

Header

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non mollis sapien. Fusce velit magna, faucibus sagittis dapibus sit amet, dignissim molestie leo. Quisque ut eros eu metus ullamcorper bibendum vel quis arcu. Mauris dignissim, est a congue mollis, tellus arcu cursus sem, sit amet luctus orci tortor

Explore

Section 13

Section 14

Image compression guide (App & Web)

Resize, compress, upload. It’s all about reducing your image file size as much as possible without sacrificing quality. Here’s how in a few simple steps.

Table of Contents

  • Step 1: Pick the right file format
  • Step 2: Know your size & compression targets
  • Step 3: Choose your compression/resize tool type
     

Why This Matters

Images have large file sizes. Large file sizes equal long load times for your site. 

On mobile, as load time went from 1 to 5 seconds, customers were 90% more likely to leave the site

If you just upload your images to your website as they are, they will slow down your website load times and overall speed (some site builders won’t even let you upload the images if they are too large). Large image files can also take up a lot of storage and bandwidth. And they can make your backups slower. 

Another thing—search engines like fast websites so, if your site is slow because of a lot of beautiful (but painfully large) images, it can really affect your search engine placement. 

With a bit of extra work (like compressing and resizing your images before you upload them to your site), you can have really beautiful images and a speedy site.
 

Step 1: Pick the right file format (JPEG, PNG, GIF?)

  • JPG: This is the format you’ll use most often for photos and images. 
  • PNG: Use this for images with a transparent background, for logos (logos will have a transparent background), or for screenshots. 
  • GIFs: Use this for animation.

Step 2: Know your size & compression targets 

Where to start:

  • Start with a big, high-quality image (for reference, smartphones take high-quality images that are 3MB and bigger, or 3000 x 5000 pixels or more).
  • Use brand approve images (make sure they have good quality)
  • DO NOT take a small image and size it up (it will end up pixelated or blurry)
  • To find out what size your image is right now, go to where your image is stored on your computer, right-click on your image, and select “Get Info.” You’ll see “Size listed” and, under “More info,” you can see dimensions as well.
  • Use the CANVAS SIZE / IMAGE SIZE based on the assets / sections listed in this page

Compression guidelines:

  • Hero (larger full-screen top image) or background images should be your biggest file sizes: less than 1MB 
  • Medium size images: ~ 300Kb
  • Smaller images: < 300Kb
  • Somewhere between 60% and 80% compression is a good general guideline
  • Make sure the image is crisp and renders with clarity
  • Take the time to ensure yor are using the right assets

Sizing guidelines:

  • Think in pixels instead of file size
  • Pixels are a small unit of measurement. For example, most websites are about 1300px by 1900px
  • Drag a large image in to you desired canvas and (RESIZE) to fit the spec 
  • Consider how big your image will be on the page, and resize accordingly. (Half of the page size? Take it down to around 500px wide. ¾ of the page? Resize to around 650px.) 

  • Compression tools and resources:
  • GIMP
  • ImageOptim
  • Trimage
  • Optimizilla
  • Kraken.io
  • TinyPNG
  • Imsanity

 

All CSS is in this hotfix

Added to cart

View cart

Added to list

Item deleted