Website Review: Churp Churp Redesign

Before I start talking about the new ChurpChurp website, here’s a trick question to the Churpers or even, Nuffies working in ChurpChurp office.

How many times have the ChurpChurp website been redesigned?

5? 10? 1? 3? Well, jump into the time machine thanks to Archive.org and let me show you some of ChurpChurp’s older website designs.

Back then everything was kind of flat. And gloomy? Probably because of the darker hues.

It started to look more pleasant thanks to the lighter hues. Then in that white empty box was where you’d see a Slideshare about ChurpChurp and what it was offering to publishers.

But the redesign didn’t end there.

I’d say this was the most drastic redesign from the previous. The content area was revamped and the focus began moving into campaign sharing. Even the inside of ChurpChurp was streamlined for publishers to access their paid campaigns. In addition, this was the redesign when ChurpChurp’s team implemented the sign in using Facebook.

Then finally, approaching the end of 2011, ChurpChurp’s team introduces a new website design.

The newly designed ChurpChurp to me is a much cleaner and organized website now. No more feeling of my eyeballs jumping from corner to corner scanning the website. Though like any redesign, they’d still have quirks to think about.

Double sign in with Facebook and Twitter buttons

Maybe they’re trying to save bandwidth. But they seriously should create another button for the sign in with Facebook and Twitter. Just having the header say Sign Up isn’t the same as the button reading; Sign up with Facebook.

Responsive web design for the win

Hell yeah! Great effort from ChurpChurp’s team implementing this to the new website. And if you didn’t know, responsive web design is basically optimizing a website’s layout to the screen resolution. Here’s an example of it on ChurpChurp.

The screenshot on the left is my browser resolution at 1024 x 768 and the right is what you would see when viewed on your iPhone in portrait – works in landscape too.

The first screenshot of the new website above is for resolutions larger than 1024 x 768. My browser resolution was at 1680 x 1050 for that view.

For a deeper yet clear explanation about responsive web design, have a read through this article by Smashing Magazine.

Share it like it’s Facebook

One of the interesting additions to this new rendition is the story exploration. Think of WordPress.com and Facebook combined. In WordPress.com it encourages other publishers to read featured blogs.

Like Facebook, when you post a link, it’ll also try to retrieve the first image of the post. Thinking about it, I’m wondering if this is powered by Facebook. Or, did the ChurpChurp technical team manage to come up with a similar script. Hmm…

Hashtag it like a #churp

Honestly, this was a feature I never knew existed and I wonder if it works and how will it work.

Apparently, all I have to do is tweet with a link and hashtag it as #churp for it to be posted under ChurpChurp’s stories. Please do let me know if you successfully did it. I’m also going to experiment with this.

Now I’m not sure if it’s because this feature is new, but I believe most of the posts in Stories are right now by the Nuffies. And I’m wondering, how does this compliment their other blog aggregator; Innit?

So, what’s next?

Well, ChurpChurp definitely needs to look through their responsive web design again because it’s not there yet to me. Other than that, maybe Timothy and Ming should look at integrating all the services closer – Nuffnang, ChurpChurp and Jipaban. As right now, each of it stands on its own. But hey, that’s just me living in my spaced out world.

Rich Interactive Drop Down Navigation Menus

Before there was CSS, I remember using Macromedia Dreamweaver to create dropdown menus and hover behaviors. Dreamweaver would include the necessary Javascript commands and the menus would just work.

Then, with CSS and tools like Suckerfish dropdowns, code became cleaner and menu creation became easier. However, it was only ordinary dropdown menus until the trend of rich interactive submenus started.

Oracle

These content rich dropdown navigation structures gave submenu a new purpose, a new life. The submenu pictured here became more than just a list. It opened up the opportunity for website owners to highlight an important item within the menu itself.

Cisco

Other than images, some dropdown navigations even built in tabs . Most likely used in this scenario to better categorize websites with humongous and deep information structures.

But it didn’t stop there. Developers are now pushing the limit of the dropdown navigation by incorporating login actions into them. As I was saying, rich content is now housed within the dropdown relative to its content. The example above displays such a connection for its partners.

Dunkin Donuts

Dunkin Donuts only recently launched its new website and they too have incorporate this rich content dropdown navigation. As you can see, they’ve placed their store locator directly inside the dropdown menu.

Plus, they didn’t stop at only having the login inside the dropdown navigation. You can even create a new account within the submenu panel now. Phew!

Is this too much of a good thing?

I can understand incorporating logins and forms into the dropdown can free real estate space in the website. However, I feel squeezing too much rich content in a dropdown panel makes it too cluttered. Especially when the designer or developer isn’t careful with the breathing space.

To be honest, Dunkin Donut’s incorporation of the account creation and login form is the limit for me. The near-unavailable gutter space between the 2 forms make it look like a single item.

Share a website you know with this type of dropdown navigation.

New Project Petaling Street Website Review

