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. |