SmashingConf Barcelona 2016 Day 1 Notes

I’ve made it all the way out to Barcelona for my second SmashingConf. I’ve attended plenty of conferences in the states but I wanted to learn something new in regards to both culture and web design. Needless to say, the first day at SmashingConf and my second day in Barcelona did not fall short of expectations.

Below are some of the notes I’ve taken during the first day of talks. Keep in mind that these notes weren’t edited and they were added just as they were jotted down. Some information may be missing (I didn’t jot everything down); if I’ve misquoted something or something needs fixing, please let me know and I’ll address. Enjoy!

Marcin Wichary - To Hell for Type

@mwichary

Talk Notes

• Poland did not have it’s own keyboards when computers began hitting mainstream. Most of the computers in Poland were individually imported from other countries (main the USA).
• So many types of quotation marks. What Medium has to take into consideration for their platform
• Tabular numbers (supported feature of open type).
• Chromes spellchecker learns typography. Did not recognize the different apostrophes that medium has. Marcin fixed chrome and created patch that chrome has now implemented (awesome).
• All the underlines you see in medium are gradients on each word.
• Uses letter outlines of the same color of the background to show spaces in the underline for each letter that overlaps.
• “Slightly worse is better than nothing”
• Typography has always been messy. Typewriters were always so limited. Hacks have been around since day one. To show negative margins, letters would bleed out of the letter block to overlap other blocks.
• If you go to Medium and search for C:\Windows you will see the website in the System font.
• Open sourcing his type tool

Q&A

Q: How did the system fonts (bug) make it into production?

A: It happened in a small amount of setups that only a few of the users had. Better to get things out there quicker and then adjust rather than wait until everything is perfect.

Q: Do you think that the use of comic sans should be punishable by law?

A: No! Look up the history of comic sans (pretty interesting). It’s great for people to be able to choose fonts (even if they choose the wrong ones), it shows personality.

Q: What did you use for your presentation with all the animations and what seemed to be live type?

A: Webapp for the presentation. *I’ll try and provide the link; I wasn’t able to write it down.

Q: (I did not write it down)

A: Keyboards are around 150 years old. Writing a book on keyboards.

My Takeaway

Typography on the web is way more complicated than it’s perceived. Just by the quotation example that Marcin presented, and this seems to be just the tip of the iceberg. There’s a book that has been sitting on my bookshelf for quite some time now called “On Web Typography” by Jason Santamaria. Even though it’s a couple of years old now, I’ll be dusting it off when I get home and give it a go.

Val Head - Designing Meaningful Animation

@vlh

• We should use animation more on the web. Not everyone agrees.
• Don’t over do it, please (showed overdone example).
• Stripe checkout. The reason stripe animations feel good is because they’re put there intentionally. The reason the flipping paragraphs where in the previous example is because we can do it in CSS (no real reason).
• Great UI animations have purpose and style.
• The core principles: the 12 principles of Animation by Disney (book). the12prciniples.tumblr.com. Sometimes also summarized as the 10 principles of motion-design.
• Animation Principle - Timing & Spacing (most important principle)
  • Timing - The amount of time it takes of an action to happen. The duration. (bouncing ball is the hello world of animation).
  • Spacing - The changes in speed over the duration of the action’s timing.
  • Benefits of timing and spacing - makes animated object to obey the laws of physics / establishes mood, emotion and reaction.
  • What sort of physical traits fit our modal?
  • What sort of mood or emotion should it show now?
• By the way we make things move, we say so much.
• CSS easing keyboard is limited. That’s why we have Cubic Bezier (cubic-bezier.com); everything is better with cubic-beziers. Use custom cubic-beziers than the defaults.
• Animation Principle - Follow through - Not everything comes to a stop at once; easiest way to get follow through, choose a bezier curve that goes outside of the graph
• Animation Principle - Secondary Action (twitter heart animation)
• Choreography - Designing all your UI animations to feel logical and related; similar objects animate in similar ways; Entrances informs exits (be consistent by how things come in and out); match velocities (instead of durations).
• Sites for finding good examples of animation:
  • artofthetitle.com - title animations (behind the scenes)
  • capptivate.co - gallery site of good iOS animations
  • uyi.io - collects good examples of web animations and categorizes them on how they work
• Book Val Wrote - Designing Interface Animation - https://designinginterfaceanimation.com

Q: What about accessibility - it is aiding or is it confusing?

A: It can be both. If you have animation that’s placed for good purpose, it can help people understand what’s happening. But if you get a bit too crazy it can hurt the experience. (google safer animation of the web)

