Mobile First Design7:55 with Nick Pettit
While it might be tempting to think about what the site might look like on a desktop, we're going to start with the mobile version first.
So far, we've just added a button. 0:00 We're going to add a lot more and while it might be tempting to think about what 0:02 the site might look like on a desktop browser, 0:07 we're going to start with the mobile version first. 0:09 A desktop or a laptop screen has a lot more space than a handheld smart phone. 0:12 When you create a desktop website and work your way back to a mobile design, 0:20 there's a temptation to fill in all the available space. 0:25 Then it's hard to condense all of those elements onto the screen 0:29 of a mobile device. 0:34 Thinking mobile first is a lot easier because you can start 0:35 with the simplest version that includes the most important details and 0:39 then expand on those ideas to create the desktop design. 0:44 Let's keep going. 0:49 Beyond the call to action, the next two important things are capturing 0:51 the attention of the customer and educating them about the product. 0:55 We can't educate unless we have their attention first. 1:00 So let's grab them with nice, large product photos. 1:04 Because we're on a mobile screen where horizontal space is usually limited and 1:08 we want both the photos and the call to action to be large, 1:13 we probably shouldn't put them side-by-side. 1:17 So let's add the product photos just above the button. 1:20 So up here from my tools, I'll go to Media 1:26 and drag out an image component here. 1:32 And this will just be a blank image, we can resize this however we'd like. 1:37 I'm gonna move this preorder button a little bit. 1:44 And I think that looks pretty good. 1:49 Now let's zoom out a bit to view more of the canvas. 1:53 To zoom in and out on Windows, hit the CTRL key and the plus or minus keys. 1:58 On a Mac, it's CMD and the plus or minus keys. 2:03 So I'll just zoom out a little bit here and 2:09 I'll move these two things to get us some more space to work. 2:13 This is looking good but right now, 2:18 it's not immediately clear what this is, or what we're pre-ordering. 2:20 This is where we can lean on some of the copy to do the explaining. 2:25 So in the document we received from the marketing and 2:31 product teams, say we have a tagline, So 2:34 we'll drag out some text here and it says, 2:39 keep your lawn healthy period and funky exclamation point. 2:44 Right now this is too small, so 2:51 I'll scroll down and increase the font size here. 2:55 Let's maybe do 24. 3:02 I think that looks good. 3:04 And let's make sure this is centered so 3:09 that no matter how we resize this, the text will always be in the middle. 3:12 And then we can drag this around and 3:16 use the smart guides in Balsamiq mock ups to help us center it with other elements. 3:18 This might also be a good place to mention 3:25 when this product is going to be available, so let's add that. 3:27 I'll drag out some more text here and 3:31 we'll say, Coming this Summer. 3:35 And again, this is a little too small, so let’s make that bigger 3:39 and we'll put that just to the left of the button here. 3:45 And let’s just zoom in a little bit, so this is easier to see. 3:51 There we go. 3:57 When people are pre-ordering something, 3:59 they want to know when they can expect the product. 4:00 So the visual proximity of coming this summer, 4:04 and the pre-order button is actually communicating. 4:08 If we were to reverse the positions of these two text blocks, 4:12 it might still work but the context might be a bit more difficult to read. 4:17 If people were to see coming this summer as the first thing they read, 4:22 it might be confusing. 4:27 What's coming this summer exactly? 4:29 Now let's add some of the remaining bits. 4:31 Since this is the mobile version of the site, let's make a spot for 4:35 a small product logo in the upper left. 4:39 So I will go to images here or media rather and grab an image, 4:42 and let's just make that nice and small like that and 4:48 keep it up here on the left, that will be our product logo. 4:53 And because this is part of a larger website, we want add some navigation. 5:00 So let's add a menu button in the upper right here, 5:06 I'll drag out the icon component here. 5:10 And then we can search for an icon that we want. 5:18 So I'll type in something like menu, and there is our little three line 5:22 hamburger menu and we can change the size of it here and 5:28 Balsamiq mock ps will change it to medium, I think that's pretty good. 5:31 Let's make the logo a little smaller to match up with that. 5:36 That works and I'll align this with the right side. 5:41 And we know that our site visitors are heavy social media users. 5:46 So we can get away with iconography like this because they've 5:50 probably seen it in other websites. 5:54 Next if the site visitor still wants to know more about the product, 5:57 they'll likely scroll down the page and 6:00 let's add some of the remaining marketing copy there. 6:04 So I'll just select text and let's grab a block of text. 6:07 And in Balsamiq mockups we don't have to type in anything exactly, 6:15 we can just have this nice text block here, and 6:19 that will be our additional marketing copy. 6:25 And if you want, you can put in the real copy there and in fact, that is 6:29 a little bit better so that you know the exact spacing, but this is fine for now. 6:34 So let's zoom out just a bit so 6:39 that we can see the whole length of the site there. 6:43 And finally at the bottom of the page, let's add iconography for 6:48 the company's social media profiles since, 6:52 again, this will be something that speaks to our audience. 6:55 So I'll move this text up just a little bit and 6:58 let's go back to our icons here, and 7:01 we could just drag in the icon component, or we can search for icons here. 7:06 So I'm gonna look for Facebook. 7:11 So we'll go to the f's here and I'm just gonna grab this Facebook square. 7:14 That's good. 7:21 And then let's scroll over to Twitter. 7:23 And of course, we could add more social media profiles if we wanted to, but 7:26 we'll just do these two. 7:30 There is the Twitter square, so we'll drag that in, 7:32 and let's just put these side by side at the bottom of the site and 7:39 then we'll select both of them to kind of get them centered together. 7:44 This is a good start and now we're ready to move on. 7:51
You need to sign up for Treehouse in order to download course files.Sign up