Is it time to take the tech more seriously?

Paul Boag

This week on the Boagworld Show we have talks on best practice in web development and the impact of technology on design.

Skip to talk 1, talk 2.

This weeks show is sponsored by Fullstory and Teacup Analytics.

Paul: Hello and welcome to the Boagworld show the podcast about all aspects of digital design, development and strategy. My name is Paul Boag and joining me on this week’s show, as always, is Marcus Lillington. Hello Marcus.

Marcus: Hello Paul. How are you?

Paul: Oh, exhausted!

Marcus: ACre you? It is a bit warm isn’t it, but we mustn’t complain because we like it when it’s warm.

Paul: Oh, no. I’m not complaining in any way. I’m exhausted because of the amount of work.

Marcus: Oh yeah, you were complaining about that last week. You are just not used to it are you Paul?

Paul: I know! I had to speak at a conference on Friday and then we were away for the weekend. Although really you’re not going to give me much sympathy when I say what we did. And then were off to… Well, you and me, we’re both off to another conference. Well, you’re not going tomorrow are you? You’re going the day after.

Marcus: Yes.

Paul: Yeah, so we’re going to another conference over the rest of the week. Oh, dear me. I need a lie down!

Marcus: Conferences are just a bit of a doddle though really aren’t they.

Paul: Well, except I’ve got to do work while I’m at the conference.

Marcus: I tend to always do work. It’s partly an excuse because I don’t want to go and watch any of the talks. I’m only there really to kind of meet up with old friends and sort of maybe nudge them in the ribs for a bit more work and that kind of thing.

Paul: Right! So you’re not, so you don’t want to learn anything!

Marcus: That’s not completely true, I tend to sit and enjoy all the plenary talks but the workshops are like, hmmm.

Paul: Yeah, yeah, interaction is not really our thing is it!

Marcus: No. They don’t want me there anyway.

Paul: It’s quite good. Yeah, especially… the conference we are going to is a higher education conference so you do feel a bit like an awkward outsider.

Marcus: Yep, from the dark side!

Paul: Yeah. And you don’t want to kind of overly push it by, you know, interfering too much in workshops and stuff where they want to talk about their problems and their issues. But I do enjoy the plenaries. I was at a higher education conference on Friday and there was a person giving a talk before me. It was absolutely brilliant, she was a woman that does… Works with IT directors basically and teaches them emotional intelligence. Which is I think…

Marcus: We’ve all met IT directors haven’t we!

Paul: Yeah, but actually she is teaching them to play the politics game which is quite interesting actually and how to do so in a way that actually brings colleagues along and stuff. Which in our industry is so important. You know, if you want to bring about change, digital change, you need to win people over which is my thing as well isn’t it. So…

Marcus: It is, most definitely, yes.

Paul: It was good. So why are you not coming until Wednesday. Are you just slacking off for a day?

Marcus: I just thought I would have tomorrow off. No, that’s not true.

Paul: I mean, you don’t want to have to listen to Brian who kicks off this conference.

Marcus: It will be a bit with not being there for the first… a lot of them have arrived today, looking at it on slack. But no, my son is officially cleverer than me as from tomorrow. Well he is anyway, he has been for a long time but he graduates tomorrow, we’re going to the graduation ceremony. He has got a 2:1 in Physics from the University of Surrey.

Paul: But he was already officially more intelligent than you because he got A-levels and you dropped out!

Marcus: That’s true. Yeah, but even more so, more, more, more so.

Paul: So what was his, sorry, what was his degree in again, remind me.

Marcus: Physics. A proper degree.

Paul: Yeah, that is a proper degree. That’s what my son wants to do.

Marcus: I think he will enjoy it but if he ever wants some advice on the modules to take James made some potentially the wrong choices. He went “Oh, that sounds interesting” and took a quantum mechanics one or something like that and he said it was just so hard it was just mad. He could have done a much simpler module and kind of breezed it a bit more. Maybe even got a first but you know, is quite happy with his 2:1.

Paul: It’s difficult that because my son, my boy is obsessed with quantum mechanics and that kind of thing so he would be very tempted by that, but yes, pick the path of least resistance.

Marcus: Yeah. I mean it’s a bit of both obviously but you know. It’s just so hard and it was a new module so it had never been… The questions had never been set or marked.

Paul: Yeah, that’s always a mistake. It’s like I was the first year of GCSEs. Which on some of my GCSEs was devastating and led to really low results and then in other areas like French I walked away with a D and I should have walked away with a nothing.

Marcus: (laughter) I got a D in French. That’s the only O-level, because I did O-levels because I’m older than you, it was the only one I failed. I got A’s and B’s and everything. School was easy in those days!

Paul: Did you really?

Marcus: Yeah. Then I did A-levels and thought “Oh, you got to do some work now.” And I thought “I don’t want to do that!” and went off and played in a rock ‘n’ roll band.

Paul: Well, rock ‘n’ roll make it sounds cooler than it was.

Marcus: Yeah, it wasn’t really was it. Well it was quite cool but it wasn’t as cool as a rock and roll band.

Paul: No. So what is he going to do. What are its plans?

Marcus: It’s very likely, he did a year out, like a sandwich year in his… He did two years University one year in industry and then another year again. He worked for a company called Tesla. Which is not the same as the Tesla that does the electric cars. It is a Tesla that builds giant magnets for things like the Hadron Collider and stuff like that. And he is hoping, well, it is looking quite likely that he will end up going back there.

Paul: Nice. That’s why… I tell you, dear listener, if you ever get a chance to intern someone or do a year’s placement, take it. Because it’s always that first step of networking and who you know and that’s where you get work from isn’t it really.

Marcus: I also think that it helps if you do a degree in something that it has a specific “If you do this you can do that job.”

Paul: Yes.

Marcus: I’m not saying we should, you know, completely throw out history of arts degrees. Of course not. And I am not taking the mick there, I mean that. But if you are weighing up the stuff at the beginning and you are great something like physics then do it. It will lead into more opportunities than, I don’t know, I can’t think of anything an example.

