My Opera Development

Behind the scenes at My Opera

Subscribe to RSS feed

Posts tagged with "new design"

The new My Opera

, , ,

my opera screenshot

Hi! Today we're launching a new version of My Opera. We have a new fresh look, 1GB of free space, localized interface in 7 languages (and more coming soon), a friends activity feed, an API for embedding My Opera photos on other sites, slideshows for the photo albums and much more. smile

This time we also had a bit of beta testing along the way. Special thanks to dantesoft, Tamil, thobi, rose-marie, sgunhouse, remcolanting, coxy, BAMAToNE, WillYum and Ramunas for helping out.

Design

As the lead My Opera designer I wanted to give the new site a strong visual identity with that special Opera feeling. The goal was to make a simple and functional design that highligted the content rather than just beeing decorative. I also wanted to simplify the site and make it easier to access features such as Opera Link. The new design is also made to fit well with the upcoming launch of our new Opera.com site.

For those of you that write your own blog CSS, you might want to read about the HTML changes.

Mobiles

The new My Opera features many optimizations for mobiles and there's even a function where you can view the mobile optimized version by clicking a button at the bottom of each page. We hope that this will inspire those of you who have not yet tried out Opera's excellent mobile browsers! smile

If you are already using a mobile to browse My Opera you might notice that you will, in most cases, get the mobile optimized version by default. If you want the full version you can switch to it by clicking the button in the footer, but we recommend using the optimized version as it's not just mobile friendly CSS but also smaller images and less code to make it faster.

Localization

One of the main features of the new site is localization. I'll let our lead developer Cosimo say a few words about that:

We started working on localizing My Opera around March this year. Initially this was thought to be impossible very hard with the existing architecture, but we tried to build the internationalization engine to be as simple and standard as possible, planning and documenting even the limitations. It's based on gettext and PO files. We even worked ourselves on the translations, and of course the italian is mine. So you can complain to me for that one smile

In the long-term this has been a fairly good choice. In the meantime we also refined our internal tools. One is a command line application that converts the PO files that translators hand us into some ready-to-use code that is loaded at runtime by the application servers.

The integration with our templating engine has been a bit tricky, but now it works whatever templating system we will choose in the future. The most exciting thing about the I18N "layer" has been when I first saw My Opera translated in Japanese and Chinese. Really exciting!

Scalability

We have made a lot of front-end and back-end improvements to speed up the site and increase scalability. Cosimo:

Work on application code and backends has been frantic in the last months. Some of the improvements that we have introduced are:

  • the skins section is much faster now, because all skin thumbnails are served statically using our new static.myopera.com server.
  • we have a full-page cache now, so many of the most used My Opera pages are served statically now, with a fine-grained control of how/when a request can be cached. Basically we took the ~20 most used pages and we cached them completely. Then we update those cached version every now and then... smile

We know there's still a lot to do. We will concentrate on improving the database performance to avoid proxy errors. Specially since some of the new features (activities feed, etc) will stress the database even more!

We have good idea of what is failing and why, thanks to a cool ajax monitoring application we wrote in our "spare" time. If you are interested in our scalability challenges and how we plan to solve them, take a look at a talk I gave at the last Perl Workshop in Italy. It's slightly outdated, but you can get the basic ideas.

Friends feed

Another important goal for the new My Opera was to increase activity and make it easier for you to communicate with your friends and follow their activities on the site. One of the main features for this is the friends feed. The feed is activated when you and your friend have both added each other as friends on My Opera. It does not activate if it's just a one way friendship.

Looking ahead

We hope that you like the new My Opera. It might be a bit shaky the first few days, as we have released a lot of new code, but we are sure it will be great. A lot of work has gone into this release and we see this as a good platform to build on.

Finally, a big thanks to the entire My Opera team and all of you My Opera members that make this a great community! coolhappycheersparty

Sneak preview of upcoming release

, , , ...

A few weeks from now we will release a another My Opera update. smile In this post I will share some previews and tell you a bit about the background for making the changes.

My Opera screenshot

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.

My Opera screenshot

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.. smile

New look

,

This blog have a new look. I changed it just for fun... smile All the CSS editing and such was made live during the last half hour, so if you watched the blog at that time you could see how it was build up and gradually changed. It's based on a design I made for my Kilimanjaro blog some time ago.

My Opera March 2007 Release Changelog

, , ,

Hi. This is the changelog for the recent My Opera update. It's a bit late, but better late than never, right? smile

Site redesign

The new design is made to be more light and fresh than the old one. We wanted to put focus on the content instead of the interface. The old interface had much stronger colors that took away the attention from the content.

When making the new design we decided to base it on pictures instead of text. We also wanted it to be more visual and have a personal feeling, and therefore we added more photos of the users.

Even though the new site design is more driven by pictures we still managed to make it lighter and faster to load. For example, the home page of My Opera is right now only 50% of the size that it was before the launch.

We also wanted the site to be better to use for mobiles and other devices. We optimized the code and made sure to use smaller pictures where possible to decrease the loading times.

