Category: design

Several interesting things have come up in the last week or so that I think need to be connected.

Who’s Not Online?

Pew Internet did a study on Who’s Not Online and Why. They found that 15% of American adults do not use the internet at all, and another 9% of adults use the internet but not at home.

As to who those non-Internet users are, Pew found this:

Internet use remains strongly correlated with age, educational attainment, and household income. One of the strongest patterns in the data on internet use is by age group: 44% of Americans ages 65 and older do not use the internet, and these older Americans make up almost half (49%) of non-internet users overall.

That hardly seems like earth shaking news, but Pew reports it as if it is. As for why they are not using the Internet, there were many reasons given. 34% of non-users said they just weren’t interested and didn’t consider it relevant to their daily lives. 32% cited usability issues, learning issues, and worries about privacy or spam. 19% cited price, and 7% said it wasn’t available where they lived.

A similar report that was written about in The NY Times prompted this letter and post from disability lawyer Lainey Feingold about the digital divide and disability.

The Mobile-Born

After reading about the non-Internet using elderly and poor, I saw this TechCrunch post on The Rise of the Mobile Born. This post by Paul Holland talks about The Mobile Born, which he describes as,

A generation of kids that have been raised while literally gnawing on the equivalent of a supercomputer — otherwise known as mom’s smartphone.

Holland says that companies are embracing mobility and transforming their business practices and work arrangements through mobility. He predicts changes in office processes, organizational structures, consumer engagement and young people who have never known any kind of interaction other than that which we create on mobile devices.

What Does That Mean for Teaching Web Design

As a web educator, I look at trends like those reported above from Pew Internet and TechCrunch, and think about what all that means to me in the classroom.

At Smashing Magazine, Jen Kramer wrote about Teaching Web Design to New Students in Higher Education. I think it’s worth taking a look at her suggestions and how they will help us meet the changing world that surrounds us.

Kramer first talks about the classes where students are taught to build a “comp.” An image from Photoshop or Fireworks that somehow will get translated into a web page. Her ideas on making this type of class more useful are excellent. She suggests:

• Build a design in 12 evenly-sized columns.
  This is a great time to explain about grids and how they work. Have students build designs based on this grid to demonstrate their understanding.
• Show versions of the design.
  If the design looks one way at 960 pixels, how does it look at 1200 pixels? 320? 767? Have students use the same content in their designs, rearranged for these different screen environments. Be sure to ask about transitions — what happens as the design moves from 767 to 320 pixels?
• Ask questions about photos.
  What does that big photo banner stretching so beautifully across the top of the page at 960 pixels look like at 767 pixels? What happens between 960 and 767 pixels?
• Encourage students to think about touch.
  This is particularly important at smaller screen dimensions, but desktops and laptops are trending towards touch as well. Encourage students to build navigation suitable for fat fingers, for example.
• Deemphasize slicing.
  Rather than thinking about the comp as the source of imagery for a website, consider it its own prototype. Slicing may not be required at all, because images may need to be generated in several sizes for different screen dimensions. Even background graphics can be generated in their own independent documents. By deemphasizing slicing, you also deemphasize the centrality of this comp for the website’s design. With responsive design, the comp sets a goal or a direction, but tweaking is required to accomodate the space between 320, 767 and 960 pixels and beyond.

Kramer also has some great ideas about teaching HTML and CSS.

• Standardize in one browser.
  I’d recommend working with Firefox or Chrome as the standard browser in class, because they’re available on Mac and PC and are the most standards-compliant. Tell students that this is the only browser that matters for the purpose of this class. Cross-browser issues should be dealt with later, once students understand how HTML and CSS work completely in this browser. When cross-browser problems are introduced too soon, students get confused, unclear whether a particular problem is due to the browser or just badly formed code.
• Teach HTML5.
  Students should learn how to mark up documents with sections, asides, navigation, headers and footers from the start.
• Teach CSS3 and all types of selectors.
  Make sure students understand media queries as soon as they are able to. Introduce adjacent sibling selectors, child selectors, universal selectors, various pseudo-classes and so forth. Again, worry less about browser support, because these students have years before graduation.
• Incorporate grid-based thinking early on.
  Even if students can’t code their own grid yet, they could certainly build layouts while thinking about 12 columns, using em and/or percentage widths and sizes. Have students code standard shapes of pages, such as two- and three-column layouts, with or without headers, footers and horizontal navigation, rather than leaving students open to code any type of layout. Understanding the trade-offs between design and code is important, so always address those.
• As soon as students grasp floats and positioning, teach how to code a grid.
  Because students have been thinking about Web design with grid-based principles, this transition should be fairly quick for them.
• Responsive design is now a short lecture, not a long one.
  Students are now able to pull together grid-based layouts and media queries. They’ve likely encountered image-resizing issues along the way, but if not, this is the time to discuss them.
• Now is the time to discuss browser compatibility.
  Now that students have mastered valid, standards-compliant, responsive code, it’s time to think about browser compatibility. One way to introduce this is to work with poorly supported HTML5 tags or CSS3 elements such as rounded corners.
• CSS preprocessing is a hot topic.
  Centralizing CSS variables is a great idea and is bound to be a core CSS skill, required by employers, in the next year or two. (Some say it’s already here.) Some LESS and Sass concepts, such as centralized variables and logic, also offer a smooth transition to a course on JavaScript and jQuery, in which similar concepts would be important.
• Covering responsive design frameworks is not a bad idea.
  If there’s time left in class, this is a great topic to explore. I’d recommend covering Bootstrap if you’ve taught LESS, or Foundation if you’ve taught Sass. Students will learn how to read someone else’s code (an important skill!) and how to read documentation; they will also learn new technology, as well as explore the positives and negatives of using a documented, open-source framework. Finally, they will learn to customize this code for their own purpose.

We all know that things are going to continue to condense, grow smaller and more mobile. Remember Moore’s Law? Just as we once relied on floated divs to create columns, and now we rely on grid systems with media queries to create responsive designs, there will be a future web design and development trend for even smaller and more mobile displays. Surely Google Glass is not as small as it’s going to get. Teaching students how to design for this future is challenging indeed.

I applaud Jen Kramer for her excellent teaching ideas. But I encourage you to keep thinking smaller and smaller, more mobile and wearable, and completely wireless as the direction web education must take.