Agency Workflows and Tools
In this episode, I am chatting with Lee Jackson of AngledCrown all about agency workflows. What’s life like running an agency across the pond? Tune in and find out.
Lee is the founder of Angled Crown, a digital agency in the UK. They primarily build WordPress site and plugins for design agencies.
Lee is also the host of the WPInnovator Podcast – The podcast for designers, we talk agency life, strategy, marketing and WordPress.
This episode of Rethink.fm is sponsored by:
This episode of Rethink.fm is sponsored by Beaver Builder. If you are looking to reduce design and development time, Beaver Builder is your answer. It’s the only page builder I recommend and with over 375,000 WordPress websites built with Beaver Builder – you’ll be in great company.
Stop reinventing the wheel. With dozens of gorgeous page templates, you’ll be able to spin up an amazing landing page in minutes.
Looking for a template for your site’s inner pages? Don’t worry, they’ve got you covered there too.
You can even save your own designs as templates and reuse them throughout your site, or export them to use on a different site.
Build your website in minutes, not months!
An now, take Beaver Builder even further. Bridge the Gap Between Pages and Your Theme. Beaver Themer lets you create layouts for archive pages, a template for an entire post type, 404 and search pages, and create parts like headers and footers.
Beaver Builder, Awesome Software, Great Support, and a Helpful Community.
Get all the details at WPBeaverBuilder.com
Finally got some time to try this out. I bought a copy of Beaver Builder for a recent project. I created a gorgeous custom landing page in just a few hours. This is quickly becoming a favorite in my digital toolbox. —Jackie D’Elia
Listen to Episode 16
Where to find Lee:
SVG Support Plugin
Full Transcript of this Podcast Episode
Jackie Hey everybody, it's Jackie D'Elia with another episode of Rethink.fm. This is episode 16 with Lee Jackson. Lee runs an agency in the UK called Angled Crown and he is also the host of the WP Innovator podcast. Hey Lee.
Lee Hey. How you doing?
Jackie I'm wonderful. Thanks for joining me. I appreciate it.
Lee It's all right. I kind of wish I had your accent just so I can say WP Innovator.
Jackie I wish I had your accent.
Lee It sounds so much better.
Jackie I'm watching British shows all the time. I love it.
Lee I thought there was a bit of British in your accent there. Hello. All right guv'nor?
Jackie Hello. Hello.
Lee Hello. Think you need to work on that.
Jackie Well, I practice that but I'm sure they would make fun of me. So I won't do that.
Lee Yeah. You need to work on it I'm afraid.
Jackie Okay. Thank you. Thank you very much. On this episode I really wanted to talk about ... You run a design agency and you also have a podcast geared towards designers for WordPress and I just wanted to talk with you about how you approach your design philosophy at your agency and how you're tackling the challenges that are coming your way.
Lee Oh, right. Should I give you a bit of background about what we do?
Lee There was a bit of context to the story. Many moons ago, eight years ago, I joined a design agency. They were a design to print agency specializing in IT and a few other industries and what I did was took that agency from design to print to a digital agency. We were using WordPress and the design team there, I taught them the basics of what a web design should be as compared to things on paper and then we started producing websites. Eventually we then niched right down into the events industry as well. We became a digital agency. So digital design. Kind of all the same thing for the events industry. Since then I've launched Angled Crown.
And what we do is actually work with designers predominantly and we are essentially a digital department. An extension of design agencies all around the world and again a lot of these design agencies are like the old agency I was at where they are design to print agencies who are making that shift into digital and they need someone like us to partner with them and we give them consultancy. We do do some design for them, although they still do a lot of the design themselves and we also then do the digital builds. The WordPress builds. The consultancy all around that as well. Helping them price stuff up and all of that jazz.
So essentially we are a digital department and yeah, I create then tons of content, full of advice for people on how to manage an agency, how to manage the design process, the web build process etc. So, give away all that free information in an effort to attract business as well. And obviously to help people.
Jackie Do you-
Lee There you go. There's a quick intro.
Jackie Awesome. Do you work exclusively with WordPress for your digital builds?
Lee Exclusively. Absolutely. Totally WordPress. Yep. I heard something once. Niche until it hurts. I work with design agencies who have a design to print background and we will only work with WordPress. That really starts to hurt because you've got a much smaller audience and you get a bit scared don't you. There's that fear of missing out. FOMO. Thinking, "If I niche right down, I'm a bit worried I'm going to miss out on all this other business." But actually, it's really worked well for us. Whenever a Joomla! project or whatever comes in we just hand it on to someone else we know and we've got a lovely network of developers who work in lots of different industries with different products and we just pass business around. Which is nice because that means we end up getting the WordPress work.
Jackie Do you work with any frameworks within WordPress or are you just WordPress general?
Lee Well, we create our own plugins so they're all from scratch. Obviously we obey the bible which is the WordPress codex and obviously create our own work as well with our own internal coding framework, coding standards and then when we're coming to the WordPress theme builds we actually have our own basic framework that we've put together over the years with all the functions and everything that we use and reuse. Obviously then we use tools to speed up the process of build like advanced custom fields because why not? It's easy. It's quick. It's fast and we're not that proud. We don't have to reinvent the wheel every single time so we're always happy to use third party tools.
And then the other change we took recently, probably a year or two now was getting Beaver Builder into the themes that we make as well. We actually create custom modules for Beaver Builder. And we don't release the out of the box version. We actually release the version we've created with the modules we've created, just for that client. They have a different experience now where they can build up content of their pages using the pre signed off designed elements that they can drag and drop into their page without being able to do Comic Sans red center 54 pixels because we've all seen it.
Jackie So you're controlling I guess, what they can do with Beaver Builder within their build?
Lee Yes. I literally thought you were about to say, "You're a control freak." And I was like, "Woah, flapping heck. I think I'm insulted."
Jackie We've been on a couple of times on the WP-Tonic panel and I've heard you talk about Beaver Builder. I think the last episode we were on we were talking about that and it seems like there's more and more agencies that are using visual tools for their builds and that makes sense to me because on the design side the tools have been moving in that direction for a long time. People are doing more drag and drop. Even when you do a design say in Affinity Designer or Adobe Illustrator, it's all drag and drop and you're working with tools like that and on the development side it's just been a little slower uptake I guess on being able to use some visual tools to build things and a lot of the I guess reservations people had early on was maybe code blowed and the quality of the code that was being output by page builders but it looks like Beaver Builder has done a very good job of tackling those. Do you think so?
Lee Yeah, I think the gist of it is is because we're using our own modules that means that we actually control the code that comes out of Beaver Builder as well. Beaver Builder, if you use all of its own modules does wrap content in a few extra divs and that allows them to add lots of extra classes and IDs if you want to to get extra control and that can look a little bit messy. If you're looking at a out of the box, Beaver Builder page they've still done a great job and it's still very fast loading and it can be compressed and works with WP Rocket or any good caching minification tool etc. It all works really well. But yeah, because we can control the output that's in the front-end of the module plugin that means that we're doing our own W3C code and will probably be using something like the Foundation framework or Bootstrap depending on the project to get that nice responsive flow.
Yeah, we get to control the output and Beaver Builder have done a brilliant job in there. Other builders like Elementor I think they're probably heading in that direction but still. I guess the other one, dare I swear, Visual Composer and other things like that, they are just awful and messy and I wouldn't even touch them with a bargepole. And I think that has actually influenced people's fear of using page builders. And I guess the other fear as well of page builders is that not everyone is a designer are they? So, if you're going to give your client a visual page builder they're probably going to make a mess. But again Beaver Builder, I think they've done a great job because you can turn on the relevant modules that you think your client can cope with which means they're pretty much dragging and dropping to the rule book so it's very hard for them to make a messy looking page.
Jackie Yeah and I definitely think that the page builders that are not using shortcodes is definitely the way that you would want to go. You don't want it when you shut this plugin off or if something changes that you're left with a littered page content filled with shortcodes that don't do anything.
Jackie Yes. Absolutely. Let me ask you this. Say you are a developer, a designer and you haven't used advanced custom fields yet, you're thinking about maybe using Beaver Builder in your work, how do those fit together? What's the compelling reason you would want to use advanced custom fields with Beaver Builder? Just say for example put those two together.
Lee Okay. Is this question from a technical background as in they're going to build a theme as well?
Lee So you're building your theme and you can use advanced custom fields to relate custom fields to a post type or to site options. That's super useful and that means that in the back end someone can go to add new I don't know, movie, maybe I'm making a movie database. Add new movie and you've got some extra custom fields in there. Now, with Beaver Builder on its own there is no particular easy way to use Beaver Builder with advanced custom fields. What you would still have to do as a coder is create your single hyphen movie, which is your file for the single post and also you want to create your archive posts as well for your listings. So you can put in the loop and in there you would put in code the relevant calls to the relevant fields that you've created and build that up all in HTML.
It's quite a long process but that's what you can use ACF for and you could still use Beaver Builder out of the box for that. What they have just launched though is Beaver Themer which is really cool. It's not something that I would want to launch on a production site. It's still quite new and I do like to be able to do the code. I do like to be able to create my own loops and to be able to control the single post types. All of those sorts of things. That's something that's not going to go away for us but for the rapid application, the rapid builds that we're doing especially for influencers who are creating sites that are going to be up there for a few months on a particular campaign etc.
With Beaver Themer what that allows you to do is actually create the layouts for your singles and your loops listings pages etc. Inside of Beaver Themer with the visual builder and they actually give you these tags that you can click on and you can essentially drag in all of the custom fields and position them wherever you want from ACF. So Beaver Builder out of the box and ACF, you need to code. If you want to be able to integrate the two together you need to also add on the Beaver Themer option to be able to create those layouts. It's pretty cool. We've been playing with it a lot and we're impressed but again, I wouldn't do it for a long-term production site just because I feel like I'm then giving everything to this one platform and no one's too big to fail are they? If Beaver Builder disappears and I've got everything running in this one platform that kind of makes me feel a little bit scared.
Jackie That makes a lot of sense to think about it from that perspective. Do you find that it is speeding up your whole development workflow when you use some of these visual tools in your builds?
Lee I mentioned earlier where you've got a brand influencer who has a site that they want to put up very quickly doing Beaver Themer and Beaver Builder together is brilliant for that sort of rapid development cycle and you can push a great quality build out there. Half or even a quarter of the time that you would normally have done it so that's great. For just a normal WordPress build it's not necessarily sped up the development per se of a WordPress theme but what it has done is it's raised our game ahead of other agencies who are working on WordPress themes because it is giving the end user that drag and drop feel whilst keeping them on brand. We're still actually doing all of the HTML in each one of the modules and outputting them and testing them etc.
I guess it does speed up in different ways. Say we're creating a standard page of content where it's like a couple of columns of text etc and an image then we don't even need to do any HTML for that we can just drag and drop all of that in so that's great but obviously there is some speed ups in there but for us it is the advantage of being able to say, "Hey, look. You can create all of these pages visually instead of trying to use shortcodes. Instead of trying to use the WordPress editor, which we all know needs work and you can do it from the front-end and here are all your prescribed blocks. You're going to keep on brand but you're going to make your brand look awesome." And that's really important and I think that gives people and gives us as well and anyone who embraces the Beaver Builder an edge.
Jackie How do you manage styling the elements that you build out in Beaver Builder? I know there's some styling that you can do that it generates its own style sheet. Do you try to keep all of that separate from your main style sheet for the theme itself?
Lee If we're doing a build that's a very specific build for a one client then we will do all the HTML inside of the module. That's the structure of it. But then the CSS will actually keep in the theme itself so that we can change it if we need that module for a different client's website. We've not loaded all the CSS inside of that module. We've actually done it in the core theme itself so that's super useful. If you're using a module where you want to put all of the styling elements and options inside of the module then Beaver Builder does a great job of grabbing all of those. Creates this super include is one file then caches it etc and minifies it so actually all of the CSS changes that you make either visually or physically in code are all cached up into the system so it runs really quick.
What we do with our custom modules is again, we deliberately don't give people too much choice. If there is already a brand style sheet ... So if header three is always this particular hex code color then we don't give them the option in Beaver Builder to change that color. We're very prescriptive. I couldn't say that for a second. You know how designers are very keen aren't they to keep people on brand and to not go off the branding guidelines so we'll keep them super simple and super restrictive as well. You've got best of both worlds.
Jackie You're actually limiting the options that they've got in there that would force them to stick to their branding guidelines that they've already established.
Lee Yes, exactly.
Jackie So colors they're using and the themes, the fonts, they're going to be using. Things like that.
Lee Yeah, otherwise you're going to give them too much freedom and again, like you said, not everyone's a designer and if you're not prescribing to people what they should be doing. I.e., you drag this in and you fill in this field and that field and you're done with that module. If you don't do that then you are going to have a website that you can not show off to other people because the client's butchered it.
Jackie What's your development workflow like? How do you build out your plugins, build out your themes? What tools do you use for automation and just what's in your toolbox?
Lee All right. The toolbox. Let's start from the very first step. The phone call comes in and I'm going to fire up Evernote. Write some notes. And from that we're going to arrange a call. A proper meeting or a call to discuss the project. Anything like that it's all tracked in Evernote. We'll eventually get a full idea for the project where we'll then send some sort of proposal over and the proposal is usually we need a discovery and the discovery is going to cost this much. We'll then get that discovery paid for and then we'll go on site or do it over the internet where we actually then essentially, not design but we write out a story of what the site's going to do as well as who it's targeting etc. We then also do some basic wire frames and that and for the wire framing we start to use the drawing application inside of Google, which is pretty cool.
You can just put squares on a screen and label them header, footer and all that sort of stuff so that you can start to structure the information. From that we'll then create a quote for the full project and we'll also put in a contingency and we use the contract killer to send over a contract that says, "we know you might change your mind therefore if you do there's extra costs." It kind of covers us there and then we kick off with a project. The next tool we're using is Basecamp for that and Ganttify. Those two plugins together allow us to set up the entire schedule and we've got a template in Basecamp three that we use for every build that tells us what we need to get ready. "Have we got all of the access details?" and all of that sort of stuff. And then we follow that process through. When it then comes to ... Shall I stop?
Jackie I just want to ask you one question. What does Ganttify do? I use Basecamp but I haven't heard of Ganttify. I'm just curious.
Lee Well, the cool thing is we can create the full schedule of what's going to happen. We'll schedule everything for the project. We know most projects will take four weeks to get to a finished build of a theme before content actually gets input so we'll actually then put every single step of the way inside of the schedule section of Basecamp three and then Ganttify will create a Gantt chart from that.
What we can also do as well is put specific tests throughout that four week period and put them on the calender as it were. So again, Ganttify will then put them in all of the relevant places. We can mark things as key milestones and that allows us to send a beautiful PDF of a four, five, six week cycle to the client to say, "Okay, this is everything that's happening. Oh and that, that's you and if you don't provide that by that date all of the other stuff that happens afterwards gets moved along remember." It really helps keep people on track and it stops the client calling saying, "Hey, how you doing?" Because they actually know not to bother us for another week because when they take a quick glance at the gantt chart they know that we're halfway through the build and there's nothing to show them until another week's time etc. So it's really good for our workflow too and our process just to keep the client fully informed. They know the flow and we can then sit back, relax and get some code done.
Jackie Okay. Thanks.
Lee Cool. All right. So now we get into doing the actual development and this is very, very, high level. Of course, it's way more detailed than this and I probably missed a billion things out but we then fire up some applications. The first thing we do, GitHub. Got to get that. We'll create our GitHub account. That's all ready. We'll get all our collaborators all ready and fired up. We'll then fire up WP Engine because it's brilliant and we can do transferrable installs which go out to the client, which means we don't have to do the billing or the support. That's a beautiful thing. And we also get a kickback as well of around $200 I think for each account that we transfer.
We get that set up and we'll open up Sublime a text editor because we code in Sublime text editor. It is beautiful and there is a plugin called the SFTP plugin, which basically means whenever we press save that change gets automatically uploaded into WP Engine. We can hit refresh and take a look at that change that we just made. It just really improves our workflow and from that we'll then make sure that we're committing really, really regularly. There's probably a minimum of eight commits per day. We commit way too much probably but we like that idea because then we can see what's been changed in the last hour etc and who did it and have a conversation if we need to.
They're the tools that we use. The actual design application that we use just depends on who has given us the design. We've had designs in InDesign. Oh, terrible. We've had designs in Photoshop which is okay and then Sketch which we've fallen in love with. We get designs in Sketch as well. Depending on the project we'll be using probably one of those three. Now and again as well we might have someone who's designed it in Adobe Illustrator which is cool as well. But yeah, we would prefer Photoshop or Sketch. Sketch is the new kid on the block and it's got things like right click and you can copy CSS code out and everything from it which makes the workflow super fast.
Jackie Are you using Sass to build style sheets or are you just working in CSS?
Lee Shockingly yeah, I'm just doing good old fashioned CSS. And I look at Sass and I got into Less for a while and then that wasn't cool anymore and I was just like, "Ah, forget this. I'll just do what I do best." We just do old fashioned CSS and I feel like I could be being judged for that.
Jackie Well, I really like the Sass part of using variables and just a couple of the other features that are in there so I typically will do my build with a Sass style sheet. I like to break up my partials so it just makes more sense to organize it. But I wouldn't say that I'm utilizing a lot of the Sass functionality. It gets too far away from what a CSS style sheet looks like to me. But I find that the variables and some of the other presets that you can set up within variables really help when you're wanting to make changes and then quickly rebuild the style sheet so I'm definitely in favor of the Sass part. And then do you use any other automation tools like Gulp or Grunt or any of those things when you're building?
Jackie You don't need to. Okay.
Lee We are good old fashioned. Just everything basic for us.
Lee I don't like relying on too many things basically because I don't have the time to learn them.
Jackie The one thing I do like is PostCSS will do the auto prefixing for you so that does come in handy. I typically strip out all of the auto prefixes in my base style sheet and then let it just generate those once the CSS has generated.
Lee Coming soon. Are you a design agency that needs to learn some of the latest and greatest technology. Look no further. Jackie has your back. New course, coming soon. Rated PG.
Jackie God, you're just awesome. Thank you.
Lee You've got a course that I would buy that course because I've no idea what you're talking about now. I'm like, "Yeah, that sounds good."
Jackie Okay. Well, yeah. And I've actually.
Lee I'll give you some money for you to teach me.
Jackie Anybody who know me knows I'm on LinkedIn Learning, Lynda.com, Treehouse. You know, I'm just always on there trying things out and for me what I have found is it has sped up my development time. And it also is more modular where I can move things around quickly. Reuse them on other themes. Other builds that I'm doing. And having my partials broken all out for my style sheet really does help.
I like working like that and I like being able to use my media queries where I'm writing the specific styles so instead of jumping back to the bottom. I don't know, a lot of the pre done CSS. You know you're jumping back to the bottom to update your media and it's detached from where you're working so makes your whole way of looking at a mobile view and a desktop view and a tablet view all disjointed throughout the style sheet and you have to keep jumping back and forth to make updates so I like packaging all of that together and then there is a Gulp ... I'm using Gulp for my builds but there is a way to ... It's called MQ Packer I think it is but basically it takes all your media queries and then when you're all done with your build sticks them at the bottom like they normally would be in a CSS style. I find that helpful for me but that's just my workflow.
Lee Feel I should learn it.
Jackie I have put my workflow is. I think yeah, it's definitely something to look at and see if it would fit into your workflow.
Lee I've got to admit though when I look at all of these things and I threw myself into Less and it was great but then it did seem to go out of fashion and was dropped by Bootstrap I think at some point. I don't know whether they've still got a bit of support for it etc but at that point I was like, "Well, I'm going to wait. We've got a great workflow. We're pretty fast at what we do and I'm going to wait for some of these established platforms to age and mature." Now Sass is what three, four years old now?
Jackie Yeah, it's been around a while.
Lee Probably about time I get into it so I've now no longer got any excuse.
Jackie Well, I was late to the party on it too. I mean, I really was. I would say probably a year and a half ago I started dabbling in it. I took one course on Treehouse that Gil Hernandes taught which was taking a basic style sheet and then breaking it up into sash partials just to show you how to go and do it and then how to do the compiling of it. That opened my eyes and I was like, "Oh, wow. This is cool. I can have a variables partial and put all of my colors in there." So, basically I just have a menu background color, a menu foreground color. Things like that so that when I'm working in my styles I can just drop in the variable name. I don't need to remember any hex codes or any of that stuff.
Lee I have no excuse I've realized. I've just quickly Googled as well. 2006. It's ten years. It's been out for ten years.
Jackie It's ten years. Lee.
Lee That's insane. It's definitely matured. It is time.
Jackie It's time. It's time.
Lee I've been learned.
Jackie But you're using some tools that I'm not using.
Lee That's true.
Jackie Beaver Builder has not been in my toolbox on a regular basis at all for any of my builds and I struggle with getting detached from code. The further I get away from the code and things the more uncomfortable I become on my own build. I need to get past that as well and get more comfortable using the visual tools and comfortable in the code that it's generating is good code. I'm really focused right now on accessibility and some other things in my build and making sure that semantically I'm using headers properly and we're using labels on forms and things like that. And when you're using a visual builder you really don't know. You have to go and inspect the code and take a look and say, "Okay, is this generating things the way that I would write them?" And if it is great. Then I think it's time to use it.
Lee Well, I think if you're using Beaver Builder for the modules where you're controlling the output anyway you don't even have to worry about what the visual builder is outputting because you've written the output. That's why I like Beaver Builder. Otherwise I would be like you and I wouldn't touch it with a bargepole. I need that level of control. I need to know the code has been written by me or at least I understand the structure of the code. Otherwise, yeah, it's not cool. You don't want to build something that's going to be hard to support later in the future. If you've written that front-end code, you're sorted. You probably remember it and you probably do it the same way every time anyway so to come back to it and support it, brilliant.
Jackie What kind of testing do you do for responsiveness and when you're coming up and you're finishing up your build and you want to test it all out is there any tools you're using for that?
Lee Because we're doing most things modular, per module, once we've built the module we're also testing it responsively then doing first of all the inspector in Google Chrome, just for speed but then we'll fire up BrowserStack. That allows us then to test across multiple devices because resizing to 320 width or 640 width does not actually replicate the output of Safari browser on an iPhone for example. We'll then go ahead and do that. We try and do as much testing as we go to minimize therefore the amount of QA that we'll have from the client and from ourselves. Just to carry on that process what we'll do is when we hit that point we'll hit the QA point, we'll do an internal QA run and we'll use ProjectHuddle for that.
And that allows us to very much like in vision just put labels all over every single page everywhere and assign it to different people to say, "All right, when you click this nothing happens. Please fix." Or I'll assign something to Larissa and say, "This is out of alignment." Etc. So, they all get assigned. We do them all and then we hand it over to the client and then the client goes through the same process and this ProjectHuddle actually works at all snap points as well which is brilliant. We can test on different sized devices and put our little pins all over the pages to say, "This doesn't work. That doesn't work. That doesn't look part of the design." Or whatever.
But obviously because we've tried to do that internal QA it usually helps. We've done all that which means there's usually very little coming in from the client. Back in the old day when we didn't do that we'd have three or four sheets worth of A4 paper or letter paper in the US of amends that we had to make and we'd be all stressed and the client would be upset.
Jackie When you are building out your theme, when you're getting your design from the designer are you getting designs for mobile views, for tablet views and are they taking into account the user experience on those different devices?
Lee Most people will give us the mobile and the desktop and we'll fill in the blanks in between. Most designs that we'll receive as well just lend themselves to be stacked very easily so there's not that much that needs to be thought. The only thought process that needs to be made for a lot of the designs is just things like font sizing at certain snap points, buttons, call to actions etc. Padding to make sure that they are big enough for the finger to tap on etc.
Yeah, we've had some clients who have given us three different versions of every single file and it actually took us a lot longer to build the theme because we were opening each file in Photoshop. 50 megs each I think. Something ridiculous like that. It was taking us ages. We were going through checking everything and it just took ages to check whereas when an agency gives you a little bit of creative freedom with regards to what you think is the right thing to do for the responsive layout at each snap point it just helps. It helps go a lot quicker. And we've built so many websites as well. It's just frankly obvious what you do with most of the stuff.
Most clients will give us mobile and they'll give us desktop. We'll fill in the blanks and then during the QA we'll just tidy up anything that the client feels is incorrect and that's usually minimal.
Jackie How about SVGs? Are you using those in your graphics?
Lee Yes, we are in certain instances. A lot of clients now have finally embraced the fact that Internet Explorer needs to be put to bed. And for anyone who is not using Internet Explorer or doesn't care about it then yes, we are doing SVGs. There's a plugin which I can't remember. I think it's Safe SVG or something like that.
Jackie It is, yeah.
Lee Yeah, cool. For WordPress because that's going to essentially scan your SVG and get rid of anything that's potential. If you didn't know it in an SVG you could in theory sneak a little bug in there and it could infect your site. Whatever. I don't know. I'm now talking out of my ...
Jackie An SVG is just code. It's just code. It's XML.
Lee Yeah, there you go.
Jackie So you could put something in there and it is nice that there's plugins right now that will-
Jackie Filter it and screen it as you're uploading to the media. I've used some plugins that also allow you to inline the SVG so that you can do some animations and styling to individual elements within the SVG instead of just the entire fill color of the SVG or something like that.
Lee Can you tell me what they are. They sound amazing.
Jackie There's a plugin, I think it's called SVG-support, it allows you to ... Let's just say you've got an image tag and in there you add a class called style dash SVG. Instead of using the SVG as an image it will actually inline it when the page loads.
Lee Oh, Yeah. Okay. I get you.
Jackie You can then go in and style it. So you can change the color of it. You can animate some parts of the SVG so it gives you a lot more options. I've been working on a post that I'm going to release, I think probably the first week of May or something but it will be ... I'm using some of the elements from the 2017 theme because they have a nice way to do the social icon menu where you can just ... A client can easily reorder their social icons and the icons are all SVG. But also they had written some really nice code in there that lets you bring in any SVG in design element SVGs and things like that. And be able to change them on the fly because they're all loaded at the bottom of the page.
Everything's in there and you use the X ref to call them inside the page and it's pretty slick how that all works so I've adapted that code for my Genesis themes because I typically work in Genesis. I really like that because now I can package up all the design elements as SVGs and they all load in one file so you're reducing all of those HTTP requests. You're not having to reload all of that each time you're calling them because it's already there embedded in the page and you're just using it wherever you want. And then you can with your styles, you can go in and make any changes to it.
If you want to use say for example an arrow, a big arrow on a page as a design element and on one section you want it to be one color and on another section you want it to be another one you can easily do that with CSS and only call this one time in your big SVG that loads with the page so you don't actually have to call it again. There's some pretty cool stuff in there. I think that's definitely what I'm focusing on learning and being able to incorporate in my toolkit.
Lee At what point in life did you realize you were a bonafide geek?
Jackie Oh, wow. Probably a long time ago. My very first thing ...
Lee We just flipped the podcast. I'm interviewing you now.
Jackie Yeah, yeah, right okay. Let's save that one then.
Lee That's hilarious.
Jackie I am a geek. I am total geek.
Lee You are.
Jackie Yes. Everybody knows it.
Lee And embrace it because you're awesome. On SVG though, I mean the cool thing obviously as well. More benefits. It's just plain text. Beautiful. It's going to load super quick instead of a binary big, fat, horrible image. And have you noticed how annoying PNGs are when you get responsive. The minute you try and even just ever so slightly resize it 100% with height auto or something like that, even if you've uploaded a PNG that is the size of a house, it still looks blurred on the frickin screen and it drives me insane when we're dealing with sites that need support for older browsers and there are still government agencies etc that require us to so we still do have to work with old school a lot.
Jackie I also think that and I know for me I've realized that not everything has to look the same on each browser.
Jackie And getting out of that mindset where you're going to spend 80% of your time to make 20% of it look the same as it does somewhere else and I think just understanding that it's progressive right? So you need a base style. It needs to be readable, usable and display on some things like older I.e., if that's what you have to style for but I don't think that we need to spend the time to try to make it look like it would do in a current version of Chrome on a different device.
Lee We talk to our clients about that and we say to them, "As long as the output is on brand. That we are adhering to the line-heights, your leading, all that sort of stuff. There may be a slight pixel out to the left or whatever it is." There are certain things that we just cannot control everything for every single browser. Because also during a project lifecycle sometimes if you've got a two month project you actually might have a couple of releases of chrome, which creates a bug at some point etc.
It is actually I think, frankly impossible, to be pixel perfect without a huge budget I think for everyone. We like you will explain to people, "It has to be readable. It has to be on brand." Etc. And unless there is something that's glaringly obvious like in Firefox the image is 1000 pixels wide and it covers the text, which is obviously a bug, we'll fix that but if it's something very, very minor but the page is still readable and on brand we're not going to worry. I'm not going to lose any sleep over that because usually the client's budget does not reflect me to lose any sleep over that.
Jackie Are you using any of the newer CSS three specs like Flexbox? CSS Grid, it's probably too early to ask if you're using that but let's just go with Flexbox.
Lee With Beaver Builder it's already in there anyway so yeah, we're using those. We are essentially using everything is now CSS three unless there is again a browser requirement for the older browsers. We don't even think of the older browsers unless it's been stipulated and we have that in our terms and conditions as well. We are literally dealing with your modern WebKit style browsers and unless you tell us otherwise we're just going to use every trick and trade that's coming out that is supported by the latest version of all the browsers because I don't know if Safari does but I at least know that Chrome and Firefox etc pretty much the minute there's a release it's going to automatically update anyway. So most of the world on most browsers now, even on Edge by Microsoft are running the bleeding edge version. The latest stable version so you're pretty much covered. I think for all of these up and coming and new emerging technologies.
Jackie Awesome. Thank you Lee. You've just covered almost everything I wanted to ask.
Lee Oh, Okay.
Jackie One last question before we wrap up for today is what have you been rethinking in how you run your business and how you run your podcast? Anything in those areas that you want to talk about?
Lee Yes. I have been rethinking and re-rethinking our pricing point and the avatar of the person or the company that we want to attract to our business and this is something that I think I'm slowly learning over time. We started out with our first WordPress theme at £150. At our current exchange rate I reckon I sold me first WordPress theme to someone from scratch from PSD for around $170. If you do the math, that's not very sustainable at all. I then did a rethink. I was like, "Oh, crap. I need to raise my prices." I quadrupled the price and that was actually still really cheap. Eventually I learnt that to be able to run a successful business. To be able to have a team like I've got etc then really we need to be building sites in and around the five to 10K mark.
The problem is is I've essentially created an agency that works like many other agencies which means we're running at the five to 10K mark but we still have costs. We still have a lot of projects that we've got to do to be an agency that continues to function. Has good cash flow etc. What that means is it's not necessarily giving the lifestyle that I really want for me and my team. I want me and my team to only be working on a few projects a year that are fun. That we can throw ourselves into. That we can spend the time on to get perfect.
I would love to spend time on making something look exactly the same across two browsers but people don't have the budget for it. So yeah, what we're now doing is shifting and the whole point of Angled Crown, the rebrand from LeeJacksonDev which sounded like a one man band into Angled Crown and my constant musings every night and every day at the moment is how can I take the new brand, Angled Crown and shift that so that we're working with some of the big USA agencies that are working on huge corporate projects? Where we would be a very small part of that but they have got a huge budget so we can command a larger amount of cash in to allow us to sit back and really get into some really good, fun projects without the stress of trying to fit five, six, seven, eight, nine, 10 projects in, in a month.
We've actually done 10 projects in one month sometimes just because we've had a few slow months, a few slow months beforehand. You know how it is. Feast and famine etc. Five to 10K, it's not great. I want to try and be hitting the 30, 40, 50K projects if not 100K project. That's what's on my mind right now and I really want to make that pivot as an agency and I've got ideas on how to do it, I've got the podcast, I've got the YouTube channel etc. I'm talking with the relevant people but it's certainly not an easy shift and it's certainly taking me time so if I get there I'll let you know and perhaps we can talk about how that went.
Jackie Awesome. Tell us about the podcast. Why you started it and what's your focus on the episodes that you're recording?
Lee The podcast is the WP Innovator podcast that's wpinnovator.com. Little plug. And the whole purpose of that was to get me in front of my target audience. Target audience being design agencies and the web designers who potentially in the long run might need my help therefore they might actually commission some work from us. But the other reason I started it was to become an influencer. The idea is if I'm going to attract those high paying agencies, I really want to be seen as a thought leader, as an influencer. You've got the guys out there like Chris is it Lema?
Jackie Chris Lema. Chris Lema.
Lee Yeah, you've got Chris Lema. Lots of people want to work with him and they know that if they're going to work with them they're going to probably spend quite a lot of money to work with him. You've got Troy Dean as well from WP Elevation. He is an expert. People will pay really good money to be a part of his course. People will pay really good money to have him consult etc. That has been my plan all along is to raise the brand of Lee Jackson as a thought leader, as a serial entrepreneur. As someone who will go out eventually doing speaking gigs etc. We started off with a podcast as kind of a soft way in. And now we're doing the YouTube channel as well. We're putting out one video a week at the moment on the YouTube channel, which we're also going to increase that as well.
And at the moment I'm in a few conversations with a few events where I'm potentially going to go and do free speaking gigs but at least to start to cut my teeth on speaking as well. The whole purpose was really to stand out and help build the personal brand so that we can then start to attract those higher paying customers that we're looking to attract.
Jackie Sounds like a great marketing plan to me.
Lee Sure. It's taken two years so far. Or a year and a half. Don't know. December, no, November, November 2015 was the first podcast episode. Yeah, back in the day.
Jackie All right Lee well, thank you very much for joining me. If folks want to get a hold of you and find out more about what you do, how can they reach you?
Lee Head on over to wpinnovator.com. That'll actually just redirect you to our corporate site. If you want to chat and engage we've got a Facebook group, which is wpinnovator.com/group and you'll get redirected into Facebook and I live in there and there's tons of other designers, design agencies in there having a good laugh so that's a great place. And if you tweet head on over LeeJacksondev. Send me a tweet and I'll say, "Hi." And let's start a conversation.
Jackie All right. Well thank you very much. And everybody have a great week.
Lee Thank you.
Jackie Thanks Lee and I'll talk to you soon.