We've recently started a project which, unusually for us, is expected to work on mobile, tablet and desktop. We're usually mobile only. This led to a debate about whether and how to use responsive web design (RWD); this is where I stand:
Desktop-first responsive web design is an antipattern that is actively hostile to mobile users.
The desktop-first approach is where all content is delivered to the client, but the page uses CSS or JS to minimise or hide sections, rescale images etc.
The embedded/linked presentation at the bottom of this post, by Guy Podjarny from Akamai, outlines the main reasons: there are too many bytes sent to mobile clients in the form of overlarge images, extra CSS, elaborate HTML which take longer to load. And then much of this stuff isn't even viewable on a mobile device as it's then hidden using media queries as part of small screen adaptation.
Worse, bigger websites (even if they're using CSS/JS magic to appear small) actually burn up more battery than mobile-optimised ones, according to this report in the New Scientist.
So the shrink down approach takes longer to load, costs the user more (not everyone has an all-you-can-eat data plan) and kills your phone. You also end up with a non-mobile interaction paradigm: everything is on one long thin page, rather than a shallow bite-size version. (Yes, mobile and fixed use-cases are different. The distinction is much blurrier than it used to be thanks to in-home mobile use, tablets and lightweight laptops, but it still exists.)
There is a benefit of course. Antipatterns always have some benefit, otherwise they wouldn't occur - they're local minima, requiring effort to get out of. The benefit is that, if you have a desktop site it's relatively straightforward to modify it for mobile, so you can provide a mobile experience at little development cost. But then benefit is all with the developer, not with the user.
To be fair, it's probably acceptable to do this if your primary use-case is desktop, with only occasional mobile use, but how common is that now?
If you're anticipating any kind of sizeable mobile use desktop-first should be avoided. Mobile-first, with progressive enhancement/disclosure is a reasonable alternative. But even then I'd guess that 9 times out of 10 you'll end up with a different DOM on mobile and desktop even if you set out with the laudable goal of treating all clients the same. And if you end up with different DOMs, CSS, JS, why not simply start there?
Desktop-first responsive web design is an antipattern that is actively hostile to mobile users.
The desktop-first approach is where all content is delivered to the client, but the page uses CSS or JS to minimise or hide sections, rescale images etc.
The embedded/linked presentation at the bottom of this post, by Guy Podjarny from Akamai, outlines the main reasons: there are too many bytes sent to mobile clients in the form of overlarge images, extra CSS, elaborate HTML which take longer to load. And then much of this stuff isn't even viewable on a mobile device as it's then hidden using media queries as part of small screen adaptation.
Worse, bigger websites (even if they're using CSS/JS magic to appear small) actually burn up more battery than mobile-optimised ones, according to this report in the New Scientist.
So the shrink down approach takes longer to load, costs the user more (not everyone has an all-you-can-eat data plan) and kills your phone. You also end up with a non-mobile interaction paradigm: everything is on one long thin page, rather than a shallow bite-size version. (Yes, mobile and fixed use-cases are different. The distinction is much blurrier than it used to be thanks to in-home mobile use, tablets and lightweight laptops, but it still exists.)
There is a benefit of course. Antipatterns always have some benefit, otherwise they wouldn't occur - they're local minima, requiring effort to get out of. The benefit is that, if you have a desktop site it's relatively straightforward to modify it for mobile, so you can provide a mobile experience at little development cost. But then benefit is all with the developer, not with the user.
To be fair, it's probably acceptable to do this if your primary use-case is desktop, with only occasional mobile use, but how common is that now?
If you're anticipating any kind of sizeable mobile use desktop-first should be avoided. Mobile-first, with progressive enhancement/disclosure is a reasonable alternative. But even then I'd guess that 9 times out of 10 you'll end up with a different DOM on mobile and desktop even if you set out with the laudable goal of treating all clients the same. And if you end up with different DOMs, CSS, JS, why not simply start there?
Responsive Web Design ensures that your mobile site is the same as your website with the content re-arranged to fit the mobile screen size.Web Designing Company in Bangalore
ReplyDeleteResponsive web design is very important for every website.Because it providing great looks and colors to that websites.
ReplyDeleteOutsource Website Development
Ensure your website has the optimal viewing experience with responsive web design tutorials. For best and cheap manual Seo services, Web designings. Must check Website Designing Company in Bangalore
ReplyDelete