I’ve started to think more about the blog design and how we can make it better on the next iteration.
An issue we are having with the current layout is image execution, size and placement.
The problem is mostly with executing an image design that will work on all devices and screen resolutions.
Solution #1
Our initial solution was to create an image size with a 4:2 ratio and place the image below the title with a width: 100%; within the main content column. This works but is not as aesthetically pleasing to the audience leaving them with a sub-optimal experience.
Solution #2 (Proposed)
Now that we have established that we’re providing the audience with a sub-optimal experience, we need a solution that will provide the best possible experience.
In the initial design the blog post image was a 4:1 aspect ratio with a fixed height in various @media sizes. Meaning that when someone viewed a blog post on a larger screen, the viewing aspect ratio would shrink to more like a 6:1 ratio making it extremely difficult (next to impossible) to design imagery for blog posts effectively for all audiences.
A new optimal proposal that solves all issues with imagery is to design all imagery with a 4:2 ratio and keep the ratio consistent as it scales from the smallest mobile @media width up to the largest. At the largest resolution sizes the image height could possibly push the title below the fold but that will be only 1% of the population. It’s best to provide the best viewing experience for 99% of the population than to appease the 1%. This would allow us to move the image back above the title and provide a much better and more visually appealing experience for the reader.
Reference
Here’s an example of the proposed solution
http://www.itsnicethat.com/features/too-fast-to-think-creativity-advice-technology-050116