As someone who works with a lot of different people on the web as a designer and coder I find that sometimes trying to explain why some things may not come out right can be a difficult conversation. Sometimes me and the person I am trying to help can be speaking different technical languages.
So, for 2019, I am going to start a series of posts that will discuss various topics about design and front-end code. My hope is to visually explain how a change is perceived differently based on the screen you’re reading content from; how device size and resolution matter. I want to cover topics like color and how not all yellows are yellow. Also things like image size and resolution. Text size, and various little things that come up and sometimes people need a little help along the way to understand.
The Perfect Box
To start this series I want to discuss perfect box. So what is the perfect box?
The “Perfect Box” is when someone goes through a design phase and then once they have section of a page actually coded they will find that not everything sits perfectly and is not perfectly uniform. They will find that some things look longer or shorter and want us to code it to be exact. They want their content to always sit in a perfect size box.
The Best example of this is blog pages or cards. Usually they are set up to be in a rows and have on average three to five cards per row. Like the images below:
As you can see they are perfect. The images all line up perfect, the headings line up perfect and the content lines up perfect. These images are from our actual mock-ups for our website redesign, and typically when you go through a design phase you get mock-ups from your designer. They can be PNGs, JPGs/jpegs, PDF’s or come from a prototype software like Invsionapp or AdobeXD. No matter how you receive it, you’re looking at an image that is perfect but not a coded website.
So what happens once that perfectly mocked up image goes on the web? Well, it really depends on what type of device you’re viewing it from. In fact if you mostly look at websites from a tablet, small laptop, or phone you may never see it as depicted in the images.
On the web that image becomes imperfect as illustrated below.
Sample 1 is if you are viewing it from a large desktop monitor. Sample 2 would be from a small laptop and some tables. As you can see that mock-up now being as code and having the actual content populate those spaces created a lot of now imperfections. The height of the images are different, The titles wrap differently, same amount of words can show for each excerpt but it causes it be be different lengths. So now all those read more buttons are not perfectly lined up and end up in different spots at the bottom.
What happens if I want each one to stay perfect
While the native nature of responsive web design is to let elements fall and fold as they need to, sometimes people want every box like the image design to still be perfect until they have the columns collapse to 2 or 1 row. The height of each box needs to be the same, the buttons need to all be perfectly lined up at the bottoms of each section. All the images to render at the same exact width and height.
First what you need to know is yes the code can be changed to accommodate all of those things. But what you need to know are the caveats of wanting all that information locked in place.
The first you need to know is we will have to calculate the height and anticipate your content forever. Which create longer term anomalies over time and it still wont be perfect rows. If you write a super duper long heading after writing ones that have maybe 4 words that heading might actually run into the excerpt, or it might be hidden and people will see it all cut off.
Secondly, those images you want to always be a 3:4 ratio may not stay the same if you upload an image that is smaller, and/or more rectangular or square. It can actually end up being weirdly cut off, still appear shorter than the rest or even look stretched. And unless you know how to cut an image or have someone that can do it for you, you are going to upload images with different ratios.
Another issue will be weird places of white-space. You can have a bunch of buttons that look like they are just floating off into space that appear to have no content that they belong. Due to the fact that maybe a piece of content next to them was really long.
Unlike an image all of your content is going to be different. There will be different length words, and different images.
Embrace the imperfections
So the best thing you can do is embrace the little the nuances that happens when that mock-up image becomes code and accept that your content doesn’t want to play in a perfect box. It wants to be expand and contract. It’s ok if all the content lines up perfectly to the top of each new row but is imperfect at the bottom. It doesn’t take away from someone’s experience on your website. It lets your website become a positive responsive experience on the web and let’s everyone get the information they need without being distracted by content that didn’t want to line up perfectly.
I have been designing and coding websites for the last 5 years that have mobile first in mind. And I discovered as we move towards mobile first on the web embracing the change and moving with the trends is better than going against it. I enjoy what I do and love helping people. I always look forward to helping bring people’s vision to design and code.
