Freelancer — 530 | Site build | Team page: responsiveness

Responsiveness, is it absolutely necessary? No, but it’s a pretty good idea. Let’s take this team members page and make it responsive not just on desktop, tablet, mobile landscape, and mobile portrait. If we scroll up, the hero section does look a little bit plain, it’s a lot of open space. There’s an alternative we could try here while we’re testing our desktop but before we build any alternatives and try that out, let’s see how this is responsive across different weights.

So these are moving in just fine. We might want to make a change. It could help to take this default grid we used before, and instead of using it we could create a duplicate. Let’s duplicate that and name it ‘team member grid’. The reason why this might be preferable is because we can go into the grid and instead of just having three columns we could do four. Let’s see what that looks like. That is a little less intimidating, on terms of the size of the photos of everyone’s head. If it gets more narrow, it looks okay, we might want to since we changed this, to take that team member image and decrease it size, maybe it’s height to 300. So as we get more narrow things aren’t as crushed. Longer names, like Thomas McCormick, those knock down to the next line, that’s okay. It might be worth decreasing the size a little bit but that’s only on really narrow devices and even then it pushes the rest of the content down inside the grid. This looks pretty good. But the hero section. 

There is an alternative here. Let’s grab a new section, put it in above the hero section but beneath the nav bar, and let’s try setting a different height. Let’s start with 300 pixels and let’s try moving ‘meet our design team’… let’s try moving hero power graph inside. Obviously we can’t see anything right now, a lot of it is hidden beneath this. So let’s add padding on all sides. Let’s use 60, we’ve gotten use to doing this, and because this is a fixed nav bar we’ll add a little more space and more padding on the top. Now, the reason this isn’t pushing other content down on the rest of the page is because we have a fixed height. We put that in just a moment ago, just as an example. We can remove that and now the content inside will drive the size. But in order to see that, let’s delete this class secondary. It’s a major heading, the colors okay we could choose darker, that looks a little better. But this section, let’s name it ‘plain hero section’. Now, how do we center this content? Because if we hit ‘center’ in terms of align, the text, that’ll work for the major heading because that major heading is taking up the full width inside. But remember, on here power graph, we set a maximum width of 400. One way to combat that for plain hero section, we could just use flex box. We click flex, that lets us stack our content vertically and we can just align the content to the center. That means if we put additional content underneath, like a button, that will stay centered. Delete that button because we don’t need it. This is not too bad, but with the center this feels a little bit tight. If we duplicate this, or even better, let’s create a combo-class. Let’s call it ‘wider’ and, instead of a max-width of 400 let’s try, 550. That looks better. Now we have this hero section for team, we’re not using it, let’s delete it. This is looking a little bit more acceptable. Let’s hit preview, that looks okay. Maybe these images aren’t working. These are all square images so the team member image may not be appropriate. The reason is the variability, while works with certain images, might not be so great for headshots. So as an alternative let’s try out an image. We’ll drag an image right inside the collection item and we’ll get that image, we’ll grab that image, from the image field. Keep things square. That will size things based on the space it has available. How is that different from a div block? Well the div block had a set height of 300 pixels. That means it is 300 pixels tall even if the image gets squished. But if you look at the images above it, even on widescreens, things aren’t clipped on the top and bottom because it is not set to cover. The image, each square image, keeps its aspect ratio. This only works if each image has the same aspect ratio. For instance, if one of these images were significantly wider, 2000 pixels by 1000 pixels, all the other content would be pulled up against it. It only works, an image only works in situations like this if it has the same aspect ratio as all the other images. In this case that works, so let’s delete team member image so now we have an image field that works great. Things scale really smoothly, regardless of the width. Is there too much whitespace on top? Maybe, we could add a little more up here, 2150. We can keep playing with this, eyeball it. Something to note is, at the end of each of these collection items, there’s not that much space between it and the item underneath. We could just grab a team member title really easily and add some lower margin, maybe 30 pixels or 60 pixels of lower margin to get some whitespace there. That looks a lot better and that’s desktop.

