RWD Podcast Episode #22 : Jordan Moore

Transcript

Justin Avery: Hey, everyone, and welcome to another Responsive Design Podcast. This is episode 21. My name is Justin Avery. I’m your host, and I’m also the curator of Responsive Design Weekly Newsletter, a newsletter about responsive design that comes out weekly.

This week we are being sponsored by Break Conf. Break Conf. is a brand new conference. It’s on in Belfast from the 12th to the 14th of November. It’s a new conference, but it’s about breaking down boundaries and removing the artificial barriers that have somehow been erected to encircle various specialisms of design.

It’s actually replacing another conference in Belfast, which has sadly come to a close but someone who might be able to talk a little bit more about that is our special guest this week, which is someone who is based in Northern Ireland, Jordan Moore. Welcome, Jordan.

Jordan Moore: Hi. Thanks, Justin.

Justin Avery: This new conference, it’s a new one for Belfast but replacing possibly an old one?

Jordan Moore: Yeah. We used to have a conference called Build. It ran during the month of November for the last 5 years. It was run by a guy, a really talented guy, called Andy McMillan. I think he’s maybe relocated to Portland now. He’s setting up his own conference thing over there called XOXO.

Justin Avery: I’ve heard of that, yeah.

Jordan Moore: Yeah, he’s the brains behind that and he’s the brains behind Build as well. I think you know he’s responsible for some really interesting topics from guys like Wilson Miner. He had a very profound talk called “When We Build” and it was at Build Conference [in September 00:01:49]. I also did a really cool talk that involved his modular steel and some really influential speakers. Yeah, the guy that’s picking up the button really is a guy called Chris Murphy [00:02:00]. He’s a lecturer; taught me, actually, when I was in university. It’s his baby now, I guess.

Justin Avery: Awesome.

Jordan Moore: Yeah, so it’s going to be good fun.

Justin Avery: I realised I’ve just introduced you but I haven’t given any background to you. Now, we met electronically a few years ago, I think. I was doing an interview series; you helped me out over a Christmas break so thank you very much for that. I [think I’ve 00:02:30] thanked you over the phone or in person but cheers for that.

Jordan Moore: You’re very welcome.

Justin Avery: Before then, I obviously stumbled across a lot of the stuff that you’ve been writing about responsive design, which is why I contacted you to contribute to the interview series before and which is why I wanted to have a chat with you about this time. For those that might not have heard of you in the past, I was just wondering if you could, say, describe how you got into the industry, what you’ve been doing the past few years, what you’re doing these days?

Jordan Moore: Yeah, okay. I suppose I got into web design a bit by accident. I suppose it all started … yeah. Actually, I’ve told this story before; it all started way back when.

Justin Avery: I feel like the TV should get misty and like, wave in as we go back to the olden days.

I had this really crudely-put-together picture of my face slapped over one of those skaters and it was badly stretched and it looked like a guy with bad plastic surgery, but it allowed me to play the game longer

Jordan Moore: People can’t see this now but I’m actually looking into the distance. It was around the time of the 2nd Tony Hawk’s Pro Skater game, so it was released for PC back around 2000’s, the early 2000’s. The last decade. What I find was that game, I played that game to death on the PC. I completed it — I completed all gaps, unlocked all skaters — and it was one of those things that I just wanted to keep playing and playing and I found a way of hacking it so that I could make custom graphics and custom boards [00:04:00] and put myself in the game as well, so I had this really crudely-put-together picture of my face slapped over one of those skaters and it was badly stretched and it looked like a guy with bad plastic surgery, but it allowed me to play the game longer.

I guess I got a bit of a love for graphic design from them. Then I pursued the graphic design route right through the last couple of years of high school and then college and on to university, where I was taught by the guy that’s running Break Conference, actually — Chris Murphy. Then it was only around my final year in there, it was around 2008, when I realized I wanted to go into the web side of things, instead of the graphic design side of things.

I just find the web more interesting; that had both a graphical layer and a programming layer to it, and that probably comes from a love of games, where you’re talking about function, as well as design, so I liked it. It was almost like an entry level version of gaming, in a way. A lot of my early websites are terrible odes to video games, so if you could ever find them from Geocities archives, there’s a couple of Tony Hawk’s websites out there that the graphics are all done through the Paint, the Microsoft Paint from Windows ’95 and ’98.

Justin Avery: The Photoshop before there was Photoshop.

Jordan Moore: Yeah, exactly, and then PaintShop Pro. A lot of those early websites have a lot of steel metal pipes forming the UI. Those were tutorials that I seemingly did quite a lot of. Yeah, then I got into web design that way and I joined a company called Front. They then later became Typecast a few years down the line, so after working with them for 3 years [00:06:00], I worked on a bit of a typography demo with one of my friends, Chris Armstrong.

We both worked for the same company at the same time and we would spend lunch times bouncing lots of ideas at each other and one of the early prototypes of Typecast was one of those ideas that formed over a couple of lunches and we presented it to the boss, Paul McKeever, and he really liked the idea and he and the creative director, Jamie Neely, took a tour of [inaudible 00:06:29] today, which is a really powerful app, pulling together fonts from different font services so you can test, type in a browser, and it’s really the best or the most accurate way of producing a design system that you can demo to clients and even just for your own use as well, so you can make sure you’ve covered all your typographical bases and bring that into your next web project. I went off a bit of a tangent there but that’s [crosstalk 00:06:59].

Justin Avery: It’s a good tangent. It’s a great tangent. I know a little bit about you, we’ve conversed on emails and stuff before, but I didn’t know that you and Chris were the original brains behind Typecast. I love that app.

