With the modern responsive WordPress themes, it can be a challenge to make a header graphic that looks good on both a large computer screen and a phone. One of my pet peeves about contemporary UI design is that the header image is often so large that the user has to scroll down to see anything. This isn’t a problem on a phone with a vertical format but it is a problem on a horizontal format such as a computer screen.
The responsive format has to accommodate both vertical and horizontal layouts and a variety of sizes. This is as much a design problem as it is a UX issue. From a visual standpoint, what looks fine on a small screen can look humongous on a computer screen. Proportions go really wonky when a screen is resized: not just the image but the text sizes. Font sizes that look well balanced on one screen can change radically on another.
The header for the Tarot Cafe site took a few tries to get right: the cup that looked huge on the computer was too small on the phone or iPad. When I made the cup to a manageable size for the computer screen, it became too tiny on the phone. Plus, it “swam” inside the borders of the image.
The solution finally came to me: if the image swam inside the confines of the header area, why not make the header a seascape? Well, I have to be honest, I wasn’t thinking that, but I did know that the plain background had to be replaced with something that had more detail. My literal left-brain struggled with the idea that I needed a table surface for the teacup first, but then I realized that the horizon could be the tabletop edge and the cup could rest upon the surface of the water.
The final image has a nice surreal effect. And the final design incorporates the original colors of yellow ochre and marine blue in the menu colors instead of in the image.