Why Use Responsive Web Design?2:21 with Allison Grayce Marshall
There used to be a clear differentiation between desktop and mobile. With the introduction of tablets and tons of new internet accessible technologies, we've been faced with designing for more monitor resolutions and devices than ever before. In this video, we'll learn the basics of how and why we should embrace responsive web design.
[treehouse presents] 0:00 [Why Responsive Web Design? with Allison Grayce] 0:02 What exactly is a responsive website, 0:05 and why do we need to make one? 0:07 Some years ago there was a clear differentiation 0:09 between desktop and mobile. 0:12 We'd have a computer and a smartphone, 0:14 a desktop website and a mobile website. 0:16 But with the introduction of tablets 0:19 and tons of new internet accessible technologies, 0:21 we've been faced with designing for more 0:23 monitor resolutions and devices than ever before. 0:26 By embracing responsive web design, 0:29 we're able to create a website that is flexible 0:31 and fits beautifully into all of these devices 0:34 rather than trying to create and maintain 0:36 individual websites for each device. 0:39 So this all sounds awesome, 0:41 but how do we create a responsive website? 0:43 Responsive websites are built on a flexible, fluid grid 0:45 that adapts to the browser or device that renders the website. 0:48 As you can see, when we drag the corners of this website, 0:51 they layout and images scale down as we go. 0:55 Notice when we do the same thing to the Smells Like Bakin' website, 1:00 however, it remains centered and fixed to the middle of the browser. 1:02 That's because the first website is built on a fluid grid 1:07 using percentages for widths instead of pixels 1:10 like we used in the Smells Like Bakin' website. 1:12 Creating a fluid foundation is the first step to creating a responsive website. 1:15 We do this first by taking our completed website comp, 1:19 and when we're ready to turn it into a working website, 1:23 instead of using exact pixel widths for the columns in our website, 1:26 we interpret them with percentages 1:29 in relative proportional terms to one another. 1:31 While there's absolutely nothing wrong with a fixed layout, 1:34 a responsive website will create a version of the same website 1:37 that can stretch and resize with the browser. 1:41 This makes sure that your website adapts to whatever size browser 1:43 or device your user might be viewing your website in. 1:47 Notice again when we drag the corners of this website, 1:50 when we get to a specific width, 1:53 the website snaps into a different layout. 1:55 This is achieved using media queries. 1:57 Media queries allow us to target specific widths 2:00 where our layout begins to break 2:03 or starts to look a little squished or tight. 2:05 They also allow us to take control over our fluid layout 2:08 and target specific devices like tablets and smartphones. 2:10 We'll talk more about media queries in a later stage 2:14 and learn how we can use them to get the same effect 2:17 on our Smells Like Bakin' website. 2:19
You need to sign up for Treehouse in order to download course files.Sign up