ponyfoo.com

Pony Foo Gets a Face Lift

Pony Foo’s design remained largely the same throughout its history so far, as I never really spent a lot of time on its design. Today I’m thrilled to announce that I’ve redesigned Pony Foo. I couldn’t be any more excited about how cheerful and colorful the site now is.

Improve this article
Nicolás Bevacqua
| 7 minute read | 26

I was never really happy about how the site looked. Sure, I did choose a couple of custom fonts and settled for a few colors that you can still see on Pony Foo prominently today: pink for most links, the green in the pony’s eye, JavaScript’s yellow, etc. The “paper-bag look” never really stuck with me, even though I was mostly aiming to make the content itself highly readable.

When I decided to redesign the site (around a week ago), the first thing I tackled was “making the logo look cooler”. I had no idea what that meant at the time, but – soon afterwards – it set the stage for the entire redesign. Before getting on with the logo I just knew I wanted a redesign, but I soon realized what I needed to do once I got to play with the logo. See, the idea I came up with was that the logo should “flash in pink” on mouse over. That sounded cool, so I did that, and I thought it looked pretty nice, so I translated the concepts into the entire redesign.

I’ve prepared a different post that focuses entirely on the logo and some problems I had with it for tomorrow, so let’s move onto other parts of the design.

When I say “concepts” I really mean “colorful as hell”. I thought, this looks nice and cheerful, I wonder if I could make the entire site look as much of a happy place as the logo does. And that’s what I tried. I started with the most important part of the site – an article.

Articles

I moved details people rarely care about (like comment count, reading length, or tags) onto the sidebar, and emphasized the article’s title, its first paragraph, and code blocks.

Code Blocks

When it comes to code blocks, I adopted a more colorful and modern color scheme: Tomorrow. I also made tag highlights less invasive, as they were too distracting before the redesign, and many commented on how obnoxious that was.

A code block using the Tomorrow syntax highlighting theme
A code block using the Tomorrow syntax highlighting theme

Headings

A while before the redesign I had added anchors to every heading, so that you could go to an URL like /articles/es6-modules-in-depth#conclusions, but you really had to have intimate knowledge about the blog to even know you could link to headings like that. Now you can just hover over an anchor and click on it, ta-da!

A heading being hovered over
A heading being hovered over

Comment Threads

Then there were comment threads, those were pretty confusing as there were almost no visual cues differentiating replies in a comment thread versus an entirely different comment thread.

The old comments design
The old comments design

The current design makes an effort to illustrate the hierarchy behind comment threads by adding an imperceptible visual cue to the left of each comment.

The new comments design
The new comments design

The comment editor also got a face lift. It’s now using woofmark and I think it looks much cleaner now. Let me know your thoughts, though!

Licensing

Lastly, there’s the licensing. I’ve been asked multiple times about whether my content was up for distribution or whatnot, and even though I almost always said yes, I’m sure some people thought they couldn’t use the content and didn’t bother to ask. That’s why today I’m adding an explicit note stating that the content distributed on ponyfoo.com is CC-licensed – at the bottom of every page in the blog.

The license footer
The license footer

When I was done with the single article experience, I moved on to the rest of the site.

Buttons and Links

This one bothered me for a very long time. Links looked very fat. Buttons were completely inconsistent, no two buttons looked the same, for some fringe reason. I took care of that, links aren’t fat, and buttons have a cool background powered by the same CSS that animates the logo. How sweet is that!?

Some links and a button
Some links and a button

I guess while I’m on the topic I can comment on how I added confirm steps that prevent me from deleting drafts I’ve been working on for days. Yes, that happened, and it wasn’t any fun at the time. I would add an Undo feature if it was user-facing, but since only I see it, the old confirm dialog is good enough!

Home Page

The home page is probably the second most important page of the site. Even though each article is the most important page of the site, the home page is obviously – far and away – the most visited page in the site. Throughout the history of Pony Foo, the home page was basically a collection of individual articles one after the other. This didn’t really work out great, as people couldn’t effectively find anything other than the first few articles. There was so much information about each article that you quickly lost focus as to what you were looking at.

An older version of the home page
An older version of the home page

Don’t even get me started with the first iteration of the home page. Remember these little circles looping around? Ugh! Such shame.

The first iteration of the home page
The first iteration of the home page

If anything, the new home page looks sort of like a news paper. Except for the bazillion ads. I didn’t add those yet. I think this is a great way to sift through articles that may or may not interest you. There’s 40 different articles on display in the home page, and you can page through to see older ones.

The redesigned Pony Foo home page
The redesigned Pony Foo home page

This format made a lot of sense in search results, which used the same stupid “render most of the article” “strategy” as the home page, and failed miserably to help you find what you were looking for.

A search for the ponyfoo tag
A search for the ponyfoo tag

Publication History

The publication history (ex. “archives”) is probably the page that changed the least. For what it’s worth it now contains a brief history of the site, and a count of the amount of articles published on the site. Can you guess the number?

All the while I was working on the redesign I also had my eye on performance.

Performance

One of the glaring issues in performance at Pony Foo was that I was serving up huge chunks of data even on pages that didn’t need any of it. For instance, the home page served the introduction to six different articles, but the entire body of those articles was served as JSON for later use – even though it wasn’t being actually used. The same issue could be observed in search result pages and the publication history. The publication history made this particularly nasty, as that page contains every single article ever published on Pony Foo. That means that the page was receiving JSON models to render pretty much the entire site!

