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).
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.
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.
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!
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.
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).
My video for Robbins’s chapter 18 demonstrates for you how to do the things required in the responsive design portion of Assignment 5.
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.
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:
A good font stack, including a suitable font generic
Changes to margins and padding as appropriate (for example, the text should NEVER sprawl full width across a wide screen)
Values specified for both background and color for the BODY element, even if the background is white and the text is black
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.
Yesterday I talked to a class about adaptation of websites so that they are usable and look good on all the screens. This is called responsive design, because it is the design that adapts to the kind of screen it’s on.