Jordan Moore: Yeah. Mostly, if you look at our very early prototype of Typecast, I’d have to see if one of us still has it — it’s maybe in my Dropbox somewhere — but it’s a very, very crudely done version, where we’ve got the BS system fonts selectable. There’s no font services being pulled in or anything; it’s just about setting typographic BS signs and setting type for all your HTML elements. It looks very, very primitive compared to the beast that Typecast has become today. A good beast.

Justin Avery: Yeah, it is super lovely, though. I suppose [I’m going to delve 00:07:55] into it a little bit. I was speaking in one of our earlier episodes, Stephen was on board, talking about [00:08:00] design systems and — what is it? — bootstraps and dev foundations, frameworks, so how they come with a lot of extra stuff that you may not need. We’re talking about tools like Gridset app and Typecast was one that I brought up as well.

I really liked the Gridset app because it was able to show me grids where I’m not a designer at all; I’m horrific with trying to light something out. I know when something doesn’t look right but I don’t know how to make it look right, and I’m exactly the same with type. With the Gridset app, I wasn’t too keen on the code that it spat out. Is Typecast similar? I enjoyed Typecast because I’m terrible with typography but within there, it gives you some boundaries.

Jordan Moore: Yeah. The code that Typecast spits out is pretty clean. There’s no arbitrary classes unless you specify them and things like that. It will cover all your BS styles for headings and paragraphs and basically whatever you see in the canvass is what you get in the output CSS. Yeah, and you can share the results and things like that so you can test it in mobile and test it in Internet Explorer to see what all the persons with Internet Explorer see how horribly it renders.

Justin Avery: How awesome it would look?

Jordan Moore: Yeah, exactly.

Justin Avery: Someone mentioned the other day that if you enabled optimise legibility in really, really old versions of I think they were saying of Opera or of particular phones, it just stopped displaying the text.

Jordan Moore: That’s nice and legible.

Justin Avery: Yeah. If it’s going to be grainy, just don’t show anything at all.

Jordan Moore: Yeah.

Justin Avery: When you were working with Chris on coming up with Typecast, were you trying to solve a [00:10:00] particular problem that people were having, or that you guys were having at work?

Jordan Moore: Yeah, it actually came from a project where we were getting quite a lot of grief from the client about how the [typelet 00:10:12] in their browser, when they loaded the page so we were showing them all these lovely designs that were built in Photoshop and the type was looking really nice and crisp. I think Chris was using a lot of Helvetica at the time and the client was a Windows user so I might have even …

Justin Avery: Yeah.

so we actually thought, “Well, maybe we should start downloading type in the browser,” and from there, our little lunchtime experiments led to what eventually became Typecast

Jordan Moore: I may have even done the bad thing of trying to force Helvetica on a Windows user as well, from a browser point of view. When they got the final product, they were a bit disappointed, needless to say, and it was one of the things that came out of our project review meeting — that we’re like, “How can we kind of stop this from happening?” Because we got to that stage of the project and realized that this type’s not working very well for us so we actually thought, “Well, maybe we should start downloading type in the browser,” and from there, our little lunchtime experiments led to what eventually became Typecast.

Justin Avery: That’s cool. You do more experiments, right? I’ve been following; you’re one of my RSS feed people that give me the content for the weekly newsletter, so if anyone has been reading the newsletter, I’m sure they would have come across some of your articles. Do you use your blog as an investigative avenue for you to look at how new things are being done? Or do you find you’re doing that in client work as well?

Jordan Moore: Yeah. I guess it’s my own little playground within my blog. I guess the bleeding edge of web technology is the bit that really interests me. The kind of more advanced, tricky stuff, maybe that’s not so advanced to write but just the more features that are on the horizon with web browsers. That kind of stuff really fascinates me [00:12:00], like media queries that respond to light and you can use voice input to change things; just silly little experiments that may not have any use to anybody. I like playing with those in my own little lab section — my website. It’s maybe the game designer within me that really wants to come out. That’s maybe my only creative outlet for that stuff nowadays, but yeah, that’s where they come from.

Justin Avery: We did the interview series nearly 2 years ago and responsive design’s only been around for, say, about 4 years now. Maybe a little bit more, but have you seen anything in particular in the last 3 years being developed within the specs or anything that has excited you or are there a couple of things?

Jordan Moore: I guess probably the most intriguing one is the luminosity media query that does provide that responding to lighting. If anybody doesn’t know, the luminosity media query is basically it will react to the device’s light sensors and feedback a value, so you can say in layman’s terms, if the surrounding brightness in the room, or wherever the user is, is very bright, then you can provide a different, or you can make CSS changes based on that, so you can maybe change the body background to a darker color to offset that lightness. Or maybe if the room’s very dark, you might want to brighten things up a little bit for the user or make adjustments either way. I think I got those the wrong way around, actually, but you know what I mean.

Justin Avery: Yeah. It’s something that Instapaper does almost automatically as an app, but amazing if you have it on a web app.

Jordan Moore: Yeah. It’s one of those things I can see being open to abuse. It might spawn a whole new range of glow in the dark [00:14:00] websites.

Justin Avery: Or something which, you know how you used to have the ones where it was like, “This site only works in landscape mode. Please tilt your phone.” “This site only works in the dark. Please turn the lights off.”

Jordan Moore: Yeah, or else those key words that stuffed in a white footer on white text that light up in a dark room. Reveal all that black [inaudible 00:14:24].

Justin Avery: The fun that you could have with those sort of things.

Jordan Moore: Yeah. Totally. I can see it how to be responsible for quite a lot of abuse. Yeah, it’s one of the more exciting things.

Justin Avery: I recently ran a survey as part of some thing that I’ve been doing around what were people interested in, read this in the newsletter, people in the Twitter and stuff. What were they interested in for advanced techniques with responsive design? What do they want to know more about? The results I’ll share them with you as well. The top 5, or at least the top 3 — responsive images, which is just a given. It’s such a new thing at the moment that everyone’s trying to wrap their head around things.

