Adactio: Links

Psiu Puxa Wallpapers

Yummy wallpapers for your desktop, tablet, and phone, from NASA and ESA.

Research with blind users on mobile devices | Accessibility

Some interesting outcomes from testing gov.uk with blind users of touchscreen devices:

Rather than reading out the hierarchy of the page, some of the users navigated by moving their finger around to ‘discover’ content.

This was really interesting - traditionally good structure for screen readers is about order and hierarchy. But for these users, the physical placement on the screen was also really important (just as it is for sighted users).

Responsive Product Comparison Tables - daverupert.com

Dave explains the thinking behind his responsive table pattern I linked to a while back. He’s at pains to point out that you should always make sure a pre-made pattern is right for you instead of just deploying it no-questions-asked:

Using prefabricated, road tested solutions from Apple’s Human Interface Guidelines, Google’s Material Design, Twitter’s Bootstrap, and Brad Frost’s Responsive Patterns is always a good place to start, but don’t settle there. My biggest advice would be to turn off the 27” display and use your sites and projects on your phone, there’s lots of low hanging fruit that could give way to new patterns, tailor-suited to your content.

Responsive Product Comparison Table

Here’s a nice little pattern from Dave—showing data tables one column at a time on smaller screens.

The Secret Lives of Tumblr Teens | New Republic

A fascinating insight into some of Tumblr’s most popular accounts:

Some posts get more than a million notes—imagine a joke whispered in biology class getting a laugh from a city the size of San Francisco.

It’ll be a real shame when Tumblr disappears.

That’s “when”, not “if”. Remember:

In 2013, Yahoo bought Tumblr.

Dumb Cuneiform. We’ll take your tweets and make them permanent clay tablets.

There’s something about this that I really like: a message transmitted via a modern communications medium converted into the oldest form of writing.

Periodic Table of Storytelling

Combining the molecules of narrative tropes to create stories.

Making the case for Progressive Javascript — The Millstone — Medium

I think we can all agree that “isomorphic JavaScript” is a terrible name for a good idea. I quite like calling it “portable JavaScript”, but here’s a good case for calling it “progressive JavaScript.”

(Right up until the end when the author says “But mainly, it’s pretty safe to assume JavaScript will just work. Everywhere.” …which is precisely the kind of unfounded assumption that leads to the very problems that isomorphic/portable/progressive JavaScript can help fix.)

Tablesaw - A Flexible Tool for Responsive Tables

Those lovely people at Filament Group share some of their techniques for making data tables work across a range of screen sizes.

Full-width pinned layouts with flexbox

Zoe uses one little case study to contrast two different CSS techniques: display-table and flexbox. Flexbox definitely comes out on top when it comes to true source-order independence.

Responsive tables

An interesting pattern for handling complex data tables in responsive designs. It’s a desktop-down approach, but pretty smart.

Labcase - Open Device Lab, in a case.

This is a really great idea—a portable open device lab. It’s UK-based and you can hire it out for a few days at a time.

More details here.

Responsive scrollable tables | 456 Berea Street

I like this CSS solution to sideways-scrolling tables for small viewports. It’s not going to be right for every situation but it’s a handy trick to keep up your sleeve.

Responsive App Design

Dan Bricklin—co-creator of the original VisiCalc spreadsheet—turns his attention to responsive design, specifically for input-centric tasks.

Android Fragmentation Report July 2013 - OpenSignal

A look at the degree of diversity in Android devices, complete with pretty pictures. The term “fragmentation” is usually used in a negative way, but there are great points here about the positive effects for web developers and customers.

You say fragmentation, I say diversity.

Responsive News — Response-ish Web Design

Details on how the BBC Responsive News team plan to eventually make their m-dot site scale all the way up to be the default site. This “planting a seed” approach works really well, not least for political reasons.

It’s something that The Guardian and The Chicago Tribune are working on too.

What can I plant now?

This is handy—a month by month list of which vegetables you should be planting right now.

Cover-Up’s open device lab

The guys at Cover Up are great: they make accessories for tablets and e-readers, so they have lots of those devices. They’ve made them all available for web developers to test on. Like I said: they’re great!

» Responsive Design for Apps — Part 1 Cloud Four Blog

A great piece by Jason analysing the ever-blurring lines between device classes.

Mind you, there is one question he doesn’t answer which would help clear up his framing of the situation. That question is:

What’s a web app?

Device Fatigue | Brad Frost Web

I know how Brad feels. I find it hard to muster any enthusiasm for any specific new device these days. But that’s okay. It’s more important to step back and see the trends and directions instead of getting caught up in the specifics of this particular phone or that particular tablet.

My remedy for device fatigue has been to take a step back and let my eyes go unfocused. Much like a Magic Eye, I can then see the hidden pictures behind the stippled noise that is the device landscape. This remedy helps me cope, gets me to stop caring about things that don’t really matter, and gets me to care about the broader trends the Magic Eye unveils.