Paul: History of art.

Marcus: No, well you know, I was thinking of something science-y equivalent but there isn’t one really is there. But you know, it’s a really useful thing to have under your belt whereas something that is more kind of just because you like it might not lead onto a job. It sounds all teacher or fatherly I am there aren’t I.

Paul: Well, I mean it’s up to people, it’s what they want to do with their lives but you’ve got to say it does make things much easier if your course has got a vocation at the end of it.

Marcus: I mean physics has hasn’t particularly. Obviously you can become a scientist or a researcher or something like that but it is useful for all sorts of, you know, you could go into banking or accountancy or coding. He’s done a load of coding over the last three or four years.

Paul: I mean look at Chris Henderson, a developer at Headscape. He did physics didn’t.

Marcus: Maths, he did.

Paul: Oh, was it maths!

Marcus: But physics is tons of maths anyway so…

Paul: And then Chris, obviously, Chris Scott who has got a PhD in Physics.

Marcus: Yep, he is sat just outside the door there. Looking all scholarly.

Paul: Ah, is he?! He always looks scholarly.

Marcus: I can only see the back of his head. (Laughter) I was just making that bit up.

Paul: Okay. Right, well then that’s enough people. Did people learn anything from that? We learnt that you need to play politics, we learnt that you want to do a year’s placement if you are thinking about studying. Yes, so actually we provided real value in our introduction.

Marcus: Hard to believe. But yes, maybe we did.

Paul: Shocking but true. Right, let’s talk about our first sponsor and then we will actually get into a talk. Which is quite an interesting one, talking about starting one location and then ending up in another. But we will come to that in a minute.

So, Fullstory. I want to talk about Fullstory that I have been going on about for the last few weeks. Basically it is the analytics package that actually provides real insights rather than Google analytics. I really don’t like Google analytics, can you tell?! I really don’t like it. The only thing that Google analytics has got going for it is that it has got an API that other pieces of software can plug in and extract useful information. That is it in my opinion. But anyway. So we have talked about Fullstory before, we have talked about how it allows you to do very specific searches to find out information on how many people clicked a certain button or went to a certain page and all this kind of stuff. How it also allows you to drill down and look at user sessions and actually playback a user session and see what exactly is going wrong. Obviously all of that is great for diagnosing problems, you know, where’s something going wrong with the website, why is it going wrong, what’s happening there. But what if you want to know about a specific page rather than a person. Now, this is something that for me is quite an important aspect because I will write a blog post and I want to know how long people have spent on a particular part of the article whether they then spotted the call to action and all of those kinds of things. I tend to approach a lot of the stuff that I do with Fullstory from that perspective. For that you can get page insights and it basically will give you exactly that. It will let you see what elements of the page users are clicking on, looking at, all of those kinds of things. Which is really really useful as well. What is really nice is that if users do weird stuff which they do, for example my most recent blog post for some reason the fourth most clicked thing on the post was the introduction to it, right, which doesn’t have a link in it. Very peculiar. So you can then dig in and say “Well tell me more about this element, what is going on with this element? Let me watch some user sessions of people interacting with this element” and all that kind of stuff. Very very cool indeed. So you can sign up today…

Marcus: Woo, woo, why were they clicking?

Paul: To be honest I don’t know.

Marcus: That wasn’t a good story then was it?

Paul: It did peter out at the end I must admit. To be honest I was looking at it just before this podcast and so I was kind of halfway through looking at it and I didn’t manage to fully delve into it.

Marcus: You can tell everyone next week Paul.

Paul: I think the answer is that people are stupid.

Marcus: (Laughter)

Paul: That’s what I’m going with.

Marcus: Okay.

Paul: That’s my pulling preliminary results and I am now going to carry out extensive research to discover whether my readers are really stupid. So if you are listening to this show and you do read my blog posts if you could send me an email telling me what 2+2 is that would be great, ta. Yes. What was I talking about? Oh yes. So if you want to see… If you want to give it a go basically you can get a free month of the pro-account absolutely free by going to Fullstory.com/boag. You don’t need to enter a credit card or anything so it is very straightforward. If at the end of that month you want to carry on with pro you can do so and you can pay money or you can carry on for free and get a thousand sessions per month recorded for free. Which obviously is pretty damn good to. So there we go.

So, let’s talk about our first talk today. I’m beginning to be a bit suspicious of this, right? And the reason is is it’s a talk by a guy called Ian Frost, right, no big deal there. He is a front end Web developer in Pittsburgh and he has worked on all kinds of different projects really, he’s done a lot with pattern libraries, building websites, worked for companies like about.com and Exxon Mobile, Moble. So he does loads of cool stuff. Now, why I am somewhat suspicious of him is his surname because he used to be a weatherman or a meteorologist, sorry.

Marcus: I see where this is going now.

Paul: And he’s called Frost.

Marcus: Right…

Paul: Do you know, it’s like a dentist being called Mr tooth. It’s just… It’s a made up name isn’t it?!

Marcus: I don’t think it is. There are lots of people who have names like that. I was listening to something on the radio the other day, the head of the judiciary used to be called Mr Judge.

Paul: Oh, that is so cool!

Marcus: There were a few… That was the one that stuck with me… But there were a few.

Paul: Do you think that your surname lends you or encourages you towards a certain career?

Marcus: I think possibly does based on… I wish I could remember… It might have been on the telly or on the radio, I don’t know but I was listening to this thing and it was very amusing.

Paul: My worry about that, if that is true, I had a physics teacher called Mr killer.

Marcus: What, really? What, K I double L E R?

Paul: Yeah, yeah. And I still the him quite a lot because he goes to my church.

Marcus: (Laughter) No, I don’t believe you.

Paul: Absolutely true, you can Google him. Geoff Killer.

Marcus: (Laughter) Sorry! Keep talking Paul.

