F.A.Q.

Frequently Asked Questions

Designs

Q. What are the most important designs to provide you with?

A. Here are the best elements to design first to best speed up the development process.

  1. Header

  2. Footer

  3. Nav

  4. Home Page

  5. Category Page

  6. Product Detail Page

Q. Are there any other designs that would help speed up the development process?

A. Yes. The following designs will definitely help us get things moving faster.

  1. Cart Page

  2. Checkout Page

Q. Are there any other design elements you need from us?

A. Yes. We could really benefit from you providing us with a stylesheet that includes things such as:

  1. Brand colors, preferably in their RGB and hexadecimal codes (i.e., white: #ffffff ).

  2. Normal, Hover, and Active styles for site elements including - but not limited to fonts (including any font files and/or hosting information), weight, size, colors for every:

    1. h1, h2, h3, h4, h5*, h6*

    2. a (links)

    3. ul, ol (unordered/ordered list styles)*

    4. button (including background and border colors, if applicable)

  3. Brand logo(s) (file in an ESP, SVG, or other vector format).

  4. Any custom icons used in site (preferably in an ESP, SVG, or other vector format, however if no vector format is available a PNG will suffice).

Q. We would like to use various banners on some of our pages. What sizes do you recommend for this?

A. We suggest all images be in JPG/JPEG format (unless transparency is needed) under 100kb in file size, 200kb at MAX. Pixel sizing depends on the where the banner will be used, though here are the sizes we recommend for commonly used banners (width in pixels):

  1. Full-bleed (extends entire width of browser) banners:

    1. We suggest either 1,920px wide or 1,366px wide, depending on the file size of the picture. The height depends on the maximum height of your banner.

      1. These banners are generally used as home page banners, lead CMS page banners, and category page banners for sites using full-bleed pages.

  2. Banners extending the full-width of the site's fixed width:

    1. If your banner is to be a fixed size, we recommend it be the width of the sites fixed size (Magento's default width is 1,280px). The height depends on the maximum height of your banner.

      1. These banners are generally used as home page banners, lead CMS page banners, and category page banners for sites not using any full-bleed pages (not including a full-bleed header).

Q. What sizes do you recommend we use for product images?

A. Again, we suggest all images be in JPG/JPEG format (unless transparency is needed) under 100kb in file size, 200kb at MAX. Magento uses three main image sizes for products (height x width):

  1. Base Image:

    1. The base image is the main image on the product detail page. Image zoom is activated if you upload an image that is larger image than the image container. Recommended sizes between 1,000px x 1,000px and 1,200px x 1,200px (depending on the file size).

  2. Small Image:

    1. The small image is used for the product images in listings on category and search results pages, and to display the product images needed for sections such as for Up-sells, Cross-sells, and the New Products List. Recommended sizes between 400px x 400px and 700px x 700px (depending on the file size).

  3. Thumbnail Image:

    1. Thumbnail images appear in the thumbnail gallery, shopping cart, and in some blocks such as Related Items. Recommended size is 75px x 75px.

*Preferred, but optional