On a project, I completed recently I had the challenge of taking a complex design and get it to work on the web. It involved precisely lining up three horizontal triangle shapes on top of a contrasting section beneath them and it had to be consistent across many different screen sizes.
Not only did the triangles have to stay aligned to the top, middle, and bottom of the section, they also had to resize proportionately as the screen size changed.
Oh, and I had to set the text inside the triangles too.
My client had a 27” screen in his office and a 15” 4k screen, an iPhone 6, and a 15” laptop.
I was building the site with the Elementor Pro page builder which has an option to enter custom CSS. So my first thought was, no problem, in addition to Elementor’s responsive screen options I’ll load in the right media queries to target these specific screen sizes. Shouldn’t be a problem.
The feedback was good, worked great on my client’s phone and 27” monitor. We moved on. Then his client, the one he designed the site for, came back and said it wasn’t working on his iPhone SE. I didn’t even know there was an iPhone SE, but there is and the triangles were not lining up correctly on his phone. I had to fix it.
No problem, I’ll add another media query to target that screen and we’re back in business.
Didn’t work out that way because now we lost the alignment on the 27” screen. A few more tweaks and we got the 27” screen back inline. Now the 15” 4k was out of alignment. Fixed that, but it affected the iPhone 6.
This went on and on. Something had to change in order to get this to work on this wide range of screens and resolutions.
I went back to pencil and paper to re-think my approach to overcoming this challenge. Initial thought was a redesign, but I knew they wanted this. Besides, it wasn’t mine to change. The designer wanted this, the client approved this and there was a deadline.
I started to think how can I get this done with out media queries. Sometimes I get attached to my initial idea and the thought of changing it doesn’t feel good. But I had to.
I decided to make two separate sections and adjust the background image to create the illusion that it was one image spanning from the top section through to the bottom.
Instead of creating three triangles, I created just two, one for the top and one for the bottom. For the middle triangle, I put an angle on the bottom edge of the top section and an opposite angle on the top edge of the bottom section and let the negative space between the two sections create the illusion of a triangle.
I blunted the points of the top and bottom triangles and pushed them off the screen just a little bit which gave me some room to play with - didn’t have to be super precise on the alignment.
i also used percentages instead of absolute pixels. This really works well and with a little trial and error, I got it to look very, very close to the original design. The designer was happy and his client was too.
I drew a lot of inspiration from “Responsive Web Design” by Ethan Marcotte when approaching this challenge. It’s a short book but he goes deep into the formulas he uses when building a responsive webpage. While Elementor Pro does a good job with responsive development, this book inspired me to think in a different way.
Sometimes I hold on to the first idea I get for solving a problem and I keep hammering at it to make it work. After all it’s my idea and it feels right and the though of it not working is painful to accept. But I don’t want to give up too quickly either. What if I’m close? Just a few more minutes and I’ll get it over the top.
How do I know what is right?
I still don’t know, but I am listening to my gut more and more in these situations. But I also found a great technique I learned form a Navy seal that they use in their training called the OODA loop and then FFF. OODA stands for Observe–Orient–Decide–Act and I add a Q for Quickly. The FFF stands for Fail Forward Fast.
Seems a little extreme to some people that I apply military training to my development process but it’s amazing how many lessons from their training can be applied very easily and effectively to our civilian lives. Either way, it works for me. And in this case, it worked out for my client too.
If you'd like to listen to and see a demo of this process on the WP Builds podcast with Nathan Wrigley click here.
Take Care.