Nov25
Posted by
fred · Tags: optimization, ui, speed
I've spend the last few days optimizing My Opera for faster loading, using the 14 rules from Steve Souders (Yahoo!) excellent book High Performance Web Sites.
I saw Nate Koechley from Yahoo! present these rules at a Web conference in London a long time ago and I've wanted to implement them since then, but I had not got around to it until earlier this week when Sverre got the book and put it on my desk. 
There's much that can be done to speed up My Opera. We have done a few things already, such as moving all scripts to the bottom of the page, and we aim to do a lot more in the future.
For this My Opera update I've decided to focus on getting fewer HTTP requests and smaller files sizes for the My Opera ui.
If we take a closer look at the images that are used for the My Opera ui today we can see that it's 27 images (depending on what page you look at) with a total file size of 71,3 KB. That's the backgrounds for the main layout, the logo, menu, icons for the top bar, tabs for sub menus, etc (I'm only including the images that are used for the ui, not the ones in the page content).
The challenge with optimizing this is that the ui for the upcoming My Opera release will contain even more icons than before, because of the drop down menus, and we still needed to make it smaller.
So, how do you think it went?
Quite well actually. The result for the new site is 8 images and 21,8 KB!
There is of course a lot more that can be done, and we will continue working on this.
Stay tuned for more posts on this topic.
Nov22
Posted by
fred · Tags: ui, usability, navigation, new design ...
A few weeks from now we will release a another My Opera update. In this post I will share some previews and tell you a bit about the background for making the changes.
The upcoming release contains a lot of small fixes and improvements, as always, but there will also be a bigger change to the site navigation. Simplifying the navigation is something we have been wanting to do for a long time now, because we have seen that a lot of people have problems navigating between their personal page and the community pages.
Remaking the navigation was a big challenge. However, it was quite clear to me from the start that the solution would be to have one unified menu at the top of all pages, but I was not sure how to make it look good on both the community pages and the personal blogs, until recently...
The first screenshot shows how the new navigation looks on the community pages. As you can see the black login bar at the top is gone and the main menu has changed into only three options: "My page", "Explore" and "Opera". Each menu item has a drop down menu with the most common links (yes, it also works without Javascript). Mobile browsers will show tabs instead of drop downs.
The last screenshot shows how the new menu looks on a personal blog. As you can see it's the exact same menu as on the community pages (just a bit smaller, to keep it unintrusive).
Having this unified menu at the top of all pages makes it much easier (and faster) to navigate between the different sections on the site. The logo and menu will also provide a stronger My Opera brand to all pages and make them look more like one community.
Some of you will surely ask: "What will happen to the top menu if I use my own CSS? Have you changed any HTML?".
Yes, we have changed the HTML for the top menu but it will still look fine on your page because we always include the menu CSS. The top menu will be available in a black and a white version, like before.
The new release also contains more exiting stuff. For example, we are moving the "spotlight" and "watch" buttons from the (no longer existing) black top bar into the page itself. This makes the buttons much more visible and hopefully more used..
