Hey everyone! I’m attending Smashing Conference 2017 in San Francisco today and tomorrow. I’m not sure if anyone else is here, but I’ll be posting some of my thoughts and findings here as we go along.

9:31 AM - First speaker is Denys Mishunov, speaking on psychological aspects web performance. The most interesting statistic so far – 11% of people have screamed at their device when experiencing a bad web experience, and 4% have actually thrown it.

9:35 AM - “Performance is not all about absolute numbers.” Also, he’s offset the sound of a video of him speaking by 400ms to prove that the human brain is good at compensating for noticeable differences. #calmdownsatan

9:38 AM - Due to the Webber-Fechner law, decreasing load time by less than 20% is not noticeable… and noticeable is not the same as meaningful.

9:41 AM - There’s no point of postponing delivery of new features to customers unless you can break the 20% performance improvement mark.

9:46 AM - People overestimate the time they spend waiting for things by an average of 36%. This is why FIFA has a rough time instituting video replay, amirite?

9:48 AM - Talking about “Optimistic UI.” This, as I understand it, is the concept that the UI assumes success in tasks, and only gets in the way to throw error messages if one is actually encountered. This makes a site look like it’s responding more quickly than it actually is, and perception is reality. Also talking about “rel” attributes of links, Prefetch, pretender, etc.

9:54 AM - So what do we do when we’re waiting for pages to load? Give the users something to do! Example-- “placebo buttons” at crosswalks in large cities. Give the user the illusion of control.

9:58 AM - Let’s address the Academy Awards website for La La Land. Maybe we can prevent another fiasco! This page takes 16s+ to load. JavaScript is used to get all assets used anywhere on its page, including quite a few assets that are not needed (including most of the JavaScript). Can also ditch main CSS, 6 fonts, and most JavaScript. Rest moved to a JS that is deferred until after page load.

10:05 AM - Using tactics listed, we’re down to 2s perceived load time (3.1s overall)-- an 88% difference. Well dang.

10:13 - Q&A - Interesting that faster load times are not necessarily expected on financial websites (banks, brokerages, etc.). Offline expectations are brought online, and the expectations with banks are not with speed.

10:26 AM - Why are design systems awesome? They keep your website consistent. They give the team a shared vocabulary (more important than it might seem). They educate people about the web. They allow for faster feature development, and thus save money. They help future-proof the website and allow for newbies to use a design system as a learning tool.

10:31 AM - …but what are we getting into? Why are design systems not awesome? They’re a lot of work. Maintenance is hard (Fractal and Astrum are tools that help with this). They’re really confusing. You can’t really guarantee an ROI-- this only comes with how the team picks this up and uses it within an organization.

10:34 AM - Who needs one? Larger teams get more utility out of a design system. Need must be > effort required to maintain. Mature, stable brands do better with them, as they don’t require as frequent re-works. Mentality is also key-- it’s a big, demanding job. Design systems solve problems-- do you actually have one?

10:41 AM - Value of reusable components only increases as they’re used. Just be sure to use them for the right things, not for the sake of reusing them.

10:45 AM - How do you get buy-in from your team?
[ol]
[li]Find a common pain point. Talk to people and find out what people wish they could eliminate from their working life. Good time to reflect on if the effort to setup a design system is greater than the effort required to set one up.[/li]
[li]Set some goals. How will the design system benefit the team?[/li]
[li]Do a test project. Small projects show utility and practicality across internal boundaries[/li]
[li]Present. Show the benefits to the group as a whole. Not always necessary, especially at companies with less layers of management.[/li]
[/ol]

10:54 AM - Giving a name to the system is sometimes helpful. Also, bare in mind that “you don’t need to get the client’s blessing to follow your craft’s best practices.”

10:57 AM - Get as much support as possible – it’s really hard to do this alone in a company.

