How to Clean Up a Responsive Design25:06 with Nick Pettit
In this video, we'll finish things up by making sure our site responds appropriately to smaller screen sizes. To accomplish this task, we'll use CSS3 media queries.
[?music?] 0:00 [Master Class: Designer and Developer Workflow: Responsive Cleanup] 0:02 [Nick Pettit] Before we go any further, we should go ahead and stop our server 0:05 and commit what we have so far 0:08 so we don't get too far ahead of ourselves and end up making mistakes 0:11 that we can't easily undo. 0:14 So let's go ahead and switch over to our terminal. 0:17 I'm going to stop the server 0:20 and I'm going to say $git add . 0:22 $git commit -m 0:28 with a message, so I'm just going to go ahead and say 0:32 -m "Styled the index view." which is a little bit of an understatement 0:35 but that's generally what we did. 0:39 And then next, I'm going to go ahead and merge this branch 0:42 so let's go ahead and switch back to our branch master 0:46 and then do a $git merge style on the style branch 0:50 and then I'll go ahead and say $git push 0:57 and that will push up all of our changes to master. 1:01 And before I actually did that, we probably should have done a $git pull on master 1:05 just to make sure Jim didn't make any changes, 1:10 but that looks like we're good there, so let's go ahead and switch back to our style branch. 1:13 So we'll say $git checkout style 1:17 and now, we're ready to continue working, so we'll fire up our server 1:21 by saying $rails s 1:25 and now, we can go ahead and switch back to our text editor. 1:28 So next, we need to go ahead and style our forms, 1:34 so let's go ahead and open a few of the views that we're going to be taking a look at. 1:38 We want to open the new user_session view 1:42 just to see what we have going on there. 1:46 And then let's also open the New user view, 1:49 which is where users will register. 1:53 And then finally, we'll open the New jobs view 1:56 and the Edit jobs view as well as the form. 2:03 Now let's switch over to the browser and see what some of these forms look like. 2:07 So I'm already logged in, and let's try to create a new job. 2:13 And if I scroll down, it looks like we're having a little bit of a problem 2:19 with the content area not wrapping the form completely, 2:24 and I think I know what's going on there, 2:27 but we'll get back to that in just a moment. 2:30 If I go ahead and sign out and then try to register as a new user, 2:33 it looks like we have the Easy Jobs! logo appearing in that form for some reason. 2:38 Again, I have a pretty good idea of what's happening there, 2:44 but we can go ahead and fix that. 2:47 And next, I'll go ahead and say Sign In 2:49 to look at the New User session view. 2:52 This has a whole bunch of space down at the bottom 2:56 and again, I think these are all pretty inter-related problems. 2:59 So let's go ahead and switch back to our text editor 3:03 and let's go over to our style sheet 3:07 because I don't think we actually need to make any changes in these forms. 3:09 I think it's just some styling that's been applied. 3:12 And yep--if you'll notice right here on the content div, 3:16 we have an explicit height of 500px. 3:20 Now, this was probably added because we didn't have any content 3:24 when we were first starting out and we just wanted to see what the page looked like, 3:28 but it was never removed. 3:31 We don't actually want this explicit height, 3:34 so let's go ahead and remove that so that the content area 3:35 will conform to the content that we have. 3:40 So let's go ahead and save that 3:43 and switch back to the browser, and if we refresh the page, 3:45 you can see that our Sign In form is now nice and tidy. 3:48 We'll go over to the register form and that's also been tidied up as well. 3:54 We still have the problem with this logo appearing here, 3:58 but we'll get back to that in a moment. 4:02 If we go ahead and sign in, 4:05 we can look at the New Job form. 4:10 And if we scroll down, it looks like that explicit height issue 4:14 also fixed the New Job posting form, 4:18 so it looks like we're actually in pretty good shape on the forms. 4:23 Now let's go ahead and tackle that issue that we had 4:26 with the Easy Jobs! logo appearing on the registration form. 4:30 First, let's switch over to our text editor 4:36 and let's try to find the new registration form. 4:39 So here, it looks like we have the New user form 4:44 and I think what's going on here is that we have an h1 instead of an h2. 4:48 Now, the h1 sitewide has the styling of the logo, 4:55 so while changing this to an h2 will fix the problem at hand-- 5:00 and as you can see, it's fixed there in the browser-- 5:06 we should still actually try to fix the original problem, 5:08 which is the sitewide styling of h1s. 5:12 Now, we should only have one h1 on the entire site, 5:15 which is the logo, but just in case we miss one and another h1 appears, 5:18 we don't want the logo appearing elsewhere, 5:23 so let's try to get more specific with that logo. 5:26 So if we scroll up, we'll find the h1 styling right here. 5:30 Now, we should have a better way of identifying this, 5:35 so let's go ahead and open up the application layout where this resides 5:38 and as you can see, we actually do already have an id on there of #logo. 5:43 So we'll go ahead and copy that and paste it next to our h1, 5:49 save it out, and when we switch back and refresh the page, 5:53 it should look exactly the same, but now any other remnant h1s 5:57 that we happen to miss at least won't have the Easy Jobs! logo. 6:02 So I think that should about wrap it up for the forms, 6:08 so let me go ahead and sign back in. 6:11 And now, let's try to make these Flash messages look a little bit nicer. 6:14 So I'll go ahead and switch back, and let's take a look at the application layout, 6:20 and if you'll notice, we have a class here called notice 6:27 and a class here called error, and those are what we need to style. 6:30 So let's go ahead and try to do that. 6:35 We'll grab the notice class and we'll go ahead and just put that in the basic styling section. 6:37 And additionally, we'll also just apply the same styling to the error class 6:46 and then maybe we can change the color later on. 6:52 So first, we'll say display: block. 6:56 It should already be display: block, but we'll just make sure that it is. 7:00 We'll give it a background color of green, 7:05 a text color of white, and let's just save that out 7:09 and refresh the page. 7:13 And our Flash message disappeared 7:16 and we could go ahead and go into the application layout and edit it 7:18 so that a Flash message is always visible 7:22 and not conditionally visible, but we'll just go ahead and be lazy 7:26 and click the Sign Out button here. 7:29 And now, as you can see, we have this Flash message here 7:31 and this is what our styling is looking like so far. 7:34 I think that's almost pretty good. 7:38 We'll go ahead and maybe add a light-colored border 7:40 and some margin and height to it, 7:43 so let's go ahead and do that now. 7:46 We'll switch back, and first we'll add some height of maybe 50px, 7:48 some margin on the top and bottom of 20px and none on the left and right. 7:54 And then finally, we'll go ahead and add a border of 1px. 8:00 We'll make it solid, and instead of just saying green here, 8:06 we'll actually give this a real color, so we'll maybe say go light on the reds, 8:10 heavy on the greens, and light on the blues #33FF33. 8:18 And we'll use this same color for our border, 8:24 but we'll make it just a little bit lighter. 8:28 So we'll go ahead and save that out 8:33 so when we switch back and refresh, 8:36 it looks like we have a pretty ugly problem here, 8:40 and that's actually probably because notice and error are always visible 8:43 so they're not conditionally visible and we can go ahead and change some of the styling here 8:48 to reflect that. 8:54 Rather than giving it an explicit height, 8:55 let's just go ahead and add some padding to the top and bottom 8:58 and none on the left and right, and let's go ahead and see what that did. 9:02 So it looks like it's still there, 9:06 so let's remove the display block and some of the other elements we have here. 9:08 And even so, it looks like it's still there, so we need to just go ahead 9:17 and remove this padding entirely. 9:21 And now it's not visible anymore and it looks like we can't quite do the styling 9:24 that we wanted to, but that's okay. 9:29 Now let's go ahead and adjust the styling for our error messages. 9:33 So for errors, we'll go ahead and change our background to that background color of red 9:40 that we've used elsewhere--that nice dark-color red. 9:49 And just to be doubly sure, we'll go ahead and add the background color, 9:53 or rather, text color of white to make sure that the text there 9:58 is indeed coming across as white. 10:01 So that will about do it for Flash messages 10:04 and now, I think we're probably ready to move on to media queries. 10:08 So let's go ahead and switch back here 10:13 and we'll go ahead and sign in. 10:17 And there's what our Flash messages look like--not great, but functional-- 10:21 and let's now go ahead and refresh the browser 10:28 and let's see what happens when we resize it. 10:31 So if I go ahead and resize the browser, 10:35 it looks like our fluid grid is actually doing pretty well. 10:39 We don't have a whole lot of fluid width elements in here, 10:45 but we have just enough that the styling actually looks pretty good 10:48 when you move it down to, say, the size of a smartphone. 10:53 It looks like we are getting a horizontal scroll bar here, 10:58 so there are some adjustments that need to be made, 11:02 but there actually a lot of serendipitous things happening here 11:04 that I think are unplanned but are perfectly fine, 11:07 so let's take a look at those. 11:11 For example, up in the upper right of the page, we have the Log In credentials, 11:14 the Sign Out links, and so on, 11:20 and when we make the page smaller, 11:25 you'll notice that right about here, 11:27 it pops down underneath the logo. 11:30 Now, that was completely unintended, but it actually looks fine like this, 11:32 so I think we can go ahead and just leave that 11:38 without making any adjustments. 11:40 The second thing I'd like to draw your attention to 11:42 are the links in the job index view here, 11:45 So we have these descriptions and when they get close to the titles 11:49 when we make the page smaller, there is a point where they do completely disappear, 11:54 which isn't great but right after that, they pop right underneath the titles 11:58 and I think that looks great. 12:04 So those are two really nice examples of what I would term "serendipitous design." 12:06 Now we need to make a few adjustments here to get rid of this horizontal scrolling 12:12 and I think the problems here are the Easy Jobs! logo is a bit too wide, 12:16 so we'll address that first. 12:21 And then after we address that, 12:23 we need to address the content area here because I think that's also adding 12:25 to our horizontal scrolling. 12:30 So we'll start out with the index view, address those two problems, 12:33 and then we'll go ahead and look at other views to see how they look. 12:36 So let's tackle that logo first. 12:40 We'll go ahead and scroll up here to our logo, 12:43 and it looks like the width is a bit too wide here, 12:48 so let's go ahead and copy this 12:51 and we'll paste it down at the bottom of our file and crunch it in there. 12:54 We'll go ahead and add a new comment flag here by copying and pasting 13:03 and this comment flag will be for MEDIA QUERIES. 13:09 And we aren't going to be very scientific about our fluid grid 13:16 or our media queries, but we don't really need to be. 13:20 If a site looks good at various sizes, 13:24 then that's all that really matters, 13:27 so we'll go ahead and add in a media query here, 13:29 and I think the only media query that we need to have is for smaller screens. 13:34 So we'll say @media using the media rule 13:39 and we'll say only screen and 13:44 when the max-width of the page is 480px or less, 13:47 then on the h1#logo, we want to make a few adjustments. 13:54 Now, the things I think we can keep are the text indent, 14:03 the actual background itself, 14:06 and I also think the height is probably okay. 14:09 And we still want it to float to the left, 14:14 but I think we need to make some adjustments to the width 14:17 and probably to the margin-top, so let's first decrease the width 14:19 and let's just see what happens in the browser when we do that. 14:23 So if we refresh here, it looks like we're down at our 480px size, 14:28 so if we resize things, we can see that at some point, 14:34 our logo gets smaller and it even has a nice CSS3 transition there. 14:39 But the sides of our logo are getting cut off, and that doesn't really look very good 14:46 because it ruins the manila folder effect, 14:53 so let's see if we can try to fix that. 14:56 We need to adjust the actual background image that's on this h1, 14:58 and I think the best way to do that is to use the CSS3 property background-size 15:04 and we'll give it the value of contain so that the image is contained to its parent element. 15:11 So we'll go ahead and save that out and refresh. 15:18 And now the image is the right size, but as I suspected, 15:22 we probably are going to have to adjust this margin here, 15:27 so let's bump it up to maybe something like 30px. 15:31 We'll save that and refresh. 15:36 It looks like we're almost there. 15:38 We still have a little bit of width in between, and I think that's about 2px, 15:41 so let's go ahead and try that. 15:44 And when we refresh, it looks like that was a good guess 15:47 because that looks perfect to me. 15:50 And now, you can see that our Easy Jobs! logo dynamically resizes itself 15:52 when we adjust the size of the browser. 15:58 And of course, on a smartphone, this will look just right. 16:00 Now, let's go ahead and address the content area. 16:04 So we need to scroll up 16:07 and find where we're styling our content area. 16:11 It looks like that's in the top section here, and let's just go ahead and copy 16:15 everything that we have here 16:19 and paste it down here. 16:22 And we'll make sure that we indent it properly underneath this media query, 16:26 and let's go ahead and see what adjustments we need to make. 16:31 So first, I think we can go ahead and get rid of this background 16:35 because we still want that. 16:40 We still want to float it. 16:43 We may need to make some adjustments to the margin 16:46 and we may need to make some adjustments to the padding. 16:50 I think we're probably going to want the same box-shadow, 16:54 but I think we also will need to make some adjustments to the width. 16:57 So let's go ahead and save that out, 17:02 we'll switch back and refresh the page, 17:04 and let's go ahead and just remove the margins entirely 17:10 to see what that does. 17:14 So we'll save that, refresh the page, 17:16 and it looks like that actually fixed most of our problems. 17:19 I just going to add in some margin-top: 10px. 17:24 We'll bump that up to 20px 17:31 and I think that looks pretty good. 17:34 It certainly got rid of the horizontal scrolling. 17:37 I think we still have a little bit of an issue with the logged-in credentials here, 17:46 but we can probably adjust that by adjusting the margin below the logo, 17:52 so let's go ahead and try that. 17:57 We'll just 0 out the margin-bottom, see what that does. 18:00 So it looks like it's not actually the margin-bottom, 18:04 so we'll delete that, and if there's no margin on the bottom of that logo, 18:09 I'm thinking that there's actually some margin on this element here, 18:13 and that is the user bar. 18:17 So we'll go ahead and select the #user_bar and wthin this media query, 18:21 we'll remove any margin-top. 18:27 So we'll save that 18:32 and I think that actually did the trick, so if we go ahead and resize this again, 18:36 it looks like everything is falling into place really nicely. 18:43 We don't have any more horizontal scrolling 18:48 and we can easily scroll up and down the page here, 18:50 and I think this looks really nice. 18:54 Now let's go ahead and look at some of these other views 18:56 to see how we're doing. 19:00 So if I go ahead and click on the show view for a job 19:03 and resize the page, 19:06 it looks pretty good, but it looks like we're having a slight problem with this date, 19:09 so let's see if we can go ahead and adjust that. 19:15 We'll go ahead and scroll up to our job show view, 19:19 and let's see if we can find the date. 19:23 It looks like it's right here. 19:25 We'll copy that styling and paste it down here 19:27 and we may need to add an additional selector here, 19:34 so let's just go ahead and grab that job_show selector now. 19:42 And we'll paste it here, and then we'll make the proper indentation here. 19:49 There we go. 19:54 Now, the color is good. 19:56 I don't think we need to adjust that. 19:58 We still want it to be bold. 20:00 We still want to float it to the right. 20:04 The margin may need adjusting. 20:07 I think we're still safe aligning it to the center; 20:10 however, I think this rotation is way too much, 20:13 so let's go ahead and bump that down to 1 degree 20:17 and we'll also decrease the font-size just a little bit 20:20 and let's see where that gets us. 20:23 So we'll go ahead and switch back 20:25 and we'll refresh the browser 20:27 and this is looking pretty good. 20:29 I still want to bring in some of that rotation, 20:32 so let's go ahead and do that and let's see what adjustments need to be made. 20:35 So if we go ahead and resize the browser, 20:41 you can see that it bumps down pretty nicely there. 20:43 I think we just need to add some margin to the bottom 20:48 to give it some separation from the description. 20:51 So we'll go ahead and say margin-bottom: 20px. 20:54 And if we refresh, that looks pretty good; say maybe 24px. 21:01 And now, when we resize the browser, I think we're in pretty good shape. 21:07 There's still a small point here where the date doesn't look quite right, 21:13 but I think in general, things look pretty good. 21:18 We're certainly targeting any sort of smartphones 21:23 that would be likely to view this site, so that's what's most important here. 21:25 So let's go back and let's look at some of the forms and Flash messages, 21:30 so I'll go ahead and click New Job 21:36 and I think that form looks pretty good. 21:40 Let's go ahead and Sign Out. 21:43 It looks like our Flash messages could certainly use some work, 21:46 so we'll go ahead and work on that next, 21:49 but let's look at the register view. 21:52 That looks pretty good. 21:54 Sign In also looks great. 21:56 And one slight usability problem I'm seeing here 22:00 is that we can't actually get back to the homepage, 22:05 so let's go ahead and turn the Easy Jobs! logo into a link. 22:07 We'll go ahead and jump into the application view 22:14 and let's wrap this h1 in a link. 22:18 So let's go ahead and add in our link. 22:23 We'll say - link_to root_url and then we need to pass it the block of our h1 here. 22:26 We'll go ahead and save that out 22:38 and if we switch back to Easy Jobs! here and refresh, 22:41 our header is now a link to the homepage, 22:45 so we could click around here and even for pages that don't have a link back to home, 22:50 we can always click on the logo here and get back just fine. 22:56 So we'll go ahead and sign in here. 23:01 The last thing we need to deal with here are these Flash messages, 23:06 so let's see if we can go ahead and handle those. 23:10 I think the easiest thing to do here would be just be to remove Flash messages entirely 23:15 for mobile browsers, so let's go ahead and switch over 23:19 to our application.SASS and for .notice and for .error, 23:23 we'll simply say display: none. 23:35 And now, if we switch over to the browser and refresh the page, 23:39 we can go ahead and click Sign Out. 23:43 We don't see any Flash message. 23:46 We'll go ahead and click Sign In, 23:47 and again, our Flash message has been removed 23:50 so I think this site looks pretty good. 23:55 Flash messages only appear when we need them 23:58 and disappear on the mobile site when we really don't need to see them. 24:01 So that should pretty much wrap things up. 24:05 Let's go ahead and switch over to our terminal, 24:09 we'll stop our server, and let's go ahead and commit our work. 24:11 So we'll say $git add . 24:16 $git commit - 24:18 with the commit message flag -m "Styled some forms and generally cleaned things up." 24:21 And then we'll switch over to our master branch, 24:38 So we'll say $git checkout master. 24:41 We'll do a $git pull before we do any merges 24:46 just to make sure that Jim hasn't done any work that we need to merge. 24:49 It looks like we're good. 24:52 And we'll say $git merge style and then $git push to push it up to the repo. 24:53 And I think that should about wrap things up. 25:01 We're ready to go ahead and meet with Jim. 25:04
You need to sign up for Treehouse in order to download course files.Sign up