Inspired by a tweet, I’ve built a demo website template for a book author’s landing page. The idea is a 50-50 width 2-column desktop layout – meaning each of the 2 columns is 50% of the horizontal width – that collapse down to a single column on mobile and smaller sized screens. The landing page’s design features a quote, header text, a boxed-in image, and an absolutely positioned background that’s slightly less than half the screen width.

Web Design Features

• 2 columns
• featured image
• heading
• body text
• quote

Inspired by a Tweet

Here’s the tweet that inspired my demo website design and development project.

My Fully Developed Version

I built a fully functioning responsive version of this design using WordPress and the Divi theme.

DEMO: Check out the demo.

Design Considerations

Desktop View (large screen sizes)

I built the same 2-column 50-50 web page layout for desktop viewing. The text and image are vertically centered to each other.

Tablet View (medium screen sizes)

At this viewing width, the layout responsively collapses to a single column. As the text becomes too tall or the image becomes too narrow the layout responds. I’ve chosen to left-align the image at this range because leaving it full-width results in an image that is much too tall.

Mobile View (smallest screen sizes)

Once the screen reduces to a mobile-phone size, I’ve allowed the image to stretch the full width and become horizontally centered above the text.