10:58 AM - Q&A - How do you stop this from feeling like it’s simply extra work? “Starting with a small project is a really good idea. A design system is daunting… starting alongside your current project can help.” Where to start? “I usually start with the styling because it’s easy… if you can show some quick wins early on, and it’s easy to get it adopted.” Does it make sense to create a design system while working on a huge project? “I prefer to start at the beginning… if it’s a really big project, it can work, but it’ll depend…” on things like budget, number of people on team (more is better). Can design systems be used by companies with multiple clients? “This is kind of the situation that I’m in. They can, and they can’t… I use pattern libraries as more of a deliverable… You can’t be the one to do the work for them, but you can help guide them.” Are we moving away from content-based component systems, and are there any tools you’d recommend? “If it’s just for designers, I’d really recommend trying to pattern up with a front-end developer and talk to them about what a best tool might be. I’m looking into Fractal and Astrum… I really like what these people are doing, making more kind of inspired style guides… I think it’s good for big companies and people who aren’t front end developers… to put some thought into how they look visually and how appealing they are… it just kinda depends on the audience.” As a designer, what can I do to help make a design system a reality? “If you’re a designer and you can’t code, you can still create these components in photoshop… you can do workshops to show all of the consistencies… if possible, try to team up with a front-end developer. It’ll make your life a lot easier.” How do you develop large stories with small components? “You have to get creative with stuff like that… I come from a print background and used to do a lot of advertising… you have to get pretty creative… you can make something memorable in the messaging… there’s an awful lot you can do [within your constraints.]”. Do you have any suggestions or best practices for a release schedule to update libraries? “I don’t have one, but I’ve seen people who do and I really like it…” Do you have any suggestions for what gets voted in/out of design libraries? “I think what can really help there is having someone who is a kind of lead of a design system… If you find you’re getting into these kind of arguments… it can be really good to just assign someone… You’re not really going to be getting anywhere if you spend too much time going back and forth.”

11:42 AM - 2 types of interactions – fleeting and static. All done with HTML and CSS. Fleeting: hover, focus, and active (can combine hover and focus). Static: checkbox hack (click to apply styling makes it static). Can be used for second radio button.

11:46 AM - Example email from Air B&B shown. Image gallery is being used-- created from using radio buttons to apply styling. Hamburger menus created using similar styling. Can submit anything in a form. “We’ve had quite a bit of success doing things in forms” such as reviews. Will go into support later.

11:49 AM - Check if it works in GMail (and Inbox) to see if it works. Then go onto Yahoo, AOL, and everything else. Email clients grouped into three buckets: static, limited, and interactive. Static is most common (images only). Limited is less common (image gallery). Interactive is the rarest, but most functional (image gallery with buttons and animations). Uses technique called “punch-card coding.” Webkit-based email clients are just like a modern browser, with some limitation. Is showing some practical coding on the board, will try to upload what I can in a few.

11:58 AM - talking about punch-card coding. It’s like a true-or-false value. It’s like binary, and “if you have binary, you can build anything.” “I can put all of these radio buttons together and string together logic based on their value. They all need to be siblings…”

12:07 PM - My iPad went down while trying to upload images. Whoops, won’t do that again. We’re now looking at a shopping cart that’s been coded to fit in an email, where you can load and change style/size options for items, and checkout directly from he email. Crazy.

12:08 PM - “Nothing works in Outlook. They still use Microsoft Word as their rendering engine.” Kicks balloon.

12:09 PM - “When you start adding it up it’s actually pretty good support.” Android has an interesting bug with forms where you can copy and paste data into a text input, but the keyboard won’t show. Weird. Gave an example of hacks to target different pieces in different browsers/clients. There are quite a few up there, and “literally hundreds” more.

12:14 PM - “This is the fun stuff.” Shows some examples of 3D CSS, including a rotating X-Wing fighter… in an email. Wow. And Wolfenstein 3D… in email.

12:19 PM - The enemies in the Wolfenstein game are Just radio buttons. Check out codepen.io/M_J_Robbins. This enemy “should look familiar.”

12:21 PM - And the kicker-- the whole damn presentation was in Apple Mail.

