From Matt Helbig — December 6th, 2019
This week we look at lululemon's interesting product grid.
Annett: Hi Matt, how are you?
Matt: How's it going? Tell everyone a little bit about yourself.
Annett: I am Annett Forcier. I'm an email designer and developer. Formerly front end designer formerly pastry chef. And so now I do emails only and only bake sometimes cookies.
I founded EmailBoutique Digital Inc. in May of this year. I have been freelancing for about six years all together. The last two in total were full time. And before that I've worked for multiple companies, tech startups and agencies as well, Pretty much every job I left, the company had a hard time replacing me or filling my position and at some point I had no time anymore for holding a full time position and that's how I became a freelancer.
Matt: You have your hands in a lot of different stuff. Name some of the brands that you've worked for in the past.
Annett: Let me start from the latest run. I just finished a master template for Tupperware America. I have worked for Hootsuite. I've worked for Cossette, which is a local agency in Vancouver. They did emails for Telus, which is a telecommunication company in Canada.
And what else? Grand & Toy. It's a big office of supply company similar to Staples in the States. So it's going from larger to small and most of it is a word of mouth.
Matt: Fantastic. So this is actually a template that you built. This Lulu lemon one.
Annet: That was actually very interesting one because we turned the workflow around for this one because the ask was to create a completely new template. But with a similar look of previous emails.
So I basically got all their previous emails out to put them on the wall and be checked out. We made inventory basically what kind of modules we need, which ones we keep, which ones do we no longer need, and then I coded everything with placeholder imagery and placeholder copy, which is actually Yoga Ipsum if you take a close look at it.
Matt: I like that. Good touch.
Annett: It was also about how this can all render across all the platforms, and I needed to know that the rendering will work with the modules I built before the designer starts designing. So that's what that prototype was for.
Also, I could get the stakeholders to focus on the layout first before they'll get distracted with colors and imagery and copy. I really had their eyes on the layout and I got pretty quick approval because everyone was looking at the same thing and was focused, which was great. After this was done, I was working with the designers together to create basically a design system and I think they did this in Sketch. I actually convinced them not to use Photoshop.
I want them to move away from Photoshop because, if you think about it, Photoshop is a graphic design tool where you create assets in a static canvas. Well, the email is not a static canvas. Any kind of device where we are looking at emails is not a static canvas. You know what bothered me a lot was when I heard the word pixel perfect.
It's like, yeah, great. If you want something pixel perfect then turn on your printer and print it out, but it's not an email. So we need some flexibility here and there and sometimes I have more success with it if I show it on a device. Like see it won't work.
Matt: So this is what it looks like with content in it.
So you kind of had that layout and then once the content gets into the grid it re-stacks and takes advantage of the grid system to look really good on mobile.
Annett: There is a couple of things happening. The hero image is actually two different images.
Matt: I really like that when brands optimize a bit more for mobile. It does take a little bit of extra work, but it definitely pays off. You can definitely tell a difference between these two.
Annett: It's of course only working on any device that supports media queries because the mobile version is a background image that is always lying behind the desktop.
The container that is holding this background image is optimized for the actual image. So on iOS or everywhere else where media queries are supported, the desktop image would be hidden.
Matt: Looking at that original template where there was a little bit more live text, why did they decide to lock up this text in images. I guess it definitely makes sense to lay it out in a specific way and use some of these brand fonts.
Annett: They where really focused on brand fonts, of course. And then it also depends on the object itself. I mean, these are leggings, so this is a really vertical image, so some people might think we could use a background image, but I'm hesitant if it's a hero. If it's a pattern, we can live without, because some Samsung native apps don't support background images.
If it's a hero, that is really important. I would not like to miss that picture. If it's a background pattern that I could replace with a background color, then okay, that's fine. But that's the reason why I don't suggest background images on a hero. In retail or fashion we see that a lot that brands style guides are really important.
If this is the number one goal for the client, then I will have to live with that. I would like more text myself. In some emails we do it and in others we don't.
Matt: It does look like this one does sort of mix in some live text when possible. So that definitely looks great. But you're right. I think having a separate layout for mobile and desktop gives you a lot more control. The tradeoffs are that on some of those older clients, it's a lot harder to know how something might scale 100% of the time.
I think you're definitely right in this case where the better experience, honestly is just having this laid out in an image. So scrolling down, I'm really interested in the difference between these two images.
It's a really interesting to switch up from desktop to mobile. So how difficult is some of this stuff? Is it just showing a specific image on desktop and then hiding it and showing this one on mobile?
Annett: It's the same as the hero. The background image is always behind. So the mobile version is the background image in this case. And because I can use a background image on mobile because it will only work where media queries are supported. And this is where background image rules show. So I'm not concerned about a background image in this case. Basically, the designers, they prepare a mockup for desktop version and a mock up for the mobile version.
And then we have two images. They are sitting in the same table cell. But sitting on top of each other. So the desktop is on a higher level and right below is the mobile version.
Matt: I think I've never really seen it done like that. I've always seen sort of hiding an entire table row or something and then showing one on desktop or mobile, but I like that approach.
Annett: The only thing that you have to watch out for that the images are optimized because you're loading both. Like if you do this in a email, then will basically, you're asking for a lot of download data.
Matt: This is almost two emails in one
Annett: So I would be cautious about it.
Matt: This one really does feel very mobile first, and this one feels really good on desktop. I know a lot of people are sort of moving towards the mobile first design, but having this desktop, especially with the amount of people I assume they might have opening in Gmail or something, it definitely makes sense to really focus on this layout.
So scrolling down, I really liked this grid system. Each of these are individual images, which I really enjoyed. And this mobile section just looks really great. Can you talk about maybe how that sorta stacks or moves around.
Annett: Yeah. So this is just a switch up. Maybe we want to emphasize certain products more than others.
So then in this case, I would suggest to use the first image in the first row and the last image in the last row to put the item in that needs more attention. So it looks like this first row is a three column. But it's actually not. It's two columns.
The first image, the gray leggings, is one column, and the other two images are in the same cell, but nested in another table.
Matt: That's a really smart move.
Annett: The first image will scale up 100%. As soon as the screen size becomes smaller. And the other two images will simply scale and stay the same size.
Matt: So is that something that a designer might have asked for and then you're trying to find a fix or is this something that you know you can do. And then you kind of relay that to the design team
Annett: In this case, they had that in one version, in their older templates, but it didn't work properly. And then I worked on it as long as I got it to work. Took me a little bit.
But, in the end it worked out and I was very proud of myself after I managed that and then I couldn't stop playing. So I made a whole set of different kinds of grid systems, like, how could I change this and make this completely different? So I went a little nuts with that.
And now I have a huge library of wireless grid systems. I suggested a few different ones because sometimes, for example, one of my clients is Article right now. It's really cool furniture company based in Vancouver, and they have a really beautiful Scandinavian look.
Matt: We love their emails too.
Annett: Yeah, I'm on that too. So, there's gonna be some new emails coming, but the thing they have so many different items on the website. They have different sizes. Like a chair can never be the same size as a couch. The same thing I had a Grand & Toy. They're selling office supplies. It goes from a razor to a chair.
So the dimensions of certain items can vary so much. So if you have a grid system that allows you to show items in a different size and still make it look good, you will have to have a little closer eye on it. What item you put in, what position, of course. So it's not ideal for if you were just loading your images dynamically.
You do need a little bit of a control over this. But it could help to balance the layout out of an email that has a lot of different items in it. So I think therefore, this was a really fun thing to do.
Matt: I really liked this solution because I think having that three columns scaled down would be too small on mobile and then stacking them one on top of each other might make this email too long. So I think this is a really good middle ground of letting the grid sort of live and only having to maybe load in one set of images. So that's really nice. And then when this bottoms section, I was really surprised just how different they look, but I guess they're totally different images.
Annett: It's the same thing as the hero. They did use this in this email they use the three times. So it's a bit on the heavy end. But, it does look really pretty.
Matt: I really liked just how consistent the CTA sizing is. And I feel like a lot of brands. Scale stuff, and then everything kind of looks different sizes and the buttons kind of feel all over the place.
But overall, these CTA feel like really close to the same sizing on both desktop and mobile. And when you're moving around all that content and scaling stuff, it just is nice to see that.
Annett: This is the result of designers and copywriters and developers working very closely together. So we had looked at each other's work and understood what everyone's priorities were.
You come to really good results in the end, if everybody cares about what limitations are and what possibilities are and what the priority of the brand is.
Matt: If you can have that design consistency be a big goal, it really pays off I think when people actually spend that extra time to care about stuff like that.
It makes the whole experience feel a lot better. And then when you hit the website and everything looks the same as the email, it's just a really good experience throughout.
Annett: I agree. All right, so the super footer. It's a bit big, I know. It's just the information was required. So then the menu itself, we wanted to have these items as large as possible.
It's clickable. It's click friendly on mobile because mobile is where the open rates are the highest. Higher than desktop definitely. So I created these buttons for these four categories. Basically this section is for anybody that hasn't really found an item inside of the email that they want to buy.
So there's extra information about shipping and what the return rules are, a bit more convincing that this is a good brand to shop with. So I believe these button radiuses even work on Outlook because it's a static button.
The buttons, you see above with the rounded corners. I don't think that works on Outlook because it has padding, so it grows with the copy in it because in this case, the copywriter needed to freedom to make copy that they'd come up with and the button should work out for that. But in the menu, on the footer, the words don't change.
They stay. So therefore I can create a fixed button size and I needed that because I'm stacking them again. It looks like a faux column, but it's not. It's a two column with two separate nested tables in it. That's why they stay nice and flush. It's the same module underneath where the icons are with the app, the store finder and free shipping.
This is the same module basically only that there's an image in it and a text link and both is clickable, I think. Yeah, so the icons as well as the billings.
Matt: I really liked this approach because I feel like in that hero section, you have this little mini navigation, but you really get out of the way really quickly.
I think these links are still useful. Having everything kind of that catchall footer in the bottom is probably the best way. As you said, definitely a mandatory thing. So I still think all these links sort of make sense to me. I think the only thing I might change is because these are live text, there might be like an opportunity to add some hover effects here or use this red in the logo somewhere else in the email. I feel like this really pops and I almost would want it to be incorporated into one of these potentially. I think that might be fun.
Annett: That's a design decision though usually so I don't...
Matt: True. You just set up the template and walk away. I think this base is very good and the modules that you've built provides them a lot of freedom throughout these templates. So is there any other changes or are you still working with them? Are you wanting to make any other updates? Like how hard is it for you to make new modules and things like that?
Annett: I have pretty good frameworks by now with the modules that I have.
So I always start with a base master template that I regularly maintain and test. I think they're pretty happy. They have tested this template for a long time. I was waiting cause like when would you finally use it? And finally when it came in, I was like, Oh my God, it is a winner.
Because they wouldn't have implemented it if it wasn't giving better results than the previous one. That's the moment when I'm most happy. That's actually the template is a winner and writes the numbers that the brand was hoping for. So I'm always happy then.
Usually brands come back to me when some email client changes something and something breaks. Or they lose some staff or staff changes and they need a new intro, because you know we have documented everything as well, that I tried to help with that as well. I'm making everything scalable and making everything or thinking of the next employee that comes in and needs an onboarding and needs to know how to code, how to handle the code and how it's done and where it's stored. And what to do, what not to do.
That's becoming a workflow for for me as well, because jobs are repeating sometimes. Especially when when my template jobs come in.
Matt: You're very popular, high demand.
Annett: But usually when I do templates, I don't see a brand in a very long time.
Matt: Maybe that's a good thing.
Annett: I think so too.
Matt: You figure everything out and they have the tools to go out there and start testing things. Well, thanks so much for taking the time to look at this email. I really liked this, and I think there's some really smart design things that are done with some smart coding.
Annett: Thank you! Thank you for having me.
Matt: Where can we find you online? EmailBoutique still to be announced or coming soon?
Annett: There's an email form on, you can sign up if you wish. I'm on Slack EmailGeeks. Women of Email. Of course, and Facebook and I most of the time I'm online. If I go on vacation, I never go anywhere where there's no internet.
Matt: You have the best out of office email ever too.
Annett: I should get back to this. Yeah!
Matt: You need to take more vacations, I think.
Annett: I don't, I really don't take any.
Matt: Ok. Well have a fantastic weekend!
Annett: Thank you. You too Matt.
Matt: See ya! ✌️
Love email & marketing news and wanna pown your friends in email trivia? Of course you do.