Categories
Uncategorized

My CSS Starter Kit: Getting Started

One of the things I would have killed for when I came back to doing (serious) web design was a set of guidelines, stylesheets and examples of how to use responsive design and typography on the web. This is my attempt at creating such a guide. It’s far from perfect but it’s a starting point.

I don’t hide the fact that I’m opinionated. There are reasons why I choose to do things a given way and I respect that you may disagree with me, that’s your call.

SASS/SCSS versus CSS

The styles in this guide will be created using SASS 3.4 and the Ruby SASS interpreter. There is a C implementation of SASS (libsass) that is supposed to be on par with Ruby SASS. In my experience libsass does not work as well as the Ruby version so I decided it’s ok to add the Ruby dependency to the project.

The CSS output of the SASS process will also be available and you can work from the CSS. Just remember that if you work from the CSS you are responsible for updating your stylesheets when changes happen or when you want to do things differently.

Using Normalize.scss

We need to make sure that our content looks the same in as many browsers as possible. Normalize.css and its SCSS version make a good job of smoothing the remaining differences in styles and their application across browsers. It has been imported in our main.scss stylesheet.

If you don’t want Normalize as part of your stylesheet, remove the statement @import partials/normalize/import-now; from main.scss.

Open Type classes

The project includes Utility OpenType from Kenneth Normandy. The classes in Utility OpenType provide fine grained control over OpenType font features.

Not all OTF fonts offer all features. But it is still a good tools to have if you choose your fonts carefully .

using the Golden Ratio and modular scales

The first thing we’ll do is define a modular scale to use in the content. I’ve chose to use modular scale by Scott Kellum and Tim Brown as a way to make it easier to create a scale that works across sizes and accross devices.

There is also a SASS plugin (will work with Compass as well as vanilla SASS). To install in vanilla SASS follow these instructions:

  • Download the latest version modular scale plugin from Github
  • Unzip the content to your project (I used the src/sass directory)
  • In your main SCSS file @import 'modular-scale/modular-scale

For example, to define the font sizes of the 6 heading elements (h1 through h6), we could do something like this:

h1 {
  font-size: ms(4);
  line-height: 1.2;
}
h2 {
  font-size: ms(3);
  line-height: 1.1;
}
h3 {
  font-size: ms(2);
  line-height: 1.1;
}
h4 {
  font-size: ms(1);
  line-height: 1.1;
  text-transform: uppercase;
  word-spacing: .2em;
}
h5 {
  font-size: ms(1);
  line-height: 1.1;
  text-transform: uppercase;
}
h6 {
  font-size: ms(1);
  line-height: 1.1;
}

and the resulting CSS looks like this:

h1 {
  font-size: 6.8541em;
  line-height: 1.2;
}

h2 {
  font-size: 4.23607em;
  line-height: 1.1;
}

h3 {
  font-size: 2.61803em;
  line-height: 1.1;
}

h4 {
  font-size: 1.61803em;
  line-height: 1.1;
  text-transform: uppercase;
  word-spacing: .2em;
}

h5 {
  font-size: 1.61803em;
  line-height: 1.1;
  text-transform: uppercase;
}

h6 {
  font-size: 1.61803em;
  line-height: 1.1;
}

The one thing I don’t like about the sizes we get using the Golden Ratio is that they are too big. The Modular Scale makes available different scales. If we use the change the scale to 15:16, also known as a minor second scale. The values of our headers will also change. To make these changes, add the following variables to your stylesheet, or to your variables file:

$ms-base: 1em;
$ms-ratio: 1.067;

In this scales the headings become harder to differentiate:

h1 {
  font-size: 1.29616em;
  line-height: 1.2;
}

h2 {
  font-size: 1.21477em;
  line-height: 1.1;
}

h3 {
  font-size: 1.13849em;
  line-height: 1.1;
}

h4 {
  font-size: 1.067em;
  line-height: 1.1;
  text-transform: uppercase;
  word-spacing: .2em;
}

h5 {
  font-size: 1.067em;
  line-height: 1.1;
  text-transform: uppercase;
  word-spacing: .2em;
}

h6 {
  font-size: 1.067em;
  line-height: 1.1;
}

We’ll try one more scale, the major third scale (1.25). We’ll change the variables to those below:

