Intro to Foundation

Thursday, March 24, 12:30. CUNY J-School. Rm 436.

What & Why

Foundation is a responsive front-end framework.

A front-end framework is a collection of HTML, CSS, and JavaScript containing design patterns that you can build upon.

It is useful because:

  • It is reusable: keeps you from wasting time rewriting boilerplate code
  • It introduces good coding habits: organizing code into modules/patterns helps you grasp abstractions (read more about the object-oriented paradigm). Foundation is particularly good at object-oriented css.
  • It encourages you to think mobile: Sites built on Foundation work great on multiple devices including desktop and laptop computers, tablets, and mobile phones because it is a responsive framework that uses CSS media queries and a mobile-first approach.

The Washington Post uses Foundation.

A briefing on responsive web design

https://en.wikipedia.org/wiki/Responsive_web_design

Responsive design deals with two variables:

  • screen size (phone vs desktop)
  • device type (e.g. interactive map sites behave better on iPad than iPhone)

A lot of this has to do with CSS. The content, and the html markup in which it is written, do not change. What changes is the way the content looks.

http://foundation.zurb.com/learn/about.html

This is what FiveThirtyEight looks on desktop.

And this is it on the phone.

Sometimes sites will have two versions of the same content, one visible only on desktop, and the other only on mobile.

This is a navigation menu on desktop.

This is it on mobile.

And notice the markup.

On occasion, the content itself changes. If you think about it: your phone is much less powerful than your laptop, it has a smaller screen, it is more often than on 3G (which is way slower) rather than wifi. The size of the content matters when it comes to mobile, and a lot of people refer to it as “mobile optimization”*.

The point is, loading the right size of content, or, in other words, the right amount of data, is crucial for mobile. For example, whereas you use a 1000px by 800px image on for a desktop website, you won’t need it for your phone, because your phone is only 375 pixels wide**. (See the Foundation Interchange Plugin and see how it works.)

Build a page with grid

Let’s make something like the NYT’s cooking page, following two steps:

  1. Draw it out.
  2. With a wireframe in hand, mark it up. (For image markup, we’ll use placehold.it)

Useful components

There are a few popular design patterns components in Foundation.

- Reveal
- Tabs
- Orbit

You can explore more by following more tutorials.

Power of knowledge

Many services are but an abstraction of what you can make yourself. If you know what’s behind the scenes, would you still pay money for such a service?

Let’s not go there.

— — — —

*Mobile optimization is different from mobile first because it assumes that a user will always have a better version on a bigger and faster device… If everybody thinks that way we would always have a subpar experience on our phones and innovation like the Quartz news app would never have happened.

**This is a generalization. If your display is retina, it can take the image twice as big. See the intricacies of screens here.