Tags: media

The thing and the whole of the thing: on DRM in HTML

A great post by Stuart on the prospect of DRM-by-any-other-name in HTML.

The argument has been made that if the web doesn’t embrace this stuff, people won’t stop watching videos: they’ll just go somewhere other than the web to get them, and that is a correct argument. But what is the point in bringing people to the web to watch their videos, if in order to do so the web becomes platform-specific and unopen and balkanised?

Forty Years of Movie Hacking: Considering the Potential Implications of the Popular Media Representation of Computer Hackers from 1968 to 2008

An in-depth look at the portrayal of hackers on film.

IE10 Snap Mode and Responsive Design - TimKadlec.com

Useful advice from Tim on preparing your responsive site for IE10’s new “snap mode”. Don’t worry: it doesn’t involve adding any proprietary crap …quite the opposite, in fact.

IE-friendly mobile-first CSS with Sass 3.2

Jake demonstrates his technique for preprocessor-generated stylesheets for older versions of Internet Explorer (while other browsers get the same styles within media queries).

Issue #408: Generate a separate css with flattened media queries

This is an excellent idea from Jake: use a preprocessor to automatically spit out a stylesheet for older versions of IE that includes desktop styles (garnered from the declarations within media queries).

If you’re a dab hand with Ruby and you’d like to see this in SASS, you can help.

Sweep the Sleaze | Information Architects

Some sensible advice from Oliver Reichenstein. Cluttering your social media icons isn’t helping and may actively be hindering your audience.

Springload: OnMediaQuery - Responsive Javascript

This is nice: the solution I blogged about for conditional CSS (reading media queries from JavaScript) all wrapped up in a nice small reusable bundle.

Official Google Webmaster Central Blog: Responsive design – harnessing the power of media queries

Advice on creating responsive designs from Google. It’s not exactly the best tutorial out there (confusing breakpoints with device widths) but it’s great to see the big guns getting involved.

Deciding what Responsive Breakpoints to use | Tangled in Design

Another call for design-based (rather than device-based) breakpoints in responsive sites.

Creating a Mobile-First Responsive Web Design - HTML5 Rocks

A great step-by-step tutorial from Brad on developing a responsive site with a Content First mindset.

Breakpoint Checking in Javascript with CSS User Values | Sparkbox

A smart response to the little conundrum I posted on my blog yesterday about detecting media-query quarantined CSS properties from JavaScript.

Media Query & Asset Downloading Results | TimKadlec.com

Tim has published the results of a whole bunch of testing he did on how different browsers deal with hidden or replaced images.

Script Junkie | Flexibility: A Foundation for Responsive Design

Emily walks us through a responsive design case study, stressing the importance using percentages for layout.

Jordan Moore | Web Design, Northern Ireland, Bangor, Freelance

A sweet little meditation on the nature of the web and responsive design.

Abstract Sequential - Print Styles Are Responsive Design

An excellent piece by Stephanie on how to approach print stylesheets. I’ve always maintained that Print First can be as valid as Mobile First in getting you to focus on what content really matters.

Thieves Are Your Best Customers in Waiting – Stuntbox

A great article from David with some concrete proposals for media companies.

By the way, how nice is David’s new responsive design? Very nice. Very nice indeed.

Scaling with EM units

Using em-based media queries to incrementally bump up the font size for larger viewports.

How I’m implementing Responsive Web Design – JeffCroft.com

Jeff documents some of the techniques he’s using to tackle responsive design, with some tips specifically for SASS.

Wilson Miner

Wilson has turned his site into a single-serving page that’s doing some interesting things with media queries (using height as well as width).

A Responsive Design Approach for Navigation, Part 1 | Filament Group, Inc., Boston, MA

A detailed overview by Filament Group on progressively enhancing navigation for responsive sites.

JoshEmerson.co.uk · Blog · The Responsive Process

Josh goes through the talking points from the recent Responsive Summit he attended. Sounds like it was a great get-together.

Responsive Design: Why You’re Doing It Wrong | Design Shack

A rallying cry for a content-focused—rather than device-focused—approach to responsive design. Despite the awful title and occasionally adversarial tone, this article is making a very good point about being future friendly.