Paul: He’s a really nice chap. He is a really… He’s the most un-killer-y killer ever, so yeah. In fact he’s a bit of a hero at… You know how you always get those teachers that are heroes? He has been one of those kind of guys that everybody absolutely loves. He taught me when I was at school and he is still teaching there now. There you go.

Marcus: Well I never. I found a different Geoff Killer. There is two of them.

Paul: There you go, that’s even worse isn’t it?

Marcus: Unbelievable! Well, I have learnt something today, killer can be a surname.

Paul: There you go. So, anyway, Ian, setting aside his surname, used to work as I said, in meteorology and he uses that as a jumping off point in his talk to talk about how to transition from one career into web development and some of the things that he learnt along the way of doing that. So, over to Mr Frost.

From Weather To Web: Best Practices For Transitioning Into Web Development

Play talk at: 15:27 – The web community consists of many folks who transition over from other fields. I discuss my own experience with this process and explain my methods of working in a way that makes sense to both me and the teams I collaborate with.

Ian Frost: From Weather To Web: Best Practices For Transitioning Into Web Development
Ian Frost is a frontend web developer for Brad Frost Web in Pittsburgh, PA. He has worked on projects both big and small, building websites, pattern libraries, and design systems for companies like About.com and ExxonMobil. He enjoys making things for the web and creating good user experiences. Visit Ian’s site at ianfrostweather.com/

You are taught at a young age that if you do well in high school and go to college, you will get a job in what you studied and do that until you retire. I agree with the first part that if you do well in high school you might get a chance to go to college. The second part, though, I don’t completely agree with because even if you get a job in your field, you may not stay in it forever. Why not? To me, it has to do with the balance between work and life. As a meteorologist, I loved forecasting the weather. The life part is where I struggled as I was long distant from my long-time girlfriend still, worked overnights and weekends, and the opportunities within my field were hard to achieve in a short amount of time. So, I decided to get married, move to Pittsburgh, and with help from my brother, become a web developer.
The field of web design and development is full of people who didn’t start out in the web. My story is one of many. My name is Ian Frost and I am a frontend developer. I am here to compare and contrast the non-web and web fields and explain the methods of working in a way that is efficient for me and the teams I collaborate with.
The web is a unique medium to work in. It is full of intimidating folks who happen to be some of the nicest and most helpful people, but yet you’re still intimidated because they are incredibly intelligent. It is a field where there are tons of ways to do the same thing and patience is a must as you write and sift through lines of code. But most of all, the web is a field that is a melting pot of men and women who may have started out in entirely different fields.
Weather and web design are similar in a lot of ways. Both are sciences that tend to get simplified by the general public. “You’re a weatherman. It’s the only job where you can be wrong 50% of the time and keep it.” “You’re a web designer. I have this great idea for an app?! I need it done in a week.” These are two fields that the general public get excited about but don’t know a lot about. Another similarity is that the atmosphere is ever-changing in meteorology just like the innovations and improvements of web design and development are ever-changing. There’s
always something new and exciting with both, whether it’s a big snowstorm hitting the east coast in weather or CSS Grid Layout getting browser support in web design. People in weather can have strong opinions on climate change just like people in web can have strong opinions on whether or not to use spaces or tabs for indentation in their code. I won’t discuss either as I feel like I’d spawn an angry mob of listeners with pitchforks and torches whichever way I leaned on these subjects. One of the bigger similarities I come back to between meteorology and web development is that of empathy. A meteorologist needs to know its audience to speak in a voice and tone that makes sense to the majority of the demographic just like a web designer needs to know its stakeholders and users to create a design, content, and functionality that positively impacts both. Finally, both fields require teamwork and collaboration to achieve the best result. My former coworkers and I used to create our seasonal forecasts together as a unit while I now work with other web developers, designers, project managers, stakeholders, and users as a team to create successful projects. Both of these require discussion so that everyone is on the same page with what is going on in the weather world or the web world.
While there are many similarities between other fields and the web world, there are differences as well. Products built two years ago can be ancient to the web community while they can be new and innovative in the weather community. Working in the web consists of more long-term deadlines while the weather world contains more of a daily routine with hourly deadlines. Finally, web design and development opportunities are increasing while parts of the weather enterprise are being downsized.
All in all, the web world is different because it is young compared to most other fields. You have folks who are well-known within the web-community who started out in something totally different who jumped on an opportunity when they saw the impact the web had on the world. The web’s widespread influence on other fields, its youthfulness, and the amount of
resources online are also reasons why people in other fields can learn relatively quickly how to design or develop. These different backgrounds that people have help to create a variety of perspectives on a project.
The web is progressive as it always looks to the future for the next idea or innovation. Being one of the new kids on the block, it’s hard to keep up sometimes with how quickly things move. That’s why I continue to learn by reading books and blogs as well as use the successes and failures of projects to tweak my methods to approaching a new opportunity. Keep learning or get left behind.
One of the changes that has proved successful in how the web works over the past decade is that of a more collaborative and involved web team . Instead of designers drawing up comps in a dark corner and passing them over a cubicle walll to a developer to put into code, and then the developer throwing it back over the cubicle wall to the designer because they technically cannot work in the design, designers and developers are becoming more of a team. Who would’ve thought that design and development could be more of a group effort, talking together through the design and transcribing it into pixels? Tweaks can be made within the code instead of going back and forth between CSS and Sketch.
Be transparent with your work. Include the marketing team, stakeholders, and even the CEO in your meetings about the project. Obviously there are times where internal or separate meetings need to take place, but the clearer everyone’s top priorities are, the more successful a project can be. Kickoff meetings are a great way to include everyone so that those priorities and goals can be decided on and worked toward.
Work in a more modular way . What does this mean? Organize your project in a way where you can break your website down into a more component-based structure, breaking down the HTML, CSS, and JavaScript into more component based files rather than page based.
Methods like atomic design allow a user to not only compartmentalize components into separate files, but also allow for reusability across your website or application.
Set guidelines and principles. While writing HTML, CSS, and even JavaScript are relatively straightforward as coding languages, it is easy to let your code unravel into a mess. Old code, nesting of CSS, and lack of structure really clump together and start to look like the dusty stick emoji in Slack. How do we fix this?
1) Decide upon naming conventions. Agree upon a CSS syntax like smacss or BEM. We usually use BEM and add a c- in front of components’ class names and an l- in front of layout components to know what bits of HTML are controlling the component itself or the layout.
2) Use parent selectors in your CSS to prevent crazy nesting. If you are using a CSS extension like Sass, use parent selectors within your component. This will decrease the amount of nesting you do in your CSS and keep your code organized within that one component, rather than going on a scavenger hunt. If your code is more than 3 levels nested, you may want to rethink your process.
3) Space out your code. Instead of jumbling 3 different elements onto one line, space them out accordingly. Any element with more than one element inside, add spacing within. Spacing will improve readability of the code and make it easier to clean up or edit in the future.
4) Comment your code . If you ever had a computer science teacher, they always mentioned commenting and you ignored it. Now’s your chance to totally redeem yourself and comment your code. Comments are important, especially since websites, pattern libraries, and design systems are usually not a set it and forget it thing. They are usually iterated upon and massaged until golden brown, so you
better know what your code is doing or where it is ending. Otherwise, your recipe is really hard to follow, and you end up burning your toast and your head on the way to updating code you wrote months or years before.
Setting these guidelines and principles will allow you or another developer to easily sit down with your code months or years down the road and understand it.
Use your experience from your other field or fields to add a different perspective.
Just because you may not have years and years of web design and development knowledge under your belt, you can use your prior experiences to add a different flavor of personality to your project. This may help with the design and development of the product or the user experience itself.
Finally, be sure to challenge yourself and step out of your comfort zone . The more you’re thrown into the fire of unknown territory within web, the more you work hard to learn it and overcome the obstacles that come along the way. It’s through these experiences where you learn the most about yourself and about the field. It’s hard to survive in a field that is always changing if you stay within your comfortable bubble. Risk can lead to reward.
Transitioning from any other field to web design is not an easy task, despite the folks in Stack Overflow using phrases like “just do this” or “it’s easy. Simply do this.” If you can take your education from the other aspects of your life and direct it towards the web, learn as much as possible from the smart and respectful web community, and organize your work in a way that can be followed by other members of your team you will succeed in web design. Be grateful you have the ability to change the world through the web, continue to challenge yourself, respect your fellow colleagues, and share the new knowledge you have gained. Thank you.

