Tags: mobile

HTML5’s “Dirty Little Secret”: It’s Already Everywhere, Even In Mobile - ReadWrite

I’m an advocate for progressive enhancement. Tom Dale is not. But even though we may disagree on that, there’s a lot to like in his sensible, balanced answers to some sensationalist linkbaity questions.

It’s not that the pace of innovation on the Web is slower, it’s just solving a problem that is an order of magnitude more challenging than how to build and distribute trusted apps for a single platform. As we saw on the desktop, it may take a few years to catch up to all of the capabilities of a native, proprietary platform, but in terms of the impact it will have on humanity, forgive me for not losing sleep if we have to wait a few years for it to arrive.

Mobile Last?

This isn’t a scientific data sample, but Jonathan’s anecdotal evidence seems to suggest that most web designers and developers are still thinking with a desktop-first mentality. Which is crazy.

Startups and Shit, HTML-first

The Android vs. iOS debate is one hinges around whether you think it makes more sense to target a (perceived) larger market, or target one that the technorati favor. But why choose? Building a good responsive web app has a series of benefits, the primary one being that you target users on every platform with one app. Every user. Every platform. All the time. Release whenever you want. A/B test with ease. Go, go go.

UX How-To with Luke Wroblewski - YouTube

A fantastic collection of short videos from Luke on interaction design for devices of all shapes and sizes.

Make yourself a nice cup of tea, hit “Play all”, sit back, relax and learn from the master.

Things we learnt designing ‘Register to vote’ | GDS design notes

A concise case study from gov.uk:

Designing for the constraints of mobile is useful – if we get the fundamentals of the service working on small screens and slow network speeds, it can work on more capable devices.

Daring Fireball: Rethinking What We Mean by ‘Mobile Web’

John echoes some of my recent thinking about what qualifies as a web browser and, by extension, what qualifies as the web:

We shouldn’t think of “the web” as only what renders in web browsers. We should think of the web as anything transmitted using HTTP and HTTPS. Apps and websites are peers, not competitors. They’re all just clients to the same services.

That said, I think he is perhaps underestimating the power of URLs. Addressability—particularly over an extended time period—remains the powerful feature of the web.

Mobile-first and IE8 Solution – Introducing grunt-legacssy (Updated) | Robin Plus

A handy way of automating the creation of old-IE stylesheets using Grunt. This follows on from Jake’s work in using preprocessors and conditional comments to send a different stylesheet to IE8 and below—one that doesn’t contain media queries. It’s a clever way of creating mobile-first responsive sites that still provide large-screen styles to older versions of IE.

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.

Notes on a responsive Guardian redesign – Lozworld™

A great write-up of the design process behind The Guardian’s responsive site. It’s really gratifying to see UX designers talking about performance.

300ms tap delay, gone away - HTML5Rocks Updates

I think Chrome is doing the right thing by removing the 300 millisecond tap delay on sites that set width=device-width — it’s certainly better than only doing it on sites that set user-scalable=no, which felt like rewarding bad behaviour.

isMobileDevice and the death of innocence

A nice bit of sleuthing to trace the provenance of one piece of ill-advised user-agent sniffing JavaScript code.

Good luck getting that script updated for the thousands of sites and applications, you say to yourself, where it’s laying dormant just waiting to send devices the wrong content based on a UA substring.

Responsive App Design

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

Jim Silverman - Native Mobile Apps are the New Flash

The case may be a little overstated, but I agree with the sentiment of this. The web is always playing catch-up to something. For a while, it was Flash; now it’s native.

Flash was a great stopgap measure. But it outlived its usefulness and has been reduced to niche status.

Today, we’re seeing the nearly exact same scenario with native apps on mobile devices.

Native mobile apps are a temporary solution. We’re just over 4 years into the Appstore era and this has already become apparent. Open web technologies are catching up to the point that the vast majority of web apps no longer need a native counterpart.

If it doesn’t work on mobile, it doesn’t work | hacker journalist

A great presentation from Brian Boyer on NPR’s mobile strategy. Spoiler: it’s responsive design.

Do as Little as Possible ∙ An A List Apart Column

I heartily concur with Lyza’s mini-manifesto:

I think we need to try to do as little as possible when we build the future web …putting commonality first, approaching differentiation carefully.

It’s always surprised me how quickly developers will reach for complex, potentially over-engineered solutions, when—in my experience—that approach invariably creates more problems than it solves.

