You’ll be marked as late if you do.
2 Likes
Okay. I’ll try to submit it today 
2 Likes
Good luck.
2 Likes
Thanks a lot!
2 Likes
Anywho, I’ve been out of the house all day due to surprise plans.
So… it’ll be a while before I get the next assignment up. I’ll give more time, don’t worry.
4 Likes
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.<span style="font-size:; display: block; text-align: center; border: 2px solid tomato; width: 300px; padding: 20px; margin: auto; box-sizing: border-box;">Hm.</span>
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:
<span style="font-size:; display: block; border: 2px solid tomato; padding: 20px; margin: auto;"><span style="font-size:; display: inline-block; background-color: mediumseagreen; width: 25%;"> </span><span style="font-size:; display: inline-block; background-color: papayawhip; width: 75%;"> </span></span>
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.<span style="font-size:; display: inline-block; text-align: center; border: 2px solid tomato; width: 10vw; padding: 1vw;">Hm.</span> <span style="font-size:; display: inline-block; text-align: center; border: 2px solid tomato; width: 30vw; padding: 1vw;">Hm.</span>
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!
8 Likes
I have more information about mobile responsiveness if anyone would like it. I left it out of the unit this time so I didn’t overwhelm you all with details but if you’re interested in learning more, feel free to reach out to me and we can talk.
4 Likes
@astrophile Really very sorry for the late submission, Lumi! 
But my laptop was in repairs since last Wednesday and I got it back–half-repaired yesterday. Honestly didn’t think it’d take so long and make a mess of all my plans and deadlines… Along with your deadline, I had my Rebel_Town assignment deadline too 
So, I did that yesterday and completed the coding today 
3 Likes
Assignment 8 Reflection
Calling all students!
@flyingCouch @greekmyth @Theora @ValKayRee @panaceia @JJJ000YYY @Nablai @W.L.Ink
I hope you all had fun playing with Flexbox because it’s a versatile tool that will prove useful in designing certain types of threads. There’s not much else to say this time. You all did your best.
If you have any questions or concerns, don’t be afraid to reach out to me. If you want to discuss your grade, please reach out privately. I’ll be more than happy to clarify something for you, especially if it helps you reach a deeper understanding with the code. Anywho, hope you all have a good week!
| Student Name | Grade |
|---|---|
| flyx | S |
| greeky | E |
| theora | E |
| val | E |
| g-ane | F (removed from class for missing 3 assignments in a row) |
| joy | S |
| nab | L |
| ink | S |
6 Likes
Thanks for taking the time to conduct this class, Lumi @astrophile I just want to ask if I wasn’t marked late, would I have got atleast a S?
2 Likes
I can’t disclose that publicly.
2 Likes
I believe this is Method 2
Randomness Rules!
It looks better on laptop, but it does show up on phone XD
(on mobile) The order messes up but… nothing goes off the screen so I count that as a win.
Also, I forgot we weren’t using flex & I was doing a flex code xD oops.
4 Likes
Would this count as mobile responsive?
It’s none of the three methods presented in class so I wouldn’t submit something like that, I am just curious would you consider it mobile responsive.
4 Likes
Yes and no.
Yes - I can see the entire message on mobile.
No - The box still gets cut off on the right side.
3 Likes
But. But. You can move the box. 
3 Likes
Move it how?
3 Likes
You can drag the bottom right corner.
3 Likes
On mobile though? I keep trying and nothing happens.
3 Likes
I can drag it to the right and to the left on my phone. @flyingCouch said she can move it too.
3 Likes
Hm. What kind of phone?
3 Likes