Wren Lanier leads design and UX at Highrise.
In this episode, we discuss designing on the Z axis, disruption in the web design industry, responsive design for giant screens, next steps for a junior designer looking to level-up, and more!
Time Jump Links
- 19:38 Shoptalkshow.com redesign! Fresh! Exciting! It'll change your life!
- 29:29 io.js reached 1.0
- 30:56 I have noticed that the :visited selector seems to have fallen in usage over the last few years. Do you think styling :visited links is better or worse for accessibility?
- 37:00 I am in the process of building a mobile first e-commerce website. At the moment my layout cover screens up to 1600px wide with information, for instance when I display the catalogue, a grid three products wide covers most of the screen. Is this too wide, how wide is too wide, what are your thoughts on responsive web design for larger screens?
- 42:25 My question is about billing. I do freelance web development and I'm starting to gain quite a few clients and recurring billing is becoming more important. In the past I've used a google doc template but feel it looks unprofessional and I'd like to use a software that stores my clients information. What are your suggestions?
- 46:57 I wanted to ask about how you guys started in the trade and is there any significant steps (tutorials, languages, workflow improvements) that you would recommend?
- 51:17 When I specify a text size in CSS, it appears in different sizes on iOS devices (iPhones & iPads). It even appears in different sizes on the same device depending on whether it's rotated into portrait or landscape view. Please explain the rules used by iOS devices to shrink or enlarge text. Does "retina" resolution play into this?
- 55:08 I am a front-end developer and have been doing contract work for 2 years. I believe I am ready to apply for a full time in-house dev job. I updated my resume and started looking at job listings. I have noticed listings for UI/UX developers / UI/UX designers and Junior Front-End Developers. What are these jobs like? What is a junior developer salary like? What kind of tools are required for these jobs?
CHRIS: Hey, everybody! Thanks for listening to Shop Talk Show. We are back in 2015. It feels good to be back. We got a fresh coat of paint on the website. We'll tell you all about that in a little bit. We also have two sponsors: The Responsive Web Design Summit coming up, RWDSummit.com. Both me and Dave are going to be at it, coming up in the middle of March here. Use coupon code SHOPTALK if you want to save 20% off when you sign up for it. And One Month is back, One Month iOS.
[Xylophone sound effect]
DAVE: One Month iOS.
CHRIS: The new theme song. Otis was working on that, Dave's son.
DAVE: I stole it from my son. Great. Keep going. Go, go, go, go, go.
CHRIS: OneMonth.com/ShopTalkiOS is the URL you want to go to because that's going to get you the discount on it. And, they've recently brought the prices down a little bit, so anyway, we're going to tell you all about that course, which is basically a change your life kind of course in this show. But, for now, let's kick things off.
[Banjo music - theme song]
DAVE: Hey there, Shop-o-maniacs. You're listening to another episode of the Shop Talk Show, a podcast all about -- what's it say on the brand new website now? It says an Internet show about Internet stuff.
CHRIS: Oh, man.
DAVE: I am Dave Rupert, and with me is Chris Coyier.
CHRIS: That's what happens when you let placeholder text go live.
DAVE: Go live.
DAVE: Hey, you could have done worse.
CHRIS: I was trying to be clever. I try to do clever things, and I'm like: Why do I even try? I'm not a copywriter. Anyway, first of all, I should say that we have with us, Wren Lanier.
[Ta-da orchestral fanfare sound effect]
WREN: Thanks, guys.
CHRIS: Yes! The horns have blasted. Thanks for joining us, Wren. Are you at home in the Midwest?
WREN: I am at home in the Midwest with a cat in my lap at this very moment.
DAVE: Oh, yeah, that's classic Midwest there, don't 'cha know.
CHRIS: You got snow on the ground? I'm in Wisconsin.
CHRIS: I just like to reminisce with my midwestern kin.
DAVE: This is hearsay. I hear Iowa, South Dakota, and North Dakota are the biggest new startup places. Have you guys heard similar things? No?
WREN: I am not aware of this. I know the Rust Belt, Buffalo, New York, in particular, has been putting a lot of effort into recruiting startups.
DAVE: I'm just interested. I saw something about, I think it's like, Fargo or something is huge. Apparently big business is going on in Fargo. Anyway, I digress.
CHRIS: I haven't heard it. I like not thinking about that kind of thing. Not that there's nothing to say about an area being good for this type of thing, but it's kind of like I wish we could just do away with that entirely. Just be like anywhere is good because everywhere has computers and Internet. Thus, you have all the tools you need to work on computers and the Internet.
CHRIS: What does it really matter where you are? Aah, okay.
DAVE: Sports teams.
CHRIS: That's fair, sure, sure. Different kinds of tacos. I want to know more about Wren and what you're doing right now because there are some interesting things afoot.
WREN: There are interesting things afoot.
CHRIS: Yeah, so I guess we could. Do you want to just start with the work stuff?
WREN: Sure. I am leading design and UX at Highrise. That's the contact management product that was originally created by 37 Signals and spun off, one of the products that they've spun off since they decided about a year ago to focus exclusively on Basecamp. We are a new team. We took over the product. Our CEO started in late August, and our team fully came together by about the end of September. We've been working on Highrise for three or four months now.
CHRIS: Nice. That's great.
CHRIS: Somebody kind of -- spun-off is interesting because we all kind of get it. It means that, like, okay, the original company doesn't work on it much anymore and some new company does. Does that mean it was bought? Does that mean there's zero involvement from the old company, or is it a little more muddy that that?
WREN: I belief Jason Fried wrote a long post about their attempts to sell Highrise and how they were not able to find what they felt was a suitable buyer. My understanding is that all the potential buyers either wanted to shut down the product itself and sort of essentially just buy the users and port them over to some other system, or they wanted to acquire the team with the product, designers and developers. Obviously Basecamp wasn't going to let any of their extremely talented folks go, so they hired Nathan Kontny in Chicago, who is a serial entrepreneur who's taken several teams through Y Combinator, developed several products, and he took over as CEO in late August. We are still on their infrastructure, and so we're sort of decoupling from the Basecamp mother ship.
CHRIS: Sure. That's interesting. Yeah, it's not like you are privy to share all these details. It's kind of funny. So he didn't really buy it. He was kind of like given it, but with some kind of business arrangement.
CHRIS: Like, well, okay; then a whole bunch of money, you know, some large percentage of profits is still going to come to the original owners or something. It's some kind of unusual business arrangement, I'm sure.
WREN: I'm sure, but I think it was an arrangement that I'm sure is in line with the original 37 Signals and Basecamp values for their users and their products.
WREN: I think that was important to them to keep all those things in mind. I think it should be good. It should be good for users, and I think it's good for all of us to feel like we're working on a product that isn't just being developed by venture capitalists to sell to some other big company down the road.
WREN: To feel like there's some stability here.
DAVE: That's cool.
CHRIS: That's them putting their money where their mouth is too. They've been talking about that kind of thing for a long time.
CHRIS: And it really would have probably not gone well for them if they're just like, "Surprise! It's sold."
DAVE: We sold your data.
WREN: Right, right. Everybody's data is safe and secure.
WREN: Not going anywhere.
CHRIS: Very cool, and so your role there is lead of UX? What was the--?
WREN: Lead of UX and design.
CHRIS: Wow! What an awesome new job. Congratulations. I mean it probably doesn't feel super new to you know, right?
[Ta-da orchestral fanfare sound effect]
CHRIS: Four months or so.
WREN: Yeah, yeah, it feels great. It's exciting.
CHRIS: That is fantastic. What led you there? You kind of heard of the position and went for it? Did they track you down?
WREN: It was one of those Twitter things.
WREN: It was one of those Twitter things where I saw a Tweet that someone was looking for a designer, and I had been looking for a remote position, kind of be able to work from home and control my workspace a little bit more and stay focused. It was a good fit all around and, of course, the team is all over the place, but we do have a couple of people in Chicago, in the Midwest.
CHRIS: Yeah. Let's take a look at those servers, or whatever. I'm sure, yeah, so Wren's website, Wren Lanier, I would hire you in a second. Go to this website. It's tasteful, it works, and also a beautiful, responsive site. No wonder. No wonder, people. Have a beautiful website and be able to show off. It's like a -- I don't know. I would show any aspiring person this kind of thing because there are only a couple of pieces on it, and they're all super strong. I mean I don't know.
WREN: Thank you.
CHRIS: Anyway, awesome.
DAVE: It looks good.
CHRIS: You were writing for the Pastry Box, right? Is that wrapped up? Are you an ex-Pastry Box?
WREN: Yeah. I wrote for 2014. They've got a great new crop of bakers for 2015. It looks like an amazing set of people for what appears to be their last year.
CHRIS: Is that right? I didn't hear that.
WREN: Yeah, they made that announcement, and I'm sad about it, but it's also sort of like when one of your favorite television shows announces that they're going to end on a high note before they jump the shark. You're like, all right then. It's just going to go out strong.
CHRIS: Good point.
WREN: I think it's great.
DAVE: I think that's great. Then, like, year six you're not just like, "Ugh, why am I doing this? Blah, blah, blah." You're just like, "We did it, and it was good. It's awesome, and we have all this content. That's wonderful."
DAVE: Most of it is very, very timeless.
WREN: It is, it is, and writing for them last year, I would often have an idea, then sort of thing, "Wait. Has somebody else written about this already?" I think you do see themes repeated, but it's nice to see those themes repeated from different perspectives and different people's experiences and takes on topics, topics like burnout, topics like side projects, and just all these things that we're all kind of dealing with week-to-week.
CHRIS: Mm-hmm. Yeah, that's great. I had a chance to do it too. It makes you kind of wonder. It's like the world's most aggressive publishing schedule, isn't it?
CHRIS: It's every single day. Then, unfortunately, I think they tried to do a book, and it didn't work out or something because for who knows whatever reasons. It's a little sad. What are your options then? This is a tremendous amount of work. Do you slather it in ads to make it worthwhile? There are only so many ways that you can kind of tastefully get, so it's unfortunate.
WREN: I think they're another great example of doing it the way they want to do it and sticking to their values, sticking to their standards, and putting out a really high quality product every single day without having to compromise in too many terrible ways.
CHRIS: This is starting to become a theme today.
CHRIS: Doing the right thing at the right time. Yeah. Yeah.
DAVE: Great job.
CHRIS: Yeah. We met a year or two ago at ConvergeSE, I think.
WREN: We did.
CHRIS: You talked about all kinds of stuff. You talked about mobile and prototyping and gestures.
CHRIS: You have this whole idea of designing on the Z-axis that you talked about.
WREN: Correct, correct.
DAVE: Can you expound on that, like, give us the five-minute version of that talk? I've heard -- everyone is like, "Oh, you've got to see Wren's Z-axis talk. You've got to see Wren's Z-axis talk."
DAVE: Can you give us the five-minute version?
WREN: Yeah. I think the five-minute version is trying to put some design logic and principles behind that UI experience of popping another view over top of a view, or then sliding something over and revealing a view underneath that sometimes you get into an app and stuff is just popping out left, right, and center. It's like VH1's pop up video or something. It kind of makes no sense. Why is this thing on top of that thing? Really talking about design principles of how to do that well and correctly in a way that makes the experience of the UI more easy to understand and more elegant and with a better sense of flow.
CHRIS: That's fabulous. It really was about Z index, in a way.
CHRIS: It really wasn't about vertical stacking. Yep.
WREN: Absolutely. Things like I use gmail. I use the gmail app on my iPhone. I love how, to open up their left menu, it's actually little details like the fact that you're inbox that slides over, and that menu is sitting underneath your inbox on the left. And so I hate it when apps slide a menu over top of the app view that I was looking at. They just bring it over and shove everything out of the way. I'm like, "Hey, man. I was looking at that."
WREN: That's a really sort of picky thing, like what slides. Is it the view that slides, or is it the menu that slides? What goes over and what goes under? Designers, and for the UX, we really have to think about that stuff. That's the invisible work that makes an app either feel good or feel crappy.
CHRIS: That's such a good point. I think of those two. Everybody has seen the off canvas menu kind of thing.
CHRIS: That can come. I remember working on -- I even worked on this little -- what was that little UI framework thing called where our idea was to bring all these top select, really perform it in nice effects, and put them all together. Gosh, I only worked on it for a short time, so I can't remember. But it had a bunch of different sidebar options, right?
CHRIS: Think of a code wraps article. They have all these awesome things they're always doing.
WREN: Oh, yes.
CHRIS: They'll have, like, 50 examples, which makes them so good. But now you're a designer, and you're thinking, "Okay. Do I want the sidebar where it slides on top of the content, or do I want the one where it pushes everything away, or do I want the one where the content falls back visually and make it smaller?"
CHRIS: You have ten things you can pick, and they all are kind of awesome looking.
CHRIS: But then it goes beyond that, like you were saying. Hey, I was looking at that. That kind of thing comes into play even more. It's not just which one looks cooler. It's which one literally works better for what the app is for.
DAVE: I was doing that yesterday. I was doing a little box shadow on hover kind of thing, you know, classic Web 2.0 here. I'm breaking away from flat design.
DAVE: Yeah, retro, super retro here, but just to give it some standoutness, and that seemed like a good thing. What I noticed was if I had a 15-pixel spread on the box shadow, but with a 0.1 second animation or whatever, that makes it different too, like how much it pops at you, the amount of Z that kind of happens. When it was a 15-pixel spread, it was like it shot at your face. You tried to dodge it, you know. But at ten pixels, it felt really good. There's all this subtlety to the Z-axis that's a lot to talk about.
WREN: It is, and those little transitions, that little fade in, that little ease in or pop in and timing that correctly so that it feels fast and performant, but so it also sort of describes the transition between states is super important.
DAVE: Yeah, it's a cool area, and it's cool when you get there in a project. You did all the boring stuff, and now you're like, "Hey, okay. Now I can do hover things. This is fun."
DAVE: Cool. Thank you for the crash course. That was great.
CHRIS: Do you watch? Do you kind of have any opinions about material design on how they -- because they have some -- they definitely--
[Law & Order - SVU sound effect]
CHRIS: They use the Z, do they not?
WREN: [Laughter] They do. I think, in general, the way they describe transitions and the Z-axis is really good. They describe the importance of using animation as a way to describe the relationship between information. It shouldn't be eye candy. Stuff shouldn't just bounce and pop or whatever just because you want whiz-bang-flash. It should balance in some sort of indicator to sort of say, oh, you have a new notification or whatever. Yeah, I think their rules for that stuff in material design are really good.
There are aspects of material design. I think the end products that are created look great. At the same time, I don't want every single app in the world to adopt all of their visual design cues because then I think we'd have this really hemogenous looking landscape of app design. But, yeah, as far as design systems go, I think it's pretty brilliant.
CHRIS: Yeah, I've never heard it said more level headedly. Yeah, it seems like they've done a good job with it. But, yeah, too much would be too much. Think of the backlash against Bootstrap. If they make this stuff easy to use, people will be like, "Eh! That!"
WREN: I see designers go, and they do these portfolio pieces. I think I saw one that was Instagram redesigned with the principles of material design. It's like, yeah, but Instagram is okay the way it is. Not everything has to look like paper.
CHRIS: Yeah, yeah. I saw that too, the re-imagining of it.
CHRIS: Yeah. Sometimes there's a little bit too much on the like. Everything I click has to make a concentric growing circle out of it to indicate that I have pressed there.
WREN: Right, yeah.
CHRIS: Yeah, totally. It reminds me of: it's not just interaction design or any type of design. It's just design too that everything is a thing. If there's a line on a page, that line should need to be there because it really helps separate the thing on either side of that line from each other.
CHRIS: If it's not really helping doing that because there's some kind of other change in contrast anyway, like a color changes or it's clear that this text is a lot smaller than this text, so there's already kind of a natural separation between those two things. I don't really need the line, so it's like that same kind of concept can grow up into interaction design and be like, "Does this thing need to slide in as I scroll down?"
CHRIS: "Well, maybe just to bring your eye to it because otherwise people's eyes weren't going there." Fine, but if it's just like, "Everything slides everywhere!"
CHRIS: It's the same thing as an unnecessary line. It just doesn't do anything.
WREN: It is. It is.
CHRIS: I love it. Good talk. Good talk, team.
DAVE: Good talk.
CHRIS: Great job.
[Jingle -- "Eggnog."]
CHRIS: Did you want to mention anything about the new website? Me and Dave kind of tag-team it. Dave did more stuff. I made sure that there was some text overlapping over text so that people think it's a mistake. That's kind of what I do when I design website.
DAVE: It's good. No, so we have a brand new ShopTalkShow.com. Yeah, it's fun. It was fun to redesign and do it. Worth noting for maximum product synergy, we started the redesign inside a couple of CodePens. Then started to go down the Jekyll route, and then I think I just was like, "I'm going to have to go through and edit all this metadata by hand," so I just wussed out. I was like: I'm going to have to change MP3 URLs. I'm going to have to get everyone's bio pic or whatever.
CHRIS: We were trying to solve too many problems at once, so we decided to solve problems one at a time. We may end up going the Jekyll route or whatever. But one thing we had to do was change podcasts hosts, which we've gone with SimpleCast now. They're a very nice service, so the bandwidth by SimpleCast, essentially. We use them for almost nothing, at the moment, other than hosting the MP3. We want to, I don't know, shout out to them a whole bunch that they do more than that though.
DAVE: They're a really cool service.
CHRIS: They really are a really cool service, so maybe we'll use more of their features as we go on. They have really good reporting, which that's going to be useful for us too, which is cool.
DAVE: Yeah. You can go to TwoMinutePaul.SimpleCast.fm, my other podcast with Paul Russo. It's on SimpleCast. They give you a free website and stuff like that.
DAVE: And, like, RSS feed, and you just plug it into iTunes. It was like what's the laziest way to put up a podcast? Lazy in the best possible way, like, how can I just get this up there and out and be producing content? This is great, so I recommend it.
WREN: Yeah. Well, you know, I think that you just kind of pointed at one of the things that I've been hearing a lot about this year. It's the general sense and feeling of software is eating the world. Software, in particular, is eating a lot of the Web design industry. It's so easy now.
I have friends with podcasts. They use Squarespace to put up a site for their podcast. Small businesses, it's just so easy for them to use a service like that rather than hire a freelancer or a small agency. So much of that work that five years ago for Web designers was the bread and butter has just kind of disappeared, and so the work folks are doing these days has changed a lot. Obviously a lot of agencies have been struggling. A lot of the design agencies are going in-house. The big companies are requiring design and development teams, so yeah. Even something little like that, it's sort of this picture of the larger trend in our industry. I think a lot of us are still waiting to see where the chips are going to land.
CHRIS: This has been a hot topic on Shop Talk a number of times.
CHRIS: People write in that says, "Why am I valuable when someone can go to Verb and make a website?"
CHRIS: We've traditionally said if you can't bring anything to the table that Verb can't, eh, I don't know. There's still so much that you can do, but you bring a good point. We're doing a little back patting there essentially. If there really is a lot of work disappearing in droves, I guess that is kind of a problem. I think, if you know the Web inside and out, and you're a good people person, and you can guide people through the problems that they're having and solve solutions for them, some of these tools can become your tools too.
DAVE: Right. That's why I think it's worth experimenting and just cracking these things open that you hear about and just be like, "Does this make my life easier? Could I build a website 8000% faster if I just used this thing?" That's something to consider. You may be too late before you learn the limitations, but I don't know. I guess that's like economists - the sunk cost theory - blah, blah, blah, freakonomics, blah, blah, blah. Next!
CHRIS: Surely there's somebody at the bar right now being like, "Eh, the world doesn't need Web designers anymore."
WREN: You know--
DAVE: You know -- oh, go ahead. I'm sorry.
WREN: I certainly wouldn't go that far, but I do think it's interesting how we, as an industry, we love the new. We love the hot. We love disruption. Some company like Yahoo begins to sort of fall by the wayside, and we're like, "Yeah, but they haven't been innovating, man," or whatever. Then when disruption comes for us, and comes for our jobs, and comes for our paychecks, we sing a different song.
CHRIS: Good point.
WREN: You know.
WREN: It's easy to be a fan of disruption when it's whatever people who work for newspapers.
WREN: It's like, "Come on, guys. Catch up. Welcome to the 21st century."
CHRIS: Get an Apple TV, dad.
WREN: Yeah, yeah.
WREN: But when it's--
DAVE: That's a sound byte!
WREN: Late last year, I met my first Web design freelancer who told me Squarespace destroyed my business. This was the best part. He said, "I had to work at Barnes & Noble so I could make rent." I thought, well, that's ironic. He's got an in-house job now, but I do think, for a lot of folks, it's having an effect. I am empathetic towards that. I think all of us kind of have to look over our shoulder at what tool we're developing today that might replace us tomorrow.
DAVE: Yeah, yeah. I always think about it in the sense of, like, let's say all the websites -- there's no more websites. Everything is a Squarespace website, right, or whatever, Verb, the SimpleCast, everything.
CHRIS: Try to pick ones that are most likely to sponsor the show. Let's see.
DAVE: Let's choose the ones that give us money.
DAVE: …Okay. Let's say there's no more websites. You have to then think, well, I like making websites. Where can I do that? It's things like these products, big products.
DAVE: That probably means you're going to have to put on pants and go to an office building or something. That's something to just consider. That might be the future for a while until everyone is like, "Oh, all the WordPress sites look the same."
WREN: It certainly feels -- as a UX designer, it feels like a trend that is happening and that we who sort of describe ourselves as product designers or UX designers, I've done a lot of consulting projects for small businesses, folks who wanted to develop an app who worked with a design agency. Essentially, folks who are really good at designing those sorts of brochure type websites suddenly move into this app design, product design space. It's a different space. It's a different set of skills. It's always kind of immediately obvious to me when what is essentially a sort of marketing design agency has designed an app because it looks really beautiful and it's really hard to use.
DAVE: Ooh! Hey, I got--
[The Zing of the Day sound effect]
[Party horn sound effect]
DAVE: Okay. Go ahead.
WREN: But with these changes in the industry and with these changes in the kinds of work that agencies are able to get, I feel like there are all of these Web designers who are almost immigrants to our product design shores. I want to welcome them, and I want to help them develop the skills to design better apps so that all of us can have better user experiences because I do think UX, as a discipline, is becoming, is broadening out. It's getting absorbed into all pieces of the organization. That marketing is responsible for UX, and product management is responsible for UX. It's not just the hero UX designer, so wanting, thinking of myself and all of us thinking as people to spread the gospel of UX in a good way because I have to deal with the Time Warners and the Verizons of the world too, and I want those experiences to be better.
CHRIS: Yeah. We'll have some actually interesting questions that touch on how we can do that potentially.
CHRIS: Related to hiring junior people and training them and that type of thing.
CHRIS: Let's see if we can get to that. Let's do some other questions. First though, actually, do you have anything else, Dave, to wrap up? We can talk more about the site. There's not much to talk about anyway.
DAVE: Not much. Just have a click through. If you see bugs, let us know. But, no, we're kind of into the, "Hey, this is not our actual day job, but we will work on it iteratively in front of your eyeballs."
DAVE: Yeah, so there you go.
CHRIS: Yeah, IOJS reached 1.0. That was kind of a thing that I just saw only people celebrating about. People are apparently very excited about this, kind of a replacement for NodeJS that--I don't know--supports ES 6 a little better and--I don't know--is separate for some reason, so people are excited about that. I thought we'd drop it in the news section.
DAVE: Yeah, it's a little bit….
[Law & Order - SVU sound effect]
DAVE: Basically there's a core, like a Node Core, right? But then there's like the community, the most active community or something like that, like contributors and stuff like that. Apparently there's a bit of a faction there. I've heard it said, like, IOJS is kind of just a big pull request for NodeJS because they just want it to be better, and Node was getting kind of stalled out. It should be cool. I don't know anyone who has switched over to it yet, but I guess you can just switch, huh? Is that the thought?
CHRIS: If it's the same, whatever, APIs or whatever, I guess why not, right?
CHRIS: It's the same kind of situation happening with libsas or whatever. I saw Compass is trying to get working on libsas. The idea is that it will kind of be the replacement for SAS. At least that's the way the wind is blowing. If nobody is actually saying it yet, that's probably what's going to happen - the same kind of deal.
CHRIS: All right, let's get into some questions. We have one here from Nick Spiel who writes in, "I have noticed that the visited selector seems to have fallen in usage over the last few years." I did some research into what may have caused this. One thing that comes up is that there is kind of like a browser vulnerability on it. Essentially how that works is -- I'm just adding this in here is, you know, have you ever seen a visited link? Like if you go to Google.com search results, it's like a darker blue if you've already been to that one or lighter or something. It's just different in some way.
WREN: Oh, yeah.
CHRIS: The style your links all differently when they're visited. Do you ever think about it or do it anymore?
WREN: I do think about it. I don't do it very often. I think there are probably a couple of different things in play, which is from a kind of design, esthetic, sensibility designers, and our stakeholders, our clients, want to feel like, oh, this is what color the link is going to be - period.
WREN: It's either going to be this pretty shade of blue that matches your branding or whatever. I think also, if you think about some of the big content sites, there's not a good business case. They want as many page views and as many clicks as possible.
CHRIS: A visited link is saying don't go here. You've already seen it.
WREN: Right. You've already been there, so if you're making your money off of ad impressions, if somebody goes around in a couple of loops on your site clicking those links, well, I mean that's traffic.
CHRIS: I guess there is a case for Google doing it being like, oh; you already went there. Didn't find it in our back, huh? You better keep looking around. Here.
WREN: Right. Yeah. Yeah, so it's fewer, I think, fewer and fewer sites and organizations are making the business case for why that's good for their bottom line to provide that indicator.
DAVE: Visited doesn't say -- it just says you've been there once in your lifetime. It doesn't say anything about, like, has that site been updated.
CHRIS: Or since you've cleaned the cookies or whatever.
CHRIS: It isn't all that useful, really. I'm not surprised. The less websites that do it, the less it encourages other websites to do it because it's kind of weird.
CHRIS: Sometimes it's kind of confusing when you look at it, like, why is this a different color again? Oh, yeah, that weird CSS selector. Or if sites way overdue it and have a big pillbox around the entire link with an SVG icon of a checkmark next to it like you visited this, sir.
CHRIS: Like, oh, God, thanks for the help. That's great.
WREN: Yeah. I also feel like there's less and less--what's the best way to call this--in-line linking, that you just have a big paragraph of text, and there are links inside of it. There are fewer and fewer big paragraphs of text on the Web these days anyway, but fewer people blogging. It's, again, this is just really happening on those media sites. If you've landed there via Google, and you've never visited the site before, how are you to know the difference between this one shade of blue and this other shade of blue….
CHRIS: Yeah, right. You have to learn it every time.
WREN: Right. You just have to learn it every time, and so I think that's part of it too is that fewer and fewer of us are visiting the same site every day, whether some folks are using RSS readers or some of us are just using Twitter or something to curate what we read. We don't have that site level loyalty we used to have.
CHRIS: Very good point. Another point being it would be weird to use it on something like main navigation or something like that.
CHRIS: It's like you were saying. It's blocks of text or some kind of list of links or something like that. Contenty still though. I wouldn't mind if it was like, "Check out these ten recipes," and I could tell which ones I've seen. That wouldn't bother me so much. But it's certainly not something that would belong on the global scope.
CHRIS: Star, star, colon, visited opacity 0.5 or something. That would be weird. Who knows? Maybe that will just die off - kind of a trend of the past.
DAVE: Out of fashion. We were using it on the Shop Talk Show notes, but it was weird. You'd see a list of 15 links, and some would be dark orange, and some would be orange. It added -- it was weird. It was helpful, but it was weird. That was it.
CHRIS: I liked the "display none." There are some funny ones in the chat room. The line through was kind of interesting. That's a little more obvious because, oh, it's crossed out.
CHRIS: But at the same time, crossed out a lot of times means, like, del and ins, those HTML5 tags for old and new content. I like the really subtle idea from Joel about just if there's normally an underline. Just remove the underline. Do something subtle that isn't color related. There are design considerations that could get it done.
Let's move on, though, so we can get to as many questions as we can. This one is a little bit about responsive design. Shane Patrick writes in, "I'm in the process of building a mobile first e-commerce website. At the moment, my layout covers screens up to 1600 pixels wide." That's actually pretty darn wide for the Web, really. And it's about--what is it?--a third of the size of your new monitor, Dave?
DAVE: Yeah, this is relevant to my new, 3,440-pixel wide monitor. This is great.
CHRIS: "For instance, when I display the catalog of products on this website, I display a grid 3 products wide, which covers most of the screen of the 1600 pixels." Shane wants to know, "Is that too wide? How wide is too wide, and what are your thoughts on responsive design for larger screens?" which is a good point. We often think of responsive design as: how is this design, that I've designed to be big, going to work when it's small? How often do we think about the big sites? Are we like, "Screw them. They have too much resources. They'll get what I give them"?
DAVE: Do you ever work on--
WREN: Yeah, thinking about the ten-foot screen.
DAVE: Yeah. Awesome. I want one.
CHRIS: Then what does a ten-foot screen mean? Does it mean that it's on a billboard and people are far away from it, or does it mean that you're Dave and have this enormous monitor in front of you? Doesn't that matter because of control and stuff? To what extent have you thought about this on any site or Highrise or something around the giant screen problem?
WREN: Yeah, that the giant screen problem isn't one that I've thought about a lot, but my inclination in that sense might be to give them a couple more columns for screens maybe larger than 1600 pixels. Maybe they get four columns or five columns so they can fit. At what point is the product image getting too large and you could just be showing them more products?
CHRIS: Ah, right.
WREN: If you're doing the kind of site where people are sort of scrolling through and, like, no, not that one, not that one, not that one, not that one. But that would be fun to usability test too because at what point are there just too many dang thumbnails on the screen. I can't look at all these at once.
CHRIS: Good point.
WREN: It's too easy to overlook, so I think you've got different possibilities there, and it probably depends on what your typical user's behavior is like. Is this a site where people want to see all the products, or just say, "Oh, what are the new arrivals?" the browsing behavior, or are they coming there with something specific like, "I need a new pair of shoes. I need them to be black, and I need them to be this particular size." Is that an opportunity to give them more filtering and sorting sort of interface elements to narrow things down to what they want?
CHRIS: Yep. I'm thinking of someone. They're like, "I'm going to dream big here. I'm going to put our entire website on this enormous screen." Then the user searches for neon slippers with leather edging.
CHRIS: There's one result in the corner.
WREN: Right, right.
CHRIS: Yeah, that's tough.
WREN: Yeah, and it's very different depending on what type of product you're selling and who your audience is. There are lots of different possibilities. Get in there and start doing some lean testing. Start prototyping, and start putting prototypes in front of people on those big screens and see what they think.
CHRIS: Yeah. I wonder if we'll run into -- there's been a little bit of a rise of these VW and VH units in CSS, so you can set text that's like: it's going to scale perfectly even if I drag my browser window bigger or smaller, whatever. We can relatively size them to the view part.
CHRIS: It's kind of nice, but there is no min font size and max font size, so it's kind of funny. If you went all in here and just used all those for text and then dragged your window 3,000 pixels wide, you might be looking at some issues. We'll see how that pans out. All right, Shane. Wren said it best - test.
CHRIS: Let's do a sponsor here. We have the Responsive Web Design Summit coming up. That's RWDSummit.com. Attend it from anywhere in the world.
[Xylophone side effect]
CHRIS: That's our new theme song for literally every sponsor.
DAVE: Every sponsor.
CHRIS: It's online. It's three days coming up March 10th through 12th. Lots of people that you'll recognize from the show, me, and Dave will be there. Katie Kovalcin will be there, Rachel Andrew, Ben Frain, Zoe Gillenwater, all people that have been on the show before, talking about responsive Web design, just the thing that we were just talking about there, only we're going to do it all day for three days. Hang out in the chat room together, see what each other's living rooms look like. It should be darn fine.
With it, these conferences are just a little less expensive than in-person ones. Just straight up, the ticket price is generally less, but also you don't have to fly. You don't have to eat out. You don't have to book a hotel room, all that kind of stuff. And you can save 20% with coupon code SHOPTALK.
DAVE: Shop Talk.
CHRIS: All right. What do you got, Dave?
DAVE: It's going to be fun.
DAVE: All right, the next question comes from Andrew Litchford. "Hey. Love the show." Hey, Andrew. We love you.
"So my question is about billing. I do freelance Web development and am starting to gain quite a few clients, and recurring billing is becoming more important. In the past, I've used a Google doc template, but feel it looks unprofessional, and I'd like to use software that stores my clients' information. What are your suggestions?" This might be some product synergy, Wren.
DAVE: Do you have a recommendation?
WREN: I have a few. I've spent a good bit of time freelancing, so this is a problem that I have had to solve for myself in the past. Personally, I use Xero.com, both for my invoicing and as my small business accounting because I have an accountant and that's the number one rule of being a freelancer is, day one, get an accountant. He was basically like, use Xero or use QuickBooks. I chose Xero.
Also, I have, in the past, occasionally used a service called The Invoice Machine. It's like the invoicemachine.com. That's not so much an accounting tool, but it's an invoicing tool. You can sort of send a couple a month for free. Then I guess they have paid levels going up from there. If you're just looking for something that will remember the names and email addresses of your contacts and send professional looking invoices for a relatively small amount, small cost, The Invoice Machine does a pretty good job of that.
CHRIS: Very nice. For example, I might need to send an invoice for this show for a sponsor or something. I've been using FreshBooks. None of these people are sponsoring the show, by the way.
DAVE: Don't they?
CHRIS: I have used FreshBooks because it has an online payment thing built into it, so I can kind of be like this is my bank account information or PayPal, and the money will go to the right place, and it integrates with -- I use some online accounting thing, and it's all synched up together, which is nice. I also, like you, Andrew, had -- at one point I put an HTML invoice, and it's still up there on CSS Tricks. I made it into a blog post where it's just a bunch of content elements all over the place. You could just go in there, change a few things, and send an invoice. That's what we used to do for Shop Talk Show too. It works great. It's just not integrated with anything else then. You can look a little bit professional, but to be professional on your side, it's kind of nice when these things kind of end up having a history to them and integrate with the rest of your financial life.
CHRIS: It's nice to pick things that do that. We've had Harvest as a sponsor on before. Harvest is a wonderful--
DAVE: I use Harvest.
CHRIS: Dave uses Harvest, a really nice way to do this type of thing. Highrise doesn't do that.
CHRIS: It keeps track of your customers, but it doesn't do invoicing.
WREN: No, we're not an invoicing or an accounting tool.
CHRIS: It is a CRM.
CHRIS: Right? It doesn't even say the word CRM on Highrise.
WREN: Yeah, that's interesting. I think it's generally been defined as a contact manager. I guess CRM implies a deeper level of new business tracking, which is something that Highrise does a little bit, but not something that has a lot of features built out to support. I'm sort of making the shrug motion here - I don't know. What is a CRM really?
DAVE: A CRM is a Web app where guys with suits try to squeeze money out of people they just met.
DAVE: Is that right?
WREN: Yeah, and that's not us. That's not us.
CHRIS: It's kind of nice to avoid it a little bit because then you're not. Your meetings aren't derailed with, "How do I get to the top of Google search results for CRM?"
CHRIS: It's just like, "We're not even going to go there. We're this company that builds things." Okay, let's see. Let's do another question. I have one about -- let's see -- Chris. Why do I get the hard ones, Dave?
CHRIS: That's awesome. Chris, you--
CHRIS: "I love your podcast." Thanks. We love you back, Chris. "Perfect for trips to the shop because I spend hours deciding what to buy." Must be wearing headphones while doing it. We appreciate that. "I wanted to ask how you guys started in the trade, and is there any significant steps, tutorials, languages, workflows, improvements that you would recommend? I'm in the second year of an intern, active media course in college and joined a small media studio that used to do videos and photo shoots, and now we've kind of converted it into Web and graphic design stuff. But I want to improve." Chris has some experience, is trying to learn some things, level up in this world, and it sounds like perhaps junior levelish. Do we have any advice for Chris?
Once you graduate and you get a job, not every employer is just going to say, "Oh, here's this new technology. Let's pay thousands of dollars for you learn it." No, you just kind of have to go home and learn it, and you have to constantly be learning because things change every day. So become someone who can teach yourself new things. That's my advice.
CHRIS: That's a lovely sentiment because the industry does move so quickly, and it's hard to trust, you know, whatever. You need to have an internal fire to get this thing going.
CHRIS: Speaking of which, it doesn't hurt to use your internal fire to be doing things on your own, but be learning as well. Chris mentioned to take some courses and learn some stuff already. Here's a course that you might be interested. Now this is a sponsor, but it's a tremendously good one. People have so much luck with them. It's awesome. It's a company. They're over-wrapping thing is called One Month, so it's OneMonth.com, and they have all these courses that are designed to be taken in one month.
One of their top ones is their one for iOS, so the URL for this where you can enroll at is OneMonth.com/ShopTalkiOS. It's typically $499, which, for a month class, is an incredibly good price. You get 25% off if you use that URL anyway, which is really cool. That's the price for if you have a tutor. You have someone who can literally help you with this, a live, one-on-one mentor for the course, which is just amazing. That's a good price for having that, I think.
It can be for complete beginners. It can be for people like me who I'm just a designer and I want to get into the iPhone game. It can be into that kind of thing. It can be people that are looking for a promotion, that kind of thing.
There are six-plus hours of videos, which is a lot to watch, digest, re-watch, and all that type of thing. Then you end up pairing with people to work on the thing. Then you actually build an app. I think the last I looked, you end up building kind of an Instagram-like app using all the stuff: Swift, Xcode 6, Interface Builder, the simulator, the parcer, and all that kind of stuff. Pretty cool.
The URL again there is OneMonth.com/ShopTalkiOS. Sign up through that to level up. You aren't going to regret that, Chris, if you give it a shot.
Let's see. What else do we got? Dave, do you want to do another one?
DAVE: Yeah, let's. Mariella Smith writes in, "When I specify tech size in CSS, it appears in different sizes on iOS devices. It even appears in different sizes on the same device depending on whether it's rotated, portrait, or landscape. Please explain the rules used by iOS devices to shrink and enlarge text. Does retina resolution play into this? Where can I find these sorts of rules for all devices? What's the simplest way to tweak defaults just a bit, etc., etc.? Can you offer tips?" Have you run into this?
WREN: Oh, are you asking me? [Laughter]
DAVE: Yeah, Wren, any experience?
WREN: No, I'm going to hand this one over to Chris for the moment.
CHRIS: I don't know anything. I know that there's that classic thing where you load something in portrait and it seems to zoom in a little bit when you go to landscape. It's because the width tries to stay the same, essentially, right? There's something kind of going on. I'm sorry I'm so ignorant about this, but usually it's like, "Oh, not a big deal. It's just a little bigger now. I'll just look at it bigger."
CHRIS: But you're saying, "I don't like that, or there's some ways to fix that."
DAVE: Well, yeah. iOS, in its infinite wisdom, decided if it didn't like your font size, it would just make a bigger one, or whatever, or shrink it or something. It has ideal font sizes that it can override. There's a property, webkit-text-size-adjust. It's all hyphenated or whatever.
DAVE: Then you set it to--
CHRIS: None or something.
DAVE: If you set it to none, that disables command plus zooming.
DAVE: Don't do that. You have to do 100%, and I think there's also an MS text size adjust.
CHRIS: That changes the font size from changing, but it still kind of like zooms in on your website a little, doesn't it?
DAVE: Yeah, the rotational zoom, we were actually dealing with it on Shop Talk. That is, I believe, and somebody may correct me in the comments--that's totally fine--comes from your view port meta tag. Usually it's just width equals device width, but you set initial scale equals one as well, and that will help it on rotation. It used to be above--
CHRIS: Is that a right? I always wondered what the difference between those is.
DAVE: Yeah, so that's usually kind of how you work around it, but it only kind of works sometimes. It's so weird. That's why you used to have to use this little hack from Filament Group, and also Jeremy Keith had one: the iOS orientation fix thing. But that's also kind of heinous because it just sets an event listener for watching for orientation change. Then it pops things in and out. But they fixed that in iOS 6, I think, so it shouldn't be a problem, but as your mileage may vary. But, yeah, usually the initial scale equals one helps shore that up, tighten it up.
CHRIS: Very good.
DAVE: Hopefully that helps you, Mariella.
CHRIS: I'd like to end this with talking about that thing that we talked about a little earlier about what's the deal with junior stuff a little bit. I'll read the question first and then we'll just take it wherever we need to take it. This is Robert Khayat writes in: "I'm a front-end developer. I've been doing contract work for two years now, and I believe I am ready for a full-time, in-house dev job. I updated my résumé and started to look at job listings." You should probably look at CodePen.io/jobs. Am I right? Or ShopTalkShow.com/jobs, I mean.
[Cash register sound effect] [Phone dialing sound effect]
DAVE: Nope, not that one. This one.
[Cash register sound effect]
DAVE: This one. There we go. Perfect.
CHRIS: "I have noticed listings for UI/UX developers, UI/UX designers, and junior front-end developers." Robert is asking, "What are these types of jobs like? What kind of tools do I need to know? What is the salary level when it says 'junior' in front of a job position like that?" Do we have any insight into what's the deal with these types of jobs?
WREN: Well, my insight is, I think a lot of companies are using different labels, and to just not pay too much attention to the labels and pay more attention to the description and what they're asking for in terms of languages, experience, and so forth.
CHRIS: That's a good point. Labels are hard, so let's just explain what we mean.
WREN: Yeah, exactly. Labels are hard, and I have clicked on job listings for UX designer. Then it was basically describing a front-end developer. I was thinking to myself, "Wow, no front-end developers are going to click on this when this is actually a job for them."
I also think that being a front-end developer is one of the most important and most unsung positions in our industry right now. I think I get an email or a Tweet literally every month asking me do I know any front-end developers who are looking for work because some agency or company needs to hire one. There should be lots of work out there for you and, these jobs you're applying to, if you're not hearing back from them, if you're not getting interviews, maybe find another developer to look over your résumé or look over your GitHub. You should have a GitHub and have some projects that you've been working on, to give you advice on what might not be appealing to these potential employers. Yeah, don't worry about the labels because it means something different to every company. Let's not argue about what they should or shouldn't actually mean, so it might be UI developer. It might be UI engineer. It might be UX developer, UX engineer, front-end, or whatever.
CHRIS: Mm-hmm. Very fair. One thing that generally isn't too debated is the kind of junior, regular, or senior type of thing. People are usually pretty okay with that distinction. Do you find that to be the case?
WREN: Yeah. Yeah, and a lot of folks -- I don't know. Most companies just want somebody who can do good work. They need somebody that they can just hand some specs to, work with a designer, and just build the thing. If you are capable of building the thing and working with a designer to build a thing, I don't know that a lot of places are going to care so much if you have six months experience or two years. Two years experience is great. You've shipped some stuff. Let's go.
CHRIS: I'm sure that if that's the case then you're not junior anymore.
CHRIS: Right? That's cool, but maybe if you don't, if you're kind of like, "Uh, I'm really interested in this stuff, went to school for it, and have a few things, but I don't have any proven ability to ship," then maybe you're still hirable, but you're just junior.
WREN: Right, right.
CHRIS: I would expect to be paid less and have less responsibility and stuff, and that's fine. I can't tell you, Robert, what the price difference is. It depends on a billion things. It depends on the company, and geographics is a huge thing. We're not underpaid as an industry, so you'll probably do okay.
DAVE: Every time I was wondering about salaries, because it's all about location and what value that is, like San Francisco is going to be 1.8x multiplier, so there's kids fresh out of college making, like, mid six figures and stuff like that.
DAVE: You're just like, "How'd they do that?" But they also pay, like, $70,000 in rent a year or whatever. I like Indeed.com/salary. I know that's sort of weird, but I don't know. You just type in random words and then a city or state. Let's try UI developer in Austin. It says, like, makes $97,000, but a junior makes $77,000. That's just Austin.
DAVE: But if you went to Michigan, it's probably way less or something. It's very interesting. I like that tool just to kind of ballpark. Nothing is absolute too. It's also like, what if you're a senior developer, but you're also a super jerk.
DAVE: Or you demand eight months of vacation a year.
WREN: Salaries tend to be lower if you're working for an agency that's billing clients at an hourly rate. There are usually a lot of advantages to agency life. It's just you and a bunch of other tech people, and there's foosball and Redbull and lots of Mac computers. A lot of those companies offer flexible hours. It's usually pretty awesome, but the pay is usually somewhat lower, whereas if you're willing to put on a pair of khakis and drive out to an office park to work for a big corporation, then you can probably make more. Depending on your lifestyle and what's important to you, do you want stability and a really good benefits package, or do you want the ability to roll into work at 10:30 in the morning?
DAVE: Yeah, the hidden benefits.
DAVE: Do you make less money, but you get to see your kids more. That's a big thing if you're older or whatever. There are pros and cons.
DAVE: Salary is kind of a big misnomer kind of.
WREN: Exactly. All those salary ranges and I'll say if you're applying with an agency, that number is probably going to be lower than what you see on a salary calculator, but there are other hidden benefits to it.
CHRIS: Very true.
DAVE: I think, if you're starting to apply for a job, just get one.
DAVE: Find one. If you super hate it, change it. Work on changing it. That's an experience you need to know how to do too.
CHRIS: I should say everybody in the world has an opinion about San Francisco in the world, but if you can move and you really, really love the Web and just want to get a job in tech somehow, you can totally be hired there and make good money. If that's your thing, do it. Speaking of which, there is--
DAVE: Oh, man!
CHRIS: What's that?
DAVE: This just set a bump, set, spike here.
CHRIS: Pretty good, right?
DAVE: I like where you're going with this.
CHRIS: It's just the truth too.
[Cash register sound effect]
CHRIS: I used to live there, and there's people looking for jobs all over the place. Now it's expensive. Yadda-yadda. You've heard the whole spiel, right? But you can go there and work if you want to.
DAVE: That's awesome. I think that's the cool thing is if you're looking for employment, check out the job board. Get jobs.
CHRIS: Like Wren says, it is front-enders got it pretty good. For the most part, people are always looking for them.
DAVE: Hot commodity.
DAVE: Well, we should probably wrap it up, Wren. Thank you so much for coming on the show. For those who aren't following you and giving you money, how can they do that? Then, what's one big thing you'd like to plug before you leave today?
WREN: Oh, man. You can follow me on Twitter. The thing I would plug, I'm speaking at some great UX conferences this year. I'll be at Tiny Giant in Charlotte in less than two weeks. I'll be at ModevUX in Arlington in March.
WREN: Modev. Yeah, if you haven't found a way to come out to a conference--and I think the RWD Summit is amazing. I did that last year--improve your skills. Work on your self-teaching. But if you haven't come out to an in-person conference, find a way to do that this year. Get involved with the community. It really helps you feel good about your work.
It's a good chance to meet other people who sort of have the same problems you have, and it makes you feel less alone to join the community. Yeah, whatever your jam is, come out. Join us. We're good people. There are good people at all these conferences. Yeah, just don't stay isolated, and meet up with some folks in real life.
DAVE: All right, well, thanks, everyone. Thanks, Wren, for coming on. Thanks, everyone, for coming out and listening live in the chat room. You guys are always the best. Be sure to rate us up in iTunes.
DAVE: Just click the five-star button. It's that easy.
DAVE: We have the store still open. You can buy stuff at ShopTalkShow.com/store. Be sure to follow us on Twitter, @ShopTalkShow. Chris, do you have anything else?