Day 6 (start of week 2) — Responsive Design

Eric Abell
Jul 25, 2017 · 3 min read

My original thought was to use the day number as a title for all these blogs, but perhaps adding something like (start of week 2) helps with seeing the chronology. Once the day number gets big — Day 34, 40, etc. — it might be difficult to understand where we are at. Perhaps something like w1d3 for week1 day3? I’ll think about it.

After announcements this morning, we reviewed material from the weekend reading on forms and responsive design. All of the forms material is pretty straightforward. We aren’t doing any form submission right now, so the action property is somewhat meaningless. Set up a form with a variety of input tags — easy.

We also discussed what responsive design is and how it is important for modern web sites. This comes down to using @media in your CSS file along with a minimum width. The idea is that you design a website starting with styles for the smallest device, most likely a mobile device, and then work your way up to progressively larger sizes by modifying the presentation of your content.

One of the key ideas that I was not aware of is how the ems and rems sizing measurement works with different devices. As long as you remember that these two measurement units have to do with pixel density, things are good. For example, two different devices might have the same screen resolution but different physical sizes. This makes the pixel density different and so em and rem measurements might give unexpected results.

The morning pair programming exercise was to create some responsive websites.

We created a simple navigation menu that moves the buttons around when the window is re-sized. Mobile, tablet, and desktop are shown below.

Using flexbox to do this layout proved a little troublesome. The container element needs display: flex and then child elements can use flex-basis.

There were two other exercises that feature similar challenges. I didn’t finish them before lunch, but I had some time to come back in the afternoon.

After lunch, we got the daily project. Given the time I spent on the morning exercises, this was pretty easy. The site is available here. You should resize your browser window to see how the content changes. You can also look at the site with different devices, if that’s your thing. Here’s a screenshot of the tablet view of the site.

My feeling on responsive design is that I can definitely see the importance of webpages looking good on different devices to provide the user with a great experience. I’m improving on my ability to design and implement these kinds of things. But in the long term, I think I’m more of a back-end engineering kind of guy.

The homework for tomorrow is an introduction to Javascript, so I’m excited that we’re going to start writing some actual code!

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade