Project Update Part 2 – Responsive Web Design Fundamentals

Project Update Part 2 – Responsive Web Design Fundamentals


I’m going to show you
what we came up with. But this isn’t necessarily,
the right answer. Remember, this an art,
it’s not a science. And either way, I’m not going to
give you the whole answer. I’m leaving a few tweaks for
you to make, and you’ll be working on this site
again, at the end of the next lesson. Looking at the new site,
there are a number of major changes. Let’s go ahead and start small. First off, the Nav buttons that
were right here above the hero, have been shifted off-canvas,
into the Hamburger button menu. The Hamburger button, is the one
with the three horizontal lines. And now we’ve got our Nav-Links,
over here on the side. This is a nice way of retrieving,
a little bit of screen real estate. Also, the header text, is a little bit
smaller to match this smaller viewport. The first breakpoint
comes in a 550 pixels. See how the elements ref load and
change their location on the screen. The weather is now here, in this second
position, the hero is only taking up about 60% of the viewport width,
while the weather has the other 40%. Also, the Nav button showed back up. To see how it’s done,
I’ve opened up Sublime Text. You can see some breakpoints, like this
one using min-width 550 pixels and this one using min-width 700 pixels. And these breakpoints
include changes to order and widths of different elements on
the screen, like hero and weather. Great points like these, make it
really easy to change the width and order of elements and
totally change and shift the layout. The next great point comes
in at 700 pixels across. The layout’s changed a bit. Top news is moved up here. And we’ve got 50% on the Top news side,
and 50% for the hero image. And the weather is now, down below. At even larger widths, eventually the main section of the page,
keeps to a fixed width. This was accomplished with a breakpoint
that set the width to 850 pixels, once the page’s view port is as large or
larger than 850 pixels. I’ve also the shifted the scores and
the weather. The scores are taking up 60% of
the screen and the weather’s got 40%. The design that you see here, takes
advantage of a mostly fluid design, with a little bit of layout shifting,
I think the hometown site is actually looking pretty good right now,
but it’s definitely not perfect. Let’s look at the weather real quick. On this view, the weather looks like so,
with this cute little icon right here and then the actual
temperature right next to it. But if you resize the screen
just a little bit. The temperature drops down
to the line below it and that’s actually kind of gross. I don’t like that. I also think that something better
could be done with the hero image. Watch the edge of it
as the screen resizes. See how the edge actually changes? That’s because right now, CSS is being
used to set and position the image. Background size cover, will scale up the image to make
sure it covers the entire div. I think there could
be a better solution. What do you think? In the next lesson, you’ll get
a chance to finish the site and make even more improvements.

Leave a Reply

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