Performance — also happy to see performance in there. Again, I think it’s something which we should have been doing for ages but we’re getting there, and the third was responsive typography, which, for me, was a bit of a surprise. I would have thought that we were past that but most I’m happy to see that people are interested in getting better at … I don’t know if they’re getting better at typography but they’re struggling with it from a responsive point of view.

Now, you’ve been doing a ton of work around typography. In fact, your last article was about typography and how you test it. For people that haven’t read your blog or are not following you, can you touch on some of the things that you’ve been doing recently around responsive typography stuff [00:16:00]?

I believe that typography has different rendering properties, depending on the type of screen that you view it on so it helps to have multiple devices with different screen densities and different properties.

Jordan Moore: Yeah, sure.  The first thing I’ve come to realize that I have … everything evolved to methods for testing, 2 separate methods, really, for testing both type and layouts. There might be a lot of people that disagree with this approach but I tend to test typography on devices and I test layouts purely — well, mostly — in the browser so just to go into a bit of detail about that.

I believe that typography has different rendering properties, depending on the type of screen that you view it on so it helps to have multiple devices with different screen densities and different properties. I tend to test on an iPhone, a couple of Android phones with different densities and even test on a Kindle as well. That’s one of the old Kindles, which was just pure black and white, just to get an idea of the kind of vast landscape of typography that can appear across each different devices and I’ll leave all my layer testing to the browser because I find that when it comes to mobile, there’s not any mobile — or modern mobile — browser that gets layout so badly wrong that you don’t have to refresh it every minute to see if my changes work on a mobile device.

I find it as much more efficient to test that from another browser window and scaled up instead, but yeah, for typography, I keep checking mobile devices because they could be quite particular about how they render type, as well as desktop browsers as well, between Firefox, Chrome, and Internet Explorer, they all render the same font very differently.

Justin Avery: Do you find it because the different density displays for desktops as well? While the retina displays for, say, the Macbook Pros [00:18:00] or things like that; does that have an effect there or is it just type is type and it’s more vector-ish?

Jordan Moore: It does, I guess. It’s probably just time to, “Do you mind the pixels that they’re packing in the screen?” I find that retina Macs, the type can look a lot more crisp, but, at the same time, it’s almost too dense for its own good, if you know what I mean sometimes? Because fonts can either lose a bit of width, not in a good way, or else in some cases, actually, with some of the cheaper fonts that might come free with services like Google Web Fonts, those kinds of screens expose maybe some of the type’s flaws a bit more, or you can see maybe something — some pixels haven’t been hammered in quite correctly by the type designer. Then some things start to get really interesting, when you can pick up on those little feature.

Justin Avery: Are there any … bland iOS site asking this because there’s really blanket rolls but testing across the different devices, like from your iOS and your different iPhones and tablets and Androids, are there any particular lessons that you’ve learned, which is a given? You know how when we’re talking about people might be more used to doing this with layouts then they know certain problems in certain browsers with layouts, so you’ve just become used to building things in a way that avoids those problems. Are there any similarities when it comes to picking type?

Jordan Moore: I guess the biggest gotcha, which I realised when I was working on one of my side projects called TinyType. For those who don’t know, TinyType is basically a one-page website that I’ve put together that is basically like a reference table that lists all the available system fonts that are available on iOS [00:20:00], Android, Windows Phone, and I think Blackberry is up there as well.

It’s basically like an experiment just to see if there’s any consistency between the default system fonts that are preloaded with these mobile handsets to see if we could pare back the amount of web fonts that we’re loading and it was really just a way of seeing if we could save a few kilobytes. What I was surprised to learn when I put that together was that Android actually only shipped with 3 fonts at the time.

Justin Avery: Really?

Jordan Moore: Yeah. Droid Sans, Droid Serif, and Droid Mono, possibly. Then, if you’re lucky, if you get Ice Cream Sandwich and up, you get Roboto with that as well. A whole [force bump 00:20:48], so that was one of the big [gotchas 00:20:52] I find, that it wasn’t even CFTAs Arial on your web designs and for it reliably render across mobile operating systems and desktops. It’s something that we had maybe taken as a given before we started designing for these newfangled smartphones and before we started going down the responsive design route instead.

Fonts like Arial, Tahoma, Verdana; we just expected them to be omnipresent and work everywhere when they actually don’t, so the only way to consistent typography I find across mobile devices is through web fonts themselves. It only becomes a problem when those webfonts don’t load and you have to rely on your fallbacks because in Androids, that’s really not going to give you much help for fallbacks, whereas the other operating systems like iOS, Windows Phone, etc., they’ll give you a bit more help.

Justin Avery: They’ll give you some nicer things.

Jordan Moore: Yeah. Pretty much the set that we’ve been used to. I think there’s something like 200 typefaces, or at least 200 typefaces, available out of the box on iOS, iOS 7. Yeah, it’s pretty cool [00:22:00]. Then Windows significantly less; I think it’s maybe by 15 or so, but amongst those fonts between the two, there’s consistencies between-

Justin Avery: Good solid ones, like Arial, Helvetica.

Jordan Moore: Yeah. Not in Windows case — Windows will run with Arial. They’ll ignore Helvetica as a bit of an Apple thing.

Justin Avery: Yeah.

Jordan Moore: Then both systems will give you Tahoma, Times New Roman, and things like that, and Georgia. When it comes to Androids, they’re just not there and I just find that a really surprising fact. It was just something I’d grown to accept down the years. It’s just an expectation that these fonts will be there.