Paul: Really good talk, enjoyed that. Lots of great tips about coding which I always enjoy. I imagine you got particularly excited about that aspect of it!

Marcus: Not particularly, quite excited.

Paul: It was more… It was a technical talk that the likes of us could understand which I always like.

Marcus: Totally, yes. Well I found it was a talk mainly about going from one thing to another which made me think “I wonder when we stop hearing I ended up in the web from…” You know, I was a musician. I guess, you are one of the few people who did kind of go straight into IBM. But you were doing sort of CD-ROM stuff.

Paul: Yes, only for about a year, less than that really.

Marcus: But, you know, there are a lot of people, like me and like Ian, who just ended up taking a full U-turn, left turn right turn, which ever analogy you like best, into working the web. And that’s going to stop, or is going to stop being so… Such a common thing. I wonder when that’s going to be. Things are nothing like as wild West-y as they used to be but I think we’ll, you know, from talking to clients or looking at the client’s view of the work we do they still see us as a bit kind of like, you know, “They’re the web designers, they are the crazy people” as opposed to being mainstream even though we’re not really. It’s a bit rock ‘n’ roll still to use those words again.

Paul: Do you think really?

Marcus: It’s viewed that way even though it isn’t.

Paul: Well is it viewed that way or is it just viewed as the sad nerd sitting in the corner.

Marcus: There maybe a bit of both but still… My point is it’s not mainstream, yet.

Paul: Hmmm, I know what you mean.

Marcus: It is getting more so. It is for us, I think, as an industry we are far more grown up, you know, from our processes and the way we work and all those kind of things, much more grown up than we were 10/15 years ago. But I still think that maybe the view from the outside is one of us still being a bit wild West like.

Paul: He made some really good comments, mind, didn’t he? You’ve written down, I’m just going to steal one of your points now. That keep learning or get left behind. I thought that was a really good line.

Marcus: Absolutely, you know, I always I’ve always thought that I don’t really learn anything but I’ve been doing this podcast for 10/12 years or whatever it is. It’s 12 years now isn’t it? I’ve learned tons of things from doing this podcast. So that’s the way I have kept up. You have to otherwise, yes, you will end up doing the same thing all the time and people will stop hiring you.

Paul: I liked, as well, “Risk leads to reward.” That was… That actually is a common theme out of this show because both Ian and, I forgot the persons name, Martin who is up next kind of talks about that pushing the boundaries all the time and moving forward, so that’s a very good one. Yes, he just had some very good stuff. His whole thing about empathy and communicating clearly and how important that was was really good. He talked a lot about collaboration as well which is a huge issue. And it made me… Especially between designer and developer, whenever I hear collaboration between designer and developer I always think about Ed and Dan sitting side-by-side, well, back to back with one another actually.

Marcus: It’s like a marriage those two.

Paul: They really are aren’t they! And Dan is our front end coder, developer and Ed is our designer, UI designer and just the two of them they bicker constantly, don’t they?

Marcus: Yes.

Paul: But they improve each other the whole time in doing so. It’s really… Is very cool. They work really well together.

