Progressive Web Apps versus native is the wrong question because every step on the path to a Progressive Web App makes sense on its own, irrespective of what a company does with their native apps.
Not all of your customers are going to have your app installed. For those who visit via the web, providing them with a better experience will make them happier and generate more revenue for your business.
It’s really that simple.
How Google And Others Are Plotting The Revenge Of The Web App | Fast Company | Business + Innovation
It’s always, um …”interesting” when a mainstream publication covers a topic from the web’s bikeshed. In this case, it’s progressive web apps, and—apart from the sensationalist headline—it’s actually not that bad at all.
Yummy wallpapers for your desktop, tablet, and phone, from NASA and ESA.
Two pieces of good news from Google:
- 85% of websites qualify as mobile-friendly, so there’s no longer a need to explicitly label them as such in search results.
- Google will down-rank sites that have annoying pop-overs demanding you download an app or sign up to an email newsletter when you’re trying to read the damn page.
A wonderful investigation of a culture-shifting mobile device: the kaleidoscope. A classic Gibsonian example of the street finding its own uses for technology, this story comes complete with moral panics about the effects of augmenting reality with handheld devices.
(I’m assuming the title wasn’t written by the author—this piece deals almost exclusively with pre-Victorian England.)
Cameron looks back on his 2007 Mobile Web Design book:
I don’t anticipate native apps will die off anytime soon. But I’m warming to the idea that they may be less relevant to the future of the web, and I reaffirm that “a browser will be — or should be — sufficient for interacting with web content.”
Progressive web apps are poised to be remarkably relevant to the future of the web. Let’s not screw it up.
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).
A good impartial overview of progressive web apps, as described at the most recent Google I/O. This is very telling:
The term also begs the question; what is the difference between websites and apps? It seems many of the new capabilities fit well for any dynamic website, not just apps.
Anyhow. It’s good to have an umbrella term to talk about these things.
A lovely little native app:
The world’s most advanced camera for your mini pocket computer.
View source for added nostalgia/flashbacks.
Oh, and RTFM.
I agree with everything Andrew says here. Progressive web apps are great, but as long as Google heap praise on mobile-only solutions (like the Washington Post doorslam) and also encourage separate AMP sites, they’re doing a great disservice to the web.
More features arrive regularly to make this “one web” even better and easier to maintain. Service worker, streams, app manifests, payment request, to name a few. But adding these features one at a time to large, mature applications like WaPo or FT or Nikkei is a slow and painstaking process. That’s why it’s taking us a long time for us to tick off all these new features, and why it seems like madness to try and build the entire app several times over.
However, by creating the concept of PWAs and marketing them as they do, Google is encouraging publishers to ‘start again’. And they’re doing exactly the same thing with AMP.
Dave turned Day Trip into a progressive web app.
Starting this week, Android users (~13% of our active user base) who use DayTrip more than once will eventually be asked if they want to install our web app to their Home Screen. That’s important real estate for a small startup like ourselves.
In the web developer community’s collective drive to be more App Like and compete with native apps we may lose or weaken some of the web’s strongest features and we need to consider carefully before we throw away urls or the entire browser chrome in an effort to look like and behave like the cool kids of native.
So remember when I was talking about “the ends justify the means” being used for unwise short-term decisions? Here’s a classic example. Chris thinks that Progressive Web Apps should be made mobile-only (at least to start with …something something something the future):
For now, PWAs need to be the solution for the next mobile users.
End users deserve to have an amazing, form-factor specific experience.
I couldn’t disagree more. End users deserve to have an amazing experience no matter the form-factor of their device.
Remy looks at the closing gap between native and web. Things are looking pretty damn good for the web, with certain caveats:
The web is the long game. It will always make progress. Free access to both consumers and producers is a core principle. Security is also a core principle, and sometimes at the costs of ease to the developer (but if it were easy it wouldn’t be fun, right?).
That’s why there’ll always be some other technology that’s ahead of the web in terms of features, but those features give the web something to aim for:
Flash was the plugin that was ahead of the web for a long time, it was the only way to play video for heavens sake!
Whereas before we needed polyfills like PhoneGap (whose very reason for existing is to make itself obsolete), now with progressive web apps, we’re proving the philosophy behind PhoneGap:
If the web doesn’t do something today it’s not because it can’t, or won’t, but rather it is because we haven’t gotten around to implementing that capability yet.
While many challenges remain, the good news is … it’s progressive. Developers can already see the benefits by sprinkling in these technologies to their existing websites and proceed to build on them as browsers and operating systems increase support.
Remy sums up the psychological end goal of progressive apps (HTTPS + Service Worker + manifest JSON file) prompting an add to home screen action:
This high bar of entry will create a new mental model for our users.
If I add this app to my home screen, it will work when I open it.
It’s a shame that this charge to turbo-boast the perception of the web on mobile is a bit one-sided: I would love to see Apple follow Google’s lead here. But if Android succeed in their goal, then I think iOS will have to follow suit just to compete.
This might be the most remote open device lab yet. Looks pretty great.
A larger screen is now a progressive enhancement. Hell, with things like Siri and Google Now and Amazon’s Echo, we’re getting to the point where even a screen is an enhancement.
I really, really want to like this article—it’s chock full of confirmation bias for me. But it’s so badly-written …I mean like, just the worst.
Here’s an actual sentence:
So with a capable, HTML-based platform and a well-designed program that makes good use of CSS, one site could support phones, tablets, PCs, and just about anything else with one site.
So, yeah, I’m still linking to it, but instead of it being for the content, it’s because I want to lament the dreadful state of technology writing.
A useful primer on which combinations of attributes and values work best for which form fields:
Following on from that last link, here’s an in-depth run-down of what you can do in mobile browsers today. I think a lot of people internalised “what you can’t do on the web” a while back—it’s well worth periodically revisiting the feature landscape to revise that ever-shrinking list.
Perhaps the biggest advantage the web has over native apps is how quickly users are able to engage. All that’s between the user and your content is one click.
Jennison Asuncion outlines the problem with relying on a swipe gesture for interactions.
I would say that this could be expanded to just about any interaction: it’s always dangerous to rely on one specific gesture. It’s always better to either provide multiple ways of accomplishing a task, or to simply take a declarative approach, get out of the way, and let the user agent handle it.
Why Atavist is betting on the web. See also:
Tom’s thoughts on what AMP means for developers and publishers. He was initially sceptical but now he’s cautiously optimistic. Like me, he’s hoping that AMP can force the hand of those third-party advertisers to get their act together.
Publisher’s development teams are very capable of creating fast experiences for mobile users, but they don’t have the clout to coordinate all the additional cruft that is added to the page. However, if all the different publishers dev team’s got together and put their weight behind a single implementation, then we can force third parties to change their habits.
I’d like to do this for all Clearleft web projects.
How important is mobile for @nytimes? We’re blocking access to our home page on desktop in our building.
I can relate 100% to what Dave is saying here:
I’m disenchanted with desktop. That conviction runs so deep, I groan when I see a desktop layout JPEG.
All too often we talk the talk about taking a mobile first approach, but we rarely walk the walk. Most designers and developers still think of the small-screen viewport as the exception, not the norm.
For once, Betteridge’s Law of Headlines doesn’t hold true, because the data in this article shows that the answer is a resounding “yes!”
The key change in all of this, I think, is that Google has gone from a world of almost perfect clarity - a text search box, a web-link index, a middle-class family’s home - to one of perfect complexity - every possible kind of user, device, access and data type. It’s gone from a firehose to a rain storm. But on the other hand, no-one knows water like Google. No-one else has the same lead in building understanding of how to deal with this. Hence, I think, one should think of every app, service, drive and platform from Google not so much as channels that might conflict but as varying end-points to a unified underlying strategy, which one might characterize as ‘know a lot about how to know a lot’.
Luke continues to tilt against the windmills of the security theatre inertia that still has us hiding passwords by default. As ever, he’s got the data to back up his findings.
Designing primarily in a laptop web browser and testing with a mouse rather than fingers may come to look very out of date soon.
But as people spend more time on their mobile devices and in their apps, their Internet has taken a step backward, becoming more isolated, more disorganized and ultimately harder to use — more like the web before search engines.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
Dan Bricklin—co-creator of the original VisiCalc spreadsheet—turns his attention to responsive design, specifically for input-centric tasks.
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.
A great presentation from Brian Boyer on NPR’s mobile strategy. Spoiler: it’s responsive design.
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.
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.
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?”
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.
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).
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.
Joking aside, this is a useful resource for keeping track of the current spread of Android versions.
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.
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.
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.
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).
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.
A great meaty piece from Cennydd, diving deep into the tricky question of context.
I think this is kind of brilliant.
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?
Spimify your household with these bluetooth location stickers. Now you can google your shoes.
Amen, Brad, Amen.
It’s time for us to treat performance as an essential design feature, not just as a technical best practice.
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?
All the videos from last year’s Breaking Development conference in Dallas are up on the site. They’re all excellent.
A great breakdown of mobile traffic to The Guardian website over time.
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.
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.
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.
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.
Andrea looks at support for HTML5 input types in IE10 Mobile.
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.
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.
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.
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.
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.
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.
Smashing Magazine are publishing a book on mobile and the web. I’m writing the foreword. I should really get on that.
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!
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.
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?
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.
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.
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.
An excellent in-depth article from Anna on the many gaming devices out there that have both an internet connection and a web browser.
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.
Tim shows how to make a scalable three-line navicon in CSS.
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.
Now Amsterdam has a communal device lab.
Some more thoughts on how our workflow needs to adapt to the current ever-changing device landscape.
A little something to whet your appetite for dConstruct: Scott’s superb talk from this year’s Mobilism conference in Amsterdam.
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.
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.
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.
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.
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.
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.
A really great article from Stephen on how we are mistakenly making assumptions about what users want. He means it, man!
Anna reports on her experience testing on a device we don’t often think about: the Nintendo DS …very popular with the young ‘uns.
Kyle’s Matryoshka phones are as cool as they are cute.
A great article on the importance of sketching for mobile-first responsive designs, complete with practical ideas for workshopping.
A really great markup and CSS pattern for “content first, navigation second” from Aaron.
This is kinda funny (because it’s kinda true).
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.
If you’re based anywhere near Frome in Somerset, get in touch with Cole—he’s putting together a communal device testing lab.
Another call for design-based (rather than device-based) breakpoints in responsive sites.
A great step-by-step tutorial from Brad on developing a responsive site with a Content First mindset.
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.
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.
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.
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.
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.
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.
Tim has published the results of a whole bunch of testing he did on how different browsers deal with hidden or replaced images.
An oldie but a goodie: this Bagcheck blog post contains a whole bunch of useful links to lists of mobile device testing suites.
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 News are using the mobile subdomain to plant the seed of responsive design. It’s a smart move that’s been really nicely executed.
The hitherto unnoticed connection between the names of Android phones and the names of condoms.
Scott has created a one-stop-shop for documenting browser bugs in mobile devices. Feel free to add to it.
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.
A great examination of the default settings for pixel density and how it can effect reported device width values on mobile.
Andy documents the kinds of symbols being used to represent revealable navigation on mobile.
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.
A sweet little meditation on the nature of the web and responsive design.
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 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.
Luke rounds up some of the alternatives to bitmap-based images—an increasingly important topic for “resolutionary” “retina’ displays (bleurgh!).
Adobe have launched their version of Weinre, the tool that allows you to refresh and debug iOS and Android browser views from your desktop computer.
A great post that discusses exactly what we mean when we talk about “supporting” different browsers.
Some interesting ideas on the commonalities and differences between native apps and the web.
Luke outlines three different solutions to delivering a site to multiple devices.
An acid test for mobile browsers. Point your device at rng.io and it will report on how much or little mobile shininess is available.
The slides from Chris’s presentation on the known unknowns of the web.
DirectGov is switching from a WURFL-driven separate mobile site to a responsive solution. Good move.
Some very interesting results from testing background image downloads contained within media queries or overridden with media queries: it turns out that, in iOS at least, the browser is getting smarter and smarter.
Jonathan gives a thorough overview of the various tools and frameworks out there to help build native, hybrid and mobile web apps. He also shares his decision-making process on when to build what.
That Scott is one smart cookie. He has come up with a workaround (using the accelerometer) for that annoying Mobile Safari orientation/zoom bug that I blogged about recently.
I still want Apple to fix this bug as soon as possible—the fact that such smart people are spending so much effort on ingenious hacks shows just how much of a pain-point this is.
Yes! Yes! Yes!!!
Progressive enhancement is the only sane approach to today’s massively divergent landscape of devices. It can’t be repeated often enough.
Stephanie details all the things we have to know about when designing for today’s broad range of devices: performance, capabilities, form factor, pixel density, and network latency.
These are all good points but I worry that if we just concentrate on the current device landscape, our processes won’t adapt to the future.
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.
Stephanie focuses on Android but this is a cautionary tale about trying to impose control over what you’re sending to the multitude of mobile devices out there.
Designing to fixed screen sizes is in fact never a good idea…there is just too much variation, even amongst ‘popular’ devices.
A good round-up of what web development means today …and what web developers need to do to keep pace.
Brad is on a roll. He knocks it out of the park again, this time talking about the difference between supporting the huge range of mobile browsers out there compared to trying to optimise for them.
PPK tests the various ways that mobile browsers handle position:fixed, complete with videos.
Some future-friendly musings on mobile from Mozilla and Yahoo.
A great round-up of links and posts relating to the increasingly-important role of content strategy and structured content in our multi-device, responsively-designed online world.
Brent Simmons follows up on that Dave Winer post with some future-friendly thoughts:
If I had to choose one or the other — if I had some crazy power but I had to wipe out either native apps or web apps — I’d wipe out native apps. (While somehow excluding browsers, text editors, outliners, web servers, and all those apps we need to make web apps.)
That’s not the case, though. Nothing has to get wiped out.
The great thing about the web is linking. I don’t care how ugly it looks and how pretty your app is, if I can’t link in and out of your world, it’s not even close to a replacement for the web. It would be as silly as saying that you don’t need oceans because you have a bathtub.
The video of the opening keynote I delivered at the Breaking Development conference in Nashville earlier this year. It expands on the One Web presentation I gave at DIBI, focusing on the language we use to talk about our approaches to web development.
Well, this is very intriguing: it turns out that the infamous orientation/scale bug in Mobile Safari isn’t present in in-app browsers (UIWebView). Most odd.
Documentation of an ongoing project to create a mobile-first responsive MediaWiki theme.
The process behind the mobile-first responsive design of audiovroom.com.
Brad takes a detailed look at mobile browser support for fixed positioning and how it intersects with page zooming.
Luke points out that the web is everywhere: it’s accessible through the browser but also through many native applications. This is the real Web Operating System.
The Web (browser) is inside of every application instead of every application being inside the Web (browser).
Excellent points, eloquently delivered, on why sites shouldn’t be shoving their native Apps in the face of people who just arrived at their website on a mobile device.
Putting up a splash screen is like McDonalds putting a bouncer on the door, and telling customers who just parked their car and want to enter the restaurant that they should use the drive-through instead.
On the importance of using a fluid grid in responsive design.
A PDF of the slides (with copious notes) from Josh’s brilliant presentation. I love this guy!
This is article is mostly a decent round-up of development approaches to mobile but the summary lets it down by assuming that desktop users couldn’t possibly want the same functionality as mobile users — in my opinion, inferring people’s desires based purely on their device is extremely dangerous and downright patronising.
Possibly the least imaginative concept video ever made, this piece commissioned by Blackberry shows a dystopian near-future ruled by security departments run by people with very, very tired arms.
#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.
A damning indictment on the lack of any upgrade path for most Android phones. It’s disgusting that most customers have contracts that are longer than the life cycle of their phone’s operating system (and crucially for me; their browser).
A wonderfully in-depth article from Zoe on all the practical aspects of using media queries for layout.
An excellent point from Jonathan: both native apps and web apps require an internet connection …and both native apps and web apps can be made to work without an internet connection.
This might sound obvious, but the myth that “only native apps can work without an internet connection” is surprisingly widespread.
A great collection of the future-friendly techniques of today: progressive enhancement, mobile first and responsive design.
A terrific presentation on progressive enhancement and mobile web development from Brad at Web Design Day. You can look at the slides, read the notes and watch the video.
Looks like Lyza’s presentation at Over The Air at Bletchley Park was really excellent.
Interview with Lyza Danger Gardner - How I Learned to Stop Worrying and Set my Mobile Web Sites Free - Ubelly
A great little interview with Lyza, wherein she outlines her future-friendly attitude to web development.
Jason takes a high-level look at tackling mobile-first responsive images (his next post will dig into the details). This is a really good summation of current thinking. Be sure to read the comments too: Andy chimes in with his experiences.
A real-world anecdote from Jonathan illustrates some of the misconceptions around using HTML instead of going native. A lot of people don’t realise that web apps can store data offline.
Scott writes up some of the things he talked about at the Breaking Development conference: the just-in-time interactions that are inevitable in a heavily-instrumented world.
John pushes back against the idea that browser innovation is moving too slow.
Brad documents his time at Mobilewood and cast his gaze to a future-friendly horizon.
Josh sums up the Mobilewood experience wonderfully. He also makes it clear that futurefriend.ly is just the beginning:
This stuff is hard, and we need to do it together. This is a time to be generous, and it’s a time for conversation. Let’s get after it.
Luke beautifully encapsulates the forces that drove the creation of the futurefriend.ly site. I feel like I should be standing on my chair, declaring “Oh captain, my captain!”
We are preparing to launch.
I’m sitting here in Nashville with Scott, who has been answering questions from Read Write Web about the Boston Globe launch. Here’s the resulting article.
An overview of the strategy behind the fantastic Boston Globe website.
A slick little video that goes behind the scenes of the Boston Globe site.
A lovely responsive portfolio showcasing a lovely responsive site. Responsinception!
A handy set of guidelines from Brad Frost. It’s still a work in progress but it’s got some good tips for mobile design and development.
Luke’s notes from my talk at the Breaking Development conference in Nashville summarise my points nicely.
This photograph made my day: the brand new Boston Globe site running on a Newton.
Progressive enhancement. It works.
Mobile HTML5 - compatibility tables for iPhone, Android, BlackBerry, Symbian, iPad and other mobile devices
This just launched at the Breaking Development conference: another site that uses the term HTML5 to include CSS and Ajax. Still, despite its inaccurate nomenclature, it’s a useful compatibility table of device support in mobile browsers.
I’ve just seen this incredible presentation from Stephanie Rieger at the Breaking Development conference in Nashville. It’s absolutely packed full of fantastically useful ideas. You really should’ve been there, but these slides can give you a taste of the presentation.
Unfortunately this article from PPK is flawed from the start: his first point (upon which all the subsequent points are based) is fundamentally flawed:
Right now responsive design is graceful degradation: design something for desktop and tablet, and remove stuff for mobile.
That’s not the way I’m doing responsive design. Responsible responsive design marries it with a mobile first approach (or more accurately, content first).
I’m loving Amber’s detailed write-up of the Update conference, especially her description of the panel discussion as me versus everyone else.
Luke proposes a development approach that marries the best of responsive design with content negotiation. It makes a lot of sense. I like it.
An eye-opening insight into web usage on mobile devices in Asia from Paul Rouget.
Luke enumerates the reasons why Bag Check has a separate desktop website rather than one responsive URL for desktop and mobile. They’re good reasons but I think they could all be addressed with some clever conditional loading, especially seeing as the site was, of course, built mobile first.
James attempts to tackle the thorny question of what makes something a web “app” (rather than a web “site”). It reminds of the infamous definition of obscenity:
I know it when I see it.
In short, the answer to the question “what is a web app?” is “fuck knows.”
Some interesting questions (and one or two answers) about how responsive design affects publishing on the web.
A great opinion piece from Addy Osmani prompted by the panel discussion I took part in at the Update conference.
In an attempt to “optimise” performance, T-Mobile and Orange are actually breaking jQuery.
The importance of structured content for longevity and responsiveness.
An even-handed weighing up of the pros and cons of native and web app development for mobile.
Stephen and PPK are taking their two-day mobile workshop on the road, including two dates in the UK (one of which is Brighton!). There’s a welcome emphasis on testing.
The world’s first mobile photography conference will take place in San Francisco on September 24th this year, featuring Dan Rubin, Jessica Zollman and more.
It’s a provocative title but I certainly agree with this post’s premise. And the situation it describes is all too familiar.
A nice round-up of responsible responsive web design techniques, ‘though I would go a bit further and suggest that the rallying cry is not so much about Mobile First but Content First.
A handy mobile-friendly list from Mike Stenhouse of which fish are currently having their stocks depleted. It uses offline storage so once you’ve visited once, you’ll be able to pull it up anywhere.
I agree with this. I like it. I plus one it. So to speak.
New Mobile Safari stuff in iOS5: position:fixed, overflow:scroll, new input type support, web workers, ECMAScript 5 | David B. Calhoun – Developer Blog
An excellent summation of one web developer’s journey with responsive web design.
The dominance of the desktop browser is over – the web has become wider. After so long painting in a tiny corner of the canvas, it’s time to broaden our approach.
It’s understandable that the community is somewhat nervous about the changes ahead. So far, we’ve mostly responded by scratching around for device-specific tips, but this isn’t sustainable or scalable. We should transcend “platformism” and instead learn to design for diverse contexts, displays, connectivity, and inputs by breaking devices down into first principles. Instead of the defective dichotomy of the “desktop” and “mobile” web, designers should aim to create great user experiences using the truly fluid nature of the web.
Susan’s comprehensive notes from the roundtable discussion about the mythical mobile user.
The class of device formerly known as mobile.
Yes! Luke nails the fallacy of the mythical mobile user. Instead of trying to mind-read intent, play to the strengths of mobile devices instead.
A comprehensive list of links to videos, blog posts and slides from the Mobilism conference.
Another great post from Susan. Not only are we making unwarranted assumptions about what the mythical mobile user wants, we’re basing those assumptions on the worst possible user base: ourselves.
A timely reminder from Jason of the killer feature of the web: hyperlinks.
Susan pushes back on the notion of the mythical mobile user.
Luke’s notes from the browser panel I moderated at the Mobilism conference.
Here’s a video of the mobile browser panel I moderated at Mobilism in Amsterdam today. It gets fairly technical for a while but it was mostly a lot of fun.
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.
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.
- A “small screen” user is not necessarily a mobile user.
- A “small screen” device is not necessarily a mobile one.
See also: bandwidth.
Aaaaaand once again, the Riegers show us the way. This time it’s Stephanie’s presentation at Breaking Development in Dallas. Bloody brilliant.
The Riegers are like emissaries from Planet Smart and we mere mortals are fortunate that they take the time to give us great articles like this.
Jason Grigsby pulls together a bunch of links related to responsive design, mobile web and that tricky context problem.
Andy hammers home the benefit of a long-term format like HTML compared to the brittle, fleeting shininess of an ephemeral platform-specific app.
Fellow Brightonians, the brothers Ribot and co., launch an excellently responsive company site.
Yes! Yes! Yes! Mark nails it: just because someone visits a site with a certain kind of device doesn’t mean you can make assumptions about their intentions.
- Mobile != low download speed
- Context != intent
An excellent article from Bryan, hammering home the point that there is no sharp dividing line between desktop and mobile.
Remember as well that the most ubiquitous of technologies, the common thread throughout many connected devices, is the browser. Browser-based experiences may not always be as sexy, but they are often far more capable of adapting to different contexts. In times of rapid change, adaptability—rather than features—may be your product’s greatest ally.
Luke points to the sweet spot between creating endpoints for classes of devices, and using responsive design to allow them to adapt.
Steven nails exactly why I’m so excited about the increasing diversity of devices accessing the web; not so that we can build more silos, but so that we can sure our content is robust enough for the multitude of different devices:
To be honest, I can think of a few, but not many use cases of web sites or apps which are or should be exclusively mobile. It seems like the Mobile Web allows us to revisit all of the talk of inclusion, progressive enhancement and accessibility from years ago.
John Allsopp calls bullshit on the notion that native apps are intrinsically better than web apps. I concur.
An excellent summation of the responsive enhancement approach to web development.
An excellent overview of the evolution of the St. Paul's School website from David Smith, noting an increasing emphasis on mobile usage.
This W3C document is done and dusted: proposed recommendation. Every one of the guidelines for optimising for mobile also holds true for "desktop" sites.
An emotionally affecting endorsement of the accessibility features on the iPhone.
Google reaffirms its commitment to net neutrality ...except when it comes to wireless broadband, of course, because that's *totally* different, right? This disgusts me.
Jonathan Stark's book is available online, in HTML, for free.
A nice collection of free apps for your mobile device. No app store required, thanks to offline storage.
Charles Stross peers into his dilithium crystal ball and tells tales of the future as decided by Apple.
A clear explanation of device-width from PPK.
PPK proposes a new buzzword for standards-based mobile development: HTML5 Apps. Definition: "an iPhone app that works on several other platforms, too, and doesn’t have to go through the app store approval process."
The bottom-up appeal of netbooks in all their cheap, crappy glory.
PPK offers a rebuttal to Paul Graham's attack on Apple's App Store policies by placing the blame firmly at the feet of developers who refuse to embrace web technologies.
A hands-on account of the new accessibility features in the iPhone. Sounds like a great experience.
Simon St. Laurent explains why mobile support for HTML5 mitigates Microsoft's dominance of desktop web browsing.
Great article by Bruce defending the principle of One Web.
Stevie Wonder talks about assistive technology. I think this finally proves that yes, accessibility *is* sexy!
When localisation attacks. This is like a more morbid Douglas Adams vignette.
An excellent write-up by Bruce of a talk he gave at the Betavine birthday party. Down with .mobi! One Web FTW!
A superb article by Bryan Rieger on designing for multiple screen sizes. The closing section makes it clear that if you care about mobile, you'd better get comfortable with liquid layouts fast.
A web browser for Android that detects microformats and allows direct actions with the data. The map integration is exactly the kind of thing I'd like to see on the iPhone.
The importance of providing predictive text for minority languages (including Irish). To help preserve languages, advocates are pushing to make more written languages available on cellphones.
Screenshots of various log in screens on the iPhone. I think Cindy has been hanging out with Luke W.
Nice QR code patches (I don't mean something that patches code, I mean a patch that you sew).
Apple admit that they totally screwed up the roll-out of MobileMe and offer a 30 day extension for free. Now if only it were as easy to make up for the craptastic markup underlying the web-based MobileMe apps.
If, like me, you were going cold turkey on Mobile Scrobbler after updating your jailbroken iPhone/iPod Touch, you can stop sweating now. The official Last.fm app is really, really nice ...and it's free.
Tom Hume demos Octobastard: a robot arm controlled from a mobile phone.
The new "you are here" feature on the mobile version of Google Maps looks, as Matt Jones said, "indistinguishable from magic." But it doesn't work on my phone. Grrr...
Local siblings Ribot Maximus and Ribot Minimus have launched their smart-looking site. All mobile, all the time.
The text of Mark Pesce's excellent presentation at Web Directions South.
Twitter introduces the ability to get alerted by phone or IM when keywords are mentioned. A nice little unobtrusive feature.
Looks like the iPhone has been unlocked. Jesus phones want to be free.
"The sharp increase has been attributed to smokers keeping themselves occupied as they're forced outdoors and away from their mates. Many are also turning to their phones as a distraction and a way to avoid temptation."
Apple Developer Connection - iPhone for Web Developers - Optimizing Web Applications and Content for iPhone
Straight from the horse's mouth, advice for web developers on how the iPhone's browser renders pages. I'm very intrigued to find out how it handles liquid designs with no set min-width.
David Pogue gets down and dirty with the iPhone. The good: "It feels amazing in your hand." The bad: "Typing is difficult."
An interview with the creator of Jaiku.
Yahoo have created a Twitter alternative... but they don't state anywhere on this site that it's US-only.
Cameron is writing a book. You know it's going to be good.
The screen of this mobile phone looks like a glass of water. The amount of water shows the battery life. The phone has a built in motion sensor to keep the water level.
I've been playing around with this on my new Sony Ericsson K600i. It's pretty sweet... even if it doesn't cover the UK yet.
Former Doctor Who actor Tom Baker is to be the voice of a talking text message service for three months.
Mike has a really nice stopgap technique for improving your site on mobile devices.
Simon has some good hands-on suggestions for mobile stylesheets.