Internet DNA Podcast

A swiss army penknife is the perfect way not to create a mobile app, letters to Google and screens are wider, so how wide should websites be? The usual long route from A to B (without an old-school map).

Transcription

(this transcription is written by robots… so don’t be surprised)

Hello and welcome to this week's episode with me this week. I want to talk about break but not lids. Dan does. So if may move into prototypes or somewhere else, but break points to me are a source of, I don't know, a den of iniquity. Could it be that a mine of something or other or a complete black hole? Actually what are the optimum bootstrap break points on these days?

There's actually a way of working this out, which is if you were to plot all the screen sizes between let's say zero and 1920 because I don't think anyone with a bigger monitor actually ever looks at it full screen.

No, I agree. 19 Times is the biggest yet

so and if you plot all the screen sizes so you can go to any number of sites that will give you statistics on screen sizes and web use and you plot them all together. What you'll find is that they group into little sort of sections and generally the accepted idea is that it's (600) 900-1200 1500 you could do it at 400 a hundred but the thing when you start doing that, it's a lot of the screen sizes, you'll find like seven six, eight and then nine 60 and actually those screen sizes aren't that different. And so what you'll find is if you put them all onto a grid line, you will find spaces in between those groupings and they're the places where you should break the points. And you will find just because of the way that monitors are, that they're always divisible by two five, six one way or another is that it works quite well when you do it in that way. Because I use eight point grid, I sit as close to six nine 12 and 15 as is divisible by eight

right. So that's my next question. I completely agree with you on that and that's what I designed too as well. But I was pushing a client to let me design for a wider container than the 1,200 saying actually I could make more use of this space on in the UK, in the u s and probably Europe and a lot of other places on a majority of laptops and screens these days. And so he said, fine, just to create a new break point for me. And I thought, did I go 600 words? I got 500 and if I get 500 what is the break point once you've added the container? So in the end I went for team 40 because that was 12 columns of 90 with 15 gutter either side and then giving you space for the container on the outside. Is that correct or should I have gone slightly?

Oh, okay. So basically you have to understand what your grid is. So I use a thing called an eight point grid. So I would always use something that was divisible by eight because that's the way it works. But the key is that you, what you don't want is that your breakpoint actually sits at a resolution. So for instance, if there's a rather solution of 1440 by eight 68 is there is, you don't want that to be your break point because it's actually going to sit right on the level. What you want to find is the spaces in between the groupings of resolutions and then use those as your break points so that you've got very clear points where they will break, where the next side screen is going to work properly. Now, most modern screens are now at what's known as a 10 80 so that's 1920 by 10 80 which is I guess called HD originally when that was a big size, but almost all new monitors are that size.

Very few people do full screen unless they're using business apps like email and that sort of thing. Most websites don't extend that wide because you start to get into a really awkward situation where let's say you had six columns and now you're collapsing them down into one column, you're getting gonna get a problem with ordering and actually is that vastly too much stuff on it. So now you're going to have to get into a, not just responsive but adaptive where you say, if we're into this break point, then start adding this kind of content or you can now add this rather than how do I fold all of this in and out? Actually this comes from what people pay a lot of lip service to, which is mobile first, but very few people actually do, which is to design the mobile screen first and then to say this is what it would look like on what used to be called tablet screens, but that slightly wider thing up to about a thousand pixels where you say, okay, these devices you can start to show more because there's more real estate to show it and then once I'm on to a desktop or if I'm onto a really big screen, so it's rather than trying to reorder everything, you actually start to add in more complexity perhaps because there's more real estate in order to display that complexity in a meaningful way.

One of the things I often find is that mobile apps are obviously very limited compared to that desktop, Varian. And that's actually a purposeful and mostly correct way of doing it because you're on the mobile, you should say, what do I absolutely need to show? And then by the time on my desktop you've got more space. You can say, well actually we can add this in. It helps and it expands on it. Given the added space.

Well they'll say you have to think about what the user is doing and how the phone or the tablet or the laptop is being used within their life. And it may be that they're on the go with the phone and so they're rushing and they're holding something in their other hand and they've only got some. Whereas on the desktop they're either on their lunch break or they have sat down to do a particular task.