Project Petaling Street, or commonly known as PPS to the bloggers of more than 5 years, is a blog aggregator website. Though the new PPS coins itself as a blog-ping aggregator – I’m not sure what’s the difference. Anyway, quick history is PPS was sold to a blogger and it laid dormant for 1-2 years since. The name PPS had became a myth and memory to bloggers like me, until recently.

Back in 2003 and 2008

According to the Archive, between 2003 and 2008, there wasn’t much difference in PPS. Except for the way it was developed.

In 2003, many websites were still using tables. Hence, you can see the layout maintained. But as we progressed into 2005-2008, PPS was developed on the MovableType platform and adapted the website standards; xHTML/CSS.

Proposed PPS Redesign

Sometime in that period, I took it on myself to propose a redesign for PPS. Designing for priorities and ensuring the user experience for visitors was my goal in the redesign. And with the help from Chee Aun, the redesign came to reality.

Though I laugh at myself right now for coming up with such a proposal. LOL!

PPS Now is Too Late

If you compared PPS now and then, yes, it’s a huge improvement. However, it’s nothing to scream about in my humble opinion. Simply because we shouldn’t be looking to improve, but to advance PPS forward right now. The reincarnation of an existing service which can’t compete with others now is personally, a wasted effort.

Nonetheless, I appreciate and give praise to the revival with it’s clean and orderly layout. Now there’s a structure behind PPS and new features like the voting, discussion, display and categories have given it a little more value.

But the current design can be much bettered. Especially concerning the most important duty of PPS, submitting a ping.

When you’re registered, there are some things inside you won’t understand right away. Like the Settings for instance. Even now, I don’t really know what it is but I think it’s suppose to be the topics I blog about. Maybe.

More Screenshots:

A good addition to the new PPS I’d vouch for is the bookmarklet. A tool which you can add to your bookmarks bar and click to add an article to PPS instantly.

I suppose this method is to replace the ability to ping PPS automatically. Meaning if you wanted traffic from PPS, you’re going to have to work for it, somewhat.

What PPS will have to do to succeed?

Well, first thing they’ll have to do is get the regulars back on it. Damn right. Bloggers like Minishorts, Suanie, KY, ShaolinTiger, SixthSeal, Saimatkong, Dzof and the list goes on. These were some of the bloggers I know I met thanks to PPS.

Personal feelings aside if any, PPS needs to look seriously into its approach of advancement and not only monetization. The competitors I’d put forth are like Digg and if you asked for a local example, Nuffnang’s Innit.

Project Petaling Street needs to set a new direction and get back in the game if it seriously wants to make a comeback.

How to Make Blog Readers Cross-eyed?

I know there are now so many ways for you to generate your fancy fonts into your website. But end of the day, isn’t it about readability than aesthetics?

Stare at this chunk of text for a good 5 minutes.

Caution: If your vision starts blurring, please close your eyes. I indemnify myself for any damage done to your eyes if you do become cross-eyed.

I was looking at it trying to read for a few minutes. Next thing I know, my vision started to lose focus.

So all I can say from this example is, please don’t use a drop shadow for all your text because you can. Because as a reader, I also can not come back to your website – ever.

Use awesome-ness sparingly and it’ll remain awesome.

Apple Redesigns Movie Trailer Landing Pages

It’s been awhile since I visited the movie trailers on the Apple website. And I was met with awe, noticing how each movie now may have a customized landing page based on the similar template.

The new original

With some fine-tuning. Apple has removed their own logo and menu bar in movie landing pages from the top. Their now putting more emphasis into iTunes by branding the pages; iTunes Movie Trailers.

In the main navigation, you’ll  also find Trailers in iTunes and Download iTunes. Looks like it’s all coming back to iTunes.

Dynamic slideshow backgrounds

I love this. Large images leave a huge impact. And because it’s a movie website, it delivers the experience with this approach.

Semi-transparent playlist panel

Instead of the boring boxed up grey panel, now movie trailers can have a customized color scheme for these panels containing trailers. The panel is collapsible. Though I found some panels actually disrupting the background images a bit.

Customized background

If you notice here, this movie trailer landing page doesn’t have a slideshow but a single large background image. It stands nearly as tall as the page itself. But as I said, large images leaves a huge impact.

Customized color theme

Instead of a white or soft grey background, some movie trailer landing pages are in black. This may be Apple working up some packages with movie distributors on how their landing pages can be customized.

In addition of the above, they’ve added social media tools into the movie trailer landing pages too. You can now share movie trailers by using email to a friend, facebook and twitter below the movie synopsis.

Other mentionable additions are:

• Movie image gallery
• Related apps for download (again, tied to iTunes)
• Related movies by actor/actress

Seriously, leave it to Apple to come up with a simplistic yet very effective redesign of their movie trailer landing pages. The only thing bugging me is the delayed launch of Quicktime after I click on a trailer.

But I guess, it could be a Windows thing.