$ms-base: 1em;
$ms-ratio: 1.25;

And the resulting CSS

h1 {
  font-size: 3.8147em;
  line-height: 1.2;
}

h2 {
  font-size: 3.05176em;
  line-height: 1.1;
}

h3 {
  font-size: 2.44141em;
  line-height: 1.1;
}

h4 {
  font-size: 1.95313em;
  line-height: 1.1;
}

h5 {
  font-size: 1.5625em;
  line-height: 1.1;
}

h6 {
  font-size: 1.25em;
  line-height: 1.1;
}

There are other scales available. You can play with them to find the scale that suits your fonts, your design and your tastes the best

We’ll pair the modular scale with media queries to change the sizes for smaller form factors.

Modular scale includes functions for a number of classic design and musical scale ratios. You can add your own ratios as well.

Function Ratio Decimal value
$phi 1:1.618 1.618
$golden 1:1.618 1.618
$double-octave 1:4 4
$major-twelfth 1:3 3
$major-eleventh 3:8 2.667
$major-tenth 2:5 2.5
$octave 1:2 2
$major-seventh 8:15 1.875
$minor-seventh 9:16 1.778
$major-sixth 3:5 1.667
$minor-sixth 5:8 1.6
$fifth 2:3 1.5
$augmented-fourth 1:√2 1.414
$fourth 3:4 1.333
$major-third 4:5 1.25
$minor-third 5:6 1.2
$major-second 8:9 1.125
$minor-second 15:16 1.067

Defining a list of variable to use

For a long time SASS was the only game in town when it came to using variables or variable-like constructs for your stylesheets. CSS caught up with a more dynamic concept of variables.

I love CSS variables but, for building a framework SASS variables will work best. If necessary we can convert some of the SASS variables discussed below into CSS variables to use after transformation.

Some variables to think about:

  • Colors: We can create variables for colors in the Material Design Palette, for example, and then use SASS functions to create lighter and darker versions of each color without having to do the calculations manually.
  • Default font sizes: Since we’ll be changing some (if not all) font size attributes we may as well store them in variables. However we need to remember that we’re using modular scales to generate the sizes
Categories
Uncategorized

Progressive Subcompact Publications: Links, resources, patterns and ideas

Categories
Uncategorized

Progressive Subcompact Publications: UI for the performance obsessed

As consumers of information we’ve all become more demanding. We want the content faster and we want to be engaged with the content we access online. PSPs should be no different in their performance to traditional web applications.

Rather than provide a one-size-fits-all solution I present some of the data Nielsen first articulated in 1993’s Usability Engineering  We’ll use these values to draw some basic conclusions that will start the thinking about performance and how PSPs can work towards achieving those performance goals.

  • 0.1 seconds — Operations that are completed in 100ms or fewer will feel instantaneous to the user. This is the gold standard that you should aim for when optimizing your websites.
  • 1 second — Operations that take 1 second to finish are generally OK, but the user will feel the pause. If all of your operations take 1 second to complete, your website may feel a little sluggish.
  • 10 seconds — If an operation takes 10 seconds or more to complete, you’ll struggle to maintain the user’s attention. They may switch over to a new tab, or give up on your website completely. Of course this depends on what operation is being completed. For example, users are more likely to stick around if they’ve just submitted their card details in the checkout than if they’re waiting to load a product page.
  • 16 milliseconds — Given a screen that is updating 60 times per second, this window represents the time to get a single frame to the screen (1000 ÷ 60 = ~16). People are exceptionally good at tracking motion, and they dislike it when their expectation of motion isn’t met, either through variable frame rates or periodic halting.

We want to get to the site’s first meaningful paint on initial load in as close to 1000 milliseconds as possible.

Animations should take no more than 16 milliseconds in order to reach 60 frames a second.

Performance Optimizations

We can optimize our resources so that time to first meaningful interaction is as short as possible. First load will also cache the resources needed for our application shell and then dynamically . We want to optimize this to last as little as possible.

This is not just speech for the sake of speech. Take the following graphic (from Soasta’s Page bloat update: The average web page is more than 2 MB in size). How can we minimize the number of resources to load and cache the first time we access a page? How many of these resources can be reused on pages across the site? How can we optimize images to reduce their size?