The other performance issue blocking this redesign was the fact that I was pulling critical CSS content for just the home page. That means that if the home page has different styles than some other content, that other content would be improperly styled while the non-critical CSS was being loaded. I fixed this by pulling critical CSS from many different pages and serving the inlined CSS according to the page being requested. This involved a bit of rework, and I’m planning an article on the subject as I think it’s something most of us should be doing in our sites and apps – it’s not just for blogs.

Easter Egg

Also, what do you think of the, uh, easter egg? I would show you, but then it wouldn’t be an easter egg anymore.

Hope you like the new design and that it makes for a more pleasant reading experience here on Pony Foo!

Any and all feedback is appreciated. If you want to open a discussion on some front, don’t hesitate to email me at hello@ponyfoo.com, and thanks!

Liked the article? Subscribe below to get an email when new articles come out! Also, follow @ponyfoo on Twitter and @ponyfoo on Facebook.
One-click unsubscribe, anytime. Learn more.

Comments (26)

Luciano Mammino wrote

This new re-design is impressive. I love the color schema and the big spaces, just not to mention the interactive logo :O Well done!

Nicolas Bevacqua wrote

Glad you liked it. That means a lot to me! Thanks.

Adrián Salgado wrote

Hey,

Love the redesign, looks really cool, the colours are beautiful and love how everything looks.

Just in case you want some feedback, I got this weird looking symbols on top of blockquotes:

https://www.dropbox.com/s/s3wfpp6pe2c5syo/Screenshot 2015-09-30 00.09.06.png?dl=0 https://www.dropbox.com/s/e73tnn8rdhoggct/Screenshot 2015-09-30 00.12.21.png?dl=0

You can also see the sidebar getting on top of some of the article text and a weird symbol on the anchor links too (not sure if intentional or not).

Also, got “Uncaught TypeError: a[i].className.match is not a function” on the console.

Hope this helps, and love the way the logo animates (not sure if that’s the easter egg),

Cheers.

Nicolas Bevacqua wrote

I think I fixed the first one, and the second one is Clicky being dumb about crawling all the links in the site and not understanding SVG attributes. I’ll see what they can do about that one. Thanks!

johhnnynyyy wrote

Easter egg = konami code. 2ez

Also the main article page disappears underneath the right hand side.

Nicolas Bevacqua wrote

Could you link me to a screenshot of that? Thanks, I’m not sure I understood you there.

Adrián Salgado wrote

I think he’s talking about the main content going behind the sidebar.

johhnnynyyy wrote

Thanks. Looks great now!

Damon wrote

New design looks great, love the animations and layout changes.

I did notice though that the sidebar overlaps the content at some resolutions:

http://i.imgur.com/9YatITo.png

Nicolas Bevacqua wrote

Ah yes, that’ll be fixed some time today.

DrMabuse wrote

Hey good job looks nice !

Nicolas Bevacqua wrote

Thanks! Much appreciated

Tarcisio Gruppi wrote

The page content is getting under the sidebar.

Text bug
Text bug

Cheers.

Nicolas Bevacqua wrote

Yup, I’ll deploy a fix today!

Adam wrote

I hate to say this but the old one was much better. I just can’t stand this redesign it is horrible. The content is not centered to the middle of the screen but to the left and on my widescreen display I have to scan text from side to side and it is very frustrating and tiresome. The boxes seem tacked-on. I see input boxes everywhere seemingly without thinking about their placement. Not to mention that the loading time of the page is much worse now with that animated logo. Please put a button somewhere so I can switch to the old layout. I can’t stand the current one :(

Nicolas Bevacqua wrote

I’m glad you liked the old design.

Nicolas Bevacqua wrote

You could read the site in your terminal if you prefer something more “dull”.

Pony Foo in plain text
Pony Foo in plain text
Jeff Carlsen wrote

The redesign is neat. My only complaint is the left alignment of content regardless of window size.

A couple styles could improve this:

.at-container, .at-teaser-markdown { max-width: 1400px // or relative equivilent margin: 0 auto }

Adjusting the H1 to line up will require a little more adjustment.

DrMabuse wrote

I missed a sticky navbar in my device :p

DrMabuse wrote

And go to top button

Ricky wrote

Looks nice! Yeah, got the easter egg with one guess. I have clearly spent too much time on the internet. 😐

Stephen K wrote

Looks really nice. Only thing I’ve noticed so far is that the comment box area placeholders are incredibly hard to read, even when the input has focus.

teogeos wrote

Very nice! But… several things, most importantly fonts, are broken on firefox.

Nicolas Bevacqua wrote

They work just fine for me.

teogeos wrote

Oh, my bad. Let me reword my comment then:

Very nice!

Timo wrote

I might be a little late to the party, but fonts are not loading on Firefox 42.0 on Windows 10 either. Works fine in Chrome. The design looks much much better with the right fonts, it’s pretty awful without them. My guess is that Firefox doesn’t like the order you are loading the CSS (first CSS then fonts). Here's a screenie of how it looks for me

Some alignments also seem of, but I think those are related to the font size
Some alignments also seem of, but I think those are related to the font size