Tags: v

The Great Discontent: Dan Cederholm

The lovely (and responsive) Great Discontent site has a lovely interview with Dan, who is lovely.

The responsive images problem

A run-down of the various approaches to the responsive images problem, concluding that this is something that needs to be solved in the image format.

» The real conflict behind picture and @srcset (Cloud Four Blog)

Jason outlines the real challenge to every proposed solution for responsive images: they just don’t jibe with the way that browsers (quite rightly) pre-fetch images.

Kiwibank: Standing Up for Something New — Paul Robert Lloyd

Paul interviews the team behind Kiwibank’s responsive homepage. There are some great insights into their process here, like the way that copywriters worked side by side with developers.

Microjs: Fantastic Micro-Frameworks and Micro-Libraries for Fun and Profit!

I really like this trend of small standalone scripts rather than plug-ins that require the presence of a library.

Digital archivists: technological custodians of human history | Ars Technica

An introduction to the important work of digital archivists:

Much like the family member that collects, organizes, and identifies old family photos to preserve one’s heritage, digital archivists seek to do the same for all mankind.

Like A Rounded Corner (Bruce and The Standardettes) - YouTube

Bravo, Bruce, bravo.

I heard Glen Campbell’s “Like A Rhinestone Cowboy” on the radio and began absent-mindedly singing “Like a rounded corner” to it.

A New Take on Responsive Tables by ZURB

An interesting approach to squishing down large data tables for small-screen viewing …though I wonder if there isn’t a “Mobile First” approach that could scale up, say, lists to become tables on large screens.

Shallow Thoughts » srcset vs. picture

A well thought-out evaluation on responsive images from Bridget.

JS Hotline: (877) 300-2187

I love this! A volunteer-run hotline for answering JavaScript questions (set up by the awesome Garann Means, who literally wrote the book on Node.js).

I think I might volunteer my services.

The Blind Shooting The Blind ∵ Stephen van Egmond’s weblog

If you make inaccessible iOS apps, you really only have yourself to blame.

There are also some handy tips here for getting to know VoiceOver.

Jordan Moore: Source Shuffling—Responsive Images Based On Media Queries

Combine the lowsrc-like image technique I blogged about with the conditional CSS technique I blogged about and this is the result.

The Man Who Makes the Future: Wired Icon Marc Andreessen | Epicenter | Wired.com

Chris Anderson interviews Mark Andreessen.

API Panel

The video of the panel I moderated on device and network APIs on the second day of Mobilism in Amsterdam. It’s not quite as snappy as the browser panel (which, given the subject matter, is unsurprising) but it was still good fun.

