Leveling up TELUS Digital’s SVG Skills
I ran my very popular SVG workshop for the team of designers and developers leading the digital evolution at TELUS.
Back in June (2018), I joined the TELUS Digital team at their headquarters in Toronto to train their designers and developers on the best ways to use and make use of SVG in their everyday workflow, and to optimize the SVGs used on their current site for best performance possible. It was a very productive day!
When it comes to SVG, communication is very important between designers and developers. Because of the nature of SVG, it falls into the territory of both designers and developers, and what designers create will be used and embedded by the developers, so it’s critical, in my opinion, for both teams to be on the same page when it comes to working with SVG.
Telus Digital’s Objectives and Goals
I wanted to make sure the workshop is as beneficial to the Telus digital team as possible, so I decided to customize it such that instead of using generic icons and exercises for certain sections of the workhsop, I used their own icons and solved some problems they might be having on their current Web site, as well as see where improvements can be made.
So, as any curious front-ender, I fired up Chrome dev tools and started inspecting the icons on their Web site.
I noticed that they are using icon fonts for the majority of the icons on the site. That was the first task: make the switch away from icon fonts to SVG icons.
I also noticed that some of the icons were embedded in a different way — as content images using an `` tag, where an inline SVG would work better. More specifically, there were critical functional icons — icons that indicated action and that were not accompanied by real text, and the `alt` text for those images described what the icons are, rather than describe the functionality of the icons. There was a need for improvement there, and SVG would be a perfect alternative there.
In addition to the icons, the logo was also embedded as an SVG, of course, but it wasn’t as optimized as it could be. There were also multiple requests for different versions of the logo, that could easily be avoided by using inline SVG, defining the logo as a template and then displaying it anywhere needed on the page, without any extra requests, and using CSS to style and theme the logo depending on its context on the page.
I also got access to the Telus Design System (TDS) and instantly checked the iconography section out. I wanted to get an overview of what strategy and instructions they have associated with them.
The most important part of that section for me was the roadmap list. Two of the goals on the roadmap were:
- Deprecate and retire the icon font in favor of SVG-based icons
- Provide more guidance on use of colour with iconography
Perfect! My workshop is going to help them do exactly that, and more. Over the course of 8 hours, we covered everything from SVG design and creation in graphics editors, to embedding and fallback techniques, pros and cons, performance, spriting (3 different techniques), styling and animation, and more. We even had some spare time at the end of the workshop to cover some special animation effects, as well as get a good overview of SVG filters and what’s possible in that area of SVG.
It was a very intense, and productive day. As a couple of attendees described it: it was like a high-speed SVG marathon. And as always, I loved the "ah-ha!" moments some attendees got during the workshop, as well as the fun team spirit that was there throughout the whole day, especially between the design and dev teams. Mission accomplished.
If your company could benefit from this workshop or one of my other front-end workshops, please get in touch, and let’s make it happen. The workshop is perfect for teams — large or small — of designers and UI engineers and anyone who needs to work with or uses SVG in their work.
Love from the Telus Digital team
Our entire team recently did a hands-on SVG workshop with Sara and it was amazing! She is incredibly passionate about her craft, which really comes out in her teaching. She is very patient and tries to make sure everyone fully understands the concepts. If you are looking for a fun, energetic, and very knowledgable person to work with your team, I would highly recommend Sara!—Wasim Hossain - Senior Architect - TELUS Digital
Sara's ability to design & deliver workshop training material for both designers and developers is highly unique and most valuable to businesses seeking digital transformation and collaboration amongst their teams. We we're lucky and privileged to have Sara train ours. She left our designers and developers with a better appreciation of each other's craft and a better interlock for future projects.—Ahmad Nassri — Principal Architect, TELUS Digital
Sara is an incredibly insightful teacher and developer. Her passion for educating is evident in the inclusive nature of her workshops. Workshop content, while technical in nature, is relevant to both Designers & Developers. That’s key, keeping both entertained over the course of the workshop leads to greater knowledge retention and better collaboration. Sara’s willingness to cater some of the curriculum to the audience’s interests also aids in aligning daily work relevance to her teachings.—Andrew Douglas — Design Practice & Community Manager, TELUS Digital
I had the privilege of attending Sara’s workshop on SVGs held at TELUS. I really enjoyed her presentation style and she exudes so much knowledge on a single topic. Being a designer, I appreciated that she was able to cater the content to both developers and designers. We will definitely apply what we've learned on SVGs to the icons on our design system, to optimize them for performance.—Lucy List — UX/Design Strategist, TELUS Digital