A Roundup of Current Thinking on Responsive (Adaptive) Images

While responsive web design has taken off like a rocket, the question of what to do with images in a design that adapts to any device that might be used to display it is still under investigation. I’ve gathered some resources to help you understand the issues and see some of the tests and demos that have be done.

I don’t think we have a final answer that will become “best practice” yet, but there are a lot of great minds grappling with the issues.

Posts and Tips

Helpful Tools

W3C Involvement

 

Useful links: Lawmakers, Bookless, CSS for Babies

All 100 US Senators are now on Twitter. Have you used Twitter or Facebook to send a message to your senators, representatives, or the POTUS? I have.

In the “where the world is heading” department, here’s news of the first bookless public library.

Chris at CSS Tricks is having a great time with his CSS for Babies: A Critical Analysis.

Useful links: Liquidapsive, women and CES, @supports

Liquidapsive enables you to demo a site done as static, liquid, adaptive and responsive. Nice to use with students or clients.

Women are the major electronics buyers. What happened at CES 2013 that actually appealed to women?

I’m officially making fun of that potty with the iPad attached until they make one for full-sized commodes. What’s your position on iPads in the john?

@supports API lands in Firefox nightlies examines which browsers currently are heading toward support for @supports.

Web Teacher’s Seldom Asked Questions

Okay, never asked questions. Seldom is an exaggeration. But always that philosophical question lingers in the air: why are you here? These SAQs (okay NAQs) will explain everything.

The famous Santorini Sunset

Q: Why are you here?

A: I started here because I wanted to talk about how non-web-standards-based and non-teachable most of the tech books I was using to teach with were. Books are better now, so I mostly talk nice about them.

Q: Do you have any really great tips?

A: I have a lot of tips, but this is the best one. In fact, it is such a great tip I’m calling it Virginia’s Law Against Unintended HTML. It goes like this:

Play with the way your content will look before the content is on the page, not after.

Virginia’s Law Against Unintended HTML is so all-encompassing it applies to blog users and Dreamweaver users, too.*

Q: What’s this teacher thing?

A: Well, I’m an educator. You thought I was a dream in PHP coder? No, I’m an educator. So when I talk about web design or technology or web education, it’s always through that peculiar filter.

Q: Who cares about that web education crap, anyway?

A: Mostly teachers and students and web standards gurus and accessibility advocates and corporate trainers and human resource managers and small businesses in search of a web site. Even self-taught learners scrolling among Google results. Are you anything like those people?

Q: You’re always going on about women. What’s up with that?

A: I support good work from others. I’m not the jealous type so it doesn’t bother me to promote other people’s work rather than my own. I support good work from both men and women, but I love to point out what women do because they are a misused and misunderstood element in the tech world. I’m a woman, so I know this. I’m also old – would you rather I was always going on about old people?

Q: What’s a good book to read about web design?

A: Start with books about HTML and CSS. Read a lot of those. After you get really good at those two things, read books about JavaScript or PHP. I’ve recommended a few books over the years. Read good books about design and Photoshop, too. Read the books I wrote, for gosh sakes, and buy them brand new, not used. Thank you.

Q: What are you learning about lately?

A: I’m quite interested in HTML5 and study it a lot. The new CSS is fascinating, too. I like new ideas. If your job is to produce HTML emails for big corporations, I recommend you study HTML 3.2 a lot. You can make big money by doing things from the old days that everyone else has forgotten how to do. HTML 3.2 anyone?

Q: Has social media changed the world?

A: Wait, I will answer as soon as I update my Twitter and take my turn in Words with Friends. Oh, look what my friend said on Facebook – isn’t that cute? Uhh, what was the question?


*Look! A Footnote: Some people refer to this concept as separation of content from presentation, but I refer to it as Virginia’s Law Against Unintended HTML.

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: Flexbox, Top 20 Talks, Accessibility, Data Vis

Absolute must reading defines this excellent explanation of flexbox. Dive into Flexbox is from Greg Smith at bocoup. I think you’re going to read this more than once or at least refer to it often.

The Top 20 Conference Talks of 2012. This is at .net magazine. Twenty talks – only one by a woman. I think this reflects the fact that they mostly asked men to name great talks.

Learning about Section 508 for the first time? Demystifying Accessibility describes a first encounter with it and lessons learned.

data visualization is editorial is an interesting post about converting data to visual displays. Be sure to click through to the d3.js site for info on how you can get started with this.

Useful links: Structural Pseudo-Classes, The Web, Fastbook, bMobilized

Good article at SitePoint about CSS3 Structural Pseudo-Class Selectors.

The Web We Lost by Anil Dash could be described as a thought piece, an examination of how the web has changed and whether it’s an improvement or not. Here’s a quote:

We’ve lost key features that we used to rely on, and worse, we’ve abandoned core values that used to be fundamental to the web world. To the credit of today’s social networks, they’ve brought in hundreds of millions of new participants to these networks, and they’ve certainly made a small number of people rich.

But they haven’t shown the web itself the respect and care it deserves, as a medium which has enabled them to succeed. And they’ve now narrowed the possibilites of the web for an entire generation of users who don’t realize how much more innovative and meaningful their experience could be.

Fastbook, Fastbook, Fastbook. Talk about it is everywhere. Here’s The Making of Fastbook: An HTML5 Love Story.

Convert your site to mobile with 30 seconds of analysis? That’s the claim. Check out DIY Mobile Website Creator bMobilized Adds Another $2.5 Million In Series A Funding  from TechCrunch