Susan J Robertson

View Susan J Robertson

Susan has recently redesigned her site and done a wonderful job. The site is super clean, beautifully designed (both visually and when you delve into the code, and it does one job incredibly well — it lets the content stand out.

Performance

The site doesn’t have much weight to it so it’s super fast. It is already running on https (yay) so the only additional recommendation in this area might be to put something like Cloudflare infront of the site to enable HTTP/2 for faster loading of the images and other assets.

Font Loading

Susan uses a Font Face loading script on the site which optimises for repeat views. It is Bram Stein’s Font Face Observerthat is used which adds the class of .fonts-loaded to the html element.

Responsive Images

It was great to also see that responsive images have been implemented on the site which goes to show Susans attention to detail. There is both srcset…

<img srcset="/images/build/redesign/spoke-large.png 2000w,
                            /images/build/redesign/spoke-small.png 1000w"
                            sizes="(max-width: 50em) 800px,
                            (max-width: 104em) 850px,
                            2000px"
                            src="/images/build/redesign/spoke-small.png" alt="askspoke.com" />

… and picture element used.

<picture>
    <source srcset="/images/build/redesign/smashingconf-far-away.jpg" media="(min-width: 105em)">
    <source srcset="/images/build/redesign/smashingconf-far-away-my-edit.jpg" media="(min-width: 74em)">
    <source srcset="/images/build/redesign/smashingconf-far-away.jpg" media="(min-width: 62em)">
    <source srcset="/images/build/redesign/smashingconf-far-away.jpg" media="(min-width: 50em)">
    <img src="/images/build/redesign/smashingconf-far-away-my-edit.jpg" alt="" />
 </picture>
 

CSS Grid Layout

Susan makes use of the CSS Grid to layout the pages which we’re beginning to see more and more for peoples blogs and personal sites, much in the same way that we saw that happen with RWD in the early days. One big difference is that I’ve seen a number of large sites, like FT.com for example, who have also embraced the CSS Grid early on.

Susan also makes use of the @supports rule for the photo list, but rather than the code for older browsers first and then overriding with @supports this approach only shows the code for browsers that don’t support display: grid. The only downside with this approach is that users on IE 10 and 11 who do support an older prefixed version of CSS Grid don’t support the @supports rule and therefore won’t benefit from the fallback code. After checking with Susan it turns out that some of the code is from a previous version, and the rationale behind chosing Grid to build these areas out was the same that you and I would have when working on our personal sites, it’s for experimentation and testing the boundaries.

@supports not (display: grid) {
  .photo-list{max-width: 800px
}

.photo-list:after {
  clear: both;
  content: "";
  display: table
}

.photo-list-item {
  float: left;
  margin-right: 1%;
  width: 48%
}

.photo-list-item:nth-child(2n) {
  margin-right: 0
}

.photo-list-item:nth-child(2n+1) {
  clear: left
}

}

The photolist could also have been done by using Flexbox. This would take the requirement for additional media queries to reduce the number of grid columns that are required.

.photo-list {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
}
.photo-list-item {
    margin-bottom: 2rem;
    flex: 1 0 17em;
    padding: 0.5em;

This is why I love building on the web… there are so many ways to do things and none of them are wrong (they just have different consequences).

SVG

The logo in the header is a wonderful inline SVG which means that it will be as chrisp as you can imagine regardless of the screen size or your devices pixel density.

Javascript

There are only two pieces of javascript on the site. The first is the font-loader for better percieved performance and the second is a tiny little script to spit out the current year for the copyright message in the footer.

Susan J Robertson Technical Details

Site Meta Tag

<meta name="viewport" content="initial-scale=1.0" width="device-width" />

Media Queries

@media (min-width: 50em) { }
@media (min-width: 56em) { }
@media (min-width: 73em) { }
@media (min-width: 42em) { }
@media (min-width: 62em) { }
@media (min-width: 35em) { }
@media (min-width: 55em) { }
@media (min-width: 75em) { }
@media (min-width: 95em) { }
@media all and (min-width: 40em) { }
@media (min-width: 105rem) { }