Sencha Inc. | HTML5 Apps

Blog

Project Oolong: The Sencha Website Redesign

February 24, 2011 | David Kaneda

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:

Login form

Improved Navigation

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.

More Feeds

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.

Print samples

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.

Design

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 Development

The biggest benefit of
the new site is undoubtedly agility.”

The frontend of the website is crafted in HTML5, CSS3, and JavaScript. Ext Core is our JavaScript framework (naturally). In addition to using the HTML5 Doctype and element tags, we also embed video throughout the site with Vimeo, which allows us to easily use the HTML5 Video tag for devices that support it, and Flash for older browsers that don’t.

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
  • Playa
  • Splitter
  • Structure
  • 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.

Because of this, we took a hard look at speed and we’ve implemented several best practices to deliver the fastest experience possible. The site’s pages are cached in a combination of backend template/SQL caching and the browser cache. And, all CSS and JavaScript is both minified and GZipped, meaning it downloads as quickly as possible. There are a few other automatic optimizations made to our CSS, which I describe below when looking at SASS and Compass.

Faster for Us

Content Control
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.

Version Control
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.

What’s Next?

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!

There are 25 responses. Add yours.

Keri Henare

4 years ago

I love that I can access the API documentation from any page. Great work, love the new site.

Shea Frederick

4 years ago

Is it just me, or does this new design bear an uncanny resemblance to Github.com?

Jay Garcia

4 years ago

Yeah, it is kinda close. smile

David Kaneda

4 years ago

I can definitely see the similarity, but it definitely wasn’t intentional. (Though I could see it being my subconscious, from spending so much time on GitHub). Either way, we’re definitely not the first to invent the “page sitting on top of the header” look smile

Javier Rincon

4 years ago

I simple like it, I think the new design also helps for touch screen devices such as Ipad’s etc. I haven’t tried myself on one, but with the big buttons and big menus for access it should be 100 times better than the old one (on these devices)

Michael Geier

4 years ago

Comments for feeds - create feeds for different technologies.  Separate ExtJS, ExtGxt and Sencha Touch for users that don’t program in all three environments.

Frank

4 years ago

I wonder how using Ext Core can achieve these menu, such formfield
Not Ext Core are in, please can you explain about it or are you using extjs and then do a deploy removing packages like grid, tree, data package?

David Kaneda Sencha Employee

4 years ago

@Michael Great idea. Will throw in on the list.

@Frank It’s some very simple Ext Core code: http://www.sencha.com/js/scripts.js

Mitchell Simoens

4 years ago

Github.com is too… white. It is similar but Sencha’s kicks butt!

Shao-Ning Zeng

4 years ago

Really, i don’t this the blod updates removed from the home page ...

oppertunity

4 years ago

i can’t see the sencha logo at the home page

this is the screenshot
http://postto.me/is/image1.png

(i’ve tried to refresh but the logo still disappear)

Cobalt

4 years ago

The new site is great, as is sharing the process behind the redesign. Thanks !
The print CSS doesn’t work in Firefox though, it strangely fails after the first two pages.

Thomas

4 years ago

Hi i like the navigation header a lot, its always available smile

Im using Ubuntu 10.04
Firefox version is 3.6.3
Chrome versions is 9.0.597.10 dev

I have not came across Logout option in Forum Pages,  but its already available in Home Page.

Login Hover window from Header navigation was only working for me in Home Page, in rest its not showing up.This problem only came across in Firefox,
  In chrome it works fine

In Firefox the logo image shown is correct for me and path of image is like
background: url(”/img/icon.png?1298587563”) no-repeat scroll 0 0 transparent;
Where as in Chrome logo image is incorrect
background: url(’/img/icon.png?1297414734’) 0 -781px no-repeat;

Also group page layouts are broken a bit
http://www.sencha.com/forum/group.php
http://www.sencha.com/forum/group.php?groupid=68

Dmitriy Pashkevich

4 years ago

Ouch, careful with the names! Sencha is Japanese and oolong is Chinese! *nerd* But the new design is great indeed! And a separate thanks to the quick link to api docs!

P.S. Guys, what’s wrong with RSS? The feed is constantly edited so the posts I’ve already read become unread in my reader. Also I’ve noticed that some posts disappear and some are duplicate in the feed (like this one!). Please pay more attention to it.

Dennison Uy

4 years ago

I love the new design. It’s clean and very well organized. EE is an excellent choice for content management.

Keep it up!

scarsick

4 years ago

I’ve always asked myself why you were not using ExtJS for your own website… could be the exact same result but lightning fast without any page-flow and it would be a great example of Ext’s power as well as a kick-ass user experience wink

Sebastien Tardif

4 years ago

The web site always have dead links. Using a tools detecting, then fixing dead link would be a good start to get the web site look maintained.

Some dead links here: http://docs.sencha.com/core/manual/

David Kaneda Sencha Employee

4 years ago

Thanks for the comments!

@oppertunity That’s actually a cache problem, introduced by the automatic spriting. Will have to find a way to force a cache clear after we regenerate sprites.

@Cobalt Interesting, I’ll definitely test that.

@Thomas We’ll look into the logout issue, and the bg image is just the cache thing that oppertunity ran into-

@Dmitry Ha, very observant smile However, Oolong is a “blue/green” tea, so we thought it a fitting name because of the new header. We were having issues with the RSS last week, but I thought we posted a fix. Could you email me a screenshot? .(JavaScript must be enabled to view this email address)

David Kaneda Sencha Employee

4 years ago

Quick update: We just nailed two issues with the forum—the logout links always now work throughout the site, and fixed a small JS issue. Thanks again for the pointers!

warfares

4 years ago

@Keri Henare “I love that I can access the API documentation from any page. Great work, love the new site.”

+1

Sebastien Tardif

4 years ago

More bugs:

JavaScript error using IE 8 on this page: http://www.sencha.com/blog/

Webpage error details

User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; InfoPath.2; .NET4.0C; OfficeLiveConnector.1.5; OfficeLivePatch.1.3; .NET4.0E)
Timestamp: Sat, 26 Feb 2011 13:48:10 UTC


Message: Object doesn’t support this property or method
Line: 8
Char: 1088
Code: 0
URI: http://ajax.googleapis.com/ajax/libs/ext-core/3/ext-core.js


And Chrome is reporting: reputation_pos.png Failed to load resource: the server responded with a status of 404 (Not Found)

Ian Ebden

4 years ago

Nice work guys. Particularly interested in SASS and Compass, which I haven’t really got into yet. Will check your other article. Thnx.

Daniel R.

4 years ago

Hey guys, congratulations! The new site is great! The quick access to products and API docs is just awesome. However I’m missing the lastest blogs posts on the main page, as a person that reads your blog very often, it was cool to have the lastest entries right on the main page (that´s a kind of pattern for corporate portal too).

Anyway, I’m excited about the upcoming ExtJS4! Keep up the nice work!

Frank

4 years ago

I wonder why page like it, contact us, have required field and the validation is done in the back end and not in javascript?

regards
Frank

Brysen

3 years ago

Now we know who the snseilbe one is here. Great post!

Comments are Gravatar enabled. Your email address will not be shown.

Commenting is not available in this channel entry.