Great advice about breakpoints

When you’re coding @media queries, you choose breakpoints. Many of you take the easy way out and write just one @media query. If you do that, and your max-width is small (600px), people with tablets and even small laptops might see a very bad-looking version of your page.

This article recommends using these numbers for @media queries: 600px, 900px, 1200px — “and 1800px if you plan on giving the giant-monitor people something special” (which you don’t have to do).

screen-shot-2016-11-22-at-9-15-54-am

I often code only one @media query (usually max-width: 800px) because I tend to be lazy, and I’m only making examples for you guys. But if I had a paying client, I would write two @media queries for any app — one for phones (max-width: 600px) and one for tablets (max-width: 900px). Lots of people do use tablets much of the time, so don’t forget about them.

I would also make sure my page layout does not get wider than 1200px (that way it doesn’t look stupid on a 27-inch iMac screen) — and I would do that with a container DIV, not a @media query.

A responsive, live-updating site

This “Live Fact Check” site from National Public Radio is highly responsive and very well designed. You should check it out on desktop, phone and tablet, and compare how it adapts to all sizes. The NPR Visuals team is well known for producing excellent online and mobile apps. The site was also embeddable by NPR member stations.

npr-debate

Update (Sept. 28): This behind-the-scenes article explains how NPR managed the process of live fact checking through this app, using a Google Doc (!) — so creative!

How NPR factchecked the first presidential debate in realtime, on top of a live transcript

Note that 6 million people used the app, and “people coming from mobile actually stayed four minutes longer than people coming from desktop,” according to the article.

Tips for Week 6: Fonts and Responsive Design

Google Fonts offer an excellent (and widely used) way to safely and efficiently add cool-looking fonts to your web apps. Sometime recently, Google updated the Google Fonts website, so I had to update your video about how to use Google Fonts. The new video is on the course YouTube playlist now. The old one has been removed from the playlist.

The new video has “2016” in the YouTube title.

Other videos this week include one for Robbins’s chapter 3. There are a number of useful online resources shown in this video that are not listed elsewhere. If you plan to do web design or development in your career, these might be useful to you. The following image shows what is covered in the chapter 3 video (find it on the playlist).

List of topics covered in video
Screen capture from my chapter 3 video.

My video for Robbins’s chapter 18 demonstrates for you how to do the things required in the responsive design portion of Assignment 5.

List of four topics
What is covered in the chapter 18 video.

Remember that on the course YouTube playlist you can read a brief description for each video, so you can see what it covers. Videos are listed in the order needed for our class, not the book order.

Please keep in mind that the exact CSS declarations typed in any video might not match what you need for your assignment. The principle is demonstrated, but your HTML and your CSS might well be different. Please do not mindlessly copy code and then wonder why it does not work for you.

A word about W3C vs. W3schools

I have seen some of you Googling for solutions and making mistakes because of that. There is a ton of wrong and outdated information about web design out there. In the chapter 3 video, I mention the W3C (World Wide Web Consortium) several times. This international group develops the open standards that govern the web.

The website named W3schools has zero relationship to the W3C. They are NOT the same. They are NOT connected in any way.

When you Google for answers and help, you will often get a page at W3schools. These pages are rarely the best. Repeat: These are NOT the best resources to use!

For this course, I have spent a lot of time selecting resources for you. If you randomly Google instead of using the selected resources, the course textbook, and the videos that I made specifically for this course, you are very likely to be doing something wrong.

I’m not saying you can never Google. I am trying to alert you to the consequences of random Googling for web design answers. One consequence is using bad information and getting it wrong.

There’s a list of links to resources on this course website. You should use it. MDN, HTML Dog and CSS-Tricks are especially useful — and reliable.

A nice example of a single-page Web app

This is as good as it gets: NPR’s annual roundup of the best books of the past year is an ideal one-page app.

NPR’s Book Concierge

npr_books_mobile

Above: Mobile screens. Below: Desktop, with one book selected (third from left). Fully responsive design, using Bootstrap.

npr_books_desktop.jpgnpr_books_desktop_modal

Above: Click any book and get this modal overlay, which you can also use to simply browse all titles. In a single-page app, you never leave the original Web page.

They have merged all their JavaScript into one minified file. Separately, they have merged all their CSS into another single minified file (plus two separate font-handling files).

At the bottom of the HTML source, you can see the entire dataset for all the books in the form of a minified JSON object.

The HTML is super-clean and readable. If you have used Bootstrap, you can understand it completely.

What is the minimum CSS that’s proper?

A student asked me what I mean by “decent CSS.”

In my mind, “decent” looks like you gave it some thought, care and attention. You have specified a nice font stack (no need to use Google Fonts, but you could), and you have spec’d some margins (and possibly also padding) to give the page a pleasing appearance. Any professional website has these characteristics. No professional uses the defaults for fonts, margins or padding.

Also, a professional will specify at least the body background color and the text (foreground) color, even when the background is white and the foreground is black. Why? You can never be sure that a user has not changed the browser’s default colors.

So, more precisely, decent CSS for a basic page includes:

  1. A good font stack, including a suitable font generic
  2. Changes to margins and padding as appropriate (for example, the text should NEVER sprawl full width across a wide screen)
  3. Values specified for both background and color for the BODY element, even if the background is white and the text is black
  4. Media queries as needed to make the page responsive, especially for mobile

Numbers 2 and 4 together mean that you are very likely to need at least one media query, because the way you specify left and right margins for a big screen are going to be bad on sizes more narrow than about 800px.

Do not forget to include the viewport meta tag at the correct location in your HEAD element.

I hope this is helpful.