30 Comments

Summary:

Our site — and the content on it — now adapts to whatever device you’re reading. The first phase of our site redesign, which went live today, also includes more curation, easier sharing and a crisper display.

GigaOM phone

You’ve no doubt had the experience of reading a site on your mobile phone and wondering why half the headline is chopped off, or the font size is so small you can’t read it. It just seems like the content doesn’t fit the site.

Today, we launched phase one of our new responsive site design, and the changes we’re introducing to GigaOM and paidContent will ensure that doesn’t happen to you here. At a time when readers are using so many different devices, one big challenge for digital publishers is retaining the quality and consistency of the reading experience not only across devices but also across different operating systems and browsers.

Now, whether you’re on a desktop or a laptop, a tablet or a smartphone, our sites will automatically adjust, rendering the content in the way that best fits that particular environment. We know, for example, that it’s harder to hit a target on the page with your finger than with a mouse, and so if you’re reading us on a tablet, we’ve enlarged the target to make it easier to strike. Similarly, rather than try to cram our entire site onto a 4-inch smartphone display, we’ve removed some content from the mobile view so as to focus the presentation of the most essential information. In all cases, the site simply readjusts to fit the real estate on the screen that you’re on at the time.

Below, you can see how the presentation of an actual story changes as the screen shrinks.

GigaOM laptopGigaOM tabletGigaOM phone

Those aren’t the only improvements that we’ve made. Among the other things you’ll notice about GigaOM and paidContent:

  • More curation: If you’re time-stretched, our new “Must Reads” section tells you what you absolutely shouldn’t miss.
  • Easier sharing: We’ve made it easier to share not only whole stories and also pieces of content within stories.
  • Better performance: Because the pages are lighter weight, they will load faster.
  • Crisper display: We’ve added blur-resistant icons and new text-size controls, so there’s no more squinting to read text or straining to hit a small target when navigating the site.
  • A cleaner look: We’ve ditched a lot of widgets that had simply built up over the years but no longer serve their original purpose.

For phase one of the redesign, we’ve intentionally simplified the look and feel of the site — it’s more akin to updating the plumbing in a house than redoing the facade. But without reliable plumbing, a house isn’t very habitable. These upgrades pave the way for subsequent phases of this redesign over the next few months that will include more changes in how we present our content.

Finally, I wanted to thank the fantastic team that has been slaving away on the redesign for last several months: our head of product management Raza Zaidi; engineers Casey Bisson, Matt Batchelder, Zach Tirrell and Jamie Poitra; designers Stephen Engert, Arlo Jamrog and Jonathan Koshi; and our product guys Adam Kazwell and Ian Kennedy. They’ve worked long hours — and tested countless iterations in QA — and we think the results are great.

We’d love to know what you think. If you have suggestions or comments (positive or negative), please leave them in the comment thread in this post.

Thanks again for being loyal readers.