We have gotten lazy or, possibly, made the wrong assumptions. The graphic below, also from Soasta’s blog post, show how the size of our web content has changed over the years… and it shows no signs of decreasing.

I’ve added an image compression step to my build file based gulp-imagemin to make sure that I reduce the size of the images on my apps and sites. The Gulp plugin comes bundled with the following losless compression tools

The actual Gulp task looks is this:

gulp.task('imagemin', function() {
  return gulp.src('src/images/originals/**')
    .pipe(imagemin({
      progressive: true,
      svgoPlugins: [
        {removeViewBox: false},
        {cleanupIDs: false}
      ],
      use: [mozjpeg()]
    }))
    .pipe(gulp.dest('src/images'))
    .pipe($.size({
      pretty: true,
      title: 'imagemin'
    }));
});

As usual, your mileage may vary.

Categories
Uncategorized

Progressive Subcompact Publications: Structuring and Styling Content

We want our content to look awesome regardless of the device. How do we accomplish this?

A good starting point is Ethan Marcotte’s Responsive Web Design (or whatever Responsive Web Design book is your favorite). We want the experience to scale to whatever device or platform we’re targeting and, whatever design we choose, the first thing we need to make sure of is that it’ll work well in phones, tablets and desktops (in other words, everywhere there is a browser).

Once we have a layout we can start thinking about, what to me is, the most important part of any long form project: typography. I’ve written extensively on what typography is and how it works on the web now we need to take the next steps.

This is where the first set of choices happen: What layout do we choose? How do we create something engaging without becoming repetitive? How do we craft a reading experience that matches the content?

I first saw Jen’s presentation at SFHTML5. I see it as a challenge and an opportunity to think differently about the way we create and layout our content on the web. For longer form content this also speaks to letting the content dictate the layout and not the other way around. What is it that makes magazine layouts so interesting?

I collect electronic versions of GQ, Wired, Vanity Fair, Fast Company and Harvard Business Review and the biggest question when I read them is how can we make this reading experience in the open web? The ads from magazines are what intrigue me the most… and where a lot of my most radical ideas come from.

After watching this presentation from Beyond Tellerand I couldn’t help reading the new edition of Hardboiled Web Design. Clarke advocates that creativity should be at the center of our online design work… It speaks to the need of art directed web design and bespoke designs rather than using the same design over and over.

If we drop the book metahphor from our online reading experiences, There is no limit to what we can do with our online publications. We need to go back to our content and see how we can enrich it and what technologies we can use to do so… we have a lot of layout tools that, a few years ago, were only possible in InDesign and other Desktop Publishing Tools or took a lot of extra workarounds to do in CSS/HTML/JavaScript.

Now we need to get out our collective comfort zone and challenge both ourselves and our future readers with layouts that go beyond what we see on the web today.

One last example of what we can do with our new css tools and how much we can be true to our creative selves without having to lie to our web developer selves: Justin McDowell uses new CSS technologies to recreate works from the Bauhaus school.

Categories
Uncategorized

Progressive Subcompact Publications: Annotations

I still remember the first time I made an annotation from a Kindle book available in their public site (kindle.amazon.com). I saw the possibilities as limitless until I realized that there were limitless as long as you bought the book from Amazon and read it on a Kindle device or application.

Every time I’ve turned around and searched for some way to annotate the web I’ve come with these two solutions but I’ve never had a project they work well with. I think PSPs are the perfect place to put this in practice. There are two libraries I think are particularly appropriate: Emphasis and annotator.js which provide different ways to make and share annotations from your PSPs.

Emphasis provides dynamic paragraph-specific anchor links and the ability to highlight text in a document, it makes the information about the highlighted elements of the page available in the URL hash so it can be emailed, bookmarked, or shared.

annotator provides a more traditional annotation interface that is closer in spirit to the Kindle annotation UI that attracted me to the concept when I first saw it.

Another tool that sounds interesting is MIT’s Annotation Studio but it seems to be geared towards MIT Hyperstudio’s larger project and not necessarily ready as a standlone solution, that said, your milleage may vary.

The thing to consider if how these annotation tools store the annotations. Do they use server-side databases? If so how do we cache new annotations when the reader is offline? Google Analytics provides a possible example where we store the annotations in indexedDB and then play them back when the user goes online.