Email Design Email Design MCQ 3 — Questions and Answers
Question 1: A designer notices their email renders with unexpected gaps under images in some clients. What is the most common fix?
- Set images to display:block (Correct answer)
- Increase the image resolution
- Convert images to PNG
- Wrap images in a span tag
Correct answer: Set images to display:block
Images default to inline display, which adds descender space below them; display:block removes the gap.
Question 2: Which approach makes a two-column email layout stack vertically on small screens?
- Using media queries or fluid hybrid design to reflow columns (Correct answer)
- Setting the columns to position:fixed
- Using iframes for each column
- Adding JavaScript resize handlers
Correct answer: Using media queries or fluid hybrid design to reflow columns
Media queries or fluid hybrid techniques let side-by-side columns stack into a single column on narrow viewports.
Question 3: What is a 'bulletproof button' in email design?
- A CTA button built with HTML and CSS (often VML for Outlook) instead of an image (Correct answer)
- A button that cannot be clicked twice
- An image-only button hosted on a CDN
- A button protected by a CAPTCHA
Correct answer: A CTA button built with HTML and CSS (often VML for Outlook) instead of an image
Bulletproof buttons use code rather than images so they render even when images are blocked, with VML fallbacks for Outlook.
Question 4: Why should designers avoid building an entire email as one large image?
- It is invisible when images are blocked, hurts accessibility, and triggers spam filters (Correct answer)
- Large images are illegal under GDPR
- Email clients cannot display images wider than 300px
- Single images always break dark mode
Correct answer: It is invisible when images are blocked, hurts accessibility, and triggers spam filters
All-image emails show nothing when images are blocked, cannot be read by screen readers, and raise spam scores.
Question 5: Which font strategy is best when using a custom web font in email?
- Specify a font stack with web-safe fallbacks like Arial or Georgia (Correct answer)
- Embed the font file as an attachment
- Convert all text to images
- Rely on the client to download the font automatically
Correct answer: Specify a font stack with web-safe fallbacks like Arial or Georgia
Most clients ignore web fonts, so a fallback stack of web-safe fonts preserves a similar look.
Question 6: In email accessibility, what does setting role='presentation' on layout tables accomplish?
- It tells screen readers to skip announcing the table structure (Correct answer)
- It hides the table from all users
- It converts the table into a div
- It disables table borders in Outlook
Correct answer: It tells screen readers to skip announcing the table structure
role='presentation' prevents screen readers from reading layout tables as data tables, improving the listening experience.
Question 7: What is the typical safe maximum total size for an HTML email before Gmail clips the message?
- About 102 KB of HTML (Correct answer)
- About 5 MB of HTML
- About 10 KB of HTML
- About 1 GB of HTML
Correct answer: About 102 KB of HTML
Gmail clips messages whose HTML exceeds roughly 102 KB, hiding content behind a 'View entire message' link.
Email Design Email Design MCQ 3
A designer notices their email renders with unexpected gaps under images in some clients.
What is the most common fix?