Tips, web design book reviews, resources and observations for teaching and learning web development.
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.
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.
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.
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:
img elementA 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"> </picture>
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.
A Call to Arms for Decent Men by Ernest Adams is at idga.org. 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.
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.
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.”