Mobile Browser Panel 2012, Mobile Browser Panel at Mobilism 2012 Moderated by Jeremy Keith, this panel features Andrea Trasatti (Nokia), Andreas Bovens (O…

Here’s the video of the mobile browser panel I moderated at Mobilism in Amsterdam. These guys were really good sports to put up with my wisecracking shots for cheap laughs at their expense.

Brighton Mini Maker Faire is Back – and We Need YOU! | Brighton Mini Maker Faire

Brighton’s Mini Maker Faire (which was fantastic last year) will take place the day after dConstruct and this time, they’ve got a lot more space. Want to get involved? Get involved!

HTML9 Responsive Boilerstrap JS

This amuses me. I am amused.

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.

A separate mobile website: no forking way | Opinion | .net magazine

A great article by Karen pointing to the real problem with the mobile strategies of so many companies: they are locked in by their CMS.

Setting up a mobile testing suite | words from Cole Henley, @cole007

If you’re based anywhere near Frome in Somerset, get in touch with Cole—he’s putting together a communal device testing lab.

Responsive image format - blog

An idea for handling responsive images not with a new format, but with an existing one: progressive JPGs.

Avería – The Average Font

An algorithmically-generated font sounds like a terrible idea but I actually quite like the end result.

Movie Mimic

Recreations of movie stills at filming locations around the world (like I did in Sydney for The Matrix). There’s something quite addictive about looking through these.

Jordan Moore | Building With Content Choreography

Using flexbox to creata a narrow-column stacking order that’s unrelated to the source order.

notcoming.com | Not Coming to a Theater Near You

A terrific site dedicated to the love of film, all wrapped up in a wonderful responsive design.

Highly optimized images for the web in 3 steps | pasz.nl/blog

Some practical advice for optimising your images on the web.

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.

tubalmartin/riloadr

This responsive image technique has a lot of moving parts but it seems pretty solid.

Myself, quantified | Extenuating Circumstances

Dan writes about how data saved his life. That is not an exaggeration.

He describes how, after receiving some very bad news from his doctor, he dived into the whole “quantified self” thing with his health data. Looking back on it, he concludes:

If I were still in the startup game, I have a pretty good idea of which industry I’d want to disrupt.

GATHER. A Graphic Novel by Anton Peck — Kickstarter

Anton is a fantastic artist. Therefore, this graphic novel will be fantastic. Therefore, you should back the hell out of it.

Scalable Navigation Patterns in Responsive Web Design | Palantir.net

An case study that tackles complex navigation in a responsive site.

Resizable Displays | Fluid Interfaces

See now, this is why liquid layouts are the way to go.

Deciding what Responsive Breakpoints to use | Tangled in Design

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

Privacy Patterns

Cataloguing patterns (best practices, really) for privacy-concious site owners.

The state of responsive images | Feature | .net magazine

Wilto gives a thorough explanation of the state of things with responsive images, particularly the work being done at the Responsive Images Community Group at the W3C.

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.

Mobile Battery Performance

This is my short explanation of Remy’s explanation of a BBC news article which is an explanation of an academic paper about battery performance of mobile devices when accessing websites.

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.

Modern Web Development Part 1 – The Webkit Inspector

This is a very in-depth look at how to become a power user of the Web Inspector in Webkit browsers. I’m sitting down with a nice cup of tea to go through all of this.

Mocking Up Is Hard To Do

This seems like an eminently sensible thing to do when building responsive sites: ditch mock-ups entirely. The reasons and the workflow outlined here make a lot of sense.

Clearleft Launches New Shopify Theme – Shopify Ecommerce Blog

Josh and Michelle have been hard at work making this responsive theme for Shopify. It’s quite lovely.

CreativeJS for non-coders on Vimeo

A fantastic taste of what you can expect in Seb’s Creative Coding workshop.

A List Apart: Articles: Creating Intrinsic Ratios for Video

This really is a ridiculously smart way of keeping third-party videos scalable in responsive layouts. I’ve just implemented it on this year’s dConstruct site.

“Authenticity,” an article by Dan Mall

Cute. I gave Dan some advice. He made it look all pretty.

timoni.org - I love the internet.

This is a beautifully heartfelt post from Timoni:

Every day, I feel things because of the internet, and that’s amazing. Humans have been using abstracted communication for thousands of years, but it’s never been so instantaneous, never so capable of bringing folks of completely different backgrounds together in conversation. This is a huge step. Good job us.

A Time-Lapse Map of Every Nuclear Explosion Since 1945 - by Isao Hashimoto - YouTube

A beautiful and disturbing piece of data visualisation. The numbers are quite astonishing.

Nielsen is wrong on mobile | Opinion | .net magazine

Josh responds to Jakob Nielsen’s audaciously ignorant advice on siloing mobile devices. Josh is right.

Nielsen says his research is based on studies of hundreds of mobile experiences, and I don’t doubt it. But because he’s finding tons of poor mobile websites doesn’t mean we should punt on creating great, full-featured mobile experiences.

Lighthouse Monthly Talk — James Bridle

James is giving a talk here in Brighton next month. I’ll be there with robot-actuated bells on.

10 questions about web performance – Jeremy Keith at Clearleft

I had a chat with the guys from Pingdom about performance’n’stuff. If I sound incoherent, that’s because this is a direct transcription of a Skype call, where, like, apparently I don’t, y’know, talk in complete sentences and yeah.

A Furniture Manifesto | Roseology

Taking apps out of phones and embedding them in the world around us …there’s a lot of crossover with what Scott Jenson has been writing about here. Good stuff.

The Future Friendly Campus // Speaker Deck

It’s great to see the Future Friendly call-to-arms being expanded on. Here it’s university sites that are being looked at through a future-friendly lens.

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.

Caine’s Arcade | A cardboard arcade made by a 9-year old boy.

No, you’re tearing up watching a video about a boy who built his own arcade out of cardboard. I’ve just got something in my eye.

Paying attention to content hierarchy across screen sizes | Stuff & Nonsense

Andy points one of the potential pitfalls in linearising your content for small screens.

Form letter template for acquired startups — Gist

Just copy and paste.

Dear soon-to-be-former user…

1
2
3
Dear soon-to-be-former user,

We've got some fantastic news! Well, it's great news for us anyway. You, on

What Would Molydeux? • Articles • Eurogamer.net

A blow-by-blow account of last weekend’s MolyJam in Brighton.

Mobile Device Testing: The Gear | Bagcheck

An oldie but a goodie: this Bagcheck blog post contains a whole bunch of useful links to lists of mobile device testing suites.

GDS design principles

A great set of design principles for gov.uk — I’ve added them to http://principles.adactio.com/

Things Real People Don’t Say About Advertising

Yeah, it’s an easy target …but the cumulative effect is very funny.

Holy sh!t. Did you see that interstitial? That was dope. Refresh, refresh!!

Obscura Day 2012 on April 28th | An International Celebration of Unusual Places

A day devoted to exploring unusual places all over the world. I couldn’t find anything for Brighton but it looks like there will be some stuff happening in London.

In defense of reinventing wheels | Lea Verou

Maybe it’s because I’m a bit of a control freak, but I can really empathise with what Lea is saying here: sometimes the developer convenience you get from using someone else’s code can result in quite a bit of redundant code. I feel that this is particularly a problem on the front end.

Coding Horror: Preserving The Internet… and Everything Else

A love letter to the Internet Archive.

The inadmissible assumptions - Charlie’s Diary

Yes! Charles Stross speaks the unspeakable: that advertising is fundamentally “wrong”.

He’s right, y’know.

ADrink.at

A genuinely useful service for people in different parts of London who want to meet up for a pint.

Paperfold CSS | Demo Studio | Mozilla Developer Network

In amongst all the shiny demos on this site, this one could actually be useful.

Using Huffduffer to Listen to Audio - YouTube

This is so cool! A short screencast about Huffduffer.

An Ajax-Include Pattern for Modular Content | Filament Group, Inc., Boston, MA

Scott walks through the code and thinking behind the conditional loading pattern on The Boston Globe site. This is such a useful and valuable pattern!

Testing For Dummies | Testing

An in-depth look at the BBC News mobile testing process. I think it’s great that people are sharing this kind of information.

BBC - BBC Internet Blog: BBC News on mobile: responsive design

BBC News are using the mobile subdomain to plant the seed of responsive design. It’s a smart move that’s been really nicely executed.

A List Apart: Articles: Style Tiles and How They Work

Samantha does an excellent job of explaining how useful style tiles can be for visual design and iteration.

Nicholas Zakas: Progressive Enhancement 2.0 - YouTube

A great talk by Nicholas on what progressive enhancement means today. There’s some good ammunition in here.

L’Eclaireur • subblue

Press play on each video, sit back, and relax.

Content Folding | CSS-Tricks

An interesting idea from Chris: instead of linearising content on smaller screens, what if you could interweave it instead? Theoretically, CSS regions makes it possible, regardless of source order.

» Long Bets Bet – How Durable Are URLs? - Blog of the Long Now

The Long Now blog is featuring the bet between myself and Matt on URL longevity. Just being mentioned on that site gives me a warm glow.

scottjehl/Device-Bugs

Scott has created a one-stop-shop for documenting browser bugs in mobile devices. Feel free to add to it.

The Case Against Google

An in-depth look at where Google is going wrong.

Content Parity | Brad Frost Web

Yet another great post from Brad:

Whenever I think of the concept of “One Web” and providing universal access to information on the web, I tend to break it down into something much simpler: give people what they ask for.

Fashionably flexible responsive web design (full day workshop) // Speaker Deck

The slides from Andy’s one-day responsive design workshop are well worth a perusal.

Marginalized

Notes in manuscripts and colophons made by medieval scribes and copyists …in 140 characters or fewer.

Script Junkie | Flexibility: A Foundation for Responsive Design

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

ARCHIVE TEAM: A Distributed Preservation of Service Attack - YouTube

Jason’s rip-roaring presentation from Defcon last year.

Stop solving problems you don’t yet have | this is rachelandrew.co.uk

I completely agree with everything Rachel says here. I see far too many projects that start out with pre-emptive conditional comments, JavaScript libraries and polyfills, without knowing whether or not they’re actually going to be needed.

Kicksend/mailcheck · GitHub

A handy little script that attempts to check email inputs for misspelled domain names. I’m pretty sure it doesn’t need to be written as a jQuery pug-in, though: anyone want to fork it and create a non-jQuery version too?

The true fathers of computing | Technology | The Observer

An interview with George Dyson, whose next book—Turing’s Cathedral—sounds like it’ll be right up my alley.

Why I’m building Nilai by Colin Devroe

Now this is some prioritisation I can admire:

I’m going to build valuable, reliable, sustainable web services that will last forever.

Goldilocks and the Three Device Pixel Ratios [Legends of the Sun Pig - Martin Sutherland’s Blog]

A great examination of the default settings for pixel density and how it can effect reported device width values on mobile.

We need a standard show navigation icon for responsive web design | Stuff & Nonsense

Andy documents the kinds of symbols being used to represent revealable navigation on mobile.

Video, Mobile, and the Open Web | Brendan Eich

Mozilla will be supporting H.264 …but they’re not happy about it.

I won’t sugar-coat this pill. But we must swallow it if we are to succeed in our mobile initiatives. Failure on mobile is too likely to consign Mozilla to decline and irrelevance.

Galaxy Zoo and the new dawn of citizen science | Science | The Observer

A lovely piece of mainstream news reporting on Galaxy Zoo and the other Zooniverse projects, and the broader role of Citizen Science.

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

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

Webstock ‘12: Matt Haughey - Lessons for a 40 year old on Vimeo

I really enjoyed Matt’s talk from Webstock. I know some people thought it might be a bit of a downer but I actually found it very inspiring.

Off Canvas

Inspired by Luke’s documentation of layout patterns in responsive designs, Jason goes into more detail on the pattern of hiding navigation and extra content to the left and right of the viewport on small screens.

About HTML semantics and front-end architecture – Nicolas Gallagher

An in-depth look at naming patterns for classes to help streamline CSS.

Points mean Pixels - 8th May 2012 at The Skiff, Brighton

This looks like being a fun little local event ‘round at the Skiff in May.

Excessive Enhancement - SXSW2012 // Speaker Deck

The slides from Phil’s excellent South by Southwest presentation on URLs, JavaScript, and progressive enhancement.

What Goes Up, Doesn’t Have To Come Down

A thoughtful—and beautifully illustrated—piece by Geri on memory and digital preservation, prompted by the shut-down of Gowalla.

LukeW | Multi-Device Layout Patterns

Luke catalogues layout patterns in responsive designs.

LukeW | Vector Images for Mobile

Luke rounds up some of the alternatives to bitmap-based images—an increasingly important topic for “resolutionary” “retina’ displays (bleurgh!).

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.

Jeffrey Zeldman tribute video - on his induction into the SXSW Interactive Hall of Fame on Vimeo

The video that was played at Jeffrey’s inauguration into the South by Southwest Interactive Hall of Fame.