OUGD602: Work in the Web - Day 2

This was the day I was most looking forward too as it featured sessions on design, SASS and RWD, which is what I most wanted to learn about.

Session 1- Design for the Web
Chris Murphy did this session, and it was really good. Although it was on design, it wasn't anything that has been covered in uni as it was more about how to code well designed type, rather than just design it.

He teaches his students to just code HTML first as design elements.
HTML5 Semantics

The Craft of Words
His book explains that the words we use are important, as they establish a brand and tone of voice.

Underwear - typographers

Content First
Ban lorem ipsum - it is a waste of time because we are making the content fit our design rather than designing for the content. Once we have the copy we then have to redesign it to fit that, so there is no point doing it in the first place.

Golden section - 1.6
Modular scale - use it to figure out type ems

Characters
There should be between 45-75 characters on a line, and 65 is considered the ideal amount.

Vertical Rhythm
Create control in vertical rhythm using line height and margins. I realised line height is really important and it can make text a lot more readable in his demo.

Typecast by Monotype
Visual tool for designing type in browser, and spits out the CSS for you. Access to free fonts and it has a good blog as well

Charles + Ray Eames - 'the details are not the details, they make the product'

Kerning.js

Take notice of ligatures, multiplication signs, ellipsis, right italics, primes and quotation marks as this can all be adjusted correctly in the code

Advancedwebtypography - Elliot Jay Stocks explains how a line of CSS can solve this

CSS Guidelines tells you how to write manageable CSS

After the session he posted a link to this resource on style guides

Session 2 - SASS

Sass is a pre processor for CSS and makes writing CSS a lot easier and quicker. I really wanted to learn how to do this so was glad there was a workshop on it. 

It provides functionality that doesn't exist in CSS

Write SCSS file, compile (using CodeKit) then use the CSS file

It reduces repetition

Terminal 

ls

cd /Applications/MAMP/htdocs/
ls
git clone <url>

go into Sublime, open up project, appears in side bar
go into Codekit, add new project so that it watches it
The rest of the session was a practical in it, learning the basics of SASS and getting used to it.

Session 3 - Responsive Web Design

Five Principles
Device agnostic
Be fluid
Build mobile first
Be Resolution Independent
Optimise 

wtfmobileweb

SVG
iconfonts - fontello, entypo - choose glyphs you want
can upload your own vector svgs to icomoon 
Vector based icons should be used so they don’t get pixelated

Mobitest - tests optimisation to see how long the page loads and how big it is

Keep HTTP Requests to a minimum - imports, images, javascript file, css file, fonts etc are a request

Optimise images to improve performance, instead of 100% go down to about 80
Can also run it through opt

The rest of the session was a practical, changing the grids, testing out responsiveness etc