Dell.com Homepage Guide

Updated: 08/25/2020

Current Design

The design that's currently in production will be iterated upon until the release of the Dell Design System 2.0.

Global homepage guidelines

This document covers the design, content creation, SEO and business guidelines for global adoption of the current Dell.com homepage.

View PDF Guidelines

Legacy Design: Overview

Guides for the legacy design will be maintained on this page until they are retired globally.

This guidance considers industry best practices, usability findings, winning Test & Target recipes, and existing site guidelines.

This implementation represents the cold- and warm-state responsive U.S. homepage but does not include the regional variations that will be necessary when this design is globalized (i.e., to account for fewer curated-content possibilities).

The increase in curated content will require more editorial collaboration across teams — including a recommended integrated editorial calendar — and additional QA and governance.

In terms of existing guidelines, the three components in the hero module are defined as banners, while all other modules are defined as cards. All copy needs to be written using the UX Content Style Guide.

The purpose of each module is key. Though exceptions may be necessary regarding specific content types, the general purpose of the space should be upheld.

With the exception of the category tiles, tracking tags must be added to the end of the landing page URL for all homepage modules. This allows the analytics team to capture and measure data from our homepage.

Legacy Design: Guidelines

Masthead

The masthead category fly outs are reserved for driving traffic into a specific segment, and not for categorization. The only approved fly outs are currently “{LOB} For Home” and “{LOB} For Work”

See Navigation components for more information about the masthead.

Hero Banner
Category Tiles

Dimensions: 2800 x 944 pixels

File type/size : .JPG

Source: Will need to be curated and governed over time based on data from analytics and CSAT, though the top six categories likely will not frequently change.

Imagery:

  • Must be Brand-approved product imagery.
  • Do not include any text, numbers or characters in the image file.
  • Do not include badges, logos, awards, bugs, violators, icons or illustrations.

Copy: Category tile headlines must exactly align with the category’s name in taxonomy.

UX/functional notes: Though both headline and button appear clickable, the module has only one destination – the featured category page.

  • In cold state, For Home/For Work splitter modals appear when necesssary, following taxonomy (for example, Workstations would not have a splitter modal since those are clearly for work).
  • In For Home warm state, all of the tiles are consumer-focused and there are no modal splitters.
  • In For Work warm state, all the tiles are for work-focused and there are no modal splitters.
Large Cards

Content Specs: Electronics & Accessories Card

Dimensions: 570 x 283 pixels

File type/size : .JPG/maxmimum 70KB

Purpose: Highlights Electronics & Accessories categories.

Imagery:

  • Must be Brand-approved product imagery.
  • Do not include any text, numbers or characters in the image file.
  • Do not include badges, logos, awards, bugs, violators, icons or illustrations.
  • Use only a white background.

Copy: Depending on the state, the section header and blue button CTA should read:

  • Cold state header / CTAs: Explore Electronics & Accessories / “Shop for Home” (left module) and “Shop for Work” (right module)
  • Warm consumer-state header / CTAs: Explore Electronics & Accessories / “Shop All” and “Shop Gaming” (examples — if choosing a specific consumer E&A category, use Shop + Consumer Category Name)
  • Warm for work-state header / CTAs: Explore Electronics & Accessories / “Shop All” and “Shop Networking” (examples — if choosing a specific for work E&A category, use Shop + Work Category Name)

UX/functional notes: Though both headline and button CTA are clickable, the card has only one destination – the featured E&A page.

  • In cold state, the left card highlights “For Home” and the right card “For Work” electronics & accessories.
  • In warm consumer state, both cards highlight consumer-focused electronics & accessories.
  • In warm for work state, both cards highlight for work-focused electronics & accessories.

Content Specs: Consumer Product Card

Dimensions: 720 x 245 pixels

File type/size : .JPG / maximum 70 KB

Purpose: Highlights a core EUC product to affirm customers’ traditional view of what Dell does well.

Source: Will need to be actively curated and governed, though it should change less frequently than the hero modules. Consumer Online team will spec creation and then submit for review and launch. The gist of the messaging can come from the relevant PD page.

Imagery:

  • Can be Brand-approved product imagery/illustrations or full-bleed lifestyle imagery.
  • Do not include any text, numbers or characters in the image file.
  • Do not include badges, logos, awards, bugs, violators, icons or illustrations.
  • Do not use white backgrounds.

Copy: The card supports a headline, a subhead, legal text (optional) and a CTA.

  • Maximum headline length is 40 characters.
  • Maximum subhead length is 100 characters.
  • Maximum CTA length is 15 characters.

UX/functional notes: Though both headline and button appear clickable, the card has only one destination – the featured PD page. See Cards for m.

Content Specs: Case Study Card

Dimensions: 720 x 245 pixels

File type/size : .JPG / maximum 70 KB

