Kimberlee Johnson

📱 Why things look so bad on my phone and other things I’m learning

I learned the building blocks to design responsive design using media queries and CSS preprocessors (LESS).

I have so many memories at San Francisco’s Roxie Theater. Film festivals, Super Bowl screenings, an entire crowd’s collective gasp at the Moonlight Oscars mishap. I love this place.

I do not love its website. Whenever I try to pull up the full calendar on my phone, I have to “Click here for mobile calendar” which pops up a new tab and points me to an entirely separate site. After studying this week, I have language for what might be happening here, and questions to ask to start to fix both what’s annoyed me on their website for years, and also what’s missing from the projects I built last week. I’m building a vocabulary.

We started the week defining fixed, fluid, adaptive, and responsive website design. Responsive websites are the most accessible because they optimize for the largest number of device sizes and user preferences. We learned to build them with percentage based units, including units for font-sizing, and a bit of extra code (media queries) so our CSS says to the browser, “Hello! If you notice the user is on a certain screen size, please move the elements on the page around in this specific way to better fit a small screen.”

We explored all this in practice when we built portfolio websites from templates, learning to read, understand, and work around other developers’ code. I had to remove a very unresponsive line of code in my viewport tag “user-scalable=0” that would’ve prevented the website from scaling to a reader’s preferences, defeating the entire purpose of the project. My site is still far from perfect and there are loads of changes I need to make, but after a bit of a mysterious Github merge that erased all of my work just before our daily standup, I’m just thankful that it’s live, and also that my 6:00pm Tuesday fiction class was on spring break this week.

That’s easy to say now; I absolutely let myself get way too frustrated at the disappearance in the moment. I acknowledge that, and am also very aware that one of the muscles I’ll need to build as a software developer is keeping my cool when things break and I don’t immediately understand why or feel like I can control them. That skill will take different and likely more difficult work than learning my way around LESS and other CSS pre-processors that make the language so much more powerful, adding variables and functions. But I gave it a start when I accepted my next assignment, a horribly designed digital resume, as good enough for now and the limits I was allowed.

In our final challenge for the week, we added some missing pieces to a fictional magazine website. I passed, so am moving on to next week, when we’ll get into Javascript, which will help me really understand what is happening when I play with my Chrome developer tools to inspect the Roxie Theater website.

How I’ll apply what I learned to my blog

  • I’m re-reading back through this Gatsby template to figure out why and how this is already mobile responsive. It speaks to how powerful Gatsby is that I built this and it already worked on mobile without me doing anything.

Learnings for other students

  • If possible, find at least one hour of your weekend to doing pre-work in advance. I did not do that and took a huge mental break last weekend, and I felt it this week.
  • At the same time, having worked with blog templates and Gatsby before, I felt prepared downloading and playing with other templates this week. Do that if you can!

Life outside of learning

  • I celebrated Lawrence Ferlingheti’s 100th birthday at City Lights. This enduring space he created gives me so much hope for the future of San Francisco.
  • I don’t listen to many podcasts, but I subscribe to Krista Tippet’s On being (h/t A.G.). She starts each episode asking guests to “Tell me about your spiritual upbringing,” so of course I also found myself at a recording of the lovely Harry Potter and the sacred text podcast this week.
  • Am reading: Relatedly, a friend’s favorite book, Jitterbug Perfume, which speaks to religion and spirituality and is also hilarious at the same time, a difficult feat.
  • I went to my first Pyladies meetup. It doesn’t look like we’ll cover Python in depth in this program, but I’m interested in all the interesting things (mostly games) I’d be able to build with the language and also in getting to know this community.
  • I finally visited 3 Fish Studios in the sunset to pick up some art I bought as part of a fundraiser for California wildfire relief. The studio is so beautiful. Highly recommend.