Yes. And so that's time. So context is everything. What are they doing on mobiles and what do they do on desktops that they don't do on mobiles? Because maybe the process is too complicated on a mobile banking apps are quite like this. You get, let's say the seven functions that you do a lot are usually on the app, but all the other functions that you very rarely do, they generally are on the website or they have a process, let's say like a loan process. That's something that you might decide when you're prototyping the thing. Actually, we don't need this on a mobile. People don't do this on a mobile,

and that's an interesting point because when you say people don't do this, we've decided that people don't do this and we may have done quite a lot of research, but I often find in the mobile version that it is missing an integral part of how I use that website and I find that on Gmail, which drives me insane that I can't select the mark as unread on my phone. Well, the thing I really want to do is select mark as unread because I may have glanced at it on my phone and I went to come back to it on the desktop. You're going to tell me I should start it, but that's not how I work. Now the same happens on a banking app and actually the same happens on things like airbnb and TripAdvisor, rentals, that things that I need to do are not possible on the phone. I have to then go and sit myself down. That's to do it. This is big a host and so you have to be very careful with what you cut out and go. People don't do that. If I was a sort of like to complain, why would we be sending emails?

Well I'm not saying is that people don't want to do it or the odd person may wish to do it, but you've got to be very careful when you're building mobile apps that you don't basically create a Swiss army knife, which while it has all the functions, none of the functions are as good as having the single tool, you know? So. So the Swiss army knife has, it has a saw on it. Toothpick Swiss army knife has a sore on it. It's not as good as I saw a Swiss army knife has a pair of scissors on it. They're not as good as a pair of scissors. And it's the same thing.

And as soon as, I mean I've has at least three things that you have no idea what they're for. Oh I'd forgotten the joys of guessing. You do your Duke of Edinburgh or Boa where you sort of had spent an awful lot of time with not very much stuff probably before Greens and you would guess what all the items on the Swiss army penknife are for.

Yeah. So I do a lot of biking and obviously when you go biking you use multi tools cause you don't want an entire tool set in the back of your bag. But it's almost always the tool you need right now isn't in your multi tool. And often they have a thing called a chain breaker, which I actually have to carry a proper chain breaker with me because the one repair you sometimes really have to do when you're out and about is to relinquish Shane. You might snap a chain, you have to relink it. And the ones that come with multi tools are so bad that they're almost not worth having on the multi tool. And I'd rather than they actually had like a torx 25 that I do. So that's

Allen keys. I am sure there are only ever two types of Allen key gurus, but the Allen key comes in a kit with 24 like could we formalize, put in a European rule and then move out and put a British. So you only ever be to Allen key sizes?

I think it was the Japanese, like the toolkit in the back of a Japanese car basically only had four tools because they just standardized, it's either a 12 or it's a 16 if it's a big one or it's a bolt, that's it. Whereas British cars, you literally need an entire garage just to change the sparkplug because nothing is the same size. And that process of engineering is exactly what you then take into web apps, which is, it's not that some people don't want to do complicated things on their mobile because they live mobile lives. But the fact is is that it has been decided to stop the entire app becoming fairly difficult to use for everybody. But it's better that a few people are slightly inconvenienced. And so it's like, it's like packing, it's very much like packing. So when I go on holiday, I take my hand luggage and it's hardly got anything in it. I mean it just bubbles about in it. And then I see people going on holiday who might even be going on holiday with us who've got four things that are going in the hold and I can't imagine why you would need four suitcases to go on a beach holiday.

Are you doing occasions? I pride myself on minimal packing. So yeah, you're talking to the converted there. Yeah,

exactly. And I think you have to apply the same thing too.

It's exactly the same, isn't it? We're talking about user experience here and it's looking at what is absolutely needed. And as we talked about UI design, it's just as important to remove things as it is to put things in, and that is what I do with packing. I put things there, then I start taking everything out again. I agree it's exactly the same, but I still want to say to Google, please, can I have my mark as unread button back? Yes. However much I'm unpacking, they want to do. I want that in my suitcase.