Let’s move on to tablet. We are getting a little crowded in our team member grid so with that selected let’s edit the grid and remove maybe two of the columns. So now we have each image like this, that looks a lot better. Let’s hit done and the space up here, we might want to decrease from 150 to maybe 90, and then the bottom, maybe down to 30, and then the top, maybe down to 60. Just compacting things when we have a little less screen real estate. This looks a lot better on tablet. All these areas look pretty good. Let’s move on to mobile landscape. Now, Rebecca’s image and everyone’s image is a little large here, so with any of these images selected, we could put a constraint on it. Or we could just do two across. Let’s start by doing two across. Team member grid, let’s edit the grid, add another column. Again, since we duplicated this class earlier and created team member grid, we’re okay making changes. This will not affect the other grid we created before in the portfolio page. So that might have solved the problem, it looks pretty good, maybe compact this a little  bit by grabbing team member title. We did 60 on the bottom four, let’s do 30 on the bottom now. Okay, this is looking a lot better. Maybe a little less space on the top, let’s try 30. This looks a lot better on mobile landscape. Let’s test fluidity. These things fluidly respond like we expect them too. This looks pretty good.

Let’s move onto mobile portrait. Something immediately obvious is this compactness. It’s really tight because we have this padding of 60 on each side, it’s really tight. We had that over here too, and we might want to make the change on mobile landscape so it’ll affect mobile landscape and mobile portrait. So back to mobile landscape let’s decrease the padding on the sides to… nothing. Mobile portrait. Another thing to note is the limited space between ‘meet our design team’ and the hero paragraph. That might actually affect mobile landscape, maybe tablet, nope just mobile landscape. So this is being used, not just on this page this major heading darker, we used it on one other page. We used that on this client projects template. We used that for the major heading. This is inside a grid, and that grid automatically provided a gap, it provided space in-between each of the roads and that space is okay. Why we removed that before in Cupertino homebuilt, for instance, we add 10 pixels. Increase the gap a little dramatically. That doesn’t look too bad, but on mobile portrait, that’s a lot of space. It’s not necessarily grouping this heading with the content underneath. So let’s undo that and make the change a little more locally. Make that change back into ‘our design team’. Make that a mobile landscape. So, major heading, we have major heading darker. We can add another combo-class, but things are getting a little complicated at that level. We can just hit duplicate and name it ‘darker2’. Again, there are better ways to organize classes like this, we can always go back and clean up a little bit later. As long as we know what we’re doing, as long as we can keep track of these classnames things are going to be okay. Let’s add 10 pixels to the bottom and then check mobile portrait. The thing we want to do on mobile portrait is see what it looks like on the narrowest possible screen, what happens on mobile portrait when we go into 240 pixels. Things are getting really scrunched. So, on mobile portrait, let’s go to team member grid, let’s select this, and remove, let’s right click this time, delete column because there’s only one person per column. And, for this image, we can do this on each of these. But for mobile portrait lets add a class of ‘team member image’. Now, team member image is no longer in use. If we select that we are inheriting a lot of those properties we did before. So let’s undo and real quick we’ll go over to the style panel and hit clean-up. It’ll detect any unused styles, like team member image and delete them. We can start fresh back in our style panel. The image selected, let’s create a new ‘team member image’, and set a maximum width of maybe 50%. Not too bad. And for this collection item, on the collection item itself, we can create a class, and call it ‘team member collection’ item. For this collection item, we can set it to flex, vertically stack the content, and center it. 

Now, something to note, this is noticeable if we look at our hierarchy here, the link block doesn’t actually contain the team member image. This is a problem. Let’s go back and make sure we’re moving it. This move can happen on anything, but we are doing it on desktop because we want to now go back and check because we noticed that the team member image was outside of the link block. We want to check on each device again to make sure that placing it properly doesn’t interfere with any of our design choices over the last few minutes. So, we now have team member image, meaning anywhere, if we click anywhere within the bounds of this element, it’ll take us to Rebecca’s page. Let’s check tablet, that looks okay. Looks good. Let’s check mobile landscape. Looks good. Portrait, that’s okay. We want to center this so let’s choose flex vertical center. Okay that’s looking better. Now, it’s respecting, it’s respecting the 50% max, we can decrease this even more, make that really tiny. That’s impractical, so let’s pull it back to something a little more realistic. 40% might be good on mobile portrait. It’s a little tight. 50% might be the magic number here. Looks good even if we adjust the width of our device. That’s our work on responsiveness. You could leave this page as-is and it still provides a ton of value, a glimpse of who makes up the team Hayes Valley. But, we want to go further. So, we’ll take this content and generate a page for each team member.