Showing posts about SmashingConf

SmashingConf SF 2022 Online

June 22, 2022

This past week, thanks to my company, I had the pleasure of attending the incredible SmashingConf online. I’ve watched many other front-end talks before (like Hover, a conference dedicated solely to CSS), but this was my first full-on, live conference. I thoroughly enjoyed the two days I spent tuning in from the comfort of my home.

What I loved about SmashingConf was the diverse range of topics and presenters. There was much to consider, from talks on UX writing and teamwork to design systems and CSS. The cross-disciplinary nature of the conf helped me understand more about adjacent fields beyond my scope of responsibilities. I got to hear from people who are the best at what they do in the web industry—authors, creative directors, researchers, and so much more. It was an exceptional line-up!

I have many favorite highlights from the talks—it’s hard to pick just one!

Accessibility

Kate Kalcevich’s talk on Scaling Up Accessibility provided informative takeaways for people wanting to integrate accessibility into their organizations’ products. This topic felt highly relevant as my company is working toward accessibility goals. Kate emphasized the importance of considering accessibility in every phase and working with people who have disabilities. She shared real stories and tips, like having an a11y bug bashing day and benchmarking where you are now.

According to Kate, we should inspire people with disabilities by creating inclusive products and experiences. Accessibility can also improve the broader UX, like subtitles. Listening to Kate’s talk was refreshing and provided a valuable, needed perspective.

CSS

Styling the Intrinsic Web, Miriam’s talk, covered many new and evolving CSS features and addressed how they solve significant challenges we face today. I’ve followed these recent updates, including Container Queries, Layers, and Scope. I couldn’t be more excited for the future of CSS. Tools like Cascade Layers, which browsers are actively implementing, will help us take control of our codebases. We can finally avoid things like !important statements all over our stylesheets.

Design

Ending day 1, talks from Elliot Jay Stocks and Cassie Evans highlighted some excellent design from both the typography and web animation worlds. Elliot’s talk inspired me to think about taking on side projects that enable a lifestyle. He noted we should judge success by our enjoyment, not just financial metrics. Seeing his work spanning web design, print magazines, and more was inspiring!

Cassie’s talk showed me some innovative techniques for UI animations within websites. It’s an area I haven’t played around with much but would love to explore.

Life

On day 2, Addy Osmani, engineering manager at Google, started the day as SmashingConf’s mystery speaker. He provided a welcomed break from the creative and technical talks by focusing on life lessons and ideas on introspection. I loved this high-level talk, which featured Cameos from many celebrities on their important life lessons.

User Interfaces

Later on, Vitaly’s talk, Designing for Complex UIs, was terrific. He dived deep into strategies for simplifying user interfaces and solving complex design problems. Seeing real examples from around the web of patterns such as carousels, navigation, breadcrumbs, and more was interesting. There is a lot to learn from internationally as well.

UX Writing

I thought Sophie Tahran’s presentation on Designing with Words was phenomenal. Sophie leads UX writing for The New Yorker and wowed us all with her talk on how to think strategically about the words in our designs. Many designers today still use lorem ipsum placeholder copy, but seeing Sophie’s process and how it integrates writing up front was groundbreaking. I learned about opportunities to introduce UX writing early on and thoughtful tips like translating jargon for the user and helping them fix problems when errors occur. Although I don’t work with UX writers directly, this presentation helped provide insight into the increasing prevalence of content design.


Besides the fantastic talks I could go on and on about, I appreciated how SmashingConf helped online attendees feel included. There were backstage interviews with speakers, a lively online chat, a fantastic DJ during breaks, and opportunities to take notes and participate. A couple of my questions got asked live to presenters after their talks, which was a personal high for me!

I highly recommend SmashingConf and can’t wait to attend more of these in the coming years (hopefully in-person too!) The web community is a great, friendly bunch of folks, and I’m left feeling inspired and eager to take on what’s next. Thanks to everyone at Smashing Magazine for putting on such a quality conference.

Eight takeaways from SmashingConf’s Resilient Web Systems workshop

May 24, 2020