12:22 PM - Q&A - It is a lot of abuse of the label element. What about accessibility? “If you have a label, you can add a tab index 0, a roll index button, and… you can associate it to what you’re controlling…some of the things like Wolfenstein, I’m not sure how I could start accessibility with that…” Is there a route to standardization? “Hopefully at some point… the reason we use tables is Outlook… because they use Microsoft Word as their rendering agent. If they make a change… it might happen… Outlook.com supports regular code… with limits. If you send an email out, it has to work everywhere.” Are any of these in production? “We have a simplified version of the shopping cart coming very soon.” What about encryption for the shopping cart? “What you can do as well is that you can’t process the order unless you’re logged on.” Tools to make this easier? “That’s what we do at RebelMail – we create these tools. We have an API now…”. More about accesibility: “We are doing quite a bit of work to accessibility…” How does it progressively work? “The problem is with email, new things come out all the time but there’s no documentation… you’re just completely flying blind. But the email is pretty good. Everyboyd’s always sharing things.”

12:30 PM - Nadine Bremer is now up, talking bout data visualizations. This is what I really came here for.

12:36 PM - Talking color palettes. It’s interesting that she’s blowing by the first, primary law of web design: not using color alone to convey information. “A dark color often means a higher value.” Hiding information is a way to make the visual less daunting to the user.

12:39 PM - Another example project: building an org chart that wasn’t pyramid-based. Needed to be updated dynamically. Started with the concept of a network. Individual dots for people, circles for teams, nodes for colleagues.

12:45 PM - “Interactivity will never turn a bad visual form into a good one.”

2:43 - “Big 3” of Visual Style - typography, color, iconography. First look at the basics here-- did they get it right? Color is usually the most commonly addressed in different toolkits, but space is #2.

8:57 PM – Aaaand my iPad died. As there were some truly stellar talks to wrap up the day, I took some handwritten notes that I’ll try to get on here later tonight or tomorrow morning. For now, it’s an Anchor Steam at the Hard Rock at Fisherman’s Wharf.

Updated 4/5 @ 2:08 PM

Some notes from yesterday’s afternoon talks:

Nathan Curtis spent some time talking about systems, and their use in solving the easy problems of life. He has a design systems worksheet that he uses at the beginning of a project, which I found to be a pretty neat idea. Design systems should include what is shared across teams, and omit those pieces that are not. It’s always good to paint a picture of what your target state should be, especially when seeking approval or funding for a design systems project. There’s also importance to developing a roadmap. Having support from the top of an organization is essential. Style guides are living artifacts.

Marcy Sutton ran an excellent discussion of when to use links or buttons, from an accessibility perspective.

9:18 - As a result of the travel ban, we weren’t sure she was going to make it. Also, due to electronics ban, she was unable to bring her laptop.

9:19 - Starting with article layout. DOM issues were a problem-- needed to be in logical order and not changed to accommodate visual layout. Also could not interrupt content DOM w/ extra DIVs.

9:22 - “At some point, I gave up.” It’s good to know that this doesn’t happen to just me. Timing of transitions is thrown off.

9:24 - overflow: hidden; solves a lot of floating problems. It sorta worked for her. “Every time design needs to be changed because CSS is shit, a kitten dies somewhere.” - Lea Verou.

9:25 - Hacky solution that worked for her was using positive and negative margins, and a pseudo-class. It’s a bit much to go into here, but it was very hacky. “I hated it… I wanted to convince [Smashing] not to use it… [after talking with them] I moved over to the dark side.”

9:36 - For Smashing, text needed to selectable, searchable, and acceptable as illustrations replaced actual text. Inline SVGs were insanely long here. Inlined it after all, and added title and text tags in svg tag.

9:43 - This talk is very code-heavy. Great for developers, less so for designers. I’ll do what I can to keep up, but I’m sure I’ll miss a bit.

9:47 - Accomplished nesting links by using an object with an invalid type.

10:00 - Her time is up, but there’s a lot more that she didn’t cover. Semantics for accessibility. Contextual text for icons. Views & announcements for content changes. ARIA Live Regions. Content Shortcuts. Don’t treat accessibility as an afterthought. Full presentation and code at sarasoueidan.com/slides/smashing-magazine

