Useful links: SEO Your Facebook, Responsive Images, CSS Gradients

SEO Your Facebook Page: 5 Tips for Education Institutions is from .eduguru.

This is interesting. Focal-Point: CSS-Framework Scales Down Images in Responsive Designs Intelligently.  You can get focal-point on GitHub.

“As usual, there was no source that gives clear, concise, accurate information about the three syntaxes and the four rendering engines, so I decided to write it myself.” Quirksmode has a compatibiity table and an explanation of what’s going on with gradient CSS.

Useful links: 2 Readlists, WCAG=ISO, responsive menus

Two Readlists. 1. Adaptive Web Design was created by Aaron Gustafson. 2. Responsive Enhancement was created by Jeremy Keith.

WCAG 2 is now also ISO/IEC 40500 at the W3C.

10 Tips for How to Handle Responsive Menus Successfully is at usabilla. NIce blog, I’ve never seen it before but will keep going back.

Useful Links: ySlow, WordPress headers, mobile form validation

Getting Started with YSlow is at Speed Awareness Month.

Creating a responsive header in WordPress 3.4 at Web Designer Depot uses a bit of jQuery to insert a responsive image into a WordPress header.

Steven Hoober makes a case for form validation on blur for mobile devices in Mobile Inline Form Validation.

The Proposed Picture Element in HTML

New at the W3C is a proposal to create a way to work responsive images. The proposal, called HTML Responsive Images Extension, suggests a new HTML element called <picture>. The editors of the document are Mat Marquisa member of the  Responsive Images Community Group and Adrian Bateman from Microsoft Corporation.

The document is a draft, which means many things may change before these suggestions become a recommendation at the W3C.

The reasons and goals for the proposed element are spelled out:

  • Respond to different screen pixel width/height
  • Respond to different screen pixel densities
  • Respond to user zoom on image resource.
  • Provide user agents with information they need to select the most appropriate image source given low bandwidth situations
  • Will fallback gracefully on older user agents
  • Can be polyfilled effectively
  • Retains, at a minimum, the same level of accessibility as current img element
  • Preserves separation of content markup and styling
  • Provides a purely client-side solution which can include JavaScript, but doesn’t require it
  • Supports use cases where authors need to explicitly define different image versions as opposed to simply different resolutions of the same image
  • Provides a consistent and predictable pattern for delivering alternate media sources based on client context
  • Supports succinct but understandable mark-up

A lofty list of goals, all necessary and important. Responsive design gurus have struggled for some time with how to deal with images in a responsive site. The list of goals reflects that discussion and those needs.

The proposal states, “The picture element represents a list sources of image data and associated attributes that define when an image should be used. Image data sources may be explicitly declared based on media queries or can be suggested to the browser via the srcset attribute on the picture element.”

Here’s some example code.

<picture alt="">
	<source media="(min-width: 45em)" 
 srcset="large-1.jpg 1x,large-2.jpg 2x">
	<source media="(min-width: 18em)" 
 srcset="med-1.jpg 1x,med-2.jpg 2x">
	<source srcset="small-1.jpg 1x, small-2.jpg 2x"> 
	<img src="small-1.jpg"> 

New elements and attributes you’ll notice in the example code include the source element and its srcsetattribute. Each source defines one or more image sources and the conditions under which that source should be used. The srcset attribute is a comma separated list of URLs for alternate resources for a single image at different resolutions.

You see a 1x or 2x designation after the image name. This is a reference to resolution, with 2x being a high resolution image meant for high res (aka iOS retina displays which have made everyone’s images look like crud) devices.

Finally, the example code ends with a fallback img element for devices that don’t recognize the picture element.

Suggestions for how alt text should be handled have not changed and would apply to picture as they currently apply to img.

There is an attempt to describe cases like zooming, whether a device is displaying in horizontal or vertical orientation, and other potential snafus. You can read these in the full proposal.

Useful links: Decent Men, Google Fonts, Building Responsive Layouts

A Call to Arms for Decent Men by Ernest Adams is at It’s a great post, very long, very well-written. Here are a couple of quotes:

Guys, we have a problem. We are letting way too many boys get into adulthood without actually becoming men. We’re seeing more and more adult males around who are not men. They’re as old as men, but they have the mentality of nine-year-old boys. They’re causing a lot of trouble, both in general and for the game industry specifically. We need to deal with this.

. . .

Use your heavy man’s hand in the online spaces where you go – and especially the ones you control – to demand courtesy and punish abuse. Don’t just mute them. Report them, block them, ban them, use every weapon you have. (They may try to report us in return. That won’t work. If you always behave with integrity, it will be clear who’s in the right.)

Let’s stand shoulder-to-shoulder with the women we love, and work with, and game with, and say, “We’re with you. And we’re going to win.” 

A very nice resource indeed: Google Fonts Reference Posters.

The exceedingly awesome Zoe Gillenwater released her slides from a Building Responsive Layouts talk. You can find them on slideshare, and see them here:

Deborah Edwards-Onoro was present at Zoe’s presentation and created a Storify version of it with tweets and images as well as the presentation.

Useful Links: Alt Text, Responsive Images, MinutePhysics

A Useful Alt Text Decision Tree Added to HTML5 at the W3C. Then Dey Alaxander wrote Text Alternatives for Images: A Decision Tree at 4 syllables.

Here’s a podcast from The Web Ahead with a discussion with Jen Simmons about Responsive Images with Mat Marquis.

And finally, MinutePhysics is here to help you understand what Higgs Boson is.

Useful links: Mobile navigation, W3C media queries, track element

An alternative to select elements as navigation in narrow viewports is from 456 Berea Street.

The W3C published a recommendation document on media queries yesterday.

An Introduction to WebVTT and <track> is at Opera Dev. “Web Video Text Tracks, more commonly known as WebVTT, is a file format that allows us to mark up external text tracks. Using it in conjunction with HTML5‘s <track> element means we can associate information such as subtitles, captions and descriptions for a media resource such as audio or video, and display them synchronised with the media resource.”