Justin Avery: Because Android have such a large use base — huge number of customers visiting websites and stuff — do you then change your approach of when you’re designing, so when you’re testing the type and stuff, will you start with the Droids or the Robotos and then also have the fallback to Arial or Helvetica when you’re booting the sites, or do you not even go so far as then just say Sans Serif or Serif as the last one and start with that and get your line heights and font weights and things — I’m crap with typography, you can tell — but do you start that way or do you avoid that and just let people fall back to [crosstalk 00:23:31] stuff?

I’d rather put more of an emphasis on the type that I’m loading into my work and ensure that it’s perfect, rather than loading up with maybe unnecessary stuff, like extra images.

Jordan Moore: Yeah. I’m still trying to have the fallbacks in place for the other systems. For Android, I’ve just come to terms with it — those fonts will never be achievable on their systems so they just got whatever the default Sans Serif is and I think that is Droid Sans, if I’m using Sans Serifs. Yeah, it’s one of those weird things. I really put an emphasis [00:24:00], more of an emphasis, on type over any other asset that I load into my designs. I find that it’s probably the most valuable asset that we can load into our sites, apart from the content itself, obviously.

There was a tweet, actually, from a guy called Alex Morris who works for Adobe. I think of maybe Greg Story as well, and he said something along the lines of, “I’d rather lose an image than compromise on typography,” and that really stuck with me. That if he’d rather save maybe, say, 90 kilobytes of an image, I’d rather put more of an emphasis on the type that I’m loading into my work and ensure that it’s perfect, rather than loading up with maybe unnecessary stuff, like extra images.

Justin Avery: Yeah.

Jordan Moore: I find those probably otherwise, you can save kilobytes, rather than look into … cut type. Type is a pretty bad culprit when it comes to page weight. There’s a lot of characters and a lot of things to load in and they do bear quite a lot of weight but I still feel that they’re the most valuable thing that we can load in except for the content itself.

Justin Avery: Around the performance side of things, because that was another big topic, that people are really interested in. I remember reading an IA — Information Architect, IA.net — about typography being 95% of the web, so it’s fundamental in web design and also, these days, more and more performance is fundamental in web design as well and the size that we’re trying to deliver to the people that read them. Are there any tips or implementation techniques that you have been following around getting a really great responsive type and really great typeface and also being really performance as well?

Jordan Moore: It’s a very, very tricky balance. I find that the best thing you can do [00:26:00], I tend to not really compromise on the type much, but the best thing you could probably do is step before you get into the browser, if you happen to design in an [inaudible 00:26:12] Sketch or if you’re using TypeCast for building a design system, is to have all your layouts side by side and just see what the roles of all the typefaces that you’re loading into your design are playing.

I find that a new typeface or a new weight of type almost says a different message, so if you have your base fonts — let’s say Open Sans, for example — if I’ve got another weight of Open Sans loaded in as my body fonts, maybe I want to have a headline that has a different tone, like a more important tone, than I’ll bring a heavier weight of Open Sans. Then I question, any time I’m loading an additional weight or additional style of those fonts because I think, “Well, what makes the message different than this paragraph and this heading? What makes [inaudible 00:27:02] tone different, enough to load in a separate font for that?” So I’m quite strict with the ones that I load in as well, just to make sure that they’re consistent, they’re optimised that way, but they’re pared back so there’s no unnecessary typefaces coming in bloating the page because loading extra typefaces stocks up pretty quick.

Justin Avery: Yeah, and what would count as an additional typeface? Is it weight-based or is it also italics as well? Does that count as different, or obliques? Is there a difference? What is the difference?

Jordan Moore: Between italics and obliques?

Justin Avery: Yeah.

Jordan Moore: Don’t question me on that because-

Justin Avery: Okay. Let’s skip that.

Jordan Moore: You’ll expose the lie that I actually don’t really know what I’m talking about.

Justin Avery: I just assumed it’s the same thing, it’s just a different property. Not property; different part of the [00:28:00]…

Jordan Moore: Yeah, like …

Justin Avery: When I include them, and I often wonder, I try … Like I said, I’m no good with typography, and I’m no good with design; I work with designers but they sometimes come back with like, “There’s open lights and open, like, ultra light and then they’ve got Open Regular and Open Sans, Semi-Bold and Open Sans Bold” and I would say questions like, “Do we need all of them? Do we, really? Can I just get by without them and like make it smaller instead of lighter?”

Jordan Moore: Yeah. It is one of those things. I know that most font services, that when they serve up their fonts, they do kind things like italics is an extra chunk that I ask to load into your page because there can be … it’s often not as simple as … I think this is the difference between obliques and italics, actually, and I’m going to say right now.

Justin Avery: Awesome.

Jordan Moore: Yeah, so here it is, and feel free to correct me, everybody, on Twitter. I believe that if you just take a font, like say we’ve just loaded Open Sans into our kit for that website and we put a CSS italic on Open Sans and it just simply tilts the font because we don’t have the italic variant of that font. That’s an oblique instead of loading in a separate maybe …

Justin Avery: An actual …

Jordan Moore: Yeah. A font that’s actually drawn for displaying that typeface in italics, if you know what I mean.

Justin Avery: You should always use italics in your CSS as rule then?

Jordan Moore: Yes.

Justin Avery: If it’s specifically designed for it?

Jordan Moore: Yeah, exactly, because the type designer might hunt you down if you just try and slant the font to make it look …

Justin Avery: Slightly.

Jordan Moore: Yeah. I think you might get into trouble with the typographer if you do that [00:30:00].

Justin Avery: That could be a way, if you were really struggling with page weight. Again, I know this isn’t for you because you would rather not compromise and just load one less image, right, in your entire site?

Jordan Moore: Yeah.

Justin Avery: You could technically run with obliques over italics. That way, it would just slant an existing type that you have there so you don’t have to load the other one.

