I recently recapped my experience on the first day of Smashing Conference in Toronto, and here’s a summary of Day 2.
Similar to Day 1, the line-up of the speakers and topics were well thought out. The presentations covered trending topics in front-end development, such as service workers, performance, CSS grid, color systems, and component-based development and design. One of the highlights of Day 2 was the mystery speaker, who frankly, blew me away by his craftsmanship.
Mystery Speaker: Seb Lester — Peace, Hellfire, and Outer Space
In this talk, Seb Lester shared his love for design, from his early BMX riding days to his unceasing passion for type design, calligraphy, and craftsmanship. An expert type designer, master calligrapher, and a passionate artist, some of his work includes the Intel logo, NASA’s SWOT project logo, and various decorative designs for Apple’s retail stores. Funny, creative, artsy, and a champion designer, I was simply mesmerized by his work and presentation.
Craftsmanship is a cornerstone of great art and design.
- Failure is the key to success. Every mistake teaches us something.
- Know when to stop and move on. While experimenting with 3D illustration, Seb realized it wasn’t for him and continued with 2D.
- Experimenting with ideas away from corporate work gave way to more creative, expressive designs.
- He connected with influential people from organizations such as NASA and Apple, and it wasn’t luck. He had done the groundwork, put in the hours to master his craft— he was prepared for these opportunities.
Book: The Graphic Language of Neville Brody
Speaker 2: Jules Forrest — For the Love of the Grid
In this forty minutes sessions, using CSS grid, Jules Forrest live coded and transformed a print-based restaurant menu into a responsive webpage. As a designer, with a keen interest in web development, she started experimenting with CSS grid by converting print-based designs into webpages. Codepen was and is her go-to tool for experiments.
Creativity isn’t necessarily a good thing. Keep common UI patterns consistent to help your users easily navigate.
- CSS Grid can be used for both big page layouts & smaller elements.
- CSS grids allow you to have overlaps rather than Flexbox.
- By default, CSS grid will flow elements vertically, while Flexbox will flow them horizontally.
grid-column:1/-1;will span all the from left to right without having to know how many columns there are.
grid-row:1/-1;will span all rows.
- Rachel Andrews & Jen Simmons — folks to follow for gird inspiration
https://kellianderson.com/blog/ — created Russ & Daughters menu
Speaker 3: Phil Nash —Diving into Service Workers, Live
Phil Nash demonstrated how service worker strategy can be applied to make websites work offline. As he noted, “the best thing about service worker is that we get control over the network and user experience. With that control — and through test-driven development (TDD) and right caching methods — developers can create high performant websites that provide better user experience”.
Never ask for push notification permissions on page load. Give user context for what they are signing up for.
- Make a test fail before you fix it (TDD — test-driven development)
- Service workers are all
async, make them unobtrusive and run in the background
- Wait until the page is loaded before registering a service worker
Service Worker Mock — https://www.npmjs.com/package/service-worker-mock
Speaker 4: Dan Rose — Seeing the Pages for the Components
How do we use components collectively and cohesively so that it connects and flows well? Dan Rose shared concepts and techniques to identify common symptoms of non-cohesive design and demonstrated how component connectivity could be implemented into a design system. He shared tips and tricks to balance and prioritize consistency over the cohesive design to create a steady visual flow and relationship among all components.
- Building pages with components could result in content that lack strong visual relationships — just stacked components. For example, contrast Target’s simple homepage to Stripe’s where elements overlap and lead the users down the page.
- Tools such as PhotoShop can help explore phases of design. Take a screenshot of a page and open it in Photoshop to play around.
— You can use Page Layers to convert a screenshot of a webpage into PSD layers.
- Work hand in hand with the content team; content needs to drive it.
- Six simple tricks to design better flow:
— Share a background to connect two components.
— Use angled edges and contrast the background with colors, images, or other design elements.
— Stitch two zones/component together using shapes.
— Use overlapping design to make the transition more engaging from the first zone to the second.
— Use alteration to make things clear that they are not only making a page but rather as part of a collection. Balance it out and make it concise.
— Use the shadow effect to provide a softer separation between content, especially when using cutout boxes to overlap content between sections
Speaker 5: Diana Mounter — The Secret Lives of Color Systems
Color is one of the most critical aspects of any design work, including web design and development. Changing a white background to black, for example —
background-color:#ffffff; => background-color:#000000— may seem as trivial as updating the hex code, in reality, it is a lot of work.
In this session, Diana Mounter demonstrated the work behind adding a new feature to offer users the ability to change GitHub’s color theme from white to dark mode. She used a Gatsby app and a sample repository of the GitHub, to demonstrate the process, techniques, and challenges of updating the color scheme of an enterprise-level web application.
People have opinions about colors. Changing color systems is a lot of work!
- Developed and used a comprehensive style guide for building the interface with GitHub’s design system — https://primer.style/components.
- Avoid using 100% white/black colors, using slightly lighter/darker variations to make it feel more natural.
- When trying to changing the colors, she realized that some of the hardcoded color values in the component made it difficult for theming.
- Names should be purposeful, functional, meaningful rather than descriptive of the color.
- Google Extension: Spectrum — can test different types of color blindness for color combinations on a site
- Google Extension: Accessibility Insights for Web
Speaker 6: Scott Jehl — Move Fast & Don’t Break Things
A popular term in all the presentations this year was “performance.” It is one of the many reasons organizations migrate their website from content management systems (CMS) such as Wordpress to more resilient tools such as static site generators and Netlify. However, web performance is still a common challenge, especially with requirements for consistent design across a plethora of devices and browsers, with the added predicament of varied network speed.
In this forty minutes session, Scott Jehl talked about existing issues in web performance and shared strategies and techniques — such as progressive enhancement — that he implemented for his clients to overcome this common challenge. Progressive enhancement is an approach to web development that helps to build a high-performance website regardless of network speed and device type.
It’s easier to make a website fast than to keep a website fast.
- Trying to make a website work & look the same across so many different devices isn’t the right approach — instead, we need to cater to the diversity.
- We can’t assume that everybody is using the latest and greatest smartphone.
- To improve rendering user tools such as server
pushand the new
http2protocol, or even inline CSS.
- Inline CSS is useful if you have a large CSS file. Identify and inline the CSS necessary to render “above the fold”.
- As network speed increases, performance shift from network to devices. This can be challenging if devices are not the latest or contain the latest tech.
Day 2 ended with a Photo Walk, which we missed, but here is a photograph of the “Smashing Family”. Smashing Family, thank you for a great event!