Artifact Conference: Brief Notes

Below are my sketchy notes of things I wanted to remember from Artifact Conference, which I just attended in Austin Texas. Beware: these are barely proofread and are mostly for myself.

Welcome to Artifact

Jennifer Robbins

Then and now:

  • silos -> integrated teams
  • wireframes -> early prototypes
  • collection of pages -> system of components
  • photoshop -> code


Jeremy Keith

Read: The dao of web design and Designing with web standards

Structural honesty – using the correct tag for the job

Build escalators not elevators – progressive enhancement – when it breaks, it still works – 1.1% did not have javascript, .2 was turned off, .9 didn’t know why styleguide recommends progressive enhancement. don’t rely on javascript

solve problems with simpler solutions lower in the stack

There are tools for the developer and tools for the user. Tools for the developer don’t matter (personal preference) but tools for the user have a cost (bootstrap, jquery, etc). Consider them carefully.

When using opinionated software or tools (e.g. ember) be sure the opinion matches your own. When the tools view differs from your own, it affects how you see your code.

Watch out for tools that rely on fragile javascrpt.

A lot of what we do can be done with HTML – don’t make things more complicated than they have to be.

On inspiration: big name sites are not necessarily best practice, but it can be useful to see what they do and how they change. E.g. twitter using hashbangs and then dropping them.

Javascript that can be run on server or client: isomorphic javascript.

The bottom line is that client side architecture leads to slower performance.

Make it your problem, not the user’s

When you judge the web on platform programming, you will be disappointed. Instead, celebrate the web for what it is: loads anywhere, on any device.

A “web app” is a website that does not work when javascript is disabled.

Responsive enhancement – HTML is responsive by default – see how the first web page changes with browser width. Responsive design is keeping this inherent responsiveness, not creating it.

“How do I convince…” (my stakeholders, my clients, etc.)
remember it is not our job sometimes to do everything clients want to do, our job is to explain why a webstie looks different in older browsers. – manifesto

Only supporting current technology helps cause the cycle of acquiring new electronics at a faster and faster rate (consumerism). There is an ethical component to backwards compatibility.

Power tools for browser-based design

Stephen Hay


Pandoc – to convert files from one markup format into another. There are also options for including a header/footer/etc.

Emmet – construct quick mockup HTML using CSS like selectors.

Typecast – Type prototyping. (monthly charge, but has a free preview – can also use it free through google fonts)


morgueFile – free stock images for mocking up sites. – Quick and easy placeholder images of any side. – create your own icon fonts. – drag and drop SVG’s for cross browser compatibility. Also available as a grunt action.

ImageOptim – quick and easy file minimization. Note: I have found this especially useful for making thumbnails smaller – I save up to 95% of the file size. BUT, this can shift the colors of images a bit. I have noticed color shifts especially in off white images like newspapers and magazines. So use with caution on your full size display images.

ImageMagick – suite of command line tools for doing all sorts of things to your images – resizing, desaturation, etc.


Kuler – web based tool from adobe to generate color schemes.


Gridset – useful tool fro creating prototype code. Generally not for production. In general, designers are not creating production ready code.

Side point – where should breakpoints be? Where your design needs them. Shouldn’t have preset breakpoints, you should make design bigger until it breaks, and then add a breakpoint.

ish. – Viewport resizer, helpful for finding breakpoints.

CSS Flexbox – useful for making layouts.

Creating mockups/comps

There are a lot of in browser design tools now, e.g. Macaw, CoffeeCup, and Easel. The advantage of these is that you are doing in browser design. The disadvantage is they are like magic, it can be hard to see what is going on behind the scenes. They also do not produce production ready code.

Front End Frameworks – Use with caution, 50% of the web looks like bootstrap.

Static Site generators – Jeckyll, Dexy Dexy also does documentation generation. After mentioning Dexy on twitter, someone else recommended Docpad.

Templating – Jinja2 and mustache as just two examples out of many.

Tools for sketching in code

JSBin – collaborative javascript playground

CodePen – an HTML, CSS, and JavaScript code editor in your browser.

Producing documentation

Dexy, again – uses special in line code comments to auto produce documentation

AsciiDoctor – a structured way of writing documentation

Responsive Email: It’s Not As Bad As You Think

Justine Jordan

A nice well thought out email should have one call to action

email doesn’t need to be maintained like a website so don’t fear a few hacks

Hooray Icon Fonts!

James Williamson

Icons are extremely valuable in the online context

Pros of icon fonts: Scalable, single file include, you can style with css

Cons of icon fonts: monochromatic, tricky to make, accessibility issues if done wrong, tricky to control

Be careful to avoid bloat!

Sites to help with icon fonts: IcoMoon, Fontello, Pictos

To create: Illustrator, Inkscape, Sketch (for vector graphics) and Glyphs, FontForge, and FontLab for font creation.

It is best to use the unicode Private Use Area to avoid conflicting with other glyphs. But! Map to standard glyphs when you can, i.e. * # @, etc.

Some tips:

  • Display Inline Block
  • Use CSS Generated content – fallback will be nothing.
  • Base 64 encode the font into your CSS file to get around Firefox’s local font issue.
  • Use the following for best results in rendering:
    * -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  • Use either an empty span or data-icon to display. You can also use ligatures, but results may be spotty.
  • Normalize all text values weight, style, variant.
  • try to scale along the font’s design grid (e.g. 16, 32, 64)
  • text rendering: optimize legibility
  • vertical align