Simplicity is powerful.

Enabling new types of web user experiences - W3C Blog

Scott gives us an excellent State Of The Web address, looking at how the web can be central to the coming age of ubiquitous computing. He rightly skips through the imitation of native apps and gets down to the potential of just-in-time interactions.

The Pastry Box Project | 7 August 2013, baked by Karen McGrane

Preach it, Karen!

“Why would someone ever want to do that?” is the wrong question. It doesn’t matter why they want to do it. The fact is that people do. The right question, the one that we all should be asking, is “how can we make a better experience for them?”

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.

Common mistakes in smartphone sites

Good news from Google: it’s going to start actively penalising sites for perpetrating the worst practices for mobile e.g. redirecting a specific “desktop” URL to a the homepage of the mobile site, or for shoving a doorslam “download our app” message at users.

I wish that we could convince people not to do that crap on the basis of it being, well, crap. But when all else fails, saying “Google says so” carries a lot of weight (see also: semantics, accessibility, yadda, yadda, yadda).

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.

Is Android good yet?

Joking aside, this is a useful resource for keeping track of the current spread of Android versions.

I Don’t Want Your Fucking App

Doorslamming.

Content Parity on the web

A couple of years ago, the benefits of separate sites were more clear to me. Today, I can’t think of a good reason to maintain a separate mobile site.

Brett Jankord – Active development on Categorizr has come to an end

I think it’s a bit of a shame that Brett is canning his mobile-first device-detection library, but I totally understand (and agree with) his reasons.

There is a consensual hallucination in the market, that we can silo devices into set categories like mobile, tablet, and desktop, yet the reality is drawing these lines in the sand is not an easy task.

We’re not ‘appy. Not ‘appy at all.

An excellent explanation from Tom Loosemore on why the Government Digital Service is putting its energy into open standards and the web, rather than proprietary native apps.

The gradient chart by Cennydd Bowles

A very handy technique from Cennydd for answering the “it depends” question of when you might need a separate device-specific site (‘though I think that a separate can be a good option in addition to a responsive site, rather than instead of).

gaia/build/ua-override-prefs.js at master · mozilla-b2g/gaia · GitHub

And this is why user-agent sniffing not a future-friendly technique. A new mobile browser comes along, and it has to spoof a fake UA string to all of these sites.

It’s a Red Queen arms race.

Designing with context : Cennydd Bowles

A great meaty piece from Cennydd, diving deep into the tricky question of context.

Bluetooth gloves

I think this is kind of brilliant.

No, I’m not going to download your bullshit app by Tom Morris

I share Tom’s frustration with news apps that should be websites:

I wouldn’t download a BBC app or an NPR app for my computer. Why would I want one on my phone?

Stick-n-find

Spimify your household with these bluetooth location stickers. Now you can google your shoes.

Performance as design by Brad Frost

Amen, Brad, Amen.

It’s time for us to treat performance as an essential design feature, not just as a technical best practice.

» 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?

Schedule | Breaking Development Dallas 2012: Web design and development for beyond the desktop

All the videos from last year’s Breaking Development conference in Dallas are up on the site. They’re all excellent.

Fragmented world: what two years of traffic data teaches you about mobile | Info | guardian.co.uk

A great breakdown of mobile traffic to The Guardian website over time.

APIs First « Just Getting Started

The best “Mobile First” strategy is an “API First” strategy:

“Mobile first” companies really are just a front end selection accessing a solid API driven backend infrastructure.

I think Luke would agree. He built a command line interface for Bagcheck, for example, before there was even a UI—mobile or otherwise.

Mobile first: the revolution is well under way - Generated Content by David Storey

David takes a look at worldwide trends in web browsing, pointing out where mobile traffic exceeds desktop …and we’re not necessarily talking about smartphones here either.

It would be possible to travel from the Niger Delta on the west coast of Africa, to the horn of Africa on the east coast, without passing through a country where people surf more on desktop than a mobile phone.

Remote Preview

This looks like it could be one alternative to Adobe Shadow or Edge Inspect or whatever they’re calling it now that they’re charging $120 a year for using it.

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.

HTML5 forms (and IE10 (Mobile)) | Andrea Trasatti’s tech notes and more

Andrea looks at support for HTML5 input types in IE10 Mobile.

LukeW | Mobile Design Details: Hide/Show Passwords

I concur completely with Luke’s assessment here. Most password-masking on the web is just security theatre. Displaying password inputs by default (but with an option to hide) should be the norm.

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.

