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
Then and now:
- silos -> integrated teams
- wireframes -> early prototypes
- collection of pages -> system of components
- photoshop -> code
Structural honesty – using the correct tag for the job
Build escalators not elevators – progressive enhancement – when it breaks, it still works
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.
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.
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.
http://futurefriendlyweb.com/ – 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
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.
placehold.it – Quick and easy placeholder images of any side.
icomoon.io – create your own icon fonts.
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.
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.
Tools for sketching in code
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
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!
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!
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.
- 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
Old = untrustworthy (to some users) and animation can make feel new
Guiding tasks with animation
Giving clues as to context
UI animation principles
- Always be flexible
- speed is an art – animations should be as fast as they are readable
- Look beyond the web for inspiration
The Emerging Global Web
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
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.”
- What’s the content going to do
- where will it come from
- 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
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
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 webplatform.org.
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
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 patternlab.io to build atomic design.
Automating your workflow
Atomization – break it down to its smallest parts
- 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
- mixture.io – rapid front end development
Automating, the big 3:
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.
- 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.
Determine values – Vote on ideas/what’s important:
Talk about the product concept.
Do some low fi sketching – identify site wide patterns
Find the uncontroversial pages
- Leverage initial designs to start conversations. Rather than sayint “what do you think?” ask “are we on the right track here?”
Check out patternlab.io for more.
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