Page 2 of 2 FirstFirst 12
Results 11 to 20 of 20
  1. #11
    richimgd
    richimgd is offline
    GDF Regular richimgd's Avatar
    Join Date
    Jan 2011
    Location
    Leeds
    Posts
    258
    Thanks
    17
    Thanked 16 Times in 12 Posts
    I was just proving a point that it is possible to change the layout simply by resizing the browser window which can trigger less than ideal looking results. If I can do that deliberately, then someone else could arrive on the website at that window size and see the layout in that way and just assume the website is supposed to look like that. To me this is proof that in that case making the website respond to browser width is actually at the cost of the design its self.

    How do you define responsive design? To me it is a website which responds to the type of device it is viewed on - rather than simply the width of the browser window as I think there is a big difference.
    So the same website can be displayed to best make use of the type of experience you get from that device.

    The main point I was making which of course is only my opinion and is only really just to balance the argument since everyone seems to only see the benefits of 'responsive design': I think making it possible to view a mobile layout on desktop is perhaps taking things too far. Since a desktop is capable of much more than this. The way I would prevent this from happening from a technical point of view (as a starting point at least) is focus more on what a device (desktop, tablet or mobile etc) would be capable of displaying by using standard media query max-device-width / min-device-width properties rather than max-width / min-width since this provides the actual maximum width the device can display. I.e on my desktop it would be 1920px wide which this fact alone means it doesn't have to respond to the point that the layout resembles one found on a mobile optimised website. With this information I could tailor the desktop layout to better match the screen area of a desktop, saving the more mobile friendly layouts for the smaller devices i.e mobiles. Having tighter control in this way would help prevent random gaps such as on the Time magazine website.

    You're right that there becomes a bit of a grey area between tablet/ipad since the resolution of an ipad in landscape is pretty much the entry level desktop resolution. A simple media query could make the website effectively resize its self for iPad quite nicely. Again, device-width can be used for this since an ipad portrait is 768px. Javascript / user agent sniffing could be used to fill in any gaps but I think device-width alone is a good starting point.

    I have lots to read up on this from a technical point of view, so have probably missed quite a lot of things out but it was really just the concept of what responsive design is, to me anyway. I am not saying I am right and don't wish to cause an argument with anyone, only a good debate.

  2. #12
    Edge
    Edge is offline
    GDF Regular
    Join Date
    Oct 2011
    Location
    Liverpool
    Posts
    317
    Thanks
    9
    Thanked 41 Times in 33 Posts
    Quote Originally Posted by richimgd View Post
    I think making it possible to view a mobile layout on desktop is perhaps taking things too far. Since a desktop is capable of much more than this. The way I would prevent this from happening from a technical point of view (as a starting point at least) is focus more on what a device (desktop, tablet or mobile etc) would be capable of displaying by using standard media query max-device-width / min-device-width properties
    We need to stop talking in terms of mobile versions and desktop versions. the market is so awash with devices of different sizes it's no longer useful to talk about mobile and desktop. We have content and that's it. When you increase window size and it starts to look naff you use a media queries break point to change layout. Continue to increase window size and as layout starts to look naff again use a media queries break point again to optimise the layout. So in summary there is no mobile version or desktop version - just scalable content which uses media queries to respond to screen size, which is what you seem to be saying anyway - just cut out the talk of mobile and desktop versions as that's not what responsive design aims to produce.

  3. #13
    richimgd
    richimgd is offline
    GDF Regular richimgd's Avatar
    Join Date
    Jan 2011
    Location
    Leeds
    Posts
    258
    Thanks
    17
    Thanked 16 Times in 12 Posts
    My view is theres a difference between a 4" hand held touchscreen phone and a desktop computer with a 24" widescreen monitor since its a different type of user experience. I wouldn't say the boundaries are as blurred as you suggest. But I agree with you that the content is the important thing and websites will be viewed on all kinds of devices with varying screen shapes and sizes so being able to respond to this is crucial.

    So, I agree responsive is the right approach going forward - but I am talking about responsive to device type - not specifically browser width. For me being able to be smarter with responsive design and knowing that a user is on a device with a screen big enough to give them the best possible experience for that device is surely a good thing?

    Its probably easier to show another 2 examples, for and against what i am talking about:

    1. Here is the Currys website showing responsive by browser width. You can see here on a desktop computer the website changes from 3 drastically different layouts. If you view this site on a desktop / widescreen monitor you can see the content makes use of the available screen space pretty well. It actually responds to fit both a big and a smaller desktop size screen - even though it is a sudden jump. Reducing your browser window smaller reveals what I would call a tablet style layout (although this works ok on desktop, it just happens to lend its self to a tablet pretty well). The main thing for me is if you reduce the width of the browser even further is it shows something clearly resembling a mobile layout. The top nav (or side nav as per the 'tablet' layout) is moved all the way to the bottom of the page - a design choice you would have to make on mobile because of the available space - but on a desktop? This is an example of a desktop site taking a hit on usability as a result of this type of responsive design. Yes you can view the webiste on a larger screen - but a lot of people probably dont realise you can do this since the type of responsive design is so good at making the website appear that it is supposed to look like because of the content fitting the window.

    2. Here is the 2nd example from Argos with their newly relaunched website. I will assume again you are looking at it on desktop as its easier to talk though it. At first it looks like a standard desktop website, but in actual fact it is a responsive website. The website knows you are viewing it on a device capable of displaying content suited to the screen size as it knows this information - so it displays content 'without compromise'. If you click on any page on the site and view it on mobile or tablet, the exact same link will render differently (or respond) to the devices screen dimensions. This is what I would call a smarter responsive site since it responds to device type, not simply browser width - although concept of responsive design is similar. I just think targeting device type more rather than simply browser width allows greater opportunity to improve experience without compromising the design and accessibility of a website.
    Last edited by richimgd; 11-07-2012 at 12:34 PM.

  4. #14
    richimgd
    richimgd is offline
    GDF Regular richimgd's Avatar
    Join Date
    Jan 2011
    Location
    Leeds
    Posts
    258
    Thanks
    17
    Thanked 16 Times in 12 Posts
    Edit - ok that Argos example probably wasn't the best one as I realised it actually has some kind of UA / device detection going on rather than media queries. I'll look for another example ;)
    Last edited by richimgd; 11-07-2012 at 12:55 PM.

  5. #15
    Edge
    Edge is offline
    GDF Regular
    Join Date
    Oct 2011
    Location
    Liverpool
    Posts
    317
    Thanks
    9
    Thanked 41 Times in 33 Posts
    To be honest there's little point trying to do device sniffing - what you going to sniff for? Which device? There's tons of them and increasing all the time. I'm sorry but the scenario of people making their windows small on a large screen is not something we have to worry about - as you say 'responsive design is so good at making the website appear that it is supposed to look like because of the content fitting the window' so why worry about it?

  6. #16
    chris_17
    chris_17 is offline
    GDF Regular chris_17's Avatar
    Join Date
    Jun 2009
    Location
    Newcastle
    Posts
    269
    Thanks
    0
    Thanked 15 Times in 11 Posts
    windows small on a large screen is not something we have to worry about
    Not necessarily, think about snapping the window to the edge of the screen on Windows or lining up two sites on the same screen. Rather than having to scroll across instead the site has adapted its design to the constraints of the viewport - how this is bad is beyond me.
    Designer & Front-End Developer from Newcastle-Upon-Tyne
    chrisborrowdale.co.uk
    Follow me on Twitter

  7. #17
    Edge
    Edge is offline
    GDF Regular
    Join Date
    Oct 2011
    Location
    Liverpool
    Posts
    317
    Thanks
    9
    Thanked 41 Times in 33 Posts
    Quote Originally Posted by chris_17 View Post
    Not necessarily, think about snapping the window to the edge of the screen on Windows or lining up two sites on the same screen. Rather than having to scroll across instead the site has adapted its design to the constraints of the viewport - how this is bad is beyond me.
    But a responsive design will then serve up a nice layout in that small window - so what's the problem?

  8. #18
    richimgd
    richimgd is offline
    GDF Regular richimgd's Avatar
    Join Date
    Jan 2011
    Location
    Leeds
    Posts
    258
    Thanks
    17
    Thanked 16 Times in 12 Posts
    Quote Originally Posted by chris_17 View Post
    Not necessarily, think about snapping the window to the edge of the screen on Windows or lining up two sites on the same screen. Rather than having to scroll across instead the site has adapted its design to the constraints of the viewport - how this is bad is beyond me.
    I'm only trying to look at it from all angles. To me I see it as the potential risk of making it possible for users to unknowingly manipulate a website to the point that usability takes a hit - e.g on the Currys website where the navigation moves to the bottom of the screen. I take the point that this can be a good thing in cases where your multi tasking and would otherwise need to horizontally scroll to view content when you are reading content on a website with a reduced size browser window.

    Again - I'm only trying to challenge what responsive really means and this is helping me have more of an open approach to how I apply it to current and future work.

  9. #19
    Edge
    Edge is offline
    GDF Regular
    Join Date
    Oct 2011
    Location
    Liverpool
    Posts
    317
    Thanks
    9
    Thanked 41 Times in 33 Posts
    OK - I'll let you have the last word but technically to do that you'll have to reply to this post

  10. #20
    richimgd
    richimgd is offline
    GDF Regular richimgd's Avatar
    Join Date
    Jan 2011
    Location
    Leeds
    Posts
    258
    Thanks
    17
    Thanked 16 Times in 12 Posts
    Ah ha. Cheers ;)

Page 2 of 2 FirstFirst 12

Similar Threads

  1. Is there a point to responsive web site designs?
    By LovesPrint in forum Website Design Forum:
    Replies: 18
    Last Post: 07-30-2013, 07:03 AM
  2. Responsive Design
    By bungle1977 in forum Website Design Forum:
    Replies: 3
    Last Post: 06-25-2013, 11:53 AM
  3. Designing a responsive website but...
    By bungle1977 in forum Website Design Forum:
    Replies: 14
    Last Post: 12-26-2012, 10:16 PM

Posting Permissions

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