SitePoint Sponsor

User Tag List

Page 1 of 4 1234 LastLast
Results 1 to 25 of 93
  1. #1
    SitePoint Addict
    Join Date
    Jul 2011
    Posts
    365
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Arguments against responsive/adaptive web design

    This whole practice of using media queries for responsive web design has captured my imagination. I mean it looks really cool if nothing else. However, I have come across arguments against it that are pretty compelling.

    11 Reasons why responsive web design isn't that cool!

    Just wondering if anyone has insights about it. I am pretty convinced of the liquid images thing. Loading huge images so that they can be dynamically sized down, doesn't solve the page loading problem. Forcing phones to download huge images for no good reason doesn't seem very user friendly to me. But what about the other points?

  2. #2
    SitePoint Addict capescafe's Avatar
    Join Date
    Dec 2004
    Location
    Bellevue, WA
    Posts
    222
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I've been reading up on Responsive Web Design myself recently and have realized it's not the solution to everything. I do think however it is quite useful for a simple site. But there are many things to consider for the type of site you have. I'm trying to figure out how to redesign some sites I'm in charge of and we have links to a lot of PDF files and also audio files. So I've been thinking how do those work on mobile devices and if I have one site to adapt to whatever device it's being viewed on, how would things like that work on a mobile device? And ecommerce sites, to me those would be better to have a mobile version and a desktop version. But then there's the question of a mobile app vs. a mobile website. Man....there is so much to consider and I'm a little overwhelmed at this point not quite knowing where to begin.

    So in short in my opinion there is a place for responsive web design and I think it's how very simple sites should be designed, but we still need to consider whether or not some sites need a mobile website version and/or a mobile app.

    I'd definitely like to read more opinions and insights on this subject.
    Carolyn (cape's cafe)
    Twitter | My Treehouse Profile | eBookFling

  3. #3
    SitePoint Addict
    Join Date
    Jul 2011
    Posts
    365
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yeah the thing that concerns me about it is this: Responsive web design seems to HIDE things, but does not REMOVE things. So big memory/battery drainers that you want to remove from a mobile site, or just aren't suitable for one, are being downloaded anyway. That's a big (!) for me.

    I think you are right. It depends on your goals. My fear is for a simple site is this: it works fine if you are ok with having the same content on mobile as in desktop and do not have huge components that download on the phone regardless of whether it is hidden by the media query or not. BUT, the problem could be if you set up the site as responsive, then begin to ADD things, whereby the site grows and becomes a site that you would not want to be responsive, but have already set it up that way.

  4. #4
    SitePoint Addict
    Join Date
    Jul 2011
    Posts
    365
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I guess at that point is where you would want to think about creating a dedicated mobile site to serve mobile specific content.

  5. #5
    SitePoint Addict capescafe's Avatar
    Join Date
    Dec 2004
    Location
    Bellevue, WA
    Posts
    222
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Well about the whole issue with hiding things using the media queries...there are some great articles on designing for Mobile first.

    Read this: 320 and up

    There was another one I read too but I can't find it at the moment. But basically I think there is a way to design a responsive site so you begin with the mobile "version" first and then use CSS3 Media Queries to add things for the desktop version. That way your mobile device wouldn't download the things meant for the desktop. At least that's my understanding of it. I haven't yet worked with it.

    So that's a start at least for a simpler site that doesn't have too much interactivity or is a blog site perhaps. But yes there is still the question of what sites do deserve a separate mobile site? And then what to include in the mobile version vs. the desktop version. I've also been reading up on jQuery mobile. I still just have no idea where to begin with redesigning websites to work with mobile devices. When I learned web design in the late 90's it was merely for desktop and the only issue at that time was how to make it work in different browsers. I feel like I have to relearn everything and the way I've been doing things. So at this point I'm just reading, reading, and reading some more and trying to learn as much as possible on the subject. The way of web design is definitely changing over to a new era. It's exciting but also overwhelming.
    Carolyn (cape's cafe)
    Twitter | My Treehouse Profile | eBookFling

  6. #6
    SitePoint Addict capescafe's Avatar
    Join Date
    Dec 2004
    Location
    Bellevue, WA
    Posts
    222
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    The link to read about jQuery mobile is: jQuery Mobile | jQuery Mobile

    I'm thinking a good way to go about this would be to combine the 2 ideas somehow: Responsive Web Design and jQuery mobile. I mean ideally it seems it would be very cool to have a site that works on all devices so you don't have to create multiple sites for however many different devices and browsers, etc. When I read about jQuery mobile my thought was that it's meant for a separate mobile version of your site, but now looking at it again I'm wondering if there's a way to incorporate both to make a site that is device agnostic.
    Carolyn (cape's cafe)
    Twitter | My Treehouse Profile | eBookFling

  7. #7
    SitePoint Addict capescafe's Avatar
    Join Date
    Dec 2004
    Location
    Bellevue, WA
    Posts
    222
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Here are sample sites built using jQuery mobile: jQuery Mobile Examples - JQM Gallery
    Here are sample sites that are built with the Responsive Web Design concept and CSS3 Media Queries: Media Queries

    I checked out some of those sites on the Media Queries site on my Windows phone and not all of them work that well. Some took a really long time to load and didn't look that great on my phone. I have a Samsung Omnia II and used Opera Mobile to view the sites.
    Carolyn (cape's cafe)
    Twitter | My Treehouse Profile | eBookFling

  8. #8
    SitePoint Addict
    Join Date
    Jul 2011
    Posts
    365
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by capescafe View Post
    Well about the whole issue with hiding things using the media queries...there are some great articles on designing for Mobile first.

    Read this: 320 and up

    There was another one I read too but I can't find it at the moment. But basically I think there is a way to design a responsive site so you begin with the mobile "version" first and then use CSS3 Media Queries to add things for the desktop version. That way your mobile device wouldn't download the things meant for the desktop. At least that's my understanding of it. I haven't yet worked with it.

    So that's a start at least for a simpler site that doesn't have too much interactivity or is a blog site perhaps. But yes there is still the question of what sites do deserve a separate mobile site? And then what to include in the mobile version vs. the desktop version. I've also been reading up on jQuery mobile. I still just have no idea where to begin with redesigning websites to work with mobile devices. When I learned web design in the late 90's it was merely for desktop and the only issue at that time was how to make it work in different browsers. I feel like I have to relearn everything and the way I've been doing things. So at this point I'm just reading, reading, and reading some more and trying to learn as much as possible on the subject. The way of web design is definitely changing over to a new era. It's exciting but also overwhelming.
    But isn't the concept the same? I mean you start with the mobile version, then add things to the desktop version, it's basically still hiding things, not removing them right? In other words, you are adding things to the desktop version at the end, but when the user resizes the window it hides certain things from the mobile version that were added later.

    So the mobile user is still downloading the bigger background image and the javascript that the desktop verison employs right? Or does that method solve that problem? I did not see where it does on that page.

  9. #9
    SitePoint Wizard bronze trophy Black Max's Avatar
    Join Date
    Apr 2007
    Posts
    4,029
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    Fascinating discussion. Keep it up, guys, I'm learning something from every post.

  10. #10
    SitePoint Addict capescafe's Avatar
    Join Date
    Dec 2004
    Location
    Bellevue, WA
    Posts
    222
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Well according to the 320 and up site it says:

    ‘320 and Up’ prevents mobile devices from downloading desktop assets by using a tiny screen’s stylesheet as its starting point. Try this page at different window sizes and on different devices to see it in action.
    And if you're viewing the site on a mobile device, say for example your iPhone, you won't ever expand your window beyond that viewport. So it sounds to me that only on the desktop would those assets be downloaded.
    Carolyn (cape's cafe)
    Twitter | My Treehouse Profile | eBookFling

  11. #11
    SitePoint Guru bronze trophy TheRaptor's Avatar
    Join Date
    Jul 2011
    Location
    New York
    Posts
    710
    Mentioned
    40 Post(s)
    Tagged
    0 Thread(s)
    The "320 and up" idea is interesting, never thought about building a site for mobile users then scaling it for the desktop users. It seems to me to be the same idea though, of scaling down a desktop site to a mobile site.

    I have just started doing the responsive design thing with @media queries, but I'm not too far into it and I'm starting to resize the pitfalls and the gothas with this method just might outweigh the pros.

    I am looking into jQuery mobile, looks very interesting and the sites that are using it seem to be lickety-split performance wise. I also like the idea of using a jQuery since that is what I know. Takes more work, but with usability in mind, it seems to be the better route.

    Addressing the bandwidth issue, Smashing Magazine in an article on "How to build a mobile site" tells us to set any unnecessary content and background images to display: none;. The problem with this is, the images and content are still getting downloaded, just hidden on the client-side.

  12. #12
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,604
    Mentioned
    24 Post(s)
    Tagged
    1 Thread(s)
    How does "320 and up" present the right syle info to versions of IE that don't understand the media queries? or do those browsers just get the same as handhelds do?
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  13. #13
    Mouse catcher silver trophy
    Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,830
    Mentioned
    110 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by felgall View Post
    How does "320 and up" present the right syle info to versions of IE that don't understand the media queries? or do those browsers just get the same as handhelds do?
    Conditional comments serving up the 'desktop' stylesheets for IE6 and IE7 is the usual method.

  14. #14
    SitePoint Addict capescafe's Avatar
    Join Date
    Dec 2004
    Location
    Bellevue, WA
    Posts
    222
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    While reading Ethan Marcotte's book "Responsive Web Design", I came across this paragraph in the last chapter that I think pretty much addresses the arguments against responsive/adaptive web design article.

    But most importantly, responsive web design isn't intended to serve as a replacement for mobile web sites. Responsive design is, I believe, one part design philosophy, one part front-end development strategy. And as a development strategy, it's meant to be evaluated to see if it meets the needs of the project you're working on. Perhaps there's a compelling reason to keep your site's desktop and mobile experiences separate, or perhaps your content would be better served by a responsive approach. Only you and your users know for certain.

    While I agree with mobile web designers who say that certain users of certain sites deserve different content, I think the reverse is also true: many sites can <em>benefit</em> from serving one document to multiple contexts or devices. And those are perfect candidates for a responsive approach.

    (pp. 108-109 <em>Responsive Web Design</em> by Ethan Marcotte)
    So just thought I'd share that.
    Carolyn (cape's cafe)
    Twitter | My Treehouse Profile | eBookFling

  15. #15
    SitePoint Wizard bronze trophy
    Join Date
    Jul 2006
    Location
    Augusta, Georgia, United States
    Posts
    4,048
    Mentioned
    16 Post(s)
    Tagged
    3 Thread(s)
    At first I was a little hesitant to look at what has been said objectively. However, after reading the article I think there are some valid points made. Particularly, in the case of creating a separate website when the workflow needs to change from desktop or mobile. This will probably never need to happen for simple, static sites, but dynamically driven ones where the user is trying to accomplish a goal through the UI, I can agree with.

    That said I don't think much of a case can be made for resizing images, since there are several services available including io (formally tinySrc) that make image optimizing a none issue across multiple devices.

    The same can be said for hiding things. In many cases those items can be hidden or omitted based on server side logic. Though I do agree that hiding things client-side is a terrible solution.
    The only code I hate more than my own is everyone else's.

  16. #16
    SitePoint Addict
    Join Date
    Jul 2011
    Posts
    365
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by capescafe View Post
    While reading Ethan Marcotte's book "Responsive Web Design", I came across this paragraph in the last chapter that I think pretty much addresses the arguments against responsive/adaptive web design article.



    So just thought I'd share that.
    Good points made. My only reservation about that is if the site eventually expands to include scripts that should not be downloaded to mobile but are.

    I will say though that the non support with IE legacy is not much of an issue for me. For desktop browsers I consider adaptive design as progressive enhancement anyway unless you REALLY care about 800x600ers which I don't. The trouble is if mobile browers don't support queries, which I am pretty sure the lot of them do.

  17. #17
    SitePoint Addict
    Join Date
    Jul 2011
    Posts
    365
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by oddz View Post
    That said I don't think much of a case can be made for resizing images, since there are several services available including io (formally tinySrc) that make image optimizing a none issue across multiple devices.
    Yeah I have heard of that. I'm gonna look into it. The liquid image thing is a non starter for me. Serving up huge images to dynamically resize, solves problems for the web dev but actually creates problems for the user, especially the mobile user. Not my thing. But if they can be sized down in more ways than just dimension, then that's something.

  18. #18
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,233
    Mentioned
    47 Post(s)
    Tagged
    1 Thread(s)
    I always want to question the large images even if the user is on desktop. To paraphrase someone:
    "Mobile users want to find our opening times, menu and prices. Desktop users definitely want a 1MB image of someone smiling at a salad."

    My only reservation about that is if the site eventually expands to include scripts that should not be downloaded to mobile but are.
    I like isMedia() and there's something related out there called matchMedia(). The problem with it I ran into was, because it's checking if a style applies to a div who is placed in the document, there has to be a document first. Meaning I have to wait for window.onload, which means loading any libraries like jQuery who also wait for window.onload don't notice the page is already loaded, and never run. That bugged me. If a mobile user isn't going to use anything that needs the library, I don't want them even bothering loading the library then.

  19. #19
    SitePoint Addict
    Join Date
    Mar 2010
    Location
    UK
    Posts
    281
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Regarding image resizing: I just added the Adaptive Images technique to my site and it seems to work well.

  20. #20
    SitePoint Addict
    Join Date
    Jul 2011
    Posts
    365
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Are you talking about "liquid images," where the mobile user is forced to download images way bigger than it needs to, so it can dynamically resize them, costing on processing as well, in a browser they aren't even able to resize anyway?

  21. #21
    SitePoint Addict
    Join Date
    Mar 2010
    Location
    UK
    Posts
    281
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Last edited by adh32; Sep 6, 2011 at 15:12. Reason: Link

  22. #22
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,604
    Mentioned
    24 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Stomme poes View Post
    The problem with it I ran into was, because it's checking if a style applies to a div who is placed in the document, there has to be a document first. Meaning I have to wait for window.onload
    Not if you attach your scripts immediately before the </body> tag where they belong.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  23. #23
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,233
    Mentioned
    47 Post(s)
    Tagged
    1 Thread(s)
    Not if you attach your scripts immediately before the </body> tag where they belong.
    Believe me, I tried that too. By the time the call to jQuery went out, the page was already loaded and there was no load event for the library to see.

    Where to place scripts is purely a personal decision. I hear a lot of people arguing with much fury and passion over it. Let them.

  24. #24
    SitePoint Enthusiast
    Join Date
    Jul 2011
    Posts
    34
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The way I see it is that responsive web design is simply the next step from fluid web design but i see them both as flawed . The reason why is say this is because both are to depended on the client side processing . We have extremely powerful servers on our disposal and yet we use them only to run apache . This is a crime that our user won't forget .

    IMHO we should let the back end do far more of the workload . For example we can use the back end to find out the user's resolution and serve content accordingly therefore saving bandwidth and sparing it's micro CPU from computing complex CSS and unnecessary JS .

  25. #25
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,233
    Mentioned
    47 Post(s)
    Tagged
    1 Thread(s)
    For example we can use the back end to find out the user's resolution
    how? user agents lie. a lot.

    So far as I know, client-side javascript or media queries (which are not universally supported!) are required to find the users' screen sizes/resolutions. Meaning the answer you get is 100% dependent on how retarded (or not) the users' browsers are. There are still a lot of retarded browsers out there.

    There are also many users with thuper-dooper thmart phones who don't want empty featureless mobile sites (this is getting better, but for a long time the "mobile version" was little better than the "text-only for accessibility" nonsense many sites employed) who would deliberately change their user-agent strings so they could get to the "desktop" versions. I remember back when Facebook would send the mobile version of their crappy site to my DESKTOP copy of Konqueror.

    Browser-sniffing: a bad habit, even though sometimes it's our only recourse for some things.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •