Coding 101

astrophile · October 13, 2020, 7:02am

Unit 9: Mobile Responsiveness

Calling all students!

@flyingCouch @greekmyth @Theora @ValKayRee @panaceia @JJJ000YYY @Nablai @W.L.Ink

It’s time for the moment we’ve all be waiting for. This will be, without a doubt, the hardest assignment given so far. Do not wait until the last minute to start it. You are likely to mess it up if you do. I will be giving you more time to complete this assignment compared to previous ones. Please use it wisely.

Let’s start with contextualizing the issue. Why is mobile responsiveness a problem? Well, have you ever been on the threads on your phone before? Have you ever noticed that some code looks different on a phone versus a computer? Well, in case you haven’t noticed, it is noticeably different:

Exhibit A: desktop / mobile

Exhibit B: desktop / mobile

As you can see, Exhibit A gets ruined on mobile devices. Fortunately, it is possible to design threads that look good on all devices, even mobile devices. I will go over three methods in this lesson but there are probably more out there that work, including the Flexbox design that we went over last week.

Method 1: fit everything into the middle 300px

This is easily my most favorite of the three methods we’ll be going over in terms of creating new designs. Usually, from my experience, many devices are able to show at least 300px of post-width, so having it be in the middle makes it more likely that it can be seen by all. It’ll also look most similar between devices. Here’s an example of how a basic version of this method would look like:

Hm.

Hm.

Most of the properties should look familiar by now. margin: auto; centers the box. box-sizing: border-box; is probably new to most of you. It makes it so that the entire width of the box is 300px. Without it, the width of the box would’ve became 340px because of the padding added in all directions.

(Recommended further reading: click here)

Method 2: span nesting to the max

In this method, you would leave the outer span with no defined width. By default, if you don’t specify a width for a span, it occupies the entire space that it can and it’ll adjust to the post container as defined by the device it’s currently being displayed in. You can then define the width of its children span without losing this flexibility. Take a look at the following to better understand what I mean:

  

Notice how I use percentages to define the width for the children span? Using units like percentages instead of pixels also helps with mobile responsiveness. 20px is consistent across screens but 20% can adapt to the screen that’s being used. There are other units, too, as we’ll see in Method 3.

Method 3: relative units

This one is very tricky, and I don’t use it enough to explain it in-depth. It’s worth trying at least. I recommend you all check out this link for more information but here’s an example I made:

Hm. Hm.

Hm. Hm.

vw pairs with vh and both are units that are based on the screensize itself. vw is Relative to 1% of the width of the viewport* and vh is Relative to 1% of the height of the viewport* (source: W3Schools link given previously). Percentages also work as a unit, too.

For the assignment this time, I’d like you all to design something that is mobile responsive using one of the three methods detailed above. Tell me which method you used, so I may grade it appropriately. You are also welcome to make multiple designs so you can try out more than one method.

Direct reply to this message with your submission by October 26th 6pm PDT. Grades will be given shortly. If, at any point during this assignment you wish to ask a question, feel free to tag me and ask!