Re: Mobile first vs desktop first

Excellent summary Mat. 

What I would add from my experience is that it depends on the current stage of the project.

I've used the desktop first approach on sites I have to retrofit in to a small screen version of the site without touching the desktop version too much. This approach usually takes almost as long as creating a new version from scratch since you overwrite/remove what's already implemented. When everything is served in the same stylesheet this approach add a lot of duplicity to the styling. 

When it comes to the issue at hand, serving the mobile version of an image as the fallback/default image might be the wrong approach. In my opinion the best fallback might be the medium size image. The reason for not serving the smallest size image as the default is that the browser that require the smaller sizes usually is smartphones with very modern browsers. They would get the appropriate image from either browser support or a pollyfill. 

--
Kenneth Dahlstrøm

On 10. des. 2012, at 17:09, Kevin Suttle <kevin@kevinsuttle.com> wrote:

> Well said, Mat. Very comprehensive. 
> 
> KS
> 
> On Dec 10, 2012, at 11:04 AM, Mathew Marquis <mat@matmarquis.com> wrote:
> 
>> 
>> On Dec 10, 2012, at 9:39 AM, Marcos Caceres wrote:
>> 
>>> Hi, 
>>> The Editor of the img@srcset specification has requested that the working group clarify the differences between mobile first and desktop first. 
>>> 
>>> In particular, "Why would you need to put either mobile or desktop first?"
>> 
>> I may not know much, but this—this I know.
>> 
>>> 
>>> People with more experience than me in this area, I would appreciate: 
>>> 
>>> 1. a detailed description of both approaches.
>> 
>> Mobile-First
>> 
>> Mobile-first development—the most common approach to a responsive design, in my observation—means starting with the “mobile” styles first and building on them in layers, by way of `min-width` media queries. Typically a mobile layout will lean towards being more linear: a lot of UA-default `display: block` and `width: 100%`. This is the approach we took with BostonGlobe.com, which has several major benefits:
>> 
>> * Where desktop browser support for media queries is fairly solid and mobile browser support is something of an unknown, it ensures that the most sensible styles are served up by default, outside of any media queries.
>> * In the event that a desktop browser doesn’t support media queries (and no polyfill is in use), the user receives a less complex—but still entirely usable—layout.
>> * From a developer convenience standpoint, we’re not first coding the “desktop layout” and then overriding all of our custom styles as we build down. That would mean a much larger (set of) stylesheet(s), and a number of additional “where’s this style coming from” headaches.
>> 
>> In summary: “mobile-first development means starting with the smallest-screen layout and adding layout complexity as screen real estate permits.”
>> 
>> 
>> Desktop-First
>> 
>> A desktop-first development approach, predictably, means putting together the “desktop” layout outside of any media queries, and then reducing the complexity of the layout and tailoring it for mobile in layers via `max-width` MQ. The benefit here is that we would deliver a desktop-centric layout to desktop browsers that don’t natively support media queries—more often than not, it’s for the sake of IE 6/7/8. I generally find this approach to be way more trouble than it’s worth fro a dev standpoint, and it does mean running the risk of delivering a more complex “desktop” layout to an older mobile browser that doesn’t understand media queries, but there may be situations where a responsive layout is being applied in an environment where it’s limited in scope to “tablet-size and up.” In this case, a desktop-first approach may make the most sense, where the desktop layout will still function as-expected on a slightly smaller tablet, but less essential optimizations can be made within `max-width` media queries.
>> 
>> This is a common approach when retrofitting an existing desktop-centric site for mobile contexts, without the overhead of rebuilding the entire site as mobile-first—`max-width` media queries would allow mobile/tablet focused styles to be bolted on to an existing site with minimal overhead.
>> 
>> In summary: “desktop-first development means starting with the most complex, large-screen layout, and removing complexity as screen real estate becomes constrained.”
>> 
>> 
>> Mobile-first is my preferred approach, but there’s no “one true way” in any of this. I’m hoping we get more feedback from you guys on the list, here. The more information we have at our disposal, the stronger our case for a flexible solution to responsive images becomes.. No pun intended.
>> 
>> 
>> -M
>