Jordan Moore: Technically, you could, I guess. There’s a lot of typefaces that, to be honest, their italic variants don’t look a lot different than the obliques so you could probably get away with it in some cases but where it comes to more fonts like Serif-style fonts like Tiza, where the italics might be drawn a little more script, have a little more [inaudible 00:30:48].

Justin Avery: More details, really.

Jordan Moore: Yeah. That’s where you start to notice it.

Justin Avery: Especially if people are likely to have a retina display or imagine that stuff is really going to show up.

Jordan Moore: Yeah, it can expose the lie about more than …

Justin Avery: Have you looked into … I saw an article recently. Who’s to talk vitally from Smashing Mag was talking about loading fonts into local storage and stuff like that. Have you looked into that?

Jordan Moore: No, the only reading I’ve done that is actually around Smashing Magazine’s experiments on it because it sounds really cool to prevent that flash of un-styled text where it may occur when your fonts haven’t quite loaded in yet and you get a blink of the default Sans or whatever your fallback fonts are before the browser can actually load in the nice web fonts. Yeah, his approach is basically a kind of load those type faces on the first load and keep that in your local storage so that for every subsequent page that you visit on the site, your type loads really quick. I think it’s a really good idea.

Justin Avery: Yeah, cut down on [00:32:00] … [inaudible 00:32:04] which is one thing which people try. Now, with the flash of un-style as well, or trying to get things a little bit more performing, have you bought into or tried out the whole critical CSS in the head, trying to get it within that first 14 kilobytes of loading a page and then conditionally load the rest of your CSS? It seems to be something which is picking up a bit more momentum these days.

Jordan Moore: Yeah, I’ve heard people talking about it. It’s not something I’ve tried myself but I can see the value in doing something like that. Are they saying though the load the stuff inland styles or just …

Justin Avery: Yeah, in the head, but I’ve always wondered though whether or not that would have a knock-on effect if something, like if you’re including web-based fonts, if you’re including something like a font that’s not a system font, how that then performs as well? You can’t really load all of those in within the first 14 kilobytes so then your text is effectively not going to pick up that style.

Jordan Moore: Yeah, I guess you might rarely see much of a benefit of doing that, if your CSS is raising against your type that’s being loaded in, you might not actually see a benefit from doing that. It might actually just become more of an admin nightmare, really, to try and if you made some sweeping typographical changes, then you have to try and find these pages that have the type [crosstalk 00:33:36] it might be tricking.

Justin Avery: Yeah. I don’t know. It’s too new. It’s not new; I was surprised that it kind of … it is new, I shouldn’t say that. If you’ve run pages through Google [Page speed 00:33:55] these days, it comes up with saying you have not inlined your critical CSS in the head of your page. When did this become a rule [00:34:00]?

Jordan Moore: I didn’t know that was a thing.

Justin Avery: Yeah, I’m kidding. Marked down on things I didn’t know how to do. It’s more side projects and investigation, I think, but back, more focused around type stuff now. I’ve had a couple of questions that have come in from readers and stuff which I’ve never really thought I was that well-positioned to answer and stuff, but one of them was around ems and rems and which one would you use when you’d declaring your type and I can see the benefits of both sides but I was wondering if you have a favorite and why.

Jordan Moore: Yeah, so there definitely are benefits to using both [inaudible 00:34:43] something I’ve been experimenting with recently is using both to try and control typography between screen sizes or break points, whatever break points you might have, so you might end up in a situation where you want to do some site-wide scaling of type depending on the size of your browser window but there might be some fonts that you might not want to scale up. Traditionally, you would have set those in pixels and they would have just stayed as they are and avoided all sorts of scaling.

If you are doing site-wide sweeping or sweeping styling changes for font size, I would tend to set those in the body but a lot of people don’t realize that rems, they actually relate to the very root element and that’s the HTML tag, so you can actually set a value in there, which I tend to set as the smallest font size that I want to use. For example, I want to use 14 pixels, that’s as small as I want to go in this site. If I want to retain the size of a font for something like a dent below a heading, if I want to have to stay as 14 pixels regardless [00:36:00] of the screen size, I can just set that to 1 rem and set the rest of the sites in ems and it will all scale up nicely and that 14 will stay routine or stay in pixels. I tend to mix and match the two.

Justin Avery: That’s such a good idea to use that.

Jordan Moore: Yeah. I’m writing an article on it at the minute, actually, so I’m going to try to explain a lot better, obviously, on paper than I’ve just explained it, probably with a bit of a visual demo as well. Yeah, I tend to talk a lot in my hands and I’m waving my hands a lot but people can’t see that.

Justin Avery: Looking off in the distance somewhere.

Jordan Moore: Yeah.

Justin Avery: You can have a challenge and you can try and explain it in a tweet.

Jordan Moore: Yeah.

Justin Avery: It’s much harder to do, isn’t it?

Jordan Moore: Yeah. We need responsive tweets, I think.

Justin Avery: I think MailChimp. I love MailChimp. It’s my best friend everyday. It’s my best friend and worst enemy every Thursday night, while I do a newsletter. It pops up as this high five at the end of it but they’ve got these responsive tweets which come back, so if I’ve got a problem with MailChimp, they reply, which is like a long reply but it tweets you the first snippet and then sends a URL to the longer reply.

Jordan Moore: Cool.

Justin Avery: Yeah, it’s quite good, so you get the first bit and then you’re like, “Oh, I can see the rest.” They’re still using social media so they can be seen to be answering your questions. They are very good, though, actually, if anyone ever decides to do anything email-y, I would highly recommend MailChimp. They’re awesome.

