Using max-width on an IMG (or any other element)

This refers to a question asked near the end of class today. It turns out max-width (for images) is covered in Robbins chapter 7, but in the latter part of the chapter that you were not assigned to read. I realize now that this was related to changes in the new edition of the book, because Robbins details how to use srcset and multiple versions of an image file, and I DO NOT want you to bother with all that, because in professional settings the multiple versions are created by automated software on the organization’s web server.

However, max-width is easy to use and very common, and it will likely help you in Assignment 4 (your second CSS assignment). It’s used for more than just images.

One of the easiest ways to use it is to make sure your image can automatically shrink in size if necessary.

img {
   max-width: 100%;
}

That would affect EVERY image on the page. Just add it to your CSS. If the image is inside a DIV or other element that changes in size on a smaller device, the image width will always be NO WIDER than the containing element. The image will not overflow its containing element.

Another common (and nice!) use of max-width is to constrain the width of an element holding text. On wide screens such as desktop computers, you don’t want the lines of paragraph text to be the whole width of that giant monitor. You want it to look more like a column. So you can apply max-width with rem or px to constrain the containing element, such as article. For example:

article {
   max-width: 700px;
}

Why 700px and not some other number? Well, maybe it’s because that width looks great with your images, depending on the width of the images — and whether they are inside the article or outside of it. In other words, there is no “magic number” of pixels or rems that is “best.” It depends on your content, your page design, your font size, etc.

Making sure your paragraph lines of text do not get too long is actually something that helps make your content easier to read. There’s something called optimal line length, and it affects the readability of your text.

Using max-width this way on an element containing text also allows it to shrink gracefully on smaller screens. If you use just width, it will not shrink. Note that this shrinking I’m referring to is completely separate from flex — not even using flex at all, max-width will allow elements to shrink.

Bootstrap 4 Help

Updated Oct. 15, 2019

If you’re tempted to add your own styles to a page you are making with Bootstrap CSS — stop and consult these pages FIRST. It’s so much better to work with styles that Bootstrap has already given us.

  • Spacing — read everything under Notation to add margin or padding to any element
  • Textalignments, bold, italics, etc.
  • Typography — make headings much larger, style pullout quotes and source attributions, and more — LOTS here
  • Images — aligning them, centering, making responsive
  • Buttons — make them bigger, smaller, full-width, etc.
  • Colors — add the Bootstrap colors with these special styles
  • Alerts — even more colors (lighter colors)
  • Forms — all the styles for form controls, labels, etc.

Collapse is a Bootstrap replacement for jQuery hide/show.

Remember, all the things can be found in links on the left side of the Bootstrap Documentation pages.

IMPORTANT: The special layouts and devices such as the Carousel can be found on the Examples page. The code for those is in the GitHub repo on THAT PAGE — click the “Download source code” button and download the zipped repo file. Find the files you need by opening, in order, these folders:

  1. site
  2. docs
  3. 4.3
  4. examples

Happy Bootstrapping!

CSS Grid resources

Ryan was kind enough to give us a demo of CSS Grid in class on Nov. 21. He recommended these resources for learning to use grid layouts:

.

History + data = story

I fell in love with this web app as soon as I laid eyes on it: Monroe Work today. The site is about the research done by an American man named Monroe Nathan Work, who died in 1945. His research was about lynching in the United States. This app demonstrates a great way to tell a story.

First, I zoomed in on the map and started clicking around.

Screen Shot 2016-11-18 at 10.07.51 AM.png

Then I wanted to find out where the data came from. I wanted to know if I could trust it. I spied a little link at the bottom that says, “Should I believe this … ?” Clicking that took me to a section that carefully documented all the sources and all the unanswered questions raised in this project. I loved this part! Too often, digital projects just stuff all their sources into a big list o’ links at the end. This, in contrast, takes the time to explain how the facts were checked and where the research originated.

Screen Shot 2016-11-18 at 10.11.09 AM.png

Using the Chrome extension Wappalyzer, I did a quick look to see whether Bootstrap was used for the design/CSS. It wasn’t — but the producers did use another web framework, one called Ink. Looks pretty awesome. However, they could have made this app with a Bootstrap theme just as easily — it all depends what you and your teammates on a project already know. If someone is comfortable with Bootstrap, he or she will choose Bootstrap. If a person has learned another framework instead, he or she will choose that one.

Oh, and the map? Leaflet!

Screen Shot 2016-11-18 at 10.27.15 AM.png
The menu shown at right is from the Chrome extension Wappalyzer: It shows which technologies are in use on the current page in the browser.

 

Bootstrap Themes

Now that you have invested time in learning to use Bootstrap, you should know that it’s easy to change the theme and get new colors and fonts in one simple step.

The free themes at Bootswatch.com are the easiest to use. Simply download the theme as shown below. Then REPLACE the bootstrap.min.css file that’s already in your /css/ folder. Reload your Bootstrap-styled page and see the magic!

bootswatch
Open the menu for the theme you want, and select bootstrap.min.css.

It would take you only a few minutes to try the above. I encourage you to try it!

For more ambitious projects, you should consider buying one of the complex Bootstrap themes from WrapBootstrap.com. Some very nice themes are only $10. This is a one-time charge. For less than $20 (in most cases), using one of these themes gives you the ability to produce a very sophisticated website hosted on your own server at your own domain name. You will be using the same Bootstrap styles and classes you have already used, plus new ones that might be specific to the theme you chose. You’ll get icons and fonts with the theme that are all part of the deal, and you can mix and match a variety of sliding sections, sliders, and other cool components.

Don’t forget — there’s lots of examples you can use on the Bootstrap site. You can download an example and use it to learn how to do a cool new design thing.

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.

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.

Page layout

Here is a wonderful example of page design that:

  • Enhances the story.
  • Does not use flashy gimmicks.
  • Is built with a framework (Foundation, which is similar to Bootstrap in many ways).
  • Adapts perfectly to all device sizes (try it in Chrome Developer Tools and see).

Screen Shot 2015-11-19 at 10.57.41 AM

Even if you are not especially interested in the people behind the Paris attacks, take some time to examine how the design serves the storytelling. There’s nothing unnecessary in this design.

The design itself helps to tell the story more clearly.

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.

A great interactive chart example

You don’t always need an interactive chart. Sometimes a plain image of a chart is just fine.

This example from The New York Times, though, shows how interactive charts can sometimes tell the whole story.

Is It Better to Rent or Buy?

I also encourage you to think about the page design. It is clean and simple, with nice big headings. Nothing gets in the way. A white background and simple black text can be just perfect for many kinds of information.