- I'll start with one.
So Brett, do you kind of incorporate these into your work quite a bit or do you still find there's a bit things that are harder, either to sell or to get sufficiently wired support in browsers and so on? How does that work? - I think, like, the support has been (mumbles) SVG stuff in, you're doing In-Line like I'm doing there. The browser support's there to kind of go all in. Like, I use them now in every project without worrying too much about IE, just keeping in mind that the animations won't happen on IE.
But I kind of just plan for that anyway with my HTML stuff, because I think IE 10 and below don't support animations in CSS.
So if you're not using it for-- if you're just using it to add style to things or just to create those little elements which are little icons and stuff, I think they're great.
And I use them all the time.
So I write little icons now for most of my projects, rather than resorting to, like I used to go back to Illustrator or Sketch and generate a little icon and then export it and kind of get stuck in this cycle of creating every element that I needed on my website, and like, I'm switching between designer and developer to do that, whereas-- - So when you say you write them, do you literally you don't use, you don't export them out of any sort of code-- - No, (mumbles) - SVG, you just kind of mark it straight up in the mark up. - Yeah, like some of the SVG elements like the line and the rectangle and circle are remarkably easy to understand the syntax for.
You just give it how big you want it and which X and Y coordinates you want it to appear on, what colour you want it to be, and then-- so, like, in 30 seconds you can have a circle as opposed to going and drawing a circle in Sketch and exporting that. - Now because you're In-Lining them, I guess, what, in terms of your build process, or does it have an impact on that? Because obviously, if you're using a cross in moldable places in the same document, or in terms of components, how do you make that work? - Yeah, so, like, I used to use SVG use tags to reference a sprite file of SVG.
That wouldn't let you do the CSS animation stuff which we see here.
And that would be for performance reasons, because you're reusing those icons a lot and you don't want to load individual pages and such.
But with HTTP/2, if you use that, those kind of benefits of spriting are kind of gone.
And so, there's no real reason for you not to do In-Line SVG like that.
So I'm kind of just jumping the gun and already starting to do that, because of the benefits of being able to style with CSS.
- Right.
Just before we break, anybody got a question? Yes, over here? Sorry, (mumbles).
Oh, hang on.
There's one over here, and then we'll get to you. (laughs) - [Male] Hello.
I just wanted to know how it is you work with a UI designer.
Do you work in parallel and you come up with ideas together, or do you take the designs and then come up with your own animations afterwards? - So I have a, work as a designer, essentially. We're a pretty small agency so we don't have a front end development team, we just have kind of designers who do HTML and CSS, and then we have backend developers. So usually, it's kind of a process where most of our websites are for clients and we're doing small stuff. And we don't usually get time to spec out animations and that kind of thing.
So usually, I just kind of incorporate it into my process as a designer, so I kind of just, I take the initiative and I'll decide, "Hey, this could be jazzed up," like maybe an animation which fits the brand or the message I'm trying to communicate.
So I just kind of make the judgement calls. But in a bigger team, I'm guessing you would have to kind of collaborate with the developer and work out where they're appropriate and that kind of thing, especially on product work.
(laughs) - All right, and there was one more over here, (mumbles). - [Female] (mumbles) really similar.
- Similar question from Panema? All right, okay.
(laughs) Do you want-- you don't want to ask? You don't want to-- All right, come on.
- [Female] Yeah, it was actually more just your process of, it was a similar question for sure, (laughing) how you might communicate to another designer or an animator how you'd actually, that (mumbles) menu, for example, how you go psh, psh, you know, like that.
(laughs) - Yeah, so with that (mumbles) menu, I go-- the initial kind of mock up I showed you where it's like I'm describing where the animation, the path, the animation will take, so that those kind of mock ups might be useful if you were working for developer and you were a designer, you could create those mock ups and kind of indicate, "Hey, I'd like this through this line "to travel around here," and that could be a good way of showing them what they need to accomplish with SVG. But it's kind of a technology which, like, I like it because it's a bit like having Photoshop in the browser, like it kind of gives you this graphic editing tool which you can use as a developer.
Like, I can kind of create those kind of things without having to resort to just gif-ing it or Canvas or these complicated technologies.
- All right.
Well with that, it's time for a little break. Let's firstly thank our presenters for this afternoon, Mike, Mandy and Brett.
Thanks, guys.
(applause) (techno music)
