Assignment #7 Unit 7: Mobile Responsiveness
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 up.
Have you ever been on the threads on your phone before?
You ever notice how 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
Phone screens are smaller. It’s natural.
But do you know what’s not natural?
When coded threads break because of it.
I will break this lesson into two main parts:
● how to code in a way that is mobile friendly
● how to check for mobile responsiveness
Part One: Mobile Friendly Coding
There are three main ways (that I know of) to do this:
● code everything for your thread within the middle 300px of the post box
● do not define a width for your outer span and then code the inner spans relative to the outer span
● code using vw and vh as your units or code with percentages as your units
(You can read more about the third method here.)
Pros and cons of each method: click me.
Some code you can use as a base for the three methods:
● Method 1
● Method 2
● Method 3
1. For the assignment this week, I’d like you to design two mobile responsive threads.
You are required to use two different methods for each one and I will check.
I will also be grading this assignment from my phone, so if anything is cut off, you will fail.
2. Anyone who does all three of the methods will get a figurative gold star from me.
3. Post your response in reply to this post and share the code with me via Pastebin.
(Preferably in the same post but if things get weird, a separate post for each method is okay.)
(Just make sure each method has its own Pastebin link and it’s a direct reply to this post.)
4. Submissions will close May 25th @ 5pm PDT. Grades will be given shortly after.
5. Any questions? Just ask. Don’t be shy of asking. I’m here to help.
Part Two: Checking Mobile Responsiveness
You thought we were done? Not yet. Now, let’s check your work.
So, there are three main ways to do this:
1. Go on an actual phone and look at your design. (Duh.)
2. If, on Google Chrome, right click anywhere on the webpage, select “inspect element”.
You should see something like this on your screen:
Ignore the right side of the screen. It’s not important for this. Let’s focus on the left.
Notice how on the top part of the image, it says “iPhone X”.
That is where you want to click, and if you click on the arrow next to it, this appears:
Select different devices. See how your code looks. Fairly simple, right?
3. Resize your browser by dragging it to one side to collapse it.
Regular full-size browser:
Shrunken browser:
I highly recommend using at least two, if not all three methods, to check your code.
Anywho, I’ve kept you all sitting here long enough. Go forth and code, young warrior!
[tags]
3 Likes