Portfolio page: responsiveness — The Freelancer’s Journey

Portfolio page: responsiveness — The Freelancer’s Journey


And now the conclusion. The next three videos in this build process
involved wrapping up work on these client pages, the portfolio for Hayes Valley. So before we move on to build out, each of
the client project pages, let’s work on making our portfolio page responsive. We’ll do this in four sections just like
we did on the homepage, we’ll do desktop, tablet, mobile landscape, and mobile portrait,
by the end of this lesson, we’ll have a responsive design that responds to the width of whatever
device were browsing from and before we start a quick note about this the more we build
the site the more we take advantage of using classes and symbols were able to use and reuse
parts of our design which doesn’t just save time but it makes things consistent see this
not only in styles on the page but in our layout as we make adjustments, let’s start
with desktop and everything looks pretty good on the default width here. Everything looks pretty good. Let’s check fluidity as we grab the edge and
drag to adjust. This looks pretty good, everything scales
nicely. Each of the collection list items. Looks like it’s consistent. We’re getting that 60 pixels. If we go to our padding here, we’re getting
that 60 pixels which looks consistent not just in this client projects grid but in our
hero section as well and the 60 pixels works fine, there’s no adjustment that we really
need to make on this so desktop looks good. Let’s move on to tablet and immediately we
can see on tablet things. Also look pretty good. Our hero section might be a little tall we
could decrease that size at 600 pixels. Now we could do 400 on tablet make it a little
more reasonable for that limited screen real estate and that 60 pixels still looks fine. We might want to play with that padding a
little bit. Let’s drop it may be to 30 pixels on tablet. Same thing with our client projects great. Let’s take that 60 and make it 30 just so
we have some more content that fits on the screen because we have that limited screen
real estate and you know what? It might be a little tight. Let’s undo and go back to 60. 60 does work. OK here are narrowest. It works fine on our widest. It also works fine tablet looks pretty good. Let’s move on to mobile landscape, same issue
here that we had with tablet, the hero section might be a little tall for such limited screen
real estate. So let’s decrease this to 250 maybe a little
more than that. Let’s go up to about 300, that looks good. Now definitely on mobile landscape that limited
screen real estate with a 60 pixel padding. It’s a little tight. Let’s decrease padding on this one to 30,
same thing on the client projects gray just holding down shift and dragging to make adjustments
on all four sides at once. The other thing to note is this client projects
grid is really tight, even though we’ve reduced that padding everything’s really tight. So let’s make some adjustments there. The first thing we can do is adjust or headings
on all of these. So we’re getting that smaller font size. Here and that actually might work fine, but
it’s these headings the secondary headings that look a little bit tight. Let’s go to our narrowest view so we can work
from there and let’s drop the size to about 18 pixels, maybe 20 pixels. That looks okay. The fact that the grid is a 3 by 3 or at least
a three column layout that might be the culprit here. So let’s try removing one of those columns. All our content is just going to reflow, that
looks a lot better. Let’s click done there, and still a little
tight. Let’s try it wider. It’s a little bit tight, could try decreasing
the size of this a little bit, but that’s really not the culprit here. It looks like two columns might be too narrow
and mobile landscape two columns might just be too much in mobile landscape. Let’s see how one column would work. So with our client projects grid selected
will edit that grid reduced to one column. That does add a lot more breathing room in
the collection item itself. We can reduce that padding at the bottom,
make that zero. It’s a little more legible. Let’s test that, seems to work a lot better. So we’re having that space where having that
alignment between these items, the 30 pixels of padding over here and the 30 pixels here. That’s a lot more browsable a lot more legible
on mobile landscape. Okay, mobile portrait and on mobile portrait,
there’s not that much to do. It looks pretty good on mobile portrait, even
when it gets tighter like this, we could explore reducing or completely eliminating the padding
in the section may be adding 30 pixels back to the top but keeping the padding or maybe
even 15 pixels, but keeping the padding off from the sides and bottom it gives us a little
more breathing room. We no longer have that alignment but that
might work. Okay, we could come back to this if we end
up wanting to go back to the other design that is of course, we could go back to this
client projects grid and add it all back to 30, you know, we could even do 15 on the padding
here and do 15 on the padding here. That might be a good compromise. So we still have that consistency from the
text up here, the H1 and the H2s the paragraphs. This looks pretty good. Now something to note on tablet. We can see that each of these pieces of content,
each of these collection items, the image, the H, the paragraph, they belong together. The spacing between these belongs together,
might want to add a little more margin to the bottom here. In fact undo that let’s go back to desktop. We might have a little bit of an issue with
the H2 being too close to this rich text. So let’s make that 10 and that should cascade
down to the other views. That looks good. That looks good. We might want to add a little more spacing
down below. So with our collection item selected we can
add some margin to the bottom just to make each of these clearly nested together so that
our image are heading in the paragraph. They look like they belong together could
even decrease that margin a little bit on the heading. That looks pretty good. This one just because we have limited real
estate. We might want to tighten things up on mobile
landscape mobile portrait. Now, it’s looking a lot better. The consistency here. That’s really a call. We can make later but the hero section might
look a little odd with this padding. Let’s go back remove this, hold down shift,
get rid of it on all sides put the 15 back on the top but that’s good for now. And that’s it. We made this page responsive and verified. Everything looks great on desktop tablet mobile
landscape and mobile portrait. And in the next video, we have the long-awaited
nine different pages that will be built from just one.

About the author

Leave a Reply

Your email address will not be published. Required fields are marked *