Why Use 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 set up Workspace

Sign up