VILLA Blog Design Decisions
Jennifer Coyle Palandro
The typography was a big back and forth between my original design and the final product. I’m aware character count for readability should be between 50-60 characters.
My original design showed about 65-70 characters per line.
We ended up with about 80-90 characters per line.
This was a major improvement over the originally desired typography standards, which would’ve resulted in about 120 characters per line.
Photography vs. Text
The thinking behind the wide photos versus the narrow text blocks stems from the fact that VILLA is a highly-visual ecommerce-driven brand. VILLA employs several talented photographers whose jobs are to capture product and lifestyle shots in order to help sell product online.
Because of the desired character-per-line discussion for the blog, the stakeholders and I went back and forth on having the photos be as wide as the text on desktop (which resulted in photos that were too small to be appreciated), or having the text be too wide, which degraded the readability experience.
Most of the users who visit the VILLA blog are on mobile, according to Google Analytics.
So ultimately, the disparity between the width of the photos and the width of the text would only affect a small number of users.
While I personally believe in a mobile-first approach most of the time now, the numbers for VILLA strongly lean towards designing for customers on mobile devices.
The goal of the blog is to sell product. According to Google Analytics, about 66% of the purchases are completed on mobile.
This is much higher than the average in 2016 where 34% of purchases in ecommerce in general were performed on mobile.
Because of this staggering number of mobile users for both the blog and the ecommerce site, the design was created with mobile users first.
Screenshots from the original design below.
VILLA in general leans towards using SVG instead of PNG image formats. This is for several reasons because of file size and download speed, scalability, and the crispness on mobile devices.
Since we already determined most of the users are on mobile, and most modern devices have a higher pixel density (Retina or otherwise), this is yet another reason to use SVG instead of another image format.
We used SVG icons for the various blog categories in the design.
Not only are these featured on the homepage in desktop resolution—
—the icons are also used on individual blog posts to help signify the category at a quick glance.
After attending Mikey Ilagan’s course via Girl Develop It Philly on Accessibility, I made the case for pushing CSS- and JS- controlled text formatting for all-caps words and phrases.
There are a surprising amount of words that are capitalized on the VILLA blog (with VILLA being one of the specific offenders).
This is seen specifically on the Meet the Team page where the name of the blog (The Movement) is in all-caps, but it’s controlled by a JS-injected span that styles the text as uppercase in CSS.