Purpose: Features a timely published case study to demonstrate how Dell is helping enterprise customers solve business needs.

Source: Will need to be actively curated and governed. Corp Comm team will spec creation and then submit for review and launch.

Imagery:

  • Use either full-bleed lifestyle imagery or appropriate Brand-approved product imagery/illustrations. Lifestyle is preferred.
  • Do not include any text, numbers or characters in the image file.
  • For consistency with the smaller modules, do not include a superimposed play icon with video thumbnails.
  • Do not use white or light gray backgrounds.
  • Always be mindful of the tinted overlay at the bottom when choosing and cropping images.

Copy: The card supports a single link destination and headline — typically the CMS case study title or a shortened, improved version for homepage-worthy impact.

  • Case study headlines should follow a basic formula: Dell technology/service/solution + organization + benefit conveyed (with the order of these elements varying from title to title).
  • Maximum length is 80 characters.
  • In initial implementation, videos will not include a play icon, so when feasible, use copy to communicate the content type (e.g., “Video: Staples …”).

UX/functional notes: Though both headline and button appear clickable, the card has only one destination – the featured PD page. See Cards for m.

Cropping & Scaling Guidance

Always ensure that the featured product(s) and focal point(s) are in frame when you crop — and that they remain unobscured as they scale to different viewports.

Good: Note how the image scales on mobile.

Bad: Image does not scale well in mobile – image is mostly obscured.

Bad: In this example, too much of the subject’s head is cropped off, and the product vanishes entirely on mobile.

Small Cards

Content Specs: Support Card

Dimensions: 352 x 245 pixels

File type/size : .JPG / maximum 25 KB

Purpose: Provides an additional path into the support site, exposes support scenarios that many users don’t associate with support and/or communicates Dell Support differentiators.

Source: Content will be static.

Imagery:

  • Brand-approved lifestyle or product image or illustration.
  • Should not vary often.
  • Do not include any text, numbers or characters in the image file.
  • Do not use a white or light gray background.
  • Always be mindful of the tinted overlay at the bottom when choosing and cropping images.

Copy: The card supports only a single headline and link destination.

  • The link anchor text should change only in exceptional circumstances.
  • Maximum length is 80 characters, but striving for ~60 characters or fewer is best to keep the headline on two lines in desktop views.

Content Specs: Brand/Corporate Storytelling Card

Dimensions: 352 x 245 pixels

File type/size : .JPG / maximum 25 KB

Purpose: Elevates the Dell brand by featuring affirmative content such as a news story, press release, blog post or corporate report.

Source: Will need to be actively curated and governed. Corp Comm, marketing or business team will spec creation and then submit for review and launch.

Imagery:

  • Use brand-approved lifestyle or product image or illustration.
  • Do not include any text, numbers or characters in the image file.
  • Do not include a superimposed play icon with video thumbnails because the tinted overlay will partially or fully obscure it.
  • Do not use a white or light gray background.
  • Always be mindful of the overlay when choosing and cropping images.

Copy: The card supports only a single headline and link destination.

  • Maximum length is 80 characters, but striving for ~60 characters or fewer is best to keep the headline on two lines in desktop views.
  • Unlike with the case study, it’s generally better to tease the destination content rather than using the actual asset title, which may have little meaning out of context.
  • In the initial implementation, videos will not include a play icon, so when feasible, use copy to communicate the content type (e.g., “Video: We’re putting …”).

UX/functional notes: Videos are highly encouraged in this space. In the initial implementation, video will not play in page (but ideally will in the future).

Content Specs: Deals Card

Dimensions: 352 x 245 pixels

File type/size : .JPG / maximum 25 KB

Purpose: Highlights a single compelling deal and/or provides a path into the MPP segment.

Source: MPP or Consumer team will provide copy and destination for the link, plus image, and then submit for review and launch.

Imagery:

  • Use brand-approved product imagery.
  • Do not include any text, numbers or characters in the image file.
  • Do not include badges, logos, awards, bugs or violators.
  • Do not use white or light gray backgrounds.
  • The image should always correspond to the specific deal mentioned in the copy.
  • Always be mindful of the tinted overlay at the bottom when choosing and cropping images.

Copy: The module supports only a single headline and link destination.

  • Maximum length is 80 characters, but striving for ~60 characters or fewer is best to keep the headline on two lines in desktop views.

Content Specs: Service/Solution Card

Dimensions: 352 x 245 pixels

File type/size : .JPG / maximum 25 KB

Purpose: Further positions Dell as an end-to-end enterprise solutions provider.

Source: Will need to be actively curated and governed. ESG, DSG or Services business team will spec creation and then submit for review and launch.

