Blog Post

One design, any screen: Introducing GigaOM’s new look and feel

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.

30 Responses to “One design, any screen: Introducing GigaOM’s new look and feel”

  1. 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 loads in Chrome.

  2. Harish Babu

    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.

  3. realjjj

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

  4. Dan_Rowinski

    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.

  5. Praveen

    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.

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

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

    • 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?

  7. hundoman

    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.

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

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