Paul Boag: Hello. Welcome to BoagWorld.com, the podcast for all those involved in designing, developing and running websites on a daily basis. My name is Paul Boag and I’m being joined today by Marcus of Lillington.
Marcus Lillington: Hello Marcus. Of the Lillington clan.
Paul: Yes. I think I’ve done that joke before actually. Often 200 plus episodes.
Marcus: You did the intro slightly different as well.
Paul: Did I?
Marcus: I don’t know how. I was different.
Paul: It wasn’t.
Marcus: It was.
Paul: Hello. Hello. Welcome to BoagWorld.com, the podcast for all those involved in designing, developing and running websites on a daily basis.
Marcus: The end, designing, developing …
Paul: I always say and. What are you talking about? Shut up.
Marcus: I come from a slightly different universe this morning obviously.
Paul: And as well as Marcus Lillington, we also have Dan Sheerman. Is it Sheerman or Sheerman? I don’t know how to say it.
Dan Sheerman: It’s Sheerman.
Dan: It’s got two E’s.
Paul: I suddenly had a panic about it as I said it.
Marcus: As it’s written, Paul.
Dan: As it’s written, yes.
Dan: I get called Sherman a lot in the West Country. I don’t know what …
Paul: Yeah, that sounds about right. So Danny is out latest addition to Headscape. And we’re talking about this week we’re talking about HTML and CSS and stuff like that. He is our friend and codey guy.
Dan: I am.
Paul: So we thought we’d get him on the show.
Marcus: I looked through the notes actually and I’m not sure why I’m here.
Paul: You’re here to fiddle with knobs.
Marcus: Okay. Really? Okay.
Paul: Well, of the sound desk, by the way.
Paul: So, yes, Dan will hopefully have something intelligent to say as Marcus obviously won’t. Have you got anything intelligent to say?
Dan: I don’t know. We’re soon going to find out.
Paul: Yeah. Worst still is Dan has never listened to this show, which is a travesty.
Dan: I know. I might bring something new to it or is it a travesty?
Paul: I don’t know.
Marcus: People who work for Headscape must listen to the show.
Paul: They’re supposed to. It’s compulsory. We have a Monday morning session where everybody sits around in a circle on the mats with their little half pint of milk or pint of milk and they have to sit and listen to a story by Paul.
Dan: I’ve never been privy to that. I can’t say that I’ve ever …
Paul: Are you divorcing yourself from that particular thing?
Dan: Yeah. Apart from this one, I’m definitely going to listen to this one because like you, I love the sound of my own voice.
Paul: How true. Okay. I see how it’s going to be then. So this week we are looking at the subject of HTML and CSS. Really, we’re looking at the build. We’re look at – What I’ve been tied to is an old guy’s guide to building modern websites, which is possibly based on the fact that I haven’t coded anything for bloody ages. So working on Boag World was a bit of a shock to the system really. But then I guess when you’ve got a talented bunch of coders, obviously Dan is excluded from that, you don’t tend to code yourself. There are other people to do it for you. I have minions for that kind of thing.
Dan: You have me for that kind of thing.
Paul: Well, there are other people that code in the company, but mainly you.
Dan: I’m obviously the best at it.
Paul: Oh, well, you better be considering no one else is as dedicated to that job, although recently, you have been doing Magento.
Dan: I have.
Paul: Which has got a lot of evil there.
Dan: It’s been lovely on the first project.
Paul: First project working on Magento. Didn’t, as you say, your interview how you hated Magento?
Dan: I think I’m convinced this is some sort of payback. I think in the interview you briefly mentioned you were doing a first Magento project. I believe my exact words were, “Oh, good luck with that.”
Paul: Yes, it was. That was it.
Dan: Yeah. That worked out well for me hasn’t it?
Paul: It has. One day you’ll get to work on something else.
Dan: Yeah, hopefully.
Paul: Obviously, we will move on from talking about Magento. Yeah, so, well, you’ve got a lot of other coders. You don’t have to code yourself. So I was determined on Boag World that I was going to do the majority of it. Did I just say majority of it?
Marcus: I was going to say that’s unlikely, Mr. caveat over there.
Paul: Well, Leigh is potentially going to get involved with it.
Paul: Helping with some of the responsive stuff. Otherwise the site is never going to get freaking done.
Marcus: Yes, fair enough.
Paul: It’s turned into this never ending project because I have other things. People keep wanting to drag me to pointless meetings, Marcus Lillington.
Marcus: They’re not pointless.
Paul: Were not at all tense this morning with one another. Right. So there are a couple of reasons why I wanted to do this. First, I believe it shouldn’t just be designers that code. There was I think, Elliott Jay Stocks. Did you see that one on Twitter?
Dan: I did. I’ve seen a lot of it on Twitter.
Paul: He stirred up a hornet’s nest.
Dan: Yeah. I think we’re about to have another hornet’s nest.
Paul: I am. I’m going to make it worse. So he said, “I’m honestly I’m shocked that in 2010 I’m still coming across web designers who can’t code their own designs. No excuse.” I actually do agree with. It doesn’t mean they should code it, but they should be able to code it if that makes sense.
Dan: Not necessarily.
Paul: You just screwed up?
Dan: I kind of do.
Dan: I don’t see that people should really give too much for monkeys of whether the designers should code their own designs or not. Granted, if I was sort of in a hiring position, I have two designers with equivalent talent and one of them could code and one of them couldn’t, I would hire the guy who could code. I don’t see it as being essential that designers should have to code.
Marcus: Neither do I.
Paul: I agree with that in the sense that I would be quite happy to have a designer that just pumped designs to you and you coded it.
Paul: Obviously, I’m happy with that otherwise I wouldn’t be employing you. But I think they should still know, be able to do it if push comes to shove.
Dan: The words no excuse are ones that I don’t agree with.
Paul: Yeah. Right.
Dan: It’s the say that someone who’s come from say a print background is completely unable to design a usable web interphase is wrong basically. Ideally, yes, they should be able to code it themselves, but it’s not black and white as anything in life.
Paul: My wife has worked through in Lloyd’s book, which is Building Websites the Right Way Using HTML and CSS. The longest title for a book ever. She could do it. So really, what is the excuse? You could build a website.
Marcus: Yes, I know, but that’s therefore a little bit hypothetical, but I just don’t like black and white statements. Chances are …
Paul: That’s a black and white statement you just said.
Marcus: I don’t like black and white statements, but maybe sometimes I do. You know what I’m saying.
Paul: I do know what you’re saying.
Marcus: I agree with you because, yeah, it is bloody – Even if I can do it, blimey.
Paul: We’re talking about markup here. We’re not talking about C sharp or something. I don’t even know what that is. Is that a musical thing or a coding thing?
Dan: I believe it’s a coding thing. I think it’s a programming language.
Paul: It’s also a musical thing.
Marcus: There is a note C sharp.
Paul: Yeah, see there, I wasn’t wrong. Right. Well, what’s this got to do with anything? Oh yeah, I was saying the reasons why I should build Boag World, I just think it’s really important for me even though my job is no longer building websites. I understand. I think for me the expectation is a bit higher. It’s not like for you where you just need to know the basics. I want to be able to know the latest techniques even if I’m not implementing them myself on a daily basis.
Marcus: Though it pains me to say it, I think you put yourself down. I know that Charlie in particular, the lead project manager, always loved it when you code things because you’re efficient and you do it well.
Paul: Yeah. I think …
Marcus: It’s painful to say.
Paul: Yeah, I know, it’s painful isn’t it. I don’t think Dan would see it that way if he looked at my code. It’s all relative, isn’t it? What Charlie likes is the fact that I’m good at estimating how long stuff will take and I’ll work fast, which is all the project manager cares about. The fact that what’s behind the scenes is a pile of shit.
Marcus: That’s unfair as well.
Paul: Yeah, that’s not fair on Charlie.
Marcus: He’s moaning about quality of code all the time.
Paul: He is. Yes, he is, he is.
Dan: Especially mine.
Paul: So that was one reason.
Marcus: Another tangent.
Paul: Yeah, that was one reason. Can I get past the first page of notes?
Marcus: I have lots of pages here.
Paul: I know. It’s a very long show this one. The second reason is I’ve just been reading these cool things and I wanted to play. So, well, it’s like the perfect excuse that that’s what I’ve done. So in this podcast all I’m going to do is share my experiences of playing with the new. Dan is going to sit through this whole show going, “I’ve been doing that for five years, Paul.” You can be really smug as much as you want to. This is just the stuff that got me excited.
Now I’m hoping there are some people out there that are just as rusty as me. So this is actually going to be useful to some people. I’m hoping that maybe there will even be one or two things that other people haven’t used that maybe now want to consider using. I think that when I talked about there on the show about display table cell and display inline block. I know some of the other designers haven’t been using that.
Dan: Yeah. I don’t use it a lot, but that’s mainly because I support I7.
Paul: Yeah. That is the next point actually. Well, that’s a segway.
Dan: Yeah. I thought of that.
Paul: That was very professional.
Dan: It’s like I actually read the note.
Paul: It was. Have you? You’re reading ahead now aren’t you?
Paul: That’s what you’re doing rather than listening to what I’m saying.
Dan: You’re not boring me.
Paul: So, anyway, I’m an old guy. I’ve been working with the web since 1994. What were you doing in 1994, Dan?
Dan: Probably learning to crawl. No, I would just have been starting school. I would have been five.
Paul: Oh, no. Oh, kill me now. So I remember when the image tag was the latest thing.
Marcus: I’ve nodded off because I’m so old.
Paul: Oh, yeah. I’m surprised …
Marcus: I didn’t bring a blanket with me.
Paul: So my point here is things have changed a lot since then, but some things never change. One of those things is browser support whether it’s Netscape 2 or IE7, there is always a browser that’s holding us back. That’s why I think it’s so important to look closely at your site analytics before you start building anything. Sometimes, as in my case, you get a nice surprise. So when I rummage around the web stats, as we do or should do – I don’t think we always do it at the beginning of every project.
I discovered some great news. I mean, 9.48% of users were using Internet Explorer, right? Nine percent. Of those, only 17% are using IE7 and 4.56% were using I6. So basically, two percent of total users were using either IE7 or IE6. So I decided to drop support for it. Well, I say drop support, but what I’m going to do is provide them with the kind of anti-clock kind of basic primp style sheet kind of thing.
Marcus: I’m going to share my ignorance now. Doesn’t IE8 have similar drawbacks that IE7 has?
Paul: It has some, yes.
Marcus: Really, we don’t really get free from the nastiness until IE9.
Dan: I never found any massive rendering issues with IE8. If you code it properly, you can genuinely gracefully grade most things. I mean, things like rounded corners obviously are not going to work.
Paul: Yeah. No. The only things that don’t work – Why I decided to do with IE8 because IE8 counted for about 4.3% of users to me. So what I’ve decided to do, because IE8 does poor HTML5 tags I believe …
Marcus: Yeah, fine. That’s great. Lovely.
Paul: So the thing …
Marcus: What’s version 999.1 in your diagram here?
Paul: Oh, in the diagram. The diagram is I have no idea what that is.
Marcus: And 10.
Dan: That’s qute interesting. That’s got to be someone spoofing the user agent.
Paul: Yeah. I just got a screen shot here from my browser stats. The observant person would notice that the information in the browser stats, the image capture, there is no resemblance to the statistics of the actual blog post. That’s because …
Dan: You faked them all for IE7.
Paul: No, it’s because actually the screen shot was taken quite a while after I wrote the actual post. If you noticed, the figures have gone down quite dramatically from 9.48 using Internet Explorer to 7.72.
Dan: What’s a nice number in general?
Paul: In general of Boag World users.
Marcus: So what’s the most popular browser?
Paul: The most popular browser for Boag World is Chrome.
Paul: I don’t know actually. It’s Web Care.
Dan: I mean, you kind of expect that with web development.
Paul: Yeah, yeah, absolutely. Yeah, yeah. I mean, you would argue, Marcus.
Marcus: Would I?
Paul: Or you have in the past that the trouble is the people we’re trying to reach from our business perspective, which is our website owner type people, are the ones more likely to be using Internet Explorer. Actually, we’re only excluding a tiny proportion of those.
Marcus: As long as I can read the articles and long as they can listen to podcasts, fine.
Paul: There we go. And you will be able to do that. So big caveat, admittedly you might not be able to take the position that I’ve taken with Boag World as Dan has already said he doesn’t get that luxury with Headscape stuff.
Dan: Unfortunately, no.
Paul: Well, occasionally.
Marcus: Alright, well, maybe. The majority of the time we can advise our clients and maybe they can make that decision.
Dan: But at the end of the day if the larger percent of your target audience is using it, you want to build it for your target audience.
Dan: It’s stupid to not support it.
Marcus: You got to think to yourself, “Is there a possibility?” Say, for example, with Headscape I’m persuading myself now that we should be providing the full design in I7. But, if you’re selling something that you make 20 sales a year rather than two million sales a year, then you’ve got to ask yourself, “What’s the value of the one person who might because they’re working in a large organization where they still haven’t upgraded passed IE6?” You need to say to yourself, “Do I still need to impress this person with my brand?” For example. And if the answer is yes then you’ve got an issue. I’m not saying that that’s necessarily what we should be doing, but it’s not just about percentage of people. Anyone is using IE6 then you might have to ask yourself, “Well, do I therefore need to be providing a similar …”
Paul: In our case, I don’t think we do. I know we have a smaller number of sales and there is a high value sales so therefore IE6 may possibly win us one additional sale for 30 grand.
Marcus: I don’t think it will personally.
Paul: But the approach I will take is I’m actually going to put – I haven’t done it yet, but I’m will put some kind of message to IE6 users basically saying, “Hey, this is the approach we take. Read this article about it. You’re unfortunate enough to be someone stuck with IE6. I weep for you.” Then what you’re doing is you’re educating the client by the way. So it’s kind of in our situation I think it’s absolutely fine. I do think sometimes you do have to – I mean, you can do a whole show on browser support. I mean, we have interesting conversations about whether you should support the last two versions of the browser or whether the last one and the most popular.
Dan: We had a good chat about the colossal number of Firefox releases that have been happening in the last hour or so.
Marcus: Yes, we’ve had issues with Firefox.
Dan: It’s like when do we drop support for 3.6 because it’s still showing massive stats. It’s now three versions old.
Marcus: Yeah. 3.6 is being used hugely so you can’t drop it.
Paul: No. This is the thing is we were talking about our statement of work and stuff. This is going to be the longest show. We haven’t even moved off the second page yet. The other thing that we were saying is the current statement of work we talk about how we tested rather than support because we try and make everything degrade nicely.
Marcus: Yeah. When we say it will be usable or readable is, in other words, pretty much anything.
Dan: It’s not pixel perfect.
Marcus: Oh, no, no.
Paul: But we test in the last two browsers is normally what it says of each thing.
Marcus: But we can still get to IE7 which is three so.
Paul: Yeah. Also, I think we probably need to change the wording. For example, I can’t even remember the numbers for Firefox at the moment. I’m sure Dan will be able to.
Dan: 6.02 we’re on.
Paul: 6.02. Then there will be one previous to that. But the one previous to that would actually have much lower stats than 3. whatever it was.
Dan: Because of its automatic upgrades.
Dan: So there is probably no one using Firefox 4 because I think there is an automatic prompt to 5 which is an automatic prompt to 6. Youre left with this massive gap that you’ve got to test in 3.6 and 6. It’s kind of weird.
Paul: So it’s not actually you don’t want to do the last two versions of browsers. You want to do the latest, but basically the two most popular versions.
Dan: We noticed an issue with Firefox 6, the newer version, on Vista.
Dan: How are you going to test that?
Paul: Yeah, I know.
Dan: Firefox is becoming the new IE.
Marcus: Firefox 3.6 then.
Paul: I don’t give a shit. So then we like to have a lot of fun which was the main thing that I wanted to do out of this. This was a little fun project for me. When I started building Boag World I did feel a little bit like a kid in a candy store. It’s so different. Even when I used to code regularly what would have been three, four years ago, it’s amazing how much has changed over that length of time. You’re look at me with such a patronizing look.
Marcus: I’m not. I always look at you like that.
Paul: Yeah. For me, I think the change has now been a significant change as it was going from table based design to web standards. What I’ve experienced from going from coding three or four years ago to coding now. It’s been brilliant fun. I got solid wire frames. I got strong design direction. It’s time to start putting these together. I must admit I got a little bit carried away no where more so than with CSS animation.
Dan: It’s a swirling logo.
Paul: Well, I tried.
Marcus: Spinning logo.
Dan: Really, you should have seen some of the early stuff.
Paul: I tried to refrain myself and use this animation subtly. However, like web design students with their first pirated copy of flash, I started plastering animation absolutely everywhere. I did eventually get my site under control and started to prune things back. Even so, I’ve left quite a lot in and I’m not entirely convinced it’s all justifiable. But, damn it, I’m going to put it in anyway.
Marcus: Yeah, it’s rough.
Paul: Aw. So I’ve got three types of animation in the new Boag World design. We’ve got image enlargements where basically you can roll over images and they enlarge to provide a better view. I can imagine how some websites this would be amazingly useful for like an ecommerce site or something like that where you give them a bigger product view. For Boag World, it’s pointless.
Marcus: Yes, exactly the same as mine.
Paul: But I’m keeping it in anyway.
Dan: Whatever it takes it gets bigger. Ooh, it’s nice. Yeah.
Paul: I think that’s why I did it.
Marcus: It’s pointless.
Paul: I think it was your site that inspired me to do that. I’m being honest about it. I’m crediting you. Yeah. So absolutely no point to it whatsoever, but it looks cool.
Dan: Okay. It does look cool.
Paul: But what it does do is it gets really big.
Dan: It’s just the entire website changes into a massive image of Paul’s face.
Paul: Well, you can actually enlarge my face. It’s very exciting.
Marcus: Well, this is why I’m slightly concerned about it.
Dan: Scaring customers off.
Paul: This is exactly my point actually when I talked early about how I think it’s important that we know how to code stuff. The reason being is that’s now stuck in my head where it wasn’t before. So next time I’m working on an ecommerce site I’ll go, “Ooh, that’s a perfect place to put some of that pointless CSS animation to enlarge the image.” It will have a point there. I think until you’re actually playing and messing around with the code you don’t always think about that kind of stuff. So I think that’s why it’s really healthy to kind of keep your skills up to date. It’s all about being a generalist again, isn’t it? So that was one type.
The second type was hover state transition. So in certain places when you roll over some items they’ll display a hover state. Instead of these hover states simply instantly appearing, they fade out gradually. Now, what’s quite interesting about this is originally I had this hover state of these kinds of fading effect on all the hover states. So if you rolled over a link or whatever it made the site feel slow and sluggish.
Dan: Yeah, I completely agree with that. I think fading of links – I just personally feel when I hover over a link I want to know that I’ve hovered over a link. I want to see that instant thing. It’s the one thing I don’t really like with the fading in and fading out. That’s just really obvious that something has changed instantly like that. I don’t like it.
Marcus: Can you give me an example of what is fading in?
Paul: There is a list essentially of articles that are essentially table rows except it’s a list, you know, rows with articles. If you roll over those the background of each row fades up.
Marcus: Oh, so it’s a design thing.
Marcus: You’re really proud of that.
Paul: I was really proud of that. You made me change the way it worked and you were right. What did I do originally? Oh, it faded up on the key move didn’t it?
Dan: Yeah, when you left the mouse alone for a little while or when you tried to make it – I can see the concept behind it. You were trying to make it so when you thought people were reading it, it would sort of go away, but it didn’t work.
Paul: Yeah. That bit was alright. So if the mouse is not moving it faded away. The idea was if you moved the mouse it fades back up because you just knocked the mouse for any reason even if you’re reading.
Dan: You get distracted by it.
Paul: Yeah. So when you rolled over there it was just the right decision. You’re a wise man.
Dan: I am.
Paul: But don’t expect me to say that very often. The third point of animation that we did …
Marcus: We’re at spinning logos here aren’t we?
Marcus: Yes, we are.
Paul: No, it’s not.
Marcus: I’m reading ahead folks.
Paul: No. So the primary course of action – I’m going to have to justify this. The primary course of action on the website is the subscribe button that’s in the header.
Marcus: Do you want me to do a bit of audio on this? A kind of whoo, whoo, whoo, whoo.
Paul: Yeah, except that’s far to fast.
Marcus: Oh, slower than that.
Paul: It’s whoo, whoo.
Marcus: Yeah, I can do that.
Paul: That kind of speed.
Marcus: Yeah, because there is nothing more pleasing than audio on a website.
Paul: Yeah. I think that would be great. Anyway, we haven’t even explained what we’re talking about yet. That’s really rude to read ahead and leave the listener behind. Yeah, so basically, this button, this call to action button pulsates slowly.
Dan: It will make it spin.
Paul: Shut up.
Dan: It’s going to turn it into a 90’s email.
Paul: No, no, no. Look see, now, I talk about this specifically.
Dan: It’s got a tiny little rotating envelope on it and it looks awful.
Paul: No, no. I’m not going back to the days of marque tags and animated gif’s.
Dan: I see nothing wrong with wrapping it in a blink tag.
Paul: Shut up.
Marcus: You can even do a little smiley.
Paul: This is obvious dangerous CSS animation which is we don’t use it. I mean, the last thing that we want to do it get back to animated gif’s and marques and all the rest of it.
Dan: Welcome to BoagWorld.com.
Paul: I think out of all the animation I’ve done on the site except for the pulsating buttons is user triggered if that makes sense. The pulsating button is so slow that most people aren’t even going to notice it on a conscious level. It did do a little bit of a test and it did seem to indicate that slow animation did draw people’s attention to it without it being irritating. I spent a long time getting the right rate of pulse. Don’t give me that look, Marcus.
Marcus: Did I have that your massaging the figures look on my face?
Paul: No. I’m allowed to have fun on my own website.
Marcus: That’s right.
Being able to add these design elements without resulting to images is just great. I really enjoyed that. It helps improve performance, reduce the number of assets, cleans up the code. There isn’t a lot more to say. Also, there are some great tools out there which makes it easier to create all this kind of stuff because the syntax for things like gradient isn’t exactly easy to remember.
Dan: The browser prefixes are a little bit excessive.
Dan: That kind of stuff isn’t really worth remembering until it’s standardized.
Paul: Exactly. Exactly. So there are various tools. I like to one tool in the show notes. Which one do you use? You use one that I thought was quite cool.
Dan: CSS generators.
Paul: Oh, that’s the one.
Dan: And there is an ultimate CSS gradient generator, but I can never remember what. It’s bookmarked all of them. I’ll make a link available at some point.
Paul: Good. You can tweet it. What’s your tweet? It’s Sheerman isn’t it?
Dan: It’s Sheerman. I’m just Sheerman.
Paul: Sheerman. Right. Anyway, yeah, I put a lot of gratuitous gradient, drop shadows, rounded corners on the website. Actually, I was quite restrained.
Marcus: You’ve always designed like that.
Paul: I have always designed like that. Even before it was trendy I used to design like that.
Dan: I think, if I may though, there is one point that should be raised about that. You do have to take into consideration performance because over use of that does effect.
Dan: Yeah. I did notice this because my site is a bit of a play box. I’ve done loads of stuff with drop shadows and the entire website is a big gradient. I did notice when doing it that if you sort of resize the browser, when it recalculates the gradient a bit it goes a bit mental. I think this definitely is still a place where, and I’m going to get shot for saying this, but there’s definitely still a place for gradients that are images.
Paul: It just because they render quickly.
Dan: Yeah. If you’re using very, very large box shadows as well because it’s obviously got to render over whatever else is on the page, therse still definitely a case for images there but like you say, is fantastic just to add little touches it’s very nice.
Paul: It does make it nice. It’s interesting that you say that. We’re going to go on to – If we ever get through these show notes, we’re going to get onto some of the bad things that I encountered. I did encounter the odd rendering glitch which I can’t work out. I think it’s just a combination of my pulsating buttons, my drop shadows and all these other things that are going on. So it does struggle sometimes. You are right.
Dan: I haven’t noticed it much, but I have noticed it a couple times when you’re overly excessively using it, especially with large gradients and large boxes.
Paul: I’ll tell you what came up, I think what caused it with mine, I haven’t yet solved it because I can solve it quite easily, but I’m trying to avoid it. I have a footer and a header obviously. What I’ve done in the code to keep the code clean is you code everything within a container as you do, but I wanted a band all the way across the top. So I didn’t want to put a background image behind you know that just was the correct height and went all the way across. So I used first and last child to create – Yes, two elements. I’m not explaining myself very well. In order to put those in which is a classic technique. It struggles a little bit to render those. It flickers sometimes which is bloody annoying.
Dan: That’s interesting.
Paul: Yeah. I’m having trouble getting rid of that. Anyway, that’s beside the point. Right. So moving on. Marcus, are you still with us?
Marcus: Yeah, vaguely.
Paul: We’re talking about pseudo elements and that kind of stuff. What am I looking for? Content before and after.
Marcus: Before and after. Yeah.
Paul: Before and after, not first and last child, before and after. I knew I wasn’t getting it right.
Dan: I didn’t want to correct you.
Paul: You can correct me as much as you want, Dan. You’re the expert.
Dan: You know that’s recorded now.
Paul: Shit. Right. Web fonts, if there was a TV series called the Grumpy Old Men of Web Design, web fonts would surely be the top of my list. It’s so annoying the problem with fonts on the web has not been a technology one, but a bloody licensing one. That’s what stops us having fun on the web. They’ve been supported by browsers for flipping ages. It’s just, ugh. So I’m glad that that’s finally been solved. It’s made a huge difference with Boag World because it’s allowed me to use a form very similar to that being used on the Headscape branding.
Best of all, whether you’re using Google fonts or a service like Font Deck, web fonts are so simple to implement. But as an old man, because I’m doing this from my perspective, I do feel this need to caveat my statement with web fonts which is good typography is about more than the choice of face. There has been some great online typography before web fonts came along. There have been some terrible examples since the technology has emerged. But I have to say, web fonts can improve typography if used well. I hope that I’ve used them well on Boag World. I think it has made a huge difference. To be honest, on the new Boag World I’m reducing the amount of images. I’m using loads and relying much more heavily on typography.
Marcus: Yeah. I mean, the problem with having a choice of more fonts is just look at any amateur design piece of print work and now you can have that on the web.
Paul: Yeah, absolutely, which is bad. So, yeah, I’ve tried to be a bit more controlled over it and sensible. I’ll tell you the other thing, because I’m relying so heavily on typography, another thing that I’ve got quite excited about is REM’s. Are you excited about REM’s too, Marcus?
Marcus: It reminds me of the ‘80’s band, ‘90’s band or they’d hate me for that. Just the ‘80’s. That’s when they had those hits.
Paul: You mean REM?
Paul: I don’t mean that.
Marcus: What do you mean, Paul?
Paul: Dan knows what I mean.
Dan: I know what you mean.
Paul: I hate REM’s, right? Just the maths involved in REM’s makes my brain dribble out my ears because I’m not the best when it comes to maths. I know they’re really important because they allow you to resize text which is really important from an accessibility point of view. Fortunately, Jonathan Snook introduced me to REM’s just before I started building Boag World. Oh, thank you, Jonathan. Thank you, thank you, thank you.
The problems with REM’s is a simple one, right? This is remarkably hard to describe on an audio podcast, but I’m going to give it a go. If you want a piece of copy to appear to be say 14 pixels in size, you have to calculate the end value for that based on all of its parents, right? So the deeper you get within the sites hierarchy and the more nested that particular piece of content is, the more complicated the calculation becomes. One inherits from its parents that inherits from his parent and so on. You’re going to tell me this is easy now and I’m making a fuss about nothing.
Marcus: That’s what he’s thinking.
Paul: I hate it. It drives me nuts. It’s just wasted time. But REM’s in my opinion makes this problem go away. I’ve got a feeling that you’re going to tell me off from using REM’s. Are you building for that?
Dan: Do you know what? I’m ashamed to say that I’ve never actually used REM’s.
Paul: Have you not?
Dan: I still use AM’s at the moment. I’ve been meaning to play around with REM’s.
Paul: REM’s are brilliant.
Dan: REM’s are brilliant.
Paul: Brilliant. So the great thing about them is essentially all you’re doing is inheriting from the HTML, the document root, right? So the document root you say font size equals some bizarre percentage that equals 10 pixels in effect. Then so everything else, so if you want 14 pixels, it’s font size: 1.4 REM. So it’s all easy.
Dan: That makes sense if you don’t have too many inheriting font sizes.
Paul: Are you saying I code bad?
Dan: Kind of.
Paul: Is that what you’re saying? Are you saying I’m coding badly? Is that what you’re implying?
Dan: I would never imply that. I would never imply that.
Paul: But I find that it’s really, really useful. It’s not supported across every browser in the whole world ever. But what you can do is you can just put in the pixel value afterwards which is a kind of budget solution.
Paul: I just love it. The other thing is it just makes your code so much easier to read and understand. If you make an adjustment in one place, it doesn’t screw up the font size in another. It just makes my code a lot easier to read. That might be limitations in my way of coding, I don’t know, but it’s been an improvement to me. To be honest, in exactly the same way I think HTML5 has helped to clean up my code and bring about the demise of the divs. REM’s have helped me kind of clean up by CSS personally. That’s probably just me. Anyway, demise is a div, yes. HTML5, yes. I’ve really enjoyed coding in HTML5. It’s a joy.
Dan: That’s very, very nice.
Paul: It’s nice. I mean, for somebody who’s semantically uptight as you, I imagine it really makes you smile.
Dan: It really does.
Paul: I mean, it’s got so many advantages over it’s predecessor. The one I find satisfying is just make your code more readable. I love that. Before HTML5 my code was stifftastic and I hated it. I tried to tidy things up by putting comments at the end of each closing div explaining what it was related to, you know, the close to this idea or whatever. But never things ended up getting messy. With the introduction of these kind of new semantic tags like section, header, article, aside, footer, etc., etc., code suddenly makes so much more sense. Although I still use divs in places, generally code is much easier to read. It’s just the HTML5 tags have made things easier. There are also some great new CSS properties that make code simpler and more semantic. That’s the thing that I love.
Dan: I love the way Marcus is just giggling away in the corner.
Marcus: It’s because my stomach is rumbling horrendously.
Marcus: I didn’t bring any sustenance with me today.
Paul: You normally bring a biscuit too.
Dan: You need a nice hot mug of cocoa.
Marcus: Who’s got my pipe?
Paul: This is not the most interesting of shows for you, Marcus.
Marcus: I think this is the kind of show our listeners like.
Paul: Yes, I think so.
Marcus: So carry on.
Dan: We’re at 40 minutes now.
Paul: Are we?
Marcus: Are we like 40% of the way through?
Paul: No, we’re more than that I reckon. So, anyway, I want to talk about what the most exciting thing out of everything that I’ve enjoyed implementing on the new Boag World site which is not using floats. I like that. I like being able to – Do you know what it is? I think it’s probably a hangover from my table based days. When I moved from table based design CSS layout, one of the most challenging parts in transition was getting your heads around floats. They’re stupid aren’t they really?
Dan: They are a little bit. If you use them excessively in layout it does become a bit horrible.
Paul: Yeah. You know to this day I think floats are a pain in the ass basically. Fortunately, when I discovered I could effectively drop support for IE7, I was able to use a number of alternative options including the display table cell and display block in line. Ooh, they were exciting. Don’t snicker at me.
Dan: I’m not. I love, yeah, love them.
Paul: But you don’t get to use them very much.
Dan: I don’t get to use them very much, no.
Paul: Which is a shame.
Dan: Unless I have a massive IE7 custom style sheet which I have done in the past.
Paul: Right. Yeah. It just simplifies things hugely. Block in line has become my primary tool to create multiple column layouts. It’s just so easy. But table cell I found interesting. For me, it solves a couple of problems that are common problems. What is if you wanted two columns at the same height? Are you looking at me wrong? Am I wrong about that?
Dan: No, I’m intrigued. I’ve never used it for that.
Paul: Now suddenly since I said that out loud, I’m suddenly debating as to whether that’s actually true.
Dan: It does do that a lot.
Paul: I think it does. Anyway, I’ll skip over that.
Paul: The only one I really like is do you know when you have a menu bar going across the website especially if it’s content management website? You don’t know how many items are going to be in that menu bar, right? So what you always used to do in the good old days of table based design, if you just put that in a table, those cells would space themselves out to take the entire width. There is no way of doing that without a table or hasn’t been. So without actually individually manually spacing those elements – You’re trying to think of a way.
Dan: I’m desperately trying to think of a way.
Paul: But there isn’t. There is no way of doing that.
Dan: No, I don’t think there is.
Paul: It won’t space itself out. Table cell, display table cell will do that. It will spread itself out over 100% of its parent width which is very useful. It’s very cool. If you add another item in, it will automatically re-space everything. It’s a really useful thing. I love table cell, but probably that’s because I grew up in a world of table based design where you did these things. You won’t even miss that kind of functionality because you never had it.
Dan: I do. I was building in tables for a shockingly long period.
Paul: Were you really?
Paul: What when you were five you were building tables?
Dan: I started doing web design when it was still sort of acceptable to use tables.
Dan: Actually, I think I started in kind of the transition phase where everyone was going, “Hmm.”
Marcus: So that was five or six years ago.
Dan: No, a bit more than that it would have been.
Marcus: 2005 six years ago.
Paul: Oh, yeah.
Dan: No, I’ve been in web design longer than that so maybe I was when it was actually appropriate to use it.
Marcus: That was about when we started to …
Paul: That’s when we transitioned as a company.
Marcus: Yeah. Some people were doing it before that.
Marcus: Not many.
Paul: We were relatively new.
Marcus: I’m must be near the microphone.
Marcus: I’m relaxed. The problem with the last thing that you’ve been going on about is that they don’t work in IE7.
Paul: Yeah, but my point is that when IE7 actually has less users than IE6 in a lot of cases – We were discussing this weren’t we?
Dan: I think we were. I don’t remember it being that though.
Paul: Alright, close to it. Let me exaggerate.
Dan: I think IE8 had less users.
Marcus: It keeps coming back to this age old problem of the large corporation IT department who wouldn’t allow upgrades.
Dan: I think at the end of the day it’s a case of judging every project on a case by case basis.
Dan: You’ve got to at the beginning of the project say, “We’ve got to support this.” And just get on with it.
Paul: Yeah. We had this problem for years.
Marcus: We had problems for years with IE6. IE6 will go, but we’re not there yet.
Paul: I think IE6 is gone. If you look at stats …
Dan: No, no, IE6 has IE7 hasn’t yet.
Paul: Oh, oh.
Dan: It just hasn’t happened yet.
Paul: Yeah, but in the case of Boag World it has.
Paul: I mean, I’m literally all I’m doing is talking about my experience here. I’m perfectly aware that not everybody is going to be able to do all of these things. Absolutely. Another example of that actually is nth child which is another thing that I really, really like. So the nth child property has helped me clean up my code by removing those unnecessary classes of first, last and alt. So I typically use these for the first item in the menu bar or the last item on the list of news stories or the old uneven rows of tables. With the nth child property you can do away with these. You don’t need that superfluous markup which is really nice.
So those are the things that really excited me. But I have to say, it wasn’t entirely a bed of roses. Although things have improved a lot over the last couple of years, there are still some frustrations. I did encounter a few things that annoyed me. So I thought I’d share those in the hope that maybe some of you have got work arounds to some of these problems I encountered or maybe at least I’ll make you feel better that you’re not alone in getting frustrated by this stuff.
So here are some things that frustrated me. The first one was percentages for layout. When building a responsive website working about percentage widths to screen elements does get frustratingly complicated. Surely there must be some smart aleck out there that can build an application to calculate all this crap for you. I haven’t come across one yet.
Dan: I love percentages for layout.
Paul: Do you?
Dan: I used to love using percentages just for layout in table based layouts.
Dan: It just makes everything seem a little bit nicer. I don’t know why.
Paul: Actually, now that I think about it, I didn’t use to have a problem with it in tables.
Dan: You used to use it in tables.
Paul: Yeah. Why do I find it frustrating now then?
Dan: Is it because you’re trying to do margins and paddings that you didn’t do before?
Paul: Maybe. Perhaps tables just handled margins and paddings.
Dan: That’s the solution. There you go. Think back to the tables.
Paul: It probably is me.
Dan: I can’t belive I just suggested.
Paul: I think it’s where it deals with, yes, margin and padding that causes the problems.
Paul: I mean, table based I don’t think it did in the same way.
Dan: It’s probably because you got to think about which margins are going to collapse.
Paul: Yeah. I don’t know. Anyway, it was something that frustrated me. That’s a layout thing. Then I come on later on to something that possibly would kind of solve that problem or make it a lot easier. The other one was browser glitches which we mentioned earlier. That annoying thing where I think it was CSS animation conflicting a little bit with that header and footer thing I talked about. It would get flashes and visual glitches. It’s doing it less now, but I’m still thinking it’s doing it occasionally.
Dan: I think some of the vendor prefixes until it becomes finalized it does. I have a weird issue that no one else seems to have with using gradient and box shadow on Chrome for a while. I could only use one or the other in some weird cases.
Dan: That’s weird cases that make it annoying.
Paul: Yeah. I found that a little bit frustrating. Also, HTML5 frustrated me a little bit, not the language itself, but there seems to be a lot of confusion over it. It’s the first time I’ve used HTML5 so I was a good boy and did my due diligence and read up on it. Unfortunately, there seems to be a lot of disagreement about how you’re supposed to use all these new semantically wonderful tags.
Dan: Yeah. I had an awful faux pa a while back when I realized I was using menu completely incorrectly.
Paul: Well, there you go. I didn’t even know there was a menu tag.
Dan: I was always under the impression that menu was the main. I’m sure I swear it was defined as that back at some time that you could only have one menu on the page and everything else was nav. Nav is nav and menu is something completely different.
Paul: So what is menu?
Dan: Menu is used for web applications like if you wanted a drop down menu you’d call it a menu or something like that.
Paul: Right. Okay.
Dan: I was under the impression that menu was this super nav.
Paul: Okay. Well, there you go.
Dan: That’s massively boring.
Paul: All this in differences about when you should use an article and when you should use a section. I think there is actually a particular one …
Dan: The nice thing about HTML is it’s kind of open to interpretation. It’s not a strict language.
Paul: You wouldn’t know that from some of the way people talk about it. This is the right way.
Dan: Some of the ways that I tell people. But, yeah, coming from the biggest standards evangelists in the office, that’s probably something weird.
Dan: No, I think it’s open to interpretation.
Paul: You don’t think it’s standards. You’re the biggest semantic.
Dan: Semantics. Sorry.
Paul: It’s slightly different.
Dan: There you go. I’ve got my semantics wrong in semantics.
Paul: I find it fascinating listening to you and Ed have conversations about coding stuff.
Dan: Conversations used loosely.
Paul: Yes, it’s great. That’s the way it should be. So there is still some confusion over that. In the end, I kind of shrug my shoulders and just have a go. I’m sure someone will criticize me for my choices. That’s the way of things really.
Dan: There are no mistakes.
Paul: No. The other thing I find a bit frustrating is font rendering. Although it’s incredibly exciting that you can use Web Front fonts, I was slightly disappointed of the rendering quality of some of the fonts on certain operating systems and in certain browsers. No particular ones mentioned Internet Explorer Microsoft. I think the only way to go in this area, and to be honest, I don’t think it’s just Microsoft over here. I think it’s also the font foundries need to go through and optimize their fonts because these are fonts that were designed primarily for print rather than online. I still think there is some more work to be done there, but I think that will happen. The other thing that frustrate me was still no variables.
Paul: It amazes me that CSS doesn’t need to support variables. It would be so useful and significantly reduce the amount of code that you write. Also, things would download fast, the code would be more readable. It’s just great. What I mean by that, Marcus …
Marcus: Yes, thanks.
Paul: Variables would be – So let’s say the top of your CSS file you could define the – I’m just trying to think …
Dan: The Boag World orange.
Paul: Yes, Boag World orange, the color palate. You have Boag World orange, Boag World green, da, da, da, da, da. You would define those as variables. So instead of having to look up the hex value every time you’re going through it, you can just put in Boag World orange, Boag World green, etc. which is a pain. Well, you can’t and you can. That brings me on to the last part of the show that I wanted to talk about which is if only I’d known before I started about less. Oh, I wish I’d known about this. I hit my chair a lot these days don’t I?
Marcus: You do. Every time I go like that.
Paul: Yeah. It makes the listeners wake up. Things I wish I had known before I started on Boag World, oh, bollocks, this would have made life so much easier.
Dan: Yeah, I missed it by about a week when I was playing with my sticking my personal site into WordPress. I feel exactly the same. Now I’ve got to build another play box and work around with that.
Paul: I really, really do if I could, I would start again on Boag World. For me, it’s really exciting. I know not everybody likes it. I think there is some hesitancy within Headscape to adopt this, but I really am quite excited by it. I think people get their own systems perhaps its that I lack a system. But for me it’s just great.
So what is less? It actually isn’t just less. It’s two things. It’s less and it’s something called the semantic grid system. The two combined is beautiful. So for me, these are the two technologies that solved two of the things that frustrated me. Less essentially extends CSS with dynamic behavior which is operators, functions and variables I’m so desperate to have. To be honest, it’s probably a lot more powerful than I would get my head around, but I’m sure you would use it, Dan, a lot more than I would.
Dan: It would intrigue me to find out how much CSS it’s actually outputting like the actual generated rules. The production code is going to be nice and clean. I’m willing to bet that it’s probably going to be quite – I mean, I could be completely wrong because I haven’t used it, but I’m willing to bet that it will be more bloated than writing everything individually.
Paul: From what I’ve read, that is the truth. That’s right. It’s more bloated than it would be if you hand coded it yourself.
Dan: Once you’ve minimized it and you’re g zipping it it’s trivial.
Paul: Yeah. Apparently it’s not that bad. It’s not kind of Dreamweaver bad. You know it’s pretty good. Nothing is ever going to be as good as hand coding every single line yourself. But I’ve got to say, for me, I think it would be worth it. I think it’s worth it from a maintainability point of view. It’s worth it from profitability point of view on a project. I think it’s going to be cheaper and quicker to build stuff. I think it’s good for handing to other developers as well. They will be able to see what’s going on much easier. All in all, I just love it. Combine that then with the semantic grid system, Have you had a chance to look at that yet?
Dan: I have, but not in the way that I think we were talking about it.
Dan: I don’t like standard grid systems because they’re generally a bit divtastic and classtastic.
Paul: Yeah. What was it? It was the combination of the semantic grid system with less.
Dan: With less. It completely eradicates that I’ve heard.
Paul: The semantic grid system, for people listening, is a CSS framework that essentially instead of you having to go in and code everything manually to work out your layout so to speak, this provides a grid system where you can essentially say, “This item I want to be three columns or whatever it is.” It just does its thing which will get around my pains with percentage problems.
Dan: It would.
Paul: Your problem is completely a legitimate one. Part of the reason why I have rejected every CSS grid system that I’ve ever seen which is you have to put in loads of not necessarily divs necessarily , but loads of class names.
Dan: It’s in line in the template.
Paul: Yes. So you’re having to put in column one, column two, etc. What’s great about this one combine with less is that because you’ve got variables in less you can define all of it within the CSS. Essentially, you can have a variable of column one, column two that you just apply to any element that you want.
Dan: You just target select exactly the same way you would if you were saying foot section.
Paul: Yes, exactly. So from that point of view it’s just beautiful. It also can be easy used for responsive websites. Great. I just love it. Although it’s too late to use these technologies for Boag World, I’m definitely going to consider using them for any future projects that I work on. It’s something that I’ve recommended with Headscape. We’re going to try it on whatever the next thing that comes in unless, of course, it’s Ed who’s working on it, who is grumpy because he’s got his own grid system that works for him. We’ll bring him around it’ll be fine. We’ll sort him out.
Certainly I’d recommend it to anyone else as well. There is a really good article talking about the combination less and semantic grid system on Smashing magazine. I’ll link to that in show notes so check that out. So I’ve really enjoyed building Boag World actually. I’m a long way from finishing because I don’t ever seem to get big chunks of time. But it is going very well. It’s a bit frustrating at times, but like modern exams it’s so much easier these days so get used to it. When I coded things were tough. Although I recognize I’m in a somewhere privileged position because I don’t have to support IE7. It has given me a taste of what’s to come. I think it’s really exciting.
If like me, you haven’t built websites for years, I would encourage you to take the time to make sure your skills are up to date and you’re aware of the latest tools. Ultimately, it’s going to save you a lot of time and effort. If you’ve been building the same ways for years, it’s time to get up to date. Wow it’s worth it, it makes like so much easier.
Paul: So we’re going to wrap up this mammoth epic show. We will end with one of Marcus’s jokes which hopefully will appear on MarcusJokes.com . That made me laugh so much.
Marcus: I know. Ian, what was his name?
Dan: I can’t remember.
Marcus: Ian, that will do. He built a website that’s only got four of my jokes on it, but I imagine there will be a few more.
Paul: Let’s hope so because that really made me laugh. It’s really funny when I put out all these blog posts with profound stuff about the internet and I put them out on Twitter. I get retweets. I put out your joke site and it goes mental. It’s far more popular than anything else.
Marcus: I’ll have to check my level of followers. It’s probably gone through the roof. Anyway, this one I quite like. This isn’t from the list. I’m going away from the list for a week.
Paul: Oh, good for you. You’re branching out.
Marcus: I never wanted to believe that my dad was stealing from his job as a road worker, but when I got home all the signs were there.
Paul: I like that one.
Marcus: So did I.
Paul: That’s good. Thank you very much for listening. Thanks, Dan, for coming on the show.
Dan: Thanks for inviting me.
Paul: You are no longer a Boag World virgin. I’ll leave that hanging in the air. I’ll talk to everybody again in two week’s time when we will be talking about something else, but I don’t know what. Bye.