Designing for different devices | Government Digital Service

A behind-the-scenes look at how Gov.uk is handling mobile devices. Spoiler: it’s responsive.

I found this particularly interesting:

When considering the extra requirements users of different devices have we found a lot in common with work already done on accessibility.

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.

Guardian Truncation Team

Celebrating the work of the tireless men and women who shorten headlines so they’ll fit on your iPhone.

In mobile-centric Africa, Responsive Web Design just makes business sense!Moses Kemibaro | Moses Kemibaro

Therefore, from a business perspective, and my excitement in doing this blog post is that RWD is especially important for mobile-centric markets such as Africa.

The Guardian

Remember when I linked to the Github repository of The Guardian’s front-end team? Well, now—if you’ll pardon the mixing of metaphors—you can start to kick the tyres of the fruits of their labour. This beta site shows where their experiments with responsive design might lead.

The Brand New Printed Smashing Book: “The Mobile Book” | Smashing Magazine

Smashing Magazine are publishing a book on mobile and the web. I’m writing the foreword. I should really get on that.

Laying Down our Burdens: Steps towards simplifying the mobile Web

Amen, Lyza, Amen. Instead of treating web development for the multitude of devices out there as an overwhelming nigh-on-impossible task, let’s accept the fact that there are certain things that are beyond our control. And that’s okay.

Let’s build on the commonality core to the web where we can. To do this, I think we need to let go of a few things, to lay down our burdens.

Related: do websites need to look the same in every browser? NO!

Apple’s .mobi insanity - QuirksBlog

Wow. This might be the stupidest behaviour from a browser that I’ve ever come across: mobile Safari behaves differently depending on the top level domain of the site! Madness!

Mind you… it’s kind of poetic justice for having a ridonkulous .mobi domain in the first place.

Shadow is now Adobe Edge Inspect | Adobe Edge Inspect Team Blog

Oh, dear. Adobe Shadow gets a new name and a hefty price tag. Yesterday it was free. Today it is $119.88 per year. It’s useful but it’s not that useful.

So, lazy web, who’s working on an open-source alternative?

Don’t confuse design testing with device testing — Stuff

Andy makes a good point here, point out the difference between device testing and design testing:

When I’m designing, it’s incredibly important for me to quickly gain an affinity with how my design feels when I hold it in my hands.

These are not device testing issues, they are design questions and there’s a huge difference between how an interface feels to use on a smartphone size display and whether the HTML, CSS and Javascript actually works on any particular make or model.

Scott Jenson | Exploring the world beyond mobile

Excellent! Scott has his own URL now. If you haven’t read everything he has written so far, start from the start and read every single post.

klick-ass.com » Avoid the Tamagotchis – a list of Open Device Labs

A list of open device labs around the world (mostly Europe).

Why mobile Web accessibility matters - best practices to make your mobile site accessible | mobiForge

There’s some great practical advice for building accessible mobile web apps here.

beta.guardian.co.uk

Those clever chaps at The Guardian are experimenting with some mobile-first responsive design. Here’s how it’s going so far.

The code is on Github.

A List Apart: Articles: Testing Websites in Game Console Browsers

An excellent in-depth article from Anna on the many gaming devices out there that have both an internet connection and a web browser.

LukeW | Data Monday: Mobile Browser Use

Luke collates some useful mobile browsing statistics once again. Most of it is quite US-centric, but this closing point is a whopper:

36 countries more than doubled their Opera Mini user bases in one year.

Mobile Navigation Icons | TimKadlec.com

Tim shows how to make a scalable three-line navicon in CSS.

Distant Shape: 10 Years of Daring Fireball

A nice visualisation of Apple’s transition From desktop to mobile over ten years, one Daring Fireball article at a time.

Oh, and happy birthday, Daring Fireball.

Introducing our “Open Test Lab” for mobile device testing - Blog - 80beans

Now Amsterdam has a communal device lab.

A future friendly workflow | Opinion | .net magazine

Some more thoughts on how our workflow needs to adapt to the current ever-changing device landscape.

Scott Jenson | Beyond mobile, beyond web | Mobilism 2012

A little something to whet your appetite for dConstruct: Scott’s superb talk from this year’s Mobilism conference in Amsterdam.

» Explaining the iOS and Android mobile browser usage disparity Cloud Four Blog

