Skip to main content

Modern Web Design Demystified

Lesson 6 of 37

Mobile First: Working Small

Andy Pratt, Jesse Arnold

Modern Web Design Demystified

Andy Pratt, Jesse Arnold

Starting under


Get access to this class +2000 more taught by the world's top experts

  • 24/7 access via desktop, mobile, or TV
  • New classes added every month
  • Download lessons for offline viewing
  • Exclusive content for subscribers

Lesson Info

6. Mobile First: Working Small


  Class Trailer
Now Playing
1 Class Introduction Duration:09:10
2 The Design Flow Basics Duration:18:27
3 The Designer as Co-Creators Duration:06:48
4 Get to Know Your Material Duration:17:07
6 Mobile First: Working Small Duration:09:46
9 Prioritize Your Users Duration:39:42
11 Intro to Scrum Duration:04:24
12 User Stories & Epics Duration:35:53
13 Content Basics Duration:27:40
14 Defining the Visual Language Duration:22:31
15 Starting with Type Duration:35:31
16 Starting with Grids Duration:15:40
17 Gutcheck & The Product Brief Duration:22:03
18 Working With Developers Duration:12:33
19 Communicating with Developers Duration:16:25
21 Code Literacy Duration:04:37
22 Sitemap & Wireframe Basics Duration:33:48
23 Prototyping Basics Duration:12:02
24 HTML Prototypes Duration:13:28
26 Developer Lingo Duration:07:23
28 Designing for Performance Duration:18:19
29 Progressive Enhancements Duration:07:00
31 Workflow Examples Duration:20:25
33 Alternative Workflow Duration:23:04
34 Alternative Workflow Part 2 Duration:21:52
35 Tech Requirements Duration:21:53
36 Retrofitting an Existing Site Duration:12:15

Lesson Info

Mobile First: Working Small

So now we know we're working small first. We saw in media queries really quickly. Again, the old way of doing it, all these types existed. So yes, we were retrofitting them. We were kind of taking them and bending them and shoving them into our phones to make them fit, and now we're building from scratch. We get to start over. We don't have to repeat the mistakes of the past. We get a fresh start. This should be exciting. I am part of this thinking as a designer. Let's start mobile first. Let's start small. This is a quote from Sleepless Media. This sort of generally captures the idea. "Mobile first is the process of designing navigation, "layout, and content for the site on the smallest device "before you even think about desktop," right? So don't get ahead of yourself. Sure thing. I have a question. Yeah? Since we're talking about working mobile first, smaller first, how does wearables work in this picture? Are they changing the game or what's happening? Wearables in my mind ...