These past few weeks, I took part in Smashing Magazine’s first-ever online workshops. I’ve been a Smashing fan for a while, and thanks to my agency, I attended Resilient Web Systems with CSS & Sass led by Miriam Suzanne.

Miriam is a core contributor/expert on tools I use daily (Sass and W3C CSS working group). The workshop was a deep-dive into CSS and covered advanced topics such as core fundamentals of CSS, modern and intrinsic web layout, CSS architecture, maintainable design systems, new tools in CSS and Sass, and more.

The experience was truly fantastic and outdid my learning expectations. Attendees were invited to chat and ask questions, slides were well-presented, and the environment was refreshingly friendly and intimate given the virtual format. I found myself many times during the workshop amazed at how useful and applicable the information was. For my professional goals this year, both the technical details and takeaways from this workshop will undoubtedly come in handy.

I want to share just a selection of takeaways from Miriam’s workshop. I took many pages of detailed notes, but these high-level concepts will surely stick with me. I’m also looking forward to SmashingConf Live in a few weeks!

CSS is about context and relationships

On the first day of the workshop, Miriam covered the history and theory behind CSS as well as core concepts like the cascade. Since I only briefly learned this information in school and on the job, it was fascinating to hear in depth.

CSS was designed around accessibility and user control, which makes it radically different from other programming languages or design tools. It relies on meaning and intent (semantic markup and purposeful declarations) and the language is contextual, adapting to change.

Designing for the browser takes a different approach

Pixel-perfect web design isn’t attainable, nor is it worth aiming for. Many times during the workshop, this idea was brought up, and it’s important for everyone who works with the web to understand.

Because the web is a flexible, resilient medium compared to print, the best we can do as programmers is describe intent—providing hints & suggestions for things like sizes, flow, typography, and color. The browser will interpret our intent across different canvases, for unknown content.

This unpredictability is a fact—it’s the reality and power of the web. When we let go of trying to make the web experience match Photoshop comps perfectly, we leverage the medium in exciting ways.

And instead of limiting ourselves with the 12-column grid system which is everywhere these days, we can be inspired by graphic design history, which has always used interesting and different types of grids.

We need to redefine what browser support means

Browser support is a common thing we face when developing websites, with feature support always in flux. The current mindset in our industry of supporting a certain percentage or set of browsers is frustrating—and it just doesn’t work.

Instead of re-writing code for each instance, progressive enhancement should be used to build from basic to advanced implementations. If the content is there in an accessible manner, it’s good. We can support everyone possible by supporting more browsers with lower standards.

Moving forward, we’ll be able to use features as they are available without concern for legacy browsers like IE 11. This idea of evergreen browsers exists today, and through practices like progressive enhancement, we can take advantage of it.

Cascade-aligned programming makes work easier

Working with built-in tools like the cascade in CSS, we can stop programming against the grain and begin working in harmony with our platform. Whether we’re using new techniques like custom properties or managing design systems, we should consider fundamental CSS principles along every step of the process.

Automation helps us focus on the more important details

The best tools are ones that encourage you to use best practices and consistency, and get out of your way to focus on what matters. Automating parts of our system or using integrated documentation is smart in this respect. And when we have time to do the important work, that’s always a great situation to be in!

Tools and processes are people-dependent

It’s important to find or build tools that fit to you, not just what’s working for someone else. We’re all dealing with similar problems, but we all have unique constraints.

And if design systems are not communicated, they don’t exist. At the end of the day, it’s about communication between people & teams.

Continuous integration: accurate and maintained over complete

Design systems can be complex endeavors, sometimes spanning huge teams, applications, and platforms. By starting small with what we know and what has the most reach, we can aim for accurate and maintained over complete. Getting one piece right is the important step.

Continuous integration means it’s fine to go back and adapt—it’s an iterative process and it will take time to figure it out.

Start with meaningful and structured code, readable by humans & machines

Clear semantics is the basis for everything on the web. This helps browsers, users, and other developers because it makes code intuitive to read, understand, and maintain. For users, well-written code forms accessibility, which is a human right.