CodePen, one of the most influential code-sharing communities on the Internet, has just unveiled its new redesign, the first major one of its three-year existence. This redesign has been a long project for the site, as it’s been underway for the last half year. Web design firm Sparkbox has been a collaborator on this project as well.
As expected, the new iteration of CodePen is a site that features marked changes, but, even so, this is only the tip of the iceberg. What you’re seeing now is actually just the start of a reiterative process that’s rooted in evolutionary site redesign. CodePen plans to continually improve the site’s appearance and how it functions. To help in this endeavor, the CodePen team is going to design “in the open,” inviting and listening to user feedback each step of the way and then reporting on what they learned through their blog and a slew of podcasts.
CodePen has also announced its new redesign on its blog. Perusing the community’s announcement, one sees a plethora of new features, everything from exploring new areas to better app settings.
Here’s a quick rundown of them.
New areas to explore
After taking feedback from site visitors, CodePen realized that lots of them just come to the site to browse. As a result, CodePen accommodated visitors who wanted to search for examples of design, animations, code, etc. One big change is that visitors can now look at 12 pens at a time instead of only six. It’s also possible to browse more curated collections from folks you follow, as well as CodePen’s team.
New templates
Huge news: Any pen can now be a template. Simply start a new pen by using any other pen as your starting point. It’s got to be a pen, not a fork.
Search gets an upgrade
The site redesign’s improved search means that you can now search for posts, people and collections in a broader way than ever before. This is a big improvement from the past, when you could just search for pens!
Better editor interactions
Users can now resize the editor more smoothly and intuitively than ever, with a special nod to mobile users (it’s touch-friendly). You don’t need as much UI to manipulate the editors; now, simply drag or click on them to control them.
Better app settings
App settings are now simpler. Duplicate tabs have been removed if you manage a team account, and you can use passwords and email addresses in the Accounts tab, too.
Improved access to your stuff
The redesign means that, when you’re logged in, you can move back and forth from the stuff you’re currently working on the most recent thing you were just working on. Again, this is a new feature due to feedback from site visitors.
Profile improvements
Gone are the days when only pro users could apply custom CSS to their profiles. Now, anyone can. However, pro users are allowed to now use a pen as their profile header backgrounds.
A big, bold, new CodePen
It’ll be interesting to see what other goodies and new features CodePen may add in the near future. As this is an iterative design process, you can expect updates from the CodePen team from time to time. Of course, as with any big redesign like this, users are encouraged to report any bugs they find here.
