Why doesn’t my site look like the demo?

Every year at Automattic, we put down our day-to-day work and do customer support. No matter what position you are in. We all dive in. In my past five years here, I’ve heard more than my fair share of frustrated customers upset that their new theme doesn’t look like the demo; the one that was presented to them while they were out searching for a new look. Well, today I finally felt their pain. And I wasn’t even looking for a new theme. Here’s what happened:

I was participating in our current empathy challenge. Every designer at the company was tasked with a seemingly simple task: Recreate a post from the Longreads.com site. Most of them are a picture and a ton of text. Hey, its called Longreads for a reason. The full instructions were:

1. Install the Gutenberg plug-in if you haven’t done so already.
2. Go to Longreads or Discover’s Editors’ Picks.
3. Select a Longreads post or an Editors’ Picks page.
4. Start your stopwatch. Start a screencap.
5. Try to re-create everything you see on the screen: post content, masthead, sidebar, bottom matter.
6. Stop the screencap. Record the amount of time you spent.
7. Share what worked well for you. Include your video and total time spent.
8. Be radically candid about where you might have gotten stuck.

Post I recreated

Longreads post I chose to recreate was: Why Can’t Female Reporters Stay in the Picture?

Recording the process

Feelings

Overall it was okay. I’d give it a solid C. I chose to only focus on the post itself because as I was copy/pasting away, I knew I’d have to dig into CSS and probably hunt around for a theme. A detailed breakdown:

• Since I was copy/pasting, I had a split screen situation going. The first view of my post was actually the sidebar. I knew this because I have used the Gutenberg post creator before, but if I hadn’t I’d be super frustrated. I was only mildly frustrated as I tried to figure out how to get out of this view and into where I could actually start my post.
• The actual copy/pasting was pretty smooth. There were a few minor annoyances like extra blank boxes. And I couldn’t scroll down! That one really bothered me. I like a good amount of blank space between my current writing position and the bottom of the browser window.
• Tweets embedded super nice, but if I wasn’t super nerdy I probably wouldn’t have known you’d have to click on the date of the tweet, copy the URL of the tweet, and then pasted it in.
• One of my paragraphs had a [bracket] as part of a quote, which is a pretty common thing in publishing, and Gutenberg thought it was a shortcode.
• Once the content of the article was in there, I knew I had to mess around with the CSS. It looked nothing like the article! At this point, I knew I needed to use the CSS feature in Jetpack. Would your average person know to do this? Highly doubtful. I connected to Jetpack and landed in Calypso. No way to get back but the trusty back button. I then opened the lovely customizer and pulled cobwebs off the CSS side of my brain. I got it looking halfway close to the Longreads site, Published, and previewed my site. At this point I was rrrrreally wanting a single column situation. And to get rid of the eCommerce theme, which now looked a bit ridiculous when reading about female reporters. I hunted around for a theme, which at first was problematic due to an error. I then saw a Jetpack notice about telling me about Jetpack themes so I found one in Calypso and then head back to wp-admin to do some further customization. BUT my CSS was gone. Ugh, I was done at this point. And this was just getting the post to look a certain way, never mind the rest of my site!

Conclusion

Gutenberg as a post editor can only take us so far. It was easy to recreate a post, but getting it to _look_ the way I wanted? That is a whole ‘nother experience ripe for reinventing. The current process is super frustrating and requires code and a lot of time. I would bet that most of our small business owners have neither of these! And even if one does, it really shouldn’t be this hard; time should be spent elsewhere.