are still edge cases. So I would still, I would personally, I'm still designing for this 3, 20, 4, 80 sort of single column display and moving up from there, but we are beginning to pipe in channels, and again, it's a content request at this point. So it depends on user adoption and how quickly the market grows. Yeah, I would agree with that, and I think the other thing is that because of its limited size, it's really kind of like the watch itself, a bit of an accessory, and I think we're gonna see a lot of experiences that are more kind of extending an experience rather than becoming the primary one. Now, that's just where it is now, and we will see that kind of evolve, and people will continue to push the limits, and because if the experience itself is responsive, then we're gonna start to see how that content should also work on those devices, but because there has to be a level of comfort and even asking, say, your client to kind of think mobile first is gonna be a little bit of a shift for them. To kind of go that small I think may be too much of a leap. So thinking about mobile or a small style of a break point is gonna be a safer bet. Really what you want to think is ideally it's just one column, right? That's what you're really trying to get. How do you prioritize the experience into a one column of content? It just so happens we're about to talk about that. That's so great. So again, mobile first thinking is threefold. On the first level, we have business goals. In the following segments, Andy's gonna talk directly about how we address those first, and in this segment, we're gonna talk quickly about how you can convince, which at this point you shouldn't have to convince them, but why it's a business goal first. Next up is performance. We're gonna talk about why working mobile first is gonna sort of really cut the crust off of what you're working on, and sort of really give your team discipline and speed, and then the last one is it really does your content a huge huge favor, because by limiting all the distractions you can actually concentrate on what's important and begin prioritizing stuff. So, business goals. Mobilegeddon, it's real. (laughing) I didn't put the atom bomb mushroom cloud in here. I thought you were gonna have that. Was it too much? Godzilla (growls)! Yeah, it was a little much. So are people familiar with this term or have heard it around? All right, so Google, what they used to do is they used to give you points for being mobile friendly. Hey, your mobile friendly points, a boost. Now, I'm afraid they're getting a little more aggressive. So at this point Google will begin penalizing you as a website, web product, business designer, everybody if you're not preparing and presenting a mobile first strategy, if you do not have responsiveness baked in to your website. So it's not, again, as optional anymore. So, again, it's becoming about real business, really sort of getting Google behind you. So we talked about Ethan Marcotte in the first section. This section is dedicated to LukeW, who wrote the book on mobile first, and he says that "building mobile first ensures companies have an experience "available to this extremely fast growing user base "widely considered to be the next big computing platform." And here are just some numbers that really sort of drive home that fact, and these numbers are all over the place. These are from, but you'll find them anywhere you look on the Internet. So two years ago, this might have been more of a shock, but I think we're pretty much in that wake up call now. We understand the sheer number of devices available, mobile devices available is just dwarfing PCs. The other interesting fact that I thought is it's not that people are computing more on smaller devices. They're actually computing, but they're not on the Internet. Computers don't require the Internet to work. My phone, my mobile device, does, because without the Internet, it's just kind of a brick. So it has to do with the object. There's more things I can do here. I can get distracted by work, but having a mobile device, it's all I can do. So it's the default thing I do on this device, so there's more of them and it's my default action. Again, you can see people getting pushed and pushed more and more in this direction. So the simple thing you can tell your clients is why do you want to be a mobile first? Well, do you want to be everywhere? So it's getting your product in front of people's eyes, having that real brand reach. This is another graphic from LukeW. It was about 2011, 2012 when the crossover happened between PCs and mobile devices, and it is just escalating and escalating and escalating. It's kind of amazing too when you think of just how as users, our behaviors have changed. Our lifestyle has changed. If you kind of remember what your day looked like 2009, 2008, you had a very different kind of day to day experience, right, than now, and I'm sure some of you guys may even get a little antsy. I had someone kind of called me or texted me or, where's my phone? I need to kind of do something so I think our entire behavior has changed with the way we act because of these devices. The next thing up is performance. Again, we talked about business goals, and now let's talk about performance. Speed. So "when a team designs mobile first," another quote from Mr.Luke, "the end result is an experience "focused on the key tasks users want to accomplish "without the litter, the debris, "that clutter our desktop experiences." So this isn't just about bandwidth speed. This is about cognitive speed. This is about don't get in my way with all that stuff I don't need. When you put this on my phone, it's not just the fact that I have a slow Internet connection. It's the fact that I'm doing 10 other things. Get rid of all the stuff I don't need when I go to buy a ticket on my phone. I don't want to find out about all these other offers you have. I want to buy my ticket. So you don't have that, you don't have, your users are just a little more task driven. So you've really gotta cut the excess. You really gotta focus and again, this is an experienced performance, not just something I can clock in seconds. How does it make me feel? How performative is it? In the end, cut the excess. Andy trained me to put these really simple slides in between the informative stuff. Thank you, Andy. Lots of info. That's right, and colors. Discipline. When working with your team, we talked about this. All this extra feature, (grunts). It's nice to have (grunts) that. I want to buy my plane ticket front and center, and this is gonna sort of help you have conversations, again, with clients and developers. Discipline, focus, mobile first. Content hierarchy. Content king. So content hierarchy simply put, is the visual progression of hierarchy in mobile design. It's gonna guide the viewer through design where you want them to be. So, again, we've got our client onboard with business goals. We understand we've cut the crust, and we've gotten down to its focus. So now, how do I get an I from A to B? And like Andy was saying earlier, it's a question of first thing first. As an exercise, your client is gonna have 50 priorities, and they're gonna want all of them at the top of the page. I'm sorry. The real estate battle. (laughing) I'm sorry we can't do that.

Class Description

Online web design is not just about choosing fonts, colors, and layouts. The days of throwing a static visual comp over the wall are ending. Designers are now encouraged to work side by side with clients and developers. In Modern Web Design Demystified you’ll learn how to communicate with developers and collaborate with your clients in order to design websites that function as well as they look. You’ll learn about: 

  • The fundamentals of responsive web design
  • Working with Clients to identify and prioritize goals
  • How to communicate with Developers
  • Best practices for project workflow
In this online web design course, Andy and Jesse will share real world case studies to help you understand exactly what goes into creating and launching a website from the ground up. They’ll tell you about the tools they use and offer tips on working with everyone from the coder to the client.

High-quality web design is complex, but it gives businesses and orgs the opportunity to really connect with their users. Learn the ins and outs of the entire web design workflow process in the Modern Web Design Demystified course.

Bonus materials include: 
  • Sample Dev Tickets
  • Responsive HTML Wireframes
  • HTML Pattern Library
  • Sample High Resolution Visual Comps
  • and more! 



I've already taken several web design classes, but there were still some details that I found confusing. Andy and Jesse did a great job of explaining things like; programming languages and how they interact to form the structure of a site, work flow responsibilities between team members and the blurry lines between them; and agile methodologies applied to work flow. They used case studies to illustrate how this all happens, where variations crop up, and how to address them. If you're new to web design, or just want to understand the functions of other team members, this is a great real world look at the whole process. I haven't found this in any other class, either on-line or local. Andy and Jesse are both very experienced working designers with current knowledge. They're very responsive to questions and seem to really enjoy teaching. Having two instructors is a great benefit because you get double the perspective, knowledge, etc.

Junko Bridston

I worked with Andy when he was a Creative Director at Funny Garbage, a design studio in New York City. I found him to be knowledgeable​, articulate, and lovely to work with. I learned so much from him at the beginning of my career. In response to a previous comment: it seems silly to dismiss this class because Andy wears t-shirts with his blazers. If you think leaders only wear suits and ties, then maybe this class isn't for you. But if you want to learn from someone with loads of experience and a friendly manner, I really recommend it. You won’t be disappointed.


I was looking for a class that would not only address the web design basics but also their place and function as part of a workflow. This class did not disappoint and Andy's and Jesse's engaging presentation style made it easy for me to follow along during the 2-day live session. By using real life examples, the presenters provide plenty of tips and strategies how to best work with clients and developers alike — the many, often intangible ingredients that go beyond technical expertise and can make or break a project. Highly recommended.