The new site is also optimized for Nintendo Wii. You can actually see what it looks like by adding ?wii=true at the end of the url (example). As you can see the width of the site changes for Nintendo Wii to fit the TV screen, the font sizes are larger and there's only a two column layout.

Another big change for the site is that we moved the account section from the personal blog area to the community area. This might take some time to get used to but we hope that it will work out fine. We did it for several good reasons.

One of the reasons is that we are planning to add more features/services to My Opera in the future, and these things might not be directly connected to the personal blogs. Therefore it's better if the account pages are more integrated with the community design than the personal blog design. Another reason is that it's now easier and faster for both you and us to create new blog designs, since we don't need to worry about reinventing the account pages for each design anymore.

The people section

One of the major features of the new site is the people section. Here you can see the latest logged in users and browse your way though their user profiles. There's also a simple user search available.

In the people section you can also find My Opera member interviews. We have gathered a small team of dedicated My Opera members to help us with the interviewing.

Customizable sidebar and new features

We have added some new features to the blog sidebar, and you can easily disable individual components by clicking "my account" and selecting "sidebars and menus".

The new sidebar features are:

  • Friends - Shows 6 random persons from your friends list.
  • Latest blog comments - Shows the 6 latest comments in your blog.
  • Recent visitors - Shows the 6 latest visitors to your page.
    If you do not want to be visible in these lists (as well as the list on the new people page, which shows last logins), you will have to set the 'logged in' setting in your profile to 'hide'.

New top bar

The log in bar at the top of each My Opera page is now a bit different. [view code example]. You can currently choose between black or white color. It can be changed on the "sidebars and menus" page in your account.

We know that the topbar can potentially cause problems for some of you that have 100% customized designs, and we are looking into giving you more options.

Forums

The forums has a new design, just like the rest of the site. We have tried making it a bit more userfriendly. In-topic forum searches have been fixed and we have tried to improve forum searches in general. Results should now be better.

You can now also post inline images directly in forum posts. The images are visible for anyone who wants to see it, and others will see a link. To enable inline images, go to the forums page, click "my settings" and then check the box saying "allow inline images".

Local vs Global

On the old blogs page there was a lot of mixed blog posts in many different languages. For the most of us, who don't read/speak 35 different languages wink, this was a problem. We have therefore introduced something we call local vs global. When you visit the blogs page you will now see posts that are based on your selected language settings. If you want to see all posts you can click the "global" tab.

This feature is still under development and there's some work to do to get it better. But we think we're on the right track.

Signup and accessibility

We have made quite a lot of improvements to the signup pages. They have some nice AJAX features that helps new users signing up. We have also improved the accessibility of the signup page by switching the image based captcha to a text based one.

Fred and Espen adding bugs

Other Changes

The last real My Opera update was in November. Since then we have made tons of changes. We can't list them all here, but below is a list of a few more things we have fixed. The next update should hopefully not take too long. We'll try to have many small updates in the future, instead of a few big ones.

  • A serious bug with regards to tagging has been resolved, which occationally introduced tag duplication.
  • Blog searches are now using proper fulltext searches, something which should make them more efficient and better.
  • Large photo albums are now broken up into pages when editing, hopefully eliminating some of the problems with editing large albums. Feedback appreciated.
  • We are now using scripts from Yahoo! UI Library for the photo sorting page.
  • Timezone offsets no longer broken for Indian users (and others with half-hour offsets).
  • Improvements to the blog post URL name suggester.
  • Added 2 new 'insert image' buttons to the blog post editor
  • Groups can now select 'forums' as default page.
  • Blog feeds now include excerpt properly.
  • 'Logged in' status on users' about pages didn't work properly. This has been fixed.
  • Siginificant optimizations and forward-thinking changes to the underlying database schemas.
  • Introducing memcached driven caching of minor amounts of data. To be expanded greatly.
  • Backend code refactoring and cleanups which should hopefully not result in any visible changes smile.

Finally we want thank everyone for the great feedback! smile

Sneak preview of upcoming My Opera site

, ,

my opera screenshot - homeHi, I've got good news. We are launching a major My Opera upgrade in less than a month. smile We have been working on this for quite some time now and we are exited about it.

There's many new features and improvements in the code, but the most noticeable change is of course the design. I tried a number of different designs before I got it right. The design process even included using water colors for painting and then scanning it. bigsmile

The first screenshot shows the My Opera home page with news, featured users and featured photos. (note: the screenshot is taken from our internal test server and is using test content, so some things such as the news headers and news images do not match)

my opera screenshot - user infoThe second screenshot is from a new section called "people". It has almost the same content as the users about page but with standard community design. The people section will make it easier for you to find and browse user profiles. We have some cool plans for this section in the future, but the first version will be quite simple.

Another big change is that the account pages has the standard community design. This means that when you edit your profile, send messages, etc you will stay in the community design.

We have also added more blog sidebar customization features. You will be able to turn on/off things and there's new features such as "latest blog comments".

There's a lot of other small changes and we'll post more about it later. smile