Devices and Screen Size6:03 with Dan Gorgone
More and more users are now going online through mobile devices. One of the key concerns for designers is the large array of devices being used and the various screen sizes found on each one.
[MUSIC] 0:00 More and more users are now going online through mobile devices. 0:04 The numbers increase every year especially when 0:09 new iPhones, iPads and Droids hit the market. 0:11 In addition, many users are now exclusively using mobiles to get online. 0:15 All this means that users need access to content and 0:20 features wherever they go, regardless of how they view it. 0:24 Now we can't assume that they're gonna go to a 0:29 laptop or other home computer to get anything they missed. 0:31 In fact, if something doesn't work on your site or app, 0:34 you have to assume they're going to go to a competitor instead. 0:37 >> If, if you see the consumption of internet right now. 0:41 A lot of it comes from mobile devices, and 0:45 when I say mobile I just don't mean a smartphone. 0:47 I also mean tablets, which are everywhere now, and 0:50 if you are building a site or an app, and you're just simply focused on the 0:55 desktop, then you're losing out on a huge percentage of people that are 1:00 going to be consuming your app, or your site, through a mobile device. 1:06 And that's why I think a mobile-first approach is important, 1:10 because you're focused on the small screen first, so you can see what's important. 1:16 What should I really, at the core of my app, or site, put on the small screen, 1:21 that'll be useful to my users, you know, the consumers of this site, or app? 1:27 And then, you can scale up and you can always add more features and 1:34 functionality, but it's the taking away of 1:37 features and functionality that's so keenly important. 1:40 It's important to consider the small screen first, so that you can focus on the 1:43 core components of your app, or your site, 1:47 because it's easier to add, rather than subtract. 1:50 >> Industry data tells us that the vast majority of mobile users are 1:55 using one of the two major operating systems: Apple's iOS or Google's Android. 1:59 However, the number of devices running on these 2:05 two operating systems grows every year, meaning, if you're 2:07 a designer or a developer, there are a number 2:11 of different screen sizes and resolutions to worry about. 2:13 While apps are designed specifically for one of the mobile 2:18 operating systems, websites can be affected by the different devices. 2:21 It's important to understand that trying to 2:26 control every aspect of how your website design 2:27 appears such as the text, the spacing, the buttons and more, is just not worth it. 2:30 Designers must accept that device differences and limitations 2:36 are going to affect the look of their site. 2:41 But the key here is that it should not affect how it works. 2:43 If you want to know for sure how things 2:49 will work and look, it's important to look for yourself. 2:50 Loading up your site on a phone or tablet can be an 2:54 eye-opening experience, and it should be 2:57 part of your design and development process. 2:59 But nobody has access to every device on the market, so also 3:01 considering running your site through a mobile emulator is a good idea. 3:05 With many mobile devices, there are many emulators to try. 3:10 But pay attention to the major ones, especially 3:13 the ones you know your customers are using. 3:16 Testing and viewing your site on a mobile device can give you an 3:20 immediate understanding of how easy or difficult your site will be to use. 3:23 Certain features like the navigation may be affected, and online 3:28 forms might cause some trouble if they haven't been formatted correctly. 3:32 Using responsive web design concepts, designers can anticipate the smaller 3:37 screen sizes, and display the site in a different way. 3:42 For example, many responsive designs alter the 3:45 layout by stacking the sections vertically, allowing 3:48 users to scroll up and down to better view content and find what they need. 3:51 Others display a different navigation menu or some 3:57 abbreviated content to better fit the smaller area. 4:00 However, depending on the site, there may some features that users just cannot live 4:05 without, and they require a number of 4:09 choices, or text fields, or additional interaction. 4:11 It's going to be up to you to figure it out. 4:15 Is this a feature necessary on a mobile device? 4:18 Can it be simplified? 4:21 In fact, many designers have switched to 4:23 a mobile-first philosophy that allows them to think 4:25 of a way to solve the problem 4:29 first, before designing the classic laptop-friendly website design. 4:30 More often than not, if you can design a feature, 4:36 or other kind of interaction for mobile devices first, then if 4:38 users view it on a laptop or a device with 4:42 a bigger screen, it should still look and work just fine. 4:44 >> So a really great example of a 4:50 navigation pattern these days, a lot of apps 4:52 and mobile versions of sites are using that, 4:55 is that collapsible and expandable nav in the header. 4:57 So that, that's important because these 5:02 days with mobile apps especially, the navigation 5:03 should not be the main feature for getting things done, especially in an app. 5:07 It should be more of an affordance, right? 5:11 You should be able to move around the 5:14 app with other affordances or through other methods. 5:15 So, I think by collapsing the navigation in the top header, it gives us more a 5:19 chance to use the app and sort of explore our own way of, of finding content. 5:24 >> Regardless of the device and screen size, your site is going to get seen. 5:30 So it's important to test it out to ensure that it looks good and works well. 5:35 While you may have designed a beautiful site on a laptop, mobile 5:40 users just may not experience that exact same thing on their phone. 5:44 So be prepared. 5:48 Accepting these limitations of these devices can 5:50 free you to better design for them. 5:54 And take advantage of the fact that the 5:57 number of people using them, grows every single day. 5:58
You need to sign up for Treehouse in order to download course files.Sign up