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 GuidelinesLegacy 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:
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.