CASE STUDY: Turning the Ship Overnight: A Responsive Retrofit at an Enterprise Scale

Rob Huddleston, Scott Childs, Brian Dillon

Get accessibility done by tacking it onto a responsive redesign.

Demo early, demo often.

Don’t get too bogged down in details, e.g. Google’s infamous 41 shades of blue.

Participatory design – design with your users. Designers have to be comfortable with failing in front of users and stakeholders.

All The Right Moves: Putting Your UI In Motion

Val Head

Old = untrustworthy (to some users) and animation can make feel new

Guiding tasks with animation

Giving clues as to context

UI animation principles

  1. Always be flexible
  2. speed is an art – animations should be as fast as they are readable
  3. Look beyond the web for inspiration

The Emerging Global Web

Stephanie Rieger

Emerging economies now make up half of the top 20 – they used to take up none

Developing economies are leapfrogging over brick and mortar and going straight to digital/online. To westerners, digital is an exciting new way of doing things, to many others in the world, digital is the only way of doing things (banking, selling, etc.).

Wait what? How to Enhance your Responsive Process with Content Questions

Eileen Web

How to enhance your responsive process with content questions

Responsive is a great way to get people to care about their content. “we’re going to have to cut some of this text because… tiny screen.”

Content Questions

  • What’s the content going to do
  • where will it come from

Content quality:

  • too much
  • poorly formatted
  • walls of text

How to change their minds re: content?

  • Show them, don’t tell them. Make a quick mockup of their text and ask them to view it on mobile.

Content books to check out

  • Elements of style illustrated
  • Letting go of the words

Ask: What is the point of the page

Exercise: World’s most boring wireframe:

  • Use post its or an online tool like trello to arrange content chunks in a single column until it makes sense.

In general: Don’t hide content on a small screen

  • But if you have to, use “read more…” and then hide with javascript (so it still shows up if javascript is turned off). Pay attention to where truncation will happen

Post launch questions:

  • When do events/content get added, and by whom?
  • Use nice admin themes, and explain content inline so people who will be updating know exactly what goes where. Build a content guide, and use specific form field title. “author bio” instead of “text”

Try to consider the whole journey the whole time

What happens when the client does not care abut the wall of text? You have to choose: maybe edit it yourself, maybe let it go. They have to care too.

Leaving Pixels Behind: A Vector Workflow for Designers

Todd Parker

Why vector? It is awesome! Scalable, looks great on retina, can style with CSS, full color

Great for data visualizations

SVG’s are text files, so they can be manipulated.

Check out SVG’s on

Still need a fallback, check out grumpicon.

Creating Vectors: Illustrator, Inkscape, Sketch. Illustrator can be buggy in many SVG features.

Use grunt for automating workflow! Read Grunt for People Who Think Things Like Grunt are Weird and Hard


Trent Walton

Start with the harshest conditions – Opera Mini, Tiny screens

The experience starts when the page loads. If your page is huge, it doesn’t matter if your content is great.

Instead of doing Planning, designing, coding all at once, they should overlap.

Ideas Want to be Ugly” – Jason Santa Maria

Use to build atomic design.

Automating your workflow

Dave Rupert

Atomization – break it down to its smallest parts

Unix philosophy

  • tools should do one thing well
  • small is beautiful
  • build a prototype as soon as possible
  • use software to do the things you hate


  • Sublime Text – text editor
  • github’s Atom – text editor
  • Linting – precheck your source code, your text editor should support this, or do via command line
  • codekit – compiles, checks, does things for you.
  • Hammer – another scaffolding tool
  • Cactus – static site generator/scaffolding
  • – rapid front end development

Automating, the big 3:

  • Bower (package manager)
  • Grunt (task automation)
  • Yeoman (site generator/scaffolding)

Use yeoman for rapid prototype developing.

Behind the Scenes: The making of TechCrunch and Entertainment Weekly

Josh Clark, Brad Frost, Jonathan Stark

Do stakeholder research, and then have a kickoff

The kickoff – an event to build consensus and agreement, and set goals and priorities.

Kickoff activities:

  • 20 second gut test: show a bunch of sites (perhaps with logo replaced), on screen and mobile, scroll down them. ask stakeholders to rate them 1-5. Talk about what people agreed and disagreed on, liked and disliked.
  • What should be on the page? Use post its to generate content ideas.

Other tips:

Determine values – Vote on ideas/what’s important:

  • mapping
  • engaging
  • connecting
  • showcasing
  • educating

Talk about the product concept.

Do some low fi sketching – identify site wide patterns

Find the uncontroversial pages

Element collages

  • Leverage initial designs to start conversations. Rather than sayint “what do you think?” ask “are we on the right track here?”

Atomic Design

  • Atoms
  • Molecules
  • Organisms
  • Templates
  • Pages

Check out for more.

Pipe in real content with javascript

Patterning encourages reuse.

Handle all issue tracking in one place

Use tons of screencasts and screenshots to document problems and communicate. Especially useful if working at a distance.

Assign a gitmaster

Automate deployment – Capistrano, etc.

Define handoff deliverables ahead of time.

Collaboration and communication trumps process