Project Oolong: The Sencha Website Redesign
By now you have hopefully had a chance to see our new website design — if you are currently reading this via RSS and haven’t, I encourage you to click through and check it out. The overall design goal of the new site was to update the site’s look to be more contemporary and make the site simpler to use. MetaLab Design helped create a style for us that was bold and rich, but ultimately still simple.
In addition to the sweeping redesign, we also added new features throughout the site:
Because many of our visitors are current Sencha developers, we wanted to make community features more accessible. The new navigation bar at the top of the page now provides access to the forum, API docs, and learn center from anywhere in the site. Similarly, developers can now log in directly to the forum from anywhere on the site through a dropdown menu.
In addition to our blog’s RSS feed, we now also have feeds for our careers, news mentions, and press releases. We think this will help keep users more in touch with what’s new with Sencha in more tailored ways. I would love to hear any other feed suggestions in the comments.
Improved Print Stylesheets
We’ve greatly improved the output of our print stylesheets, so all the site pages are optimized for print. Now, you can print pages like the Touch homepage and show them to a manager or coworkers like a standard data sheet.
More Checkout Options
Lastly, we’ve made a major upgrade to our checkout process and now accept credit cards directly in addition to the previously offered PayPal and Google Checkout. This update was a long time coming and we’re ecstatic to now allow customers to pay with a simpler, more direct checkout process, that also has a new support renewal option.
Beyond these great features, the overhaul in the site’s infrastructure has provided many improvements that may not be noticeable at first glance. The remainder of this post is about all the little details that went into the new site, which might be interesting for website developers, designers, and architects in the audience. If I don’t cover anything you’re curious about, I’ll be happy to answer additional questions in the comments.
Most importantly, we wanted the the refresh to permeate the entire site. This meant updating the forum (which is built in vBulletin and the learn section (built on MediaWiki) in tandem with the rest of the new blog, download pages, and general marketing pages of the site.
We’re also now using Klavika throughout the site, thanks to Typekit. Community members may remember this font from the presentations we gave at last year’s Sencha Conference. After launching our new name and logo last year, we have been slowly and steadily developing a new look for the company, and the new site embodies this.
“The biggest benefit of
the new site is undoubtedly agility.”
For the backend, we chose ExpressionEngine, a PHP/MySQL content management system. ExpressionEngine excels at handling multiple bits of data. Like Ext JS and Ext GWT, ExpressionEngine is dual-licensed, and offers both commercial and GPL versions of its software. The amazing team at NGenWorks helped set us up on the system and provided critical guidance along the way. One benefit of using ExpressionEngine is its fantastic community, and the myriad plugins/modules/extensions provided by them. Here are just a few of the plugins we were able to use in creating the site:
- Low NoSpam
- Low Seg2Cat
- Low Nice Date
- MX Calculator
- MX Jumper
- NSM Minify
- P&T Field Pack
- P&T Matrix
- Tied Entries
We also ended up creating a few custom plugins for things like Salesforce integration and Geshi syntax highlighting for showing code.
Faster for You
Moving from a mostly static site to a content managed one introduces a certain degree of overhead. Instead of simply serving pages and running some basic logic, the site now has to call a database and return results for each page.
Faster for Us
We took great care in modularizing the site’s data as we moved into a content managed environment. One great example of this is the separation of product pages (which have all of the marketing information, product screenshots, download text, etc.) and the product versioning module, which manages our software releases. Now, product leads within the company can upload new versions of software themselves. Moving so that more of the site content can be maintained by people outside the web team should allow us to work faster and make updates to the site more frequently.
Because EE(ExpressionEngine) allows the use of file-based templates, we can now version control these templates, along with our CSS/JS resources, in Git. This means that new features, like the CSS animations we sprinkled into the site last week, are now developed using Git branches. Overall, this has made our development workflow faster and more stable than ever before.
SASS & Compass
As with any project I’ve worked on over the past year, I would be remiss if I didn’t add a special callout for SASS and Compass. I’ve described the benefits of SASS and Compass before, so I’ll just cover the basics of why their use has been beneficial in the case of our website:
- Stylesheets are automatically minified as they are compiled. This allows our full website CSS to be under 15k GZipped, while still giving us the ability to author styles in a clear, verbose manner.
- Image sprites are generated dynamically from individual images, which improves our workflow tremendously (no more measuring offsets and combining images in Photoshop!).
- Different pieces of the stylesheets can be re-used, which made it much easier to help bring our new style into the forum and to various pages that will be included in product releases.
- Brand colors are declared as variables so they can be used consistently throughout the site.
The reception to the new website has been very positive. We had growing pains the first week, and really appreciated everyone’s patience as we got everything running smoothly. And we’re still tracking down some rogue pages which we missed in our initial migration plan. But the biggest benefit of the new site is undoubtedly agility. Since launching last week we have fixed dozens of bugs and made many optimizations and design tweaks.
Our next task is to create a Sencha Touch version of the website optimized for tablets and phones that delivers the core developer resources in a mobile-device friendly fashion.
If you have any other questions about how the site works, just leave them in the comments and I’ll be happy to respond!