Jordan Moore: Yeah. Both MailChimp and Campaign Monitor I find have been very good. They’re really doing hero’s work. Email templates are best friends in the world. That kind of work is pretty difficult. As you know, once you get that first email template set up, you’re fine, but getting there …

Justin Avery: Yeah. It’s a nightmare [00:38:00].

Jordan Moore: Yeah.

Justin Avery: I spent a fortune on Litmus.com trying to test out the newsletter template that I have now and that was almost 2 years ago and I’m too scared to go back and make any alterations. It’s a bit tired and all but I don’t want to go back.

Jordan Moore: Yeah. It’s one of those crazy things. I think my test environment was load browser stock or load an Android phone and browser stock, and then maybe set up an email account on an Android phone or one of the ones I don’t own. If it’s a smaller screen or a larger screen, just to test, to see if the responsive email works in that phone. Then after 5 minutes, if I left the screen any longer than 5 minutes, it would time out and then I’d have to log back in again, set up another email account.

Justin Avery: No.

Jordan Moore: It’s crazy. It will put years on you, if you’re doing too many email templates.

Justin Avery: They are.

Jordan Moore: It’s not healthy.

Justin Avery: They are horrific. It can be worse sometimes. This is just a thing, which unless you have experience in so I’m not knocking the designer because the designer I worked with for the responsive site was awesome and I love the way that she came back with, but I asked for an email template as well. It was beautiful; it was so nice, it was so lush, and then I went to implement it. You can’t do it. It’s not even figuratively impossible; it’s literally impossible to implement this design. I was like, “Why? Why email?” Shaking my fist.

Jordan Moore: Yeah, especially if it’s a responsive on it. Just takes all the fun out of any kind of nice design that you had and just hammers it into a plain old, text-based email. A lot of people as well, “Just use plain texting. Just use plain text.”

Justin Avery: Yeah. Absolutely.

Jordan Moore: Try telling your clients that.

Justin Avery: Look at how accessible it is. Yeah, where’s the branding?

Jordan Moore: Yeah, exactly. It looks like hackers just sent me an email [00:40:00].

Justin Avery: Click on this and download. I need to transfer some money.

Jordan Moore: Yeah.

Justin Avery: One and a half million in, yeah. That’s how they work.

Jordan Moore: Congratulations, dear friend.

Justin Avery: Yeah. We digress.(laughs) One of the other questions that did come through was, and you were just speaking about the HTML and body font size as well. Doing those sweeping changes across the different break points, if you start a mobile and started moving up, do you change … I suppose there’s 2 bits to this. One, do you change, have sweeping changes on your scale, like your type scale, for each break point? Is the first part and then the other is that … do you that first? I’ll come back to the second part.

Jordan Moore: Yeah. That’ll be too much for [inaudible 00:41:00].

Justin Avery: Yeah. I’ll forget and I’ve got it written down.

Jordan Moore: The sweeping changes, yes, I guess. I’m a big fan of Ben Callahan’s article There is No Break Point where he suggests during lots of little break points, minor break points, instead of doing major break points that have [inaudible 00:41:24] for people that are new to responsive web design, they tend to do a mobile and do a tablet break point and do a desktop break point. I tend to do things a bit differently, where I’ll maybe base my break points on the element that I’m designing, whether that’s a piece of paragraph text or if it’s like an element, like navigation.

If I need to start collapsing at different sizes, I’ll base the break points on those individual elements than just start them for those elements instead of sweeping ones, but when it comes to type, my break points, they do get a bit larger where they might be [00:42:00] fitting some more arbitrary states I guess. I use a thing or a technique that Trent Walton wrote about a while back called Fluid Type. I don’t know if you’ve seen that one before or not.

Justin Avery: Yeah. No, I’ve covered it but I can’t recall the details.

Jordan Moore: Cool. Basically, Trent has this testing technique, where he puts an asterisk at the 45th character and at the 75th character in his main chunk of paragraph text. What he does is he checks to see if both asterisks are on the same line or if they’re too many lines apart, like, say, if you’re 2 or 3 lines apart, if they’re met multiple lines apart, then that means that the reading length is too small so he can either change the font size or change the container width accordingly so that they both appear … they’re both not supposed to appear in the same line. If they appear in the same line, then the reading length is too long. The optimal state, I guess, is when the 45th and the 75th character are on 2 separate lines.

Justin Avery: Yeah.

Jordan Moore: Just about, so that’s the kind of the technique I use for sizing fonts, so I’ll start to stretch a browser window until it hits one of those parameters and then I’ll bump the body font size up or take it back down again until it’s at a comfortable reading length, but one of the things I find with that technique is that that helps decide your optimum reading length so on mobile, you can’t quite get the 45th character on your first line because, obviously, the screen space is so small in most cases so I come to the terms with the fact that there’s no optimum reading length on mobile. The best you can do is get as close as you can to that and make sure that the text is legible and try it in for reading comfort, rather than optimum reading length at that size.

Yeah, basically I just stretch a browser window and just see when [00:44:00] those asterisks break the rules and bump the font size up accordingly. I tend to [inaudible 00:44:07] as well, obviously, or else we could be stretching browser windows all day and have giant lettering that we could see from space.

Justin Avery: It’s like it’s yelling at you.

Jordan Moore: Yeah, the bigger the font, the more it screams at you.

Justin Avery: It is weird you would always caps lock it at all. It is weird, though. I was reading, someone was talking about the size of the screens and stuff and there is a point when the screen gets to a certain width where the reading length of it is further away so like on a television, for instance, your distance away from the object that you’re reading is more than what you would be doing on a computer so the type has to be so much larger, and so your line lengths might actually shorten because you’re seeing further back.