Choosing device sizes to support for your responsive designs | Matt Wilcox .net

Another plea for content-out rather than canvas-in design.

Leaving Old Internet Explorer Behind — Joni Korpi

Joni points out a great advantage to the mobile-first approach if you choose not to polyfill for legacy versions of IE: you can go crazy with all sorts of CSS3 goodies in the stylesheet you pull in with media queries.

Athena - MediaWiki

Documentation of an ongoing project to create a mobile-first responsive MediaWiki theme.

“Mobile first” CSS and getting Sass to help with legacy IE – Nicolas Gallagher

If you use Sass, this could be a really handy technique for handling IE<9 support with mobile-first responsive designs.

#816: Revert mobile-first media queries and remove respond.js - Issues - h5bp/html5-boilerplate - GitHub

This thread on whether HTML5 Boilerplate should include Respond.js by default (and whether the CSS should take a small-screen first approach) nicely summarises the current landscape for web devs: chaotic, confusing …and very, very exciting.

zomigi.com » Essential considerations for crafting quality media queries

A wonderfully in-depth article from Zoe on all the practical aspects of using media queries for layout.

Responsive images without Javascript - Notebook

This isn’t recommended as a robust means of delivering responsive images, but it’s still quite clever: using media queries to pass information to the server about the viewport size.

dConstruct and Responsive Design - Ubelly

A look under the hood of the dConstruct website (including some nth-child selectors I threw in there).

Are Media Queries the answer to the Fold? « Boagworld

In a break with tradition, Paul posts something sensible and smart (I kid, I kid): using media queries to detect height rather than just width and adjust content accordingly to make sure that your most important content is visible in the viewport.

Meltmedia | An awesome interactive design and development agency in Tempe, Arizona

A truly lovely responsive design from Tiffany Duening and co.

Techniques For Gracefully Degrading Media Queries - Smashing Magazine

There are some inaccuracies and misrepresentations in here, but on the whole this is a pretty good round-up of your options when dealing with responsive design in older browsers.

Responsive Containers - Blog | Andy Hume

This is an excellent idea from Andy: selector queries. Like media queries but at the component level. Quite often it isn’t the width of the viewport that matters, it’s the width of the containing element for whatever you’re trying to style.

The Goldilocks Approach to Responsive Web Design

A nice little demo of the “content out” approach to responsive design.

Fit To Scale | Trent Walton

More documentation of a responsive redesign, this time from Trent Walton. Be sure to check out the FitText jQuery plug-in that was created as a result.

Design for the changing web: Our response :: Studio :: Headshift

Documenting the process of switching to a responsive design. I think there’s always insight to be gained from seeing how your peers are approaching these challenges.

css Zen Garden: All-In-One

This is cute: using media queries to display multiple CSS Zen Garden submissions without refreshing the page — just adjust your browser window.

David Emery Online: Response

David rejects a redesign in favour of a bit of responsive tweaking — and very nice it is too.

Developing the OAuth user experience at Twitter

Ben documents the improvements in Twitter’s OAuth flow. Maybe this will help to stop people blindly giving permission to dodgy third-party sites to update their Twitter stream.

It’s the Little Things - “Mobile” versus “Small Screen”

  1. A “small screen” user is not necessarily a mobile user.
  2. A “small screen” device is not necessarily a mobile one.

See also: bandwidth.

Media Query Test

Testing ways of only displaying background images on large screens whilst ensuring that they aren’t downloaded for smaller screens.

Do Lectures - Ideas that inspire action

The redesign of the Do Lectures site is gorgeous (and responsive).

Ribot - interface innovation

Fellow Brightonians, the brothers Ribot and co., launch an excellently responsive company site.

Media Queries

A curated collection of responsive web designs.

The Web Is a Customer Service Medium (Ftrain.com)

An excellent piece of writing on the fundamental question of the web: Why Wasn’t I Consulted?

The Year in Pictures: Passages — USA TODAY

A really nice example of responsive web design from an unexpected source.

Wikileaks is not about secret information; it’s about insiders versus outsiders | technosociology

Much like the Umberto Eco piece I linked to recently, Zeynep Tufecki describes how Wikileaks exposed what so many in the media already knew.