And what you will probably find knowing Google isn't it? Is there, it's just some weird swipe. You haven't worked out yet? No, no.

I've tried every sort of swipe and all I do is delete things and put them in obscure places. I've never been done again. What is an archive? I've never archived anything where ready it go.

It goes into all male. So the way that Google mail works is there are no folders. There are just labels and so when it's in the inbox, no. Do you think they're look folders, but they're not folders because you can have things in multiple folders. You can file things in Google mail in seven different folders because actually they're just labels. It's quite a distinction. A folder is like you put something in a folder and that's where it is. He can't be in two folders. It's only be in one folder because that's what a folder means. If you take the anamorphic representation of a folder, I take a piece of paper, I put it in a folder. I can't put that piece of paper in two folders. A label is, I stick a bunch of labels on it in different colors and it doesn't matter. I can say, right.

I'm looking for things that are purple label on it and I can pull everything out with a purple label. It may also have a green label and a blue label, so inbox in Gmail is just another label. If you actually look at the email at the top, you will see that it has the label inbox and when you archive it just removes the inbox label and if you haven't put another label on it, it just sits in all mail. There you go. I want to explain something to you. I'm riveted. See, I really like it because for instance, let's say I get a third party invoicing, I'm going to a label it that that's come from that side party. So my hosting company, I'm going to label it that that's related to this client and I might relate it to,

yeah, but you have a really nerdy brain. I know, but I go like, here's a folder, I'll put it in there. I'll put it in invoices. Yeah. And then I'll use the search tool to find it. Because have you ever actually gone to a folder to look for things? No. You just search.

Oh yeah. But I use search to say in labels, so I say in label, client name invoices, and then I'll know that I'll get that client's invoices. One of the things I do a lot is create filters. So very little of my email actually goes into my inbox. I file it automatically into folders, and then I only show those folders if there's unread email in them, and then I can go, oh, I've had an email from so-and-so and I can go back.

Oh No. I could never do that out of sight, out of mind. Yeah. That's kind of part of it because sometimes I'm not in the mood to deal with certain things, which is why you need the mark. I'm red so that you can go, oh, can't be bothered with that. Bark it back is on red and leave it until you got the right kind of way. I deal with that is I don't read them until I've got the brain capacity. Then I'll open that email and have a look at them. You just get a little bit of a feeling like you've just got to click on it and then you go, oh, I wish I hadn't markers on red, but you just can't help yourself. It might say you've won $1 million in that and you just have to check in case.

I think because I've used Gmail for such a long time, I've got like 84 things in my starred email, which are things that I actually need to deal with too much from my email is what I call nonsense email NTR stuff. Please don't reply to this. I'm telling you something you don't need to say thank you. I'm assuming that you're saying four

that should be a pass tag and I'm assuming you're thankful they started emailing me back. You're thankful. I have a thing. I actually,

we use it internally where I put an NTR at the bottom of things, which means no need to reply and people know that now. And I also have a filter that says if I get a reply to an NTR, just mark it as red and fire that cause it's just going to be someone saying thank you. I'm a little bit nerdy as you say.

It's a bit like when you say thank you in a car when you're passing someone. And I used to get really crossed the Eddie my husband that people couldn't see hit when he just sort of raised his finger and then he pointed out that me sort of taking two hands off the wheel and waving frantically. And my thanks was probably a little bit extreme as well. Yeah, there's probably something in between raising a finger one edge and waving like a fraggle out of the window in the tree. There's, they know that I really, really, really thankful either that were in terrible distress. One of the things I wanted to go back to because I haven't finished my conversation on breakpoints. Of course. Obviously this motor break points are all fine, but it's only recently that we've had that fourth right point. The larger one, the 1,500 interviewers saying that I shouldn't have done 1,414 was like, what size should I have done and what do you mean by eight point? I worked for 12 column grid.

I mean you and they were super nudges. Okay. So if you knock something, it moves one pixel to the, whichever way you're nudging it, if you hold isn't shift. If I was sitting at my computer, I can tell you and then press left. They will move it. What's called a super nudge