Jordan Moore: Yeah. We do actually have a TV media query somewhere, or television media query, I believe for making decisions like that. It’s one of those things that we’re never really going to know how far away our users face is from our webpage and I don’t think we’ll ever be able to reliably style text or size text accordingly. I know that somebody did an experiment on this-

Justin Avery: Was that you that did that experiment? Was it someone else that did that sort of face detection?

Jordan Moore: Yeah, somebody beat me to it, actually.

Justin Avery: That was quite cool. You should claim it totally. I would have believed it.

Jordan Moore: I can’t, Justin. This guy got in the front page of Hacker News and he was on The Next Web and everything, and I was cursing the screen, going, “I have the code setting here! I was just getting started.”

Justin Avery: That was quite clever though, right?

Jordan Moore: It was cool. It was.

Justin Avery: How are you doing that? You were going down the path of doing this when this guy just jumped in.

Jordan Moore: Yeah, so basically I just learned about this new property or this new technique where you could pick up on the input from a user’s [00:46:00] webcam via an [app 00:46:04] called Get User Media, I don’t know if this is changed because it’s probably a couple of years ago, maybe, we’re talking about. Maybe a year ago. It probably has changed, going by how specs changed, but basically, the idea was that once you have that feed of somebody’s face, then you can start to using different libraries, draw around the shape in their face, and use a bit of math to detect how close to the camera they are or how far away from the camera they are and size type accordingly.

I don’t think it’s ever going to be a really practical solution. I don’t think, if somebody is pulling a phone close to their face, it’s maybe because they’re having difficulty reading anyway, and maybe ballooning the font size isn’t what they want to happen at that stage. Could be just that the font size is fine but their visions maybe not geared up to see something that far away. They just want to un-blur it, if you know what I mean.

Justin Avery: Or it might be really glarey and they’ve got to cover their phone and look in really closely just to see the text on there.

Jordan Moore: Yeah, and then they get this jumbo type.

Justin Avery: It’s interesting though, right?

Jordan Moore: Definitely.

Justin Avery: It’s really cool stuff that people are doing at the moment. That’s why quite a few of your different experiments, you had a fixed height, scrolling experiment as well with type to make it almost like a book reading … you didn’t scroll vertically; you scrolled horizontally, right?

Jordan Moore: Yeah, like I’ve got some really stupid experiments that should probably never be used in websites but, yeah, one of them was to try scrolling along the x-axis instead of the y-axis that we’re used to reading on the web because it was something that’s [inaudible 00:47:51] he’s a Norwegian guy I think, or he’s somewhere in Scandinavia, a guy called Johnny Corby.

Justin Avery: Yeah.

Jordan Moore: His name is probably [00:48:00] pronounced differently and I’m-

Justin Avery: That’s how I’d pronounce it but so sorry, Johnny, if it’s wrong.

Jordan Moore: Yeah, or however you pronounce your name, and he was basically saying that he was bored of web designs that just went up and down and we should try and break out of this boundary and do something a bit different and that kind of spurred me on to try and make a horizontal website and try and make it responsive as well, at the same time, but vertically in terms of the screen width as well. I was surprised that I got to the end result without any kind of Javascript text but it can be done eventually in native CSS. It’s probably not production-ready because it uses a lot of columns and column breaks and questionable positioning.

Justin Avery: It works. It works in the case.

Jordan Moore: Yeah, and some browsers don’t test it [inaudible 00:48:58].

Justin Avery: The thing is all about trying these things, right? Checking what the boundaries are, seeing what you can do, and then working out maybe how to progressively enhance it, so everyone gets maybe a x-axis scrolling content and, if they have this particular flavor of browser which does support the move and yeah, go horizontal.

Jordan Moore: Yeah, absolutely, and maybe if they are using a browser that doesn’t support that, maybe they just don’t deserve a horizontal-scrolling website.

Justin Avery: Again, we go back with that message, is please download a browser that makes it scroll horizontally.

Jordan Moore: Yeah [crosstalk 00:49:36] 800 by 600. That skipped.

Justin Avery: That would be crazy. We’re coming at the end of the podcast, which is a shame because I can just keep asking you a ton of questions, but I do have one particular question which Patrick Hamann asked. With each podcast guest I have on, I ask them to ask [00:50:00] a quick question of the next guest, which I will do of you in a sec, but of course, having said that, I also have a question for you from the last one.

Jordan Moore: Okay.

Justin Avery: Now, Patrick’s really difficult. Patrick got one from Brad Frost about staying on top of the industry and how do you choose which technology to go with and which one to leave alone. There’s been some tough ones.

Jordan Moore: I’m really nervous.

Justin Avery: You should be so worried, but what Patrick wanted to know was what is your favourite CSS property? See, it’s not a difficult question but it’s hard to answer at the same time, to come up with a decision.

Jordan Moore: Yeah, because there is so many.

Justin Avery: His choice was box sizing border box.

Jordan Moore: Yeah. That’s a really good one.

Justin Avery: That’s been taken now so you can …

Jordan Moore: Yeah, that’s really good. I was going to say flex box but there’s so many extra things; you have to go flex box before you actually see a result out of it. I’m going to say display inline-block.

Justin Avery: display: inline-block.

Jordan Moore: Because it saved me from the world of floating layouts. Instead of laying everything out by floats, last year, I decided to display in line block everything and websites flow a lot better. You’re not taking users out of the flow of the content, as you were when you were floating things, and it just creates a lot less browser problems so I’m going to say in line block for now.

Justin Avery: I like that answer because I can follow it up with an intelligent anecdote / question. I was at work the other day and we were working on someone’s navigation, and the client was in and one of the front end devs said to me, “Look, we’re trying to achieve this. What do you think [00:52:00]?” I said, “Just float it left,” or do … I think I just said float it left. He said they’ll only inline block but it’s giving these spaces in between each of them. I do remember seeing something there, if you have white space in HTML, you get white space in between the inline block elements so you have to remove that. That was true. I think it was a CSS Tricks article, which, if you just have a CSS problem, that’s where you go.