Marcus: Very much so, yes. The only other thing, looking at my notes because I thought this is quite an intelligent point for me, maybe, it’s the point he made about people from different backgrounds bringing different perspectives. That’s really true and I just sort of wondered, I may be wrong in this, that maybe that’s why there’s been so much innovation and it’s been so quick is the fact that we are getting so many people from so many different backgrounds and walks of life and that maybe when all that changes and you, you know, go to university and you do a web degree and then you end up as a junior in an agency or whatever, that’s going to… You’re going to get the same people with the same viewpoint working within the web more, in the future whether innovation will slow because of that? That might be just how things work, I don’t know.

Paul: It’s an interesting issue because we certainly… part of being a young industry is that it forces you to look elsewhere and draw on other disciplines, you know, the most obvious is print design may be, but you could look at everything from architectural design, I think we’ve pulled quite heavily from, publishing fields, psychology, marketing and that’s just on the design side let alone the coding side which is drawn on game design, it’s drawn on software development, you know, all of these kinds of areas. So yes, it’s interesting will that go away?

Marcus: Or just reduce.

Paul: Yeah, yeah, it’ll never go away but yeah, I know what you mean. It’s an interesting one I like that. So yes, really great stuff. To be honest I quite enjoyed just the list of code tips he shared. It was interesting that he was talking about pattern libraries and atomic design which I have literally just re-posted an article on that and how important it is to have pattern libraries especially on larger sites. It is quite difficult to get management to sign off on that sometimes but that is kind of what I covered in my article. I think we are kind of done with Ian. I think it was a very… 10 out of 10 Ian, well done.

Marcus: Bye Ian, bye.

Paul: You get good marks. If this was American Idol which Marcus was keen that it should be.

Marcus: What!?

Paul: Well you wanted to. You wanted to judge everybody didn’t you.

Marcus: No I didn’t, you said that I wanted to. You may decide thing. You made it a thing.

Paul: When I say something it becomes truth. I am the Donald Trump of Webdesign.

Marcus: Well actually, on that front it was either last week or the week before I did finish the show feeling a little bit too judgemental. I think it might have been last week and I apologise to last week’s speakers if I was a bit too judgemental in my responses. I can’t even remember who they were or what I said that I can remember thinking “maybe I was being a bit too judge-y there”

Paul: Oo, let me have a look. That was Brent. Brent was talking about being an entrepreneur and Catalina who was talking about productivity. I don’t remember you being judgemental on either of those. Try harder Marcus! (Laughter) They were really good talks, there was nothing really to be judgemental…

Marcus: They were fantastic! Best speeches I’ve ever heard, talks. Apart from these two and the ones in the future and the ones before.

Paul: Yeah, they were all good in their own special way.

Marcus: Yeah.

Paul: Oh gore I am making myself feels physically sick now. Right, let’s talk about Teacup AdWords before Marcus gets any more obnoxious.

So, I got a tour of it this week because I know, obviously, Teacup Analytics very well and I use it all the time but I hadn’t had seen Teacup AdWords until this last week and it is really good. It is so simple, it is such a pleasure I’m going to be using it myself. I’m talking about doing a course on… Well I’ve done a workshop on persuasive design and I’m talking about turning it into a course that I am going to sell and I was wanting to experiment with Google AdWords. But it’s like every time I’ve used Google AdWords it’s just been a train wreck and I’ve never got very good money out of it and everybody else goes “Oh, you know, Google AdWords, you got to do Google AdWords.” And I’m like “It doesn’t make any money”.

Marcus: What do you use Google AdWords for? What would you use it for?

Paul: Well, Google AdWords, so if I was selling a course, on persuasive design, I would identify a set of keywords that people are searching for on, you know, persuasive design calls to action or whatever else and I would then put an ad in and drive people through.

Marcus: Yes, I suppose.

Paul: But a lot of people, you’d be surprised, the number of people I mentor who run digital agencies get work that way. You know, they target words like usability testing or whatever else and they win work that way. But I’ve never managed to get it to work and I can tell from your cynicism neither have you.

Marcus: No, money wasted.

Paul: Exactly, that’s what I kind of felt. But now I am beginning to understand after spending some time talking to Dean, behind Teacup, that actually a lot of the time it’s just because we didn’t know what we were doing, if I’m honest. I mean, it’s not our strength is it. I mean, escape is not a digital marketing agency, it’s not what you do.

Marcus: It’s not. I also think it’s to do with the kind of work that you are after.

Paul: It is, it’s true.

Marcus: We are looking for a small number of large projects a year and I don’t think I am going to find them via Google AdWords.

Paul: No, I don’t think you are either. And that is certainly not what this Teacup Adwords is aimed at either but what I guess I am saying I learned through this is that getting… to get value and to get AdWords to work for you you have to do it right and I hadn’t realised quite what was involved behind the scenes until I sat down and talked with Dean. It’s a bit like, I don’t know, anything really isn’t it. It’s a bit like SEO or whatever else. You think… What is it they say? A little knowledge is a dangerous thing. You think you can do it and therefore it doesn’t work and therefore you decide it is stupid. So, actually there’s a lot more to it but Teacup AdWords make it really simple. Basically you just start answering questions and you answer as many questions as you can be bothered to answer. More questions you answer the more it learns about your business and the more keywords it can find and the more ads it then generates and for each ad campaign it generates it also creates its own custom landing pages which is a really big factor that I mentioned last week. So they are all the time improving the algorithm, improving what is going on behind the scenes and they seem to be making it simpler and simpler every alteration that I see of it is getting… Is being improved and tweaked and I am working with them as well to improve the user interface and the flow and the journey. So where they are at the moment is that they are looking to get on some beta users that want to try it out and get early access to it and work with them, really, to improve the products. So if that is you, if you fancy having a go at it, if you want to be providing Google AdWords for your clients for example this is such an easy way of doing it. A lot, a lot easier than doing it yourself, manually yourself. So you can do it by going to Teacup Analytics. So there you go.

Right, next up we’ve got Martin Fraser. Oh, see, I’ve done it again have’t I. I forgot URL. Why do I always forget the URL with people?

Marcus: What, from the previous…

Paul: Yes, Ian Frost. I didn’t say his URL.

