rethink.fm
Cathi Bosco
The forward-thinking podcast about technology and user experience design.
Episodes
Mentioned books
May 4, 2017 • 42min
Episode 13: A Passion for Quality with Gary Jones
In this episode, I’m chatting with Gary Jones. I’m honored to have Gary on the show. He is your go-to person when you want things done right. He is a huge asset to the Genesis community and shares his knowledge in so many ways. If you spend any time on Github – you are sure to see his name as a contributor on so many open source projects.
Let’s get started.
Meet Gary Jones
Gary Jones is a UK-based WordPress Engineer, code consultant and father of extremely premature twins. Driven by a passion for excellence, he creates elegant WordPress plugins and theme solutions for clients, and provides services, including code audits, for other web designers and developers.
He’s worked on projects for SiteGround, Yoast, StudioPress, Web Savvy Marketing, Daniels Trading, Rolls-Royce and many smaller design and development agencies and individuals.
Gary is a key contributor to the GENESIS FRAMEWORK and has contributed to all except one major branch of WordPress Core since 3.3. He has contributed to many open source projects in the COMMUNITY, and is a co-host on the UK GENESIS PODCAST.
A former teacher in schools and prisons, Gary’s goal is to educate WordPress professionals on how they can improve their code. His motto is knowledge is power.
Show Notes
Gary’s site: Gamajo Tech
Twitter: @garyj
Podcast: UK Genesis
Github: GaryJones
Genesis Slack Channel: Request Invite
A Few Valuable Links & Resources :
WordPress Coding Standards
WordPress Coding Standards for PHP_CodeSniffer
PHPStorm
Atom
StudioPress and Genesis Framework
Transcript
Open PDF version of this transcript in new window
Jackie Hey, everybody. It’s Jackie D’Elia with another episode of Rethink.fm for you and today I have Gary Jones who is a UK resident and a Genesis expert in our community.
Hey, Gary.
Gary Hi. How are you doing, Jackie?
Jackie Very good. Thanks for joining me on the first episode for season 2, which is kind of awesome to have you here.
Gary Thank you very much.
Jackie For anyone who doesn’t know who you are in the Genesis community, would you tell us a little bit about yourself?
Gary Absolutely. My name’s Gary Jones. I’m based in Basingstoke in the UK. I run a small virtual agency creating technical WordPress solutions for clients, including integrations with their business critical systems. I’m a contributor to the Genesis Framework and WordPress core and many plugins and open source projects. I’m cohost of the UK Genesis podcast, although we haven’t done many recordings recently, general translation editor for the British English locale in WordPress and organizer of WorkCamp London, father of five-year-old twins, and my background is teaching in schools and prisons.
Jackie Wow. That was awesome. You just went right through the whole thing. That is great.
Gary It helps being prepared ahead of time and actually writing my introduction down this time.
Jackie Yeah. If you’re working in Genesis and you’re in GitHub at all, it’s hard not to see your name all around as a contributor for, like you said, numerous plugins, many open source projects. I see your name as a contributor on a lot of things.
Gary Yeah. A lot of the things that I contribute to are effectually under other people’s names. It’s under their repo or their GitHub name. One of the things I like doing is helping others. Irrespective of the context that might be helping clients or, in this case, helping other developers. If I can contribute something to their plugin then I’ll go ahead and fork it and make the change and send it back to them. If it makes their plugin better and people recognize that there’s a slightly better plugin or slightly better package that has got their name on it, that’s fine by me. I’m actually fine with that.
Jackie I have to say, whenever I see a plugin if I need something in the GitHub repo and I see your name associated with it, I usually think it’s okay to use because I kind of …
Gary Probably, yes.
Jackie I know you’re very thorough and you’ve got a really good background on one of the things we were chatting about before the shows is that you do some code audits and I’ve known that you’ve done that in the past for other developers, for businesses, for individuals.
That would be my first question I think I want to ask you is how did you kind of formalize an approach to do code audits? How did you evolve into that?
Gary I enjoy reading code. It’s as simple as that. My background is teaching, in education and helping others, so if I could combine sitting there reading code and analyzing and look to see where it can be done better with somebody whose efforts, maybe it’s for a free plugin, maybe it’s for some client work, maybe it’s for a premium product that they’re trying to sell. If I could look through the code, make suggestions and educate that will use it as a tool to educate them so they become a better developer with the benefit that they have a slightly better product at the end of it, then I enjoy doing that.
I enjoy sitting down, sharing the screens for two hours and going through line by line, say “Have you thought about doing this? Have you thought about adding support for internationalization or making it more accessible or adding support for right to left scripts?” Or just reorganizing the code in such a way that it will reduce bugs and has a conflict driven approach that makes future edits even easier to do. Kind of easier maintenance.
There’s lots of reasons for doing the code audit and it’s just something that I found that I enjoyed. Word of mouth was that people would send other people to me to do that. Then the formalization process was very simple. It was, kind of, an hourly rate to a fixed price for a couple of hours of going through the product line by line and then at the end of it the person who we’re doing the code audit for can take all those notes and implement whichever they agreed with in their own time.
It’s not necessarily me just fixing up their code and them learning nothing. It really is effectively teaching them how to fish so that they can then know for next time, so when they do their second theme or an extension to their plugin, they’ve got that knowledge and everybody, WordPress users, WordPress ecosystem in general, is better off for it because they’re plugin is now more accessible. Every plugin they do is more accessible, for instance.
It was one of my ways to contribute back and just brought a little bit of side income in as well.
Jackie Awesome.
How did you stay up to date with coding standards so that you know how to advise people about ways to do things and maybe refactoring and new ways to do things? How do you stay on top of all of that?
Gary In terms of the formal code standards, there is the WordPress Coding Standards. There’s a document on the make.wordpress.org site that covers the actual coding standards. There’s also a set of sniffs, they call them, for PHP CodeSniffer and I’m involved in that as well.
That’s kind of the formal side of things about whether you should have commas after every line in an array and whether associative arrays should be multi line or whether certain functions should be escaped or not escaped or recognized and highlighted and so on. There’s all of that sort of side of things.
Beyond that, it’s just my own experience and just conveying that. If you’ve got a function call that accepts an array, instead of just dropping that array right into that function call. It just separates out the data from the logic, so that you perhaps, halfway through your development you can do something else with that array. You can extract it out into somewhere completely separate so that your function or your logic now will accept any array. So that when you come down to doing some unit testing, you can say, “well let’s throw in a duff array that’s got completely random data. Does our logic still work? Does it handle the edge cases and the errors and the exceptions and so on?” It’s just my experience in getting that across and saying, “if you do this, then this is the benefit you’ll get.” To your end users, they won’t notice any difference, but you’ll get some benefit from unit testing or by your editor being able to and therefore autosuggest how to auto complete some of the code. It’s just experience that I’ve learned over the last 18 years or so that’s conveying to them to make them better developers.
Jackie Okay, what code editor are you using currently?
Gary I use PHP Storm. For a long time I was … What did I start off with? I think it was just basic Notepad to start with. Then I moved on to Sublime Text, Sublime Text 2 and then number 3. I love that. I like the fact that you could add in individual plugins or extensions to the Sublime Text system and you could have your code linter in there. You could auto-arrange, auto-align different things. It’s fantastic. I still use Sublime Text for either very basic code editing or more likely for writing markdown documentation and so on. [inaudible 00:08:00] PHP Storm. I tried it once and it was too much. I couldn’t get to grips with it. There was too much going on. Didn’t like it. There’s a free course by a gentleman called Jeffrey Way that’s under the [inaudible 00:08:20] Podcast system things that he does. There’s a free course which I recommend completely and totally for anybody who is even considering moving to PHP Storm is to get PHP Storm. You can get the free evaluation edition to run through this course. Pretty much the first session is: Turn this off, that off, and the other off and really simplify down to just an editor.
The actual power of PHP Storm … Yes, you can integrate your version control and command line and all your other tools. Actually some of it comes from the auto-complete which you still get even if everything else is turned off. Running through that, when I found out the second time, then I’ve stuck with it ever since. I know that I don’t use PHP Storm to its full potential. Every now and then I say, “well, is there a new feature?” Kind of re-map some of the key commands to Sublime Text so that I haven’t got to learn two different sets of keyboard shortcuts. Between the two of them, everything gets written. PHP Storm is good in so much as there’s an extension for it: EA Coding, I think it’s called. That will highlight potentially bad practices with the PHP. Even if I’ve just written the same code it will highlight, “oh, did you mean to do this? Did you mean to do that? Have you thought about this?” It will highlight potential errors that Sublime Text wouldn’t, and that I wouldn’t have necessarily caught manually. It actually helps me to write code in several different ways.
Jackie Have you tried Atom?
Gary No, I’ve not. I’ve seen it around a lot. I’ve seen lots of praise for it. I might have loaded the website, but not gotten any further than that with it.
Jackie I’ve tried Atom as well as PHP Storm and I did go through the Laracast free courses, the videos on that and I found them very helpful in configuring and setting up Atom. I mean PHP Storm. I’ve also tried Atom because I’ve seen that used a lot now on Lynda courses and LinkedIn Learning courses that they’re teaching. A lot of the developers that are instructors on there are using Atom. Now Atom’s free, so that’s a great choice for somebody who’s looking for a free code editor and it does have the sniffer packages that you can install. I use that now in mine so that when I am writing code or when I save a specific PHP file, it automatically formats it and lets me know if there’s any coding errors in the file. Very similar to how PHP Storm works. That is another option for folks. PHP Storm does have a yearly cost to it, and Atom is another choice. I used Sublime Text as well earlier on and I found Sublime and Atom to be very similar. I think Atom is easier to install packages and manage that process than Sublime Text was. That’s another option for folks if you wanted to do that. For some developers that are just starting off or are not what they should be doing coding in the WordPress space, you said that there’s WordPress coding standards. I know there’s a PHP sniffer that you can install that will monitor whether or not you’re using the WordPress coding standards. Can you talk about that, and your involvement in it, and how would somebody go about implementing that?
Gary Yep, so there’s a command line tool called PHP code sniffer. It’s by a company called Squizz Labs, so it’s an unusual name, but that makes it very easy to find. They support various different coding standards, the coding standards, PSR2, obviously WordPress, and so on. That’s just the tool which comes with a few sniffs and a few checks. The WordPress coding standards is a separate repository that is in PHP so as a tool for checking your PHP, it’s easy to see and understand how this tool is built. It will look through your files and it will break all the PHP code down into separate tokens. Could be a token of an open bracket followed by the word ‘echo’ would be a separate token. It’s all broken down. Then it looks at combinations. Is there a bracket followed by a croat? Perhaps you’ve got an array or something like that. Also, hang on a minute, the WordPress coding standard says you need to space in between there. For a lot of these individuals checks, all of these different sniffs, for WordPress coding standards. They’re trying to increase more is actually kind of automatic fixes as well. You could run this command line tool over your code and it’ll say, “okay, you’ve got a thousand errors.” It could then say, “well actually, I could fix 800 of these automatically.” So you run a slightly different tool and there you go, it’s fixed most of them. Give it a once over. Commit it to then go ahead and check out these 200 other errors. As well as individual white space errors or whether you’re using short syntax or long syntax for arrays, it will also check things for WordPress coding standards. It’ll check things like: are you escaping your output? It will say, “Well, you’ve got echo something.” It’ll say, “well hang on a minute, that’s not escaped. I was expecting escape HTML in that context.” Or you’re doing in an attribute you’re just doing ‘get permalink’. Well it will say, “hang on a minute, I’m expecting that to be escaped.” So there’s lots of things there that will be able to help with the escaping and the sanitization and potentially validation. It’s good coding practice. The WordPress coding standards are split into WordPress core, WordPress VIP which counts as being on the VIP with automatic, and WordPress Extra. The combination of core and extra means you not only get whatever is documented in that make.wordpress.org handbook, but the extra stuff is also things that we think you should be doing as best practices.
You can configure all of these to say, “well I want these checks, but I don’t that checked.” Or “Want it to be a bit stricter or a bit more lenient.” So you can configure how these checks are done against your existing code base or how you want it for your new plugin or your new thing that you’re doing. It’s just very flexible, but at the same time there’s a de facto, default behavior that pretty much all developers in the WordPress space should be following. As I said, you can add in your own exceptions if there’s good reasons for that, but if you’ve got no existing code practices, coding standards for your company or at the company level. This is a very good way to make sure that the code you’re writing can be readable and understandable and fixable without any obvious noticeable difference in code style between you and somebody else.
Jackie I think what you were talking about is maybe the PHP code beautifier and fixer? When I configured Atom, and I think it’s also in PHP Storm too. It can automatically do a lot of these fixes for you. I did notice in Genesis sometimes with the escaping there’s some Genesis functions that you might get a warning on and you might have to do some exceptions in your configuration file to say, “hey, it’s okay. This has been escaped, but you just don’t think it has.”
You had some notes in a repo somewhere, I could have sworn I read that about. You had that same challenge. I was getting the same error and I was like, “Okay I don’t understand this part. How am I going to fix this?” And then I saw that actually there was a way to put some exceptions in there. Say, “no, this is okay. You can ignore that one.”
Gary Yeah, the particular function is Genesis_attr for Genesis attributes. If you’re doing a Genesis theme chances are you want that as an exception in your config file.
Jackie If you want to choose a base coding standard for WordPress, just the WordPress would be the one to choose if you were going to pick, right? You’d want to go with just WordPress?
Gary For most things, because you’d have exceptions like that. You’re config file would be in your plugin or in your theme. I can basically say, yeah, choose WordPress probably exclude the VIP. That would give you the WordPress Core, and the WordPress Extra and the WordPress docs, it’s actually a separate rule set, but it all kind of falls under the same thing.
Jackie So, you could actually configure like, three rule sets and then just exclude the VIP. Then you could also do some exceptions of your own in that file? I think it’s like a … Is it an XML file if I’m just …?
Gary Yeah, PHPCS.xml. , and then probably if it’s a plugin or theme that you’re distributing you’d put .dist on the end. The advantage of that one is that, that is the conflict file that you distribute, but if somebody wants to override it locally they can have PHPCS.XML which you would put in your ‘get ignored’ so that anything you’ve got isn’t distributed as well.
That would then just override the conflict file that you distributed, so you’d actually get the best of both worlds, distributed and local configuration.
Jackie So, that’s a great starter if you are not using any coding standards, and you’re just writing PHP code in WordPress. It will work with all of these code editors you can just find the package that goes with the code editor that you’re using. You install it. You can immediately … You can either run it from the command line, you can have it go through all your PHP files at one time and make all of these corrections and give you a notification of all the problems and errors. I do it in mine. Every time I edit and save a file, it just automatically does the PHP CBF Beautify. So, it reorganizes the file so that it corrects for most of the things. Then anything that’s left is going to show up in the bottom of my window. It says, “hey I found six errors.” It underlines them and shows you where they are.
Gary Yeah, and you can also tie into . . If you’re doing any kind of continuous integration, so if you’re using Travis or Scrutinizer or Bit Bucket Pipeline which is what I’ve been using a lot at the moment. You can set those up so that it will say, “hey pull down the WordPress coding standards, set it up, and run PHPCS against your repo and your newest. Then you’ll get a file that says, “hey this is being checked.” Instead of running it locally, you you can it on every commit as well.
Jackie Oh, that’s very good. All right.
So, we’ve kind of covered the things that I wanted to ask you about as far as coding standards and code editors and things like that. Just want to roll back to Genesis in general.
I know you’re involved in the Genesis Slack channel. That’s where a lot of conversations go if you’re a Genesis developer and you haven’t found that, or you’re using Genesis. It’s a great resource to join the Slack channel.
Do you still use Genesis on most of your projects that you do for client work?
Gary Yep, absolutely, yeah. If there’s a theme involved we will push them to use Genesis even if it’s a custom child theme that we build from scratch or adapt an existing one or theme out there. Yes, it’ll always be Genesis. That’s just what I’m familiar with and what my team are familiar with.
Jackie Why do you like Genesis, in general over maybe some other frameworks if you really want to call Genesis a framework or just a parent theme? I’m not really sure. You have a couple of options. Why did you choose Genesis and why do you continue to use it?
Gary I originally stepped into Genesis, before that I was using a different parent/stroke framework, and I try to contribute back. The lead developer there just wasn’t interested at all. It was like, “okay, well yeah. Your theme is okay. I think things could be done better, but you’re not willing to accept.” I got introduced to Brian Gardner via email and he made the fatal mistake of saying, ” oh, if there’s anything you think could be improved, let me know.” For those who know my reputation, you’ll know that I’m not afraid to say, “yeah, there’s certain things you could do better.” So I sent him a big email saying, “yeah there’s certain things you could do better.” He was like, “wow, okay. We need to get you involved here somehow.”
That’s how I stepped into it. From there just making contributions to the Genesis Core. There’s certain things and some areas like the breadcrumb stuff is stuff that I completely rewrote. It’s been adapted and updated and probably improved and fixed since then. There’s certain areas that I know that predominantly were my original contributions, and that’s great.
Beyond that, for a few reasons, familiarity with the code. Its the ability to still be allowed to contribute even if I know that some of the contributions I make, not necessarily wind people up, but are trying to push Genesis in the direction that others might feel that it doesn’t need to go. My whole goal is to bring Genesis kicking and screaming into a modern development workflow that everybody can be proud of to use on the development of Genesis side of things. Beyond that, it’s then the community, there’s fantastic resources, as a tool itself, if I’m doing multiple websites then I’ve only got one code base to code against. If we’ve got clients who’ve got multiple websites they’ve only got one tool to learn, because obviously they don’t interact too much with the actual theme itself just the features that Genesis has got. Lots of plugins for it. Its a whole community in itself. A community of people, and tools and support and tutorials. I enjoy that community. I can contribute to it in different ways. I like the whole setup of everything there. I’ve got no plans to move away from it.
Jackie Do you find it’s easier to customize or develop a child theme in Genesis versus in WordPress Core, just do a child theme there? I’m asking that because I watch a lot of videos for instruction, especially on Lynda. Many times I’ll see Morton Rand Hendricksen, he’ll do a video and he’s not using Genesis. He’s doing things like, just for a typical child theme in WordPress. To me it looks sometimes more complex. A little bit more difficult to work in there. The beauty that I think in Genesis is the hooks and the filters make it very easy to intervene, make your changes, and produce a result in a very logical fashion versus having to go in and edit a bunch of individual files. Then you gotta remember where all of those edits are. To me the beauty of the way the Genesis is structures is, even if I create a lot of partial PHP files for my … Break apart all of my code specific functions like all of my theme setup can go in one file. All of my widget setups can go in another file. My default for the themes can go in another one. Then I’ve got another PHP script for handling all of loading of all of the assets, whether they’re the JS or anything else. Your fonts, everything can be all in one place.
The beauty of that is that those are more like configuration files to me. It just seems to much easier to understand to be able to adapt ad quickly change things versus having to go in and like edit your header.php file and your footer.php file. There’s lots of people who do it that way and love that way that that works. I just scratch my head a lot of times. I don’t understand why you would want to do it that way versus this nice configuration that’s already available to use.
Gary No, I completely agree. The use of the action hooks and filters within Genesis means that if you can write a plugin, but you’ve never touched a theme before, well you can edit and customize a Genesis child theme. It’s exactly the same. If you understand there’s certain hook points and there’s a callback and there’s a priority for that and maybe some passed in, you understand all you need to know. Combine that with the conditional function so it’s home is “front page” or is front, is archive, is single and all those. You can configure everything you want and as you said, it allows much more flexibility in terms of splitting up the child theme into an array or several files worth of array configurations plus some logic that handle those so that they can be class files, plus then some views that has got your html with a php values, escapes and echoes into it. For me, in my mindset, that works far better than having templates or partial templates that are mixture of some logic and some data and the views side of things. Yeah, I can’t see the benefit of learning something new when actually I’m writing enough plugin themes that I understand the hooks and filters and can make use of it within a child theme as well. I realize it’s different to how many of the child themes work out there, but I love that level of abstractness. That works for me and I can build on top of that in a way that partial templates and some of the other features of 2017 and 2016 and the like don’t have.
Jackie Well, we covered what we like about Genesis, so next question would be: What would you like to see changed and you briefly touched on the direction you’d like to see Genesis move into. What’s your vision for the future for that? What would you like to see?
Gary Probably three things that I’d like generally addressed in no particular order. First would be, code standards. There’s aspects which we’re talking about the code standards that Genesis still has issues with. Genesis 2.5 will be much better than Genesis 2.4. there’s still room for improvement in there. Its not necessarily has it’s own coding standards so much as there’s aspects of it that just doesn’t follow the WordPress coding standards. When you run the WordPress coding standards sniffs against Genesis you might get hundreds of errors. If we could clear out most of those by adhering to the WordPress coding standards, I will show up with things like, “oh certain values aren’t escaped.” Or certain things you’re using, the post data or getdata without actually sanitizing it for instance. It will show up the more important, critical ones if we can get rid of the fluff coding standards reports that are coming in.
Second one would be more config and class driven so that at the moment, much of Genesis is procedural code. There’s all functions in there. There’s a new thing within Genesis 2.5. I’m not sure if we can say about it yet, but basically its split up into a config and a couple of classes so that if, as, and when the config values, the data needs to change, that can be done without even touching the logic for that within the actual classes.
That then leads nicely onto the third item which would be to have more unit tests. Yes, you can test functional code, but with classes, when you’re just dealing with that logic you can say, “right, if I give you a certain value into your class method, does it produce the right result that I’m looking for?” You can test all the different code branches, well if you give it duff data, do you get an exception, and so on. So by splitting that the procedural code out into that config and that class you allow it to be more unit testable. Genesis does have unit tests. Its not distributed so most people probably won’t know that they’re out there. There’s certainly a low percentage of code coverage at the moment of which we’re trying to do those kind of two, not the code status as much but do that second and that third item on the agenda so that we do get a high level of code coverage. We can be more confident that when we write some, re-write some code so that the procedural codes are just wrappers for the class-based code. We’ve got the unit test to say, “actually yeah, you’re still producing exactly the same behavior.” Or, “no, you’re meant to be returning an array, but now you’re returning an array of integers instead of strings” or whatever it might be.
So, certainly that’s where I’m trying to push Genesis at the moment. It’s to just take little bits of pieces. Let’s take the Genesis update. At the moment, the Genesis updates … If you were to update from Genesis 1, probably not that far back, but say Genesis 1.0 the code would end up running through a series of functions that do version based updates and then one function that does a whole load of updates for particular versions all in one go. We could extract that into a series of class, so we could have Genesis 2.3 update, Genesis 2.2 update, Genesis 2.1 update and just kickstart the method in each of that so that we could then test that in unit tests, do integration tests for that individual update to say, “if we run this, does our database now show it’s got an extra value in it or not an extra value?” Or whatever the change to the database might be. We’d be able to test that far easier than what we’ve got at the moment which predominantly comes down to manual testing. The more we can move to unit tests and integration tests with Genesis the far happier and confident everyone will be about how things are working as they should be working.
Jackie How about code base in Genesis? The XHTML code in there. Do you see any need to maybe remove that at some point? Or separate the versions where you leave the XHTML code and maybe just do security updates for it? At some point, let’s just say you’ve got HTML5 and then you have the next standard that comes out after that. How long do you think its feasible to leave all of that code in there to support all of these different versions?
Gary I think predominantly that’s going to come down to a business decision. That’s well outside my remit. I don’t work for StudioPress or Copyblocker or Digital. So that’s for Brian and Nathan to decide ultimately. Much of the markups only for 2.4/2.5 goes through what we call the Genesis markup API. It’s not an API in the strict sense, but basically any time there’s markup to be output it goes through a particular function which accepts what the markup should be whether it’s in the HTML5 mode or the XHTML mode. That’s the way they’ve gone forward in that. I proposed a different scenario where as we try to move more things to views, which Genesis 2.5 will have a views folder and the actual markup in there where possible. I suggested, let’s have HTML5 views and XHTML views directory. Then basically on the earliest point you work out, are we supporting one mode or the other and just set the directory path to whichever one was relevant. That way then you get a whole load of files in a directory that basically aren’t being used. It’s not loading them. It’s not affecting performance and so on.
Whereas at the moment it is a bit of a mixture. At some point in the future, they’ll say, “right, at version 3 or in 2018 or at some point that they feel is a good business decision. Yes, we’re now going to take it all out and simplify it all down so we just have it in the HTML5 markup in there.
Jackie What have you been rethinking in your business and how you work this year versus last year or the year before. How is that affecting what you’re planning to do?
Gary Over the last couple years I’ve been in an odd situation. I’ve got one long term client who just keeps giving more work and more work and more work and they are fantastic clients in every which way. That’s kind of led me to the odd situation where I’ve basically done no marketing. What I’m trying to push for this year is to effectively sort out my websites, sort out the positioning that I’ve got which is something that I’ve never really established. I’ve just been a generalist. To sort out the market in terms of what my reputation is with the Genesis community or with the WordPress community with the developer community shall we say. Which isn’t going to be advantageous or useful when I’m trying to market to business with large budget who need a partner to work with them on creating a new website or creating new features or whatever they might need. Part of that is working out my positioning and working out I can convey that within the content of my website. Just the whole brand, really. Which for a company who is going to be 9 years old is quite an unusual step. I’ve never had to dive into it as much as I’ve done so far. I’m trying to balance between the code, the individual projects that I’m coding at the moment, plus project management between the couple of main clients that I’ve got and my team. And sorting out this marketing so that I can move forward in the long term and get more leads in of the type of business that I’m after. Potentially then take on a bigger team to handle that work and grow the company that way. The rethinking is all about establishing the business and not taking the fact into account that I’m 8 years old already. How can I grow? Where do I want to grow? Which direction do I want to grow? Putting myself out there. Ultimately, I think it comes down to ‘monetizing my knowledge’ is the phrase that I keep saying to myself. I’ve spent hours and hours and hours learning about the code and establishing a reputation, good, bad, or otherwise within certain communities. It’s, “how can I turn that now into money in my pocket from the businesses who need that skillset, or who need that experience and that advice and that guidance?” It’s all about the business now. I’ve definitely changed phases in the last six months, I’d say, from …The thing that kick started it is my main client had their business arrangement was such that they were potentially being taken over and said, “well for quarter 1 of 2017 we might need to cut down on the amount of work that we can send your say. Just for three months, just so that our books look better. So that when we’re taken over, we can get a higher share price and higher dividend price and so on.” Because of that and obviously, not as heavily supporting the people in my team as such, but wanting to make sure there’s sufficient work to send their way and support me as well. I really need some extra leads. I can’t have all my eggs in one basket. We’re starting to get more leads in. Starting to diversify. To do that properly we need proper marketing and to really set the business on the right path to growing in a way that it really should be growing.
Jackie Any plans to have some more episodes on the UK Genesis Podcast? I loved listening to it. I must listen to every episode that should you guys recorded. I miss it.
Gary Yeah, yeah we did, I think up to 25 episodes. We did quite a few. We recorded them every two weeks or so. The reason why we stopped is that we effectively dried up of the people who I knew were willing to come on as UK based Genesis users/developers/designers/Genesis professionals. We got to a stage where we dried up and just that’s it for now. Now we’ve left it probably a year and a half, something like that. It’s been awhile since we’ve done one. Obviously we do know more people in the Genesis UK community so it’s just a case of finding some time. Joe and I have only recently finished the Wordcamp London. Having [inaudible 00:38:13] organized last year. I was the organizer last year and I was the organizer this year. So now that’s done, maybe there’s some more free time amongst all that project management and marketing and all the other bits and pieces.
it would be great to do that. I think it provides value to those … The reason why we originally started it was that I was getting leads and Joe was getting leads saying, “right. I’ll use Genesis”, or “I want to use Genesis, but I want to develop for in the UK.” Timezone considerations and so on. It’s like, “well we know a few, but we don’t know that many. There must be a community out there.” So we set up the UK Genesis community, as it were. We wanted to have a directory of contact details so we could say, “hey go look at this. There’s a whole load over there. Go and make contact with each of these people who you think might be suitable.” Work on your business that way. Ultimately, we ended up just having the podcast which were hour long interviews with the individuals and just find out about their business, how they work, and again the tools they use. Then some quickfire questions which I think was really useful for showcasing them. Those 25 hours do act like a showcase that they could use or direct people towards. We even had Mike Little on there. We know he’s a Genesis user. He’s a co-founder of WordPress based in the UK. So as a Genesis user we very fortunately managed to get him on for an hour. I’d love to do it again. I do enjoy the podcast. It’s just finding the time and finding what value it can give to me. I contribute to lots of different things. There’s usually an ulterior motive of to why I’m contributing to a certain plugin. Its because, “oh, I’m using it myself and I need a bug fixed”. Or, “I’m using Genesis.”, or “I want Genesis improved.” Or same for WordPress Core. Its for the UK Genesis podcast, it’s “okay, what value is it giving to me and my business in terms of where I want to push it?” If that all matches up or if I can find the reason there to join it up then, yeah, absolutely we’ll start contacting some UK people and say, “right, let’s set a date. You come on and do a live show for an hour. Talk about yourself.” Which most people can usually do without too much practice beforehand. Let’s get you an hour on there.
Jackie Is there anything else you wanted to share before we wrap up?
Gary No, I think we’re good. For me, everything is rethinking at the moment for my business and moving forward. It’s good to be busy. There’s lots going on. I probably need to cut down on some things, but yeah. I think everyone just needs to keep going exactly what they’re doing. If they find it’s not working, change it in some way and move forwards.
Jackie All right, well thank you Gary for joining me on the show. I hope everybody got a lot out of it. I know I did. If folks want to reach out to you and follow you or touch base with you, how can they reach you?
Gary I’m on several different Slacks. The Genesis Slack and the WordPress Slack. I’m on there as GaryJ. I’m also on the UK WordPress Slack under the same name as well. Main website would be gamajo.com, so either look for gamajo or GaryJ or Gary Jones on most profile sites. Twitter as well is GaryJ.
Jackie All right, well thank you again, Gary. Thanks to everybody else for listening and tune in to the next episode.
Dec 28, 2016 • 42min
Episode 12: Season Finale with Carrie Dils
In this episode, I’m chatting with Carrie Dils. Carrie is pure awesome. She shares her thoughts on this past year, and what she has planned for 2017 including an upcoming book, Real World Freelancing with Diane Kinney. She is the host of one of my favorite WordPress business podcasts, OfficeHours.fm and is a huge Genesis fan.
Let’s get started.
Meet Carrie Dils
Carrie Dils is a WordPress developer, consultant, speaker and teacher based in Fort Worth, Texas.
She loves sharing what she’s learned with others to help them be more successful in their business.
She hosts a weekly WordPress podcast at OfficeHours.fm and is a course instructor for Lynda.com.
Show Notes
Carrie’s site: CarrieDils.com Podcast: OfficeHours.fmTwitter: @cdilsCourses: Carrie’s Courses on Lynda.com
A Few Valuable Links & Resources :
DIY SEO Course by Rebecca Gill
Smart Passive Income – Pat Flynn
Erin E Flynn – Courses, Templates & Tools for Web Designers
Utility Pro theme by Carrie Dils
Courses from Carrie on Lynda.com
Office Hours Episode 122 with Chris Coyier
Complete Transcript:
Open PDF version of this transcript in new window
Jackie:
Hey everybody, it’s Jackie D’Elia with another episode of rethink.fm, and I have my very, very special guest, Carrie Dils, on the show. Hi, Carrie.
Carrie:
Hey, Jackie. You’re my very, very special host, so I’m glad to be on the show.
Jackie:
Thank you. This is the final episode for season one, it’s episode 12, and I thought it would be really fitting to have a conversation with you. You were a big inspiration for me starting my podcast, and just to have you here is awesome. I know everybody else is going to enjoy it as well.
Carrie:
Cool, let’s do it.
Jackie:
For the one or two people in the WordPress community that don’t know who you are, would you introduce yourself and tell us what you do?
Carrie:
Sure. I’m Carrie Dills, based out of Fort Worth, TX. I, historically, have done front end development and years and years of client services and, over the past year or two, have transitioned into teaching WordPress and front end development, some of that on my own and some of that over at lynda.com. That’s where I spend most of my time.
Jackie:
All right. I’ve got questions for you, like I normally do.
Carrie:
I love it. I love that you had so many questions you had to start your own podcast just to get questions answered.
Jackie:
Just to get questions out, or just to say, “I have got a couple more to ask this person.” Yes, it’s been a great experience so far. I just did a recorded podcast episode with Joe Casabona from How I Built It. We did a podcast recording that ended up taking too long so we had to split it into two episodes, but we were both talking about … We both started our podcast right around the same time and we’re in a mastermind group together and did a lot of chatting back and forth about what the experience was like. I think one of the biggest things for me was just trying to figure out all the mechanics of getting everything to work in a podcast. So, hats off to you for being the one out on the pioneer frontier with that.
Carrie:
Thank you.
Jackie:
The first question I’ve got for you is: I love your year end posts that you do on your blog and I was wondering if we could talk about this one that you just published. You had published a blog post and you went over what has been going on in your world for the year and what your review was like and some guides and goals for 2017. What prompted you to do that and what keeps you motivated to keep doing it?
Carrie:
This was my fourth time to write a post like that in December. I don’t really know what prompted me to do it the first time around. Now I just do it because I’ve set a tradition and I can’t stop tradition. But it’s such a good time of year to reflect and then determine what needs to … What do they call it? Stop, start, continue? So, stop doing some certain things, start doing some new things and then continue doing whatever it was that worked. That’s what that post kind of sums up. It’s really more written for me than for anyone else, but I put it out there in hopes that maybe it encourages someone else to go through and review their year and set some goals and whatnot.
Jackie:
I saw you redid your website recently. What prompted all of that?
Carrie:
Oh, man. I’ve hated my website for a really long time. It’s always been clean and functional, but it’s not had a whole lot of structure to it. Especially this past year, as I backed off of client services, I removed my portfolio, I removed my services page, so it just got to be this … There was just this about page, a blog and a contact page. Nothing about it really summed up what it is I do or how I can help people. That was part of that. Redoing the website was to be intentional in terms of how I’m presenting information and helping whoever lands on my site connect with the right information. I don’t know if I’ve been successful, but it’s better than it was. We could say that.
Jackie:
I think that’s a good point, though, because a lot of times we’ll build our websites and then, as things begin to evolve in our career, in our focus that we have, a lot of us forget to go back and update our branding message. People will go to your website and go, “Oh, I didn’t realize that you did that. There’s nothing on your website about that.” You’re right, it is a good time to go back and say, “Okay, has my direction changed? What am I focusing on?” I know you and I talked sometime last year about this, but when you’re doing client services on your website and you’re also doing a lot of tutorials, you can kind of get your site deviated into two sections for. You’re like, “Who am I writing for? Who is this content for? Is it for tutorials for people that want to do it yourself, work on their site, or am I writing content to attract clients that want to hire me?” That challenge that you had in organizing the information on your site.
Carrie:
Absolutely. Those were some good conversations. In the end, my blog primarily attracts a DIY person looking for WordPress tutorials and that sort of thing. That’s also who my courses are directed toward, so that is … I kind of determined I have two target audiences, I guess. The dilemma that you’re saying, in the end, I’m trying to just use basic categorization to segment. These are the articles for that DIY crowd and people who would take those technical courses, then the other segment that I’m focusing on is freelance entrepreneurs or solopreneurs and providing business related content. I’m keeping it all on the same site, hopefully it’s just a little bit easier to figure, to find which one … the piece of content you want.
Jackie:
I think that’s a good SEO perspective, too, to keep everything all on one site. Of course, Rebecca Gill probably would know better, could advise us better on that. That’s for sure. I’m still going through her course.
Carrie:
Oh, it’s a great course.
Jackie:
Yes, very good.
Carrie:
One of the things that I listen to, I love Pat Flynn’s podcast, The Smart Passive Income. He had a guest on that talked about … It was a real click-baity title, but something like “How I Deleted 300 Posts And 20x’d My Traffic” or something like that. The net of that, I guess, is I went back and started looking at some content that I’d written in the very early days of the blog that really no longer had relevance to my brand, so they were “off brand”, and I got rid of them. I used 301 redirects and stuff to help with the SEO. I’ve still got some more of that to do, but I think it was kind of a cleansing. Like, what about these posts? What am I doing writing about typography? That’s not my thing, why is this on my site? By the way, there are still some typography articles there because they draw good traffic, so I’ve got to figure out what exactly to do with those. Anyways, I’m rambling on, but yeah, the general tightening of scope of what I’ve been writing about and defining that in my head has been very helpful. Most people probably start out doing that. It took me several years to get that.
Jackie:
You’ve got a lot of content on there too to go through as well, so it would take some time. I’ve done the same pruning on my site as well. Of course I haven’t written as many blog posts, but trying to remove the ones that I’m no longer focusing on, I think helps reinforce your brand. While we’re talking about the year end, was there anything that you had to rethink this year, that you started off at the beginning of the year assuming and then, somewhere during the year, you had to a complete rethink of that whole thing? Is there anything that comes to mind?
Carrie:
Yes. At the beginning of the year I was employed by a WordPress agency, Crowd Favorite, and so I started off the year thinking that I would be doing that and continuing on in client work. In March, I left Crowd Favorite. No drama there, people are welcome to read about it in that article that you’re referring to. But what I discovered was, I didn’t want to go back to client services. Because I had made a hard break or a clean break from most of my clients at that time, I just stopped taking on projects and started focusing on the projects that I wanted to focus on, the things I’d back-burnered, like my website. I did not think a year ago that that would be how this year panned out, but I’m glad it did.
Jackie:
Very good. I know you did make some changes in officehours.fm with the community this year, too. Can you share a little bit about that learning experience that you went through with that?
Carrie:
Oh, sure. A little bit of background for your listeners. I have the podcast and I have this loyal group of people – Jackie, you’re one of them – that would show up every week to ask questions, interact. I got this little burr in my saddle, wouldn’t it be great if we had a community so that all these people who are maybe at similar places in their business or want to talk more in depth about some topics that were on the podcast, let me give them a venue to do that. So, off I went and built this extensive forums and blah, blah, blah. I had wanted to even monetize that in a small way to help offset podcast costs. In the end, it ended up being a total flop.
Number one, people didn’t want to pay for it. Truthfully, I hadn’t been able to demonstrate value at that point in it, so that’s not a surprise. But the second thing is, part of that value was going to be: you get the exclusive, insider, office hours track if you’re part of this. I created this platform that was going to require me to invest a lot of time in content production. That quickly become obvious that it … I couldn’t even keep content production regular on my own site, so doing it on that site just didn’t make sense. I went through various iterations where it cost something and then it didn’t cost something. I think maybe, max, that I had maybe 80 folks that joined. But I finally shuttered that and, instead, went with a Slack channel, just the free Slack plan. I’ve had that maybe three or four weeks now and I’ve already got just as many people that are interacting in there. It’s not hopping, but because of the format of Slack it’s not up to me to produce content or whatnot. People can start and engage in their own conversations.
Jackie:
I think one of the advantages of having it in Slack is, that’s kind of where everybody is hanging out. They’ve got their Slack app open during the day and they can jump from team to team or channel to channel and it’s easy to see. I think the challenge with the forums is, you’ve got to remember to go there, log in and do that. That can be … it can make it more difficult for people to access. It’s just not as easy for them, so that is a challenge there.
But you know, where you are now with the podcast, like your relaunch, I love the new format. I just want to say that I think it’s a very nice mix. I like the one a month live, I think that’s great, the panel that you had on the other day that I saw, with Diane Kinney and Ozzy (Rodriguez) and Joe (Casabona), Joe was on there. It was a great, great discussion on there. That’s great, and I think that’s a great mix because the pressure of having to do that every week is off and you can plan it and you can do that once a month. Then you’ve got your pre-recorded audio podcast each week in between all of that. I think that’s a great model. It will be interesting to see if that generates more growth or more downloads and things as time goes by.
Carrie:
I’ll be interested to see, too. Everything is an experiment. You see what works and when it works you do more of it, and when it doesn’t you rethink.fm.
Jackie:
Yep, rethink is the same way. That’s the same way. I said 12 episodes, this is 12. We’ll see if we get picked up for another season or if we get canceled. I don’t know.
Carrie:
I love it.
Jackie:
On that note, I just wanted to talk to you. The podcast universe is growing exponentially. I’ve noticed that … We’re all doing podcasts. A lot of us have said, “Yeah, I want to do a podcast.” The one thing that’s got me scratching my head lately is, who has got time to listen to them all? Is that going to fragment the market, make it difficult for them to get a large enough audience together when there’s so many, and there’s so many interesting things going on that you want to listen to? I know, for me, one of the goals I have is to get transcriptions done for it so that it is easy to scan a podcast and read it over to see whether I want to devote 30 or 45 minutes or an hour of my time to listen to it. What are your thoughts about where we’re all going with this?
Carrie:
Goodness. You’re right. There are a lot of people constantly booting up new podcasts, and the number of them that make it to 12 episodes or even 10 episodes is … The life expectancy is rather short, understandably, because as you know it’s not easy. I think it looks easier, perhaps, than it is. But as far as the space being too crowded, I don’t know. Give any given person that you want to interview. Chances are, maybe that person has done a very similar interview on five or six other podcasts over the course of a year or two years. It’s less about the guest, I think, and more about people who care what it is that you have to say and your style and the way that you interview. Basically, they’re following you. They’re not necessarily … Whoever you bring on the show, they’ll be glad to hear from because you brought them on the show.
Fragmentation, I guess I would say that we’re not all competing for the same audience. There’s people that are going to be attracted to how I built it, which is a more technical podcast, and then there’s going to be people that are more attracted to The Matt Report because it’s more business focused. They appeal to different audiences, but we’re in a small pool, I think, in our minds. But WordPress is now powering 27% of the web, so something tells me there’s still people out there. It’s just, how do we become known or get found by a quarter of the web?
Jackie:
Exactly. There’s a lot of people out there that could gain some insight from some aspect of WordPress discussions. It doesn’t necessarily have to be developer or font end or business related. It could be DIY folks that are looking for some basic help on how to start a podcast, how to build a blog, how to do a lot of things. I agree with you on that.
Next question I’ve got jumps to your book that you’re doing with Diane Kinney. I love the title, and of course I can tell Diane’s artwork must have something to do with that layout and how good it looks. I did see an early copy of that and I was like, “I love that, it looks so good. I want to go camping. I want one of those Swiss Army knives. I want the whole thing. I want a cup with the Swiss Army knife.” Talk about that and kind of just … What’s the inspiration for that and what do you want that book to do? What do you want it to offer?
Carrie:
That’s a great question. The book is Real World Freelancing, and you’re right. Diane, before she would let either of us write a word, she had to design the book cover so that it “set the tone” for the rest of what was to come. The inspiration for it was really just, if I could go back and mentor a much younger me, as I was starting out in my web development career, this is what I’d like to say. It’s called Real World because it’s the no BS guide to freelancing or no BS survival guide. The reason is, there’s a ton of bad advice on the web about starting a business or running a successful or profitable business. I’m not saying that ours is magically going to be better, but my hope is that it’s an honest approach to what it looks like to be in the trenches every day and run your own operation and get rid of this pie in the sky, four hour work week, mentality.
Jackie:
If you were going to start over, what would be something that you would have changed right from the beginning?
Carrie:
Right from the beginning, I would have understood how business taxes work. Wow, that is a great question. I don’t think I have a very satisfactory answer on the books. I think there’s certain things that you do. I’m going to contradict myself here. There’s certain things that you do, you just have to learn by way of experience. For me, in those younger years, it was starting out solo. Then it was contracting for a development firm. Then it was me and five of my friends trying to make a go of an agency. Then it was back to me freelancing again, because it’s hard in partnership situation to get everybody to contribute equally. I don’t know if I would change any of that because that’s all good knowledge in my knowledge bank.
Jackie:
I remember you talking about one story that you shared, I think you shared it on your podcast. You had done some work for a client and they wanted some enhancements or a lot of changes and improvements. You went ahead and made all of these and you went to their office and showed them everything and then gave them an invoice. They were like, “We’re not paying that.” I think you had said, wow, that was a real learning experience on how, maybe, to re-approach that.
Carrie:
Yeah. That was a devastating visit that day. You’re right. The takeaway there would be communication and how you communicate about the work that you’re don’t. Really, over-communication is impossible. Well, maybe it’s not impossible, but communicate as much as you can with the client. It’s almost like a counseling session, if you’ve ever been to therapy. The therapist basically just repeats whatever it is you say, echoes it back to you. In some ways, client work is the same. It’s making sure that you understanding what it is that they have said and that they’re hearing you say what they said because sometimes that can point out some ideas that maybe weren’t as great in their head as they sounded when they were spoken out loud. That communication piece, for sure.
Jackie:
I had Erin Flynn on the show, I think on episode three. She’s really good at communicating, creating a welcome packet and an intro packet. She got me to do that with my business as well, and boy did that really open up my mind about how little communicating I was doing. Every time there’s a probably that occurs in my business now, I look and say, “Well, what could I have done to avoid this? How could communicating better, earlier, have made this go smoother?” I’ve found it’s been a big help for me in putting together all of how I work, what the process is like, and putting all that in an intro packet. That can help screen out people that are not a fit for you. Then, a welcome packet can really tell clients, right off the bat, how we’re going to work together and what the expectation is for both parties.
I like all of that. It’s got me now where I’m just automatically communicating better. If somebody says, “Hey, I’d like you to do some work for me,” I’ll say, “Great. This is what it’s going to cost. I’ll need a 50% deposit to get you on the schedule. I’ll shoot that invoice over to you.” Just the way that you’re phrasing things gets the assumption that, “If we’re ready to go, I need to make a payment and get things started instead of having those difficult conversations sometimes about getting a payment from a client to get started and just that process. When you formulate it and put it all in writing, it just makes things so much easier.
Carrie:
I love that on-boarding. That sounds like a series of blog posts you should write.
Jackie:
That is, that is very good. I like that idea. Okay, I’m going to do that. That’ll be for 2017, January, I’ll be doing that. What else can we talk about? I had some other questions for you. One was on Utility Pro. You know I’m a fan of Utility Pro because I use that as my starter theme. Do you have any plans for the future and some enhancements that you’d like to do, or are you done doing theme development? What are you thinking?
Carrie:
I’m thinking that I haven’t settled on an answer to that question yet. Going back to our earlier conversation, when you look at what’s “on brand”, theme development is not necessarily what’s on brand for me these days. The logical answer, following that path, is Utility Pro, it can live on but it needs to live on in another person’s hands. But then the other, the theme developer part of me, is like … I really love it. I love that theme and I think there’s still a ton that could be done with it to improve, seeing what’s new and bringing that into the theme or maybe adding some different workflow options. Right now, it’s highly optimized for internationalization and right to left languages. But that’s not everybody’s workflow because not everyone needs those components. Creating a different work flow that really specializes in XYZ –
Jackie:
You made it easy, though, to turn those features off in the theme. I find it very helpful, even for me, where I’m not using those specific areas, that I was able to adapt it for my workflow. I think the beauty of Utility Pro is maybe not – and this is just my opinion – but maybe not the reselling of that to DIY clients, but to developers who want to take it and make it their own starter theme and workflow as a good example, a base to get started from. Because once you start going in and making all your changes to your sass and things, you kind of get separated from the original theme. There’s not really going to be an easy way to do updates and things with that, but I think it’s a great learning tool of: this is how you should build out a starter theme.
Carrie:
Thank you, yeah. I don’t know what exactly the fate will be. I am comfortable saying that the theme will continue on and be available, whether it’s in my hands or somebody else’s. Who knows, it’s already open source. Maybe I just open up the gates.
Jackie:
Oh, dear. Open up the repo.
Carrie:
In that case, it would not be supported.
Jackie:
While we’re talking about themes, I just have one question I was going to ask you. I’m still seeing a lot of themes being sold where custom post types are added in the theme. I’m just wondering why. Why, why are we doing that? Is there really a way around it, at this point? I realize, people that build themes, they want to have that functionality in there and they want to kind of have it all pre-packages so you get the theme and you get the whole thing. But I think it is doing a disservice to people when they don’t realize that if they want to change their theme, that some of the content that they’ve entered is not going the be available to them without some intervention. Meaning, you’ve got to find out, what was the name of that custom post type and then go in and write some code to bring it back into the theme. Even some Studio Press themes have custom post types in there, and I’ve seen some third party Studio Press themes that are doing that as well. I’m just wondering, what do you think about that?
Carrie:
I think people do it for convenience. It’s nice to be able to give a complete package to a customer when they install a theme, but like you said, it is a tremendous disservice and maybe not one, depending on the experience level of the developer, maybe not one they realize until they have to face swapping out a theme that’s got custom post types. For Studio Press, I can see them doing it merely from a support perspective. It’s doing the things you’ve always done things reduces the support overhead.
Jackie:
But they also want to sell other themes, right? So they want to make it easy to switch themes, so that, “Oh, you bought this theme from us last year and now you can buy this one. This one has got a new design on it.” “Oh, but that one doesn’t have the custom post type in it that this one had.” I could see where that’s just frustrating. I think if you’re going to sell a theme then just give the plug in away with it.
Carrie:
Oh yeah, just make it a must-use plug in. It doesn’t even have to be must-use, just use if you want, if you need that post type.
Jackie:
Just use it if you want. The other thing, while we’re talking about Studio Press, was the legacy code in Studio Press, the XHTML code. I think that is going to be changing in the future and I’m hoping that that’s all going to get removed. What would you like to see happen with Genesis, going forward? I know you’re a fan of it, I’m a fan of it.
Carrie:
Ooh la la. In terms of the legacy code base, for the most part, the code still operates pretty lean, from a performance standpoint, even with that legacy code in there. Of course, if you use the actual source code as the tutorial or the documentation for working with Genesis, then it just kind of clutters up the scene. It’s very well commented, but it still clutters up things. How many customers are they up to? It’s tens of thousands, maybe 100,000 or more at this point. The idea of making … cutting off support for sites that are running those older themes, that’s just frightens me. I would be frightened for the people at the Studio Press support.
Jackie:
Yeah, because there’s a dilemma there. If they try to split it into two versions, right, so we’re going to have version three of Genesis which will support HTML 5 and it’s not going to have all of the legacy code in it. Then you have to maintain two code bases because you’re still going to have to have security updates and things for the other version. I can see where that would be a challenge. You wonder, at some point, where do you get to the point where you say, “Okay, we’re going to let that legacy code go.” It’s like IE support for IE8. At what point do you just don’t care anymore in your style sheet, whether or not it works in IE8.
Carrie:
Exactly. I think the larger dilemma exists with WordPress, a 10 or 11 year old code-base that’s got tons of legacy stuff that wouldn’t be written the way it was if it was written today. I would love to see Studio Press make a hard break, but with plenty of warning, “Hey, this time next year we’re officially retiring this and this. That gives you this much time to ..”
Jackie:
Yeah, a nice road map would be handy in saying, “Okay, for this 18 month period there will be support for both,” so everybody has a plan going forward. I would suspect there is a lot of sites that aren’t even updating their Genesis framework. That goes back to another whole topic question that I was just going to bring up. There’s been sites I’ve built for clients and in hindsight, now I think I really don’t think WordPress was probably the best option. For those that are not editing their sites at all, they’re not writing a blog, they’re not doing anything. I wonder if a static site would have been a better option than just leaving those unsupported WordPress sites out there. Have you ever had those, where you’re thinking that as well?
Carrie:
Um …
Jackie:
No, it’s just me, it’s just me.
Carrie:
No, I have had the thought. There are some earlier sites that I wish I had handled better on that communication piece of … There are responsibilities associated with maintaining this site moving forward. I didn’t always do a good job of communicating that. As far as static HTML sites, I was looking at Web Factory Limited, I just interviewed Gordon Orlick on my podcast. Their website, if you go to it, it’s static HTML. It’s not WordPress, but their whole business is built on creating WordPress plug-ins. I just had to laugh. They’re not even using this EMS on their site and that’s because, truly to your point, they don’t need it. It’s basically a sales page.
Jackie:
The site will definitely load a lot faster. If you don’t need the WordPress CMS, you’re better off not using it at all because your site is going to be much faster without it.
Carrie:
Yeah, but it’s … I get stuck in the mentality of: I’ve got a round peg and I’m going to hammer it into whatever hole I find, regardless of shape.
Jackie:
Okay. Speaking of WordPress then, the rest API, the end points came out 4.7. I know you guys were talking about it on After Office Hours this week. I liked some of the … I think Joe made a really good comment about how it’s possible to have a completely different WordPress admin. I know I’ve talked about that, Tanya and I talked about it on the first episode of rethink, about the separation of some of the functionality. Diane brought it up on your chat as well, that some things you maybe touch once when you’re working on the site and does all of that really need to be loaded up when you’re in the admin dashboard? Does all of that code need to be loaded up? Can you just have maybe configuration and content editing and administration and kind of separate those things out? Maybe there will be a time where they will be completely separated and you’ll fire one up to do some specific tasks and then fire another one up. Or, will the rest API make it possible for people to just start writing their own dashboards?
Carrie:
Own dashboard, yeah, absolutely. I don’t really want to go write all that code right now, but that’s the beauty of it is that you could attach whatever sort of interface to it you wanted and still access all the data and the structure and the way WordPress operates. I’m very glad that the rest API was rolled into 4.7, even though not all the end points are there. I know there was some debate on that. But I think, and Matt [inaudible 00:33:37] even kind of said this at the State of the Word, that he was disappointed that there weren’t more examples to point to of sites that have embraced the rest API and the really delving into the depths of what you can do with it. I think it’s … The fact that it now exists and those things are possible is amazing and it’s great for WordPress. But to date, I just haven’t seen much done with it.
I have a client right now … I know I said I’m not taking clients, but I have a couple. It’s like a drug. I can’t entirely quit. I was trying to choose between Shopify and WordPress to see what would really be the better platform for them. In the end I think that I’ll go with wordpress because there’s some features there that would just be harder to implement in Shopify. But man, I logged into that Shopify dashboard … I think I’m so used to how ugly our dashboard is that I forget that’s not the way all administrative panels have to be. It was just so beautiful and easy.
Jackie:
I think you’re right. We know it so well that we’re kind of immune to the effect of it. But if you’ve ever sat with a new client or talked with somebody who was just logging in the first time and they see all of the dashboard that it really is, it’s overwhelming for most people. That’s where the opportunity is, to create an interface that will allow a nice, clean, easy dashboard for somebody to edit their content. Most of the people that are going into WordPress to do that are not going there to update plug-ins, they’re not going … Maybe have a separate maintenance section where you do all of those things, and then have separate user access so that you can say, “Yeah, you can do anything you want on the content side, no problems,” but there’s no plug-in updates unless you have this login or you log in with this code, so that there’s no accidental problems with people using the editor, for example, inside the dashboard, or things like that. I think that we’re just so used to how it looks that we don’t realize. Then when you go to look at some of the other, competing products that people are using and you think, they designed this today to serve those clients and to make that an easy, beautiful experience for them. I think there’s a lot to be said for that.
Carrie:
Yeah, definitely. Part of the advantage that a Shopify or Wix or something like that has, they’re hosted solutions just like wordpress.com, so it’s easier to control that experience across the board. At this point, I can’t imagine a client who would want to pay me to go in and completely recode the dashboard on a one-off site. On the other hand, if I was offering some sort of a sass, like Happy Tables or Rain Maker, then yeah, it makes sense to go through and create a very tailored admin experience.
Jackie:
I think if you coupled that with the ability to export everything or transfer it somewhere else, I think that’s the big dilemma that we all face. We want to have a self hosted site because we want to have control over our data. We want to be able to move it, keep it, do whatever we want with it. You go with a hosted solution, you always have that fear that they’ve got all your stuff and they’re not backing it up properly or the company goes out of business overnight and your website is gone and you have no way to restore it. Those are all of those fears that everybody has. But the hosted solutions make a lot of sense for most people, they really do. You just need to have that flexibility. I don’t know if you can export Square Space and be able to import. I’m sure it can be done, but certainly they are not making it easy.
Carrie:
I think that is probably a true statement.
Jackie:
The WordPress dashboard is just ugly.
Carrie:
It really is, but here’s the deal. I know that there are volunteers that have spent a whole lot of time making it what it is. If you look at the improvement to it over the past 10 years, it’s leaps and bounds from what it was.
Jackie:
All right, I take that back. It’s not ugly, it’s just built for developers.
Carrie:
Oh no, it’s still ugly, it’s just not as ugly as it was. Again, working with the restraints of … I don’t know how much of that is legacy that would be difficult to retire. WordPress.com is now Calypso, is what they’re using on the back end, so will we maybe see that on self posted? I don’t know.
Jackie:
Time will tell.
Carrie:
Da da doh.
Jackie:
We’re just coming up to the end of our time. Is there anything you want to share or any good news or things you want to sprinkle?
Carrie:
I don’t think I have anything, any sprinkles. I should have something profound to say right here but, Jackie, I don’t. I do know that I appreciate you very much and appreciate what you give to the community in terms of time and information and just being a good friend and a listening ear. The world needs more of those.
Jackie:
Oh, thank you, and you know I feel the same way. I do have one thing that we can use for ending the show. You had Chris Courier on your show.
Carrie:
Yes.
Jackie:
I really enjoyed listening to that episode. There was one thing he said – I tweeted it out this morning – that he said that just really struck me. He said, “I’m not rich, but I live a rich life.” I heard that I went, wow. He’s such an awesome guy and he has touched so many people and has helped so many people. I loved the way his whole story started about he was just freely giving and freely giving, but he still had a business model in mind as well. It was such a great conversation, and I loved that takeaway.
Carrie:
Thank you. As soon as he said it, I was like, man. That’s the quote right there. We’re always chasing that next dollar or grow the business to whatever invisible level we’ve said it needs to be at. I think him saying that was so spot on. Even if you’re not making a ton of money, are you doing the work that you love doing? If you can pay your bills doing the work that you love doing, you’re living richly. I loved the way he put that.
Jackie:
That was really good. Well, Carrie, if people want to reach out to you and get ahold of you, say howdy, how can they find you?
Carrie:
They can say howdy to me on twitter at cdils, just one “l”. I like to say, “Like the pickle, but one ‘l’.” Sorry you, can cut that out. Then over at carriedils.com.
Jackie:
Carriedils.com, all right. I’m not cutting anything out of this one. We’re just going to leave it. It was just a great episode. Hey, I want to wish you a merry Christmas. This is going to air right after Christmas, but it will be that week of Christmas. To everybody, have a merry Christmas and a happy New Year and I’ll see you in 2017.
Carrie:
Thanks, Jackie.
Jackie:
Thanks, Carrie.
Dec 21, 2016 • 35min
Episode 11: Pushing more than Pixels
In this episode, I’m chatting with Cathi Bosco. Cathi is the creative genius that powers her web studio in Madison CT USA.
We’re talking all about collaboration on projects, lessons learned and some of our favorite design elements. She shares her industry knowledge and experience to help us forge a way forward in this ever changing digital age.
Let’s get started.
Meet Cathi Bosco
Creative Director, Digital Consultant, Web Designer, Artist, Illustrator, Children’s Book Author, trail runner, dog lover & free thinker…
My specialty is creating beautiful and cohesive web presence packages for clients that can convert audiences and present content elegantly (think modern and clean presentation). Our sites are built on The Genesis Framework and they function exceptionally well for a wide range of programs, communities, organizations and companies.
If you have an unusual challenge – we are all ears… tell us about your project and ideas! We don’t take on each and every proposal that comes along, but if we feel we can add value to your plans or programs, we’ll gladly get you a quote and get to work for you.
I also think CSS transitions and CSS + SVG animations are very effective slightly below the surface. Designed to feed the human reward system. Always leaving the end user ‘in control’ of the navigation but royally rewarded aesthetically. This is for upper-end projects and can also help to differentiate sites from low-end, non-custom work… when done well. We all love this stuff… transitions and animations that are so subtle they beautifully and intriguingly enhance end user experiences. Along with collaboration, they are key to forward momentum for Genesis developers and designers
Show Notes
Bio Page: About Cathi
Company site: CandDStudios.com
Twitter link: @bethebreeze
A Few Valuable Links & Resources :
Sara Soudein https://sarasoueidan.com/
Code Drops http://tympanus.net/codrops/ &
for easy reference: http://tympanus.net/codrops/css_reference/
CodePen http://codepen.io/
A Book Apart Series: Chris Coyier Practical SVG
Creative Market https://creativemarket.com/
Hot Jar https://www.hotjar.com
StudioPress http://www.studiopress.com/
InVision https://www.invisionapp.com/
Fontastic http://fontastic.me/
Frontify https://frontify.com/
CSS-Tricks https://css-tricks.com/
Rafal Tomal http://rafaltomal.com/
Typespiration http://typespiration.com/
Complete Transcript:
Open PDF version of this transcript in new window
Jackie:
Hey everybody, it’s Jackie D’Elia with Rethink.fm with another episode for you, and today I have my guest Cathi Bosco with C&D studios. Hi Cathi.
Cathi:
Good morning. Good morning.
Jackie:
Good morning to you. Thank you very much for joining me. I’m really excited to be able to chat with you today.
Cathi:
Well, it’s my pleasure. I’m pretty excited to be talking about front-end design more, and rethinking the way things are being done, so I love it.
Jackie:
Awesome. Well for folks who don’t know you, what do you do?
Cathi:
Well, I run a creative design studio here. I’m in Madison, Connecticut, and I’ve been self-employed, freelancing, doing this work for, gosh, almost 20 years now. I’ve sort of ridden the digital evolution. I started analog as an illustrator, drawing in the studio, gradually got split between analog and digital.
Now, we’re doing almost all digital work. I got involved with WordPress because I’m a trail runner and I run with a group of crazy wild animals, and one of my chief runners ended up being a really good mentor to me, and brought me from drawing into WordPress for our team site.
He’s very involved with IT, Jerry, and he’s taught me to manage the team website, years and years ago. I just kept learning and doing more, and doing more, and doing more websites, and people referring me, and learning.
Now we do full-time, upper-end, mid-end, low-end web development design: logos, all kinds of photography, product shots, e-commerce, everything. That’s the long story short.
Jackie:
What percentage of your work that you currently do now involves WordPress for your clients?
Cathi:
Well ,all of the websites we develop are developed on WordPress, but we do a lot of the supporting work, as well. We do all of the imagery, logos, slogans. We have a copywriter we bring on to jobs. We work with other company’s copywriters and tech departments. We do all of their social media, graphics, stylizing. We do a lot of training with clients so that they can manage things on their own.
I spend a lot of time bringing clients up to speed with more recent, better ways to do things. I think that’s really leveraged our studio to offer that kind of training and teaching to people has given us a real advantage.
Jackie:
Do you find that you get a lot of referrals from existing clients? Is that how you’ve built up your business?
Cathi:
Exclusively.
Jackie:
Wow.
Cathi:
Exclusively. The only advertising I do … I fell into this as an annual activity. Friends or non-profits or really good charitable causes will come to me and say, “Could you, out of the goodness of your heart, make a website for us?”
Sometimes it’s a relative or something, and you’re like, “You know, I can’t because I’m really busy and I’m not really making enough money that I can just give my work away for free.”
Every year, in January, we allow people to nominate themselves for a free website. A free web presence package ’cause I’ll give them some social media stuff and e-mail marketing and tips like that, too. I give one free site away to one applicant, and that’s my advertising expense for the year.
This year, we did a science talk. It’s a coffee chat, science talk group out of New Haven, Connecticut called Tilde Café. It’s a non-profit. They bring in the most incredible speakers every month or every couple weeks to talk about science and bring it into every day conversation level: high science.
Her group got the free website this year. Those are kind of fun because you can … Because it’s free, you can kind of play around a little bit. Add a few things, make it your way, you don’t always have to make it the client’s way, but she was great to work with. That was entire advertising expense this year other than giving back to the community and doing some design work or logo work for fellow devs.
Jackie:
That’s awesome. Do you typically just give away for non-profits or is it anybody? Small business?
Cathi:
It could be a small business. It could be a non-profit. The year before, we did a children’s book author. We created a website for her, so she had a better platform for her book. She’s had many, many books published over time. She’s a great teacher: BoyWereWeWrong.com. She has a whole series of books.
Her books are published in Mandarin and all over the world. When you do a site like that, you can get a nice portfolio piece and people share your work and word of mouth, so that’s been great for me. It all started with the running club site ’cause all of my peers got to see that site.
Jackie:
Now I want to ask you … You come from a graphics design background, right?
Cathi:
Right.
Jackie:
I’m just curious, how do you approach design for your clients? Say you have a client that needs a new website or new branding. How do you typically approach working with your client and collaborating with them to find out exactly what’s going to be the best design for them?
Cathi:
Well, it involves a lot of listening and talking back and forth. Then looking at inspiration in the wild of things that resonate so that I have visuals to show them of where we think we need to go. Everything starts with the logo for me in terms of design. Logo, slogan, that sort of thing, and everything just builds off from that.
Those logos need to be, well, ideally, SVGs, right?
Jackie:
Awesome. Yes.
Cathi:
Scalable vector graphics. The logo itself has to be a vector graphic so it can be used on the coffee mugs, or their hats, or whatever they need it for in their industry. Then it has to tell the story of what they need told about what they do.
It all starts with that, and then we start talking about the imagery, and photos, and then we do photo shoots, and we start building the story you want to tell. There’s nothing worse than trying to get people to go to a symphony orchestra, when you’ve got a picture of a man standing in an empty room, with a giant orchestra hall behind him.
I prefer imagery that tells us what it’s really like to experience that and be there and be part of it, with people enjoying the concert. That translates that really exciting moment when everybody plays the first chord. That’s what you want to sell, not a silent, empty, orchestra hall.
I sort of try to give clients a new way of looking at things. I think that’s what artists do. They give you a new perspective or a new way of looking at something. That’s a big part of my role with clients.
I love that work, and I love collaborating with developers more now, because then I can do that work instead just worrying about coding. It’s been nice to get to the stage last year. Last year, I was at a stage in my career where it was like, “All right, I’ve really got to get better at coding, or I’ve gotta start collaborating with someone who wants to just work behind the scenes more, and do the code work, and maybe not interface with clients as much. Who’s not a designer.”
I had to do one or the other. I couldn’t do everything, so I got good enough at code that I could tell if a dev really had the skills that we needed for a certain project or not, and that was critical.
It’s hard to tell what devs are good at what things. I collaborate with Joe Julie, regularly. He does a lot of the back-end, custom development stuff for client projects. I’ll subcontract to him, and he’ll subcontract to me sometimes, depending on where the job comes from. That’s been going terrific. I have to learn not to just keep pinging him in Slack. This question, that question, this question. I have to give him a sheet with all the questions.
The communication learning is important when you collaborate. I also collaborate with Rita Best. We’re doing web applications and mobile apps and things now for clients, so I’ve got a couple of good collaborations.
The orchestra, for example, that I work for, I want them to have an app eventually.
Jackie:
Do you think you’ve reached a point in your business where collaborations has a lot of benefits for you? Is it helping you get larger projects, things that you could not do by yourself? I know you had mentioned to me, when we were chatting previously, that you had done this mobile app with Rita Best, and that you had done this project for your client, and that sounds like something you probably would not have tackled on your own.
Now it creates a lot more value add for you. How do you kind of know when you’re at that point where collaboration is gonna make sense?
Cathi:
Well, I mean, like everything, I’ve learned the hard way. I’m like, “Hoh! I’m drowning underwater. I need help!” I mean, honestly, that’s pretty much how I figured it out, but now I’m smarter and I know better.
Yes, so this app that we created for a chiropractor is a program. It’s a reminder app that her patients use to remind them to change the elastics in their braces, so it’s for kids, and it’s a little reminder that sends push notifications to their phones.
They’ll use the app for a while and then they won’t need it anymore. We’ll be adding some more functionality to that. That’s just a really simple, basic app, built on WordPress, that I needed Rita’s help with, so now Rita and I, we just are ready to go crazy with this kind of stuff. ‘Cause it’s so much fun.
It’s another business vertical. It really is. In many ways, it’s bigger than website development in terms of the personalization, integration, and all of the resources you’re calling upon to make it work.
Jackie:
Where do you see value going forward with clients? I know I’ve talked to a lot of folks lately about just doing WordPress websites, the design and the development of a website is just one part of the services that you can offer clients that really add value.
Where are you seeing the most needs from your clients that you’re able to provide those additional services and strengthen your relationship with your client?
Cathi:
Well, it depends on the clients, so up until this last year or two, I had like a lot of small clients. The pizza guy. His needs are pretty basic. He needs to be able to tweet out his daily specials and manage his own website.
Now, when you’re working with a larger scale clients like universities or industry leaders that are international. Those big jobs. Those are completely apples and oranges. I’m focusing more on the larger jobs because I’d rather do two or three or four or five large jobs in year, then have 15 or 20.
It’s just a nice change for me. We get to do bigger things. One of the things that I’ve started doing, which I’m really excited about, is style guides. Living style guides. I have an e-commerce client, and I’m building style guide for them. It’s women’s sports apparel company: SportPort Active.
We’re gonna do a style guide for them so that all designer or social media provider or agency that works for them, doing their work, they can just refer to the style guide. Pull down a logo, pull down a slogan, pull down code, styles for buttons on the websites, all that stuff, ’cause everything is digital for her. Everything is one the website. There’s no brick and mortar.
Creating these living style guides, put in their SVG icons, put what are allowable animation, activities. You only want animations to trigger on loading the page, on scrolling, or hover. Put those restrictions in so the company itself isn’t always trying to keep everybody on the same page with meetings. You can just pull it up online. You can see what all that is, and pull it down. Keeps everybody working in harmony.
Creating style guides is some place I’d like to be doing a lot more work.
Jackie:
What do you use to create your style guides with? How are you putting this all together?
Cathi:
Well, we’ve been using Frontify, which is a service, Frontify.com. That’s one. Pattern Lab has a nice set of style guides. It’s kind of new to me doing these really formal style guides with larger companies, but it’s terrific.
It’s just like when you make a website for a small business. It makes them evaluate all this stuff, but when you do a living, breathing style guide with the company, they have to evaluate and complete and style and all this stuff, and it makes it beautiful for the developers.
The developers can then just refer for the style guide for code, page design, messaging, content creators can. It’s just critical, so I’m working on adding that as business service that I offer more, and honestly, I’d love to talk to more front-end designers, too, to see what they charge for this. ‘Cause it’s hard to charge for this service for me, not having done as much of it in the past, and it depends on each client. Because each client’s job is a per project scale.
Jackie:
Do these style guides you put together, is this typically after you’ve done a project with them, or you getting ready to do a website for a client, and you’re putting together some kind of preliminary style guide as a way to define how the website’s gonna be built?
Cathi:
Right, originally, I always do like a preliminary one, but as a service, I want to provide them with a real style guide that covers everything for them. That is one of the service verticals you’ll get in your website, you’ll have all your social media graphics, and your e-mail template created.
A lot of times we’ll do a lot of photography for clients, illustrations. Any icons that we make, and then we build out a style guide as well as part of the package for upper-end jobs. It’s one of the deliverables at the end is the style guide.
Jackie:
Are most of your clients local in your area? Sounds like if you’re doing photography shoots for them, it sounds like they could be in your area and local.
Cathi:
Well, some of them are, but sometimes we’re hiring photographers on location and, no, most of my clients are not local anymore. That’s good and bad. I like getting in the same room.
Jackie:
How ’bout risks on collaboration? We were chatting about that, and when you first start off, and you’re just by yourself, you’re working with client, you can manage all of that because you are that relationship. What things you need to be mindful of as far as protecting your brand and your relationship with your client. Are you having to do project management for these? How do you manage that risk?
Cathi:
My role is typically that of onboarding with clients, talking with them extensively about the project, presenting the proposal, going over any questions. I bring the developer in for a kick starter meeting so that we can all make sure we’re on the same page after proposal’s been accepted.
Then I do the project management, so I’m the one telling the client like, “Well, we’ll have that done Friday, and you know, things happen sometimes.” There’s a leap of faith. There’s a trust element there that I feel for my side, and I’m sure my developers do, too, because they expect certain things from me in terms of communication.
Like I said, they don’t want them to ping them every hour as I think of something that needs to be done. They want me to send them a sheet. I’ve learned the hard way that that’s the way to work. That communication and trust back and forth, too, make sure with the lay person who might be the end client, chief level officer on their board, does not mean they know anything about developing a website for development or what we’re talking about.
I end up being the communication gap between the client and the developer, and filling that. That’s part of my job. I do the design work, then it gets developed, then we deliver it. I’ve doing a lot of the maintenance work, but I’m looking forward to maybe off loading that to developers instead.
Jackie:
How big of a effort is put on content creation with clients? I’m asking this because clients seem to have difficulty with creating content for their website, especially small to medium businesses do.
Even the larger ones seem like they just … You can’t wrangle people enough to have time to get the information that you need, how do you manage that process throughout your development?
Cathi:
It does vary, again, with small jobs and big jobs. Like corporate jobs, when you’re doing jobs for corporations, it’s like how can you get like people who work at the job to all agree on what should be on the site? That’s the biggest challenge in those jobs.
One of the great things about working with, Joe, for example, is he’s SEO certified, so he can do some keyword research, and search what the competition’s doing for clients. They love that. It really motivates them to write their copy because they can wrap their head around the power of that and the competitive nature of that.
One of the greatest things last year was using HotJar. Have you used HotJar before?
Jackie:
Yes, I have.
Cathi:
It’s fascinating. You can record how people use websites, really useful in e-commerce. I love seeing how people are navigating around on sites and how they’re using it. When we show clients that, it also motivates them to care about what they’re putting on there.
Strange, so the competition gets them going. I know some studios are very strict. They won’t even start designing until they have copy in hand, and I can understand why it gets to that point.
Jackie:
We were chatting one day about e-commerce sites and how much more work is involved in putting those together than just a traditional website for clients, and that many of us have underpriced those in the past, not realizing how much time and energy is gonna go into rolling out an e-commerce site.
Can you share your insights on-
Cathi:
Oh, man. I’ve underpriced so many jobs. I’ve learned everything the very hardest way you can learn it, which I suppose is a good way ’cause you learn it, but it’s incredibly time consuming, and it also matters how much the client’s gonna be managing after you deliver the finished site and how much you’re gonna be managing.
Jackie:
How ’bout educating your client on the extent of a project of this size for an e-commerce? How do you communicate to them what’s really involved in building an e-commerce site? Other than just adding a shopping cart and some items.
There’s a lot more to this.
Cathi:
There’s a lot more to this. I charge them for that training time. We schedule days where we sit down and we have like sessions, either virtually on the computer, or I’ll go to their offices, or they’ll come here sometimes.
My desk is a big table. It’s a classroom setting here. When I tell them the training time, it doesn’t take long, as the training begins, for them to recognize that, “Whoa. This is a lot.”
There’s variations, and pricing, and competition, and search engine optimization, and AdWords, and retargeting ads, and social media, and all of those kinds of things are extremely time consuming.
Once you start doing Google Ads on a e-commerce site, or anything like that, you are constantly going in back in there, and like refreshing it. Just like you take care of your plants, you clean them, and you water-
All has to be nurtured, so I use the garden analogy a lot. I’m like, “You let it go to the weeds, you got weeds.” You’ve gotta keep taking care of your garden, and they all laugh at me when I say that, but it’s really true. It’s a living, breathing thing.
Jackie:
Yeah, I think that’s very true for e-commerce sites, especially. Now, even just traditional websites, they still need maintenance.
If you’re trying to rank in search engines for articles you’re writing, for content you’re producing, whatever it is, the reason that you have your website for, it’s a living, breathing thing, you have to keep revisiting that all the time. You can’t just publish it and forget about it.
Cathi:
It’s fluid. Things are changing, the person that they’ve been relying on to do it might not be up to date with what really should be happening with it. It’s treacherous out there, but it is a living organism in an ecosystem called the Internet.
That’s what I like about the series of atomic style sheet because it goes from atom to molecule-
Jackie:
Brad Frost.
Cathi:
Brad Frost. Yeah. It’s great, it’s great. That’s been really good for me to see and think about the way he’s working with clients. I’d like to know how he charges for style guides, too. I’m gonna have to ping him up and ask him about that.
Jackie:
I think you should.
Cathi:
I think I will.
Jackie:
I think that’s a great idea.
Cathi:
I will. I have a few resources to share with you, or design work. One is Rafal Tamal’s site, Typespiration. Have you used that before? Have you seen that?
Jackie:
I have seen that yes.
Cathi:
It’s very useful for inspiration. You can get typesetting situations, see them displayed, and he gives you the code with it, which is great. I love all his stuff, and I love all of the CSS animation on the cover of his website. Huge fan, very subtle, hover over it, and then you see a little bit more.
It’s just very royal. I always like the way he uses everything, so his stuff is good. The “A Book Apart” series … I’m in the middle of “Practical SVG” by Chris-
Jackie:
I just got that one, too, and I’m reading that as well.
Cathi:
It’s so great, and he’s responsible for Code Pin, right?
Jackie:
Yes. Chris Coyier.
Cathi:
Yeah. Yeah, right, so CodePen, if developers or designers have not used CodePen before.
Jackie:
I love CodePen. It’s great.
Cathi:
Take a couple days off for the week and plan to get lost over there for a while.
Jackie:
Examples to see and to explore, and I love that you can just live edit it and play with it. It’s a great educational tool to understand how code works, even just some simple things that you can do. It’s awesome.
Speaking of SVG, I know you’ve mentioned that. I’ve been really interested in incorporating that a lot more into my work, and I know you have. We’ve chatted about it several times, and it seems like we’re coming to the point where it’s becoming much more mainstream.
CSS Animations and Transitions was a course that I took on Treehouse by Guil Hernandez, which I loved that one. It was very good. It really helped me understand how use it, when to use it, what are the benefits of that.
Some of the downsides of this are, and we were chatting about it is, when is too much on animation and transitions on a website? What’s your philosophy on how you’re approaching it?
Cathi:
Right, right. We talked about this a lot. I agree. Those are great videos and it helped me. ‘Cause we’re in parallel universes. We’re learning some of this stuff along the same tracks. Well, I think it can be way, way, way too much. There’s something that triggers the human brain when it sees motion. It’s called “fight or flight.” Hunt or kill, that kind of thing, and I’d never want to trigger that stimuli to someone.
I don’t want to increase any sort of stress level for an end user on a website, ever. I think that the transitions in animation should be kind of under the surface a little bit. They should be a really magical reward for someone who’s beginning to actually participate in the site.
Little reward systems like on hover, or on load, something happens, very like, “Oh, let me see that again,” or “Oh, this is … This is pleasing and feeding my human reward system and it makes me want to, A, come back to the site again, B, go further in the site.”
A designer or an artist can design it to enhance the overall message mission of that particular site. If it’s a membership site or if it’s a corporate site, whatever the angle of that particular site is, it should all feed that tag, that slogan, that mission, that work. It should all be part of that same style guide and plan.
I really think that it can help with engagement. It can also help if you can collaborate with a friend and designer like yourself or someone to bring this to your site. You just don’t want to get involved with it. You’re not a designer. You can’t tell what looks visually pleasing. You can’t connect it to that business’ mission.
Well, collaborate with someone like a friend in design, or an SVG expert, or an animation expert. Someone who does that well, and you’ll be able to leverage up and get bigger jobs and better jobs ’cause you can charge for that service.
Some of my local guys can’t maybe afford that kind of styling, but you go for bigger jobs that way.
Jackie:
Do you think that some subtle animations can help with accessibility as well?
Cathi:
I gotta really work hard to understand accessibility better. I had the privilege of learning about accessibility in terms of color blindness when I was working with Rian (Rietveld) and Gary (Jones) on some stuff, so I understand that, and contrast ratios, and color work.
I don’t fully understand the accessibility parts that go along with animation, so that’s on my list of things to learn. I think Sara Soueidan has a lot of information on that, too. I love her site Codrops. The reference guide there, so we’ll put that in the notes, too, for everyone.
I need to learn more. I need to learn more. There’s just not about hours in the day.
Jackie:
The challenge that I had like when I was doing Rethink’s logo, ’cause I wanted the gears to turn on the logo, and of course, it’s a WordPress site, so you gotta get the logo into the code, so that you can animate it.
You can’t animate it if you’re just using it as an image for an SVG, you actually have to bring it in, so I had to write a little plug-in to do that to get it to come in. Once I started working with it, I realized, okay, it’s a lot of just CSS and HTML, really. You’re just assigning classes and identifiers into your SVG elements, and then you can assign CSS transitions and transforms to them to get them to animate in there. The same way you do on a PNG file, but you can do a lot more because you can change colors in them. You can do a lot of things with an SVG that you cannot do with a PNG or anything else, or even just a basic image in there.
I do like … Maybe if you hover over an image, it just enlarges just a little bit slightly. That I have to check with Rion on, whether or not that’s a thumbs up … If that improves accessibility or not. I’m thinking it might trigger to somebody, yeah, there’s something here that’s changing here. There’s something that’s clickable here. I’ll have to follow up and find out with that, but I do like experimenting with those things.
I totally agree that you don’t want to go overboard with those things.
Cathi:
Yeah, it really makes a huge difference, but you’re amazing. You’re like, “Oh, and I wrote a little plug-in to do this and do that,” and I’m like, “Why. Wait, wait, that’s not nothing.”
Jackie:
Actually, that plug-in was very small. It was not a lot of lines of code at all, but it enables you to use a short code to embed the XML code into your WordPress page or post, so that if you choose to do something to do it.
Maybe you just want to change the color of it when you hover over it. Like if wanted to use SVG icons or something, and you wanted to be able to make those kind of changes where it would need to be in the HTML in order to be able to do that. That plug-in was the beginning of my work on that. I later figured, then, okay, if I’m in places where I’m not gonna be using a short code, well then I can use that code to embed it programmatically in widget areas and things like that.
That worked out really well. That was a great, fun project to do.
Cathi:
Yeah, yeah, it’s awesome. It’s really great. I’m always working, breaking things down. It’s like, when I first started, I was an illustrator, so I needed a website to get my portfolio online, so that’s how I got involved with the web to begin with.
‘Cause I’m so old, we didn’t even have digital photography in college. It was analog. We did filmmaking the old way. I’ve been lucky. I’ve been able to ride the wave and I have unique perspective because I’ve experienced both ends of that, which a lot of people don’t have that opportunity. They get left behind actually.
Some of the design elements I’m gonna share with you, too. I’m gonna write in my blog post that are so basic and fundamental, I was stunned by how much of my work is removing stuff, stripping it down. Do all these mock-ups and designs. Then I’m just like, “Remove this, remove this, remove this, remove this, remove this,” so I never thought that my work would be about removing stuff and stripping things down.
I always thought being a designer, being an artist, sculptor, it was additive. I’d put this together, I’d put that together. We’d add all these resources, and that would be what this type of work is, but design work is very much the opposite.
There’s some of that, but it’s really once you have all the resources, and dissolve all the problems, design work is about removing stuff.
I want to share some design elements with you guys about position on the page, overlap, density, saturation, size, scale, color. I’m gonna do a little graphic to share, too, that will give non-designers, like a little cheat sheet.
Jackie:
This is gonna be the show notes I’ve had so far. I’m really excited about this.
Cathi:
Little cheat sheet for you.
Jackie:
Awesome, and you’re gonna write a blog post, too, you had mentioned summarizing some of the concepts that you’ve been working on. Look forward to sharing that as well.
Cathi:
Yeah, I really want to see Genesis devs doing more with SVG animation and CSS animation. I think it’s the key to taking us up to the next level, even more, because it’s obviously the best framework. Everything we do is on Genesis.
Jackie:
Me too, and I saw you were in the Genesis Slack channel, and you were chatting about … I think they were talking about themes and a lot of the Genesis themes don’t have the animation and some of the more interesting designs, I guess, from that perspective. They’re certainly doable, and just taking that little extra time, if you’re gonna be changing a color or underlining something or doing something on a harbor, to just add a little bit of transition time and can make all the difference in how smooth things move along on the site.
I think a lot of us don’t take that time to add those extra things in.
Cathi:
Right, and when we big jobs and projects, we need to budget for that time, and budget for that kind of thoughtful, composition work I think. That’s what I would encourage everyone to do.
Jackie:
Yes, and making sure you’re supporting all the browsers and everything else. That all needs to be taken into consideration.
Cathi:
Yes, all of that.
Jackie:
Yes, absolutely. I wish we had more time. We’re already at the end here, Cathi. I so-
Cathi:
Aw thanks.
Jackie:
… enjoyed-
Cathi:
I rambled on.
Jackie:
No we both did, but I so enjoyed chatting with you. Thank you again for being on the show. If folks want to get in touch with you and find out more about what you do, how can they reach you?
Cathi:
Sure. They can reach me at CandDStudios.com or CathiBosco.com, either one. Thank you. Thank you for shining a bright light on some of these front-end opportunities. You’re welcome. Thank you. Thank you for being on here. You’re the one that’s making it possible.
Jackie:
Well, I hope you have a great week, and I’ll see you next time. Thanks.
Cathi:
Thanks Jackie.
Dec 14, 2016 • 34min
Episode 10: Exploring Local Development Environments
In this episode, I’m chatting with Matt Pritchett. He is a UX developer and lives in Tennessee.
We’re talking the good, the bad and the ugly about local development environments. What’s out there now and why Matt plans to build one of his own called AnchorWP. Matt is a super smart guy and I’ve had the pleasure of being in a weekly mastermind group with him this year.
Let’s get started.
Meet Matt Pritchett
Matt is known for transformational WordPress development and bringing integrity to each relationship, sale, project, and interaction.
He’s a developer, blogger, business owner, product maker and proud husband and father of three.
Show Notes
Matt’s Website: Pritchett Media
Matt’s Blog: Matt’s Blog
AnchorWP link: AnchorWP
Helpful Links:
Desktop Server
MAMP & MAMP PRO
Vagrant
Varying Vagrant Vagrants
Docker
Local by Flywheel (formerly Pressmatic)
VersionPress
Migrate DB Pro (Awesome!)
Complete Transcript:
Open PDF version of this transcript in new window
Jackie:
Hey everybody, it’s Jackie D’Elia with another episode of Rethink.fm for you. Today, I have my guest, Matt Pritchett. Hey Matt, how are you?
Matt:
I’m doing well, Jackie, how about yourself?
Jackie:
I’m well. Thank you very much for joining me. For those folks who don’t know who you are in the community, would you introduce yourself and tell us what you do?
Matt:
Sure, my name is Matt Pritchett and I hail from Atlanta, Georgia. I am a UX developer at Lift UX. We are a small agency that focuses mainly on UX development and design. We’re scattered all over. We’re a remote first workplace. We’re scattered all over. We’ve got people in Florida, and Texas, and Michigan. I’m the only person in Georgia for now, but we’re scattered all over the place.
Jackie:
Very cool. When did you start as a developer?
Matt:
I took my first developer position in August of 2007, straight out of high school, actually. I worked for a small missions non-profit that sent high school and college students overseas. I took the position because I was interested in non-profits and the church world. I spoke fluent Spanish at the time and I know I don’t speak it fluently anymore. At the time I did and I served as a translator for them and took teams overseas. Part of the role and how they were able to hire me was I was the director of multimedia, which basically meant I took care of hardware and software. I had to learn how to do websites. I started out with table based development in Dreamweaver, like a lot of people did, and taught myself from there.
It’s been a journey ever since.
Jackie:
You didn’t start off developing in WordPress then. When did WordPress come into the picture, and how big of a part of it is in your daily work now?
Matt:
In August, I started that position. By December of that year, part of what my role was they had this ancient PHP system that allowed teams, when they were overseas, to upload these text and picture based updates so parents could keep an eye on their kids while they’re overseas and make sure they’re not in harm’s way or anything like that, but this thing was so ancient that anytime you touched it, breathed on it, looked at it the wrong way, it fell apart, it errored out, it deleted things. Honestly, I found WordPress because I was in trouble with my boss for having deleted a bunch of the updates from previous trips on this system. I was like, “I don’t understand how this system works. We need to replace it.”
I’m in trouble, I’ve got to figure out a quick win, and I came across WordPress and it was the answer to a prayer, almost.
It was easy to use, we could do exactly what we needed to do, it worked on terrible third world internet connections. You could use it on slow internet connections. Started doing, basically, blogs from there and we built several custom themes and that led to building custom websites on WordPress. From there, I took a couple of freelance positions. I moved on from that job and went back to college and put myself through college waiting tables, but also freelancing on the side. From there, I actually took my first development position out of college as a WordPress developer working at a very large church. I was the only developer on staff so I got to do things however I wanted to do. I learned a lot of bad habits that later were corrected.
From there, I actually took an agency position as a WordPress developer, and since then I’ve taken several more agency positions, but they’ve all been in WordPress. WordPress is 100% of my job these days. At Lift, we’re actually doing some pretty cool things with WordPress that aren’t just typical HTML, CSS, JavaScript, PHP. We’re doing some different things with more JavaScript frameworks and those kind of things, but it’s still mostly WordPress.
Jackie:
That’s a lot.
Matt:
Yeah.
Jackie:
It sounds like your experience with WordPress is very similar to a lot of other people that just started off working in it and then tried to formulate a workflow and improve your work habits as you go working with it. I’ve had the same experience.
We wanted to talk about local development environments today. That was the inspiration for us chatting. We’re in a mastermind group together. I know you’ve been rethinking some things. I thought this would be a great opportunity to just talk about it. There’s many different ways to do things, and I think, for some folks that are just starting off, it can be daunting to figure out what direction to go and how to do things. I know I wrote a post a couple months ago about my code journey for the past three years. When I first started on that journey, I wasn’t developing locally. I was talking about how I transitioned into developing locally and why, and what impact that had on my workflow and everything.
Basically, the reason we wanted to have this chat was to just talk about that and just talk about where you see the future of local development environments going and what role you want to play in that.
Matt:
When I started, I definitely did not start out with a local environment. It was cowboy coding all the way. Obviously, that’s not something I recommend now. I think a lot of us, that’s how we got started. It’s not something I recommend today, but at the same time, everyone gets into this a little bit differently. I think I started working with local environments probably some time in 2008 with xampp at the time. Back in those days, you had wamp,MAMP, and xampp. Those were pretty much your only options. You didn’t have things like Vagrant, or ServerPress, or Docker, or any of those kind of things.
I got started with that. It worked, but it was fairly clunky. A lot of the times you had conflicting port problems. There were just a lot of issues with it. It got better over time. New technologies came out. I remember the first time that I installed Vagrant. It was amazing because you could configure everything. It took forever to get set up on it. I remember trying to convince our department at the time to switch over to Vagrant from a homebrewed installation of PHP and MySQL that we could basically pick up environments and put them on everyone’s computer and they would be the exact same and how awesome of a concept that was, but it was such a hard sell because I, essentially, had to take every developer into a conference room, one at a time, and get them set up on this Vagrant box, because there were so many bugs in it at the time. It would take an hour, basically, for every development.
At an agency, an hour of a developer’s time is very expensive, especially when you’re talking two developers and my time, basically, taking a department of developers to do it, it was way too expensive. Vagrant’s gotten much better since then. You have projects like VVV that WebDevStudios started, and that’s being improved by the community now. You have projects like Mercury by WP Engine, which is a great Vagrant box and mirrors their own environments very closely.
Jackie:
On that point, can we just roll back for one second?
Matt:
Sure.
Jackie:
For some people, like when I just started on my journey, I’m using, right now, for my local development environment, I’m using Desktop Server. In this install that I’ve got, I’m fixed on a PHP version. I can’t change my PHP version for that environment I’m running. In this way, yeah, I’m similar to what typical hosts I’m using, but I don’t have that flexibility to customize my local environment to match an environment that my product is ultimately going to be deployed on.
Some of the projects that you just mentioned, it sounds like there’s two different ways that this is handled. Some where you can actually configure your box, your local development environment, to emulate where you’re going to be hosting your site later, and that’s an advantage. Can you just talk about that?
Matt:
Yes. Essentially, at the current time, you have two silos of local development environments. You have ones that are very configurable but are mostly command line based, so you use something like Terminal on Mac to start them and to configure them. You have to edit .com files and all this kind of stuff. It’s very back end developer-y system admin focused. Then you have the class that essentially you have a nice user interface, a GUI, something like that, something like a Desktop Server, and those are, for the most part, and I think that’s something that’s changing, but for the most part currently they are very static. You don’t get to change PHP versions on the fly. You can’t select between NGINX and Apache.
Doing things like remote tunneling is most likely outside of what they do, and editing them is either impossible or very difficult. You really, right now, you’re stuck between you’re either responsible for everything and it’s very configurable, but it’s very difficult to configure for, say, somebody just getting started or someone without a lot of command line knowledge, or you can have something that’s very easy to use, but not very configurable, especially on the fly. We’re started to see a migration away from that with things like Docker.
Jackie:
What’s that? I’m not familiar with it.
Matt:
Docker is a newer technology. It’s been around for, I think, a couple of years now, but it’s really just starting to go mainstream. Docker is a series of tools and an application, I guess you could call it. It can be a little hard to define. It’s the idea that everything in your environment should run in a container. It should have its own box. PHP should run in a box. MySQL should run in a box. Apache should run in a box. You can take these boxes and package them up into an image and then just run that image, and run it anywhere. It’s very configurable. It’s very interchangeable. You can change out boxes on the fly. It’s a way to compartmentalize things and then be able to change and add and adjust those boxes as necessary, quickly, and be able to reproduce those things quickly.
Docker just released Docker for Mac which is probably the simplest way to setup Docker for most Mac users, which I think most of the WordPress community are Mac users, but they do have for Windows and for Linux. Docker for Mac, you install the application and literally you run one command and you’re ready to go. Docker has a huge library of different environments that you can run. They have a WordPress one that you download it and you have a WordPress environment that’s ready to go, that’s completely Dockerized, as you say.
The nice thing about that is it’s taking all the benefits of Vagrant, with the configurability, and you can edit things, their .conf files. You can get access on the command line, but it’s packaged it in such a way that anybody can work with it. You’re able to switch out PHP versions on the fly, you’re able to scale it up to thousands of machines if you need to, but at the same time, you can do it all from a user interface that’s really nice and easy to use. It’s still got some challenges to overcome. The community itself is still relatively young. There’s some interesting issues on the licensing. There’s a for-profit company that owns Docker, but it is technically open source at the moment. That’s still playing itself out in what that looks like, but it is a very useful technology that I’m looking forward to what it has in store.
Jackie:
Based on that, what would you describe your ideal local development environment to be for somebody who’s freelancing and then versus somebody who’s working on a team in an agency environment?
Matt:
Those are very different. That’s an excellent question. Your environment and the way you develop affects how you setup that environment. If you’re working on a team, you need to be able to replicate code between team members and have very similar, if not exact the same environments so you can duplicate bugs, so you can all see the same thing, and to do so based on the environment you’re developing for. You still need to do that as a freelancing, but I would say it’s less important. You can do things however you want, whereas, obviously, on a team you have to come to some sort of consensus.
As a freelancer, which I do freelance work, I’ve used a little bit of everything, however I would probably say my favorite currently would be something easy to use, a Desktop Server, a Pressmatic, something like that. Something that’s easy to use and it doesn’t require a lot of my time. Whereas, on a agency level, I would say something that is easily configurable because I tend to do a lot more enterprise-level clients and their production environments are a little bit more complicated and we want to be able to match those because we see a lot more environment level bugs than you do on small non-profit side, a small business site. When you’re talking about things like load balance or caching and those kind of things, you want to be able to mimic those environments as much as possible. That’s when I suggest pulling in either a Vagrant or a Docker or something like that.
Jackie:
That makes it much easier in the agency environment to develop in the environment that it’s going to end up running on, so it just makes it easier to do better unit testing and making sure that everything matches and works properly. In a freelancing local environment, you’re typically on some Apache server, like a Siteground or WP Engine. There’s not that much differences in those environments, I guess. Using something like a Desktop Server, or Pressmatic, or MAMP PRO, or one of those products, sounds like that’s going to be okay.
Matt:
I think there’s a little bit of … You want to save as much money as possible, as a freelancer, because your time is money. As an agency, especially in the enterprise, you’re actually going to save more money getting the environment as close to production as possible on the front end, to save time in the back end. Whereas, I don’t think that’s always going to be the case as a freelancer.
Jackie:
Next question I had was, just talking about one of the next challenges I’m going to be having in my workflow is pushing my local changes to a staging server, or to a production server. I’m building out locally. With Desktop Server, you can push the whole site, but then you have to push everything. Every time you make a change you’ve got to do this push. You do have an option to just push the database only, and that’s fine, and then you can go in and push your file separately through SFTP or SSH and go in and push those up, but ultimately it would be great for the next step would be to be able to push your changes through some task runner or something that would just automatically push those up to whatever destination you want them to go to.
Where’s things going with that? What options would I have, as a freelancer, to do that?
Matt:
Sure. There are lot of options out there. I’ll say right off the bat that I think there’s a lot of room for growth in this area, which is the reason we see projects like VersionPress. VersionPress is a new up and coming project. It’s actually been open sourced quite recently. They’re working on essentially GET versioning for database improvements. Every time you would write an article, you would essentially check out a branch of the database, and you would write it and make changes and make, essentially, commits, before merging that back in. It’s something that I would not use in production quite yet, but it is making some really strong headway on something I’m definitely keeping an eye on.
However, tools that are really available now and that I use everyday, you’ve got a lot of GIT based deployment things that you can use. I know WP Engine has a lot of great tools that are built into their product for both migrating code and migrating the database. They’ve got a plugin that’ll actually migrate your site for you. That can be used. I use Migrate DB Pro a lot, by Delicious Brains. Those guys are awesome.
Jackie:
I love that. I love the media files, being able to sync up those media files and push those up. That solves a big chunk of my deployment. What I’m only left with, then, is my code. If I’m building out a child theme, I’ve got my child theme folder that I need to pack up for distribution and then push that up. That’s my point right now where I’m looking for how can I automate that process?
Matt:
We use a thing called DeployBot a lot, which is a GIT based series of commands. You can set it up several different ways. One is to run a git-push to a certain branch, and that branch is then linked to an environment. So you can have a staging branch that pushes to staging, you can have a QA branch that pushes to QA, a master that pushes to production. That’s certainly a way to do it. We use that quite often and there are several services out there that do that. GIT has its own deploy system that you can work with. I’m not as familiar with that one. We don’t use it just because my initial research indicated it wasn’t quite ready for prime time. A lot of manage hosting companies like WP Engine, Pagely, and these kind of services have their own Git hooks already ready to go.
They have instruction tutorials and lots of documentation how to integrate with those. It’s just a git-push to a certain remote and it automatically deploys and runs all the scripts and, a lot of times, it’ll even validate your PHP and those kind of things for you.
Jackie:
You’re pushing your code up to your remote repository, and then that’s triggering something that would then deploy that code, those changes, to your production or staging server?
Matt:
I’m sorry. On WP Engine, you would push it to your own repo, say on GitHub or something like that, but then you would have a second remote. Instead of origin, you would setup staging or production, and then you would tie that remote to WP Engine’s URL’s that they provide you. You’re pushing to origin and your server separately, as opposed to something like DeployBot where you push and then it hooks off of GitHub to deploy that. It’s separate processes.
Jackie:
Okay, that looks like that would help solve that challenge of automating that process so that you’re not … My biggest pain point, I guess, in that process is I sometimes forget to upload all the files that I need to. I’ve got to go through each folder and make sure … If I have a includes folder or a JS folder and I’ve made some changes there, I’ve got to remember, I’ve got to look on the dates and make sure I push everything, drag everything over in my FTP program to sync that up. This looks like that would solve a lot of those issues. The other question that I really wanted to talk with you about is you’ve mentioned that you’re wanting to build a product that solves some of these challenges for a local development environment. Can you talk about what you’re working on and what’s happening with that?
Matt:
I can. You’re getting a world exclusive here, I guess. I’m working on a new product. We’ve been talking a lot about local environments and deploying code and different hosts. I saw an opportunity to meet all of those things in the middle. I am going to be releasing, very soon, a product called Anchor WP. Anchor is a local WordPress environment, but with a lot of features that I think are going to be very useful to the community. Not only does it provide you a user interface that allows you to build Dockerized environments so they’re very fast, they don’t take an hour to setup, it doesn’t take 40 minutes every morning to raise the environment. They’re very fast, but they’re also very modular. You can switch out PHP versions on the fly. PHP 7 is something that’s up and coming, and a lot of WordPress developers really want to switch to it, but they don’t have the ability to do that locally, or in their production environments. A lot of hosts are starting to integrate it, but a lot of local environments are falling behind.
If you want to switch between 5.2 and 5.6 and 7.0, that is something we can do because of Docker. You can switch between NGINX and Apache on the fly. You can basically change anything about the environment that you want to on the fly, and all it takes is a simple restart of the server. One click and you’ve changed the variables of that environment, all through a nice user interface. What I’m really looking to do, and what the real motive behind the product is not to just create another local environment product, but what I really want to do is be able to integrate with hosts and be able to integrate with themes and plug ins. You don’t have to go out to get those things. You can mimic the environments that you’re looking to build for, your WP Engines, your Pagelys, your SiteGrounds, your Bluehost. You can mimic their environments, even as a freelancer. You don’t have to spend a bunch of time trying to figure that out, it’s just ready to go.
You’re not having to figure out these weird server environment issues later on, down the road.
Jackie:
That sounds like a really awesome thing to have, to not have to do all that research. “Okay, I have to develop for a site that’s going to be on WP Engine” or “a site that’s going to be on Pagely, what’s their environment like?” Trying to figure all of those variables out. Like you said, some of the other products, you’ve got to be like a sys admin to go in there and configure everything to get it to work properly. For somebody like me that, maybe, is not going to be wanting to devote that much time for those things, that sounds like that would solve a really big pain point for most people, is to be able to say, “I’m developing on Siteground” or “developing on WP Engine and here’s my … ” you just spin up the environment.
Matt:
Essentially, what I’m looking to do is to make a product that works for all levels of developers. We want to be able to take people who are just getting started and teaching them why local development is so important, but also make it easy enough to where they can actually get it and understand it and use it. At the same time, we want to make it configurable enough to where people who are working in the enterprise and need granular control over everything, PHP memory limits, and all that kind of stuff, to where it’s configurable enough where they can do that.
If they know how to set their own environments up, they can templatize those things and have them ready to go and have them where they can just plug them in. We’re also looking to partner with several plug in and theme developers, to where you can have templated environments with certain themes and certain plug ins, and it’s one click install, and then you can templatize that and have it ready to go for a future project.
On top of that, one of the things we’re looking to do is not only mimic hosts, but also be able to integrate with their deployment system. If I know that I’m going to be using WP Engine, Anchor knows that as well, as has a one click deploy up to WP Engine. That’s something that we’re still working on and it probably won’t be version 1, but it is something that we’re pursuing, and it’s very important. I want to be able to create a product that’s just not one little piece of the puzzle. I want it to be able take you from idea all the way up to pushing to production and launching the site, encompassing as much as we can in order to smooth out the process as much as possible.
Jackie:
I think it’s very smart to integrate and to partner with others to bring in their pieces, versus trying to build it all out yourself. As new players emerge, and as new things change, there’s more opportunities to just partner and put up the configuration and be able to just choose that one that you want, versus you having to build that all out and maintain it yourself.
Matt:
Exactly. One of my favorite things is I see guys like Cory Miller and Chris Lema, that repeatedly say this, “That I’m not the smartest guy in the room, but I do know those people.” That’s how I feel. I’m not the smartest guy. I know that. I always want to be the first one to say that. I know that there are people out there smarter than me, that have better products than me, and I want to bring those people in and say, “Let’s work together. Let’s integrate your things so we can all profit from it.” I very much see Anchor WP as a platform in order to integrate other products and partner with those products so we can all benefit from it. Yeah, I am very excited about the possibilities of the partnerships that we’re looking into, not only for myself but for everyone, for the community at large. I’m very excited to see Anchor get launched and get feedback, and hopefully help a lot of people.
Jackie:
I’m looking forward to being one of the first beta testers, for sure.
Matt:
We’ll get you signed up.
Jackie:
All right. Okay, well we’ve only got a couple minutes left, but I wanted to ask you, any favorite local development tools? I know you mentioned you’re using Migrate DB Pro. I use that too. I find it very helpful for my workflow. Anything else that you can share that’s what’s your mix of tools are right now?
Matt:
Highly recommend a task runner, whether that’s Gulp or Grunt or Webpack or Webpack with Gulp and Grunt. Webpack is a new one for us that we’re exploring a lot right now. It’s looking super awesome. I can’t overstate how much a task runner has saved me on time where I don’t have to compile things or lint style sheets or beautify them or put them in correct orders or anything like that. I also highly recommend PHP Codesniffer, it’s essentially a linter for your PHP, it makes sure that you’re following the WordPress core standards, which is a huge thing and will keep you out of a lot of trouble. Basically anything that will automate my workflow is a thing that I’m looking at using. The more I don’t have to think about, the more I can think about writing code that actually works and makes sense and does what it needs to do and is bug free.
Jackie:
Are you using Atom as your code editor right now?
Matt:
I do. I’ve pretty much tried them all over the years and I’ve settled with Atom for now. I always want to be flexible in that regard because being dogmatic about a code editor to me doesn’t make a lot of sense because they all have pros and cons, but right now, Atom is the best one for me for the time being.
Jackie:
I can definitely recommend the PHP Codesniffer. I have that setup in Atom and in PHPStorm, that I’ve tried both of those. It is really nice to have that linting. I think I’ve set mine up to, whenever I save the file, it goes ahead and lints it. You can actually set it up to lint on the fly as you’re typing, too.
Matt:
You can.
Jackie:
But it is nice to have it format everything properly, make sure that you’re following all the standards, and it saves you a lot of time. I know you can even do it from the command line, too, so you can lint your entire folder with all your PHP files in there at once, and it gives you a printout of where you need to make all these corrections and what you need to do. I would recommend that to anybody that’s not using that, that could save you a lot of time, and also make your code more presentable.
Matt:
Totally agree with that. I think the number one way to improve your code and improve your chops is to get it reviewed. I think the first place you should get it reviewed is by the Codesniffer. It will improve your coding overnight. It yells at you pretty hardcore.
Jackie:
Okay, so for my last question, if somebody isn’t working with a local development environment yet, and wants to start, what would be your recommendation?
Matt:
I would say the easiest and probably cheapest way to get started right away is to go with something like MAMP, the basic version. I think MAMP PRO is awesome, but one of the best things about MAMP is that it starts out free. It is super easy to setup. It’s a super easy interface. I think, very soon, the easiest way will be Anchor, but I’m a little biased. Probably, as of today, the easiest way is to use MAMP. It’s been around for forever. I can say that tens of thousands, if not hundreds of thousands of developers have gotten their start with MAMP. It’s still a great option.
Jackie:
That’ll wrap up this episode of Rethink.fm. Matt, I want to thank you very much for joining me. If folks want to follow you and learn more about your upcoming product, how can they reach you?
Matt:
Yeah, so you can follow me on Twitter. I’m @MRPritchett. It’s P-R-I-T-C-H-E-T-T. Or you can find me at my blog at blog.pritchett.media.
Jackie:
Thanks again, Matt.
Matt:
Well thank you, Jackie.
Jackie:
Everybody have a great week and I’ll see you on the next episode.
Dec 1, 2016 • 49min
Episode 9: Acres of Diamonds
In this episode, I’m chatting with Kim Doyal. She runs Kim Doyal, The WordPress Chick podcast, and several other internet businesses.
We’re talking about Acres of Diamonds by Russell H. Conwell. It’s a story Kim shared with me about finding gems right in your own backyard. Many of us have been looking for success, thinking the grass is always greener elsewhere. Is there an opportunity right in front of you that you have not seen? Something you’re good at that you are not leveraging? That is the basis of the story and why we sometimes see the success of others as a goal to pursue, when there might be diamonds buried in our own backyard.
Let’s get started.
Meet Kim Doyal
Kim Doyal runs the W Chick – podcaster, is a coach, WordPress wizard, proud Genesis junkie and co-founder of the #FtheHustle movement.
According to Kim, when you commit to fully showing up as YOU, everything shifts in your business.
That advice might sound simple, but it took me almost 5 years as an entrepreneur to truly understand the power and the potential of fully showing up as ME.
Show Notes
Kim’s Website: The WP Chick
Kim’s Twitter link: Kim Doyal
Helpful Links:
Beaver Builder
Thrive Themes
Co-Schedule
Complete Transcript:
Open PDF version of this transcript
Jackie:
Hey everybody it’s Jackie to with another episode or rethink that FM and I have my guest today, Kim Doyal. Kim hi how are you?
Kim:
I’m fabulous Jackie thank you for having me here. I’m super excited.
Jackie:
Thanks for joining me today. You’ve picked a really interesting topic to discuss, it’s Acres of Diamonds. And I’m going to put that out there as something to think about as we go through the podcast. But before we get started, can you tell
folks who you are and what you do?
Kim:
Absolutely. My…it is so funny you would think I’d have like this great elevator speech but like most online entrepreneurs things evolve and continue to evolve. So my primary business site is the WordPress chick and it’s TheWPChick.com. And you know it’s like I’ve been doing this gosh I’m getting close to nine years now and really you know I have to say that I fell into the WordPress sites. I’m not a developer I’m not a coder so I’d say I’m more of a customized. But I have a team that does development and coding now but I just fell in love with the platform. It was in 2008. I just was kind of on a mission to find something else I could do from home. I lost my husband in a car accident in 2003 and at the time I was working full time in retail management and anybody who’s ever worked anything like it’s just there’s no quality of life. And so you know my kids were little they were six and two when my husband passed away and so it just you know we all have our own stories our own tragedies and you go through that and you just know that there’s something else there’s another way to do this there’s a better way to live my life. And so I had a little bit of a cushion in 2008 and I had come across internet marketing I had gone to this real estate wealth Expo. So this was clear pre 2008 right, 2006 maybe.
And listening to all this stuff and Tony Robbins was speaking in Robert Kiyosaki and then there were these little you know breakout sessions and this guy was talking about internet marketing and how you was making you know $8000 – $9000 a month selling e-books. And I was like Wow. And I had also at the time I was a big. And this is holy going to date me but I’m like I was a big tape cassette person in the car right. Like when I would be commuting for work and stuff. I was always putting something into my head most of the time it was motivational or business or you know and I was listening to this. It was actually this is actually a CD program. So it was a little bit more recent but it was a Mark Victor Hansen one of the chicken soup guys had done this mega speaking empire because I was a speech major for a while in college. So it’s really fun that I do podcasting now too because it’s like it’s transcended but I was listening to this mega speaking empire CD set. Right? And there was this other internet marketer and he was talking about internet marketing and you know affiliate marketing and all of these things and I thought this is this is the way to go this is totally the way to go. And I just knew there was something in it and I was not a tech person. Jackie and I mean I would always consider myself somewhat smart like I can figure this out but I just I was committed to making it work. Long story shorter and I jumped into this and I really thought I was going to be an information marketer which I am.
But you know I thought I was going to write a few e-books and make millions at all that you get into this and you go and there’s a little bit more to learn here so you know my company today like what we do. So I am shifting out of the client work. I still have some clients I don’t have a portfolio on the site. It’s all referrals if I choose to do client work. And so a lot of people say well how do you monetize the site. I mean I do coaching. I have another podcast well I’ve got two, the WordPress chick and I’ve had sponsorship on there. But I do coaching we do Web sites we’ve done podcast production for people. I am going I’m shifting a little bit back to courses in teaching and training and then a recurring model which is actually going to be a physical newsletter that comes in the mail and there’s a whole reason behind that. So it’s evolving right now more than anything I’m focusing on my audience, the brand and just simplicity. I just want simple systems in place.
Jackie:
What role did The WPChick podcast play in all of this and how did that how did you start that what stage did all of this evolve?
Kim:
The podcast came about in 2000 and where are we at. It was five years and so would have been I can do math 2013 because I just you know what Jackie, I hit this point where I’m like I need to have more fun. That was really it. I had been listening to smart passive income at the time he was a month once a month or something but it was like – I loved podcasting. I was a big podcast listener and I just.. Here’s the crazy thing. I had the Skype conversation with a friend. Anybody who’s ever done client work or service work hits that wall. It’s like you have a day you have a client you’re like that’s it. I don’t want to do this anymore. And it was it was kind of one of those and it was more of a I’m going to do things my way. That’s it. I don’t care what every market or on the planet says I don’t care what every Guru whatever course I have to just be myself. And so I literally I did a post and I copy and pasted that entire Skype conversation because it was the evolution it was kind of funny but that’s how I decided to do the podcast. It was like I want to have more fun. And I knew having been a speech manager this was just right up my alley. And so when I launched the podcast everything shifted.
I mean it totally it blew up my business and let me explain that because it was you know initially it was I was completely detached from the outcome of what it did and what it was going to do. And while I’m sure there was probably more data I didn’t go looking for it – it was really something I did for myself and it was content so I knew there’s value in it – within like three months iTunes was one of my top three traffic sources which blew me away. The relationships there’s this sort of there’s the tangible side of podcasting and there’s the intangible right so the tangible is traffic. I’ve gotten coaching clients, I’ve gotten website clients I’ve gotten you know joint venture opportunities, the relationships piece of it where the on one hand that’s tangible. On the other hand that pays off for you can’t really measure you and I mean it pays off in terms of how long those relationships last or what comes out of it. But the podcast I have said it before I’ll say it again is absolutely the best thing I’ve done for my business.
Jackie:
That is an incredible story with starting your podcast and then having it kind of fuel a lot of other parts of your business. It seems like that was a great catalyst and you’re really good at that. You’re a natural. I’ve listened to your podcast. I don’t know how you do those solo ones. I think that’s just amazing that I sit there and just have a conversation with your audience and it just flows beautifully. So you’ve definitely mastered that.
Kim:
Well thanks. You know. That is Jackie as I write those first. And it’s interesting is I think I’ve said this on my show a couple times. Like if if I were to go and anybody could probably find it but like the very first post I ever wrote on the The WordPress Chick Chick I was I read it and you know you think to yourself oh my god did a robot write like who is this? Because it’s there is this fear like when you first get on line and you hit publish it’s like oh my God you know if only we had like massive traffic the second we hit publish right. And so it’s been this evolution and I have found how much I love writing and I’ve applied this in my business over the last few months even with these daily emails that I’m doing and I’m happy to talk about that but there’s this – so with his solo shows I write out the post first and then I just talk to people and see that’s the validation piece that’s amazing about podcasting to me is I can’t be here and be somebody different. Right. Like I don’t know how to do that like I’m Kim on live or I’m Kim in person. Like if you meet me this is just me and so it was a way to really draw in like my tribe right? People that connect with me are people that appreciate my sense of humor. A lot of it’s self-deprecating.
But if people get that or what I’m saying resonates with them it’s you know and I don’t want to put it in I don’t mean this coldly but it’s like that’s a warm lead. Like that’s a connection right there. Like it floors me when I think about the fact that people will take me for a walk. Right. And they’re just out on a walk just listening to me for an hour it’s like it’s an intimate relationship in a way that you form to somebody and so and it’s something I don’t take lightly. So I have stepped into a lot of things that I thought were uncomfortable initially were sharing something personal that maybe I thought I was never going to share this. I only share if it’s of value. You know like if I learn something the hard way or if I’ve launched something or done something or something turned out to be you know a really great outcome for something that I’ve done. So it’s like I share the Good, the Bad, the Ugly all of it in a way that I hope somebody else can benefit from that experience. But yeah you know I just write those out and I don’t know it just flows.
Jackie:
I think that your website The WP Chick it’s kind of WordPress centric but it seems like you’ve built a lot of other businesses and initiatives go outside of the WordPress space and I was wondering if you could just talk about how you’ve kind of branched out and know and I know you were saying you’re not doing a lot of client builds for WordPress sites that it’s like you’re using WordPress as a tool and I saw comment that you recently left on John Perez’s web site about you know are the WordPress community and using WordPress as a tool. And I was just wondering if you could kind of just share your perspective on all of that. How how WordPress fits in but how also your business expands way past all of that.
Kim:
Yeah. So it’s a good question. You know that whole initially that I suffered greatly from imposter syndrome right because I was like I’m not a developer and I’m not a coder and then it was like well you what… Own that. And that’s my audience. My audience is you know if there’s a developer or a coder who follows me it’s because we’re friends or they’re amused by me or are they you know there’s something but because I don’t know that the intro to the podcast is no boring code snippets here. Just WordPress happiness made easy. And so when I found that I had this ability like even when I was in retail like I was a training manager and an ability to explain things to the everyday person because a lot they don’t want to know where to put something into the head tag in the body tag first for pixeling or what. They just want to create a custom audience. That’s a quick example right. But so and I started just doing that and I fell into that piece of it. And this is where like I tell people it’s like you just need to start you don’t know what’s going to stick. But you know I everything we use as with Genesis and I was using StudioPress pre-Genesis and so I started doing these videos which they were so awful like I did not know to use Camtasia very well but you know just telling people I was just figuring stuff out and I was like oh here here’s how you do this.
And so I sort of found that I had built up a lot of traffic to those tutorials and I thought of them and Genesis came out you know I stepped into this WordPress Genesis for beginners. I did like four week webinar classes then I did a PDF and then I did an updated for 2.00 which you know the theme settings haven’t changed that much but so I kind of stepped into that and that was really that’s my space. And so I had to own it that well not everybody who uses WordPress. wants a developer teaching them how to do something or they want to know how to use this tool to make money with their business. And you know over I don’t know it’s probably going to last couple of years. The more I’ve really stepped into marketing because I am not saying I got backlash but it’s like I just I don’t like the negativity and the fact that there’s a hashtag #WPDrama is ridiculous to me you know and I always look at it this way and maybe this is really a simplistic way to say it but I’m like you know people who are making money doing something they love it’s like you really don’t have time to go get nasty with people. You just do your thing. You just we don’t all have to do in like the same things. It’s ridiculous to me and there when I see because you can have somebody who knows how to market and write copy and they’ve got a crappy product. But who’s going to you know be laughing all the way to the bank.
And I’m not saying that that means you go sell crappy products that’s not the message there. But the point is all of it’s relevant. Right? And so I’m actually getting ready to change that theme on my site. And I have switched I used to do this WordPress happiness made easy – it doesn’t make much sense it’s not very clear. And so now it’s a place where WordPress and marketing collide because that’s sort of my happy space. I like creating content I love creating content. I like creating courses I like showing people how to. You need a list. You need to build a list you need an audience you need to connect to them you need to engage them and you need to sell to them. I don’t care how perfect your code is or how fast your site is. If you’re not building a list of subscribers because that’s an asset then you’re not really in business. You need every single business offers leads and sales. I don’t care what market you’re in or what you do. And so I had to kind of say where do I want to fit into this. I still love some of the techie stuff. I still like showing how to use things but you know I like to create as well and I just I never wanted to be a coder or developer or you know my gifts to the world to me or not to be behind the scenes and I’m not saying I have to be on stage but I want to create I don’t want to be a pair of hands creating someone else’s business because that’s how it feels to me. I’m not saying it is.
But that’s how it feels because I have things that I want to create and put out there that answer any of your questions I’m like I think I’ve talked in circles.
Jackie:
You know that did… actually. And the part about the marketing is of interest to me because you seem to have adapted very well and been able to do internet marketing and I wonder there’s a lot of people that I’ve talked with that are running client based businesses so they’re servicing clients but they’re struggling like with their own marketing or finding their own identity for their business online. And I’ve even had challenges myself where I like writing tutorials but the tutorials are not really targeted for my clients. They’re more targeted for peers and it’s that whole part of adapting to the community. And I’ve also chatted with some folks and you know maybe I need to have two web sites or maybe I need to write articles focused more on driving traffic from clients to my Web site. And I think a lot of people struggle with coming up with the right marketing mix.
Kim:
I totally agree with you because I did for a long time I really did for the longest time. And the thing is like when I started doing like how to videos on how to do stuff with WordPress and it was either using a plugin or the really Genesis is where I kind of found a little niche. Jackie I didn’t have anything attached to it. I just thought I’m going to share what I’m doing. That was it. That was really it. And whenever people tell me they get stuck with content now I can turn anything into content. I’m not kidding you know because I practice it and but the thing is it’s like you have to start somewhere. You can do it like let’s let’s step back and say OK you can do the who is my avatar? who is my audience? What problems are they solving? If you don’t have that audience you can have an idea and you can create that but there’s no data right so you’re going to have to pay for data whether you’re paying for data with paid traffic or you’re paying for data with your time. You have to create and look at what’s working. That was truly how I found that whole StudioPress Genesis thing I was like wow these posts these videos are getting more traffic than anything else I’m doing. And so I thought ha like here’s a great example.
Any person out there that does work that maybe does WordPress websites that they’ve got you know client work at the end of the day if you simply share the things you’re doing like I’m all about leverage. So here’s an example. I started doing these daily emails. I subscribed to a guy named Ben Settle and I wish to God I got a commission because I pimp him every where. And because I I’m going to back up a little bit. I hired a Facebook ad agency at the beginning of this year kind of ended to 2015 and Jason Hornung it was fantastic. I was doing this kind of higher ticket higher price done for you podcasting service because I believe in the power of podcasting. There’s so many ways to leverage it. And it was great at the same time it’s still service it’s just people view me more as a consultant because I’ve got a team that does a lot of the tech stuff. But anyways so I thought OK I’m going to drive this with Facebook ads. It was a big investment. I got the money back in the ads. But the beauty of working with them is that I step back Jason really. Jason Hornung I think I said that so he great guy but I really stepped back and started looking at copywriting a like basic fundamentals of direct response marketing. Like what works. Content, you know, good copywriting email marketing. Those those basic things whether it’s you know maybe it’s postcards or whatever because that stuff still works too. But so I started kind of going backwards and mastering these fundamentals. And like I’ve gotten a little bit obsessed with it where it’s looking at the strategies that work as opposed to tactics right.
Like I had Todd Brown on the show and he’s in a big internet marketer and stuff. And he’s the same thing it’s like he said I don’t read you know how to do Twitter conversations or this or that it’s like no no no it doesn’t matter what platform use if you know how to write good headlines. You can use any platform if you know how to you know tell a story that appeals to those pain points and persuasion tactics. And it’s not me it’s manipulative. It’s human psychology and so I got so much of an education and working with Jason as well as understanding Facebook advertising and stuff. But like Jackie I don’t want to I don’t want to focus every day on my ads converting on this. I would rather go create content. Right. I’d rather do that. And so like with this e-mail thing with Ben, fast forward, I probably subscribed to his site for a good year before I bought from him. And he has a monthly print newsletter subscription which is where John I got the idea. It’s $97. It’s called e-mail players. He sends one e-mail a day. It’s a story style e-mail with a link and I watched how he did this. I just I just paid attention to it and I felt like and I thought what resonates with me is what resonates with me. And that I subscribe to email players and you know and then I saw Ryan Lee and other big Internet marketers going around a long time kind of does the same thing. Because my goal is simplicity.
I’m like you know what I think funnels are good but I don’t want to do 52 funnels and up cells and down cells in this way and that way it’s like you’re going to start hurt in my head like I just I don’t want to do that. I want to have a few things that I do consistently that I do well and then I grow and I started doing the daily e-mail maybe two months ago and I called it my almost daily e-mail. I think the most I’ve hit like I hit eight or nine days it hasn’t gone out today because I had a dentist appointment this morning. But it’s got to go out. But the point is what I do with these daily e-mails is again it’s a it’s a subject and a storyline that takes a person through this path and then it’s one link. You know I’ve seen these newsletters where it’s like here’s what happened this week and here’s my podcast and here’s my post. I used to do those low click through rates low engagement these I’m not kidding you Jackie let’s say e-mail five days in one week I get two or three responses to separately from different people than what I do is I take these posts and I mean I take the e-mails and I create posts on my site and then I share them socially some leveraging. I’m all about leveraging content. I have gotten my engagement rates have gone up my affiliate income has gone because I’m redoing some products and offers. But it’s like everything has increased for me by doing this.
My writing is getting faster I’m understanding copy better and so I feel like this is one of those things we’ve heard before but it’s these small consistent actions that you do over and over and over again. And so for me like it it’s just sort of like open my eyes to a lot of other things in terms of like OK will like even take exercise. Well what if you just walk for 30 minutes a day or what if you just drink two more glasses of water. It’s those little things and it’s it’s made a huge difference. I feel like I went 12 ways sideways on that but you know the whole the whole marketing piece where people get stuck I kid you not. The best way is simply to share like talk about why you wanted to start the podcast. You can do a whole post series Jackie and why you wanted to do this. And and the fact that you had a conversation yesterday here’s a great example I one of my e-mails. That was a post that got a lot of connection engagement. A friend is in a private Facebook group for a course that she purchased from a female internet marketer on webinars. OK. And somebody wrote in this Facebook group and they were like here’s some free pain points for all your internet marketers for your next sales copy. And she kind of ranted. I’m tired of investing in courses to find out I need to buy 12 pieces of software. I’m tired of spending all day at my computer doing this I’m tired of this and had a real frustration point. I’m tired of working every day all day for 10 weeks and having nothing to offer anybody, you know.
And so she was just sharing this with me and I’m like this is going to be really good email tomorrow and I try to even think where I linked back to it. I think I’m linked back to an old podcast episode of my own. But the point was I simply had a conversation with people in the email and the subject line was would you give your business more than 10 weeks to succeed because on one hand I feel her pain. Right. We’ve all been there where you get frustrated and it’s like you buy something that’s like oh now I have to go get lead pages and convertkit and all these other things. I’m not recommending either of those. One way or the other but. And if it if you’ve not been in this a long time you don’t know why I can use this or I can use this or I can use this or I can do this and that. And so I totally get that frustration. On the other hand where off line do you think that you’re going to start a business and 10 weeks be profitable you know. So it’s a different space. You have to you have to put in the time and energy. And I hate the whole do the work right. I mean I think that’s ridiculous. We all know businesses work. We all have to put in our time and energy. Some things are going to be easy some things can be hard but I am anti-hustle like there is a balance to life.
You know some days if I get inspired to do something I can work crazy hours like five or six days and then crash and then I’m like I unplug for three but that’s my own process. You know not everybody is going to do that. And I think you know life has to be lived. I refuse to skip a family birthday or I refuse to say no to breakfast or lunch with a friend that’s why I do this right. I refuse to not take a nap if I hit a wall in the afternoon I’m like. Stop telling me to hustle.
Jackie:
Amen to the naps. I love naps.
Kim:
Ah they’re my happy place.
Jackie:
OK so what I’m hearing from you is you know content’s like a real center piece for all of this. If you if you can train yourself to write good content and get in the habit of producing that that’s kind of the key to opening up all of those opportunities.
Kim:
Absolutely absolutely and leverage it right. Because when I realize I’m like these e-mails I’m like wait a minute this. I literally put it in a post and I was like that’s like 780 words. Like my podcast I can easily do 2000 words now in a post that’s not an issue. But when I thought these e-mails maybe not as SEO but the fact that I’m producing more content and then you know what happens to is you want to think as you start doing this so as an example when I started the The WordPress Chick I really felt like I created a list of freebie seekers because I just kept telling them how to do stuff right. And so you have to be able to shift there and it doesn’t matter if you know you follow Gary V’s jab jab jab right hook. But you have to be able to sell something at some point. And so as I am shifting offerings through the Word Press chick I do a lot of affiliate stuff. The only things that I recommend as an affiliate are things that I use consistently cause I create tutorials from it or and then I talk about it and then I just share stuff. But really the content piece you have to find what works for you maybe you love video. Do Facebook live then take that video put it on your site get it transcribed. Take the text like there’s so many different ways you can repurpose what you’re already doing. So you know what I’m saying.
So even if if you are doing WordPress sites and maybe you’re you know you do everything in Beaver Builder or whatever the case is cases share the client story every single client could be a content like a case study part one part two part three whatever just the project what it’s about when you’re talking about and and maybe some frustrations that the client had. Here’s an example I’ve got somebody that I sent a proposal to months ago and they’ve come back like they still haven’t done anything but I think they’re ready and they’re like well you know we love the sites you sent. Can we see some more work. We want something really original but at the end it’s like yeah absolutely. Keep in mind that what I’ve sent you is what the client requested. Right. And not just that but to be able to have this conversation with someone saying your site needs to look good absolutely but it needs to convert if it’s not user friendly if it’s not converting it it’s not going to use subscribers and customers then it doesn’t matter how pretty it is because sometimes those really out of the box let’s be different isn’t user friendly and usability and functionality is key. Right? And so that is all a post if I want to you know I’m saying so it’s sharing those stories. I had another person today that I have sort of like this little small outsourcing company that I developed accidentally and I started building a team and I started doing coaching and then a lot of the coaching clients were like well hey I want to so it just sort of I fell into it anyways. It’s not something I’m like growing or marketing or anything.
Somebody has been with me for a few years and you know she reached out and it was done on a retainer basis because I had to build a plan for expenses and salaries and all that. And I’m not just doing it out of the good of my heart. It needs to be profitable to me too. Right? So this person has been using the team. I don’t know three years or something and you know can I switch to hourly from the retainer. And she has asked me because you know you know I’ve paid this much and haven’t. And I said yeah that’s totally fine because for me like I’m seriously thinking let’s just close it down early next year. Just all keep a designer and developer for myself. And I said yeah that’s fine. So then she requested well you know can I get a credit for some of the hours not used. And my initial response so I didn’t say anything and she said did you get the email and I said I did I’m thinking about it. So then I get another e-mail that says well here’s some food for thought I spent this much I did it. And I was like well now you’re getting nothing because first of all your lack of business isn’t my responsibility. You know that would be like me going to the gym and saying I haven’t been here in three months so can I get the next three months free like. That’s nonsense. And so you better believe that’s going to show up as an e-mail in a post.
Jackie:
I agree I mean don’t you think if you’re paying if somebody is paying retainer for you that you’re basically asking you to reserve a block of your time for a specific purpose each month whether they use it or not.
Kim:
It’s not my problem.
Jackie:
You’ve reserved it, right? That means you can’t give it to someone else or sell it to someone else. So I think I agree with you on that. It’s like it once the time has gone that you’re done. Well there’s no refund on that.
Kim:
Right! Where else would you ask? Do you know what I’m saying it’s like you don’t go to your insurance company. I think I don’t know one of them Allied or Allstate does some sort of like rebate but it’s like in say well I didn’t have an accident this year so can I get the next six months credit for my insurance. It’s like life doesn’t work that way. And your lack of business is not my responsibility. And the whole thing was that was the agreement was retainer. Well I asked for this months ago and it wasn’t available. Well no it wasn’t it’s my business I get to change it as I want. So you know you can go find your own developers you can find your own project management like nobody put a gun to your head like you’re your issue isn’t mine but had you. And here’s the funny thing Jackie is had she said thanks, I appreciate any consideration. I probably would have given it to her. But the fact that she flipped it like I owed her something I’m like now you’re getting nothing. I didn’t I mean it’s like and I don’t want to be snarky and I would love to tell you that I’m this evolved that I can step back and put my ego aside. But I’m like nobody made you do this. You’re an adult. This is your business. It’s not my responsibility, period. And so. And I’m going to say if that doesn’t work for you understand you can I’ll give you you know two weeks to get your projects out. Like you just you have to be willing to say no. My point is to tie this all back to content. All of these stories are content because as soon as you start sharing this happened to me someone else is going to say thank God. Like do you know who the oatmeal is?
Jackie:
No
Kim:
OK. Anybody listening. He’s he’s a comic strip creator and he’s got books. They did the most successful Kickstarter campaign ever they did a card game it’s called exploding kittens. He’s got cats and dogs he’s not anti-animals but it’s called exploding kittens. I bought the Kickstarter. They did over two million in 24 hours or something. He’s a huge fan of Tesla and stuff but he has a hysterical comic strip called how a web design goes straight to hell. And he got the whole process so my point. I fell in love with him because I was like somebody gets this they get it right. And so as soon as you start telling those stories you connect with people on a different level. And here’s the thing. I had heard that oh stories stories sell and it was like I had kind of gone. I don’t want to say sideways but I got heavily involved in sort of this high end mastermind, right?
And it was an amazing experience. I learned the value of charging more. I learned to that’s when I started getting to Facebook advertising a few years ago. I learned a lot. I would you know I was hanging around people that were that could make six figures on a webinar. And I’m not saying that that’s the end all be all. Like for me it was like I kind of went to the extreme of how all of this I had these great adventures we traveled and then I’ve come back to what works for me. And so that’s where with John and I with this other podcast it’s we’re rebranded it. That’s a whole long story. It was Freedom Papers it’s going to Hustle Free podcast.
Jackie:
And that’s with Jonathan Perez?
Kim:
Yeah. And we launched it. It was probably the fastest thing I’ve ever gotten out to market. We came up with the idea. We’ve been friends and here’s a great story John, I connected with you through my podcast. He was probably one of my first 10 episodes, one of my interviews, and I instantly felt like he was the little brother I never had. And he’s got this great New York accent. He’s a sweet kind, young dad with two little kids. He’s just a good guy and he knows his stuff. And we just always stayed in touch we had tried to collaborate on. We did Sell with WordPress. We did this whole course and then we were going to merge agencies like we’ve talked a lot about different things and there was something about kind of pulling back the curtain sharing what’s working in our businesses. We literally have merchandise that says f the hustle on it. We have T-shirts and mugs. We’re doing another logo one of them. It’s the word is spelled out but it’s like f ampersand f hashtag at k. So cause I’m like I just don’t need to wear something that says the F word across it. But I want to it. We also have a hash tag it’s literally just the letter F the hustle. We shared these mugs on Instagram people are like where is it I have to have it because the whole point I love Gary V. I like all that. But life has to be live. I’m just tired of this WORK HARDER, WORK HARDER.
I’m like I can’t work harder.
Jackie:
I agree with you on that. I think the whole hustle thing is just a lot of hype. And if you’re not enjoying your life and it’s not enriching others in the time that you’re spending you could work 15 20 hours a day but I really don’t understand what the point of that is and it definitely results in burnout. Eventually you burnout which is what I think happens to a lot of web developers and designers that are working with clients all the time. It’s a it’s it’s a lot of work. They end up getting burned out and it’s not a good ending to those stories.
Kim:
No it’s not. And what happens I think when you’re doing that again this is the trick. This is the trick. The Challenge You opportunity I don’t know I want to phrase that but with service work is because if your business is a service creating things for other people’s business somehow building your business always is secondary right. Like how many people I can’t begin to tell you how many web devs or people that do WordPress sites or whatever you want to call it or earn real serious service businesses where they’re not focused on their own content and lead generation because it’s it’s like I’ve got to get the client work I’ve got to do the client work.
Jackie:
You have to block time out in your weekly schedule for marketing and for you know for all of these other facets of your business you have to run it like a business instead of just every day you’re working for a client. You’ve got to you’ve got to feed your business as well. So let me roll this all back I want to go back to we started off just saying the words. Acres of Diamonds right. So I want to kind of weave this in because we chatted earlier about this topic and I thought it was really interesting and I was like OK so what are all these Acres of Diamonds that are out there to be mined and to be found?
Kim:
OK. So can I do a quick synopsis of acres of diamonds just for if anybody’s not read the story. There was a professor in the early 1900s who wrote this essay, a poem or an essay or something.
Long story short there was a farmer and it was like you know a farmer in like Persia or something and he had heard there was diamonds to be mined. And so he starts mining and he had a very profitable successful farm at the time. So he leaves his farm to go mine diamonds mined diamonds and then a long story short he spends all of his time and energy as farm miles apart and he loses money and lo and behold there were quote unquote acres of diamonds on his own farm. He just didn’t mind where he was right. We have a tendency to look out. So the moral is don’t look outside of yourself necessarily. And so when people start looking at their businesses that’s right I say what is it you’re sitting on. What is it you already do you know if you have if you are in client services put together a 10 step process for whatever and you don’t have to get into listicles necessarily. You know I’m just throwing stuff out there. But here’s a great example.
Everything in this is going to sound esoteric. How can you quantify this but everything I do that makes me happiest brings me the biggest ROI. And let me tell you like the podcast right. So much has come from this that that has blown my mind. I talk a lot about look at I fell in love with Genesis and figured out how to use it just as a user. And it was profitable or like Thrive when I found the Thrive Content builder and there are a lot of people at home and it’s you know it’s hard to use whatever but it was the first visual builder I came across a couple of years ago and all I could see was the opportunity to buy a plugin once and not have to do monthly recurring for landing pages which at the time I had Lead Pages on, I got click funnels and all these things and I thought this is amazing. And I just share things I am excited about. Do you know how much swag I get Jackie from something like Co-Schedule. I got a whole Co-Schedule thing because I friggin love it. I need to do like an epic post on them. And so when I share something that has made my life easier is fun or makes me happy. Like it’s an it’s a natural progression and then it’s profitable for me. Like Thrive is easily my highest affiliate every month because I love to create content and so then I thought OK. So here’s a great example of mining Acres of Diamonds.
I get great comments on Thrive. I also use Beaver Builder. I did a whole Thrive Content Builder and Beaver Builder why I used both. And it just it blows me away so I’ll talk about what I use when how I use it. That is it. I simply share the journey. And I thought OK so this content. Here’s the crazy thing is in doing these daily emails posting more and then I’ve gotten very good, not good – but diligent about sharing my stuff consistently thank you co-schedule. And so I’m getting a lot more traffic my bounce rate dropped like 30 percent because I’m telling more stories it’s not just throwing like WordPress tips that people and and I’m not negating that. But all of a sudden like who wants to just be another aggregated tip site. Right. And so an Acre of Diamond for me is Thrive. They have this suite of products. There are a ton of people use it so I thought OK I’m going to do it 30 days of Thrive. Right. And that’s a big a big goal because I mean publishing a piece of content every day for Thrive so it means I have to batch it but I’m willing to invest the time and energy. Now like I’ll have to go back and do like five or six ahead of time five or six ahead of time. But if I do that do you know the long term payoff of those posts are going to be because I’ll make sure they’re optimized but they will have affiliate links.
Absolutely and that I you know affiliate marketing is one of those things to me where you know I look at the fact that Pat Flynn and I both started our businesses the same air and Pat makes what 60 grand a month or something off a Bluehost. Not that I would recommend them necessarily but doing how to install a WordPress site and I dug my heels in. Oh. Everybody else has done that. I don’t want to do that. Well it’s a WordPress chick doesn’t have how to set up and install WordPress…
So again step back those fundamentals and it all worked out. I actually have interviewed Gabe Mays from GoDaddy and they’ve partnered with Beaver builder their new WordPress on-boarding for a beginner. They’re focused on being a part of the community. They’ve improved. I’m not getting paid to say this I have improved their whole WordPress manage hosting all that stuff. The point is it’s like I’m sitting here like my site is Acres of Diamonds like I get good traffic. How can I listen to people better? And so it’s having those conversations and you don’t know until you throw something out there you know like you have to simply start testing it. But look at where have you gotten the most traction. Where have you gotten comments where have you gotten the most shares. That’s where you start going. Here’s a great example.
The other one is Co-Schedule which I just adore that tool. So you go in and look at your most shared post, your most reshared content and the other than somebody that is spamming me all over Twitter with one of my posts they just keep creating new Twitter accounts because I think I listed one of their apps or something in a top five picks. But as I did a post beginning of 2015. I’m paraphrasing I was like you know the plug ins I’m using for 2015 or something. The WordPress plugins and holy moly that thing just went still to this day get shares. Should I have done it for 2016? Probably, but I thought why would I do it again? There’s not a whole lot changed so that I was thinking I’m just going to tell you this is my brain process how I was able to leverage this into like three different ways.
So then I said OK well I don’t want to redo that post. What if I did like my business stack and said it like a dev stack or marketing stack right every single tool I use in my business and we’re talking like 47 tools. It’s going to be an epic post right but I’m going to put it into a PDF that if somebody wants to just download it they’re going to have to opt in to get it. So there was that so that I took that because I remember sitting there was like a Monday and I was like OK I’m stuck What am I going to do my e-mail on and I started thinking about being stuck. And that’s when I then went to look at my data and I said oh this post. So that’s how that whole thing happened. So then from that my e-mail was the subject line was. Q The kid from a Christmas story. Have you seen that movie.
Jackie:
Yes.
Kim:
OK. You know the little kid who gets his tongue stuck on the flagpole and he’s going right… stuck stuck. So that’s why. Because and I was like here’s what you do when you get stuck. And then like it was the content brain fart and how to fix it. But the point is I literally took I found a gift then a little kid with those. So it’s like I pull in this story piece and then I talk about simply the process that I went through to look at where can I come up with the new content idea to move forward? Right. And I just shared it and blew me away or you know sorry I’m going 12 ways sideways Jackie. But now I’m like there’s there’s opportunities everywhere. Attended a co-schedule seminar and they’re going to be releasing requeue to go back and requeue stuff. And I was like oh my gosh why don’t I go back to content that’s already done well, that’s a perfect acres of diamond opportunity like go back to content that got back got great shares I got comments whatever it is. One, can you improve it? Two, can you increase SEO? Three, can you add a content upgrade right, for an affiliate link?
So there’s all these opportunities. So I did that. I was like OK I had this post and it was called content formatting plugins that will surprise and delight you. I started really diving into headlines and and trust me I’ll write like six headlines and the headline analyzer or the free one from co-schedule and then I’ll go optimize it and then I use something else to A/B test them. But so I thought OK and I can share this. Holy moly. I got like 20 shares in 24 hours, from a post I wrote in December of 2015 and then somebody on Facebook said I love all the content you’re sharing and I took a screenshot of that. So then that was the next day’s email. Do you see what I mean? So all I’m doing is growing I’m just putting time and energy into my business and I’m sharing what I’m doing. That is it. It’s really not rocket science. And we think that it needs to be all this big stuff. But you know like seriously you could have a whole series Jackie on you know Rethink.fm. First of all it’s an awesome name. Where did you come up with the name and why did you do it? You know what made you decide to pick the theme you did or why. Why have you chosen the guests you’ve talked to. You know there’s all these different ways to share it. And you just it resonates with people sorry. I’m really on a roll right now.
Jackie:
I know I love the advice. I think that’s I think that’s great. I love the passion that you’ve got about that. And also just how you’re weaving in the affiliates. I think a lot of people struggle with how to use affiliates and how to market those and mix those into their site. I’ve seen some where you know you just have people sticking little ads in a side banner. And to me I’m not as somebody who would be a consumer. I’m not very likely to click on those things to do. If you see somebody write a really great post with like a tutorial or an example of how this is effective for them and there is a link in there and they even say this is an affiliate link. And thanks for your support and I’m much more likely to click on those and actually want to support the person who’s writing that content. And I think you’ve kind of figured out that magic formula about writing about things you’re passionate about and mentioning the tools that you are passionate about using right. So you’ve got all of these things like you mentioned co-schedule you mentioned thrive which I don’t know much about thrive but you’ve got me you’ve piqued my interest and you’ve got me where I want to learn more about that because if you’re if this is really effective for you and what you’re doing and I’m up I’m assuming you’re being able to create pages pretty easily landing pages squeeze pages and things like that.
Kim:
Well yeah it’s it they’ve got all these templates right. And it’s a drag and drop. And then for me like I here’s here’s the thing with tools and stuff is you know you can there’s the whole JVZoo crowd.
Well they’ll put out a product and then it’s gone in like six months and good luck with support. Which is a bummer because there are some good products, some good plugins and tools and web apps that come out of there but there’s so but the guys that do that it’s like they push to the next launch instead of growing and building something right. So when I find companies like Beaver builder and Thrive or whatever and they just keep getting better. Thrive just as a side note. They’re doing their whole 2.0 is going to get a whole new UI. So I’m really excited about that. But what I love about them also is that their conversion specialists are right so their blog even if you subscribe to the blog and I have all their plugins they also have this headline optimizer where you literally just can drop in a couple of extra headlines you know update the post and they will split test for you and you can pick the winner and inevitably not my original is the one that wins out. Go figure. But but so that content piece and I’m so sorry if I interrupted you but the like in sharing that because I do agree with you and it was when I saw that there’s stuff converts. So I know that if I just come from a place of here’s what I use why I use it and how I did. I spent a few weeks on this post for Thrive, it was the ultimate guide to thrive Content builder. I did four videos. I did a written post and then I did a content upgrade that I did a PTF. It was almost 30 pages on each of the different elements. So it was time consuming. Absolutely. But I did screen shots and I said so this is the countdown timer and this is when you would use it. I mean I couldn’t put in every style because it would have been like 300 pages. But but the point is so then I said hey you know there’s just a little content upgrade. And so now I’m building a list of people who are interested in thrive products. I know that right. And it’s so I will constantly reschedule that post and co-schedule. And it always gets me traffic.
Jackie:
You’re a genius.
Kim:
Well it’s taken me years to get here.
Jackie:
You are. I wish we had more time to talk. We’re already coming up to the end here and I’m just wondering if there’s anything else that you wanted to share or mention that would kind of tie all of this together?
Kim:
Yeah. You know more than anything. My message to everybody is you have to do it in a way that works for you. There is so much information. You know if anything I’ve said resonates with you. Take that like I love podcasting. I like writing now. I like creating PDFs. I don’t know what that’s about. But pick whatever works for you like you’re never going to see me marketing on snapchat. I don’t have the bandwidth for one other platform right. So trust yourself. I kid you not like the best thing that you can do is be you show up in a way right in your own voice. And it is the consistent application of little habits. I did this daily e-mail thing has been the most awesome pleasant surprise I have ever (had). Couldn’t have seen how much fun it would be or the amount of results I would get from it so trust your gut go what go with what works for you and just try to get better at one thing at a time.
Jackie:
Excellent advice. So Kim if folks want to follow up with you and get in touch how can they reach you?
Kim:
Best place is just TheWPChick.com. All my social profiles are linked from the site. Most of them with the exception of a Facebook page or under my name just Kim Doyal. But yeah, the site is the best place.
Jackie:
All right well thank you for being my guest today and hope everybody has a great week. Thanks very much.
Kim:
Thanks for having me Jackie.
Nov 16, 2016 • 57min
Episode 8: Designing User Experiences
In this episode, I’m chatting with Diane Kinney. She is a web designer and developer with over 17 years of experience running her own boutique agency.
We’re talking all about design and how it is evolving, responsive vs adaptive, clients, SVGs and so much more. Diane shares a wealth of knowledge and experience in this episode, that will be sure to have you rethinking something. A complete transcript of this podcast is available.
Let’s get started.
Meet Diane Kinney
Yes, I’m a mega WordPress nerd and I’d love to share the things I’ve learned in the last 17 years of building both simple and complex sites in WordPress.
Born and raised in Wisconsin (#gopackgo), my adult life has been spent on the gulf coast of Florida in sunny Sarasota. I delight in the sunshine and weirdly wonderful things that regularly happen in this state.
I live with my husband, college student daughter, five cats and three dogs. All of the cats were rescued from certain death by my animal loving daughter and our first dog was a refugee after Hurricane Charley. It’s all very crazy and brimming with love.
Show Notes
Diane’s Business Website: The Versatility Group
Diane’s Personal Website: DianeKinney.com
Diane’s Twitter link: @dkinney
Helpful Links:
Practical SVG by Chris Coyier
SVG Support Plugin
CodePen.io – CodePen is a playground for the front end side of the web.
Using SVG Animation in WordPress
Why Encrypting Your Website Is Now Something You Need to Do
Val Head – Web and UI animation
This episode of Rethink.fm is sponsored by:
Erin E Flynn – Business help for web designers and developers.
Having trouble with the business part of running a web design business?
Check out Erin E Flynn for articles, e-courses, workshops, and a friendly community to help you run your web design business like a pro!
Join the crew and become Unstoppable at erineflynn.com!
I’ve tried a few of Erin’s products. The Email Templates, Welcome Packet and Intro Packet – I highly recommend then – a great resource to help you run your web design and development business. -Jackie D’Elia
Complete Transcript:
Open PDF version of this transcript
Jackie:
Hey everybody, this is Jackie D’Elia with another episode of Rethink.fm for you. I have my guest, Diane Kinney, on board. Hi, Diane.
Diane:
Hi, Jackie!
Jackie:
Thank you very much for joining me.
Diane:
Thank for having me. I’m really excited to be here.
Jackie:
Our topic is very interesting to me. I know you and I had been chatting earlier for a topic for the show. We were both interested in talking about design. You had some really interesting take on how you wanted to approach that and talk about it.
Diane:
Absolutely. I have a thought process around design. I love graphic design. I love doing print design and invitations. I’ve done interpretive signage plans for large organizations. That specific skill of graphic design is something I’m passionate about, but I find to be very very different from the concept of design. When I think of the word design and I think of what we do in the context of websites, social media, and marketing, we’re really designing for an outcome. We sit down and ideally think about what experience do I want to create for the user? What feeling do I want to give them? What course of action do I want them to take? That’s not strictly limited to … You know there’s a whole discipline around convergent path optimization, which is to get a visitor from point A to point B when they take an action like signing up for a list or buying a product.
There are other paths along that journey that build to that result that I don’t think people talk about quite enough. I don’t know if you are familiar with retargeting in online marketing, but it’s the idea that not everybody buys on the first visit, so I”m going to connect with you and try to maintain that connection with you overtime. I think a lot of what we do in web design needs to be thought about in the same way. Maybe I want to bring you to an about page and I want to introduce you to our company just as our first point of contact. Maybe I want to bring you to our product page and just kind of give you the idea that this product might be interesting to you. How do we take these scenarios and build them thoughtfully so that we are creating relationships and we’re creating experiences with people?
A lot of the design thought process that we see today is very very homepage eccentric. All the energy goes into the homepage. If you study marketing and online behavior, most people don’t land on your webpage via the homepage. We’re putting all of our thought and energy into where we think people are looking. At the expense a lot of times towards pages and experiences deeper in the site. That’s kind of my design theory. It’s like very big and very abstract.
Jackie:
How are you approaching your design conversations with the new client?
Diane:
I have changed my approach so dramatically in recent years. I think the first website that I designed for a client was probably close to seventeen years ago. At that point, we the service providers, were definitely in the category of experts. The web was new. We’d sit down and work out page by page and design every page. We’d design every word. We’re not content management systems, so that was in our ballpark. I reflect back on those days and I think while we were slicing up images into tables, which makes us all kind of cringe in horror, we were doing a lot more to guide the client. We were putting together very well rounded, integrated experiences.
Then we kind of lost track of that a little bit with the advent of templates and content management systems. The idea became, I’ll build you an attractive container and your on your own. You fill it up. We have all of these what I think are negative philosophies that we tell people now. I’m not starting until I have your content, basically saying that that entire process of pulling content together is on you. I’m not hear to help you with that or guide you in any way, which I think is a huge mistake. The template idea that, alright this site requires, just like blocks, one of these, one of these, one of these. Where’s the process where we stop and think about what actually makes sense for this type of business? That’s one question. For this particular client? That’s another question. What’s become one of my pet peeves, which I was totally guilty of for a long time, show me three sites you like. There’s nothing worse that you can say to a client then “Show me three sites that you like.” Well talk about why I think that is.
In terms of process, what I’m trying to do these days is focus right from the beginning on goals before we talk about what you want your site to look like, what colors you like, what fonts you like. Those all honestly should be in the realm of design anyway. The first conversation we need to have is are what are your goals? You can’t simply say, “What are your goals?” to a client and have them respond. There’s an education component that needs to take place. When we approach that first meeting with the client, I try to do a reasonable amount of research and kind of have some theories about their line of business, their website, and what I think might be some goals so that I can say in the conversation … Let’s say you are a hair salon, “What are your primary goals? Increase visibility for your salon? Attracting new stylists? Booking appointments online? Ranking well in local search?” So that I actually have some theoretical objectives. That will get them to start talking about what their objectives actually are, what things are actually important to them.
I try to capture what’s important to them and think about all of those are design goals to me, even being relevant in local search, because we are designing outcomes. I capture those. I do my homework in terms of what I think the solution is in terms of making those things happen. Sometimes clients give me goals that aren’t realistic or aren’t practical. That’s something that you need to talk about upfront. Then you kind of get into the phase of what the client likes. Show me three sites that you like. What are your favorite colors? This type of thought process is just completely broken because it implies that a website is for the person who owns the site. A website is for visitors. Your favorite colors might be chartreuse and orange in combination. We as designers need to be able to have a conversation that says that “That’s a great choice for your home decorating. It’s a great choice for your personal blog. It’s not a great choice for your business.”
If you are opening a brick and mortar store you would not handle the décor and the interior finishes probably in a way that was a testament to your personal likes or dislikes. You think about what your customers wanted. That same thing needs to become a much, much larger component of the conversation with clients. The go look at three and come back … This is what happened to us. We took a wrong turn because this was what I use to say to people. This is what people are still saying to people. This is why clients are stuck in theme forest looking at sites with extremely cool animation effects and sliders that are not even remotely a fit for their business goals. We did this to ourselves. We have to take the responsibility of working on education and leading clients through a process that starts to move things in a different direction.
Jackie:
I really liked what you are saying about the show me three sites. I’m guilty of doing that in the past as well. I think it was a way of gauging what the client is going to be willing to except and what they are going to like. It kind of made it easier to put a design together. Your point is really on task with saying, first of all you are designing the site for the visitor. It’s really not a lot about what your client’s preferences are for color of for typography. It’s been designed for the visitor, so what typography and colors and layouts are going to be appealing for them as it ties into how you want that whole message to come across for their brand and for what their goals are.
Diane:
Right, that’s exactly the core problem. Some of the sites are gorgeous. They’ve got things happening, shooting stars, and animations. You look at that and you are like “This is so cool.” Then you take that and apply it to a real business initiative. You have to say to yourself, “Does that load time work once you add all of these wonderful things to it?” Do all of these happening … When you have all of these elements moving or things people are attracted to, is it even possible to convey the message that your business needs to convey when it first greets a visitor?
You think about like it’s such a standard now, “Hi, welcome to Walmart.” If your busy shooting stars and doing all kinds of things, your website visitor is not getting a message of “Welcome, here’s how I can help you today.”
Jackie:
Also, what device they are viewing this site on may very well determine what their needs are at that moment. You may go through all of this elaborate design on a desktop site and then try to cram it all in on a mobile site where the information that somebody on a mobile device may be completely different. There needs may be phone number, directions, especially if it’s for a local business. Not having to wait for all those other things to download on a mobile display. I truly think the responsive design is nice, but it’s not all the way there yet. You need more of an adaptive design that actually renders content based on the device and what you want that experience to be. Do you agree?
Diane:
I totally agree with you. I see this a lot just in my own experience. I’ve upgraded my phone to a six plus at some point last year. I spend so much more time reading blog articles, reading news letters, and doing those types of things on my phone. That has really opened my eyes to just what a poor job we are doing. You have a layout, kind of a classic website layout with a hero and three blocks and maybe six recent blog posts with images and text laid out in a grid, and it looks marvelous on a desktop. On mobile, all of those elements simply get stacked in a very long linear row. All the information is still there. There’s no context change. Nothing is slimmed down for mobile, maybe just the titles. I’m still scrolling with my finger and scrolling with my finger and scrolling with my finger.
Jackie:
Things that may be important that on your sidebar on a desktop view that you might want somebody to see are pushed way down to the bottom that may never be seen on a mobile device at all.
Diane:
I really look forward to what the next generation of solutions are for this. It’s really something that I want to learn more about. I know that I can morph and change things to a degree responsively. I can not show images perhaps and excerpts when they are not essential on mobile. I could just show you a clickable title, that type of thing. What I’m not an expert in is all of that still being loaded in the style sheet? Is that really the right approach to take for performance? Are there tools and things coming to us that let us design better responsive mobile experiences?
Jackie:
Yeah like where the server is going to render the information to you based on the device you are using, where you are not actually getting even the images to download if you are on a mobile device or something. I think that’s where it’s all coming. Do you remember in the beginning where people use to have a separate mobile site because it was like M dot whatever domain name? That was real common years ago where people would actually just have a trimmed down, simple version of a website. I wonder if we are kind of migrating back to that mindset where response stacking things in a whiff is really solving the usability on a mobile device.
Diane:
Yes, I worked with mobile plugins for WordPress and even separate mobile sites before WordPress. It’s interesting that that is not our preferred practice anymore. It did give you some unique options. I’m really interested to see. I feel like the next generation is going to be a combination of responsive, with some of what we did before with mobile specific sites because especially in the area of eCommerce. You need to bring me to a purchase point that is very friendly for my phone. All the elements are tap-able, usable, and I can see things clearly. That is a lot more thought and effort than just scaling elements that work well on desktop.
Jackie:
Do you think that most of us have really adapted ourselves to designing for mobile first? I know when you build style sheets, you make the mobile first when you are looking at them. Do you think that we are at a point when we approach a design, we are designing it for mobile first or do we even need to be doing that? Do we need to design it for all of the devices? There all going to have different aspects. Going back to the user experience, what does a user need on a mobile phone? What does a user need on a landscape iPad display? Maybe they are just reading and consuming content there.
Diane:
I think it’s really interesting because I think one thing we need to come to terms with is that those are two different user experiences, even for the same user. Just because it’s one user, doesn’t mean that you should be serving them the same experience. I think we should thoughtfully use the opportunity that desktop gives us for an enhanced experience. We should use the opportunity that mobile gives us for an optimal mobile experience. I think the part that is missing today is exactly what you said. Put 90% of your effort into desktop and minimal or not well thought out or stripped down mobile experiences, rather than really optimize mobile experiences. I know this is not the current thought process, but I don’t believe in mobile first design. I think you need to design in tandem. I think you need to think about in your iterative way desktop, tablet, mobile, and always be thinking about how those experiences need to work together.
We now have great tools to do this because we have artboards in Illustrator. We have artboards in Photoshop. Sketch is such a powerful tool. There is a new tool, Figma, that is for user experienced design that even allows what they call multi-player mode where two people can collaborate on design together. As service providers, we need to probably increase the amount of time in projects that’s designated for design. It’s not one day for design and four weeks to build. User experiences are more valuable than code. That’s always going to be true. I mean code is a beautiful thing, but code is not what prompts people to make buying decisions. Code isn’t what … You know we focus so much on that. We need to re-balance our efforts. You can design with code too. Put more effort into designing for the outputs.
Jackie:
I think that’s a great point, especially when you are designing on a desktop. In the past and I’ve really been trying to work through that in my own work that I’ve been doing, is getting past that point where you say “And it looks good on mobile.” Like it is an after thought.
Diane:
Right? Because it is! You think of a fabulous organization, like an aquarium or a zoo or something like that, that has the full circle of needs. There is fundraising, they are taking donations, they have admission, they sell tickets, they have family programs, they sell memberships. They have a myriad of goals that they need to support. What makes sense to me is how do you start breaking down those goals? Hopefully you have had that conversation with the client around goal planning. Now can we go one level deeper and think about what the goals are by type of experience? On desktop, maybe it makes all the sense in the world to have a full focus. We have thoughtfully placed fundraising, an event’s calendar, and different things.
Maybe on mobile what matters the most is upcoming events and making tickets easily purchasable. The experience doesn’t need to be the same when somebody is in a mobile context perhaps. I think these are new ideas to some extent. You know, not just making that experience an afterthought. Really having a phone that for me is kind of a constant companion because it’s big enough for me to really operate out there has totally changed my thought process about how to approach mobile in new and different ways.
Jackie:
It seems like we’re still very focused on desktop displays and the wow-factor of all of that and trying to just crunch things down like we were talking about. I like the idea of maybe approaching the mobile aspect as a separate idea, layout, design, filling a specific need, something simple … It’s like do you really need to download a hero image from a homepage on a mobile phone? Is that doing anything for the experience? Is it easier to read? Maybe you need a different front page template for your mobile display or have a way to build that out so it renders completely different on mobile, rather than trying to strip things away.
Diane:
Many of the interesting things is naming pages. There’s a huge swell, which I think is great. It’s not just landing pages. It’s email signups, it’s all of those things. There is a huge swell up there with people selling things online, products and courses. Not so much an eCommerce store, but marketing and promoting things that they are doing. Along with that, there’s a big focus on landing pages, pop-ups on mobile, a lot of marketing orienting activity for lack of a better word, that’s probably not ideally suited to the device it’s appearing on.
That was an okay experience to give me that exit intent pop-up on desktop. That same exit intent pop-up infuriates me on mobile because I probably can’t even do what you want. I know you want me to sign up for your newsletter, but signing up for your news letter can be annoying on mobile … Ats and dots and coms. You’ve put me off. Me not signing up for your newsletter because it’s just difficult. I can’t figure out how to close this. Is this really working the way you think it’s working? I think everybody needs to use their own site on mobile because I’ve seen some very large product vendors in productivity and tool spaces where somebody says, “Check this out, it’s a great product.” I click on that link on Twitter on my phone and go to their site and find out that their navigation isn’t tap-able. They have a responsive site, but it doesn’t work.
Jackie:
The other thing I’ve noticed too is you have attention being paid to design on the desktop and you certainly have it on the mobile phone. I think people want to make sure that it at least looks good on a mobile phone. The area that seems to be neglected for me is, I use my iPad a lot. I use it in landscape mode because my case sits on my lap or my legs when I’m reading. That is how I use it. I don’t use it in a portrait mode. A lot of applications kind of require that you do that, which is very annoying to me. I don’t think enough attention is paid to how the layout looks on the iPad in landscape or portrait mode. I’ve seen many where the menu is not in a mobile menu yet, but it’s wrapping all around. I often look at that and I go, “Nobody checked it.” I just had that mistake happen to me on a site that I launched where there was a problem.
Diane:
I’ve had that happened to me numerous of times where I just didn’t think. You were thinking about this one, this one, this one, but these are out outliers out here with landscaping. We have to pay more attention. I think all of that when we come back full-circle … I would love to have an increasing amount of time and opportunity to design those experiences. I have not designed intentionally what I want iPad landscape to look like. I’ve designed what I want portrait to look like. Those are just things that we just have to keep going after and improving on.
Jackie:
Your right. Even turning your phone to landscape mode on your phone, I think a lot of times those are over looked as well. It’s close enough, but it’s not really an optimal layout. Then again, if you’re always just going back to trying to fit on the desktop to back down and get it to look okay somewhere on a mobile layout. I think the world the way it is and how many different devices things are available on and all these different sizes of phones and screens and now you can push things on your Apple TV, there’s lots of ways to view content. The challenge is going to be designing for all of those outcomes like you are saying. Whatever your own, what that user experience is going to be like. I think it’s getting more challenging. We’re being expected to design things in less time.
Diane:
That’s a huge part of what I’ve seen. We have new tools and new opportunities that are welcome, SASS, Task Runners, GIT. What I’ve noticed in my work, of course which is kind of the long view, we’ve come really, really a long way from where I started because I spent eighty to 90% of my time in Photoshop or Fireworks designing that site. I spent ten or 20% of my time cutting it up and putting it in a table and doing some rollovers and some different things. That proportion has not changed for the better. Now a lot of the emphasis is on the build time. We need it because things have gotten so much more complex. You have to accommodate these different devices. You need to incorporate best practices for performance. You want to give that client an excellent piece of work in terms of the website. As the complexity of building sites has increased, that time has come out of design instead of increasing overall project effort. It’s something that’s really changing.
The introductory tier for websites are very much a commodity now. Where you take some content, pick a theme that has some boxes, formulate your content to go into those three boxes even though your content doesn’t remotely fit, that doesn’t make sense but that’s what you’re going to do at an introductory level. Where I think we as service providers can really change and add an enormous value is with clients who are so interested in goal oriented approach. My favorite clients are the one that want to talk metrics. Let’s actually put some numbers down. Let’s say, let’s see if we can achieve this, this, and this. Increase your readership of your articles, increase this, increase these specific goals. Let’s test and think about different ways we can do that. That’s when a project gets exciting. You know, when you are looking very holistically at the design of content, the design of paths to actions, designing goals, measuring goals.
My suggestion for everyone that works in this space is the more we start to concentrate on value added expertise, the better off we are going to be. We are not only going to elevate our own businesses, we are going to educate clients and help them be successful. Gradually they are going to start talking about, “I didn’t look at three sites and pick a theme for us. I did this and boy was the outcome completely different than doing that type of approach.”
Jackie:
I think getting out of the habit of designing containers and actually putting together solutions and helping clients achieve a goal is much better approach in the long run. It kind of shields you from all of that commodification of websites. It’s like you were just saying, you get a theme layout, you get it, and it has three widget areas at the bottom. Your first thought is, “Okay, well we’re going to need to put something in there.” Your need may be completely different and has nothing to do with trying to fit three things in those three areas. You end up designing your experience based on a template that you don’t even know matches your clients goals at that point.
Diane:
Absolutely, it’s such a big problem right now. I think as we can evolve beyond that, and it kind of ties into another idea that I’ve become really interested in, which is the design of content patterns. Instead of thinking in terms of, you know we always talk about website design as really and too often what we mean is the homepage when we say website design. There’s a trend afoot that started more from the code side. Red Frost has a really interesting concept called the Atomic Design where you break pieces down into atoms and molecules and put them together. I’ve seen other thoughts around this where you’re really looking at what’s your best implementation of some specific type of content.
Maybe it’s cards, maybe it’s a list, maybe it’s something entirely different that we haven’t thought about yet. What’s the bet implementation of this? If you develop a library, for lack of a better word, of common design patterns for calls to action and compute what I call people. You know that might be a staff listing, might be a board of directors, might be conference attendees, but it’s still a people design type approach. You can have some of those kind of at your fingertips, so every time you sit down you are not reinventing the wheel, yet you can put your energy into making that the best design possible.
You say, this is going to be an image grid. How do I make it a good image grid? What happens to this image grid on mobile? What happens to this image grid on … So not completely thinking up a brand new revolutionary way to display content. Instead, I’m taking the time to think through a lot of this stuff that we talked about today. What’s best outcome?
Jackie:
Exactly, you are talking about a grid of photos. You get down to mobile and maybe it’s not really necessary. If you have a grid that’s got twelve photos on it. Is it really necessary on a mobile device to show all of those twelve photos where you are scrolling up and down? Maybe it might be better in that case to show names with links to take you to a page to look at that? That’s something that you have to discuss about what the outcome is.
Diane:
It’s so interesting when you really think about it. Everybody says the slider is a terrible thing. What if for that particular purpose, on desktop you showed a grid of twelve images? What if on mobile you condensed those twelve into a slider that the visitor could just with a tap of a finger scroll through? Maybe a slider makes sense on mobile instead of a long list. If the visitor is really interested, give them the ques so they can clearly navigate through that. I think that would be a great solution.
Jackie:
That’s used in real estate sites I think too on mobile a lot. Zillow and others, when you pull up a listing and you’ve got thirty-five images to look at, there not going to show them all to you at one time on a mobile device. You are going to get the first one. You’re going to be able to swipe with your finger and scroll through. That creates a better experience for the user. That’s not what you would want on a desktop though.
Diane:
It also goes to the point of don’t be subject to this is good and this is bad. I would never do a slider for that on a desktop. I think it’s a great solution on mobile. Personally that would be my preferred experience on mobile. Don’t automatically say a slider is bad. Think about when sliders make sense in certain context. To me, that’s design. That’s design far more impressively than between deciding between Droid Serif and Mrs. Eaves. Designing that experience and putting all of your thought into it is really when you are functioning as a true designer I think . That’s something I definitely want to spend more and more time on and create more space and time to think about it and optimize for it.
Jackie:
You and I spoke about components. We were talking about how I had just taking a course on LinkedIn and was talking about HTTP Two and kind of how you need to be planning for the future with that. One of the things that was addressed, Mortan Ren Hendrickson did the course. It was a great course. They were covering topics that I found interesting as far as our approach right now with SASS and using Task Runners is to catenate and get everything together in one file so that you can minimize your HTTP request, which helps improve your page loads. Things are changing with HTTP Two and if you have SSL because you get a synchronized downloading of everything. You can defer things. There’s lots of flexibility in that. I’m just curious how you’re thinking, “Okay how am I going to start to plan for the future on those things? How would I design like a WordPress site that was going to take advantage of some of those things?”
Diane:
I think it’s such a huge opportunity and something that’s really needed. If you think about it, most of the WordPress sites that we built have quite a few different elements. We make extensive use of custom post types and advanced customed fields and build everything out from calls to action to different types of displays. You’ve got this really wide fields and everything for the most part is packaged up and served for that. If I could start isolating things that were only served. You are only getting these assets when you are looking at the homepage when you are on desktop. You are only getting these assets when you are looking at the staff page on mobile. That’s going to be amazing.
I hope we get tools that let us work on some of those ideas easily because we are kind of stuck in the mode where there is a lot of innovation happening, but it’s not easily done. We have to educate ourselves. Then we have to work through theories of how to serve that kind of content and what the implications are. Same thing was true at the beginning of CSS. It was hard and it had to be worked through. I hope some of these ideas become approachable to a large audience of web builders so that we can make these experiences better as quickly as possible. When things are still at a technical level, there are a whole segment of people who just aren’t going to approach that.
Jackie:
I think definitely on the south side in designing your styles, we’re already breaking everything up now. We are breaking them all up to make them easier to work on so that we can put them all back together and load it all in one big huge file. It seems like there’s going to be a real opportunity to maybe have a core style sheet that gets loaded on all pages that has really your basic elements that you are going to need to style for. Style sheets that load based on what the needs are for that page, for that device that it’s going to be on. That can really open up the whole architecture for speed improvements and everything else and efficiency.
Diane:
I think so. I try to do that now in Sass, like encapsulate the styles just to that page, but I’m pretty sure that all, concatenated though it may be, is loaded.
Jackie:
Yeah, the same thing with JavaScript too. You may have a global.JS file for your theme and you are putting all of your JavaScript in there. Then I’m thinking to myself, all of this is loading on the global page or all of this is loading on a page. Then there’s like half a page of JavaScript here that is never going to be used on this page ever. Is it really necessary to load it and to check for all of those things. It’s like the more bloated your style sheets get, the more work the browser has to do to decide. “Okay, let me go through and read these 3,600 lines of CSS and see if any of this applies to the page I’m rendering right now.” In a lot of places, I’ve found twelve lines that are going to be used on this mobile display.
Diane:
I’ve read some articles about there is this idea called Critical CSS where you can select the CSS that’s important to load first. I think CSS Tricks and Chris Coyier has written about that. So these ideas are coming, no doubt about it. We’re still in the stage where implementing them is work, but it’s probably work we need to do. If you want to move forward and you want to learn, these are the things we have to spend time on and hopefully write and share and tell others.
Jackie:
Last thing that I wanted to chat with you about before we go because we are almost out of time is just SVGs in general.
Diane:
Oh my favorite.
Jackie:
You and I had chatted about it. I still think in WordPress SVGs are definitely the future and where things are going to go. It is a little bit difficult to work with them right now. I used them in my child theme image folder and use them as background images, icons, inline images. How do you see SVG fitting into where we are headed?
Diane:
I think it’s a really exciting area. I’m just an illustrator girl from the get go. As soon as SVG were a possibility on the web, I was like “It’s my dream come true!” It’s very complex think still right now so some degree because there are multiple scenarios that you can use SVGs. When you use them as an image or as a background element, you are getting scalable, crisp graphics, but you are not using the full potential of SVG. When you do that, you can’t change colors or animate elements. It’s still a very, very useful thing to be able to do. If you think about Retina or even outside of the Mac world, you can buy a 4K TV. Wouldn’t it be great if you could pull up a website or a presentation and have it look awesome there. You get so much out of SVG.
I’ve been trying to figure out if SVGs pose security risks or not. This is my question about that, most of the reading I did on that was more in the realm of a hypothetical risk. That if you go somewhere to download a SVG to use on your site, that somebody could have loaded a script in that SVG and it can be executed. Now my question is, if I make my own SVGs, which is exclusively what I do, I’m certainly not putting any nasty scripts in my own SVGs. Do those actually present a security risk? I’m not sure that I have figured out a definitive answer to that yet.
Jackie:
I haven’t heard an answer that I was comfortable with yet either. I design my own SVGs, so I’m loading them in. When I did the Rethink FM logo, I wanted to be able to animate it. My challenge was get it into the HTML. I needed it to be there so that I could assign classes to the elements, make them turn, create the animation on that. That was my own SVG that I created, so I know there isn’t any malicious code in that SVG. I wrote a plug-in to be able to import it in if I decided I wanted to embed SVGs inside of a poster or a page. Would I be comfortable with giving that to a client and letting them purchase SVGs somewhere else and loading them in? I think that is where the risk would be. I would not be comfortable doing that.
Diane:
No, that seems extremely high risk. I think where we are today in a nutshell is I would so encourage everyone to learn to create SVGs or if a designer gives you elements, you don’t have to be an artist yourself, but have the working knowledge in your tool of choice for Vector editing to be able to output optimized SVG code to use in designs. I think that is absolutely key skill. Then look at the plug-in you created. There is another plug-in that I’ve used that does a swap so you can upload SVG files and you embed them as image files. It has some intelligence that gives you an embeddable SVG that you can animate and work with. It would be probably be a pretty safe process for a client sight because you couldn’t go too wrong. I don’t see enough activity around SVG and another talk about it because it is the answer to so many, many things that we have.
You know this Jackie, if you take an SVG file and you take a Photoshop file of your logo for example and compare the size of those two, it’s just like “whoa!” The other thing that is incredible cool about it is I worked with someone to do an animation for their site, which was a design element that was composed of lines that kind of span the page, you know lines connecting. I was able to very easily animate that in a draw on type of approach using SVG, SVG file and some CSS and about six lines of JavaScript. Now we are in a place where we can create sophisticated interactive elements that are scalable. I can take that same line animation because it’s an SVG file, and I could use it on different pages in different colors. I could animate the stroke instead of the fill. These things are not difficult, trust me because I’m not co-genius junior when it comes to animation and scripts. If I can do it, it’s pretty achievable.
Jackie:
It is once you realize that you can start using IDs and classes in your SVG. After you design it, you can go in and edit the files [crosstalk 00:47:54] to code. You can add things. You can create some groups and put things together. Then you realize okay now that I’ve got the style and the classes, I can just go and style these. I can do animations on them. I can change the colors. I can do things on Hover. There’s all kinds of possibilities with that.
Diane:
If I had to pick one thing for people to learn that would be it, is how to effectively work with SVG from beginning to end. Chris Coyier has a good book called “Practical SVG.” There is Fantastic, the Treehouse Courses are excellent, Valhead had a great course that I took on Linda. There’s no lack of options.
Jackie:
No and if you want to see examples you can go on to codepin.io and just search for SVGs, animated SVGs, and there will be code examples and things that you can try and play with and fork and save. I highly recommend that. That’s how I learned how to animate the things that I was doing on my project was looking at examples that I saw elsewhere. Then saying, “Okay, well how can I apply these?” Then I ended up having to solve some problems that were unique in Firefox that I learned through a course that I took on Treehouse.
Diane:
Another thing that I saw the other day that was really neat was the Library of SVG patterns. Of course there are two colored patterns, you know the type of thing that we use to see all of the time, you know a gentle wave line or different textures for webdesign. Now there’s an opportunity to use that small SVG format that’s scalable. We’ve solved that problem. You can of course get in there and change the two colors of the pattern just in code to perfectly work for your site. You can change the scale of it. Even when you are not animating, think hard about all the graphic elements that I’m making for sites now are always SVG files.
Jackie:
Yes, that’s exactly what I’m doing too. The PNGs are going by the wayside. It’s just much better to do it in SVG, especially if there is no photographs in it or things like that, which is really nice. Once you start, if you have to rastersize things, when you start to scale them there are certain elements in them that will look fuzzy if it’s not completely vectored. Just make sure that that is, but you’re good to go with that. Then you can do all kinds of amazing things.
Diane:
Yeah, that’s my number one. I love working with it. I think that it’s a really important thing for designers and developers to wrap their hands around because it’s performant, it’s flexible, it’s resolution independent, it’s everything that you needed with graphics.
Jackie:
You’re right. As things change on the resolution side in the future, it’s going to be compatible going forward. You don’t have to worry about, “Oh, now the displays are three or four more times the resolution that they used to be.” You don’t have to go back and update all of those things later.
Diane:
Right, especially when sites leave your harbor, you don’t want to look at them two years later on a high resolution device and be like “Oh no, that looks terrible and it’s only been two years!”
Jackie:
I wonder one day if they are not going to create a way to do that with photographs since maybe there is a way to [crosstalk 00:51:30] convert it to code and make it to that it’s scalable and doesn’t blur out when you do that.
Diane:
I have actually converted screenshots of websites to Vectors by tracking them and have gotten some really good results because they needed some screenshots for print. The interesting thing about that is today they are not small. They are huge files, but they are very accurate and they are Vectors. If somebody brings in a piece of technology that makes those file sizes adapt, I bet that’s where we are headed.
Jackie:
I think there is going to be big changes coming with images in the future. I think right now even the way that WordPress is dealing with it, it’s still in a stage where things are revolving. It’s not really an ideal situation. Number one, when you upload an image into WordPress it’s going to make every size available that you’ve set when you do your add image size. You may not need that for that image. You may just have a single use that you are going to use that image for but because it’s automated, it’s going to create eight different versions of it and a bunch of extra files that go with it.
Diane:
That’s one thing that I would really, really like to see change is if we are going to generate multiple images, give us the ability to encapsulate that in certain ways. You know this only happens on this post type, or this only happens under these scenarios because you just end up with mountains of files. The other thing I think is an opportunity that is just ripe or improvement, rethinking in WordPress is image sizes for different presentations on-site. Then we need images for off-site. We need a vertical Pinterest image. We need a horizontal Twitter image. We need a full Twitter image. We need to produce rich experiences. Right now, that’s not very elegant.
Jackie:
No, it requires a lot of manual entry, even if it’s own a user’s part that’s writing content on the site. If they are doing a blog post and they’ve got it, well they are going to have to get an image for the Pinterest to add that in. That’s not an easy task.
Diane:
Right because they are not … When you look across featured images and social media, there’s a lot of marketing data that says the image you pair with your content is key to user interest and sharing and everything else under the sun. We know these images matter so much. You can’t realistically take a horizontal image for Twitter and automatically make a it a vertical, pin-able image for Pinterest. I mean you could, but it’s not going to do you any favors. I’ve been using a technique in Illustrator with artboards where I layout common sizes. I can export those. That helps to some degree. It still seems like this process is pretty arduous.
Jackie:
It is and it’s not something that a client is going to be comfortable doing with the content they are creating.
Diane:
Say, “Now I’d like you to create eight different images meeting these specifications. I would like you to make them the best images possible.” Every time you do a post by the way.
Jackie:
Yeah really … Gosh Diane, I have so much enjoyed talking to you today. If folks want to get a hold of you and learn more about what you do, how can they reach you?
Diane:
You can find me at Dkinney on Twitter, D-K-I-N-N-E-Y. DianeKinney.com is my blog. The versatility group is our company website.
Jackie:
Thank you very much, Diane. I hope you have a great rest of your day. I’ll see y’all next time.
Diane:
Thanks for having me, Jackie. I really enjoyed it.
Nov 2, 2016 • 37min
Episode 7: Why Web Accessibility Matters
In this episode, I’m chatting with Rian Rietveld. She is a Web Accessibility expert and leads the WordPress Accessibility Team. She is my first international guest, and lives in the Netherlands.
This is a topic I’m passionate about. I finally get to ask Rian all those questions that have been floating around in my head about Web Accessibility. Rian explains why it’s important, and what we need to know. A complete transcript of this podcast is now available.
Meet Rian Rietveld
Rian is a WordPress engineer.
She has been developing for the web for over 17 years and focuses on web accessibility and usability.
She works at Human Made and leads the WordPress Accessibility Team to improve WordPress core.
Show Notes
Rian’s Website: http://www.rianrietveld.comRian’s Twitter link: Rian Rietveld
Helpful Links:
Accessible Ready Themes from WordPress.org
W3C Accessibility Standards
The A11Y Project – A community-driven effort to make web accessibility easier.
WordPress Accessibility Team – Useful Accessibility Tools and Plugins
wA11y – The Web Accessibility Toolbox
WP Accessibility Plugin
tota11y – an accessibility visualization toolkit
Accessible Ready Themes from WordPress.org
Utility Pro Accessible Genesis Theme by Carrie Dils
Rian also mentioned a Reader View available on most desktop browsers and mobile devices. I found the latest version of Safari has it. It is the first icon with horizontal lines in the location (URL) bar. I found an extension for Chrome called Reader View that offers that too.
Complete Transcript:
Open PDF version of this transcript
Jackie:
Hey everybody. This is Jackie D’Elia with Rethink.fm, the forward thinking podcast about web design and front end development in WordPress. Each episode I’ll be talking with fellow designers and developers who are exploring new ways to approach and solve the challenges we face as our industry evolves. I’ve got questions so let’s get started.
Welcome to Episode 7 of Rethink.fm with Rian Rietveld. We’ll be talking about Web Accessibility today, what you need to know and why it is important. Before we get started I just like to remind you, if you’re enjoying these episodes of Rethink.fm please head over to iTunes and leave a review. It really does help and I thank you very much for doing that. Let’s get started.
Jackie:
Hi Rian.
Rian:
Hi.
Jackie:
Thank you very much for joining me and I’m so happy that you’re going to be talking about accessibility with us and things that you’ve been up to. For those who don’t know you, would you tell us a little bit about yourself?
Rian:
At the moment I’m a WordPress engineer and I work for Human Made. 25% of my time goes to WordPress Core. I improve with a team, the accessibility of WordPress Core for people with a disability or use the internet in another way most people do. I’m also part of Genesis Community, so I know you off that.
I live in the Netherlands with my son and my husband. I love to work in my garden. Anything else you need to know?
Jackie:
Oh, we’re both gardeners. We both love gardening. Yes. I do too.
Rian:
Well, thank you for having me.
Jackie:
Thank you. First question for you is how did you get started with WordPress? Then how did that roll into your accessibility focus?
Rian:
I’ve been developing websites for 16, 17 years now. I started with just plain HTML pages and then I tried out some CMS’s like PhpNuke, this was a big disaster. Then I wrote my own little CMS but slowly that was too small, I needed the proper CMS with all the features.
I compared some CMS’s like Joomla and Drupal and WordPress and I can’t remember why I chose WordPress, actually. I think it was the separation between the themes, actually the work you do and WordPress itself so it was easily updatable and I loved the community. There was a large community, you could ask anything on the forum and there were people helping you. It was a very, very friendly community and it works out of the box so it was very easy to make something for clients very easy with all the features in it. That’s why I stayed.
Jackie:
How did you start using Genesis? What was your reason for choosing that as a framework to work on? Do you still use that now?
Rian:
That I use Genesis is Remkus De Vries fault. I heard him talk at WordCamp Netherlands about the Genesis framework and I thought, “Well, that’s good.” I always used Twenty Ten (theme), way back, as a framework for what I built on. He told me so in the talk he gave about the features of Genesis, about the hooks and the filters, and how you can move stuff around. I tried that and I really, really liked that. So, thank you, Remkus.
Jackie:
Genesis is wonderful.
Rian:
Also the community’s awesome.
Jackie:
I love the Genesis community. It’s wonderful. If you’re not in the Genesis Slack channel, you should definitely go and request access to that. It’s a great place to hang out with Genesis folks. How did you get started with accessibility and that focus? How did you become an expert in accessibility for WordPress?
Rian:
In 2010, the Dutch government decided government websites needed to be accessible. I thought, “Well, that’s a huge market. Let’s try out if I can learn that.” I followed the course with the Dutch accessibility foundation, how to go to accessible, I implemented it in my work. I didn’t get any work from the Dutch government, but I did get work from Dutch foundations who needed an accessible website, like the Dutch Eye Association. I discovered WordPress was not accessible at all, so I had to do a lot of fixing. I thought maybe it’s easier if I fix WordPress itself, so that’s why I joined the accessibility team.
Jackie:
For those who have heard the term web accessibility, but may not understand what it encompasses, can you go over some of the issues that web accessibility is trying to address?
Rian:
I think everybody has some issue. Some people, when you get older, you can see contrast less. You really can’t see a gray text on a gray background. It looks very posh, but for many people just can’t read it. If you have an iPad and you hold it in the sun and the contrast isn’t good enough, you can’t read it. Everybody has benefit from it. Just not only color contrast, but people who can’t use mouse. If you’ve broken your arm and you want to use a website with keyword only, if the website’s built accessible you can access everything with only a keyboard. Then there’s, of course, the people who are blind. They get the website read out so it has to be decently built to actually work that.
There are also people who can see and who can speak, but can’t use their arms. They navigate a website through speech. They can say “press that button” or they can give commands to their computer to navigate a website. There’s all kinds of different ways people can navigate. There’s also people with limited sight who can see only, for example, through a straw. They see so much like you were seeing through a straw. If you have everything on the website wide apart, they have to search on the website for “where is it? Where is the submit button?”
If the controls you are using for a form, for example, are close together, it’s much more easier for them. There are a few examples. It’s not only for blind people, but it’s for a different kind of people. There’s, of course, people who are deaf. You’ve got to subtitle your video because otherwise they can’t hear it, they can’t understand it. Just all kinds of aspects.
Jackie:
What does the WordPress accessibility team do now? What are you working on in the future for WordPress?
Rian:
Mainly working on the admin, because the front end, that’s themes, and that’s the theme developer. We have no control about that. In the admin, we can make the admin so accessible possible so that content managers with a disability, everyone can use as good as possible. For the theme repository, we developed a label called Accessibility Ready. If you want to submit a theme to the WordPress repository and you have accessibility ready tech with it, it gets reviewed. If the site is accessible enough … That’s themes. That’s what we do for themes.
Jackie:
How about plugins? What’s the state of the plugin market with accessibility?
Rian:
Do you know how many plugins there are?
Jackie:
Not off hand.
Rian:
Totally not doable to actually review that. It’s undoable. What we want to do is educate developers so we give talks at WordCamps and on Contributor’s Day we’ve got workshops. We want to publish a handbook. At WordPress.org/accessibility, there’s a link to the handbook. We are writing that to give developers as much resources as we can. Fixing plugins is just undoable, of reviewing that. If someone gives us a lot of money, maybe, but I don’t think that will happen. There are plugin and theme reviewers who are asking the accessibility team, “Can you do a review?” That’s paid work, so that’s okay. There are plugin developers who hire accessibility experts, like Yoast hired Andrea Fercia. He is also on the accessibility team. He is busy making the plugins from Yoast accessible.
Jackie:
It sounds like the education is the key here in getting developers and designers who are working on plugins and themes, how to make theirs accessible. Another thing is getting the accessibility inside the admin panel. What’s the state of that now? How would you rate where that is?
Rian:
At the moment, it’s pretty good. People with screen reader, who are blind, can use it pretty good if they get proper training. One thing that’s really not good at the moment is the media. Media is very difficult for screen reader users and for keyboard-only users. That’s really a project to start, but that will be a huge task. We’ve not started that yet, but the rest is pretty good and we’re getting better and better. I’m very optimistic about that, but we’ve done a lot of work already, and we’ve got the support of the release leads. Now we’ve got Helen (Helen Hou-Sandi), and she is really into accessibility and everything we do now is supported by her, so that’s excellent. The last few release leads were also very supportive.
Jackie:
What do you think the state is for the WordPress community overall in how we’re approaching accessibility? I see a lot of sites that I’ll go to that are not as accessible as they should be. I’ve even got some of mine that I’m constantly trying to do improvements on. What do you think the overall state is now, and how do you see that improving in the future?
Rian:
The last two years, something changed. Before that, nobody actually cared. Now, suddenly people are eager to learn and they also … Once you get involved … I’m very, very hopeful, but what you said before, we have to educate the developers. I think they also have to educate themselves. All the knowledge I have is through studying. Everybody can do that if I can do it.
Jackie:
What are your thoughts on how we should approach accessibility discussions with our clients? Especially when they’re concerned about cost and thinking accessibility might add to the cost of their project?
Rian:
It’s the same as responsive. You don’t add to your quotation. “Oh, I will make it responsive, that will cost you so much extra.” You just make it responsive, it just comes natural now. Same for accessibility, you build it accessible. You don’t even have to tell them. You can explain somethings to them when they add content, like adding structure and add alternative text to an image, and then I say, “It’s very good for Google.”
Jackie:
Speaking of Google, do you think that the future might be where there’ll be penalties for websites that are not accessible as they’re doing with-
Rian:
That will be the day!
Jackie:
They did that with responsive themes. If your site is mobile friendly, you get better search rankings for that. Do you think, at some point, it may be accessibility as another factor in your ranking?
Rian:
I hope so, because then there will be a lot of money for accessibility if Google decides to rank accessible websites better. If you build accessible, Google is deaf and blind. It immediately benefits Google. If your heading structure is logical, Google can make better sense of your site. If you have decent HTML, Google can read your site better. If you have old content in your page instead of in images, Google can read the content. I think accessibility benefits SEO.
Jackie:
I agree with you on that, for sure. If you’re just starting off, you’re a developer/designer, and the work that you had been currently doing or in the past had been doing for clients, didn’t involve a lot of accessibility focus. You’re not as familiar with how you should approach it and how you should start, what are some five things you can do for your own website or a client website to help it be more accessible?
Rian:
First of all, build it decent HTML5. Don’t use a DIV if you actually mean a BUTTON. Build this and run it through the W3C validator. Get all the errors out. All the HTML should be semantically. If you have a block quote, use a block quote. If you have a button, use a button. If you have a link, use an A, an anchor. Use a header, use a aside, use a main, use a footer. Make a decent structure of your site and tell a story with your HTML.
Jackie:
Does WordPress do that out of the box?
Rian:
Twenty Sixteen theme does that. It is decent, a very decent thing. Very accessible. 2015, too. I hope 2017 also. Decent HTML, that’s your foundation. Every screen reader reads decent HTML. That’s first. Then, make everything keyboard accessible. You can try it yourself, how to use it, how to navigate with a keyboard. Can you access all functionality by keyboard? If you use, for example, your hamburger menu, a DIV to open and close, a DIV gets no focus if you tap with a keyboard. If you are using only keyboards, you can’t open and close a menu. Use a button because that button can focus. I wrote something down. Having structure is also important. People who use a screen reader can navigate with it. It’s very easy if you only have one H1. That H1 represents what the page is about. The rest, you divide into H2, and after H2 comes in H3. Built a story with it. Built the paragraphs with it with the headings. Just don’t use a heading just because you want something bold. A heading should represent the content that’s below it. It’s the same. It’s storytelling HTML. You tell a story about content.
Another tip is meaningful links. Click here. That’s a very terrible link name. Also, Read more. Why is this? If you have a screen reader, you can call a list of links to quickly navigate through a page to another page, but if all the links are click here and read more, you don’t know where to. You have to read the full page to actually know where you go to. If you have meaningful links, that will save screen reader users a lot of time. You also have the links that are empty, that are nothing at all, like only a Font Awesome icon. Then you have to add (screen reader) text with it. Another one is color contrast. Use sufficient contrast so that everybody can read your site. Was that five?
Jackie:
I think so. Are there any tools that you can use for checking contrast?
Rian:
Yeah, Google contrast ratio checker and there are dozens.
Jackie:
I’ll post some links in the show notes here for folks if they want to check that out.
Rian:
There are also drop tools, you can check the background and the foreground. If you go to WordPress.org/accessibility, then there’s a link, “useful tools” and there’s a list of all kinds of tools you can use, and also contrast checkers.
Jackie:
My next question is about font sizes. I know you and I maybe have chatted about that in the past in the Slack channel. I noticed when the last Genesis sample theme came out, they’re using pixels and rems for the font sizes. I noticed some themes are just using pixels. I realized that support earlier, in older browsers, for pixels, didn’t scale very well on responsive themes. I think a lot of folks were using ems at the time. Can you just talk about the difference between the three and, going forward, what should we be focusing on?
Rian:
Em is I think the favorable one. That’s just very, easily scalable. This responsive stuff, having a font size in em, it’s depending on its parents. “Who’s your daddy?” You can’t be always sure how large it is. If you use rem, that’s fixed. You actually know this is always that size. It’s the same as pixels. There’s a direct relationship between rem and pixels. Em is relative from its parent. Em is supported by all browsers, all versions from way back. That’s really backward compatible, and rem isn’t. Browsers are getting smarter and smarter. I think it’s the same as “Do you still support Internet Explorer 6 or 7?” Everybody has a rule. I don’t support below that IE version. What you see nowadays, if you look at the browser, you can have a few … I don’t know the english word for that. In Safari n the right in the URL, if you click on that, you get text and you can adjust the size and you can adjust the contrast. It’s also on mobile phones. Do you know how it’s called in English?
Jackie:
I do not know what that’s called. (Reader View)
Rian:
If you have an iPhone in Safari, then you have, on well-written sites, three lines on the left, and if you press that you get only text. I think they have it in desktop already now.
Jackie:
I’ll find the information on that and post that in the show notes as well. That’s interesting. I haven’t seen that.
Rian:
Most browsers can enlarge very well.
Jackie:
If I’m going to be doing a Genesis project now, should I be looking … I’m using SaaS, so when I do my compiling I’m using postcss, and there’s a package that will add the rems on for you. If you’re used to using pixels for your font sizes, it’ll go ahead and put the rems in and use the pixel as the fallback. That seems like that’s the way the sample theme in Genesis is now. I think I had asked you previously, and you said, “If you don’t need to have that strict support, then pixels is fine for most browsers.”
Rian:
It depends on your audience. If you have an audience with very old browsers and you think they need to enlarge, then you use both. If you have a very modern audience, well … There’s one snag, if you want to have your site validated for the WCAG rules, then you have to have scalable font sizes. It fails if it doesn’t have rem or em, if you want to validate for WCAG rules because then it has to be scalable.
Jackie:
In that case, you would have to be using rems or ems, and ems would definitely have more backward compatibility for older browsers.
Rian:
Yeah. Depends on what you choose from. I think most modern browsers can enlarge easy with pixels. I don’t know if anyone’s going to shoot me now.
Jackie:
I’ve got a question. I’ve used that Tota11y plugin, it’s like a Chrome plugin. You can put it in and then it will show you the contrast ratios and the headings and the errors that you’ve got on your site. One thing I’ve noticed on the Genesis themes is, and maybe it’s on all the WordPress themes too, the skip link has an H2 tag. It comes first. That usually gives you a warning that you shouldn’t have an H2 before an H1, which would be your logo or your page title. Is that something you can just ignore?
Rian:
There are different rules for accessibility. For WCAG, you have A, that’s basic, AA, that’s globally used, and there’s AAA. That’s really strict. Having an H1 not as first heading is AAA. That’s very, very strict. Worldwide, AA is used and AA doesn’t care. If you really want to be very strict you can change that, but it’s not necessary.
Jackie:
It’s definitely not something if a client goes and checks their website using that tool.
Rian:
Maybe you should add your quotation to build a website to AA, and WordPress itself is aiming for AA. That’s the global standard.
Jackie:
Is it necessary to have an H2 for the skip link? Does it even need a heading tag? Could it use something else? I guess that might be a reason for the screen readers?
Rian:
Screen readers can recall a list of links, but also a list of headings. If they see skip links, they can jump quickly to the skip links because they recognize them from the headers. It’s more convenient than a requirement.
Jackie:
The other thing I wanted to chat about was images, and I know you mentioned it earlier. Making sure that you have good ALT tags for your images. I think when I’m building out a site, I don’t have any problems doing that for the images I’m adding. Educating clients about using ALT tags for their images is something that I try to do and make sure. I get a lot of questions about what’s an appropriate ALT tag for an image. I wrote a post not too long ago, maybe last year, on my blog about … There’s lots of different reasons. If the image is adding context to it, then how you would want to define the text that’s in there, and describing the photo if it’s a photograph, can you give us some guidance on an overview of that?
Rian:
There are two different kinds of ALT text. You have alt text with a description of the image in it, and you have empty alt text. You can leave the alt text empty. Don’t remove ALT tag, but make leave it empty. That’s for decorative images. Then they’re not read out by screen reader. They aren’t bothered with it. If you think this adds something to the context, you can add a short description. You don’t have to say, “This is an image of … ” because it’s already read out as “Image” and then the alt text. It’s “a beautiful flower” or whatever. A portrait of (name). You can use both in the content. With a description, keep it short, or without, then it’s totally skipped.
If you have a decorative image in your theme, use it in the CSS as a background image.
Jackie:
What about captions on an image? Would that be duplicate read out for a screen reader if you added text to the ALT tag.
Rian:
It’s duplicate.
Jackie:
Sometimes I’ve seen where the caption has a longer description about what the image is and tells a little bit of the story of it, and then what would you be putting in the ALT tag?
Rian:
A very short something.
Jackie:
Something very short.
Rian:
Or nothing.
Jackie:
Or nothing at all, and the screen reader would skip the image and then read the caption out.
Rian:
I think so.
Jackie:
That makes a lot of sense. We talked about contrast ratios also. I think that’s something designers struggle with a lot. I know I have in the past, too. You’ve got something that’s pleasing, you like the way that it looks, and then you go and check it and it doesn’t comply.
Rian:
Especially when you use orange. Orange is always a problem. Getting contrast right for orange and white. It looks very pretty, but it’s hard to get the contrast right.
Jackie:
If you’re close enough to the right ratio, are you okay? If your project is not required to be compliant, or should you really try to get your contrast ratios to show up all green in that Tota11y plugin?
Rian:
The contrast ratio 4.5. It’s up to you.
Jackie:
Especially, I guess if you’re reading text. That seems to be where it’s really, really important. Text on top of a background. You want to make sure that that text has enough contrast to be read.
Rian:
If the text is larger, the contrast ratio can be less. For headings, for examples, that’s a contrast ratio of 3.1, I think. For small text, 4.5.
Jackie:
How about icons? Icons seem to be a source of a lot of discussion. Font Awesome had icons and they were using an <i> tag. I saw later on, I think it was you that had written a post. I had read that about putting in some screen reader text in there to describe that icon so that it would be read out. Using a <span> tag instead of the <i> tag. Do you still recommend doing that?
Rian:
Yeah, because the <i> tag has semantic meaning. It means text in a different voice. Span has no meaning, like div. Div and span have no semantic meaning. You can use them for that. I think you should always have the text visible, to the icon, because a lot of people just don’t know, for example, what the hamburger menu means. We are all very clever. We’re designing for the web. The people who are using it, they are not. They have to guess a lot. “What’s this icon for?” The hamburger menu, I think, is the most misunderstood menu of the web. A lot of people just don’t know that that’s a menu, so add just a text menu to it, and then your site will become much more usable.
Jackie:
I think the hamburger menu on mobile seems to be more understood, because some of the mobile devices themselves use it to represent menus. I agree. I’ve been putting the word “menu” and the hamburger menu next to each other so you can actually see the word there as well, instead of just … I know a lot of clients like to have decorative icons for actually links that go to pages, or things like that. Sometimes those designs may not call for having some text underneath of it. In that case, you’re left with an alt, if it’s an image. Say you’re using a PNG or an SVG for your icon. If it’s an image, you put an ALT tag in there to describe what that is. That’s one way. If you’re using a FontAwesome icon then you would recommend using a span tag and then doing screen reader text for that?
Rian:
Yeah, the screen reader text is text that is hidden from sight but read out by screen reader.
Jackie:
If you hover on it, and you want a title to show up on the hover, like a tool tip, so that a sighted person can understand what that icon’s representing, how would you put that in?
Rian:
There are attributes you can add to an element called ARIA. You have got one ARIA attribute that’s called ARIA label. In ARIA label you can say what a link of an icon is about. You can style that. You can style the attribute so when you hover over an element than it shows up. There are various ways to do that.
Jackie:
I like that idea. That sounds very good. Just hover over it and it would automatically show up.
Rian:
It’s a pity the screen readers make such a mess of the title attribute, because it’s such an elegant way. There’s already there, but screen readers don’t do that well.
Jackie:
No, and it seems like everybody’s removing the title tags for most of the links now anyway, because it’s repeating the same information again out in the screen reader.
Rian:
It gets read twice. It’s really a lot of noise.
Jackie:
Talking about the icons again, do you have any opinion on whether or not using CSS transitions and transforms can help with accessibility for … Say you’re hovering over an icon and you don’t want to change the color, or just changing the color alone may not be visually enough for somebody to visually detect that they’re hovering over it, that maybe doing an enlarge of an icon, or turning it a little bit, or doing some animation with it, can that aid in it, or would that be something you wouldn’t recommend?
Rian:
Why not? I think if it looks pretty, why not? There’s one thing. If you change it on hover, it also changes the focus. If you change something when you go over it with the mouse, it’s very easy if you copy the style also to focus because people who use keyboard have to have the change too.
Jackie:
Typically when you do a focus, you might get a little box around your icon then, some dotted lines that show up around your icon.
Rian:
Yeah, which you can add any style you want to it, of course.
Jackie:
You could do the animation on that as well. When you’re keyboarding over those icons, you could actually have them enlarge a little bit, and turn a little bit, just like you would hovering over it with a mouse.
Rian:
I think so. When you have a link, for example, it must stand out as a link just so that people aren’t guessing, “Okay, is it a link? If I hover over it … Okay, that’s a link.” It must stand out in the text as a link. Any transitions or styles, if you make them pretty, why not?
Jackie:
Thank you for that advice. I’ll definitely be taking advantage of that. We’re just coming up almost to the end of our time, but I wanted to just get in one more topic real quick, was forms. That seems to be a big source of issues for a lot of people. There’s many form builders out there, there’s many form plugins. You’re not sure if they’re accessible. Do you have any favorites that you’re using now, or some tips for us to make sure we are building accessible forms?
Rian:
The most accessible at the moment that I know is Contact Form 7. The author is working very hard to make it as accessible as possible. There is a plugin from Joe Dolsen, who makes the initial form. If you start a form in Contact Form 7, it’s without labels. It’s only input fields. With the plugin, it gives a good example on how you start accessible. I would recommend that. I also wrote a blog post about it, how to make contact forms accessible. The author is really working very hard on that. He’s really a very nice guy. I know they are doing work on Gravity Forms to improve the accessibility. There’s also a plugin who improves Gravity Forms. I didn’t investigate ho very well that is, but there’s work being done, I think. I also recommend Contact Form 7. I have it on the Dutch Eye Association, and that gets checked every year for access for rank at AA, and it passes every year with the forms in it. I think that’s good.
Jackie:
Contact Form 7 is it. Most of the popular ones that we all hear about in our community, seems like there’s more challenges with those for accessibility. I know there are some that even only work with JavaScript. If you have JavaScript disabled, nothing shows up on the page at all. I’m doing some investigating before I want to say any specific product names, but I’m doing some testing on those just to see if there’s any fall backs for that.
Rian:
I think it’s more a problem for people who are using Opera Mini, and a large part of the third world is using Opera Mini. If there’s a fall back for that, I don’t know.
Jackie:
That would be something to check your forms out on that to see if they’re working properly.
Rian:
Yeah.
Jackie:
Well, Rian, it has been incredible talking to you. I hope everybody has learned a little bit more about accessibility and adding it into their daily workflow. If they want to follow-up with you and chat more or learn more about what you’re doing, how can they reach you?
Rian:
On Twitter. (Laugh) You spell it.
Jackie:
I’ll put it in the show notes. Thank you very much. I really appreciate you being here today, and look forward to talking to you again.
Rian:
Thank you.
Jackie:
I hope everybody else has a great week. Thanks, Rian.
Rian:
Bye-bye, thank you.
Oct 19, 2016 • 38min
Episode 6: The Heart of a Teacher
In this episode, I’m chatting with Joe Casabona of WP in One Month and How I Built It. We’re chatting about front end development, having empathy and stepping into the WP education space.
Joe shares a wealth of knowledge on how he’s helping others learn WordPress and why he started his new podcast, How I Built It. There is one common thread in everything Joe does, and it is helping others. He truly has the heart of a teacher.
Meet Joe Casabona
Joe Casabona is a Front End Developer that works in WordPress…a lot. In 2014, he authored a book called Responsive Design with WordPress and 2 other books on web development.
He also develops courses on WP in One Month and hosts the How I Built It podcast.
Show Notes
Personal Site
WP in One Month
How I Built It
Pigments for Atom
LearnDash
Better Click to Tweet
Revive Old Post
Duplicate Post
Unsplash WP
This Episode is sponsored by LearnDash – WordPress LMS… Made EASY!
Check out LearnDash. Easily transform your WordPress site into a powerful learning management system using LearnDash.
Sell e-learning courses, track user progress, deliver certificates, and much more! LearnDash is trusted by major universities, million dollar marketers, training organizations, and bloggers worldwide.
Discover more at LearnDash.com
Oct 5, 2016 • 45min
Episode 5: The Voice of WordPress with Shawn Hesketh
In this episode, I’m chatting with Shawn Hesketh of WP101 on how his growing business is helping designers and developers provide highly effective WordPress training for clients.
Shawn is the Voice of WordPress for so many of us. His company, WP101 produces high quality, professional videos and offers them through the WP101 plugin and at WP101.com.
Shawn shares his wealth of knowledge on producing WordPress training courses and even shares helpful tips on how to create your own screencasts.
Meet Shawn Hesketh
Kay and Shawn Kesketh
My name is Shawn Hesketh, and for 26 years, I enjoyed a rewarding career as a freelance designer.
Over the years, I built countless WordPress sites for my clients. To get my clients up to speed as quickly as possible, I also provided one-on-one WordPress training.
But one-on-one training just isn’t feasible for everyone. So in 2008, I created a WordPress 101 video “crash course” to help beginners learn how to use WordPress in as little time as possible.
Show Notes
Advice for recording screencasts:
Microphones: Blue Yeti and Rode Podcaster.Screencast Tools: Screenflow and CamtasiaAudio Enhancements: Garageband and Audacity
Learning Management System
Shawn talks about why he chose LifterLMS for their membership course platform.
Shawn’s blog: ShawnHesketh.com
This episode may also be found on the Rethink.fm Youtube channel
Sep 21, 2016 • 48min
Episode 4: The Evolution of a Web Designer
In this episode, I’m chatting with Chris Ford who is leveraging her talents as a successful web designer to empower others. We discuss how her 20 years of web design experience is creating new opportunities in her career evolution.
Meet Chris Ford
There’s one common thread in Chris Ford’s 20 year web design career: learning new web design tools, techniques and processes, then teaching them to others.
She passionately believes that education is one of the most overlooked and underused ways to improve the user experience of a website or product.
Chris is currently in the process of rebooting Creativity Included, her design and branding company, to focus on education for both designers and product businesses.
Show Notes
Chris mentioned Webflow during the podcast as the tool she uses for wire-framing and mockups.
This episode is available on Youtube: Rethinkfm Episode 4.


