BT

Ready for InfoQ 3.0? Try the new design and let us know what you think!

InfoQ's New Desktop Design: Public Beta and Video Tour

| by Charles Humble Follow 1007 Followers on Nov 27, 2018. Estimated reading time: 2 minutes |

We've made a number of changes to InfoQ's desktop site, the third major overhaul of our design since we got started in 2006. The above video provides a quick overview of the new design and re-architected back-end features. You can switch to the new design now to try it out; this switcher just puts a cookie on your machine to tell us where to route you. Do please keep in mind that we are still in beta, and are making updates and changes based on your feedback. In some situations it may still be necessary to take the re-designed site down for a short period of time.

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.

When you switch over to the new design you’ll be able to see a feedback widget that you can use to provide comments.  Alternatively, feel free to leave long form comments below or email us at feedback@infoq.com.

Rate this Article

Adoption Stage
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.

Tell us what you think

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

Email me replies to any of my messages in this thread

It's really great to show your change! by Cong Nguyen

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

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

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

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

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

Email me replies to any of my messages in this thread

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

Email me replies to any of my messages in this thread

5 Discuss
BT