Marcus: IanFrostweather.com. You said Ian Frost and weather. And you probably said .com somewhere else.

Paul: So people have to assemble their own URL these days! Okay, so it’s IanFrostweather.com. Surely it should have been Ian frosty weather. Sorry.

Marcus: (Sigh)

Paul: I’m not going to let that go. So, back to Martin anyway. So Martin, you can find out, I’d better say the URL quick. Before I forget it which is darksnow.net. See, there’s a conspiracy going on.

Marcus: What’s going on!?

Paul: What the hell!

Marcus: I didn’t go to his site, dark snow…

Paul: This is like one of those, you know when speakers all get together at a conference and they say “Ah, let’s all sneak something into our talk.” That’s what they’re doing isn’t it? I reckon Martin and Ian know one another and they said "we’ve both got to get a weather comment in it somewhere. That’s what’s happened so Ian is a freelance web developer and a big fan of open source technologies. He’s been programming since the age of eight. Bloody hell, because he doesn’t, no offence Martin, but from your picture you’re not a spring chicken. You know, you’re not like in your, I need to be careful here. You look…

Marcus: He’s younger than you!

Paul: Younger than me! Yeah, but that doesn’t take a lot does it. So, he’s been programming since he was eight and has experienced every corner of the industry from frontline support, good for you, doing some front-line support. It’s a good experience… To embedded development. He specialises in Drupal now, of course it does, everybody is these days. Drupal’s cool apparently. I don’t know! What do I know about any of this. Right, so he’s talking about technology driven design. So he is going to argue that technology drives design rather than design drives technology. As Martin I’m going to have words with you afterwards.

Technology Driven Design

Play talk at: 41:03 – Since the early days of the web it seems to me that the technology in the browser, and our understanding of it, has always been the driving force behind advances in web design. I’d argue that rather than designers pushing the web forward it’s the technology that has allowed the designs to advance.

Martin Fraser – Technology Driven Design
I am Martin Fraser. I am a freelance web developer and a big fan of open technologies and free and open source software. While I’ve been programming since I was eight and experienced every corner of the industry from front line support to embedded development I’ve always had a love of the web and now specialise in Drupal. Visit Martin’s website at darksnow.net

