I recently worked on an impressive website for an engineering firm that specializes in large, environmental restoration projects like restoring wetlands and estuaries.
The site uses beautiful images that fill the entire screen with bold text titles. These large images are called “hero” images. I wanted to display the pictures and titles in a way that would look great on all devices. The titles need to be very readable even on a small screen and I wanted to keep the title and images in the same ratios.
After some research and experimentation I found the perfect balance and created a codepen pen to show it off. In the screen print the white title sits in the top left corner of the dramatic night sky with the milky way. No matter how big or small the screen is the image and title remain in the same scale. This is an example of responsive web design.
The image is also a link to codepen.io so you can play around with the screen sizes to see how it adapts.