10:15 - Starting off with a missive from the Hitchhiker’s Guide to the Galaxy. Deep Thought, giving the Answer to the Ultimate Question of Life, the Universe, and Everything. It’s 42! Way to cater to us nerds. I doubt there’s a person here who hasn’t read THHGTTG. It’s crazy to think that the series is 39 years old.

10:19 - Deep Thought story meant to illustrate essential truth of human conditions. “We humans have the terrible misfortune to be born self-aware an enormous and uncaring universe… we’ve separated ourselves from all the creatures on the planet by our capacity for reason… That’s great and all… but we humans are not really as rational in our decision making as we’d like to think… We have to make choices, and choices are scary… Because we’re so smart, we made computers… people began to think ‘maybe there’s a mathematical solution to all our problems’… but no matter how smart our machines get, they cannot solve all of our problems.”

10:22 - “Our measurements and how we manage them are just as subjective as anything else. People, on the whole are terrible at math-- terrible at numbers.”

10:24 - DON’T PANIC.

10:28 - Talking about an example of African villages with iron deficiencies and how to solve the problem. Solution? Use a chunk o’ iron when cooking food. First “health rocks” and an explanation were handed out, but rejected as weird. Solution? A fish-shaped hunk o’ iron to add to pot when cooking food. It became a “lucky fish” and the concept spread well between households/villages. A good story trumps rational analysis.

10:31 - This is Big Data. Shows pictures of large Star Trek action figures of Data.

10:33 - is big data really a good thing-- that so much of our information is trackable? “Jeff Bezos owns the Washington Post, and makes a surveillance device [the Amazon Echo].”

10:35 - “We put up with it because we love the convenience.”

10:36 - “We are not computers… We fit the data into our stories… If we see information that’s presented clearly… or your in a good mood… you’re more likely to believe it.”

10:37 - “Thinking is hard.” “We still read the nutritional information not he back of a bag of Doritos-- then eat the whole thing anyway.”

10:38 - 26% of people believe the sun travels around the Earth. Wow. “Our access to data has evolved, our brains [and cognitive limitations] have not.”

10:39 - “We should all locate a metacognition buddy to keep us honest.”

10:40 - Only two types of data: data that can be measured (quantitative) and data that cannot (qualitative). The numbers are meaningless without knowing assumptions. Each has own advantages and drawbacks. Qualitative depends a lot on people doing the work. The Hawthorne Effect takes center stage.

10:44 - To analyze qualitative research, you need good critical thinking skills. To analyze quantitative research, you need to be good at statistics. You can’t just review the data with an untrained eye.

10:45 - “New data doesn’t change minds” when underlying biases exist.

10:46 - “The numbers won’t tell you what they mean. They won’t tell you what’s better.”

10:47 - “The fundamental question of design… is a matter of getting from what is to what you think ought to be.”

10:48 - “Surveys are the most dangerous research tools.” Easy feels true. “If information feels true, we’ll tend to believe it, even if the information is terrible.” “If you write bad survey questions, you’ll get bad data at scale.”

10:51 - “A survey is not a substitute for another kind of research.” “Customer satisfaction is a lie. It’s a really widely-used metric, but it’s a useless abstraction.”

10:52 - Never ask people what they like or don’t like. Never ask people to remember (we’re terrible at remembering things). Don’t ask people to predict.

10:54 - the most measurable data is not necessarily the most valuable. "You nee to move your focus from ‘Can I measure this?’ TO ‘Can I actually use this?’

10:56 - Q&A - What metrics do you use to argue the value of usability? “For usability?.. That all starts from what you need the person to do from a business perspective… Completing a task quickly is often really good, and that’s generally what’s optimized for. That’s the mistake people in design… You need to think ‘what matters to our business?’… really think about… ‘how is this valuable’ [in somebody’s life]”. Should we slow down users and make them think? “Do we have time for me to talk about delight? … Delight and empathy are two words I really avoid using. You should talk about ‘What value am I giving to a person, and is it real?’ … You only slow them down if it helps them to achieve their goal… give them information to help them make a better choice. It’s not about delight, it’s about making sure… that they fully understand [their actions] and getting informed consent… Think about a doorknob. When was the last time you were delighted by a doorknob? … Interface elements are like that. The function should be clear… but nobody is going to be delighted by your doorknob.” Should websites have their own striking personalities? "I think things need to be distinguishable to the extent it’s important to the experience. People already have a hard time remembering things, and if you want to be rememberable, you need to distinguish yourself… The best thing you can use is language… That’s the place to differentiate yourself… When you get to the nouns and verbs of what you do-- what only you can do-- that’s the language that’s differentiating… It also maybe doesn’t matter if things looks the same or not… Who cares what the look and feel is like? That’s a really serious question to ask. Do I want this to look good on Dribble, or do I want to it [to be usable]’.