There are many ways to approach the design of the website, the various paradigms of thought from atomic and responsive design and informing the structure of the code to the more aesthetic considerations of the interior design offer a bewildering array of considerations. All of this complexity and the industry in which we find ourselves is underpinned by one thing. The browser. I would like to argue that on the web we are living and working in the world of technology driven design. Throughout the history of what we now call web design there are numerous examples, some of which I will discuss here that show that it is advances in the technology that allow designers to build things on the web. From something simple like curved corners to big ideas like responsive design, designers working on the web have been driven by advances in technology available to them rather than good design pushing the web forward, it is advances in the browsers that are pushing design. It’s the capabilities of the browser that are powering what we build and therefore how we go about building it. Without the browser there is no web. There is no Ux and has wider implications, no discussions about Sumer North-ism. No Google. I’d argue that this makes the browser and the technology packed into its single most important consideration when designing for the web today. As Louise Sullivan said “Form ever follows function.” On the web I think that is doubly important. Clever design can circumvent the limitations of the browser to a certain extent. Inevitably this requires clever hacks with clever coding to go with it. These hacks usually require non-semantic code or extra markup and are inevitably slower and generally just a bad idea. As the capabilities of the browser improve with time these limitations are relaxed and the designer can help create more complex functionality. In all this limiting factor is the capabilities of the underlying technology. I created a curved corner affecting in CSS before we had border radius. This involves stacking block layer elements above and below the area that you wanted to put the curve around. And manipulating the margins to create pixel steps, effectively creating a curve. That idea was expanded on by changing the colour of these block level elements to create a glass button effect as was popular in OSX at the time. So this is a clever hack but required, as I say, additional markup to make it work. It was a bit bloated to say the least.
Another example of the progression in browser technology is interactivity in menus. When I started this we would have a simple list of links that would act as a menu. Then the JavaScript and early CSS implementations in browsers allowed us to add bits of code to the menu buttons themselves which would detect the mouse movement and swap out a style or a class to change the background image behind the button thus creating rollover effects. This was relatively complicated and as such was quite rare. Then along came CSS hover states. And then there was no need for JavaScript. Greatly simplifying this problem. Now we’ve got pure CSS transition states and a host of eye candy that we can apply in pure CSS. The options for designers have expanded greatly. The scope that designers have now is directly related to the capabilities of the technology available in the browser. The capabilities available in a modern browser are staggering compared to those earlier days and designers are keeping up with these new developments to produce more complex and engaging sites. These days rollovers and rounded corners are trivial so their implementation is less of a consideration. Take something like web typography. While a designer could have added any typeface they wanted to to a webdesign before the technology was capable of rendering them. The developer would have had to resort to rasterising the entire page or imbedding images for each letter or simply rejecting the design and using a system font. In practice what actually happened here was that the custom forms were reserved for headers, logos and other key parts of the site and they were just images. With the additional font face allowing them to import any custom font in the stylesheet designers could include almost any font they wanted. Here, the capabilities of the browser dictate the design for the simple reason that any workaround the support the flights of fancy of the designer were just not worth the hassle. With the addition of further technology like CSS three transitions the whole new avenue of design was opened up. We can now add simple animations to our designs and the implementation is almost trivial. While we have been able to do animation for a while it wasn’t until the technology caught up that they became a mainstay of the designer’s toolbox. Similarly things like clandside filtering or paralysed scrolling, love it or hate it, are only feasible in design because the performance improvements in the browsers render and the JavaScript engines. An example of the capabilities of the browser’s simply bypassing designers came from the early days of the web and is now called responsive design. The browser has always been responsive by design. When people started taking the web seriously and designer caught onto the implications of the technology the first people that actually design for the web rather than just developers exploring were generally print designers. These designers would try to impose rules on the page so they could use their well explored tried and tested techniques to create interesting layouts. This is typically expressed by asking developers, like me, a simple question. What width of the page you want the design to be for? My answer to that was always the same. What resolution is your browser? If an answer was forthcoming to that I would ask them “What resolution is my browser?” What resolution is the browser that that guy over there is using?“ The web has always been fluid by design. The shitty limitations and restrictions needed to be dealt with appropriately. Floats and fluid words have helped here a lot but due to designers wanting the familiar mental model we had fixed width designs. With the explosion of the popularity of mobile browsers this has really pushed it to the fore and rather than embracing new tools and the flexibility of the web we end up with a common pattern of m. domains. These were usually cutdown versions of the main desktop websites which would fit onto the bewildering array of mobile devices now accessing the web. Designers would decide what people really wanted to do when they were on the go and create a reduced experience for the reduced browsers. This allowed those teams to serve the tiny screens whilst maintaining their comfortable fixed width sites. This allowed those teams to simply ignore the design challenge always in the header on the web. The various tools that are appearing in CSS to allow for what Ethan Markot called responsive design gives us the flexibility to reorder and rearrange things based on the detected width of the page. But even with all that available the now commonplace idea for responsive design was hard one. Here the technology of the browser as always being available and was expanded over with its flexibility but designers where they misunderstood or rejected these capabilities actually held web design back. And it is not just the visual elements of design that depend on browser capabilities. Thanks largely to the mobile platform there has been a rise in location services for example. A designer could have crafted some location aware customisations to its site but what would have been required was the user to enter their location before the site knew where they were. Now the user just needs to give the site permission and the browser will automatically tell the user where they are. This aspect of web design would simply not be possible at all without the technology to support that simple interaction. With the addition of web RTC we can now address video cameras built into a lot of web capable devices. We can overlay that video stream with any Dom element like. Creating real-time videoconferencing in the browser. We can also overlay in HTML Canvas over the video feed to add information to whatever the user is pointing their camera phone at, all from within the browser. These are capabilities that not so long ago would have required a browser plug-in or more commonly a device specific app. At a lower level the addition of the XML HTTP request to browsers opened up a whole load of secondary considerations. With Ajax functionality available a site no longer needed to upload the entire page to make a change. Before Ajax we could use some frames or some other off-campus way where the designer would get content from the server without updating the whole page. The JavaScript to achieve this we usually complicated but Ajax changed all that. When it appeared in browsers it seemingly simple API changed the face of web design and opened the door to much richer interaction with the user. Not that long ago designer wouldn’t have considered building something like Pokémon go in a browser but the technology was there to do so now. We have web GL with full 3D rendering on top of that. We have web-based virtual and augmented reality systems to design for. All of this would have been simply unthinkable on the web just a short decade ago. A designer could have imagined these things but the feasibility of those designs actually coming to fruition was very small.
Throughout my career I have had people coming up with grand ideas and leaving it to developers to workouts how to make these things a reality. Everything that I said above would have been possible decade ago with enough time and a good enough developer but the solutions would have been subpar to say the least. To be a good web designer these days there needs to be an understanding of the underlying technology. A designer needs to know the capabilities of the browser the whole way round the corner. They need to know what is mainstream like flexbots and what can be looked at in future for inspiration even if it isn’t quite ready yet, like CSS grid. We are straying into the often repeated question of whether a designer should code. I would answer that with a simple ”Yes". I’m not saying the average designer should be able to build out a Davies driven CMS but you do need to understand the underlying medium on which they work. The designer needs to understand the HTML of the complex back end system might generate. A designer needs to know the CSS that allows a grid layout to exist. They need to understand the hex code for colours and perhaps even how a CSS transition works. I stray into saying that they need to understand JavaScript a bit. I don’t want designers who are novice coders creating code all over the web, I’m just asking for some understanding. A painter needs to understand how paint would be absorbed and bleed into a canvas. She doesn’t necessarily need to be a weaver, she doesn’t need to be able to create the canvas but any painter of any decent standard understands how their medium works. The sculptor needs to understand the grain of the vein of marble that they take the block from as they try to work out from it. They don’t need to extract the stone from the quarry or mine it themselves, though some do. They don’t need to be geologists but they do need to know how their medium functions. A carpenter needs to understand the grain of wood that they are working with, they understand how it will splinter if cut in a certain way, how the grain round the knots will look when a given piece are planed smoothly and varnished. They don’t need to be horticulturalists, they don’t need to plant and grow their own forests but they need to understand how their medium will react. A good web designer should have an understanding of their medium. While the web is a complex beast and I wouldn’t expect a designer to need to know the difference between SSL and H2 but I wouldn’t expect not to either. They should know how to use absolute or static positioning in CSS and perhaps what animation changes would would cause a repaint. All of this adds up to what I think is an inescapable conclusion that technology drives the design. A good web designer should understand the technology that they are working with and understand that it would be difficult or impossible for a developer to implement and design the site under those limitations. Far from stifling out the designers creativity it is those limitations and restrictions that require a creative solution. From things like curved corners, the addition of typography, new CSS transitions, something like client side filtering in react and parallax scrolling. Even the ability to have a website scroll sideways rather than up and down. These are all capabilities within the line browser that the designer needs to know. It’s the improvements in these capabilities in the browser, in the technology that is pushing the web forward. Looking to the future, it is not just the browser either with chatbots and direct speech interfaces becoming more prevalent the remit for what considerations a web designer should have has expanded greatly. A decade ago a web designer wouldn’t have to consider the complications of conversational UX, of spoken tone of voice or shared vocabulary but now, again, thanks to the advances in the underlying technology that is where we are at. If designers don’t keep an eye to the future and embrace the technology in the browser then the web will stagnate, we will never push these things forward.We’ve seen the design on the web become more and more complex along with improvements to the technology that those designs run on. While through things like the W3C working groups designers and developers can push the browser and add new features to further the design goals. It is the technology in the browsers today and all the future todays to come that define what is possible on the web and it is that technology and how we can push it that drives web design, as it always has.

