もしあなたがInfoQをタブレットかデスクトップデバイスで見てきたなら、今日かなり違って見えることだろう。InfoQが2006年に始まって以来、デザインの大規模な整備はこれで3回目となる。2週間掛けて行った公開のベータテストを成功に収めたのちに開始された。上記のビデオは新しいデザイン、再構築したバックエンド機能のクイックオーバービューを提供している。
新しいデザインはコンポーネントベースになっており、InfoQとQConで共通した設計言語を表現している。今後数ヶ月の間に、InfoQとあらゆるQConサイト、わたしたちがプロデュースするニュースレターなどのエリアでも外観の統一が見れるだろう。一貫したデザインパターンを使うことによって、親しみやすさと理解を深めるのに役立てることが目的である。
この仕事の一環として、わたしたちは2つのメインフォントにRobotoとFira Sansを利用し、タイポグラフィー、色、図像をシンプルにした。新しい製品をできる限り小さく分配可能にしておくため、熱心に取り組んできた - 共通のCSSは約290KB、JavaScriptは35KB、典型的なページは45-55KBになっている。概して、新しいサイトは以前より約25%ロードが速くなった。
新しいデザインは完全に包括的であることを意図しており、ウェブ・コンテント・アクセシビリティ・ガイドライン(WCAG)に準拠している。プロトタイピングのために、デザインチームはSketchとInVisionをメインのデザインスタックとして利用した。テクノロジースタックの観点からは、Vue.jsとNuxt.jsを使い、Pug.jsをテンプレート/スクリプト用に、StylusとPostCSSをCSSプロセス用に、Webpackをパッケージングに利用している。新しいCSSは SMACCSとBEM - a scalable and modular architecture for CSS with Block Element Modifiersである。裏では、InfoQのバックエンドを老朽化したJCRベースのシステムから、AWS上で稼働する新しいカスタムビルドでマイクロサービスライクなコンテントリポジトリに移行する整備も行なっている。
このアップデートは始まりにすぎない。新しいデザインは完全にレスポンシブで、モバイルデバイスにも近々対応させる予定だ。コンテントディスカバリの改善は引き続き取り組んでいく予定で、ビデオプレイヤーの大きな改善も今後数ヶ月の間に行う予定である。