Tag: mobile

Recommended

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.

Recommended

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.

Recommended

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.