Two samples of how I transformed print and email graphics to responsive pages for browser viewing and SEO.

On this responsive article page for program book spread of “Some Tips & Tricks”, I rearranged the spread to vertical infographic to fit the width of the article page. To match the original print as much as possible as requested by the Director of Content, I coded the colors and used different sizes of font in accordingly.


 

For this article responsive page, I was requested to match it with the masthead of the email. For the best online performance and viewing, I used live text and html codes as much as possible instead of using one image. Only the leaves are floaty png which move to adapt device screens and the flower icon is SVG for high resolution display.