Skip to content

Latest commit

 

History

History
313 lines (206 loc) · 11 KB

Lesson2.asciidoc

File metadata and controls

313 lines (206 loc) · 11 KB

Udacity/GWG Mobile Web Nanodegree notes. Lesson 2

2.1 Defining the Viewport

In this lesson we will learn how to optimize our pages for different screen sizes. Whether it’s desktop or mobile. We will learn the difference between CSS and device-independent pixels, and we will learn how to choose the right sizes for different elements.

In the end of the lesson we will learn how to build a mobile version of the hometown site.

The two instructors are discussing what the issue is with non mobile friendly websites and why they are like that.

The issue is that the viewport is not set properly. Viewport defines the area of the screen that the browser can render content to.

2.2 Pixels, pixels, and moar pixels!

In this lesson we are going to try and understand pixels further.

In the example, they use a tablet. The tablet will have 1600 hardware pixels. The browser reports the width of the device independent pixels aka DIPs. In this lesson, this tablet only has 800 DIPs.

A device independent pixels is a unit of measurement, that actually relates pixels to a real distance. The idea being that a device independent pixel will take up the same amount of space on a display regardless of the pixel density of the display.

The browser has a viewport width of 1280 DIPs gets scaled up to 2560 hardware pixels.

Now, in the case that the viewport isn’t set for a webpage, by default, the webpage will work on a screen that is 980 DIPs wide. If the website was a normal 1080px hardware pixel device pixel ratio: 3 and then it’ll get sent to mobile phone with the scaled 360 DIPs wide.. the content will look horribly scaled. Like this:

scaledprob

It does have its own way of handling this with font-boosting. Font boosting is when it tries to pick the primary content on the page and scale it up.

2.3 Quiz: Pixelation

Question: You look up the tech specs for the screen of a mobile device and find it has a resolution of 1920x1080 pixels. What kind of pixels are the tech specs referencing?

  • A. Device Independent Pixels( DIPs)

  • B. CSS Pixels.

  • C. Hardware Pixels.

The answer is: C. Hardware Pixels.

A resolution of anything is the actual physical pixels on the device which is independent from what the browser will use.

2.4 Quiz: Calculating DPR

Question: Which of the following diagrams demonstrates a display with a device pixel ratio of 2? quiz2 4

the answer is the 2x2 square box because it has 2 DIPs across and down.

2.5 Quiz: What’s the difference

Question:

Why would the same website look different on screens of identical resolutions?

  • A. CSS Styles aren’t rendered predictably.

  • B. The device pixel ratio differs between devices.

  • C. <meta>'s initial-scale causes inconsistent zooming on different devices.

  • D. The viewport wasn’t set.

  1. No, because in the situation between the two devices is not caused by the CSS.

  2. Yes, because different device pixel ratios can definitely change the size of content on the page if you don’t handle it correctly.

  3. No, because the initial scale isn’t going to cause the inconsistent zooming that you see on the example.

  4. Yes, because when you don’t define the viewport, you’re leaving it up to the browser to figure it out which will cause a disparity that is seen there with font boosting.

2.6 Quiz: Calculating CSS Pixels

Question: A mobile screen has a resolution of 1920 x 1080 px with a device pixel ratio of 2. What is the maximum width of a viewport in landscape mode measured in CSS pixels?

The answer is 960 because

a device pixel of 2 tells us for every 1 css pixel there are 2 hardware pixels. multiply 1920 by one half will give us 960 css pixels.

2.7 Quiz: How wide is the viewport?

Calculate the width (in DIPs) of the viewport for all of the devices below. Type your answer in the boxes on the left.

  • Phone 650px wide, DPR = 2

  • Phablet 768px wide, DPR = 2.5

  • Tablet 1024px wide, DPR = 1

  • Laptop browser, 800px wide, DPR = 1

The answers are:

  • 320

  • around 300

  • 1024

  • 800

You divide hardware pixel with the DPR to get the viewport (DIPs) size.

2.8 Setting the Viewport

Insert this meta to the head element:

<meta name="viewport" content="width=device-width,initial-scale=1">

This will tell the browser that we know what we’re doing.

  • We need to use the meta viewport value with =device-width which will instruct the page to match the screen’s width in device independent pixels (DIPs). This allows the page to reflow content to match the screen sizes. Whether it is rendered on a small mobile device or a laptop computer.

  • Adding initial-scale=1 instructs the browser to establish a 1 : 1 relationship between DIPs and CSS pixels. If you don’t give the initial scale=1 setting, some browsers will keep the page width constant when rotating to landscape mode. They also scale the content rather than allowing it to reflow.

Note
 CSS pixels are what we are used to working with most of the time, and it’s the only thing we need to worry about.