A really fascinating analysis by Jason into the apparent disparity in web browsing between Android and iOS devices: it turns out that the kind of network connection could be a big factor.

Making of: People Magazine’s Responsive Mobile Website (Global Moxie)

An in-depth look behind the scenes of the responsive relaunch of People Magazine’s mobile site that Josh, Karen, and Ethan were involved in. I love it when people share their process and build stories like this.

CamHolder 0.2 for iPhone, Android and other mobile handsets - by Heiko Behrens

I’ve seen Heiko present with this gizmo at Mobilism and it worked a treat. I’m very tempted to get one for future presentations.

Twitter without Hashbangs

Remember when I linked to the story of Twitter’s recent redesign of their mobile site and I said it would be great to see it progressively enhanced up to the desktop version? Well, here’s a case study that does just that.

We’ll tell you what you really want: Mobile context, top tasks, and organization-centric thinking | Sara Wachter-Boettcher, Content Strategist

An excellent follow-up to the recent posts on the myth of mobile context.

You often hear about cutting content to cut clutter. I support this—if you’re cutting the clutter from everywhere, not just a mobile experience.

Maybe the answer isn’t cutting. Maybe it’s learning better skills for designing and structuring complex information to be usable and enjoyable in small spaces.

Twitter Blog: Overhauling mobile.twitter.com from the ground up

A great behind-the-scenes look at the redesign (and redevelopment) of Twitter’s mobile subdomain silo. Man, I would love to see this progressively enhanced up to the current widescreen view for “desktop” browsers without the need for separate URLs for any class of device.

But I digress …this is good stuff.

Mobile > Local « Karen McGrane

Yes, yes, yes! Karen drives home the difference between mobile and local (and there’s more about the myth of the mobile context).

If you’re making an argument for delivering different content to mobile users, or prioritizing content differently based on their context of use, stop for a minute and ask yourself if you mean local content. And if you do mean local content, then say that. Claiming that your travel example extends to cover the “mobile use case” leaves out millions of tasks and users.

Just to belabor this point: people use mobile devices in every location, in every context. Just because you know what type of device someone is using or where she is doesn’t tell you anything about her intention.

Great Works of Fiction Presents: The Mobile Context | The Haystack.

A really great article from Stephen on how we are mistakenly making assumptions about what users want. He means it, man!

Anna Debenham: Using the Nintendo DSi browser

Anna reports on her experience testing on a device we don’t often think about: the Nintendo DS …very popular with the young ‘uns.

KyleBean.co.uk - Portfolio: Mobile Evolution

Kyle’s Matryoshka phones are as cool as they are cute.

Sketching A New Mobile Web - Smashing Mobile | Smashing Mobile

A great article on the importance of sketching for mobile-first responsive designs, complete with practical ideas for workshopping.

Build a smart mobile navigation without hacks | Tutorial | .net magazine

A really great markup and CSS pattern for “content first, navigation second” from Aaron.

Every Mobile Social App Site, Ever · Visual Idiot

This is kinda funny (because it’s kinda true).

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.

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.

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.

Sex differences in intimate relationships : Scientific Reports : Nature Publishing Group

Albert-László Barabási and Robin Dunbar are among the authors of this paper — it’s the scale-free network equivalent of the Avengers.

The Jig Is Up: Time to Get Past Facebook and Invent a New Future - Alexis Madrigal - Technology - The Atlantic

An excellent longish-zoom article by Alexis Madrigal with an eerily accurate summation of the current state of the web. Although I think that a lack of any fundamentally new paradigms could be seen as a sign of stabilisation as much as stagnation.

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.

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.

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.

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.

What’s in a Name? | The Intercom Blog

The hitherto unnoticed connection between the names of Android phones and the names of condoms.

scottjehl/Device-Bugs

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

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.

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.

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

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

First thing you should do to optimize your desktop site for mobile « Cloud Four

Jason reiterates Bruce’s rallying cry: Performance First!

If you could only do one thing to prepare your desktop site for mobile and had to choose between employing media queries to make it look good on a mobile device or optimizing the site for performance, you would be better served by making the desktop site blazingly fast.

Bruce Lawson’s personal site  : What Users Want from Mobile, and what we can re-learn from them

Bruce hammers home the importance of speed and performance on mobile (and frankly, everywhere).

So perhaps some of the time and effort put into media queries, viewports, avoiding scrolling, line length would actually be better employed reducing HTTP requests and optimising so that websites are perceived to render faster.