Preview: Mobile friendly doesn’t mean mobile first, and a mobile-first design is what it says, from the standpoint of our audiences experiencing the site mostly on mobile, what is it we need to do for them, from that context.
[Music]
Lea Alcantara: From Bright Umbrella, this is CTRL+CLICK CAST! We inspect the web for you! Today Emily and I are going to talk about retrofitting desktop-only websites to be mobile friendly. I’m your host, Lea Alcantara, and I’m joined by my fab co-host:
Emily Lewis: Emily Lewis!
Lea Alcantara: This episode is brought to you by our friends at Craft CMS who would like to tell you about the brand new Craft 3 Beta. Craft 3 has been rewritten from the ground up to be faster and easier to build sites with. It has exciting new features like Multi-Site support and a beautiful new image editor that you can use to crop, rotate and set focal points on your images right within Craft’s Control Panel. To find out more and download the beta, go to craftcms.com/3. Again, that’s craftcms.com/3.
And we want to remind our listeners that we will be in Chicago for HOW Design Live this May. We’re giving a designer-friendly presentation on choosing the right content management system for projects. We discuss how the right CMS can save time and money as well as how to evaluate a CMS, and of course, alternatives to WordPress. Visit howdesignlive.com to register today.
[Music ends]
Emily Lewis: Well, everyone in our field understands the importance of having a mobile-friendly site. Not all clients do. And even if a business or a nonprofit does understand the value of mobile, that doesn’t mean there’s time or budget for a mobile rebuild or redesign, and I think that’s probably why there are still so still so many desktop sites out there.
Lea Alcantara: [Agrees]
Emily Lewis: In fact, ctrlclickcast.com is one of those sites that’s still desktop-only. [Laughs]
Lea Alcantara: [Laughs]
Emily Lewis: We simply haven’t had the time or budget for a mobile update, and to be honest, we didn’t have a pressing business need. Our podcast is on iTunes and Stitcher and RSS. The website isn’t our only channel, and so we put it on the back-burner because we could.
Lea Alcantara: Right. So I mean, the reasoning is really no different than that of a business owner or a client who hasn’t yet made the move towards mobile. But that doesn’t mean the reasoning is smart.
Emily Lewis: [Laughs]
Lea Alcantara: At least for the long term.
Emily Lewis: Right. I forgot the report. We will dig it up for our show notes, but mobile outpaced desktop last year like officially. Mobile, definitely, traffic is far more than desktop now.
Lea Alcantara: Right, right. And I mean, that’s kind of backed up this Pew report that we found where it says that there’s 19% of Americans actually depend on their smartphone as their only point, their primary point for online access.
Emily Lewis: Oh.
Lea Alcantara: Now, 19%, maybe that number sounds low or not okay, “Oh, 19%,” but when you actually use that percentage against the total population of America that’s 57 million people.
Emily Lewis: Wow.
Lea Alcantara: And 57 million people use their phone primarily to use the internet.
Emily Lewis: Not just the people who are using smartphones for their primary point of online access, but people are having expectations for mobile, their mobile experience.
Lea Alcantara: Yeah, right.
Emily Lewis: It needs to feel easy to use and easy to read, whether they’re on a small… I mean, I was at my sister’s house in Maryland, and she’s got like the tiny iPhone, it’s small.
Lea Alcantara: [Laughs]
Emily Lewis: Like my Android doubles the size.
Lea Alcantara: Right.
Emily Lewis: But it needs to be comfortable to her to use on her small phone as well as on a tablet and on the desktop site, and in fact, we dug around for more current statistics, and it looks like the most recent kind of full scale report was done in 2014, and so I can only imagine that these numbers have increased, but 61% of site visitors will leave a site if it has a poor mobile experience.
Lea Alcantara: Yeah.
Emily Lewis: And like I said, I can only imagine that that’s higher today now that users have higher expectations.
Lea Alcantara: Yeah, absolutely, and the more people access the internet or your website through their phones, the more that becomes urgent for everyone involved.
Emily Lewis: And of course, mobile, I mentioned, it has to work good on the phone, it has to look good on the phone, and it also has to be fast.
Lea Alcantara: Yes.
Emily Lewis: Speed and performance is a huge component of mobile friendliness. Google released a report at the end of last year 2016 and if your page takes longer than three seconds, three seconds, 53% of visitors will leave.
Lea Alcantara: Wow, that’s more than half of all visits.
Emily Lewis: [Agrees]
Lea Alcantara: And when you stop and think about it, that’s me. I’m one of those 53%.
Emily Lewis: Yeah. Oh, I’m the same way. I get so frustrated.
Lea Alcantara: Yeah, absolutely, and this was even more obvious when I traveled recently.
Emily Lewis: [Agrees]
Lea Alcantara: And so I used the free airplane Wi-Fi.
Emily Lewis: [Agrees]
Lea Alcantara: And oh my God, it was so painful just to visit a regular text-based site like Twitter, for example.
Emily Lewis: [Agrees]
Lea Alcantara: Like it was still so painful to load, to the point where, “Okay, I’m just actually not going to access the web, period. I’m just going to listen to music now.” You know?
Emily Lewis: [Agrees]
Lea Alcantara: Because it was actually that frustrating and I didn’t want to wait more than three seconds for something to load, even if it was just text or just for pure pleasure.
Emily Lewis: And three seconds sound short, but it doesn’t feel short. [Laughs]
Lea Alcantara: Yeah, yeah.
Emily Lewis: And Google is really behind mobile. They have been for a number of years, and they only continue to double down in their support of creating a web that is easy to use for everyone, including those people on a mobile device.
Lea Alcantara: Right.
Emily Lewis: And in support of this, this overall world view, they’re continuing to update their algorithm so that mobile friendliness is a bigger signal in your search engine ranking than previous.
Lea Alcantara: [Agrees]
Emily Lewis: And in fact, I believe there’s one expected, a new rollout to the algorithm this March, I believe. The last one was last April. And so you’re avoiding Google penalties by making sure that your site works great on a mobile phone and potentially improving your SEO ranking.
Lea Alcantara: Yeah, absolutely. So the benefits just I feel like speak for themselves.
Emily Lewis: [Agrees]
Lea Alcantara: You want people to visit your site, stay on your site, and interact with your site. Whether that’s a purchase or contacting you, you need to make sure that your site is mobile friendly.
Emily Lewis: Or even, you know. We talked a lot about interaction because that’s what the web is best known for.
Lea Alcantara: Right.
Emily Lewis: But even just getting the information. If someone has reached your site and you are top listed on Google for a particular area of information and it takes me six seconds to get to that info, I’m not even trying to do anything except read and you’ve made it hard, I am going to leave.
Lea Alcantara: Right, yeah.
Emily Lewis: It’s not just about executing something, people are also seeking information, and if you have issues with that and people can’t even read on your site, that’s a problem.
Lea Alcantara: Yeah, absolutely, and as we mentioned earlier, like at the beginning of the show, there are understandable reasons to delay mobile.
Emily Lewis: [Agrees]
Lea Alcantara: But as we mentioned, the cons are kind of starting to outweigh the pros if you just remain desktop-only.
Emily Lewis: [Agrees]
Lea Alcantara: But also based on the understandable reasons, there are budgets involved here, right?
Emily Lewis: [Agrees]
Lea Alcantara: So clients often ask us or wonder like, “Well, how do you balance a limited budget and limited resources with the very real business need to have a mobile-friendly site?”
Emily Lewis: Well, what we’ve been doing is retrofits.
Lea Alcantara: [Agrees]
Emily Lewis: That’s what we’re calling them, and I think just a search on the web, you’ll see a lot of different articles talking about retrofits. We offer a couple of different types of what we call “retrofits.” But the most fundamental, I think, definition of a retrofit comes from our friend, Ben Callahan, who did a piece for me when I was at Web Standard Sherpa a few years ago, and I think he really describes retrofits well, and it’s about using responsive techniques, so responsive web design techniques on legacy websites to create a better mobile experience. They’re like small steps towards a more universal experience.
Lea Alcantara: [Agrees]
Emily Lewis: And I like that because it sort of is global enough to apply to even all the different types of retrofits we have. Some of that have more involvement than others. But I think to get even more specific, it’s typically just CSS. You may modify the HTML, but usually not, and you’re rewriting the CSS, but overwriting CSS. So the most basic retrofit is going to be just brand new CSS that overwrites what was on the existing legacy site.
Lea Alcantara: Right. But you bring up the minor modifications to HTML and typically CSS, and that makes everything sound hunky-dory, “Oh, it’s so straightforward.”
Emily Lewis: Correct.
Lea Alcantara: But it’s not always. [Laughs]
Emily Lewis: [Laughs]
Lea Alcantara: It’s not always that straightforward, and the point I want to make is that responsive retrofits aren’t really for every site.
Emily Lewis: Yeah, and/or every client.
Lea Alcantara: Right.
Emily Lewis: Because ultimately, if the client has a limited budget, but a really huge business need, then they really need to rethink their budget. [Laughs]
Timestamp: 00:10:03
Lea Alcantara: Right.
Emily Lewis: Because if the majority of their audience is on mobile and they just want to fix a few little things with CSS, that doesn’t actually seem to make business sense. We would push back on that. We wouldn’t take that project just to take it.
Lea Alcantara: Right.
Emily Lewis: We would want to have a long-term discussion with them about their goals because the reality is if you have a big mobile audience and you don’t have a site that meets their needs, a few CSS fixes aren’t going to cut the mustard really.
Lea Alcantara: No.
Emily Lewis: Mobile friendly doesn’t mean mobile first, and a mobile-first design is really from what it says, from the standpoint of our audiences experiencing the site mostly on mobile, what is it we need to do for them, from that context.
Lea Alcantara: Right.
Emily Lewis: So if you take a retrofit approach to a legacy site, the truth is that that legacy desktop site was not designed with mobile in mind and so there may be long form content that you simply cannot scale well in mobile.
Lea Alcantara: [Agrees]
Emily Lewis: It becomes hard to read or cumbersome. Things like images, if you have like fixed-width CSS background images for presentation purpose, that’s going to be a problem if you have a lot of fixed-width tables on your site. We worked with a utility company and they had a lot of tables that showed different pricing and different price points, and that’s not something that is a quick fix for CSS.
Lea Alcantara: [Agrees]
Emily Lewis: In fact, you often have to put in like a JavaScript, like a Shiv or something like that to get that to work.
Lea Alcantara: Right, right. And I just wanted to also point out like design-wise when you’re thinking about tables, right, if you’re just looking as in, “Oh, I’ll retrofit this so I can shrink the table,” what if that original table was ten columns long?
Emily Lewis: Right.
Lea Alcantara: And okay, so technically you made it “mobile friendly” because you shrunk it, but then you can’t actually read the data.
Emily Lewis: And then, of course, as I mentioned before, adding CSS to overwrite CSS, that’s not going to improve performance.
Lea Alcantara: No. [Laughs]
Emily Lewis: I mean, in fact, you’re adding an asset so you may actually see a performance, not a big hit, but it’s not going to improve it.
Lea Alcantara: Right.
Emily Lewis: And so if your site is already slow, no matter what you do to make it easy for users to use it on their phone, if it’s slow, that’s still going to ding you.
Lea Alcantara: Right, absolutely. And like we’ve kind of mentioned at the beginning, so the basics of retrofits are tweaking the CSS mostly and minor modifications to HTML, but if we’re looking at a legacy site and the source markup, the actual HTML is really convoluted, and as we mentioned, tables is one of those issues, and if they’re using tables not for tabular data as well, that makes…
Emily Lewis: Yeah, presentation.
Lea Alcantara: Exactly, that makes things a lot more complicated so you need to take that into account. If that’s a bit of a mess, a mobile retrofit might not be the actual cost effective way to deal with it because it would be too time consuming to make it work.
Emily Lewis: [Agrees]
Lea Alcantara: The other thing, too, is CMS considerations, right?
Emily Lewis: [Agrees]
Lea Alcantara: Not all people’s legacy systems are on modern CMSs that output clean code.
Emily Lewis: [Agrees]
Lea Alcantara: So that means, again, the retrofit could be complicated by the CMS generating markup that isn’t necessary and we wouldn’t even understand or consider adding to the CSS to manipulate at all, so that’s something to definitely consider as well.
Emily Lewis: Yeah, and then of course, like I said, you’re overwriting CSS.
Lea Alcantara: [Agrees]
Emily Lewis: Well, what if they’ve got a bunch inline styles.
Lea Alcantara: Oh yeah.
Emily Lewis: And our listeners may hear that and they may say, “Oh no.” Yes, I’m telling you it’s still out there. [Laughs]
Lea Alcantara: Yeah, yeah.
Emily Lewis: You can’t overwrite that with a late style sheet, so if there’s a lot of that, again, you’re really going to have to rewrite that. You can’t overwrite it.
Lea Alcantara: Right.
Emily Lewis: And that then again adds time and scope to the effort, and then it starts being less of a budget-friendly option.
Lea Alcantara: Right. So far we’re kind of talking about the technical aspects of all this and the realities as a developer, but when you stop and think about it and you’re really trying to consider mobile retrofitting, the most important thing is considering the audience and the site content.
Emily Lewis: [Agrees]
Lea Alcantara: And whether the retrofit actually addresses the audience goals and whether the site content through that retrofit still fits those audience goals.
Emily Lewis: [Agrees]
Lea Alcantara: And if it doesn’t, for example, just simply shrinking something or increasing a font size still doesn’t actually prioritize the information that the audience is looking for, well, then the retrofit doesn’t actually help the goals of the site.
Emily Lewis: Yeah, it is a completely holistic consideration.
Lea Alcantara: Right.
Emily Lewis: Even though what we’re doing with the retrofit, the most basic retrofit is putting some CSS into the mix, the approach and whether we even can or should do it is holistic.
Lea Alcantara: Right, right.
Emily Lewis: It’s a discussion that has to happen either during discovery or before that, if you’re lucky during the sales process.
Lea Alcantara: Yeah, absolutely, and I mean, at the end of the day, a mobile retrofit or responsive retrofit is a temporary stopgap, right?
Emily Lewis: [Agrees]
Lea Alcantara: Because what we’re doing is kind of “fitting a round peg into a square hole” kind of situation.
Emily Lewis: Totally.
Lea Alcantara: Yeah, we can fit it in and it works for now, but it shouldn’t be used as a client’s mobile solution for long term.
Emily Lewis: [Agrees]
Lea Alcantara: It’s definitely good to address current issues as an emergency situation, because yes, the reality is more and more people are using their phones or their tablets to visit the web. And if your site doesn’t address that, yes, you should deal with it ASAP.
Emily Lewis: [Agrees]
Lea Alcantara: And responsive retrofit is that ASAP solution, but to keep it that way is not a good long-term process.
Emily Lewis: So, let’s talk a little bit about what we at Bright Umbrella offer our clients, and these are not like sales packages or anything, they’re just sort of internal terms that Lea and I use to sort of describe the different levels how far we might take a retrofit approach. Whatever you might call it, I don’t think it really matters because even still, we don’t even use these terms when we’re talking to the client. Like we talked in our last episode, we talked about we’re going to make it easier for our texts to be read. We’re going to make sure that no one has to zoom in to view.
Lea Alcantara: Right.
Emily Lewis: We don’t use tech terms to describe it to clients when we talk about what we’re going to accomplish. So we’ve sort of broken out into like three types of mobile projects that we have offered clients, depending on where they are with their goals and budget and staff resources on their end.
Lea Alcantara: Right. So the one that we’re definitely talking about right now is the responsive retrofit where we review the current desktop-only design and make sure that it works for mobile devices.
Emily Lewis: [Agrees]
Lea Alcantara: So we look at the source code. We really try not to change any of that. Most of the time, HTML stays the same and all the work is in the CSS; however, sometimes there is some consideration between the content and the design as well because when you’re even discussing a mobile retrofit or mobile-friendly design with your client, you’re trying to discuss why we’re even doing it, like why this is important.
Emily Lewis: [Agrees]
Lea Alcantara: And impressing upon them that it’s not just about making things fit in a smaller scale, it’s discussing what should be shown on mobile and why people visit your site on mobile.
Emily Lewis: [Agrees]
Lea Alcantara: And we’ll talk a bit more about that later in the show when we talk about a case study of ours.
Emily Lewis: Yes, so those high-level things that’s discussed initially, so like Lea said, the content, what’s the priority needs to be, the source code, and I’ll just say, if you can’t see the original source code, not what you view source in the browser, not what you view in your Inspector, but the actual, especially on a CMS template, do not take the project, like you need to see that source code. The client needs to let you see that. [Laughs]
There has to be some point of reference. You need to know how they built their CSS, like if they’re using a compiler like Sass or something like that, who’s going to maintain it, and they’re sort of housekeeping questions you have to address. But once we’ve done those things, then we’re really just keeping the same look and feel. There are no design changes. We’re not changing text colors or things like that. We’ll make sure that the navigation scales from desktop to tablet to phone. We’ll make sure the layouts scale themselves as well. There’s no zooming in to view different parts of the page.
We’ll make sure that the tap targets like links are larger, easier to hit with your finger, that the font sizes work well for readability in the smaller views, and we typically don’t go into lots of different breakpoints, and I know breakpoints is really a misnomer, but I’m just going to use it for point of conveying the idea. I’m not optimizing for tablets and portrait view and horizontal view and all that other stuff, so I usually have our desktop view and then I take it down to a one column, and that one column is what hits typically below 900 pixels or something like that.
So usually, it’s just one breakpoint, and it’s relatively straightforward in terms of those are our main points that we’re hitting, and like Lea said, if we had a conversation with the client about what content should be shown on mobile, like if we have an opportunity to hide some content or move some content more prominently to the top, and when I say move, I’m not talking about changing the HTML and probably talking about using positioning, CSS positioning, to get something higher in the page view if possible. Again, this is all, if possible, if you’ve looked at their source code in these sorts of things are possible. So we may also move some content to like at the top of the page if it’s more important or not.
Timestamp: 00:20:23
Lea Alcantara: Right. And the second kind of mobile-friendly project would be a mobile-friendly revamp.
Emily Lewis: [Agrees]
Lea Alcantara: So it’s a lot like the retrofit, but this time we’re actually reconfiguring the content now with mobile-first in mind.
Emily Lewis: [Agrees]
Lea Alcantara: We’re now discussing what’s really needed, what isn’t. Now, we’re looking across a lot more breakpoints and testing multiple devices, and we do a lot more HTML cleanup.
Emily Lewis: [Agrees]
Lea Alcantara: So it’s just a little bit more involved, taking it just one step further from just a responsive retrofit.
Emily Lewis: I’d say it’s like two or three steps further.
Lea Alcantara: Sure.
Emily Lewis: I almost feel like it isn’t like one notch, but really two because there’s a lot more involved, but it really is, like I don’t think there’s like one notch above the retrofit, you know? [Laughs]
Lea Alcantara: Right, right. [Laughs]
Emily Lewis: You almost have to kind of go two levels up. And we’re going to talk about another case study, so we’re going to talk about a case study of the retrofit, the base, Base 1, and then we will all do a case study of this responsive revamp that you’re talking about.
Lea Alcantara: Right, right.
Emily Lewis: But we also do a couple of other options for clients for mobile too.
Lea Alcantara: And then there are some clients that have further mobile needs and they need more than just a retrofit or a revamp, but they still have a little bit more of a budget, but it’s not a giant redesign at this point, right?
Emily Lewis: [Agrees]
Lea Alcantara: So at that point, it’s less of a retrofit and it’s more of a limited redesign and we’re dealing with prioritizing their site in a bit of piecemeal approach.
Emily Lewis: [Agrees]
Lea Alcantara: So at this point we are dealing with new looks and feels, but the mobile layouts are only optimized for the limited audiences.
Emily Lewis: And by limited audiences, what we do is for every client, we are taking a look at their analytics, if available. And if we’re dealing with a budget-sensitive client, we did this with a law firm a couple of years ago, and mobile was important, but they didn’t have the audience to support it. They just knew it was something that they wanted to start thinking about, and so looking at their analytics on where audiences were, we didn’t need to focus so much on tablets as much as phones and desktops.
Lea Alcantara: Yeah.
Emily Lewis: And so we focused all of the redesign efforts on those two main viewports. That doesn’t mean it doesn’t look good in a tablet, it’s just not optimized for tablets. If you’re a front-end designer, you know what I’m talking about. Sometimes you’re like, “Oh, this would look great, but tablet isn’t just larger version of the phone, like we might be able to split it into two columns and something might work out well here.”
It’s sort of one of those breakpoints that you could just keep it the phone look or it could get a little more optimized for that tablet experience. But if tablets aren’t a large audience at that point, we didn’t spend the time. We didn’t do comps. We didn’t do wireframes, which saved some time and money on the budget, and the good thing is the client now has the budget for it, and so this year we’re focusing on filling in that middle space just a little bit.
Lea Alcantara: Right. And I think I want to emphasize the fact that we’re looking into the business case for this, right?
Emily Lewis: [Agrees]
Lea Alcantara: Because I know as web designers and developers, we always want the ideal situation of yes, of course, it would be ideal if we’re able to test every device and every screen and every breakpoint and then you have to think about your own time management at that point.
Emily Lewis: [Agrees]
Lea Alcantara: Because there is ideal and then there’s realistic.
Emily Lewis: [Agrees]
Lea Alcantara: And at some point, you have to make a business case as to why it make sense to put in all that time to do tablet work, and if it’s just the audience isn’t there yet, it just doesn’t make any business sense both as the agency doing the work as well as the client asking for the work.
Emily Lewis: And it still gives them what they’re looking for.
Lea Alcantara: Yes.
Emily Lewis: We went into this particular project with this in mind, and so we built it with the intention of coming back to it.
Lea Alcantara: Yeah, absolutely.
Emily Lewis: So it’s not going to be a retrofit when we come back to it to fix tablets, we will be working and we will go right into the original CSS, the HTML won’t need to be modified, you know?
Lea Alcantara: Yes.
Emily Lewis: It was built from the ground up with this in mind.
Lea Alcantara: Right.
Emily Lewis: And so the client still gets the return on their investment as well as knowledge of ongoing maintenance of the site for ongoing improvements, and so it’s actually a really nice approach if it fits with your client’s audience analytics.
Lea Alcantara: Yeah, absolutely. And we’re talking about a whole site here and limiting different views, but this piecemeal concept can also be applied inside a site.
Emily Lewis: Yeah. So we have another client who interesting situation, their website was redesigned four or five years ago.
Lea Alcantara: Yeah.
Emily Lewis: And it was designed with responsive. In fact, I think the developer used Bootstrap, so it was mobile, but it’s been a few years, and what was mobile a few years back is no longer best practices. Frankly, the mobile experience wasn’t optimized completely by that developer.
Lea Alcantara: Right.
Emily Lewis: And so we’ve inherited the site and every year they have a launch and so with each launch, we iteratively redesign a section.
Lea Alcantara: Right.
Emily Lewis: So for example, they have a job section where they list jobs that are available, and two years ago I think it was, Lea, we redesigned the job section.
Lea Alcantara: Yeah.
Emily Lewis: And that redesign was a bit of a look and feel. It was a bit of a content exercise, but it was also mobile-first.
Lea Alcantara: Yeah.
Emily Lewis: So everything we did for just those pages on the site, we did with a mobile-first design approach as well as a front-end development approach.
Lea Alcantara: Right.
Emily Lewis: And it’s just those pages, and then they also wanted some changes to their navigation, which it’s been so long I don’t even remember what the original navigation looked like and what the challenge was.
Lea Alcantara: Because they just had the text and then they just shrunk it.
Emily Lewis: Yeah, I think it just got small.
Lea Alcantara: Yeah, yeah. I just got small and then there were the second level of their hover, like when you click and hover the navigation, it was just all horizontal.
Emily Lewis: [Agrees]
Lea Alcantara: Again, because it was just shrinking because all they were doing was shrinking what was already on desktop.
Emily Lewis: Right. So we took that as a sort of piecemeal focus and just updated just the navigation, the primary navigation to be mobile first.
Lea Alcantara: Yeah.
Emily Lewis: And so these were ways for the client to put the money they had available in areas where they knew it would have the most impact. Like I was describing the job section, that was before a major recruiting push to find new employees.
Lea Alcantara: Right.
Emily Lewis: The navigation is something that obviously affects all users of the site, so it’s a way for them to keep the budget focused, but still keep the site moving in the direction they want it to be.
Lea Alcantara: Right, absolutely.
Emily Lewis: And then, of course, the last type of mobile project we offer is a full scale redesign, and that’s just everything.
Lea Alcantara: Yeah, exactly, that’s when a client is ready when they have all the resources, both financially and staff and content.
Emily Lewis: And content.
Lea Alcantara: Yes. [Laughs]
Emily Lewis: [Laughs]
Lea Alcantara: And it means they’re ready to make mobile their first priority, and then we’re actually now reviewing the purpose of the site, the audience and the content, and it’s going to be new look and feel, and it’s going to be a mobile-first kind of concept.
Emily Lewis: Right. And so that one we started with a retrofit, moving up into different levels of complexity. The retrofit is probably the most budget friendly. I say probably because what we just described with the piecemeal approach, that might actually in the long term, it isn’t, but for an individual element, it may be less expensive than retrofitting the entire site , but the full redesign is probably going to the most resource and cost-intensive project.
Lea Alcantara: Right. But there’s always an asterisk on that, and I think we’ll talk a little bit about that later in this episode in that maybe that actually would be more cost effective overall in the long run to just deal with the full redesign as opposed to adding up all the little retrofits or all the little piecemeals over the years when you add all that up. Well, if you just invested the total upfront, right, [laughs] then you might have a superior site right now. But it all really, it depends. [Laughs]
Emily Lewis: It always depends. I think one of the things that Lea and I have learned, and we really value long-term client relationships, we like working with the same people and knowing a site inside and out, these are the compromises of working with clients who have their own realities.
Lea Alcantara: Yeah, absolutely.
Emily Lewis: All right. So now that we sort of laid the foundation for how and why we approach mobile projects at these different ways, we wanted to talk about two of these options from a case study perspective. We’re going to talk about the basic retrofits as well as the sort of next level up or two steps forward, the responsive revamp. So we’ll start with the basic retrofit with our client, Strathcona High School.
Timestamp: 00:30:09
Lea Alcantara: Right. So Strathcona High School, they’ve been our client since 2009.
Emily Lewis: [Agrees]
Lea Alcantara: So they’ve been with us for a long time, and they were desktop-styling only for all those years that they’ve had a website until 2014. That’s when they pinged us to help make their site mobile friendly.
Emily Lewis: [Agrees]
Lea Alcantara: Now, the issue was, of course, with a lot of schools, budget, right?
Emily Lewis: [Agrees]
Lea Alcantara: And they also still really liked the look and feel that I designed for them back in the day because, apparently, it was the best design in the school district. [Laughs] And so they wanted to keep all of those elements around, but just make it more mobile friendly.
Emily Lewis: [Agrees]
Lea Alcantara: So all these discussions really start with the question, “Why are people accessing your site on the phone?” Right?
Emily Lewis: [Agrees]
Lea Alcantara: So we asked Strathcona that, first and foremost, and when they thought about it, they decided, “Well, when people are visiting strathconaschool.ca on their phone, they’re looking to visit the school.
Emily Lewis: [Agrees]
Lea Alcantara: That’s the point of why they’d even open up Safari, and why are they looking to visit the school? They’re looking for times and events and they’re looking for the address or they’re looking to call or contact the school, right?
Emily Lewis: [Agrees]
Lea Alcantara: So when we were reviewing all of this, we realized that this couldn’t just be a simple like, “Let’s just shrink everything and change the CSS, et cetera.” We reviewed the content and we decided, especially because after we reviewed the HTML, that it was possible that we could move something that was normally in the footer in desktop, which is the phone number and the address to the top on the mobile version of Strathcona’s website, right?
Emily Lewis: [Agrees]
Lea Alcantara: And the other thing is if the priority of parents looking to visit the school website is to visit the school, for times and events, we also took away the pretty slideshow that was on desktop because that could be distracting and then we went straight to the list of events and news.
Emily Lewis: [Agrees]
Lea Alcantara: So those are the types of considerations that we had, like when we go into a retrofit or any sort of mobile-friendly project, we first try to figure out like, “What is the point?”
Emily Lewis: [Agrees]
Lea Alcantara: Like, “Why would anyone visit your site on mobile? Will they visit your site on mobile?”
Emily Lewis: [Agrees]
Lea Alcantara: And then after we retrofitted this site, there was a 26% increase in visitors after the launch.
Emily Lewis: [Agrees]
Lea Alcantara: So I mean, clearly, it was one of those like “if you build it, they will come” situations, and it was good.
Emily Lewis: Well, I bet you they were there waiting. Do you know what I mean?
Lea Alcantara: Right.
Emily Lewis: It was probably more like that because we’ve still heard consistently from our contact at that client that parents and kids are still just love that the site is mobile friendly, love that it’s easy for them to use.
Lea Alcantara: Right.
Emily Lewis: It’s still as standout design amongst the other schools in the district.
Lea Alcantara: Yeah.
Emily Lewis: So yeah, I think it was the community and the audience that was just waiting for this to be there for them, and now that it is, they’re really happy about it. [Laughs]
Lea Alcantara: Right. And I spoke a little bit about our design and content situation, but a lot of retrofits, as we mentioned, is mostly CSS changes and HTML changes. So Emily, why don’t you tell our listeners how you approach Strathcona?
Emily Lewis: Yeah, and think this list is one that I would follow for any basic retrofit, and essentially, it kind of hits all the notes of Google’s mobile-friendly test. All the things that it tests for, these are the things that you can fix. So for me, with Strathcona and any basic retrofit, I’m going to start with the viewport meta tag. You need to set that for device and user scaling. Never take away the user’s ability to zoom. Back in the day, I did that, and it’s bad form, even if you don’t want them to zoom, why would you decide that for them? What if they need to? Even if you set your font sizes to work great and the layout scales, keep your user’s scaling.
You then need to establish how you’re going to do the CSS. So with the case of Strathcona, because it was an existing client, we have all their assets, we are the only people who touch the CSS, so we knew we weren’t going to have issues with overwriting someone else’s development, we were able to create our own CSS file independent from the original with media queries. We could have added it into the original, but at the time when I did this, I was sort of following the logic of just calling this style sheet for a given media query.
Lea Alcantara: [Agrees]
Emily Lewis: So rather than having media queries in the CSS selectors, it’s how it’s called. You could also, though. There’s no reason why couldn’t add new CSS with media queries to the bottom of existing CSS as long as there’s no concern about overwriting by someone else, and it also does depend on “if stuff” is compiled like if people have lots of Sass partials. Maybe you put the stuff in a partial and it gets compiled into the new one. So it really depends on your workflow. And the next thing that I focused on is adjusting the layout to fit the view port.
For me, like I said, and this is the case with Strathcona and pretty much any basic retrofit, I’m going to just take it all down to one column. That’s the easiest for me to do the most efficiently, and that’s making sure that there’s no fixed-width elements on the page that you hope to have to overwrite. You have to make sure that the HTML source order is going to allow you to do this and keep content in context.
Lea Alcantara: [Agrees]
Emily Lewis: So for example, if you have desktop, a 2-column layout and maybe your right side column is like a sidebar for a contact form, let’s just say in mobile, that contact form is really important. Most everyone fills out the contact form from the mobile phone. Well, then we want that to be at the top of the page when the person views it, but what if in the source order, it’s actually below all the rest of the HTML. So if you can use positioning effectively, then you can potentially still do that. But if you’ve got some complicated table-based layout, this may not actually be possible, so these are the things why you have to look at your source order carefully.
Sponsored by
So overwriting fixed-width content, also what Lea was describing earlier with Strathcona where we can adjust the content to work better for the mobile audience typically using positioning, doing that, and so that’s after I get the layout working then I’ll go back and see if I could move content to meet mobile priorities, there’s also the issue of if this is a site design for desktop-first, desktop-only, then you may have large chunks of content that take up a tremendous amount of vertical space on a phone or a tablet. So I mentioned Ben Callahan’s article at the start of this episode, but in that same article, he talks about vertical conservation and so using things like collapsing or show/hiding to compress information so that the user can choose to expand it if they want to have more so you have less stuff taking up the vertical space.
Lea Alcantara: [Agrees]
Emily Lewis: I don’t typically do this, but it is an option and I think it’s an important one. With Strathcona, they just didn’t have those situations of just huge chunks of content that’s just forever and ever and ever and there was no break.
Lea Alcantara: Right.
Emily Lewis: If you’d go this way, if you’re doing show/hide, you may end up having to introduce JavaScript into the scope, and so that’s a “Do you want to? Is that in the budget? Is there time?” And that also adds another request to the page, so these are all considerations. The next phase, once I’ve got the layout and the content as I want, I’m going to just focus on links and tap areas. I’m just going to make sure that the touch targets are sufficient for fingers. That also it’s not just the size of the target, but the size between side-by-side targets.
Lea Alcantara: Right.
Emily Lewis: So like in navigation in the footer, people often have like links all next to each other with maybe five pixels between. Is that five pixels enough in a mobile device? Should there be more space between them so you don’t accidentally click the link next to the one you wanted to click. And then the last two things are really about readability, good font sizes. Just because you’ve gone small doesn’t mean your font size goes small.
Lea Alcantara: Right.
Emily Lewis: So, on a mobile device, you actually might want a larger font size than you have on desktop. You’re going to have to experiment with that. I’ll put a link. I think I’ve got a link for some good rules of thumb on font size scaling. I’ll include it in the show notes. And then also good color contrast, mobile devices maybe you use indoors, outdoors, all different situations and so you want to make sure your color contrasts are good. That one I do definitely have a link from Lea Verou and we will include that in the show notes on good color contrast rules to follow. And that’s pretty much it; those are sort of my main points. If you’re a front-end developer like me, you have to really work to hold yourself back.
Lea Alcantara: [Agrees]
Emily Lewis: Don’t go too far. If you’re like, “Oh, I could just fix that,” well, that little five minutes you went to fix that, if you multiply that by ten, then you’ve now used an hour from the budget. So you really have to hold yourself back, even if you’re seeing things that you did five years ago that you’d like to make better, that’s not what this project is for. And then the last part about all of this once the front end is done is test. We test across browsers and devices. Even if like in the situation like we described with the law firm where we didn’t focus so much on the tablet view, I still test it in tablets. I wanted to make sure nothing as wrong that would…
Timestamp: 00:40:25
Lea Alcantara: Yeah, broken, yeah.
Emily Lewis: Exactly, that wouldn’t have fulfilled the goal of the project, but you’ve just kind of limit it or scale it accordingly. We will also run it through Google’s mobile friendly test. That’s a really useful tool also for the client. Like if you run their site through the test at the beginning and you show them all the errors and then you run it through at the end after you’ve made your changes and you can actually show them a comparison point.
We also run through PageSpeed insights. This is another Google tool that really checks the performance and speed of your page. Like I said earlier, retrofit is not going to improve performance. I just don’t see how it could really, but this is a good talking point for having a conversation with your client about what Lea mentioned, that retrofit is a stopgap, it is temporary.
Lea Alcantara: Right.
Emily Lewis: So we want to make sure our clients understand that we are doing this now and this will suit their needs in the short term, but that there’s still remain very real issues that they need to address, and performance is an easy one to demonstrate.
Lea Alcantara: Yeah.
Emily Lewis: So that’s a good reason to run that test as well.
Lea Alcantara: Yeah. And it also kind of shows you the difference between desktop and mobile as well because PageSpeed Insights gives you numbers based on, “This is what’s happening while it’s desktop. Okay, everything is great there, but what’s happening in mobile?” Right?
Emily Lewis: [Agrees]
Lea Alcantara: Like, “Here is why it’s different, and here is why we need to focus on these particular issues when we’re trying to make something mobile friendly.” So that’s like another talking point when you’re dealing with a client. Or if you’re dealing with a client who they want to just go that one step up of mobile revamp instead of just the very barebones retrofit, the PageSpeed Insights will give you some information about images, for example.
Emily Lewis: [Agrees]
Lea Alcantara: And those things could be addressed if you’re going a little bit more beyond than just the very basic retrofit and still be within a reasonable budget.
Emily Lewis: Yeah. And I think it’s just a good business lesson that you and I have learned in the past 18 months or two years that it’s not just about the client trusting us, but we need to give our clients, specifically our client, context. They aren’t usually the topmost person at the firm or the company. They have to take what we’ve given them and get approval and get approval internally.
Lea Alcantara: Right.
Emily Lewis: And if we can, not only tell them, “Oh, we’re going to make the site look great on a phone,” but give them actual like statistics from some report and say, “Well, we can resolve these ten things with this project.”
Lea Alcantara: Right.
Emily Lewis: That’s a real thing that they can take to their boss and then we can use as proof after the project has been done so that they feel even more that they got what they paid for. So it’s more than just delivering the site improvements, it’s how you talk to them about it.
Lea Alcantara: Yeah, absolutely. Like the before and after thing is really powerful in helping build trust with the client.
Emily Lewis: [Agrees]
Lea Alcantara: It’s one of those things where it’s information we know ourselves as professionals, but again, we have to remember that our clients don’t have our knowledge. So when we understand that clickable element shouldn’t be close together, they don’t get that, but if there’s a page from Google’s mobile-friendly test that gives you a red X [laughs] that tell them clickable element should be close together, that just gives extra proof that you know what you’re doing, right?
Emily Lewis: Yeah. And it’s integral to the sales process.
Lea Alcantara: Absolutely.
Emily Lewis: Do you want to know the quickest way to try and start a conversation with someone about updating their site? It’s show them the errors that their site gets.
Lea Alcantara: [Laughs]
Emily Lewis: [Laughs]
Lea Alcantara: Sure.
Emily Lewis: As you know, we’re using that in one of our newsletters, communicating that this test is out there and our client can see and then let us know if we can help you if something is wrong.
Lea Alcantara: Yeah, absolutely.
Emily Lewis: It’s very important to remember that you have to put it in terms that the client is going to understand.
Lea Alcantara: Absolutely, absolutely.
Emily Lewis: Or measure, and/or measure.
Lea Alcantara: Yeah, yeah, absolutely. Now, the other case study we want to talk about is this current site, CTRL+CLICK.
Emily Lewis: I really am a little embarrassed about it.
Lea Alcantara: [Laughs]
Emily Lewis: [Laughs]
Lea Alcantara: And which we kind of mentioned at the beginning of the show, we’ve been talking about updating the site for mobile for over a year, Emily and I.
Emily Lewis: Yeah.
Lea Alcantara: This year, this is the year.
Emily Lewis: Yeah.
Lea Alcantara: We’re committed to getting it done by Quarter 3. Now, this kind of leads me to audience question. Ben Furfie asked, “Is there a point at which it’s just easier to start again rather than trying to retrofit a non-responsive site?”
Emily Lewis: [Agrees]
Lea Alcantara: So yes.
Emily Lewis: [Laughs]
Lea Alcantara: And that’s where we’re at with CTRL+CLICK. At some point, for example, when we first built this site, Emily and I have been podcasting for about six years.
Emily Lewis: [Agrees]
Lea Alcantara: This June, we’ll be six years, so that means our site is about that old.
Emily Lewis: Yeah.
Lea Alcantara: We did go through a little bit of a rebrand because when we first started podcasting six years ago, it was as EE Podcast, then we kind of did a bit of a revamp as CTRL+CLICK CAST, but we didn’t do a full rewrite of our site at that point.
Emily Lewis: [Agrees]
Lea Alcantara: So the HTML and CSS more or less is six years old.
Emily Lewis: Yeah.
Lea Alcantara: And what that means [laughs] is that they’re six years’ worth of new technology, new techniques and issues that we’ve ignored for six years.
Emily Lewis: [Agrees]
Lea Alcantara: And if we want to be future-friendly, mobile-friendly, and give the best sort of experience to our site visitors, especially since those visitors are our peers on the web, it makes a lot more sense for us to start from scratch.
Emily Lewis: Yeah. It’s the simple reality. Well, I can’t speak to where you feel your design has grown.
Lea Alcantara: Right.
Emily Lewis: I mean, I feel your design has grown, but you can speak to that, but my front end is so different.
Lea Alcantara: Right.
Emily Lewis: Like to try and retrofit how I used to write with our new approach, which uses sort of our own internal framework in terms of naming conventions and HTML patterns and things like that, it would be the one project, because it’s ours, where I wouldn’t be able to hold myself back.
Lea Alcantara: Right.
Emily Lewis: We also have the business reason as much as we want people to listen to the podcast as their main reason for visiting the site, but I want us to demonstrate that not only are we talking about the best in the web, we can demonstrate the best in the web.
Lea Alcantara: Right.
Emily Lewis: So that if you are looking at our site, it’s an example of the best we can do, and retrofitting just doesn’t fall into that for me.
Lea Alcantara: No, no. And at this point, since we delayed it so much as well, it just makes sense to, in terms of our own time management, spend that time towards something new and we feel that that’s going to give us the most bang for our buck, and usually, if we’re going to be approaching this with a client ourselves, it really is deciding whether this is the time that this upfront initial, more expensive investment, both in time and money is worth it for a long-term prospect.
Emily Lewis: [Agrees]
Lea Alcantara: Because again, as we mentioned, yes, it’s a lot more cost effective to just do retrofit, but it’s a stopgap, and if we’re continually doing piecemeal items, when you add up all the costs over the years, it might actually be a lot larger than a full-blown redesign.
Emily Lewis: And you and I, we can’t give that kind of ongoing focus to the site. That’s also our reality.
Lea Alcantara: Right.
Emily Lewis: So we do need it to be updated in a much bigger versus piecemeal way.
Lea Alcantara: Yes, yeah.
Emily Lewis: Because we can’t continue to spend time every year on it.
Lea Alcantara: Yeah, absolutely, and also the bottom line, just like with our clients, we check our mobile activity on the site.
Emily Lewis: [Agrees]
Lea Alcantara: So I look at Google Analytics and I’m comparing this past year from February 2016 to February 2017 to one of the first years of the podcast, which is like 2012 to 2013, there was a 94%, 94% increase in mobile activity.
Emily Lewis: Wow. Wow!
Lea Alcantara: Yeah, it’s 94%, and desktop is still strong, but it has dropped 6%.
Emily Lewis: [Agrees]
Lea Alcantara: So it’s not a huge dramatic drop as the 94% increase, so there are still a lot of people still checking out our site on desktop.
Emily Lewis: [Agrees]
Lea Alcantara: But since it was a drop of 6%, I believe that trend is just going to continue.
Emily Lewis: So before we talk about the revamp, we should probably say why we aren’t doing a full-scale redesign.
Lea Alcantara: Right. So the other thing, too, is again thinking about business priorities. We just cannot afford the time to invest in a full-scale revamp.
Emily Lewis: [Agrees]
Lea Alcantara: The other thing, too, is this is our own project.
Emily Lewis: [Agrees]
Lea Alcantara: So we know we don’t need to do the full-on discovery as much.
Emily Lewis: [Agrees]
Timestamp: 00:49:57
Lea Alcantara: And we also know our audience as well, so our primary focus is making sure that the content is the focus and that we have easier navigation.
Emily Lewis: [Agrees]
Lea Alcantara: The other thing is speaking of that content, we’re really trying to figure out whether the content is necessary in the first place.
Emily Lewis: [Agrees]
Lea Alcantara: And then really, we just want to make it easier for everyone who’s listening to consume the show and subscribe to the show or review our archives, all those fun things.
Emily Lewis: And I think the other part of it is as much as we know needs to change in terms of the CSS and even the HTML and content, there are a lot that doesn’t need to be changed.
Lea Alcantara: Right, right.
Emily Lewis: That doesn’t need to be redesigned, the branding aspect of it, the look and feel, those are things that I’m still extremely satisfied with.
Lea Alcantara: Right.
Emily Lewis: And that isn’t something that needs to be looked at from a complete redesign perspective.
Lea Alcantara: Yeah. It’s not a blank slate.
Emily Lewis: Right.
Lea Alcantara: We’re not working with a blank slate here.
Emily Lewis: Yeah.
Lea Alcantara: So our process for this is kind of like what we do with all our clients, but a little just more compressed.
Emily Lewis: Yeah.
Lea Alcantara: So we still do a content audit because, as I mentioned, our primary focus is to make sure that the content is easier to digest, that people are able to find it as well. So we did and are still in the middle of doing a full content audit and prioritization figuring out what we need, what we don’t need, and that’s regardless of what device is being used. It’s just what are people trying to consume on this site.
Emily Lewis: We made a lot of assumptions when we started podcasting about what we wanted on the site.
Lea Alcantara: Right.
Emily Lewis: And six years later, we’re like, “Yeah, we don’t need that anymore.”
Lea Alcantara: Yeah, absolutely, yeah.
Emily Lewis: We just don’t need it.
Lea Alcantara: Yeah, exactly. So what exactly is necessary for our listening audience, and in particular, our mobile-listening audience, because what’s the most common time that you’re listening to a podcast probably on your phone? So we’re trying to figure out how do we help accommodate that.
The other thing, too, is because this is our own project, we don’t need to go towards formal wireframes as well, so we do have sketches so we understand where things are placed, but we’re not being fuzzy over precise wireframing and deliverables, especially because it’s just between Emily and I. Then after we do the sketches, then we’re going straight into mobile-first composition, so those were the static comps that I’ll be designing that matches our content priorities and our sketches.
Emily Lewis: And can you just take like a little moment to sidebar about what a mobile-first comp means to you?
Lea Alcantara: Well, a mobile-first comp to me, really, I always think why are people visiting our site on their phone, and it’s prioritizing that content first to show to them first. So, in some ways, like mobile first to me is a little bit like a content-first situation.
Emily Lewis: [Agrees]
Lea Alcantara: Because it’s like, “Okay, what’s on this site? Why are people visiting? What is the first thing they want to see?” Right?
Emily Lewis: [Agrees]
Lea Alcantara: So when I’m thinking about my mobile-first concept, I’m almost always thinking about the composition, like the layout and prioritization, first and foremost.
Emily Lewis: And I think the other thing that stands out for me as an observer of your process is not just the content, but also the action.
Lea Alcantara: Yes.
Emily Lewis: So when we were going through the sketching, mobile is, I believe, and I have to find the report where I read this, but sharing is more prominent on mobile than it is on desktop.
Lea Alcantara: Yes.
Emily Lewis: And so making sure that people seeing where they can share an episode or where they could follow up on social media, those are big channels for us.
Lea Alcantara: Right.
Emily Lewis: That’s a big deal, so those also need to be prominent for us because we know they’re coming to listen, but we also want them to follow us.
Lea Alcantara: And easily share the episode.
Emily Lewis: And Donate, that was another thing.
Lea Alcantara: Yeah.
Emily Lewis: We haven’t made the prominent, which is kind of ridiculous.
Lea Alcantara: Right.
Emily Lewis: But we need to make Donate prominent. We want to make people aware that that’s option, so that they can do it.
Lea Alcantara: Right.
Emily Lewis: So it’s also what we wanted. So we thought about what the audience wants when they come to the site from a mobile phone, but what do we also want them to do.
Lea Alcantara: Right, absolutely, and that’s the same with clients. Sometimes I feel like when you’re having these types of discussions with clients, some designers might favor only the audience or only the client when you really have to balance both priorities in terms of actions and content and prominence when you’re designing.
Emily Lewis: Yeah. So once Lea and I have the comps in a good place that we feel we know the direction then we head into the front end.
Lea Alcantara: Yeah. And actually, fun fact, when Emily was first experimenting with retrofitting, she actually used ctrlclickcast.com as her guinea pig and she wrote about it. Why don’t you tell our listeners a bit about that and if your approach has changed over the years?
Emily Lewis: Oh, well, my approach has definitely changed, so I had to dig up some articles I wrote for Microsoft Script Junkie a couple of years back. I have got a piece from 2011 and a piece from 2012, and essentially, I’m talking about writing CSS through media queries, and I applied it to CTRL+CLICK CAST, but before I was getting into the media queries, it was coming to grips with the concept of a fluid layout or a liquid layout, which this was when you would use percentages for, let’s say, your column widths, so your large column is 70% and your right column is 30%.
Lea Alcantara: Right.
Emily Lewis: And if you resize your window, those scale down, and so in my first journey of responsive web design, that’s what it was to me, that I just need the things to scale down.
Lea Alcantara: Right.
Emily Lewis: It didn’t go to the level of like, “Is it readable? Does someone have to zoom?” And so these articles really focused on trying to get a grasp of fluid layouts and calculating proportional widths, which if you got Ethan Marcotte’s book, the first one that came out on responsive web design, that was a big part of it, figuring out the math of creating these fluid layouts that you could then apply to different media queries, different view ports, and honestly, I don’t know why I thought that was responsive web design. [Laughs]
Lea Alcantara: [Agrees]
Emily Lewis: But at the time, it’s kind of what I thought it was, and I thought I took it a little further beyond the fluid layout to also images that scaled.
Lea Alcantara: Right.
Emily Lewis: But beyond that, it wasn’t going more into the user experience.
Lea Alcantara: Right.
Emily Lewis: And so it was one of those things that I experimented with, and I didn’t like what I ended up with.
Lea Alcantara: Right.
Emily Lewis: Like I had layouts that scaled, but it still wasn’t readable. It was like a layout retrofit.
Lea Alcantara: Right, right.
Emily Lewis: And it proved that you can’t do that and have it be enough.
Lea Alcantara: I mean, that’s a big lesson, because what it sounds like is you just made something fixed and made it non-fixed.
Emily Lewis: Right.
Lea Alcantara: But that doesn’t mean that’s responsive.
Emily Lewis: Right, yeah. So it’s a bit of a blast from the past in these articles, but I think it speaks a lot that they paid me for this article. This was considered “modern” at the time. [Laughs]
Lea Alcantara: Yeah, yeah, in 2012, yes, it was.
Emily Lewis: I just view it a lot more broader. A responsive website is so much more than layout, and in the beginning, to me, it really was just layout.
Lea Alcantara: Right. And I think this is reflective of just our industry maturing as well, because it sounds like back then, people were just more concerned about the technology and just making sure that something “worked,” whatever what work means, versus considering the fact that like, well, does shrinking this actually make it easier for the site to perform its goals?
Emily Lewis: Right.
Lea Alcantara: And does it make it easier for the user to interact with this site? And if the answer is no, then [laughs] it wasn’t really a successful site, right?
Emily Lewis: A really good exercise though, I think trying to retrofit something will teach you something faster than anything else.
Lea Alcantara: Yeah, absolutely.
Emily Lewis: Because you’re having to overwrite and understand the relationship of what was there before and what you want it to do. So it’s time consuming and painful, but I definitely think you’ll learn a lot coming out of it.
Lea Alcantara: Right.
Emily Lewis: Yeah, I decided to right about mine. I’m looking at it now and I’m like, “Oh, my God, I can’t believe I wrote this.”
Lea Alcantara: [Laughs]
Emily Lewis: And that’s what I did, but that’s what you think until you know better, until you start building an actual project from the ground up.
Lea Alcantara: Right. So speaking of knowing better, what’s in the future now? What’s happening with front end?
Emily Lewis: Well, for CTRL+CLICK CAST, I think the good news is that the HTML will likely remain very similar. I wrote it with HTML5 and there are a handful of patterns that I’ve adjusted from our internal framework that I’ll put into place, but for the most part, I’ve always written very lean, clean HTML and I’m pleased because that’s going to save me a lot of time. This is not some client form or WordPress site with a ton of generated divs and things like that I’m going to have to wade through.
Lea Alcantara: Right.
Emily Lewis: Oh, just a little note, if you do get a look at someone’s source code and there are like lots of nested divs, make sure that their CSS isn’t super dependent on that DOM structure because then you have selectors that are incredibly long because they’ve done the div inside a div inside a div inside a div and then it’s the h1.
Timestamp: 01:00:05
Lea Alcantara: Yeah.
Emily Lewis: So it’s an h1 inside three divs and that just gets incredibly hard to overwrite. The CSS for CTRL+CLICK will change dramatically. I was not using Sass at the time and I will want to because I do feel like that allows me to maintain more easily. I like having my CSS broken up into partials and I like the compiling that comes from it, and the efficiencies of using things like mixins, and then, of course, I’ve just gotten better with my selectors, not to mention, browsers I’ve gotten better. I’m not going to worry about IE 8. I’m not going to worry about not supporting pseudo-selectors and things like that.
So I’ll be able to use more in my toolbox because, well, it’s six years later, and that’s really all I expected at the front end. We don’t have much JavaScript on the site and I don’t see that changing. So I don’t anticipate much to do with JavaScript at all. In fact, I actually think we would get rid of the JavaScript we have on the site.
Lea Alcantara: Very cool. Very cool.
Emily Lewis: And then the last part of the CTRL+CLICK revamp is just the CMS aspect because as we said earlier, performance is a big deal, and while I can make sure that our front end is as lean and mean as possible, the EE site behind it is six years old.
Lea Alcantara: Right. I mean, we did just upgrade the system to at least the most recent version of EE2, 2.11.
Emily Lewis: [Agrees]
Lea Alcantara: And we have plans on moving it to EE3 when we finish figuring out like how do to replace certain functionality.
Emily Lewis: [Agrees]
Lea Alcantara: But we will be reviewing how we actually built the templates in ExpressionEngine as well to be a lot more performance friendly and how we even built it in the first place as well.
Emily Lewis: [Agrees]
Lea Alcantara: Because again, it’s six years ago. [Laughs]
Emily Lewis: Oh, I guarantee you I used a ton of embeds, I guarantee it.
Lea Alcantara: Right.
Emily Lewis: I haven’t looked at that in a long time, but I’m pretty sure that that’s what we’re looking at, lots of embed. [Laughs]
Lea Alcantara: Right, right, right.
Emily Lewis: And I probably didn’t make my queries as efficient as they could have been.
Lea Alcantara: Yeah, yeah, yeah. But I mean, I will have to say this just as a random aside, just upgrading ExpressionEngine to the latest version and upgrading our hosting to PHP 7 and we just added SSL to our site, we haven’t touched ExpressionEngine in the layout and it’s fast.
Emily Lewis: Yeah.
Lea Alcantara: It’s way faster now. So I know this has nothing to do with responsive retrofits, but PSA, upgrade your system.
Emily Lewis: Yeah.
Lea Alcantara: Upgrade your host and upgrade your system.
Emily Lewis: Yeah, well, it’s not part of a retrofit, but I do think when you just get beyond that, you should be looking at the CMS.
Lea Alcantara: Yeah, absolutely.
Emily Lewis: If you’re revamping or redesigning from any perspective and then you have a CMS, that should also be looked at. This should not just be a front-end content discussion.
Lea Alcantara: Right. And as we mentioned at the beginning of the show, that speed is a very big factor in mobile friendliness as well.
Emily Lewis: [Agrees]
Lea Alcantara: So even though it’s not “front-end” part of responsive retrofits, trying to make your site fast is a mobile-friendly step.
Emily Lewis: Yeah.
Lea Alcantara: Wow, we covered a lot.
Emily Lewis: Yeah, and we went a little over longer than I thought.
Lea Alcantara: Yeah.
Emily Lewis: But yeah, I think we got a lot. Hopefully, our listeners will think so. [Laughs]
Lea Alcantara: Yeah, and I mean, I am curious if our listeners have any other tips that they’ve done throughout their development career to retrofit. Are there efficiencies that you found, just message us or tweet at us and I’d be really curious to hear your thoughts.
Emily Lewis: [Agrees]
Lea Alcantara: But before we finish up, we’ve got our Rapid Fire Ten Questions, and this time, Emily is up.
Emily Lewis: [Laughs]
Lea Alcantara: Are you ready?
Emily Lewis: Yeah.
Lea Alcantara: Okay, introvert or extrovert?
Emily Lewis: Introvert.
Lea Alcantara: The power is going to be out for the next week, what food from the fridge do you eat first?
Emily Lewis: Ice cream, but I eat ice cream first every time there’s ice cream in the fridge. [Laughs]
Lea Alcantara: [Laughs]
Emily Lewis: So…
Lea Alcantara: What’s your favorite website for fun?
Emily Lewis: Amazon.
Lea Alcantara: Oh, yeah.
Emily Lewis: I like shopping.
Lea Alcantara: Yeah.
Emily Lewis: Online shopping, I find that fun.
Lea Alcantara: What’s the last thing you read?
Emily Lewis: I read a really interesting article on The Guardian this morning about the Rorschach Inkblot Test.
Lea Alcantara: Oh.
Emily Lewis: And how it evolved and how it’s controversial and how it’s used today.
Lea Alcantara: Interesting. So what’s the best piece of professional advice you’ve received?
Emily Lewis: Oh, I’m not so sure it was professional advice, but it was really the way my boss approached work when I worked at Pitney Bowes. Ian Pitts was on the show many years back, but he was my boss then and he just really always encouraged me to experiment. It’s almost like he adopted that old Google 80/20 approach to work where 80% of your time is working on something that the business needs and 20% of the time is you sort of experimenting and pushing and seeing if there’s something new you can learn.
Lea Alcantara: Right.
Emily Lewis: So that was probably the best thing I learned from someone else. It wasn’t advice, it was just a way he approached work, and I learned from that.
Lea Alcantara: Cool. What’s the worst piece of professional advice you’ve received?
Emily Lewis: Again, I don’t think it’s advice, but more of what I observed from my parents. They had their jobs and they have jobs and they were miserable.
Lea Alcantara: [Agrees]
Emily Lewis: And they paid their bills, but that was what most important, you have a job, you paid your bills, and that’s what I thought for a really long time, and that’s how I ended up really, really unhappy.
Lea Alcantara: Right.
Emily Lewis: So for me, I have freedom without kids and less responsibility I think than others and so it made it easy for me to strike out on my own and try and find happiness in my professional career versus just a job.
Lea Alcantara: Okay, so I mean, that’s kind of like find a real vocation for your career.
Emily Lewis: Yeah, don’t just… don’t… I don’t know, I think it’s a generational thing maybe, you know?
Lea Alcantara: Right.
Emily Lewis: Don’t just stay in a job.
Lea Alcantara: Right.
Emily Lewis: If you’re unhappy, leave.
Lea Alcantara: Right.
Emily Lewis: You can do it. You’re allowed.
Lea Alcantara: Right.
Emily Lewis: I never knew I was allowed.
Lea Alcantara: Right. What’s your favorite color?
Emily Lewis: Purple.
Lea Alcantara: If you could take us to one restaurant in Albuquerque, where would we go?
Emily Lewis: Oh, it’s laughable. Hmm, oh, okay, my favorite breakfast place is called The Range [Café].
Lea Alcantara: The Range.
Emily Lewis: That’s for breakfast.
Lea Alcantara: Okay, what do they have there?
Emily Lewis: Oh, any kind of breakfast you can imagine, but they have really good red and green chili, which is on eggs or potatoes.
Lea Alcantara: [Agrees]
Emily Lewis: Jason always gets like a country fried steak with… or chicken and fried steak with green chili on top. So basically, any breakfast food you can imagine, but you can get chili with it.
Lea Alcantara: Nice.
Emily Lewis: [Laughs]
Lea Alcantara: What’s your favorite board game?
Emily Lewis: I like Trivial Pursuit, but I particularly like my 25th Anniversary Entertainment Edition.
Lea Alcantara: Oh, I see.
[Music starts]
Emily Lewis: So it’s kind of like most focused on pop culture.
Lea Alcantara: Cool. Finally, Hulu or Netflix?
Emily Lewis: Both and Prime. [Laughs]
Lea Alcantara: [Laughs]
Emily Lewis: So I can’t live without either.
Lea Alcantara: All of the above. [Laughs]
Emily Lewis: All of them. I need all. [Laughs]
Lea Alcantara: And that brings us to the end of today’s episode. Be sure to check our show notes for all the resources we mentioned throughout the episode. CTRL+CLICK is produced by Bright Umbrella, a web services agency obsessed with happy clients. Today’s podcast would not be possible without the support of this episode’s sponsor! Thank you, Craft CMS!
Emily Lewis: We’d also like to thank our partners: Arcustech and Devot:ee.
Lea Alcantara: And thanks to our listeners for tuning in! If you want to know more about CTRL+CLICK, make sure you follow us on Twitter @ctrlclickcast or visit our website, ctrlclickcast.com. And if you liked this episode, please give us a review on iTunes, Stitcher or both! And if you really liked this episode, consider donating to the show. Links are in our show notes and on our site
Emily Lewis: Don’t forget to tune in to our next episode when Susan Snipes joins the show to chat about developing long-term client relationships. Be sure to check out ctrlclickcast.com/schedule for more upcoming topics.
Lea Alcantara: This is Lea Alcantara …
Emily Lewis: And Emily Lewis …
Lea Alcantara: Signing off for CTRL+CLICK CAST. See you next time!
Emily Lewis: Cheers!
[Music stops]
Timestamp: 01:08:10
