The largest design update in CodePen’s history has just dropped! There is a lot to know, so we we thought we’d guide you through it all.
Here’s a table of contents:
- Help from Sparkbox
- New Areas: Explore
- New Feature: Templates
- New Feature: Broader Search
- Now Better: Editor Interactions
- Now Better: App Settings
- Now Better: Jumping to Your Stuff
- Now Better: Your Profile
- The Little (Big) Things
- Bug Reports
We’re working with Sparkbox on the design
We thought we would get help from the experts (as we do) on this project. It was a huge 6-month undertaking. The team at Sparkbox did user research, visual design, UX, and kept the project on track. That was wonderful, and meant we could keep on keeping on running CodePen while progress was being made.
We’re documenting the whole journey here.
The journey, it should be said, isn’t over. As we wrote on that site:
The advantage of designing in the open means that launching a site into the universe is only one blip on the long, iterative adventure that is designing a website. A site going live is only the preliminary foundation for making the site excellent. Now that we are clearing some of the dust from building and changing the previous design, we’re ready to improve upon all of our theories and ideas we had in the early stages. And that’s where you come in.
Today we’re excited to present to you, the community, the first phase of the CodePen redesign. By first phase, we mean we’ve made some major adjustments, but there’s still plenty left to do. Instead of going away for months and months, perfecting every detail, we figured we’d stay in the spirit of being open and show you where we are. The best way for us to truly improve upon the CodePen experience for CodePen users is to, well, listen to the CodePen community.
Listen Along
We’re also doing a four-part podcast mini-series about the redesign, of which the first three are ready for your listening pleasure: one, two, three. The fourth we’ll record post-launch.
New Areas: Explore!
From speaking with a variety of different folks about how they use CodePen, one thing was clear: many of you come just to browse. You’re looking for examples of code, design, animations, patterns, etc. We wanted to do better at accommodating that.
Right in the main navigation, you’ll see links to Pens, Posts, and Collections. Those take you to Explore pages, which are dedicated to browsing.
A hotly-requested feature we added here is the ability to browse more Pens at a time. Click the 12-up button and double the amount that you see on every page (if your computer can handle it!)
The new Explore pages also offer ways to browse content that previously wasn’t available. For instance, choose between Picked Collections (ones that we’ve chosen), Popular Collections (based on a popularity algorithm), or Following Collections (from people you’ve followed on CodePen). You can do the same for Posts.
New Feature: Templates
Now any Pen can be a template! You can choose to start a new Pen from a template and it will be an exact copy of the template (minus the title and description and such), and also not be a fork. Forks are also exact copies, but they are treated a bit differently on CodePen (e.g. they don’t show up in search by default, they are in a different area on your profile, etc.). Pens started from a template are just a regular ol’ Pen.
If you’re logged in, you’ll see your templates in the dropdown attached to the New Pen button:
Say sometimes you like to use Haml, Sass, and have jQuery available – you could make a template for that. Say sometimes you use LESS, have Bootstrap loaded, and have the responsive meta tag added to the <head> – you could make a template for that.
To make a Pen a template, you check the box in that Pen’s settings dialog.
But templates aren’t just settings, they are the actual code in the HTML, CSS, and JS editors as well! Perhaps you have some HTML structure or JavaScript scaffolding that you generally start with. Your template can have all that in there, and any new Pens started with your template will come with all that code.
You can edit a template any time. They are just regular ol’ Pens like any other. Change the title of that Pen, you’ll see that new title in the template dropdown.
You can find all your templates on your profile, with a quick action to remove them from your templates if you don’t need them anymore (it won’t delete the Pen itself, just the fact that it’s a template).
New Feature: Search For Pens, Posts, Collections, and Users
Search is not just for Pens anymore. Now it’s your choice what to search for. Know your friends real name, but not their CodePen username? Search should turn them up for you. Need technical info on a tech subject? Searching through Posts is a good bet.
We worked with David DeSandro on the editor interactions
Remember David from Episode 38? David DeSandro is the master of smooth UI interactions through smoother JavaScript. In fact, his business Metafizzy is all about selling quality UI components. We hired David as a contractor to help us make the editor a nicer place. We couldn’t be happier with the result.
- Resizing the editors is very smooth and intuitive
- The resizers are touch friendly. Hello tablets!
- Less UI is required to control the editors. Click the × or drag them closed. Double-click or drag them open, that’s it.
Check out how you can see the Pen title in the header now, that’s nice for context eh?
Everything syncs up nicely in Professor Mode too, so your students see exactly what you see.
The new editor system is also ready for more than three panels (cough cough console cough #hopefullysoon).
App Settings Revamp
We’ve taken a stab at cleaning up and simplifying the app settings. For example, the Account tab has things like your password and email address now (like every other app on Earth). If you manage a Team account, you’ll see the most simplification. There aren’t duplicate tabs for everything anymore; the Team settings are (for the most part) just additions to the existing areas.
New Feature: Quick Access to Your Recent Work
When you’re logged in, it should be easy to jump back to things you were just working on. We’ve heard this asked for many times, so we’re trying to make this easier.
This new section of the (logged in) homepage should help:
Additionally, you can browse your own Public Pens right from the Explore Page, or hop to them in your profile right from the main user dropdown.
New Profiles
Your profile page has been completely redesigned. The bad news is that those of you that applied custom CSS to your profile will have to start again. You should have gotten an email about that. The good news is that profiles are way nicer and offer more functionality than they did before.
For example, you can browse all your content in all the possible ways, many of which were impossible before. For example:
- Popular Collections in Grid View
- Private Pens in List View from Oldest to Newest
- Public Pens in Grid View
- Unpublished Posts from Newest to Oldest
- Double-loved Pens in List View
- etc.
Now Anybody Can Apply Custom CSS
This used to be a PRO-only feature, and we’re opening it up to everyone now. Under the Customize tab in the app settings, you can simply put a link to a Pen. The CSS from that Pen then applies to your profile. So if you want to, you can go nuts changing the design.
Use a Pen as a Profile Header Background
This brand new feature is PRO-only. Under the Customize tab, put a link to any Pen, and we’ll make it the background of your profile header. Makes it real easy to make your profile fannnnncy.
Other Profile Tidbits
- You can still organize your showcase.
- You can add a bio now, for more personal flair.
- The “Hire Me” button (that you opt-in to) makes more sense now (it looks like a button).
The Little Things
There are so many things that have changed.
- Most of the icons have been changed or tweaked. We often start with a good find on The Noun Project.
- The fonts in use are Lato (used more broadly now than we were), and Telefon.
- The way dropdowns open is now far more consistent site-wide (you click/tap to open them, making them more touch friendly).
Bug Reports
This was a massive change that affected every page of the site. We did a lot of testing, but, you know, it’s nigh impossible to be certain everything is perfect visually and functionally in every crevice of the site.
We have had a GitHub repo we opened specifically for tracking redesign bugs. It was an experiment that we all agree went well.
The issue tracker was super useful in helping us squash bugs in the first month after the redesign launched. We’ve since closed it, but we’ll probably open similar repos as needed in the future.
If you catch any bugs, please let us know!
In Closing
There is a lot to explore in the redesign. Some pages saw more drastic changes than others, but literally every page/view of the site was touched. And of course, we’re not done. We move fairly fast around here and we’ll be pushing fixes, polishes, new features, and even newly redesigned areas for quite a while.
There’s still some pages that might have some legacy layouts and interface, and that’s okay (after all, it’s a big product!). There’s still some user testing and UX work to be done, and that’s okay too. We’re going to continue refining CodePen until it’s where we (including you, a CodePen user) feels that it’s in a really great place.
Reminder:
- Bugs Let us know about them here.
- Feedback can be left as a comment here on the blog post, submitted here privately. Or hit us up on Twitter @CodePen.