Portfolio rebuild / 2026 rebuild
A newsletter built in modules
A modular email development example rebuilt from earlier newsletter patterns, with fresh fictional branding, original illustrations, and a responsive table-based layout.
Explore the build
A layout that travels well.
Switch between a 600px email canvas and a 375px mobile canvas to inspect how the modules stack. Browser previews are separate from inbox-client testing. Both canvas widths fit the space available on your screen.
Responsive HTML email
The weekend edit · fictional newsletter · Desktop preview
Read the module structure
<!-- Two-column feature row: stack each cell below 480px. -->
<table role="presentation" width="100%" cellpadding="0" cellspacing="0">
<tr>
<td class="email-column" width="50%" valign="top">
<!-- Local image, category, headline, copy, and CTA -->
</td>
<td class="email-column" width="50%" valign="top">
<!-- Reusable second feature -->
</td>
</tr>
</table>
@media screen and (max-width: 480px) {
.email-column { display: block !important; width: 100% !important; }
.email-column + .email-column { padding-top: 24px !important; }
}The project
The Weekend Edit combines a full-width feature, a two-column story row, and an image-and-copy module in one consistent layout. Columns stack on smaller screens, text remains live HTML, and the build uses inline styles with a small set of responsive rules.
My contribution
- Rebuilt the campaign with new copy and original illustrations instead of client artwork or offers.
- Structured reusable hero, editorial, two-column, and supporting-feature modules using presentation tables.
- Used inline typography and spacing, explicit image widths, and Outlook conditional wrappers.
- Added mobile stacking rules and separate desktop/mobile browser previews.
- Included the complete HTML source so the structure can be reviewed directly.