BT

InfoQ Homepage News InfoQ's New Desktop Design Launched

InfoQ's New Desktop Design Launched

Bookmarks

If you are growing InfoQ on a tablet or desktop device today it looks rather different.  This is the third major overhaul of our design since we got started in 2006.  The launch follows a successful public beta test that we've been running for the last couple of weeks. The above video provides a quick overview of the new design and re-architected back-end features. 

The new design is component-based and represents a common design language for InfoQ and QCon, so over the coming months you’ll see more convergence of the look and feel between InfoQ and the various QCon sites, as well as in areas like the newsletters we produce. The intention is that by using consistent design patterns we help build familiarity and understanding.

As part of this work we've simplified our typography, colours and iconography using Robot and Firs Sans as our two main fonts. We've worked hard to keep the new production distributable as small as possible - the common CSS is around 290KB, common JavaScript around 35KB, and the typical pages are 45-55KB each. Overall the new site is around 25% faster to load than previously.

The new design is intended to be fully inclusive and conforms to Web Content Accessibility Guidelines (WCAG). For prototyping the design team used  Sketch and InVision as the main design stack.  From a technology stack point of view, we’re using Vue.js with Nuxt.js and Pug.js for templating/scripting with Stylus & PostCSS for CSS processing, and Webpack for packaging. The new CSS follows SMACCS and BEM - a scalable and modular architecture for CSS with Block Element Modifiers. Behind the scenes, we are also overhauling InfoQ's back end moving from an ageing JCR-based system to a new custom-built, microservice-like content repository running on AWS.

This update is just the beginning. The new design is fully responsive, and will be coming to mobile devices soon. We will also be continuing to work on improvements to content discovery, and making significant improvements to our video player, in the coming months.

 

Rate this Article

Adoption
Style

Hello stranger!

You need to Register an InfoQ account or or login to post comments. But there's so much more behind being registered.

Get the most out of the InfoQ experience.

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Community comments

  • It's really great to show your change!

    by Cong Nguyen /

    Your message is awaiting moderation. Thank you for participating in the discussion.

    It's really great to see that the UI of InfoQ will be improved.
    I guess people visit InfoQ due to your content more than your UI :D.

    Here is my personal point of view if I have a website like InfoQ: move slowly from a technology stack to another when there is actual changed thing. World is changing so fast but core value won't be varnished. With a website like InfoQ, I expect the changed thing will be feature but not technology stack. Of course maintaining a team of people with outdate stack is not good idea but when I move slowly from a technology stack to another then such thing won't occur. Saying is easier than doing so just ignore this :)

    Thank you anyway for your free and helpful content :). New UI looks fresh :)

  • Huge improvement

    by William Smith /

    Your message is awaiting moderation. Thank you for participating in the discussion.

    Great job on the new design. This really feels like a big step forward from the old site, and it's great to see you investing in InfoQ as a product again - the content has been great for a while but the old design was pretty terrible.

    Enjoyed the video as well!

    Kudos!

  • InfoQ redesign

    by Greg Shriver /

    Your message is awaiting moderation. Thank you for participating in the discussion.

    You asked what I liked about the redesign when I first viewed the page. I typically start my morning with InfoQ (Love the content), and I am typically in a browser full sized on a monitor. So, from that perspective, not much of a difference. However, if you resize your browser window, you can immediately appreciate the benefits of the responsive design. In general, I dislike viewing webpages on my phone. However, InfoQ may actually be pleasant on a smaller browser because of your updated responsive design. Death to horizontal scroll bars!

  • Some rough edges

    by James Raden /

    Your message is awaiting moderation. Thank you for participating in the discussion.

    I hate to be the one person who's not too keen on the design. I have two objective observations, and some subjective observations.

    Objectively speaking, I find that the new design just feels slower, at least in Windows Chrome 70. And, sure enough, using Chrome dev tools, I find that when scrolling the page with a mouse, the new design spends 2.5 times as much time rendering as the old page.

    The page I used for comparison is www.infoq.com/articles/checklists-software-proc....

    Also, in Windows Chrome 70, there's a 0-pixel margin between the share icons and the main content that to my eye looks like the design isn't done or hasn't been fully tested. Screenshot here.

    And finally, subjectively, I prefer the old subhead font. Because it was a serif face, it was smaller. There's been a design trend in the past few years towards large fonts and generally more whitespace, but in my opinion, I think it goes too far sometimes. Or maybe it's simply that scrolling around the page is objectively slower, so the whitespace and large subhead fonts feel like they're slowing it down. It's hard to say.

    I've always really appreciated InfoQ's simple, clean design, in large part because there's very little cruft bloating the page. That seemed part and parcel with InfoQ's editorial policy, which seems to be to give relatively concise yet very informative articles; the content had a high value-to-length ratio with very little fluff. But for me the new design -- especially with the sluggishness that seems to have been added -- takes away some of the simple, clean conciseness that was always part of InfoQ. The editorial policy will remain the same, I hope, but it just doesn't feel as clean -- and fast -- as it did before.

  • Re: Some rough edges

    by Charles Humble /

    Your message is awaiting moderation. Thank you for participating in the discussion.

    Hi James,

    I'm hugely grateful to you for taking the time to reply to this.

    I want to say first that InfoQ’s editorial policy isn’t changing - we always aim for content with a high value-to-length ratio - conciseness is a key part of what we do.

    In terms of performance it is (and will be) our top priority from a site UI point of view. We know how much perceived performance affects users and we will be deploying more and more optimisations in the short term (minifying HTML, better caching etc) to improve this. In terms of the specific example you mention our lead designer has run some benchmarks and tells me that right now:
    - The redesign loads in 1797ms compared to 1507ms of the current design
    - The redesign sends fewer HTTP requests overall (home + content pages). In this case 109 vs 117
    - Our JS/CSS resources are smaller on the redesign (they’re cached so the impact on perceived performance minimal)

    The main issue is that our Req headers are not currently GZIPPED on the redesign (should be with the next deploy)

    After that we’ll run further comparisons and hopefully get it faster than the existing site - our own tests suggest it will actually be noticeably faster when we're done.

    BTW I’m not super keen on the sharing icons either - we use a third party service for these and have limits in terms of what we can do customise them - but we will re-visit them and try and improve this.

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

BT

Is your profile up-to-date? Please take a moment to review and update.

Note: If updating/changing your email, a validation request will be sent

Company name:
Company role:
Company size:
Country/Zone:
State/Province/Region:
You will be sent an email to validate the new email address. This pop-up will close itself in a few moments.