My Opera Development

Behind the scenes at My Opera

Subscribe to RSS feed

Posts tagged with "css"

The My Opera Grid System

By Jacob Raskjacobr. Wednesday, November 17, 2010 9:56:51 AM

, ,

One web

The new My Opera was just rolled out, and with it a shiny new grid system and new mobile styles.

While some other sites build separate mobile sites (where users are often directed through browser sniffing) at My Opera, we don't believe the future lie in that strategy. Just like WAP, separate mobile sites follow the idea of a separate web for mobiles, instead of providing users with the full web.

Every day new devices are launched to the market, with different capabilities and usage scenarios. Opera is already widely used on TV's with Nintendo Wii (more is coming), and tablets with various screen sizes keep gaining usage. It is impossible to build a version of your site for each and every device. Instead we adapt the My Opera layout to the size and capabilities of a device, while serving the same content.

The Grid

Just like the well known 960 Grid System, the My Opera grid system comprise 12 smaller column units, but most of the similarities end there.

We make three main adaptations to the layout: standard, medium and narrow. At the medium size, the grid system is shrunk to 8 col. units, and at narrow to 4 col. units. These units are then grouped together into bigger content blocks.

If your viewport is wider than 960 pixels, you will get the standard layout which features either a main content area (8 col. units) with a sidebar (4 col. units) or the full page split into 2, 3 or 6 blocks. When your viewport is between 960 and 660 pixels wide, depending on the content type any of the following will happen:

  • The main content block will span the entire 8 col. units and the sidebar end up beneath it
  • The main content block will be shrunk to 4 col. units and the sidebar stay at the side
On most mobile phones you will get the narrow version, which kicks in when your viewport is less than 320 pixels wide. All content blocks will be shrunk to 4 col. units and be stacked over each other.

Currently the only part of My Opera built from scratch using the new grid system is the community photos page, which lists photos at a width of 2 col. units, while the system was back-ported to the old CSS and markup for the rest of the site. We will continue to convert more pages to a new templating system and framework, and at the same time do even further improvements for all viewport sizes!

23 comments

HTML changes

By Fredrik Anderssonfred. Monday, November 17, 2008 10:23:33 AM

, , ,

We're about to release a new version of My Opera. The release contains some HTML changes. This might affect you if you have written your own custom CSS, but the changes are moderate and it should be fairly easy to adjust the CSS.

The first thing we did was to switch from XHTML to HTML. Yes, we believe that HTML is the way to go and we finally got rid of that xml prologue that caused "some old browsers" to go into quirks mode. You will also notice that it's now somewhat easier to read the code when you view the source.

You do not need to edit any XHTML content that you might have included in your old posts - it will automatically be transformed to HTML when the page is rendered.

For most blog themes we have also moved the #myo menu div inside the #wrap3 div. This means that the My Opera top menu will be as wide as your page, instead of stretching over the entire browser window. (there are a few blog themes that still have the #myo div outside the wrapping div's)

Blog sidebar

For the new My Opera we wanted to standardize the image sizes. We used to have 29 different sizes for each user photo! This was way too much and we now have only 4. This made us update the HTML/CSS to fit better with the new images.

The standard width for the sidebar is now 240 px.

The image sizes for the friends list in the sidebar used to be 102x77. It's now 104x78.

The images sizes for the latest comments used to be 45x43. It's now 40x30.

The images sizes for the recent visitors used to be 64x48. It's now 68x51.

Friends

The image sizes for the friends page used to be 169x127. It's now 104x78. The location field was also removed to simplify the page.

Photo albums

Changes have been made to the photo albums code. In essence we have made it into a list rather than just div's.

Photo albums overview. OLD code:

  1. <div class="albums">
  2. <div class="album1">
  3. <div class="albumthumb1">
  4. <a href="#">
  5. <img src="#" width="160" height="120" alt="" class="albumimage" />
  6. </a>
  7. </div>
  8. <div class="albumnfo">
  9. <h3><a href="#">Title</a></h3>
  10. <p class="imagecount"><b>Images:</b> xx</p>
  11. <div class="albdesc">Description</div>
  12. </div>
  13. <div class="clear"> </div>
  14. </div>
  15. <div class="album2">
  16. <div class="albumthumb2">
  17. <a href="#">
  18. <img src="#" width="160" height="120" alt="" class="albumimage" />
  19. </a>
  20. </div>
  21. <div class="albumnfo">
  22. <h3><a href="#">Title</a></h3>
  23. <p class="imagecount"><b>Images:</b> xx</p>
  24. <div class="albdesc">Description</div>
  25. </div>
  26. <div class="clear"> </div>
  27. </div>
  28. </div>

Photo albums overview. NEW code:

  1. <ul class="nobullets" id="albums">
  2. <li class="album1">
  3. <a href="#" class="albumimage">
  4. <img src="#" width="280" height="210" alt="">
  5. </a>
  6. <h3><a href="#">Description</a></h3>
  7. <p class="imagecount"><b>Images:</b> xx</p>
  8. <div class="albdesc">Description</div>
  9. </li>
  10. <li class="album2">
  11. <a href="#" class="albumimage">
  12. <img src="#" width="280" height="210" alt="">
  13. </a>
  14. <h3><a href="#">Description</a></h3>
  15. <p class="imagecount"><b>Images:</b> xx</p>
  16. <div class="albdesc">Description</div>
  17. </li>
  18. </ul>

Photo album view. OLD code:

  1. <div id="mypix">
  2. <div class="thumb1">
  3. <div>
  4. <a href="#"><img src="#" alt="" width="320" height="240" /></a>
  5. </div>
  6. <p class="photoinfo right photocomments">
  7. <a href="#">x comments</a>
  8. </p>
  9. <p class="photoinfo photoviews">
  10. xx views
  11. </p>
  12. </div>
  13. </div>
  14. <div class="thumb2">
  15. <div>
  16. <a href="#"><img src="#" alt="" width="320" height="240" /></a>
  17. </div>
  18. <p class="photoinfo right photocomments">
  19. <a href="#">x comments</a>
  20. </p>
  21. <p class="photoinfo photoviews">
  22. xx views
  23. </p>
  24. </div>
  25. </div>
  26. </div>

Photo album view. NEW code:

  1. <ul class="nobullets" id="mypix">
  2. <li class="pic1">
  3. <a href="#" class="thumb"><img src="#" alt="" width="320" height="240"></a>
  4. <p class="photoinfo right photocomments">
  5. <a href="#">x comments</a>
  6. </p>
  7. <p class="photoinfo photoviews">
  8. xx views
  9. </p>
  10. </li>
  11. <li class="pic2">
  12. <a href="#" class="thumb"><img src="#" alt="" width="320" height="240"></a>
  13. <p class="photoinfo right photocomments">
  14. <a href="#">x comments</a>
  15. </p>
  16. <p class="photoinfo photoviews">
  17. xx views
  18. </p>
  19. </li>
  20. </ul>

23 comments