Preview

Start a free Courses trial
to watch this video

How to Clean Up a Responsive Design

Name: How to Clean Up a Responsive Design
Uploaded: 2013-06-17T20:39:13Z
Duration: 1506 s
Description: 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.

25: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.

Speaker's Notes
Questions?
Video Transcript
Downloads
Workspaces

This video doesn't have any notes.

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

[?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

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.

You need to sign up for Treehouse in order to set up Workspace

Design and Development

How to Clean Up a Responsive Design

Related Discussions

Related Discussions