The Personal Disquiet of Mark Boulton

A beautiful new responsive design from Mark.

Experimenting with responsive design in Iterations - (37signals)

37 Signals document their experiments with responsive web design. Looking good.

Never finished, rarely simple - Preoccupations

An excellent overview of the evolution of the St. Paul's School website from David Smith, noting an increasing emphasis on mobile usage.

Yiibu - About this site...

A great explanation of the responsive enhancement of this site.

With Good References — Unstoppable Robot Ninja

Ethan shares his thoughts on the role of the reference design in the responsive workflow.

Journalism Warning Labels « Tom Scott

Excellent! Warning labels for bad journalism for you to print off and stick on.

What The Fuck Is My Social Media Strategy?

Making it up so you don't have to — somewhat like my New Media Company Name generator from a few years back.

Medieval Multitasking: Did We Ever Focus? | Culture | Religion Dispatches

A fascinating look at hypertext in illuminated manuscripts.

Op-Ed Contributor - Mind Over Mass Media - NYTimes.com

An excellent rebuttal by Steven Pinker to Nicholas Carr's usual trolling.

Bobbie Johnson dot org : The shipping news

A response to Tom's "Either you've shipped or you haven't."

Walls Come Tumbling Down presentation slides and transcript | For A Beautiful Web

Andy's excellent presentation from An Event Apart in Boston and @media in London. Required reading/viewing.

Derek Powazek - Now is a Great Time to Be a Media Maker

Derek weighs in with his view on the current state of publishing. I agree with his conclusion: "There has never been a better time to be making media. There are more tools to help than ever. There are more media consumers and media producers than ever. The world is more literate and media savvy than it’s ever been."

Microformats.org Wiki 2.0 · Microformats Wiki

Ben has been working hard to upgrade the microformats wiki. His hard work has paid off: it looks great!

isolani - Javascript: @Media Ajax - Day one

Mike has published his notes from day one of @media Ajax in London.

graphpaper.com - The Peculiar 20th Century

Prompted by my proposal for this year's Reboot, Christian Crumlish pointed me to this post by Christopher Fahey that echoes my assertion that the Twentieth Century might turn out to be just a blip on the cultural timeline.

The Escapist : The Myth of the Media Myth

A piercing article by Brenda Brathwaite examining people's attitudes towards gaming. Substitute "videogames" for "social networking sites" for equal slices of moral panic.

danwebb.net - @media Ajax

The slides from Dan's excellent presentation on metaprogramming JavaScript.

QuirksBlog: @media Ajax

PPK delivers his report on the excellent @media Ajax conference.

@media 2008 | The Best Practice Web Design Conference

It's back... the conference spanning conference from HTML Dog will be returning in Summer 2008.

» Undercover NBC Dateline reporter bolts from DEFCON 2007 | George Ou | ZDNet.com

Pwn3d! "Undercover reporter Michelle Madigan (Associate Producer of NBC Dateline) got a little more than she bargained for when she tried to sneak in to DEFCON 2007 with hidden cameras to get someone to confess to a felony."

Hero PC Tackles Knife Man (from The Argus)

Here's the local paper's take on the happenings on my street that I blogged about.

When accessibility is not your problem (Joe Clark)

Notes from Joe's @smedias. Please read the whole thing before (mis)judging what he said.

Evening Standard Headline Crisis 2005 - a photoset on Flickr

All the hyperbole of Evening Standard headlines gathered together in one place. I have to say, Brighton's local rag, the Evening Argus, would have them beat for incomprehensibility and ridiculousness.

The Blog | Larisa Alexandrovna: MSM Plagiarism Strikes Again – AP Welcome to the Party | The Huffington Post

The Associated Press feels that blogs are good enough to steal from, but not good enough to credit.

Henry Rollins set for March 12 SxSW presentation

That should be fun. This not a music presentation - this one's for the geeks.

Archbishop hits out at web-based media 'nonsense' - Times Online

He described the atmosphere on the world wide web as a free-for-all that was “close to that of unpoliced conversation.” Um... I have to admit that I've never had a policed conversation, online or off.