Monaen's WikiResponsive Web Design 2017-03-17

Suggest Writing Style

• Udacity Front End Feedback Extension

How to use:

1. Install the Udacity Front End Feedback Extension from the Chrome Web Store or from Mozilla’s Add-ons for Firefox (it’s free).

2. If you’re using Google Chrome, go to the Chrome extensions menu (chrome://extensions) and give the extension permission to run against file URLs. Click this checkbox in the chrome extensions menu that says “allow access to file urls”

3. To use the extension, open the webpage you want to edit, click on the extension icon, and check “Allow feedback on this domain”.

4. As edits are made, changes are reflected in the Udacity Front End Feedback dialogue box.

5. Setting about 65 words per line when you display some sentences on your website.

6. Setting base font at least 16 pixels and at least 1.2em line height.

• A good site to show the width of screen

Test on Mobile devices

Setup For Mobile

• Download Chrome Canary: (it won’t affect your existing Chrome installation)
• On Linux, the Chromium Dev channel is similar to Canary.
• Remote debugging Android devices with Chrome
• How to do it: Udacity course
• Learn about Remote Debugging on Android with Chrome
• iOS WebKit Debug Proxy: The ios_webkit_debug_proxy (aka iwdp) proxies requests from usbmuxd daemon over a websocket connection, allowing developers to send commands to MobileSafari and UIWebViews on real and simulated iOS devices.
• Testing Mobile: Emulators, Simulators And Remote Debugging: Some instructions.

Setting Viewport

• Add the meta tag

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

• Here’s what the Mozilla Developer Network has to say

• Notice that CSS does allow content to overflow it’s container. You can avoid this happening by adding the following part into your css file.

  1 2 3

  img, embed, object, video { max-width: 100%; }

Media query

Several ways to setup media query

1. add link tags

   1	<link rel="stylesheet" media="screen and (min-width: 500px)" herf="yes.css">

2. add @media tag

   1 2 3

   @media screen and (min-width: 500px) { body {background-color: green; } }

3. add @import tag – not suggested

   1	@import url("example.css") only screen and (min-width: 500px)

Notice that:

1. For performance reason, it is not suggested to use @import, it pretty expensive and perf matters.
2. Difference between linked CSS file and @media: With linked CSS, one got many small files, but many HTTP requests while as with @media, one got fewer requests but a little bit bigger files.

For developers

How to pick breakpoints:

1. Start in desktop browser with the viewport set as small as possible
2. Keep resize the webpage to find one or two (maybe more) breakpoints you think is appreperate.

Mobile browsers

• Using the viewport meta tag to control layout on mobile browsers

Optimizations

For Images

• More information about responsive images in Google’s developer resources by clicking here.

Hidden some contains

• This article comparing display:none and visibility: hidden might be helpful.

Responsible Table

• You can play with this specific example here.
• Want to learn more responsive table techniques? Check out this great article on CSS-Tricks.

How did the ellipsis happened?

• Here is the trick, for adding an ellipsis to a single line.
• Here is the trick, for adding an ellipsis when you have multiple lines.

Resources

• Guidance for Using media queries: A media query consists of an optional media type and zero or more expressions that limit the style sheets’ scope by using media features, such as width, height, and color
• Using the viewport meta tag to control layout on mobile browsers
• Read more about events and event propagation on MDN
• Responsible Table example