Suggest Writing Style

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.

Test on Mobile devices

Setup For Mobile

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

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

How did the ellipsis happened?

Resources