Per: OK. We’re fully dressed.
James: Yeah, hold on. You’re making me very confused now. So we’ve been here for an hour and you said, “And now we’re fully dressed.”
Per: Don’t go there. You’re always confusing the listener. I was going to explain one of the fun things about doing a podcast is you don’t really have to take a shower but people don’t really care what you look like or smell like because you only had to listen to our voices, our beautiful voices. When we decided to do this – we just decided yesterday. You made a joke that when it’s coming over here early, that you wouldn’t be fully dressed probably.
James: I said that you were scared of Jimbo flesh.
Per: Yes. Thankfully you were dressed when I came over here. You hadn’t had breakfast yet.
James: No, I hadn’t.
Per: Oh, well.
James: Sorry, I’m fully of food now. I’m dressed.
Per: Yes.
James: Everyone is dressed. To calm you all down, we’re all dressed.
Per: But it is really hot and it’s getting hotter in here.
James: Yeah. People who have been listening to this show for a long time will know that the – well Beantin HQ, the studio where we record this, during the summer months, it does get warm in here but we’re only up to 24 degrees.
Per: And we have entertainment because just outside our window there are bouncing kids. Well, two right now but …
James: It’s just two but not the same two as it was a second ago, the trampoline in the garden, which we can see from the studio window.
Per: Which also is a good test of the soundproofness of your studio and the quality of our microphones.
James: Yeah, and the loudness of my kids.
Per: Yes.
James: It’s not going to go well, is it? So what are we talking about today?
Per: Well, I think it was last Friday. Bruno Figueiredo, you will know him from UX Lx, the curator of the UX Lx Conference.
James: And we talked to him in one of our …
Per: Yes, we did on the first conference show. He posted on Facebook about screen sizes and he was looking at statistics and seeing that with the 1440 pixels is becoming more and more common, 1440 and wider and the general question was, “Should we start moving away from the 960 pixel width standard of our designs and go higher than that?”
My first thought was well, hold on. We have all these tablets and mobile and we’re thinking mobile first. Should we start going wider? But then I realized it was like – it was a good question partly because mobile first is valid in countries where mobile first is true but also as you pointed out to me James, clients are still designing or wanting websites that look like websites.
James: Yeah, there’s an actual element there that it’s not just about the kind of design utopia. You still got to – a clients relationship and a lot of times, they’re going to want to have a desktop design or something they can give an opinion about and look at and I know that you have to deliver that kind of thing quite a few occasions.
Per: Yeah. And other stuff going through your head is like, “Oh, do we go wider?” Does that mean wider columns for content? I mean must decrease legibility and readability and all that stuff. It would be so hard to read. What would you put in all that space? It’s like some Manhattan architect seeing a new space and you have to build something there. But do you really have to fill every space on screen just because people have bigger screens?
James: You threw a lot of questions out there all in one go. But I mean the 960 grid, there has been the – that has been the kind of foundation of a lot of the design work for a long time.
Per: And people have loved it.
James: Well obviously about 2007 or something, 2006 or something like that.
Per: And it has worked nice because it split it into four columns, six columns, eight columns.
James: Exactly. It’s a beautiful number. It came along when laptops suddenly got bigger. We got bigger screens and desktops and monitors got better and we end up with these 1024 by 768 4:3 aspect ratio screens and 960 became a real good thing. Everybody stayed with it. It was across the board. It was valid but then I think for the – when I did a little research last night, I saw that basically for the last I think five years, you can find articles talking about, “Is it time to move on from 960? Is 960 dead?”
So even before the mobile revolution, people have been questioning the 960. Should we move up? And now …
Per: Is that probably because as a designer you’re aching, aching to design new stuff that fits the screen that you’re on everyday?
James: Or as an agency or something as a team delivering to the client. You want to deliver that little bit of magic, that new thinking to push you ahead of the crowd.
Per: Yeah.
James: But then we got the whole mobile thing comes and we’re all going to mobile first and small things first. So you get people saying, “Well 960 is dead because we shouldn’t be starting with 960.”
Per: Now the interesting thing of course then is can we even have this discussion about what size to design for without knowing what we are designing. That’s kind of funny. So when we talked about this yesterday, we thought, “So how do you actually decide what is the best screen size to design for?” It’s really impossible unless you actually know what product you’re designing, what goals you have.
So I mean the gut feeling is start looking at statistics like Bruno did and seeing that oh my god, people are using all these large screen sizes now. Should we start taking them into account? Then the research you’ve done James is pointing out that people actually have large screens but they’re maybe not even having the browser maximized meaning that they really don’t have the need for actually having that big large real estate screen size that you’re designing for.
James: Well, we talked about, for a while ago now, I think it was autumn last year. Jakob Nielsen, he altered his recommendation. I think it was – how long is that? It was the end of last year, I think it was. His recommendation for what width design for from 1024 wide to 1440. He went up 50 percent in his recommendation based on screen resolution research he had done showing people are using screen resolutions that are huge amount bigger.
Per: That’s about the time when we started wondering if Jakob Nielsen was getting high.
James: Oh, we just presumed he was not writing the articles anymore. He was getting a student or something to write them because there was a whole row of articles there which were just off the wall. They really weren’t quality and good like they used to be. One day we have to interview him.
Per: Yes, we do.
James: But anyway, so what I did, I updated my – I’ve been doing viewport research for a few years now and I’ve created methods that can help you log viewports in Google Analytics. They log it themselves on Google Analytics but you can access the data in a good way.
Per: So just to clarify now so that everybody is on the same plate. Viewport size is the size of the browser that’s – the actual screen size. Do you have the definition? That what you’re seeing is the viewport. I mean you can make your browser smaller and then the viewport is what you see.
James: But your laptop still has the same screen size.
Per: Yeah, exactly.
James: But you’re using less of it for your webpage.
Per: Right, yeah.
James: So this is the viewport. It’s the real estate you’re actually using to put your webpage on.
Per: Right, and you also have to subtract the address bar and whatever …
James: Yeah, this bevel around, stuff like this. So everything has a viewport whether it’s mobile phone or it’s a smart TV or a laptop. You still – there’s a bit of the screen you’re using to show a webpage on.
Per: So you could basically say that the webpage is never the size of the screen.
James: That’s impossible.
Per: Unless you’re maximized.
James: Now, it’s not – I think even then you find that it’s like a one pixel bit here or there.
Per: Yeah, OK.
James: It’s difficult to watch it getting maximized even on tablets because you even got pixel density ratios.
Per: Right. Oh, that’s another story.
James: We don’t need to get into it just now really but I mean it’s complicated. My research, I’ve seen – I’ve been monitoring, I’ve been tracking the viewport size on Beantin.se for three years I think now or more and I’ve seen the resolutions of visitors go up. I mean there’s just a lot more huge screens anywhere. These Retina Displays are two and a half thousand pixels and so on.
But what I’ve seen over the last two years or so is that the width, the average width hasn’t really increased. It’s still hanging around the kind of – well, 1280 or just under 1280 wide.
Per: Yeah.
James: And it has been like that 2010, 2011, 2012. It has not got bigger. I’m excluding mobile from that because this is – when we’re talking about these giant screen sizes, I think it’s relevant to talk about just the desktops.
Per: So can we make any assumptions about why that is? Is that like people don’t like to maximize their browser even if they have bigger screens or …
James: I think you would have to do some proper research onsite with real users and what’s their behaviour because you can’t see that from your statistics.
Per: Right.
James: But I know from ones I’m looking around is that the people who do have the giant screens, I’ve seen – what I see there is that there were maybe two side by side that you and I have a giant 27-inch screen. You’ve got two Safaris or you’ve got programmers for example. This is where I see it quite often that they would have test version of – webpage will be open on one side and then the other side would be the coding screen.
Per: Tools and Photoshop.
James: Or where they’re writing, when they’re doing something. So that’s huge split screens. We used to have – I mean I still do. I have two monitors here in the office.
Per: Right, yeah, and I like to do that as well.
James: So these giant screens, they just allow you to have two screens.
Per: Yeah, to see more at the same time.
James: Yeah, because you’re viewing angle – you can’t look at these big screens all at the same time. You’ve got to turn your head.
Per: Yeah.
James: So if you designed a website that was two and a half thousand pixels wide, a person looking on the content of the left of the screen would have to move their head to see the content on the right.
Per: Yeah.
James: That’s a design that’s huge by itself. Interaction design, how do you solve that? So you can argue there’s no point trying to fill up that space because it’s – most people are not going to stretch your site that wide.
Per: You also have to think about the incentive from manufacturers to actually build these fantastically large screens. It’s not so that you can view your webpage or your corporate webpage in a fantastic, beautiful big size in which case you would like to have to stand 20 feet away from the monitor to read it correctly. But it is actually too that you can get more work done faster and you can multitask and see stuff at the same time. So you can put windows side by side. That’s the main reason for these monitors …
James: These desktop screen sizes, yeah. Then smart TVs have a massive resolution as well.
Per: Yes.
James: People don’t use the browser on them because it’s awful.
Per: I tried.
James: It’s horrible. Interestingly there, if you do run the browser on them, they don’t use the full resolution anyway.
Per: Oh, yeah. You were saying that. It’s interesting as well. So I mean you can’t even …
James: They adjust it so that they’ve had to zoom in without getting too deep into the ratios and things. It’s not about the pixels that you kind of – you’re being sold. It’s about the way that your operating system or your laptop or device is presenting those pixels to you or that real estate to you.
Per: And should we really even be talking about pixels anymore? I thought we were beyond all that. We should be talking about the content, the content living in any device and you guided me into this article that you were reading yesterday and life beyond 960 pixels, designing for large screens in which …
James: That’s from last year, wasn’t it?
Per: Yeah, I think it is and Ian Yates, he makes the case for the responsive. Then you don’t always talk about responsive in this way because you always think about responsive web design being as something that you do to accommodate mobile devices. But responsive goes both ways. It goes smaller. It goes wider.
James: Exactly.
Per: So responsive is all about accommodating the large screens and he makes a lot of examples or provides a lot of examples of what could you do with this new real estate that you have.
James: Because we have to fill it.
Per: Because we have to fill it and it does make a point in the end that you don’t have to fill it. It means you don’t have to fill – the obligation to fill every space on the screen but it does provide some examples of what you could do, like have more right hand columns, move the footer to the right hand side and again, that’s why I don’t like responsive because you get disoriented when you’re actually moving from one device to another on the same website and you can’t find this stuff where you expect to find it.
James: Was it his article that had the Windows 8 screenshots?
Per: Yes, yes. It was.
James: I love that screenshot because it shows Windows 8 like on a tablet and a reasonably regular smallish device and it has got like 12 bricks or something or 16 bricks, something laid across. It looks – and they’re all on the Microsoft standard, nice colours, the primary colour kind of thing and orange or so.
It looks really quite stylish and nice and then there’s a screenshot of someone with a 27-inch monitor or whatever it is and they filled up the whole thing with tiles and that must be like 150, 200 tiles and it looks like your grandma has made a patchwork quilt from all the leftover material you had.
Per: It’s impossible to find anything.
James: It’s just mad.
Per: That’s something that we know and we know it from psychology studies. We know it from a research and from just experience working with the web for so long.
James: Less is more.
Per: Less is more. The more choices you give the user, the harder of a time they will have finding something useful and making a decision about where to go next in solving their task.
James: That’s the risk with more real estate. You fill it for the sake of filling it.
Per: So we have this case of larger screens but we want to have less information. We’re moving towards less information in most designs I’m working with and I made the case tons of times about – I mean the right hand column, just ditch it.
James: Yeah.
Per: It’s not helping your user. It’s just distracting your user.
James: And then we can expand that and say that while if you’re going to have a super-sized monitor, the right right hand column that you’ve added to fill the space even further beyond the right column. It’s definitely not going to be used, so just get rid of both of them.
But another aspect I think one of the articles brought up that we read last night, we have to put the links to these articles that we’ve read because we’re not referencing them properly but we have read them so it’s good if listeners read them as well. I was talking about the viewing distance we have for these monitors and comfortability, readability of fonts and so on, on the screens.
Like when you’ve got the very large monitors, you’re expected – well, your font is going to be tiny. You can’t read them, so you need those to be bigger. There was a demo I saw with someone who had done – I think using the webcam or something that he did a demo so that when you came further and closer away from the screen, it automatically adjusted the size of the fonts. It’s like an eye tracking kind of demo thing.
Per: Wow.
James: Because readability is all down to how clear letters are from a distance, viewing distance, comfortable viewing distance from the screen. You know that you hold a phone a certain distance away from you. You hold a tablet a certain distance away. You generally sit a certain distance away from your desktop machine and that’s the same and true for even giant monitors.
So we’ve got an added aspect there that we need to know more about where you are in relation to the device, decide what font size or typography we use to make it comfortable for you to read it. Then the pixels don’t really matter in that sense.
Per: True.
James: So yes, EMs, again getting into measurement units. That is much more sensible to use rather than pixels because the web is a reading medium.
Per: Right.
James: We have to make sure everything is readable so you can take actions and you can achieve what you need to achieve. So typography is maybe a more sensible starting point than physical pixels on the device.
Per: I think it is, yeah. Typography, content. I mean well, the content is your starting point. What is the content that you put in there? And the goals, yeah.
James: Yeah, what you want to do and the content from that.
Per: So if you were putting out content, think about what could support that content, not what else could you put on the screen, but what supports the content that you’re showing currently just now.
James: Yeah.
Per: And so few websites do actually, which is a pain. But also what I found – I mean at the same time as I’m saying that you shouldn’t fill every pixel on the screen just for the fun of it, I actually stumbled – and this article reminded me of it.
I stumbled upon it when I was first designing for the iPad, realized that yeah, I want to have all these buttons over here and I want to have this and then there was space left and it was designing an app for the iPad. You need to fill the space. You can’t have empty space in an app and that’s really interesting because then you have to really think about it and that’s when you have these background images coming along, that you would have something that actually fills the space but doesn’t distract you from the content, but actually just makes something that’s in the background, something to rest your eyes on. Not even notice basically but it doesn’t make this page seem strange when you’re looking at it.
There is a case – I mean going back to Bruno’s original question is that so many people actually have larger screens and sometimes you actually do have this wide space on the sides and people are wondering and I know that some of the clients I have been working with are asking – this looks strange. This looks weird. Why is there so much space over here? Should we do something with it?
Something like background images and stuff like that. I like more than putting more banners or links or whatever, sponsored ads on the sides.
James: Yeah. I get some complaints about my blog because it’s a very narrow single column at the moment and on the giant screens, if you do happen to run it full width, then you’ve got like 1000 pixels either side of white space. It looks very strange.
Per: You were mentioning also – now I’m blabbering here but all the things at the same time but you were mentioning – when you were talking about typography and stuff there as well, you were mentioning before to me as well this thing about language and some languages have longer words than others, so column width actually has to be wider for certain types of languages as well.
James: Yeah, that was really interesting. I’m speaking Swedish of course but we know the Swedish where you do have a habit of …
Per: You have composite words.
James: You have composite words. It does get strung together to be very, very long at times. I mean generally speaking, you would say – well, one of the things that you could find with the research and what I recommend is that you never go lower than 45 characters on a row, on a line. So when you’re doing responsive, one of the checks you need to do there is see how few letters you’ve got left on a line when you’ve shrunk it to its minimum viewport because less than 45, it starts being ridiculous. You end up with one word on each line quite often.
Then you shouldn’t go beyond like what – between 70, 75, somewhere around there and it’s the maximum length for each row. After that, readability drops because nine, ten words on a row is roughly good readability. Generally speaking for us English speaking people, that would be 70 odd characters.
Per: Right.
James: But that’s not true for all languages. German is one of the examples that German has longer words, largely speaking or broadly speaking, which means you might prefer to have a little bit more than that – or towards 80 plus, 85 maybe is more sensible for German. So you get on average maybe the nine, ten words still.
But there then we’re saying maybe it’s more sensible to design for each language you tend to use rather than each resolution, the user specs the user might be using.
Per: Yeah, I like that, adding a completely new complicated dimension to your web design. Yeah, using it to another language.
James: But from a user point of view, that’s much more relevant. I mean if I’m looking at a site in German that was designed in English, with the 960 grid and the right hand column is 50 characters wide or something, when I look at it in German, or – the web editors, the web managers are not looking after the site when they’re trying to put all their headlines in. You suddenly find that the German part of the organization can’t put the title in for that particular function because it’s 25 characters instead of the 14 in English.
Per: I’ve been there, done that. Working with Vattenfall, the large energy company because …
James: Oh, you’re naming names.
Per: I know because I stopped working with them. It’s so long ago. But they have operations in Finland, in Poland and in Germany. Also Finnish and Polish also have extremely long words.
James: Oh, Finnish has some monstrous words, yeah.
Per: I mean Finnish, it was impossible. I mean the lengths, you had big tabs.
James: Finnish is impossible.
Per: No, but the design was impossible. Let’s not go there!
James: Sorry.
Per: The tabs on the front page. They were just saying like home, business, private. They couldn’t fit. They couldn’t fit!
James: Yeah, the sale content first but language – well, you go to content first then language automatically becomes part of the content first because you’re going to – it would help you produce all your languages beforehand. We know this doesn’t happen. This is the thing about reality – theory in reality. All the great web minds are saying mobile first or content first or both.
That’s what we’re meant to do and we know usability-wise, we’re not meant to confuse our users. We got to keep it simple, focus on tasks, focus on conversion, all that kind of optimization and so on. Yet when it comes to building this stuff, it’s just …
Per: We do it in the wrong way all the time.
James: We do it in the wrong way all the time or we’re forced to do it in the wrong way all the time. I think this is – we talked about this with Brad in the last show about how – I mean it’s one thing standing up and being counted and saying I believe in future-friendly – in doing stuff right and following my heart, my web brain and knowing what I should be doing.
Per: Yeah.
James: But then your client comes along and goes, “Yeah. Well, I want a new desktop site.” You design me of a new product page or landing page or whatever it is.
Per: Right. Sometimes you’re just caught up in building more pages on the website that’s already there.
James: Yes, they don’t want to replace their content management system and they haven’t budgeted or they aren’t ready for doing a major redesign to maybe go responsive.
Per: Yeah.
James: They just come to you and they’ve asked you to do a new – do a wireframe for a new product page.
Per: Right.
James: You forced them maybe into a certain width…
Per: Maybe they’re saying that well, you told me it was future-friendly six years ago. But apparently it wasn’t because then all these mobiles came and what we did before wasn’t future-friendly. So how can I be sure it’s future-friendly now if you just do it responsive? We can’t because maybe that changes in two years. We have some new technology that makes it easier for us to push out content in different devices. Someone will think of something new.
So of course you’re never safe and that’s why – I mean going back to two episodes ago when we had that webpage. “This is a webpage.”
James: Oh, yeah.
Per: That’s where we should be starting with our content, putting it out there, just in plain text. Then start adding the pictures, start adjusting the fonts, the width. Test it. Then start adding the navigation. So do it in the right way instead of so many times going to the ad agency or whatever agency you’re going to and they will design something before having any content at all and you’re trying to squeeze it in.
James: I joked last night when we were chatting about what topic to record today, about web design being impossible.
Per: It is impossible.
James: It is.
Per: The more you know, the more – I mean …
James: The more enlightened you become.
Per: Yeah.
James: The more dark and evil the whole thing becomes. I mean OK, we’re 25 minutes into a podcast show now and we’re trying to help people here and we just said it’s impossible. So you might as well switch off now and go out in the garden.
It’s very, very difficult to mix all of this together and even the greatest web minds out there still don’t really have the perfect answers to everything. It’s a changing landscape as well as a complicated one. We’ve got all these devices. We’ve got all these languages.
Per: And you can’t trust the statistics.
James: You can’t – I think more there is – yeah, at times you can’t trust the statistics. You can’t also maybe trust your own analysis or analytics.
Per: Yeah.
James: Because most people actually don’t know what they’re reading. The people’s knowledge about what does that mean.
Per: You’re looking at quantitative data and unique …
James: Lots of visits.
Per: Yeah, you need qualitative data to actually go out there and like you were saying, see people using your site, using your services and that’s where you draw your conclusions from.
James: So we’ve got language. We’ve got typography. We’ve got behavioural science. We’ve got – the list is endless. We got clients. We’ve got agencies.
Per: Yeah, and the experts online as well, saying something.
James: Also you maybe work for an agency and that agency itself has sales goals. You’ve got a sales team who sold in a project to a client. The whole complexity of how we built up the industry and what we’re expected to deliver. It makes it impossible to do the perfect website.
Per: So I’m the CEO of Kellogg’s James. I don’t know why I pulled that out and I come to you and I’m asking we want to build a website. How do you decide what resolution to build for?
James: Oh, I like that. If I turn around slightly, can I look at my whiteboard?
Per: Yes.
James: Well, first of all, you’ve got to make sure they’ve got their goals set right.
Per: Yeah.
James: Because you come to me Mr. Kelloggs and so you want that. I want to ask you and check that you know what you want from it. Why are you doing it? What’s the point behind your website? How does it fit into the rest of your business, your business goals? What are you trying to achieve? Or even just that one page you want me to design. What’s that going to achieve?
And after that, we can then start getting into maybe what’s going to be on it, the content. Shall I go through – I actually wrote a six-step answer to how you could go about this.
Per: Go for it.
James: Yeah, first of all were goals as I said Mr. Kelloggs, and then research, research and measure. Really the measure. You know that I push this so much that you’ve got to measure the viewport being used and see what is happening because I’ve done this on several sites now and I know it varies from site to site quite a lot and I know that resolution is irrelevant.
Per: OK, James, but I’m Mr. Kelloggs now and we haven’t measured this at all over the years and we need that …
James: And you’re not going to do it before then.
Per: No.
James: In that sense, I’m going to recommend that you try and put that in place for the future so we can do a better job next time. But then we’re just going to have to basically guess based on resolution and yeah, then we know as well though that from other research, that – well, depending on what resolution was popular, that we can properly guess that – the laptop, the standard laptop size is still the most common, 1378 by 768.
Almost every single laptop screen is still that even though it’s pixels and we said about don’t use pixels anymore. That’s the size it is. Retina Macs and things, that’s different but most normal laptops and in business environments, a lot of people are still using those resolutions.
Per: This is where I want to go out and verify the goals with the actual users and actually like go – well, call some people up that are actually using the service or know something about Kelloggs based on the goals that you got from the CEO. Actually make sure that those match some of the goals that users have because if there’s no match, if there’s no win-win situation to be held here …
James: Yeah.
Per: … then you may have to go back and actually you need to find the goals.
James: So you’ve got to do the research there and even as you can’t do analysis and measure the viewport, then yes, you got to – exactly what you said. Reaffirm that these goals are going to work and the same time, you bring out some empirical research that says oh look, our users are mainly doing this or look, consuming the website or the content in this way.
Per: And then also set how you’re going to measure the goals.
James: Yeah. And then I want you to take – to do the content. Actually produce the content.
Per: Yes.
James: That is going to support the goals.
Per: But I haven’t hired a copywriter yet.
James: Then we have to try and use the existing content, if it’s an existing website and this also may be difficult in that you might – I think some people are going to struggle maybe to do content for a page, all content, including micro content for micro copy for various bits. We got any kind of design whatsoever. If I tell you to write a webpage, and you’ve got no idea of menus, you’ve got no idea of whatever site you are, what they’re all called, if it’s going to be – you’ve got nothing. You’re building from zero.
Per: I think I love trying to do that. I can honestly say I haven’t done it. I think it’s a really good way to do it.
James: Yeah.
Per: And I’m going to try it at some point in the future.
James: It would be interesting because I think it’s going to be a real challenge – with a blank piece of paper doing content first.
Per: Then you’re really focusing on the goal. What do you want the user to understand or achieve or do after doing this?
James: You’re right. It has got to have the goal and even some – yeah, and even SEO comes into it though. That maybe is a way of helping with content first.
Per: Yeah.
James: Making people think about the – the kind of good headlines then how it’s going to be appearing in search engines. What’s the readability level? What’s good? Making sure content is easy to read not just from a number of words on the row but also the language level.
Per: Yeah.
James: Not making it too technical or too high level language, keep your readability age down because we know people find that easier and allow people wonderful reading.
Per: I’m actually reading The Art of Explanation now by – I forget his name but I will post it on the show notes but the guy – do you remember these videos about RSS in plain English?
James: Yeah.
Per: All those, the Common Craft …
James: Yeah, Common Craft.
Per: Yeah. Sold the guy who made those. He also made the video for Dropbox.
James: Yes.
Per: And there’s a lot about explanation, how you have to really dumb down the language and make people – start off at least explaining stuff, getting the context of stuff so that people know where are they. What do you want them to do and why? Understanding why before you understand what and I really like that.
James: You try to solve something. Yeah. Then once you’ve actually worked out your goals and you’ve got all your content produced, then I think you should design for the smallest screen.
Per: Right.
James: Produce something for the smallest screen size. Do the whole mobile first thing.
Per: From my perspective, the smallest screen will always be the iPhone.
James: Yeah. Well, I mean depending on where you were in the world and what markets because there are still groups of – there are countries and groups of people that are using feature phones.
Per: Yeah, future-friendly.
James: You’ve already done your research.
Per: James, it has to be future-friendly. These people are going to buy iPhones.
James: Yeah. They will. But if you’ve done your research and you understand your users then it doesn’t matter because you choose the right device to do that smallest one first.
Per: Yeah.
James: But OK, now you’ve done a design and it’s – we’re probably talking about three-inch and 320 pixels wide now because it’s the smallest group first.
Per: Yeah, bump that up to 1440.
James: I don’t think you should. The step there I reckon, prototype, because if you then prototype that smallest one, you got something to play with and I’d – well, you test it in the smallest device but also you could start then to – seeing how this copes in the other devices or other sizes that your research has shown that are relevant for your products or site.
So rather than kind of saying, “OK, we do 960,” you might not need 960. You actually might find that other sizes are more relevant to look at and then you can start stretching and playing and see what breaks and tweak and adjust to make it work on the larger sizes.
Per: Right.
James: Or smaller ones. It might be that the one you realize afterwards that you want to go a little bit smaller to cope with an edge case.
Per: Yeah, that’s what I’m thinking because I mean designed for the smaller screen. Well, we’re actually saying design for the smallest …
James: Relevant screen.
Per: That most users use.
James: The smallest, relevant screen.
Per: Exactly, the smallest relevant screen because I mean if 60 percent of the users have 1290 whatever and, I don’t know, five percent have less than that. Then that’s probably …
James: I’m not going to start …
Per: You’re not going to start with the mobile.
James: You would struggle to justify to your client starting with the smallest one I think, because if you’re a live site, live product just selling stuff or doing stuff now on the site, then you’ve got to care for that big chunk and so maybe you start with that one first and then move down. So maybe there’s a star next to my “smallest screen first” there…
Per: Now I’m getting really complicated and you’re realizing that you have some power users and the power users are the ones that are buying and they’re going online and have a ready shopping cart and then perhaps a few of them are actually going and pushing the buy button in the mobile resolution. Then you would realize that those are the guys that you want to design for. So it’s all down to which ones are making the money as well. If that’s your goal, if you have money making goals.
James: Which ones are relevant. The smallest relevant screen size first.
Per: So many parameters there that you have to take into account.
James: Told you it was impossible.
Per: Exactly, totally. Well, it’s complicated but there are like – I will make a template for it.
James: Yeah. So you can grow – with the whole mobile first thing and start with the smaller one first and it is easier to grow because you’ve already done the job of focusing your content and making sure you’ve got just the bare minimum you need to fulfil your goals because we know as soon as you start – you said as soon as you start more real estate, there’s an instant desire or you need to fill it and there’s often the battle to get stuff left alone. I mean not fill stuff. You’ve got an AD or some designer that’s filling up the page and then maybe aren’t the ones who has worked with the content. They aren’t the ones who are going to program it and so on. We’ve got these islands of – these silos of competence that are involved in these kinds of projects. You are going to fight to get your white space or to not add extra features just because there’s room for extra features.
Per: Yes.
James: And making sure you make – whatever you do add, you measure to make sure you understand the success of it.
Per: Or the failure of it.
James: Or the failure of it.
Per: Yeah, because sometimes you have to add something because the client is just on you all the time.
James: Yeah.
Per: And you add it and you have to measure them and see how does that take away from what you’re trying to accomplish with the webpage.
James: I got a question the other day about – oh, there was a suggestion of a mobile’s version of a page my client is asked to be produced for his agency. It doesn’t include like five features from the desktop site.
Per: OK.
James: I haven’t answered yet. I haven’t had time. But just that. Well, if the agency decided not to include these five features, is that because they’re really not that relevant?
Per: Yeah, we’ve encountered that before.
James: Or is it that they’re trying to save time and money? There’s no budget to produce all these features in the mobile version but the client wants the mobile version. You end up getting it – you’ve lifted a stone and so now you go, OK, what’s the business needs? What are the business limitations? Is it a budget thing here or is it a lack of research, a lack of understanding or readiness in the organization for certain decisions?
Per: Yeah.
James: Suddenly, a simple web design question becomes a business question…
Per: Yeah, that’s what I’m thinking. We started out with the screen size and we’re now into business goals. You have to dive into every part, every crevice of the organization and actually realize what they are all about. What can they accomplish? How much money do they have? What competencies do they have? How much time and money do they have to actually work with this over time?
After you’ve done the prototype, I mean you’re launching and your point number five on the whiteboard there is you actually grow as dictated by research. OK. So do we have any money left to do research and to actually do the redesign? Maybe not. How sure are we that we’re right when we launch?
James: Probably a good thing to finish off on now is just say that in digital and on web, any – if there’s a quick and easy answer to one of your questions, it probably means you’re doing it wrong or doing it in a quick and dirty way, and you’re not doing it the best way.
Per: Yeah.
James: And in some ways, that’s fine because that’s how it is. If I came to you and say, yes, design for 960, then I’m just giving you a quick and dirty answer and I’m not giving you the full picture because we just explained – just spent 40 minutes explaining a lot about the full picture and it’s very, very complicated.
Per: But are people going to have time to understand the full picture?
James: But then that’s the business decision itself. As long as you’re aware of the fact that these quick, simple answers mean that you’re ignoring a lot of elements and a lot of factors and as long as you understand that by taking these quick, simple decisions, then you probably are doing that. You’re not doing the right thing. Then fair enough. Just keep it in mind for the future that you probably need to allocate some time and money to doing it a bit better later on.
Per: I can’t stop thinking about the quick, simple decision people are making nowadays is responsive web design.
James: You’re right.
Per: And I’ve met so many people who – well, owners of websites that are thinking now, “Oh my god, what did I do?”
James: Yeah. I emplore you, if you’re doing responsive, make sure that you monitor your page load times as part of your web analytics and segment it by mobile and desktop and so on.
Per: Yeah, just make sure you visit your website now and again in your mobile and see what’s going on there.
James: Yeah.
Per: Wow, thank you for listening to all this rant about screen size. But it has been fun actually, I think. You’re going off to Spain.
James: I am. But you’re not back at work yet, are you?
Per: No, no. I’m – well, I’m semi-back first of August. I will be working on and off from the summerhouse I think, and so living the good life of the freelancer.
James: But for our listeners, we’re always open.
Per: Of course we are. Yeah, Twitter, email, yes. I’m in there all the time as always.
James: Yeah. And as usual, if you like the show, then give us some feedback. Get in touch with us or if you’ve got any questions or any points you want to argue about or correct us on, then yeah, get in touch. We would love to hear from you all.
Per: Check back in two weeks. Continue having a great summer everyone and remember to keep moving.
James: And winter for the people in the other side of the world.
Per: Sorry?
James: Winter for the people in Australia.
Per: Oh my god! I always forget that this is a podcast and internet is global.
James: We’re a big round thing.
Per: Yes.
James: It’s not the same everywhere.
Per: But it’s summer.
James: Here.
Per: Yes.
James: Not down there.
Per: Yeah, but it’s summer months.
James: No. It’s winter months down there. Their seasons are the same.
Per: Do they actually say winter?
James: Yeah, absolutely! Because it’s winter. It’s colder.
Per: I didn’t know that. I’ve been to South Africa although it’s not …
James: Oh, South Africa is not that far south really.
Per: Yeah.
James: Not when you look at Australia.
Per: Well, the seasons don’t change as much.
James: They don’t need the geography lesson.
Per: I didn’t realize this.
James: This is not a geography podcast.
Per: No, but this is interesting, because that means when you’re …
James: Can I get a cup of tea?
Per: We will save it. We will save it but I didn’t know that. It was fun and so I hope some other people didn’t know that as well. Now remember to keep moving.
James: And see you on the other side.
Hide the transcript
