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:

.

Advertisements

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.

A Web design example

I just came across this nicely designed, responsive page: U.S. Web Design Standards

Point 1: Design standards are important, and the U.S. government is starting to realize that too!

Point 2: The page reflects many of the principles of good, standards-compliant We design in 2015.

Point 3: If you click “View the Standards,” you’ll find all kinds of good advice about usability and accessibility for Web and mobile content. It doesn’t matter if you are never going to design a site for the U.S. government — these are simply good, solid design practices that serve the audience well.