New Rule: Every Desktop Design Has To Go Finger-Friendly (Global Moxie)

Josh takes an-depth look at the navigation design implications of touch/keyboard hybrid devices, coming to a similar conclusion as Luke and Jason:

Unfortunately, the top-of-screen navigation and menus of traditional desktop layouts are outright hostile to hybrid ergonomics. Tried-and-true desktop conventions have to change to make room for fingers and thumbs.

Want to test for a hybrid device? Tough luck. Instead, argues Josh, the best you can do is assume that any device visiting your site could be touch-enabled.

LukeW | Responsive Navigation: Optimizing for Touch Across Devices

Luke and Jason have done some excellent research (and put together some demos) into how the placement of navigation could be optimised for touch screens of all sizes. Turns out that the “standard” convention of having navigation along the top is far from ideal on a touch-enabled device.

An alternate universe – Marco.org

There is an elephant in the Microsoft store.

FixMyStreet

Not only is FixMyStreet responsive, it’s using the “display: table-caption” trick I documented for adjustable “content first/navigation second” source order.

Shopping Cart example

A nifty example of responsive tables. View source to see how it’s done.

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.

A Responsive Design Approach for Complex, Multicolumn Data Tables | Filament Group, Inc., Boston, MA

A really nice pattern for data tables in responsive designs. Just as with conditional loading, the key point is making a distinction between essential and optional content.

Arrivals

A cute glanceable interface onto Foursquare that turns it into your own private railway station.

Bringing the London Bus Network home – Blog – BERG

This is an excellent use of the Kindle as an undemanding screen. Really lovely!

Responsive Data Tables | CSS-Tricks

Some good ideas for formatting tabular data for small screens.

iPad: The Microwave Oven of Computing | Techinch

Y’know, I think this comparison actually makes a lot of sense.

Live style sheet editing!

Edit this page. Then view source.

Periodic Table of the Elements - Josh Duck

Cute illustration of different content types in HTML (though, personally, I would put sectioning content — section, article, nav, aside — into their own group).

Table of Condiments

Table of Condiments That Periodically Go Bad

Everything You Know About CSS Is Wrong! - SitePoint Books

Rachel and Kevin's new book looks very interesting indeed. It is about just one thing: CSS tables.

Digital Web Magazine - Portable Social Networks, The Building Blocks Of A Social Web

Ben has written a superb article outlining the hows and whys of distributed social networks with hCard and XFN, finishing with an inspiring call to arms.

OAuth support for Google Accounts and Contacts API - OAuth | Google Groups

As promised by Kevin Marks in the Q&A after my panel at South by Southwest, the Google Contacts API now supports OAuth. w00t!

Licence to Roam » BarcampBrighton - Portable Information

Liveblogged notes from a discussion I participated in at BarCamp Brighton 2 about Social Network Portability.

4 Technologies for Portability in Social Networks: A Primer - ReadWriteWeb

A nice summary of the technologies presented at my SXSW panel.

The Existential DiSo Interview on Vimeo

Chris interviews himself about portable social networks and distributed identity.

Giant Global Graph | Decentralized Information Group (DIG) Breadcrumbs

TIm Berners-Lee explains what the "graph" part of "social graph" means. I'm still not keen on the term but I really love the idea (although I also disagree about the building blocks required today).

Portable Social Networks: Take Your Friends with You [Content]

Brian's article on portable social networks is a clear and concise introduction to the subject with explanations of the technologies involved.

DataPortability.org - Share and remix data using open standards

A new site to track the building blocks of portable social networks: OpenID, OAuth, hCard, XFN and more.

Web2Summit: Opening Up the Social Graph

David Recordon announces a new developer tool for tracking status changes on social networking sites.

Brighton to London, leaving at 14:00 - Accessible UK Train Timetables

A new feature on Matthew Somerville's brilliant train timetable site. Just put /fares at the end of any URL to get the cheapest available fare.

Designing For Hackability » SlideShare

Brian Oberkirch's presentation from Webmaster Jam looks excellent.

Six Apart - News and Events: We Are Opening the Social Graph

Six Apart are getting ready to make portable social networks a reality. Watch this space for code.

Field Notes Brand

Dan is claiming that these notebooks could be moleskin killers. I am intrigued and I do like the nice use of Futura.

The Man in Blue > There are no social networks

Cameron's plea for social network transparency and portability is one of the most lucid and succinct yet.

Open Social Graph @ Plaxo

Try Plaxo's identity consolidator for yourself. Give it a URL that includes rel="me".

Plaxo to ship online identity aggregator based on microformats | ScobleShow: Videoblog about geeks, technology, and developers

The guys at Plaxo have not only implemented social network portability, they're sharing the code.