1 00:00:00,390 --> 00:00:06,450 Hello and welcome to Mobile First Design, as the name suggests, mobile phones means that we start 2 00:00:06,450 --> 00:00:13,890 the production design from the mobile and which has more restrictions, then expand its features to 3 00:00:13,890 --> 00:00:16,590 create a tablet or desktop version. 4 00:00:17,590 --> 00:00:19,150 So what is mobile first? 5 00:00:19,620 --> 00:00:24,820 Well, first of all, let's start by talking a bit about how in the last couple of decades, mobile 6 00:00:24,820 --> 00:00:28,180 Internet usage has surpassed desktop usage. 7 00:00:28,480 --> 00:00:36,070 In approximately 2016, 16 people have spent more and more time on the Internet from the mobile and. 8 00:00:37,150 --> 00:00:41,410 The mobile first approach is a tenet of progressive enhancement. 9 00:00:41,500 --> 00:00:47,380 It is the ideology that mobile design as the hardest should be done first. 10 00:00:48,190 --> 00:00:54,490 Once the mobile design questions are answered, designing for another device will be much easier. 11 00:00:54,940 --> 00:01:01,050 What it boils down to is that the smallest of the design will have only the essential features. 12 00:01:01,330 --> 00:01:05,920 So right away you have designed the heart of the user. 13 00:01:06,520 --> 00:01:09,220 The opposite approach is graceful degradation. 14 00:01:09,940 --> 00:01:16,030 This incorporates all of the complexities right from the start, then strip them away later for the 15 00:01:16,030 --> 00:01:17,080 smaller devices. 16 00:01:17,140 --> 00:01:24,430 The problem with graceful degradation is that when you build the all exclusive design right from the 17 00:01:24,430 --> 00:01:30,820 start, the core and supplementary elements merge and become harder to distinguish and separate. 18 00:01:31,120 --> 00:01:37,690 The entire philosophy runs on the risk of creating mobile design as more of a alter, since you're cutting 19 00:01:37,690 --> 00:01:38,920 down the experience. 20 00:01:41,270 --> 00:01:46,670 These are just a few steps you should take into consideration when taking a mobile first route. 21 00:01:47,770 --> 00:01:55,030 Steps which are content inventory, visual hierarchy, design with the smallest breakpoints and scale 22 00:01:55,030 --> 00:02:05,800 up enlarging touch targets don't count on hobbies, think EMP, avoid larger graphics test in real device. 23 00:02:09,090 --> 00:02:12,760 So let's go through each of them content inventory. 24 00:02:13,470 --> 00:02:18,390 I want to just create to create a document containing all of the elements you want to include. 25 00:02:21,130 --> 00:02:29,410 Visual hierarchy, we should prioritize the element in the content inventory and determine how to display 26 00:02:29,410 --> 00:02:31,780 the most important element prominently. 27 00:02:34,400 --> 00:02:37,610 Design with the smallest breakpoint and then scale up. 28 00:02:38,600 --> 00:02:45,140 Build a mobile wireframe first, then use that as the model for large breakpoints, expand the screen 29 00:02:45,140 --> 00:02:47,750 until there's too much white space. 30 00:02:51,090 --> 00:02:56,790 Enlarged, touched targets, fingers are much larger than pixel precise mouse's cursus. 31 00:02:57,890 --> 00:03:01,040 And so need large elements on which to tap. 32 00:03:03,600 --> 00:03:11,340 Don't count on Hober, it almost goes without saying, but designers often rely on hover and mouseover 33 00:03:11,340 --> 00:03:13,410 effects in their interactive work. 34 00:03:13,770 --> 00:03:15,990 If you're thinking mobile friendly, then don't. 35 00:03:16,500 --> 00:03:18,860 There's no hope of control for finger tips yet. 36 00:03:22,060 --> 00:03:29,090 Think app mobile users are accustomed to motion and a modicum of controls in their experience. 37 00:03:29,470 --> 00:03:36,700 Think about all the cameras, navigation, expendable widgets and AJAX calls and other elements on the 38 00:03:36,700 --> 00:03:41,140 screen with which users can integrate without refreshing the page. 39 00:03:43,450 --> 00:03:50,620 Avoid large graphics, Lansky's photos and complex graphics don't display well when your screen is only 40 00:03:50,620 --> 00:03:57,310 a few inches across, catered to mobile users with images that are readable and handle screens. 41 00:03:59,450 --> 00:04:06,470 Testing real devices now, although we cannot test in this course, but I would suggest that you test 42 00:04:06,470 --> 00:04:09,420 your designs in real life situations. 43 00:04:09,470 --> 00:04:16,430 Nothing beats discovering yourself how useful a website is or isn't a step away from your desktop or 44 00:04:16,430 --> 00:04:20,930 laptop computer and load up your product on a real phone or tablet. 45 00:04:21,170 --> 00:04:24,210 Tap through the pages is decidedly easy to navigate. 46 00:04:24,230 --> 00:04:28,130 Does it load in a timely fashion or text and graphics? 47 00:04:28,160 --> 00:04:29,200 Easy to read. 48 00:04:29,780 --> 00:04:35,110 These are some important questions that you need to ask yourself before launch your product. 49 00:04:37,490 --> 00:04:42,770 If your site is good on a mobile device, it translates better to all devices. 50 00:04:43,100 --> 00:04:48,620 More important is that the mobile first approach is also a content first approach. 51 00:04:49,400 --> 00:04:54,710 Mobile has the most limitation screen sizes and bandwidth, to name just a few. 52 00:04:55,040 --> 00:05:01,090 And so designing with these parameters will force you to prioritize content ruthlessly. 53 00:05:01,280 --> 00:05:07,700 The mobile first approach organically leads to design that's more content focused and therefore user 54 00:05:07,700 --> 00:05:08,240 focused. 55 00:05:08,270 --> 00:05:10,260 The heart of the design is the content. 56 00:05:10,640 --> 00:05:13,170 That's why the users are therefore in. 57 00:05:13,180 --> 00:05:19,760 An important thing to realize is that mobile users sometimes require different content than desktop 58 00:05:19,760 --> 00:05:20,240 users. 59 00:05:21,080 --> 00:05:27,860 Device specific content can be caused by considering context, whatever given situation and in a given 60 00:05:27,980 --> 00:05:31,190 environment, will your users appreciate more? 61 00:05:31,430 --> 00:05:35,450 The best way to plan ahead for this is creating user scenarios. 62 00:05:36,920 --> 00:05:39,470 OK, so it's time to go mobile.