1 00:00:00,890 --> 00:00:04,750 When building a new website or app, teams that do not put 2 00:00:04,750 --> 00:00:09,390 mobile optimization first and foremost, there's typically a common feedback 3 00:00:09,390 --> 00:00:13,420 from someone in the organization who opens it on their phone for the first time. 4 00:00:14,600 --> 00:00:16,500 This is so slow. 5 00:00:16,500 --> 00:00:17,750 Why is it so slow? 6 00:00:19,230 --> 00:00:21,020 This is crushing to hear. 7 00:00:21,020 --> 00:00:23,520 I am sure they try their hardest to make this site or 8 00:00:23,520 --> 00:00:28,050 app as awesome as possible, but in the end they fell short. 9 00:00:28,050 --> 00:00:32,430 What is also common, and this is not the fault of the development team or 10 00:00:32,430 --> 00:00:33,880 designers. 11 00:00:33,880 --> 00:00:38,430 The site or app was built with desktop users in mind first. 12 00:00:38,430 --> 00:00:40,170 Then, as the project progressed, 13 00:00:40,170 --> 00:00:45,580 the conversation turns to how the new site or app will look on a mobile device. 14 00:00:45,580 --> 00:00:50,080 So developers of the site using any number of tricks in CSS and 15 00:00:50,080 --> 00:00:55,140 JavaScript, trying to hide or alter UI and functionality 16 00:00:55,140 --> 00:00:59,420 begin to distill the site down to what will look nice on a mobile device. 17 00:01:00,490 --> 00:01:02,420 But as we learn in the last section, 18 00:01:02,420 --> 00:01:06,350 the more code you add the less performance your site or app becomes. 19 00:01:07,360 --> 00:01:10,370 So while this starts to look better on mobile devices 20 00:01:10,370 --> 00:01:12,360 your performance is taking a huge hit. 21 00:01:13,410 --> 00:01:16,260 You are essentially walking backwards at this point. 22 00:01:18,030 --> 00:01:19,720 How do we reverse this? 23 00:01:19,720 --> 00:01:21,870 What does it really mean to be mobile first? 24 00:01:23,350 --> 00:01:24,870 There aren't really any tricks or 25 00:01:24,870 --> 00:01:28,190 complicated processes needed to be mobile first. 26 00:01:28,190 --> 00:01:32,420 You simply have to consider the experience of the mobile user before you build for 27 00:01:32,420 --> 00:01:32,940 the desktop. 28 00:01:33,960 --> 00:01:37,250 This is both the technical and UX problem to solve. 29 00:01:37,250 --> 00:01:40,180 When you develop an app for the desktop user first, 30 00:01:40,180 --> 00:01:44,220 you view the output on your desktop computer using a large screen, 31 00:01:44,220 --> 00:01:47,930 fast processor and consistent data connection. 32 00:01:47,930 --> 00:01:51,960 So in being mobile first, you have to be more aware of the capabilities, 33 00:01:51,960 --> 00:01:55,480 resources and constraints of the mobile users. 34 00:01:55,480 --> 00:02:00,490 The two areas that really need special attention are speed and data connection. 35 00:02:02,050 --> 00:02:03,275 What about speed? 36 00:02:03,275 --> 00:02:05,850 Well, it appears that processors in mobile devices 37 00:02:05,850 --> 00:02:08,740 are almost as fast as those on your laptop, 38 00:02:08,740 --> 00:02:14,280 this is not 100% accurate as the processor architecture is completely different. 39 00:02:14,280 --> 00:02:18,730 It's rare that your mobile device will ever be operating at full capacity 40 00:02:18,730 --> 00:02:21,160 as this consumes too much power. 41 00:02:21,160 --> 00:02:25,140 Creates too much heat, and reduces the performance of the device, and 42 00:02:25,140 --> 00:02:27,580 will kill your battery in just a few minutes. 43 00:02:29,190 --> 00:02:30,980 What about data connections? 44 00:02:30,980 --> 00:02:34,075 Again, developing locally on your desktop and 45 00:02:34,075 --> 00:02:37,005 viewing in a browser on the same device is super fast. 46 00:02:38,175 --> 00:02:41,935 Mobile devices, while many come with really fast WiFi connections, 47 00:02:41,935 --> 00:02:45,365 still can't process a connection as fast as a desktop. 48 00:02:47,045 --> 00:02:51,090 When comparing mobile wireless data to internal wired data 49 00:02:51,090 --> 00:02:54,890 mobile wireless is unreliable and inconsistent, to say the least. 50 00:02:56,470 --> 00:02:59,410 While there are great desktop emulators out there, 51 00:02:59,410 --> 00:03:04,030 they still never truly represent what a real handheld experience is like. 52 00:03:04,030 --> 00:03:08,590 So it's best to test how your app feels on a real device as much as possible. 53 00:03:10,230 --> 00:03:13,970 Being truly mobile first is not simply writing some media queries and 54 00:03:13,970 --> 00:03:15,890 making it look awesome. 55 00:03:15,890 --> 00:03:19,470 You need to build your app with the mindset there will not be 56 00:03:19,470 --> 00:03:21,010 a desktop version. 57 00:03:21,010 --> 00:03:23,690 By doing so, you will set your expectations and 58 00:03:23,690 --> 00:03:26,380 your performance budgets appropriately. 59 00:03:26,380 --> 00:03:27,830 And those budgets will be low. 60 00:03:28,880 --> 00:03:33,249 Challenge yourself when considering frameworks and libraries. 61 00:03:33,249 --> 00:03:35,778 Do you really need jQuery? 62 00:03:35,778 --> 00:03:38,780 Do you really need to install all the CSS right 63 00:03:38,780 --> 00:03:41,560 away when you might only use 30% of it. 64 00:03:41,560 --> 00:03:44,510 When developing mobile first, there's some constraints 65 00:03:44,510 --> 00:03:48,540 that we just can not over come due to limitations in technology. 66 00:03:48,540 --> 00:03:51,760 This is when we start to talk more about perceived performance. 67 00:03:52,770 --> 00:03:55,630 When the user is involved in that initial interaction or 68 00:03:55,630 --> 00:04:01,440 initiating more requests, we then load the remaining resources in the background. 69 00:04:01,440 --> 00:04:07,290 The goal here is to get the first meaningful paint as soon as possible. 70 00:04:07,290 --> 00:04:13,200 Part of this process is to think about what is the above the fold or 71 00:04:13,200 --> 00:04:15,600 above the scroll experience for your users. 72 00:04:17,030 --> 00:04:21,900 Above the fold is really saying what are the essential assets, CSS, 73 00:04:21,900 --> 00:04:26,690 JavaScript or images that the user needs in that first interaction, and 74 00:04:26,690 --> 00:04:28,370 are visible without scrolling? 75 00:04:29,575 --> 00:04:34,305 This will dictate what code is critical to load the initial experience and 76 00:04:34,305 --> 00:04:37,515 what will be loaded later when requested. 77 00:04:37,515 --> 00:04:41,445 With CSS, for example, and we will discuss this more at length later. 78 00:04:41,445 --> 00:04:45,165 There are processes we can use to load essential CSS and 79 00:04:45,165 --> 00:04:50,935 line the HTML document itself that eliminates a request and speeds things up. 80 00:04:52,450 --> 00:04:55,650 One critical factor in getting to the first meaningful paint 81 00:04:55,650 --> 00:04:58,050 is how well you manage images. 82 00:04:58,050 --> 00:05:00,700 Be selective about the images you add, and 83 00:05:00,700 --> 00:05:04,500 be specific about the images you ask your users to download. 84 00:05:04,500 --> 00:05:09,690 For mobile first use only sizes of adds that make sense on a small device, or 85 00:05:09,690 --> 00:05:13,840 use SVG that can be enlarged with a little code later on. 86 00:05:15,900 --> 00:05:20,610 Techniques like the picture element, or background images, contained within media 87 00:05:20,610 --> 00:05:25,070 queries only load images when the browser meets that specification. 88 00:05:26,150 --> 00:05:30,610 This ensures that the user is only downloading the asset needed, 89 00:05:30,610 --> 00:05:36,610 optimizing their experience, reducing the number of HTTP requests 90 00:05:36,610 --> 00:05:41,130 in minimizing the amount of data being sent and reducing latency. 91 00:05:42,340 --> 00:05:47,390 Another key factor is getting your user to the first available interaction. 92 00:05:47,390 --> 00:05:50,930 Consider what is the minimum Java Script needed that will allow a user to 93 00:05:50,930 --> 00:05:52,770 interact with the app. 94 00:05:52,770 --> 00:05:57,930 Fact is that if a user can't tap on something, it's broken. 95 00:05:57,930 --> 00:05:59,900 We don't want broken apps. 96 00:05:59,900 --> 00:06:02,660 We will cover this more in detail later on, but 97 00:06:02,660 --> 00:06:05,490 review what JavaScript libraries you are using and 98 00:06:05,490 --> 00:06:10,190 consider loading them from CDNs or using service workers to speed things up. 99 00:06:11,470 --> 00:06:14,060 Find ways to make your code modular and 100 00:06:14,060 --> 00:06:17,810 only load functionality that is limited in scope to that experience. 101 00:06:19,540 --> 00:06:24,320 When targeting mobile first, the array of browsers to support is much less than for 102 00:06:24,320 --> 00:06:26,850 desktops, so having to add code for 103 00:06:26,850 --> 00:06:31,910 cross browser compatibility issues, while not a 100% removed, is extremely rare. 104 00:06:31,910 --> 00:06:34,800 And that means, less code. 105 00:06:34,800 --> 00:06:36,380 And that's a good thing. 106 00:06:36,380 --> 00:06:38,910 Mobile is harder than desktop especially for 107 00:06:38,910 --> 00:06:43,090 the first time and it's really easy to make a slow site. 108 00:06:43,090 --> 00:06:46,950 But even just trying a little just changing our perspective of the starting 109 00:06:46,950 --> 00:06:53,090 point and knowing how to better test and budget you will already get a faster site.