This course has been updated! We now recommend you take the CSS Grids and Flexbox for Responsive Web Design course.
Transcript from the "Client Interaction" Lesson
>> Ben Callahan: Let's talk a little bit about client interaction throughout this process, okay? Big companies with no mobile presence seeing triple digit mobile grow can create some pretty anxious people. And then you start to demonstrate that we've been able to do some of this stuff in less than half of the time, less than half the cost and we're seeing significant increases in conversions because we've built a better experience for smaller screens.
[00:00:38] That creates desperate clients, [LAUGH] and so I've felt like I've had to kind of develop this set of kind of questions that I kind of force our organization to consider before we take a retrofitting project on. And I would encourage you guys to come up with whatever set you think it's appropriate for you.
[00:00:59] But whatever you do don't just always say yes to this work and make sure that you have experimented with it before you commit, okay. Solid UX at higher widths, so if you're working with a client where they've really put some good amount of effort into building a solid experience at higher resolutions.
[00:01:18] You're gonna have a much easier time making that experience work on smaller screens. If they've got a lousy experience at high resolution, there's nothing you can do to make that thing work well at small. I mean you're gonna have a hard time with that, okay? So that's a real red flag.
[00:01:35] Do they have reasonable markup? Like Twitter was so easy to mess with because the markup is very clean. And this isn't always a sign that you should say no it's just a caution you know you need to take a look at that market before you commit. If you have somebody who's got their entire layout built in tables and they want to retrofitted that's going to be a real significant challenge you need to do some real experimentation before you sign a contract to do that work.
[00:01:59] Is it a scenario where they can't start over. You know. Or is there an immediate need. I mean in a lot of cases clients are coming to us. They're reacting to something in the market. You know in the case of that table. They had literally their competitor had just released a mobile specific version of the exact same process and they were like scared, you know.
[00:02:24] And so I said, well, okay. And we took that job, I had a two week turnaround, we finished it in a week, you know. And charged them probably a tenth of what it would have cost to rebuild that, you know. And it's a step in the right direction.
[00:02:38] It's just a temporary solution for them. Real benefit for the user, this is the one I kind of, this is like the purist in me. I mean, the only reason to do this in real, the real reason to do this is to try and create a better experience.
[00:02:51] I mean that's why we're doing all of this stuff so make sure that you're kinda focusing them back to the user. And I'm always saying this kind of thing. Retrofitting is a step in the right direction. This is a step we need to talk about the next step before we finish this one.
[00:03:08] You know so they understand kind of where we're going. And for your benefit. You're going to want to make sure you're capturing analytics this is what's going to give you the data. To kinda force them to act on the next step, even though you may have it planned out.
[00:03:22] If you can start to track what you can do with just a little bit of CSS. It's easy to sell them. Hey, if you let us redo this from the ground up, you're gonna to have a much better experience, you know, you think those conversions are good? Just, you know, just watch what we can do.
[00:03:37] Constantly remind them of the user. And when you're done and they ask for more, because I guarantee you that they will, push for even better experiences. So, a real quick little demo of some fun with retrofitting. I was just goofing around online one day and realized that. If I wrote a little bookmarklet that would sort of inject some CSS onto the page and then I kind of made that CSS dependent on the URL and looked in a get hub repository we could actually kind of build new styles for existing sites without them really knowing [LAUGH].
[00:04:20] So I started playing around with that one day and I got some stuff happening. So I asked somebody out there. One of my buddies on I just kind of put a call out I said hey is anybody have fun some time for a fun geek project this weekend.
[00:04:34] My buddy Philip Zastro wrote back to me that he works at Notre Dame he's in their web group. And he said he would tackle Apple's site for me. So this is how Apple site works here. And I created this retrofitting bookmarklet. And since he's done this they've done something with the background color that creates this blue.
[00:04:57] But you can see, he said he spent eight hours, I think, or six hours on this. And I mean it's not perfect, right, but he didn't touch the markup. And literally, this is just injecting a single style sheet onto their page. Pretty cool, right? So he focused on the navigation and it actually works kind of throughout the site.
[00:05:20] Another example, who reads John Gruber Daring Fireball? Yeah. Cool site. Some good content, but you know this is kind of what we get here. One of the one of my guys in the office, Andy built a style sheet for this. So he's actually, you'll notice he's increased the font size, right.
[00:05:41] Like we were saying before, smaller displays doesn't necessarily mean smaller type and I mean this is like dead simple. There's like a dozen lines of code total to do all this. All the work is in the css which is in the the GH pages branch of a repository in GitHub.
[00:05:58] [LAUGH] And all it does is look at the domain name and inject a style sheet based on the domain name, really simple. So this just kind of goes to show that there's a whole lot that you can do, you know? If you're interested in creating some style sheets for some sites, let me know and I'll get you hooked up with the repository and we'll build some better experiences.