Imagery:

  • Use brand-approved lifestyle or product image or illustration.
  • Do not include any text, numbers or characters in the image file.
  • Do not include a superimposed play icon with video thumbnails because the tinted overlay will partially or fully obscure it.
  • Do not use white or light gray backgrounds.
  • The image should always correspond to the specific deal mentioned in the copy.
  • Always be mindful of the overlay when choosing and cropping images.

Copy: The module supports only a single headline and link destination.

  • Maximum length is 80 characters, but striving for ~60 characters or fewer is best to keep the headline on two lines in desktop views.
  • Focus on customer benefit, speaking directly to the reader and favoring second-person point of view and imperative constructions.
  • With limited space, the name of the service or solution isn’t as important as its features and benefits.

Good vs. Bad

Good: Product is not obscured by the overlay, even on extra small mobile.

Bad: Products is obscured by the overlay when the card scales to mobile.

Bad: Product/focal point is obscured, even at larger breakpoints.

Homepage Retargeting

Introduction

  • Personalization means that the homepage, in its different states, will include up to 30 pieces of content.
  • This document maps what changes where, and for whom, based on previous-visit cookies and Demandbase IP lookups.
  • The guidance and specifications above continue to apply — from copy to color, from individual image selection and cropping to holistic composition.

Cookied “For Home”

Content changes and defaults:

  • Up to 2 additional consumer-specific banners replace the “For Work” product and SSI banners. But all 3 slots don’t have to be used.
  • The case study card is replaced by an S&P product message.
  • The services and solutions card is replaced by an MPP, Dell Outlet or Consumer Services product message or value proposition. But if the cold-state deals module is being used for MPP, Outlet or Consumer Services, the purposes simply switch.

Cookied “For Work” (no industry target)

Content changes and defaults:

  • The consumer banner is removed. It may be replaced by an additional “For Work” product, service or solution banner. But all 3 slots don’t have to be used.
  • The consumer EUC product card is replaced by a similar card featuring a business end-user product.
  • The deals card features a specific business deal instead of a consumer one.

Industry Targeting

Demandbase industries mapped to Dell content:

Demandbase Audience Segment Demandbase Industry Demandbase Sub-industry Dell vertical industry site Dell Target Industries attribute value (case study tagging)
Administration Government Federal Government
Federal Government Federal Government
International Government Federal Government
Judicial Government Federal Government
Military Government Federal Government
State Government State & Local Government Customer Stories > State & Local Government
City & Local Government State & Local Government Customer Stories > State & Local Government
Public Safety Government State & Local Government Customer Stories > State & Local Government
Education K12 K–12 Education Customer Stories > K–12 Education
Software & Technology Computer & Mobile Devices Customer Stories > Information Technology
Software & Technology Electrical Components
Software & Technology Imaging & Optics
Software & Technology Semiconductor Customer Stories > Information Technology
Software & Technology Data & Technical Services Web Development Customer Stories > Web Development
Software & Technology Software Applications Web Development Customer Stories > Web Development
Business Services Technical
Healthcare & Medical Healthcare Customer Stories > Healthcare
Manufacturing Manufacturing Customer Stories > Manufacturing
Retail & Distribution Retail Customer Stories > Retail
Telecommunications Telecommunications
Media & Entertainment Media & Entertainment
Energy & Utilities Energy
Financial Services Financial Services
Education Higher Education Higher Education Customer Stories > Higher Education

Content changes and defaults:

  • The default case study is replaced by an industry-specific card linking to the Customer Stories site (in prefiltered state).

    • Only for the 8 applicable industries; otherwise, cold-state default is served.

    • Image and copy will be static/generic in initial implementation; eventually, we’ll feature particular case studies.

  • The default services and solutions card is replaced by an industry-specific solutions card linking to the industry vertical site.

    • There are 12 applicable destinations.

    • Again, image and copy will be generic in initial implementation, but we’ll look to evolve toward more-tailored messages.

Generic copy for initial implementation:

Case study teaser:
  • Learn how Dell is helping public-sector institutions increase efficiency.
  • Learn how Dell is helping educators reach more students.
  • Learn how Dell is helping IT companies innovate.
  • Learn how Dell is helping providers streamline healthcare delivery.
  • Learn how Dell is helping manufacturing operations keep moving forward.
  • Learn how Dell is helping retailers retool their shopping experience.
  • Learn how Dell is helping universities support new learning environments.
Solutions teaser:
  • Explore Dell solutions for federal government.
  • Explore Dell solutions for state and local government.
  • Explore Dell solutions for schools and educators.
  • Explore Dell solutions for web developers.
  • Explore Dell solutions for healthcare.
  • Explore Dell solutions for manufacturers.
  • Explore Dell retail solutions.
  • Explore Dell telecommunication solutions.
  • Explore Dell solutions for media and entertainment professionals.
  • Explore Dell solutions for energy companies and utilities.
  • Explore Dell solutions for the financial-services industry.
  • Explore Dell solutions for colleges and universities.