Images courtesy of PlaceIt by Breezi.

  1. I read you on Pulse and I dont know if it is due to this change but there are some real strange characters and twice the same picture (which is not the case in a bowser)
    Beside that, thanks for sharing how you do it! Interesting.

    Share
    1. Thanks for the heads up Roland – indeed seeing some funky characters. We’ll work with Pulse to resolve that issue.

      Share
      1. Seeing some issues in Firefox too where instead of the icons, the unicode character is being displayed with the default browser font since the .goicon:before where the font-family is specified isn’t being picked up. Adding that to the styles manually makes it work.

        Share
  2. Thank you gigaOM the new site is amazing!

    Share
  3. Yes! It even works on my iPad, I can die now.

    Share
  4. Nice work.

    May I put in a request for some comment rating system, and display in order of those most favorably rated?

    Garbage comments are now the weak point here.

    Share
    1. Paul

      Thanks for the comment and the suggestion – duly noted.

      Share
    2. There are definitely some garbage comments (just as there are on any site). Some people repeat the same old negative crap over and over, never realizing that their complaining describes themselves and not whatever they’re whining about.

      Share
  5. The site looks great. I think the term to describe the site adapting to diifferent screen resolutions is called Responsive Design.

    Share
  6. Nice work.

    Pretty cool how the site content changes the content to be displayed when I take my RIM Playbook tablet and then flip it from landscape to portrait and it turns the site more into a list type mode.

    Share
  7. It would be interesting to hear about how you guys did it so others can learn.

    Share
    1. Step 1: prepare yourself to go blind from testing out all the various screen variations :) But seriously, we do plan to share a write up from an engineering perspective soon. Anything in particular that you’re curious to know more about?

      Share
  8. The top navigation is completely messed up in Firefox on Android – neither the logo nor the buttons are visible.

    Share
    1. Hi Nakul,

      The Firefox issue has been fixed. Thanks for reporting it.

      Share
  9. Does the new site recognize Retina Display devices and adapt accordingly (i.e., with higher quality graphics)?

    Share
    1. Any of the icons and overall user interface components adapt to whatever resolution you are at.

      Share
  10. In Firefox, the unicode character is displayed instead of the icons. Also a correction in the “Summary” at the top – should read ‘phase’ instead of ‘phrase’.

    Share
    1. Fixed! Thanks.

      Share
  11. Love GigaOM, but find this design pedestrian and boring. Responsive is great, but “clean and crisp” doesn’t have to mean bland and boring. Nothing distinctive here, design-wise. Two things pop out – hate the light blue headline font color. And I’m seeing giant sized fonts on the headline list as I scroll down. Looks magnified and waste of space. Sorry I can’t be more positive.

    Share
  12. 1) Light blue for the headline typically signifies a clicked link. But here it is otherwise. Light blue doesn’t contrast well with the background. Dark blue suits well.
    2) The font for the headline is too big. Still not much impact due to #1 above.
    3) Would be nice to have previews for all the articles. I can understand that you are trying to put as much headlines vertically as possible. But scrolling is easy and not much of an effort these days. Anyway, the best headlines are available at top. Would be a good trade-off.
    3) Though this is not a change from earlier, it would be nice for the text to fill the screen when we have scrolled past the advertisement sidebar.

    Share
    1. Thanks for the feedback Jassa and Praveen. We’re continuing to think about how to best display stories on the mobile homepage. The recent changes are just the first steps, look for more improvements in the future.

      Share
  13. Cool. :)

    Share
  14. Congrats GigaOm crew. We were very pleased with the reaction to our responsive design rollout at ReadWrite last year. A couple nitpickers here and there, but generally it was good natured critique and our engineers took care of most of the problems right away.

    Share
  15. awesome on my sgn2!

    Share
  16. Now that you told us the “what” now tell us the “how”. Curious to know the technologies used.

    Share
    1. A more detailed technical post with more details on the “how” coming up. Stay tuned to http://kitchen.gigaom.com/ where we’ll post this stuff.

      Share
  17. Hate it that everybody ruins their site on desktop, having to scroll like a maniac because the screen is 3 times wider than the article and the font is a bit too big is annoying, why not allow some flexibility here is beyond me. There really isn’t significant traffic from screens bigger than 15 inch?
    Besides that,the font for the comments is way too big, the black and blue colors don’t really work together and the drop down menu for a few functions only make navigation harder (who does that? … besides Google.)

    Share
  18. Why are the font sizes on desktop/laptop form factor so huge? Even the smallest size is 17px. I think that for reading on a normal desktop or laptop form factor for sans-serif type, about 14px is fair enough.

    Share
  19. Great looking pages that read crisply well. The home page is welcoming, clear and masterful fusing of design (graphic and architecture) with editorial. Graphically, the use of bullets and bold lead-ins is a bit much—one or the other, please (but that’s minor fix on the style sheet). Every reason to be proud of such an outstanding group effort.

    Some bugs: still seeing unicode characters on Firefox instead of share icons (twitter, fb, etc) and in place of icons for “reply” and “share” in the comments section. However, thumbnail pics show up in Firefox, but the don’t in Safari. And I will probably grow a second mustache before gigaom.com loads in Chrome.

    Share

Comments have been disabled for this post