Paul: Okay, so that was Martin’s controversial talk.

Marcus: But was it really?!

Paul: No, not really. But you’ve got to make the podcast sound more interesting.

Marcus: Okay, yes fine.

Paul: Hmmm, he is of course right in what he is saying.

Marcus: He is, yes.

Paul: But here’s the question that I have got, right? If people hadn’t started tapping rounded corners would the browser manufacturers and the CSS working group added rounded corners as a piece of, you know, something within the spec? Do you see what I’m getting at?

Marcus: Yeah, totally. I think that’s a little bit of that is probably the case but generally it’s been about whatever the browsers can do easily has led what designers have done. Because I am aware of this, I am not disagreeing with what you have just said by the way Paul, I think there are certain things like that example which would, you know, therefore make it a consideration to make that happen more easily. But over… years and years and years and it still carries on, I’ve been having arguments with our developers team, our team of developers about when we can drop browsers so that we can start using new functionality, that basically allows us to do new stuff. So this is quite a… Just made me think that you are absolutely right, the recent one… I’m struggling to remember the name of the technology.

Paul: CSS grids?

Marcus: It’s not CSS grids, it’s one previous to that. Oh, damn.

Paul: Now you just embarrassing yourself. This could be something really obvious isn’t it.

Marcus: It is! Anyway. All right, move on. Come back to that. I could easily drop it in later, afterwards. Do a bit of editing! No, but I can remember going to a smashing talk two years ago when there was somebody talking about this particular technology, of which the name escapes me now, and I came back and said to Dan “This sounds great” and he says “Ah yeah, but IE9, can’t do it.” So obviously we’ve been talking about that for the last couple of years and we decided that IE9 can go and take a leap really. Not for every site but for most now so we can start using this particular piece of technology that is completely escaped me!

Paul: Yeah. And it’s not like it needs to go away completely, you know, it’s not like “Oh, if you go to this website in IE9 it’s going to just break”.

Marcus: Flexbox.

Paul: Flexbox, okay, there you go.

Marcus: There you go, it came back to me.

Paul: So, there you go. I actually think I could name quite a few examples. I think the W3C working group is a lot more influenced by us as designers and developers than we think. I mean I would need somebody grown up like Rachel Andrew to tell me whether this is true or not but, you know, the introduction of web typography which he mentioned I bet you that was driven by them looking around, looking at what’s out there, seeing that everybody is creating inaccessible headings using images and going “We can do better than this.” Or layout, CSS grid layout is a direct response to the layout that people have been seeing, you know, that they have seen on the web. So I think it happens quite a lot. That said, absolutely design is constrained by what technology the browser supports so Martin is 100% right. But the other thing that I would say as a designer is I am not, well, yes, no, I’m going to stick by the term designer. I am still a designer!… Is that more freedom doesn’t always equal better design. So take for example web typography, okay. For years you were very limited in the fonts that you could use and so I actually think those constraints… I mean setting aside… The obvious one is; now people can use every font in the world, they just fill their website with lots of horrible different fonts and it looks terrible. And, you know, they use fonts that aren’t really appropriate for the web and blah, blah, blah. But setting that asite lets pretend that that couldn’t happen. Even then the fact that we were limited to a handful of system fonts made us focus more on other elements of typography that we could control, you know, line length, kerning, colour and layout and the other aspects of typography that actually created a nice typographic experience, okay? So we were looking at typography more broadly than just “Oh, let’s just get a font and slap it on.” Also another element is that good design, especially the kind of design that we do, it is about the complete user experience and performance is a big part of the complete user experience and web fonts can begin to get quite heavy and slow the website down. So, I wouldn’t say more freedom always leads to better design.

Marcus: Yep, I agree. I also agree entirely with his point about… this what you are talking about, this particular subject is a very good reason why designers need to understand codes and how browsers work, but I would say it’s not just designers, it is people like me too.

Paul: Yes.

Marcus: I need to understand this stuff very much so. Unfortunately people talk to me about it all the time so I do keep up but yes, this isn’t just about code, i.e. a designer designs something that maybe is hard to code. It’s about understanding technology which is slightly different subject.

Paul: Hmmm. I mean, there is an interesting downside. I do… Let me be absolutely clear, I absolutely think a designer should be able to code but one of the associated downsides with a designer knowing how to code is that designer can then start to self censor themselves in their design because they are worried it couldn’t be built. All right? Again, it’s this “Little knowledge is a dangerous thing.” You know, actually there have been times where I have thought something isn’t possible and Dan has made it work because Dan is a bloody good coder, much better than I am. You see what I mean?

Marcus: Yes, yes, totally.

Paul: So there is a danger that you allow the technology to limit your design and so your design thinking shouldn’t be too heavily influenced by how it is built. Now, it is a balancing act isn’t it. But it is an interesting area. Cool. Well, there you go, Martin, brilliant talk it got us both talking and thinking, which is good. Right, Marcus.

Marcus: I have a joke. This is from Martin Byrne in the Boagworld slack channel. “Did you hear about the jurisprudence fetishist? He got off on a technicality.”

Paul: Do you know, it took me an embarrassingly long time to understand is that one.

Marcus: I thought it was very good. Clever person.

Paul: Very clever, yes. A clever joke, not really suited to this podcast.

Marcus: No but you know…

Paul: We like to stretch our listeners once in awhile. And to be honest I’m quite glad that I’d seen that in the slack channel before you told it because otherwise I would be sitting here going “What? What!? Why is that funny.” So, it’s a good job I had time to think that one through.

Marcus: I could have done legal fetishist not jurisprudence as a bit of a kind of…

Paul: That’s a long word, fancy isn’t it, yeah.

Marcus: Legal fetishist.…

Paul: All right, that’s it for this week, we’ll be back again next week but until then thank you very much for listening and goodbye.

Marcus: Bye.

Boagworks

Boagworld