Email Design Email Layout and Structure 2 — Questions and Answers
Question 1: Why should email designers avoid using CSS floats for layout?
- They increase file size significantly
- Many email clients do not support CSS floats reliably (Correct answer)
- They make images blurry
- They prevent tracking pixels from loading
Correct answer: Many email clients do not support CSS floats reliably
CSS floats are not consistently supported across email clients, so table-based or inline-style layouts are more reliable.
Question 2: What is the recommended minimum touch target size for links and buttons in mobile email?
- 24x24px
- 44x44px (Correct answer)
- 32x32px
- 16x16px
Correct answer: 44x44px
A minimum touch target of 44x44px is recommended by Apple's Human Interface Guidelines to ensure easy tapping on mobile devices.
Question 3: Which email section typically contains the logo, navigation links, and branding?
- Footer
- Preheader
- Header (Correct answer)
- Body
Correct answer: Header
The email header contains branding elements like the logo and navigation links, establishing brand identity at the top of the message.
Question 4: What is the purpose of spacer rows in an HTML email table?
- To embed tracking pixels
- To add vertical whitespace between sections (Correct answer)
- To define column widths
- To prevent images from loading
Correct answer: To add vertical whitespace between sections
Spacer rows use empty table cells or images to add vertical whitespace, improving readability and visual separation.
Question 5: What does 'fluid layout' mean in email design?
- The email uses animated content
- The layout adapts its width to the container using percentage-based widths (Correct answer)
- The email loads images dynamically
- The template uses a fixed 600px width always
Correct answer: The layout adapts its width to the container using percentage-based widths
A fluid layout uses percentage-based widths so the email stretches or shrinks to fit different screen sizes automatically.
Question 6: In a two-column email layout, what typically happens on mobile without responsive design?
- Columns stack automatically
- The email zooms out to fit both columns (Correct answer)
- Columns disappear entirely
- The email switches to plain text
Correct answer: The email zooms out to fit both columns
Without responsive breakpoints, a two-column layout on mobile causes the email to zoom out, making text too small to read.
Email Design Email Layout and Structure 2
Why should email designers avoid using CSS floats for layout?