Q: Who owns animation? Is it a UX person, UI Person, programming skill?

A: You need everyone, good code, good ux intention, it needs to be affected by your entire team. You have to work together. The earlier the better (where it comes up in the process). As soon as possible and everyone needs to help.

Q: Good example of a design guide for animation?

A: Google style guide. Material Design; IBM has a good one.

Q: CSS, SVG, JS, all battling for the animation spotlight. Your thoughts?

A: Simple animations, CSS; Complex animations JS; SVGs, manipulating shapes; they each have their own strengths.

My Takeaway

There’s a science to animation and I’m going head first into the 12 principles of Animation by Disney that Val referenced.

Cubic bezier has always been a bit of a mystery to me. But from Val’s talk, it’s simply the manual way of creating animations in comparison to the defaults that CSS comes with; you have more control over the specifics. Motivated to look into this a bit more since I’ve recently been doing A/B testing on animations and their impact on conversions. The tool reference, cubic-bezier.com seems like an awesome starting point.

Jessica Svendsen - Designing for Display

@jessicasvendsen / jessicasvendsen.com

• "I am interested in imperfections, quirkiness, insanity, unpredictability. That’s what we really pay attention to anyway.”
• "There are two types of designers, those who design systems and those who design content."
• charlierose.com
• "Clarifying is our business, obscuring is our pleasure.” Sulki and Min
• "Modernism is the result of design by committee"
• “I’m always trying to turn things upside down to see if they look any better.”
• “I am a real believer of the impractical in school. That’s not making things that are irrelevant. Impractical doesn’t mean irrelevant. But I don’t think that the restrictions of the commercial world are necessarily meaningful.” Michael Rock
• The best jobs require the least amount of recruitment.
• Work with designers who have a point of view about design and are willing to fight for it.
• Be a generalist as long as possible.
• Avoid breifs
• If you want to create idea-driven work, don’t compile moldboards or swipe; when you start creating work, step away from the computer
• Just because you can, doesn’t mean you should.
• Make sure what you’re making is meaningful
• A worthy opportunity will never present itself at a convenient moment.

Q&A

Q: How much time does it usually take you to get from nothing to an idea that works?

A: Goes back to the central idea, it tends to be pretty fast. Other projects your iterating until your pushing your own boundaries. Those are the one’s that take long.

Q: If we introduce unpredictably. Is there a predictable framework to produce unpredictability?

A: Not for making something different for the purpose of making something difference, not a good strategy. Using the content at hand.

Q: Is randomness a good thing?

A: Randomness on the on screen experience has a huge potential in disrupting experience and creating something new. When you introduce too much randomization, you lose your own point of view. When you think about randomization, it still has to be in tandem with the idea of curation. There are limitations on how it could work.

Q: Is generic always bad?

A: On the one hand, there is design that is accesibile. Design is this invisible format that lends itself to communicating an idea. A lot of times design is still not considered in the process, so much opportunity to break outside the process. When it feels like it’s intended for everyone, you feel generic. When it’s something intended for something in specific, it feels intended.

My Takeaway

It’s refreshing seeing a graphic designer within a cast of web folks. What I most respect about graphic designers is how they come up with their ideas; and this is exactly what her talk was on. A recurring theme that I’ve noticed throughout the talks is addressing the design problem we’re seeing right now on the web: all of our designs look the same. This is something we’re all struggling with regardless of the industries. A good amount of designers on the web don’t have a formal design background; this is the main reason designs are being copied over and over again. Jessica did a good job of giving insight to her process and how she comes up with her ideas. Very inspiring and helped me reflect on my current process.

Tammy Everts - How to Find What Design Factors Influence Conversion Rates

@tameverts

• Performance affects peoples perception of a site and whether they return to the site or not.
• WPOstats.com (tool)
• Pages with more scripts are less likely to convert.
• The number of dom elements matter ALOT. Optimal 400-700
• Sessions that convert have fewer images than sessions that didn’t. (37% fewer images)
• Machine learning FTW! https://github.com/wpo-foundation/beacon-ml (tool)
• Dom ready (aka dom content loaded) and average session load time were the best combined indicators of bounce rate (at 4.5s bounce probability jumps to -60%)
• Start render is important (first paint is not start render / does not recommend first paint as a metric); Amazon's start render and repeat view are the same.
• People who come from search are less impatient; people coming from Facebook were more likely to drop off (Facebook is fast, link might’ve been misleading). Both google and Facebook are fast and perception might affect.
• 6s conversion shrinks by 50% on browse pages (not checkout)
• Conversion Rate Impact Score
• User Timing - www.w3.org/TR/user-timing/
• 2 second imporvemnt in median page load time almost doubled mobile conversions for fanatics.com
• User behavior is context sensitive and always changing
• Performance issues are unpredictable
• You can’t understand what you don’t measure
• You don’t have to optimize everything
• Even small design changes can make a big difference
• performancebeacon.com - web performance, analytics, and optimization blog
• wpostats.com - case studies and experiments demonstrating the impact of web performance optimization (WPO) on user experience and business metrics.