11:32 - Story of Michael the Paramedic, learning Spanish on an app between calls, in order to better serve his community.

11:36 - “When we started, there was no proper mobile strategy, no mobile products.” Talking about invoking Rosetta’s famed “child-like” learning. Wanted to get there in a mobile app. Talking about journey to get the mobile app up up-and-running. Also worth noting-- about 70% of the room know about and/or have participated in a design sprint.

11:39 - Step 1: Unbox and learn as much as possible. Engineers, PMs, designers from the agency side. “Half of success is bringing the same people in the room.” Stakeholder interviews, define endgoal, share known aspects of projects. Day 1 is great if we’re able to define success metrics.

11:42 - Quoting the great Daniel Burka (incidentally my very first follow on Twitter) - “Design is the scientific method of business, if done right.”

11:46 - Product testing. 5 Users giving 85% of feedback is good for a single type of user. Make sure to use 5 users for each group of target customers.

11:47 - Apologies, I’m working through slow WiFi.

11:48 - Combine the following to move forward: What we heard from the users, what we think is the best, since we’re the experts, and what’s feasible give the timeline and budget.

11:50 - Talking about getting to the first release. What happens between design and v1.0? UX design is done first, and then UI work. Research, Info Architecture, journey design, wireframe, interaction design, and user testing were the steps (in order) used to create the UX. For UI, mood-boarding, creative direction, interface design, prototyping, localization and accessibility, and specs & developer handoff for the UI (in order). 4 months of intensive design, and 4 months of engineering.

11:51 - There was a total of about 100,000 screens that could be created. With so many permutations of possible, the decision was made to keep the display landscape-only. Considerations that followed: 1. users use two hands vs. one. 2. Swiping vs. scrolling 3. One input vs longer forms 4. Pull out menu vs tab menu.

11:53 - Had to start dev in parallel with design due to time constraints.

11:54 - How do you learn a language without ever seeing your own? This is the concept of immersion. Used basic knowledge of words to create and introduce game mechanics into the app.

11:55 - Zeppelin introduced in early 2015. “It’s our single source of truth for design” on this project. InVision also mentioned as similar.

11:56 - Chatting w/ design team at Apple and at Android Play to give feedback about how to give best experience for users. Challenged the team in the design phase.

12:01 PM - What happened at 3.1? This was worse than the previous flash version. The loud minority was really angry about some things. We didn’t ask people who were happy about our app for feedback. Once feedback was requested, App Store rating went up…

12:03 PM - Q3 and Q4 last year-- revenue was up 82%. “It’s one of those things I’m really proud of.” “Designers that care about the business results, are the ones what will be most successful.” - John Maeda (@johnmaeda)

Honest and timely communication. “I’ve been living on Slack for the last three years. My main design tool is Slack.”

Care about what you’re building.

12:08 PM - Q&A - How does it run over time? “In every app, you’ll see engagement going down after a couple of days… That’s a little bit related to the hype that we had… The question is, ‘Do we need an app for that?’ Given the complexity… it made sense for us to build an app for that… For a lot of other apps, it really doesn’t make sense.” Is delay time an issue? “It’s something that we plan, and every 2 weeks the priorities are fixing the biggest crashes and bugs… design comments maybe get pushed to another version… reading through App Store reviews, we’ve seen how excited they are that Rosetta is paying attention…” Do you see a delay building for Android and iOS? “For a lot of new projects, we’ve been using React Native as well, which has been working incredibly well as a cross-platform solution…” Do you still do any web content as well? “My team was just focused on mobile. There is still a solution on the web, but it’s still in Flash…” What about Progressive Web Apps? “Maybe there’s a workshop tomorrow?” Was the subscription model of Rosetta Stone a win? “We were coming in in a really good state with Rosetta Stone as a brand…” Does the design sprint happen before the production spring? How do you align the engineering and design sprints? “For us, the sprint… is both engineering and design. The design sprint I mentioned is just something we use when we tackle big problems, like a new version… The default cadence after that is having 2-week springs… with everyone on the same team.”