2.9 Large Fixed Width Elements

One of the instructors mention that relative width is good for responsive design.

The other instructor shows what happens when an image that is an absolute position is very large and shown on different viewports.

2.10 Max-width on Elements

It’s important that the content fits within the viewport to prevent horizontal scrolling.

We should use relative units when specifying widths for elements to prevent them from accidentally overflowing the viewport.

Note
 Keep in mind, CSS does allow content to overflow its container. For example the container(div) has a set width and the content (image) is larger than that container, it will overflow.

To avoid this from happening, It’s best to use max-width: 100% .

As a catch all, the instructor recommends adding the max-width: 100% to images, embed, object, and video elements. Just to be safe.

2.11 Quiz: Relative Sizes

Question: Which of the following snippets of code are responsive and will look great on any device? Check all that apply.

  • A.

<img id="owl">
#owl {
    width: 640px;
    max-width: 100%;
}

  • B.

<div class="box"> </div>
.box {
    width: 350px;
}

  • C.

<img class="logo">
.logo {
    width: 126px;
}

  • D.

<div class="city"> </div>
.city {
width: 100%;
}

Answers: A, C, and D.

While A and D has the relative width of 100% that the lessons been reminding us, C would also work because the width is pretty small and wouldn’t have issues with mobile devices. B would kind of work, but the width of 350 can be bad since some screens can be lower than that.

2.12 Tap Target Sizes

Tap targets or anything that a user might touch, tap, click or try and do input on, need to be big enough and easy to hit. They also need to be spaced so that you’re not going to accidentally hit two at the same time.

Pete tells us that our fingers are about 10 millimeters wide or 1/2 inch in CSS pixels, it is 40 CSS pixels. Cameron asks if the buttons should be at least 40x40 pixels. Pete tells us we should make them 48x48 pixel and at least 40 pixels of room between any of your tap targets that way users don’t accidentally hit two other targets.

2.13 Quix: Tap Targets

Question: What CSS styles would you include so that Cameron won’t be tortured by tiny, impossible-to-hit buttons? Type in the rules in the box below.

From what we’ve learned, they need to be bigger than 48x48 with a margin of 40px around it. I initially wrote width and height, but this lesson wants you to use min-width and min-height instead because if you just use height and width alone, it won’t allow the element to resize if the content inside of it is bigger than the container.

2.14 Start Small

When designing a responsive site, we use the same processes that we go through for a non responsive site.

  • It’s best to start the design with the smallest form factor, which is usually the phone.

  • Next is the tablet.

  • Lastly, the desktop.

When you start small like with a phone, we learn to prioritize content. Like, what is the most important thing that they want to do or that they’re going to see on the screen?

The issue with starting big and then designing down, it can be too easy to just cut or hide content that may be important. The benefit of starting small with prioritizing content, the key content is always onthe page and the users get the full experience, no matter what device they’re using.

For example, the design for one hardware store prioritizes information about the nearest store, its address, hours, and phone number and puts it right at the top so its users can easily find it.

Beyond designing from small to large, Pete also code from small to large. That way he knows that his core styles and layout will work for any device, even on legacy browsers that don’t support media queries.

Pete’s favorite reason to start small and work up, is performance. When designing for the smallest viewport first, we are forced to think about performance from the beginning. We would have to think about prioritizing content, and how much data we’re sending to the user.

2.15 Quiz: Project Part 1

For this quiz, we have to download the project and modify it to make it responsive.

TODO:

  • Add meta viewport to the page with initial scale set.

  • Adjust CSS and markup so that everything displays in a single column. Use relative widths so that things stretch to fit across any viewport width.

  • Make sure your touch targets are easy to hit.

  • Test your site across different viewports. Try it on different phones, tablets, and desktops!

2.16 Project Solution - Long

Cameron made some changes to the CSS through the dev tools, but later suggests it’s better to actually do it in code. Though, it is nice to see the changes and its highlight right into dev tools such as the border of padding.

  • First thing you need to do is add the meta tag <meta name="viewport" content="width=device-width, initial-scale=1.0">.

  • So basically, whenever there was a set width pixel of a container or some type, he would change the width to 100%.

  • If there was a link, he would make sure the area is at least 48 x 48 px, so he would give it 1.5em padding. Sometimes it would have inherit.

Lesson Summary

I learned a lot in this lesson.. such as:

  • Don’t forget the meta tag!

  • buttons need to be at least 48x48 px in size with at least 40px margin around the button. Cameron uses em to deal with this. I need to learn more about em.

  • The size of the container needs to use percentage that way it can flow with its viewport.

  • You can ignore containers smaller than the width of a mobile size. Anything larger needs to be adjusted for responsiveness.