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:22 AM - Up next is Laura Elizabeth, talking about pattern libraries and design systems. Focus on getting people to actually use them.
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:11 AM - morning break.
11:41 AM - Mark Robbins is next up, discussing CSS and interactive email.
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:55 AM - Giving nested labels examples. It’s like having 3 galleries inside each other. “The code gets pretty crazy.”
Yes, Mark. Yes it does.
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:34 PM - Cat pictures. This woman knows how to capture our attention. Uses D3 for data visualization.
12:35 PM - Showing a data visualization related to fraud prevention.
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.”
12:48 PM - She really likes Voronoi Grids.
12:52 PM - Taking us through an example of the popularity of female names and visualizing that data. Here we have the top 100 names each year, since 1880.
Also talking about main/mini charts.
12:58 PM - Finishing up with two projects. Both are based on something called a Chord Diagram, but only with a left-to-right flow.
1:08 PM - “Everything is unique… and I always start from scratch.”
1:09 PM - “Olympic Feathers” is a project that shows information about all 5,000 Olympic Gold winners. Check out her website: VisualCinnamon.com.
2:30 PM - Nathan Curtis - Beyond the toolkit: Spreading a System Across People & Products. “I love to have a cupcake, sit, and read a book” at the Palace of Fine Arts.
2:41 - Google’s Material Design specs “made me a better designer.” If you haven’t yet, read it.
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.