12:16 - Jessica Svendsen is now on-stage. Jessica currently works in design at DropBox.

12:17 - I AM A GRAPHIC DESIGNER. "We live in age of distraction… I wanted to share my own work " that counters expectations.

12:18 - “Design has become the central metaphor of our time.” - Michael Rock. While designers think they’re irrelevant, everyone else thinks they’re very relevant. Design is now seen as the instigation of the process.

12:26 - Apologies, slow WiFi has struck again. I missed a bit in my battle, but the gist of the beginning of the talk is the value of being a design generalist and the danger of sameness in design.

12:27 - Jessica began career as a typesetter. She set type letter by letter, and began to enjoy the interaction between design and typography.

12:29 - Modern authors have introduced visual disrupters, and that has carried over to her design style.

12:30 - Story of the survey that defined Baskerville as the most trustworthy typeface.

12:30 - Worked at Wyndham Campbell Prizes, creating prize identity. Brackets used to group items together typographically, and requirements of prize is that candidates come together for a literary conference. Also used for competition connotation. Used different brackets from different typefaces. Contained information and used as display and decorative patterns.

12:32 - It’s clear that Michael Rock was very influential in her career. He is very quotable, and quite clever, so that’s absolutely understandable.

12:33 - Charlie Rose identity was a new project for Jessica. Identity was bound to be a wordmark, as his brand is his name. Fit in square perfectly. Use of squares and circles to abstractly represent the table and stage. Worked well with PBS’s circle-designed logo.

12:36 - Jessica is discussing the typeface used for the wordmark. No lower cases, decorative quotation marks, strong connotation to print journalism. Quotation marks important. Strong and bold enough for identity of the show. Works well for grids, which lent itself to a number of different advertising mediums.

12:39 - Onto what pushes us forward. Is Bootstrap pushing us forward?

12:40 - “Moments of friction on the web allow for expression… are they ugly or beautiful, or does it even matter?” Talking about working with physical objects rather than on a computer. Example given is using a laser cutter to create perfectly-cut letters that could be layered to create interesting depth.

12:42 - It’s clear that she’s put in a lot of work to bring typography offline. An interesting concept, and from a design perspective very unique. From a practical perspective, my biggest takeaway is the need for uniqueness (and a desire for it as well) in my freelance projects.

12:45 - Writing about this presentation doesn’t do it justice. Jessica has done so much great, visual work that there’s no way I can capture it. I’m going to look for a link to the presentation to post. This is simply something that I’m ill-equipped to translate into a blow-by-blow account simply due to the very visual nature of her work.

12:46 - Classical vs. iterative design. “Classical design is fast disappearing, if it ever really existed, and the iterative nature so emblematic in tech has worked its way into everything we do.” Not Jessica’s words, but I couldn’t catch the quotee.

12:47 - In my opinion, some of the designs are sublime, but fall a bit in their legibility-- some irrevocably so. This works well for her posters, but I’d be burned at the stake for trying some of these approaches online.

12:50 - Guiding principle for testing mediocrity - “When you make something no one hates, no one loves it.”

12:51 - Q&A - What do you do to keep up on trends? “I try to avoid creating mood-boards… I try to… look to the past, to what designers have historically done before you, and then projecting to the future… What happens a lot in design is we’re looking around in our peripheral… it’s a lot more important to dig our your design books and reference history.” Is generic always bad? “I don’t think it’s always bad, but I think it’s a spectrum… I would hope the design work we create, especially online, navigate the spectrum [between art and usability] a bit… there’s a lot more potential if you design something unique…”