Lesson learned: Always read the instructions first

I made a TON of progress on my project last week, and I was really excited about it. I also learned two important lessons:

  1. If you’re designing something  that you want to look good on a smartphone screen, it’s probably a good idea to test that design on an actual phone, and not just by resizing the browser on your laptop.
  2. Reading the documentation and instructions for using a framework (or really, anything) before you start using it can prevent a lot of stress.

Want to know how I learned those lessons? Keep reading.

Running into a major design snag

I don’t know if anyone else has this problem, but it’s kind of hard to keep that mobile-first approach in mind when I’m creating something on my laptop, in all its large-screen glory. Last Thursday afternoon, I was super happy with my design. I’d added images, made some cool overlay effects, and come a long way from the grey boxes with black, two-pixel borders I had in the early days.

But a couple hours before class, right after completing the Treehouse Website Optimization course, I decided to view my site with Chrome’s developer tools. I was well aware that these existed before, but I guess I’d been too stubborn (or maybe too afraid) to actually use them. As soon as I viewed my design with the developer tools mobile simulator, I noticed a glaring problem:

screenshot of my project design on an iPhone 5
This is what my design would have looked like on an iPhone 5.

When I was just resizing my browser to test my design, those boxes were perfectly stacked. Now, well, not so much. (By the way, I viewed this on my actual iPhone 5 — yes, I still use an iPhone 5 —  and it looked the same.) Hoping this was just a tiny phone issue, I looked at the iPhone X simulator:

screenshot of my design on an iPhone X

The sections looked equally off, including the ones at the bottom. So my perfectly responsive design was no longer perfect, or really, responsive.

How I fixed the problem

I spent a few hours obsessing about how I could work around this issue. Since I’m using Bootstrap, I thought about how I could force line breaks in the grid system on smaller screens, and then not do that on larger ones. I thought of a bunch of other hacks like that too, and then I thought about scrapping the Bootstrap approach entirely and redoing these parts of the site using the CSS grid system or flexbox. I was prepared to spend all day Friday actually redoing the site to make the responsiveness work like I wanted it to.

So after I’d resigned myself to that,  I decided to spend the last half hour of class reading the introduction to Bootstrap. Which I probably should have done weeks ago, before I started using it, but I’m always quick to jump into things. Craft projects, recipes, building IKEA furniture, you name it, I want to get into the doing part, not the studying how to do it part.

This is an issue I need to work on, for sure. In my elementary school, one of the teachers had a banner on the wall that said, “Prayer should be your first resource, not your last resort.” I’d like to hang a banner on my wall that adds the word instructions in there.

About halfway down in the Bootstrap documentation, I got to this:

Screen Shot 2018-07-09 at 2.04.59 PM

When I saw the responsive meta tag section, I got that tingly sensation that told me this could be the answer. I almost held my breath as I applied it to my HTML doc, fearing that I’d majorly mess something up. I saved, and looked at my site. And here’s what the iPhone 5 version looks like now:

screenshot of my project site on an iPhone 5

Look at those sections, all stacked up!

Here’s what the bottom half looks like when viewed on an iPhone X:


I walked out of class that night feeling like all was right with the world. All because I’d stumbled upon the right directions. Lesson learned, for now at least.

If you want to see the new changes to my project (on your desktop or mobile device), as always, it’s here.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s