Q&A

Q: If you’re a small agency what are some free toolsets to find analysis and find info quickly?

A: Webpagetest.org but won’t give you much user insight. RUM (real user monitoring) search on google and most have free trials.

Q: Audience is diverse in RUM, new market?

A: What I see happening are two different things, some companies are creating their own data science teams; tools are realizing that most companies won’t do this, the tool does the data science for you; building out algorithms to make 90% of data actionable.

Q: Traffic source, opportunity with pre caching tools that are coming to the web, will this make a difference?

A: Used to work for a company called rad that could predict next page based on previous user data. You could turn it off for mobile to avoid killing your data.

Q: Website that asked you to say which one was faster. Are modals successful?

A: Implemented properly, popups do help in terms of driving other areas of business. There’s been less done on how well they perform and their impact on those types of conversions.

My Takeaway

Testing is what my day to day job entails of nowadays. After many of the talks, I keep on asking myself the same question “But has it been tested to help conversions?”. I was able to get a different and more insightful perspective on what I’ve been testing (and the way I’ve been testing) for the past year. Added two new resources to my arsenal, performancebeacon.com & wpostats.com. What more can I ask for?

Stephen Hay - The Tail And Its Dog

@stephenhay

• Art direction is storytelling (well, that’s part of it anywhere)
• We’re wired for stories. When we get together with friends, we tell each other stories; we read stories to our children, etc.
• Wrote article on A List Apart “Art direction and the web”
• Two questions that are important: 1) what story are we telling; 2) how are we telling that story?
• Author of Responsive Design Workflow
• Hans Brinker Budge Hotel website is an example of art direction / tells a story
• "There’s no such thing as bad design, only inappropriate design" - Neville Brody
• Why do we have bad art direction on the web? Lack of design foundation; Lack of critical thinking; Reliance on tools
• The Design Funnel Manifesto: Define - Values and goals; Discover - Moods and metaphors; Generate - Ideas, define a concept; Create - A visual language (this is where components live); Design
• When you don’t do the above, you’re putting the cart before the worse, or the tail is wagging the dog
• Start with the story, it’s more memorable.
• “We’re just going to tell you what we need to tell you and it will just look nice.” Utilitarian approach
• Ask yourself, what if… any kind of question that you ask yourself that gives an unreasonable constraint gets your creative juice flowing
• Card trick - Are there sections? Consider transitions. Is it finished? Emphasize the flaws
• Ask yourself “What problem does this solve?”; “Is this congruent with the story?”
• When you look at something from the same angle all the time, the inconsistencies start becoming invisible.
• “Where does this fail?”
• Don’t pick the low hanging fruit. Sketch past the first ideas that pop into your head.
• Zoom in, Zoom out. It’s important to zoom in to components, but you need to zoom out. (big picture)
• The Organized Mind by Daniel J. Levitin
• Focus on the problem - don’t let the tail wag the dog
• Your work does not define you. Make mistakes.
• Recognize your uniqueness

Q&A

Q: Do you think design patterns are bad?

A: No

Q: What do you think the reason is for designs on the web looking the same?

A: Laziness. People have an idea that if Facebook does it, they must know what they’re doing, so let’s do that.

Q: Isn’t sameness good for UX?

A: I don’t they it’s either or, they’re not mutually exclusive. Tell a story and have something creative.

Q: Do you think there’s a chance that there’s a emergence in what you see is what you get. Do you think these are responsible for sameness or design as the final product be in the hands of the user?

A: With Squarespace you need to know the function of what they are. They enable people to create a quick website.

Q: Is there a longevity thing? The best gig you could get as a web developer is a website for a movie. It will be useful for 4 weeks and then it will get removed.

A: Creative doesn’t mean that you’re going to add a logo somewhere else other than the top left. Creative is telling a story with a website.

My takeaway

We’re all struggling with sameness on the web. Story telling is the way to solve this crisis. Plain and simple.

Ulrika Malmgren - How testers can be a liability

@ulrikama

• Don’t test quality in - you need to build it in (don’t rely on someone catching your bugs, build your code strong from the beginning)
• Testers break stuff - MYTH
• Testing is very creative, you have to think of so many different things and ways to break what your given
• Testing is about understanding why, for whom and how; visualizing what know and what we’re missing; performing actions to have more info.
• Programmers can’t test their own code MYTH
• The five keys to a successful Google Team - Google
• Measuring Collective Intelligence - MIT
• Temperature Reading - Virginia Satir
• How you communicate with your team is affecting how well you can perform
• If it’s always the loud persons ideas that get heard, are they always the best of ideas?
• User Story Mapping (book) - Looking at the users experience of something and having that as the baseline of how you organize your work.B2D - Behavior Driven Development
• B2D - Behavior Driven Development
• How you understand the complexity, the goal and everyone part in achieving it will impact your success.
• Unit test vs. Integration test
• Programmers - test your own stuff; focus and learn
• All team members - Don’t frown on soft values and exercises
• See testers as ambassadors for quality; raise the knowledge level of your team; reflect on communication; work with understanding; sharpen your tools.

Q: You made a good point about everyone being involved in testing. How does that work with planning of a project. When we got over budget, testing was always cut. How can we make sure that QA and testing of our product becomes an integral part of the product

A: Invite testers/QA team members in the early conversations; during actual development during the small feedback slices so it doesn’t have to be in the end.

Q: When there’s a disparagement of design and development is there a better way to make those align better?

A: When things are worked on simultaneously everyone is on the same page. Pairing designers with developers early on will give better feedback.

Q: What are your thoughts on traditional user testing; behind mirror scenarios.

A: Two completely different purposes; when you talk to users is to get information from them, the automation is to make sure that nothing is broken. Automation is good for the purpose of giving reliability. User testing is more about learning things and the problem area

Q: Complexity of tests will give more respect to testers?

A: There are separate areas in a sense, I like the idea of not having testers doing monkey work. Having those people be able to do more creative work would be nice.

My takeaway

Testing (QA) is highly underrated. What I’ve realized recently is that, as developers, we use QA as a safety net (it’s cool if it doesn’t really work the way it should, QA will let me know); this is something that Ulrika touched on and something that I’ll make a conscious improvement on with my team as well as myself. Another interesting point is involving the QA team/person from the beginning will help you avoid bigger headaches down the road.

Sara Soueidan - SVG in Motion (A Case Study)

@SaraSoueidan

• She's the front-end developer behind the new Smashing Magazine website
• Every time design needs to be changed because CSS is shit, a kitten dies somehwere - Lea Verou
• Awesome CSS hack (too long to jot down)
• box-decoration-break - not supported in all bowsers yet
• dowebsitesneedtolookthesameineverybrowser.com (NO)
• Creating links that down overlap the descendents of the link
• Custom list bullets / CSS Counters allow us to number a list of items of any type (headings, figures, etc), numbers are then incremented per element.
• Not only should the image be a good candidate for SVG, but SVG should also be a good candidate for the image.
• Some screen readers read uppercase words as individual letters (use text-transform:uppercase)
• The web is accessibly and we are the ones who break it. If we break it, we should fix it.
• font-size: calc(16px + 3vw); - for responsive headers

Q: In what form and grade of completion did dan deliver mockups

A: He delivered photoshop files, but those were useless because I don’t have photoshop. I just opened the images and started coding.

Q: What browser and operating systems are supported and how (for the new Smashing Magazine website)?

A: We didn’t care about IE8. We’re not optimizing for old browsers but we’re providing the basic functionality. We might remove js from IE8. Progressive enhancement is good for your health.

Q: Impact on performance (calc)

A: I’ve asked a few experts and it has no impact on performance at all.

My takeaway

Mind blown. The calc example for responsive typography was something I wasn’t aware of before and will definitely be implmenting as soon as I get back to New York. I wasn’t able to take as many notes because I was too busy being amazed (I did take plenty of screenshots though). Sara’s the front-end developer behind the new Smashing Magazine being created. Hands down my favorite talk so far.

Jeremy Keith - Resilience

• Pastels law
• If you receive a packet and it’s badly formed, do what you have to do with it and don’t be a dick about it.
• But if you’re going to be sending these packets, make it as organized as possible.
• Be liberal in what you accept.
• 3 step approach
  • Step 1 identify core functionality
  • Step 2 Make that functionality available using the simplest technology
  • Step 3 enhance!
• Services workers - websites that work off line

No Q+A

My takeaway

Let’s make a web that’s resilient in the way it works. Yup, got it.

View day 2 notes