Responsive design for mobile (finally)

front/src/css/dashboard.css

@@ -5,15 +5,8 @@
   text-align: center;
 }
 .summary .globalScore {
-  display: table;
-  width: 60%;
   margin: 3em auto;
 }
-.summary .globalScore > div {
-  display: table-cell;
-  width: 50%;
-  vertical-align: middle;
-}
 .summary .globalScore .globalGrade {
   margin: 0.5 auto;
   width: 2.5em;
@@ -21,12 +14,10 @@
   line-height: 2.5em;
   border-radius: 0.5em;
   font-size: 3em;
-  font-weight: bold;
   vertical-align: middle;
 }
 .summary .globalScore .on100 {
   font-size: 1.2em;
-  font-weight: bold;
   margin: 0.5em 0 1em;
 }
 .summary .globalScore .screenshotWrapper:hover {
@@ -54,28 +45,63 @@
   top: 1.5em;
   left: 0.9em;
 }
+@media (min-width: 820px) {
+  .summary .globalScore {
+    width: 65%;
+    display: table;
+  }
+  .summary .globalScore > div {
+    display: table-cell;
+    width: 50%;
+    vertical-align: middle;
+  }
+}
 .summary .notations {
+  width: 100%;
   display: table;
-  width: 80%;
-  margin: 0 10% 1.5em;
-  border-spacing: 1em;
+  margin: 0 0 1.5em;
+  border-spacing: 0 1em;
+}
+@media (min-width: 820px) {
+  .summary .notations {
+    width: 80%;
+    margin: 0 10% 1.5em;
+    border-spacing: 1em;
+  }
 }
 .summary .notations > div {
   display: table-row;
 }
 .summary .notations > div > div {
-  display: table-cell;
-  height: 2.5em;
   vertical-align: middle;
 }
+@media (min-width: 820px) {
+  .summary .notations > div > div {
+    display: table-cell;
+    height: 2.5em;
+  }
+}
 .summary .notations .category {
   font-weight: bold;
-  text-align: center;
-  width: 20%;
+  width: 50%;
+  float: left;
+  text-align: left;
+  margin: 1em 0.25em;
+}
+@media (min-width: 820px) {
+  .summary .notations .category {
+    width: 20%;
+    text-align: center;
+    float: none;
+  }
 }
 .summary .notations .criteria {
   font-weight: normal;
-  width: 75%;
+}
+@media (min-width: 820px) {
+  .summary .notations .criteria {
+    width: 75%;
+  }
 }
 .summary .notations .A.categoryScore,
 .summary .notations .B.categoryScore,
@@ -87,10 +113,23 @@
   width: 2.5em;
   max-width: 2.5em;
   min-width: 2.5em;
-  font-size: 2em;
+  margin: 0.2em;
+  font-size: 1.5em;
   text-align: center;
   border-radius: 0.5em;
-  font-weight: bold;
+  float: right;
+}
+@media (min-width: 820px) {
+  .summary .notations .A.categoryScore,
+  .summary .notations .B.categoryScore,
+  .summary .notations .C.categoryScore,
+  .summary .notations .D.categoryScore,
+  .summary .notations .E.categoryScore,
+  .summary .notations .F.categoryScore,
+  .summary .notations .NA.categoryScore {
+    float: none;
+    font-size: 2em;
+  }
 }
 .summary .notations .grade .A,
 .summary .notations .grade .B,