Jordan Moore: Absolutely.

Justin Avery: It’s just stuck in my mind, so how do you get around that?

Jordan Moore: When I first came across it, I did what I typically do and bashed into Google, and then I saw Chris Coyler’s page just at the top of the search results [crosstalk 00:52:45] yeah, you’ll know everything’s going to be okay. I probably went to the same CSS Tricks article as you and I opt for commenting the white space so you can still keep the shape, roughly keep the shape of your HTML and your code, so it’s nice and readable but at the same time, eliminating those white spaces.

Justin Avery: That’s nice. I think in the same article or perhaps someone followed it up was inline blocks and elements but then use flex box to stretch it out over the area so it fills in that particular area. Now I thought that you didn’t need to use inline block if you’re going to use flex box to stretch things out but I need to look into that a bit further.

Jordan Moore: Yeah. I need to look into that as well because really, my only experiments I’ve done with flex box are when I have been stacking flex box elements or box elements or block elements on top of each other, instead of along the horizontal axis. I’ve just really been changing like force ordering things I got using different flex box properties up and down the page instead of from left to right. Yeah, I want to look into that one too because I still have to resort [00:54:00] to the old cheeky float here and there where I might want to anchor something over to the right or anchor something to the left, where an inline block might require a bit of a [inaudible 00:54:12] that pushed that element across the other side of the page so yeah. I’m going to have to look into that too.

Justin Avery: I’m all about the float and :nth-child.

Jordan Moore: Yes.

Justin Avery: That’s where I’m at, so it doesn’t support everything but I don’t get to work on client work anymore so all my side projects are floats and :nth-child’s. I’m sure someone will tell me a better way on how to do that eventually. Until then, that’s how I’m doing it.

Jordan Moore: If their browser doesn’t support :nth-child, maybe they just don’t deserve it and it floats to the right.

Justin Avery: I’m going to have a message that just comes up and goes “sorry“. They’ll just basically stack poorly but the content is still there, right? That’s the most important thing.

Jordan Moore: Isn’t it.

Justin Avery: Before I wrap up and thank you again, what’s your question for our next guest? If you can’t come up with one off the top of your head now or something, a burning web design or responsive design question that you have, you can always flick it to me afterwards and I’ll include it in the show notes as well.

Jordan Moore: Okay. I think I got one, though, albeit a different spin on the one that I just got and say to the next person, so what is your favourite HTML element?

Justin Avery: Nice.

Jordan Moore: Yeah. See what I did there?

Justin Avery: I see what you did there. Flipped it on its head.

Jordan Moore: Yeah.

Justin Avery: That’s absolutely awesome. For listeners out there, if you have liked, which I’m sure you will, the stuff that Jordan’s been talking about, if you go to JordanM.co.uk, is that JordanM [00:56:00] — for Moore –.co.uk and check out what he’s been writing. Your experiments aren’t there anymore. I can’t see a link for your experiments. Are they hidden? Have you …

Jordan Moore: You could probably still find them at JordanM.co.uk/lab. I forgot to put a link in to my new design, actually.

Justin Avery: Yeah, definitely put the lab back in there because I went hunting for showing some of that horizontal scrolling thing; I’m like, “Damn! They’re gone.“

Jordan Moore: Yeah. They’re still there, hidden in the code somewhere so, yeah, I’ll put that link back up for you.

Justin Avery: That would be awesome, and the other thing which I would recommend people doing as well is that Jordan has, he doesn’t know I’m saying this, but has recently opened up his site of a few more ambassadors. I was lucky to become an ambassador a few years ago after he did the interview series, but go along there, become an ambassador for the site. You get a little picture of yourself there and the link back to your website and you’re supporting some really good side projects and some excellent writing as well. Yeah, go and check that out. By the time you hear this, it may have already closed so it’s only open for a short time but go and check that out. Jordan, is there anything else? Have you got things coming up now? You mentioned you have a blog post coming out shortly about the rems and ems stuff; anything else happening in the world of Jordan?

Jordan Moore: That’s about it. Just that upcoming blog post, I’m afraid. My life is quite boring outside of the web so nothing crazy to report. Just keep your eye out for that blog post, probably coming in the next couple of weeks over on the TypeCast blog.

Justin Avery: I was just going to say, do you have any other seminars coming out? Because I felt really bad; I registered for the seminar and then I was booked into a meeting so I didn’t actually get to sit down and go through that typography seminar. Have you got any more of those coming up or was that one recorded [00:58:00]?

Jordan Moore: Not planned as of yet. There’s talks about maybe doing some with the company I work for, a company called Eyekiller, based [inaudible 00:58:14] in Northern Ireland. We’re maybe thinking about doing our own seminar series and we’re thinking of maybe trying to host our own conferences, instead of booking an arena somewhere that people have to … Not an arena, sorry. A room somewhere that have to travel to and make those kinds of arrangements. That we can just put it on the web and people can come and experience it in their own time so we’re hopefully looking to do something maybe by the end of the year in regards to that, or else early next year.

Justin Avery: That’s awesome. Please do keep me in the loop about that and I’ll make sure I scream and yell and I’m in London, so maybe I can come across. I love Ireland and Northern Ireland; it’s a great place. Good Guinness.

Jordan Moore: Yes, very good.

Justin Avery: Thank you very much for joining us again, Jordan. Thank you to all the listeners for tuning in or downloading and subscribing to the podcast. We’ll be back next week with another exciting edition with someone else. Thanks, Jordan.

Jordan Moore: Thanks, Justin.

Justin Avery: Cheers, bye.