like that. You can teach your grandma to suck eggs. What program are we talking about? That I can do Super Nerd,

I think any program, I think Photoshop, does it illustrate it, does it? I use sketch and sketch certainly does it. So all of these things, so basically you set it that the grid is eight it has seven subdivisions, so every eighth line is eyed hard line and then everything is a division of Eight. So,

but it's no, I can't have three columns with eight.

No, no, no. But what you'll say is right, what I'll have is I'll have a column that is let's say 96 pixels wide. I have four of those in a column. And then if I've got four columns, I'll have 16 columns and then the gutter is, every measurement is divisible by

instead of my guts. 15 [inaudible] 16 or eight

exactly. And what that does is it removes the 15 you'll never have 15 what it does is it removes all the in between spaces. So it's literally every eight. That's what you can have. So you say, right, my gutter is 32 my spacing between the edge of a button and the words is 16 pixels, blah, blah, blah, blah, blah. And it all rolls out into these eight by eight. Now, the reason why that's quite clever is because all screens will be some division. There's by through five, six Kanga.

Okay, so you think about political here is still dodging my question. What size should my grid have been for the larger 1,500 plus screen?

All phone sizes sit less than 600 all tablets sizes sit less than 900 chapel landscapes, it's less than 1200 almost every desktop resolution sits between 1200 and 1800 and then you have massive screens that are totally separate. So by four column, the fourth column should really start at 1200 so you'd do one column on phones, two column on tablets, three columns on tablet landscapes, four columns for desktops.

I do see what you're saying, but it's still not answering my question. If I use four columns, what width should that container be? Designs are responsive and I build responsive designs all the time. And when I'm using sketch, that's much easier. However, I sometimes have to do flat designs and I have to combine flat zones. Yeah. And I provide them at different break points.

Well, if I'm doing flats for people, I do three 60 columns because they're basically inbetween 300 which are the smallest and 400 which are the biggest, and then generally the size where everything looks so it's correctly condensed, if you know what I mean. Because at 300 everything's a little bit tighter than you would probably want it, but it still works for hundreds of little bit wider than you would really want it. You know, unless you're using VW, wherever it is actually scaling dynamically with the screen size, then normally what you're doing is you're adding wit because the screen is getting wider. So I would do flats at three 60 because I'm an eight point grid man,

which comes out at 1,440 which is exactly what I did. Yeah, so I was right. One along.

Yes. Okay. I'm not going to argue with you,

but you're saying that I shouldn't have done that size. You have on any website, a maximum container size. Now that might be full width, which means it keeps going forever, but normally you will constrain your content, not including banners and things. Not always. Some designs are literally designed to full width, which is great, but most will say once you get to this width, you then get white space either side. It does not stretch any further. Right. And it used to be, once you hit 1,200 or a container of 1,170 then it stopped. There's no more stretching and you just have wait space. Yeah, but I want to go larger than that. Take the client who likes flat designs because I felt that actually 1,200 is quite small. So I've said keep stretching up on these columns until you hit 1,440 and then you get your clear space.

Okay. That's not a CSS breakpoint. I'm not going to write a media query saying if you're over 14 forward. Yeah, because it's going to hit the Max width as a container and it's just going to stop for obvious reasons.

But I am suggesting that the Max container width should not be at 1,200 I'm suggesting it should be widened.

Yeah, I totally agree with that. Yeah. That would be a perfectly fine wit to stop that because it's not a break point. It doesn't matter. It will go to the Max width of that screen, and then any bigger than that, you keep dragging your browser out. It's just going to sit in the middle and just have white spaces or something.

But what you're saying is actually, if it's four columns below, 1,200 should drop to three because actually that's getting quite small. Yeah.

Yeah. Obviously it depends on different types of websites where you're not presenting a vast amount of information. It might not be so much of a problem where you're doing something like a blog. It might mean that longer titles start to drift over four or five lines, and that may not be what you're looking for in the design.

Right. Okay. That's all we have time.

Oh, good bye for now.

—

Dan & Abi work, talk & dream in tech. If you would like to discuss any speaking opportunity contact us.