@@ -134,7 +173,6 @@
 }
 .summary .notations .criteria .result {
   width: 18%;
-  font-weight: bold;
   white-space: nowrap;
   text-align: center;
   vertical-align: middle;
@@ -148,12 +186,18 @@
   margin: -2px 0;
 }
 .summary .notations .criteria .info {
-  width: 2%;
-  text-align: center;
-  vertical-align: middle;
-  background: #FFF;
-  padding-left: 0.1em;
-  padding-right: 0.1em;
+  display: none;
+}
+@media (min-width: 820px) {
+  .summary .notations .criteria .info {
+    display: table-cell;
+    width: 2%;
+    text-align: center;
+    vertical-align: middle;
+    background: #FFF;
+    padding-left: 0.1em;
+    padding-right: 0.1em;
+  }
 }
 .summary .notations .criteria .info svg {
   fill: transparent;
@@ -161,8 +205,16 @@
 .summary .fromShare {
   margin-bottom: 3em;
 }
+.summary .tweet {
+  display: none;
+}
+@media (min-width: 820px) {
+  .summary .tweet {
+    display: block;
+  }
+}
 .summary .tweet .tweetText {
-  color: #413;
+  color: #212240;
   background: #F2F2F2;
   border: none;
   width: 25em;
@@ -172,7 +224,7 @@
 }
 .summary .tweet .tweetButton,
 .summary .tweet .linkedinButton {
-  color: #413;
+  color: #212240;
   background: #F2F2F2;
   margin-right: 0;
 }
@@ -187,7 +239,7 @@
 .summary .sponsor {
   font-size: 0.9em;
   margin-bottom: 4em;
-  color: #413;
+  color: #ffa319;
 }
 .summary .sponsor a {
   color: inherit;

front/src/css/main.css

@@ -1,5 +1,10 @@
 html {
-  margin: 100px 50px;
+  margin: 35px 5px;
+}
+@media (min-width: 640px) {
+  html {
+    margin: 100px 50px;
+  }
 }
 body {
   margin: 0 auto;
@@ -27,16 +32,23 @@ h1 {
   margin-top: 2em;
 }
 .resultsMenu .menuItem {
+  font-size: 0.8em;
   display: inline-block;
-  margin: 1em;
-  width: 8em;
+  width: 7em;
   height: 7em;
   color: #fff;
-  border: 2px solid #fff;
-  border-radius: 0.5em;
   cursor: pointer;
   text-decoration: none;
 }
+@media (min-width: 640px) {
+  .resultsMenu .menuItem {
+    font-size: 1em;
+    margin: 1em;
+    width: 8em;
+    border: 2px solid #fff;
+    border-radius: 0.5em;
+  }
+}
 .resultsMenu .menuItem svg {
   fill: #fff;
 }

front/src/css/rule.css

@@ -2,7 +2,6 @@
   text-align: center;
 }
 .rule .ruleTable {
-  display: table;
   border-spacing: 1em;
   width: 90%;
   margin: 2em auto;
@@ -10,16 +9,20 @@
   border: 1px dashed #666;
   border-radius: 0.5em;
 }
-.rule .ruleTable > div {
-  display: table-cell;
-  vertical-align: middle;
-}
-.rule .ruleTable .left {
-  width: 33%;
-  font-weight: bold;
-}
-.rule .ruleTable .right {
-  width: 67%;
+@media (min-width: 820px) {
+  .rule .ruleTable {
+    display: table;
+  }
+  .rule .ruleTable > div {
+    display: table-cell;
+    vertical-align: middle;
+  }
+  .rule .ruleTable .left {
+    width: 33%;
+  }
+  .rule .ruleTable .right {
+    width: 67%;
+  }
 }
 .rule .score {
   font-size: 2.5em;
@@ -27,7 +30,7 @@
   height: 2em;
   width: 2em;
   border-radius: 0.5em;
-  margin: 0 auto 0.5em;
+  margin: 0 auto 0.25em;
 }
 .rule h3 {
   margin-bottom: 0em;
@@ -67,7 +70,13 @@
   border-spacing: 0 0.25em;
   margin: 0 auto;
   min-width: 10%;
-  max-width: 90%;
+  font-size: 0.875em;
+}
+@media (min-width: 820px) {
+  .rule .offendersTable {
+    max-width: 90%;
+    font-size: 1em;
+  }
 }
 .rule .offendersTable > div {
   display: table-row;
@@ -75,7 +84,7 @@
 .rule .offendersTable > div > div {
   display: table-cell;
   background: #f2f2f2;
-  padding: 0 1em;
+  padding: 0 0.25em;
   word-wrap: break-word;
   word-break: break-all;
 }

front/src/css/screenshot.css

@@ -2,6 +2,16 @@
   text-align: center;
 }
 .screenshot .screenshotWrapper {
-  font-size: 2.08333333em;
+  font-size: 1.2em;
   margin-bottom: 0.5em;
 }
+@media (min-width: 420px) {
+  .screenshot .screenshotWrapper {
+    font-size: 1.6em;
+  }
+}
+@media (min-width: 640px) {
+  .screenshot .screenshotWrapper {
+    font-size: 2.08333333em;
+  }
+}

front/src/less/dashboard.less

@@ -7,16 +7,8 @@
 }
 
 .summary .globalScore {
-    display: table;
-    width: 60%;
     margin: 3em auto;
 
-    > div {
-        display: table-cell;
-        width: 50%;
-        vertical-align: middle;
-    }
-
     .globalGrade {
         margin: 0.5 auto;
         width: 2.5em;
@@ -24,12 +16,10 @@
         line-height: 2.5em;
         border-radius: 0.5em;
         font-size: 3em;
-        font-weight: bold;
         vertical-align: middle;
     }
     .on100 {
         font-size: 1.2em;
-        font-weight: bold;
         margin: 0.5em 0 1em;
     }
 
@@ -61,40 +51,77 @@
         top: 1.5em;
         left: 0.9em;
     }
+
+    @media (min-width: 820px) {
+        width: 65%;
+        display: table;
+
+        > div {
+            display: table-cell;
+            width: 50%;
+            vertical-align: middle;
+        }
+    }
 }
 
 .summary .notations {
+    width: 100%;
     display: table;
-    width: 80%;
-    margin: 0 10% 1.5em;
-    border-spacing: 1em;
+    margin: 0 0 1.5em;
+    border-spacing: 0 1em;
+
+    @media (min-width: 820px) {
+        width: 80%;
+        margin: 0 10% 1.5em;
+        border-spacing: 1em;
+    }
 }
 .summary .notations > div {
     display: table-row;
 }
 .summary .notations > div > div {
-    display: table-cell;
-    height: 2.5em;
     vertical-align: middle;
+
+    @media (min-width: 820px) {
+        display: table-cell;
+        height: 2.5em;
+    }
 }
 .summary .notations .category {
     font-weight: bold;
-    text-align: center;
-    width: 20%;
+    width: 50%;
+    float: left;
+    text-align: left;
+    margin: 1em 0.25em;
+
+    @media (min-width: 820px) {
+        width: 20%;
+        text-align: center;
+        float: none;
+    }
 }
 .summary .notations .criteria {
     font-weight: normal;
-    width: 75%;
+
+    @media (min-width: 820px) {
+        width: 75%;
+    }
 }
 .A, .B, .C, .D, .E, .F, .NA {
     .summary .notations &.categoryScore {
         width: 2.5em;
         max-width: 2.5em;
         min-width: 2.5em;
-        font-size: 2em;
+        margin: 0.2em;
+        font-size: 1.5em;
         text-align: center;
         border-radius: 0.5em;
-        font-weight: bold;
+        float: right;
+
+        @media (min-width: 820px) {
+            float: none;
+            font-size: 2em;
+        }
     }
     .summary .notations .grade & {
         width: 1em;
@@ -134,7 +161,6 @@
 }
 .summary .notations .criteria .result {
     width: 18%;
-    font-weight: bold;
     white-space: nowrap;
     text-align: center;
     vertical-align: middle;
@@ -147,12 +173,17 @@
     margin: -2px 0;
 }
 .summary .notations .criteria .info {
-    width: 2%;
-    text-align: center;
-    vertical-align: middle;
-    background: #FFF;
-    padding-left: 0.1em;
-    padding-right: 0.1em;
+    display: none;
+
+    @media (min-width: 820px) {
+        display: table-cell;
+        width: 2%;
+        text-align: center;
+        vertical-align: middle;
+        background: #FFF;
+        padding-left: 0.1em;
+        padding-right: 0.1em;
+    }
 }
 .summary .notations .criteria .info svg {
     fill: transparent;
@@ -163,8 +194,13 @@
 }
 
 .summary .tweet {
+    display: none;
+    @media (min-width: 820px) {
+        display: block;
+    }
+
     .tweetText {
-        color: #413;
+        color: #212240;
         background: #F2F2F2;
         border: none;
         width: 25em;
@@ -173,7 +209,7 @@
         box-shadow: 0.05em 0.1em 0 0 #999;
     }
     .tweetButton, .linkedinButton {
-        color: #413;
+        color: #212240;
         background: #F2F2F2;
         margin-right: 0;
         &:hover {
@@ -189,7 +225,7 @@
 .summary .sponsor {
     font-size: 0.9em;
     margin-bottom: 4em;
-    color: #413;
+    color: #ffa319;
     a {
         color: inherit;
     }

front/src/less/main.less

@@ -1,5 +1,8 @@
 html {
-    margin: 100px 50px;
+    margin: 35px 5px;
+    @media (min-width: 640px) {
+        margin: 100px 50px;
+    }
 }
 
 body {
@@ -27,16 +30,22 @@ h1 {
     margin-top: 2em;
 }
 .resultsMenu .menuItem {
+    font-size: 0.8em;
     display: inline-block;
-    margin: 1em;
-    width: 8em;
+    width: 7em;
     height: 7em;
     color: #fff;
-    border: 2px solid #fff;
-    border-radius: 0.5em;
     cursor: pointer;
     text-decoration: none;
 
+    @media (min-width: 640px) {
+        font-size: 1em;
+        margin: 1em;
+        width: 8em;
+        border: 2px solid #fff;
+        border-radius: 0.5em;
+    }
+
     svg {
         fill: #fff;
     }

front/src/less/rule.less

@@ -3,23 +3,27 @@
 }
 
 .rule .ruleTable {
-    display: table;
     border-spacing: 1em;
     width: 90%;
     margin: 2em auto;
     background: #f2f2f2;
     border: 1px dashed #666;
     border-radius: 0.5em;
-    > div {
-        display: table-cell;
-        vertical-align: middle;
-    }
-    .left {
-        width: 33%;
-        font-weight: bold;
-    }
-    .right {
-        width: 67%;
+
+    @media (min-width: 820px) {
+        display: table;
+
+        > div {
+            display: table-cell;
+            vertical-align: middle;
+        }
+
+        .left {
+            width: 33%;
+        }
+        .right {
+            width: 67%;
+        }
     }
 }
 
@@ -29,7 +33,7 @@
     height: 2em;
     width: 2em;
     border-radius: 0.5em;
-    margin: 0 auto 0.5em;
+    margin: 0 auto 0.25em;
 }
 
 .rule h3 {
@@ -75,13 +79,19 @@
     border-spacing: 0 0.25em;
     margin: 0 auto;
     min-width: 10%;
-    max-width: 90%;
+    font-size: 0.875em;
+
+    @media (min-width: 820px) {
+        max-width: 90%;
+        font-size: 1em;
+    }
+
     > div {
         display: table-row;
         > div {
             display: table-cell;
             background: #f2f2f2;
-            padding: 0 1em;
+            padding: 0 0.25em;
             word-wrap: break-word;
             word-break: break-all;
             &:hover {

front/src/less/screenshot.less

@@ -3,6 +3,14 @@
 }
 
 .screenshot .screenshotWrapper {
-    font-size: 2.08333333333333em;
+    font-size: 1.2em;
     margin-bottom: 0.5em;
+
+    @media (min-width: 420px) {
+        font-size: 1.6em;
+    }
+
+    @media (min-width: 640px) {
+        font-size: 2.08333333333333em;
+    }
 }

front/src/main.html

@@ -4,6 +4,7 @@
     <title>Yellow Lab Tools</title>
     <base href="<%= baseUrl %>">
     <link rel="icon" type="image/png" href="img/favicon.png">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
     <meta property="og:image" content="img/logo-large.png" />
     <meta name="description" content="Free online web performance tool. Audit your webpage for performance and front-end quality issues. And it's open-source!" />
 

lib/metadata/policies.js

@@ -112,7 +112,7 @@ var policies = {
     "jsErrors": {
         "tool": "phantomas",
         "label": "JavaScript errors",
-        "message": "<p>Just to let you know there are some errors on the page.</p><p><b>Please note that some errors only occur in the PhantomJS browser, so you might need to double check on other browsers.</b></p>",
+        "message": "<p>Just to let you know there are some errors on the page.</p>",
         "isOkThreshold": 0,
         "isBadThreshold": 1,
         "isAbnormalThreshold": 4,
@@ -783,7 +783,7 @@ var policies = {
     "totalWeight": {
         "tool": "redownload",
         "label": "Total weight",
-        "message": "<p>The weight is of course very important if you want the page to load fast. Try to stay under 1MB, which is already very long to download over a slow connection.</p><p>Please note that Yellow Lab Tools' engine (PhantomJS) is not compatible with image srcset (unless you use a polyfill). This can lead to incorrect page weight.</p>",
+        "message": "<p>The weight is of course very important if you want the page to load fast. Try to stay under 1MB, which is already very long to download over a slow connection.</p>",
         "isOkThreshold": 1048576,
         "isBadThreshold": 2621440,
         "isAbnormalThreshold": 4194304,
@@ -793,7 +793,7 @@ var policies = {
     "imageOptimization": {
         "tool": "redownload",
         "label": "Image optimization",
-        "message": "<p>This metric measures the number of bytes that could be saved by optimizing images.</p><p>Image optimization is generally one of the easiest way to reduce a page weight, and as a result, the page load time. Don't use Photoshop or other image editing tools, they're not very good for optimization. Use specialized tools such as <a href=\"https://kraken.io/\" target=\"_blank\">Kraken.io</a> or the excellent <a href=\"https://imageoptim.com/\" target=\"_blank\">ImageOptim</a> on Mac. For SVG images, you can use <a href=\"https://jakearchibald.github.io/svgomg/\" target=\"_blank\">SVGOMG</a></p><p>The tools in use in YellowLabTools are not set to their maximum optimization power (JPEG quality 85), so you might be able to compress even more!</p><p>Please note that Yellow Lab Tools' engine (PhantomJS) is not compatible with image srcset (unless you use a polyfill). This can lead to incorrect page weight.</p>",
+        "message": "<p>This metric measures the number of bytes that could be saved by optimizing images.</p><p>Image optimization is generally one of the easiest way to reduce a page weight, and as a result, the page load time. Don't use Photoshop or other image editing tools, they're not very good for optimization. Use specialized tools such as <a href=\"https://kraken.io/\" target=\"_blank\">Kraken.io</a> or the excellent <a href=\"https://imageoptim.com/\" target=\"_blank\">ImageOptim</a> on Mac. For SVG images, you can use <a href=\"https://jakearchibald.github.io/svgomg/\" target=\"_blank\">SVGOMG</a></p><p>The tools in use in YellowLabTools are not set to their maximum optimization power (JPEG quality 85), so you might be able to compress even more!</p>",
         "isOkThreshold": 20480,
         "isBadThreshold": 204800,
         "isAbnormalThreshold": 307200,