4 ms·

Does not really work. Because it just renders stuff in an iframe. But actual devices behave quite differently. For example an ipad fools the website about its p

by icode 14y ago

Does not really work. Because it just renders stuff in an iframe. But actual devices behave quite differently. For example an ipad fools the website about its pixel size. So it renders very different from how its displayed here. For example meteor.com fits nicely into my ipad and even into my android phone. But this page makes it look like it does not fit at all. Also tried other sites and had the same effect. Sites that have no magic css/js to cope with different screen sizes or devices. They work on the devices and not on this website.

rplnt 14y ago
Does it really fool the website? Because iPad has much higher pixel density than average monitor I think.
JCB_K 14y ago
That's why you set the initial scale to 1.0 when you're designing a responsive website. This disables the default iOS behaviour to scale a website to fit within the screen. <meta name="viewport" content="width=device-width; initial-scale=1.0">
- ceejayoz 14y ago
  You can also set minimum/maximum scales, or disable user-initiated scaling entirely. Very handy in some cases.
  - jodrellblank 14y ago
    One thing in favour of the idea of professional-body approved programming qualifications is that we could take them away from people who do this. Anyone who implements "no-scaling" and anyone who worked on a browser that pays attention to it. It's awful for usability, and behaviourally as obnoxious as letting the caller decide what ringtone a callee's phone should play and how loudly, or breaking the 'back' button, or having a 'you can't close your browser or power off your device while looking at this website' option.
    - ceejayoz 14y ago
      > It's awful for usability The scaling behaviour can be just as bad for usability on a site that's been well optimized already for mobile display. As an example, iOS zooms when you select a text input field. If I've already adjusted the design to work nicely at 320px wide, the zooming is unnecessary, makes the page look odd, and the user has to manually zoom back out when they dismiss the keyboard. Another problem example is where the "zoom" multi-touch events conflict with something like Google Maps - should the browser zoom the page, or the map div? Disabling zooming just makes it function more like a dedicated app - they don't zoom either. If you want to take away people's programming qualifications for making positive steps towards usability, I'm glad you're not in charge of the professional standards.
      - jodrellblank 14y ago
        If you've fixed the design to 320px that's about half the width of my phone screen and a quarter of a portrait tablet screen. Dedicated Apps are dedicated to my device, mobile web pages aren't. Mobile Safari doesn't automatically zoom because Apple were to rushed to take that feature out, it auto zooms because Apple went out of their way to add it. Same with the phone/tablet/whatever. You don't know why I'm zooming either, maybe I'm in a moving vehicle or using it at night in low brightness and can't see well, or without glasses or when tired or while holding something else and viewing at a distance or anything. As a principle, content is there to be used not to be aesthetically perfect, and content overriding the local display device is giving control to someone without the context to make useful decisions. I know apps don't zoom - haven't we been complaining about resolution independence in desktops and implementing magnifiers and ctrl-scroll and other clunky workarounds because of this for many many years?
        ceejayoz 14y ago
        > If you've fixed the design to 320px that's about half the width of my phone screen and a quarter of a portrait tablet screen. Take a look at Twitter's Bootstrap. It has a variety of different responsive design levels, not just one at 320px. Great example of how a design can fit many different devices. > Mobile Safari doesn't automatically zoom because Apple were to rushed to take that feature out, it auto zooms because Apple went out of their way to add it. Yes, and the reasons they did are good ones - many sites don't have a responsive design. You know what else Apple went out of their way to add? The ability for a web developer to disable the zooming feature! > ... maybe I'm in a moving vehicle or using it at night in low brightness and can't see well, or without glasses or when tired or while holding something else and viewing at a distance or anything ... A trade-off I'm willing to deal with. There are accessibility features in iOS and Android for most of those situations, so I'm fairly comfortable making the site work best for most people instead of the small number edge cases.
Trufa 14y ago
Maybe I understood it wrong, but, wasn't the point of this showcase to show how it should look rather than how to make it look like that in all of the devices? I think it wasn't meant to be the kind of thing you open in your different devices and look how it looks rather, this is how content should adapt, does it make any sense?
- sophiedennis 14y ago
  exactly :)
sophiedennis 14y ago
The tool is for demonstrating what's meant by "responsive design" to lay/non-web people. So it isn't trying to show how a non-responsive site without any "magic css/js" like meteor.com might display, or replicate the behaviour of any specific device or mobile browser. It's specifically NOT designed for actually testing designs - you need to do that with actual mobiles and tablets.

by icode 14y ago

rplnt 14y ago

Does it really fool the website? Because iPad has much higher pixel density than average monitor I think.

JCB_K 14y ago

That's why you set the initial scale to 1.0 when you're designing a responsive website. This disables the default iOS behaviour to scale a website to fit within the screen. <meta name="viewport" content="width=device-width; initial-scale=1.0">

ceejayoz 14y ago
You can also set minimum/maximum scales, or disable user-initiated scaling entirely. Very handy in some cases.
- jodrellblank 14y ago
  One thing in favour of the idea of professional-body approved programming qualifications is that we could take them away from people who do this. Anyone who implements "no-scaling" and anyone who worked on a browser that pays attention to it. It's awful for usability, and behaviourally as obnoxious as letting the caller decide what ringtone a callee's phone should play and how loudly, or breaking the 'back' button, or having a 'you can't close your browser or power off your device while looking at this website' option.
  - ceejayoz 14y ago
    > It's awful for usability The scaling behaviour can be just as bad for usability on a site that's been well optimized already for mobile display. As an example, iOS zooms when you select a text input field. If I've already adjusted the design to work nicely at 320px wide, the zooming is unnecessary, makes the page look odd, and the user has to manually zoom back out when they dismiss the keyboard. Another problem example is where the "zoom" multi-touch events conflict with something like Google Maps - should the browser zoom the page, or the map div? Disabling zooming just makes it function more like a dedicated app - they don't zoom either. If you want to take away people's programming qualifications for making positive steps towards usability, I'm glad you're not in charge of the professional standards.
    - jodrellblank 14y ago
      If you've fixed the design to 320px that's about half the width of my phone screen and a quarter of a portrait tablet screen. Dedicated Apps are dedicated to my device, mobile web pages aren't. Mobile Safari doesn't automatically zoom because Apple were to rushed to take that feature out, it auto zooms because Apple went out of their way to add it. Same with the phone/tablet/whatever. You don't know why I'm zooming either, maybe I'm in a moving vehicle or using it at night in low brightness and can't see well, or without glasses or when tired or while holding something else and viewing at a distance or anything. As a principle, content is there to be used not to be aesthetically perfect, and content overriding the local display device is giving control to someone without the context to make useful decisions. I know apps don't zoom - haven't we been complaining about resolution independence in desktops and implementing magnifiers and ctrl-scroll and other clunky workarounds because of this for many many years?
      - ceejayoz 14y ago
        > If you've fixed the design to 320px that's about half the width of my phone screen and a quarter of a portrait tablet screen. Take a look at Twitter's Bootstrap. It has a variety of different responsive design levels, not just one at 320px. Great example of how a design can fit many different devices. > Mobile Safari doesn't automatically zoom because Apple were to rushed to take that feature out, it auto zooms because Apple went out of their way to add it. Yes, and the reasons they did are good ones - many sites don't have a responsive design. You know what else Apple went out of their way to add? The ability for a web developer to disable the zooming feature! > ... maybe I'm in a moving vehicle or using it at night in low brightness and can't see well, or without glasses or when tired or while holding something else and viewing at a distance or anything ... A trade-off I'm willing to deal with. There are accessibility features in iOS and Android for most of those situations, so I'm fairly comfortable making the site work best for most people instead of the small number edge cases.

Trufa 14y ago

Maybe I understood it wrong, but, wasn't the point of this showcase to show how it should look rather than how to make it look like that in all of the devices? I think it wasn't meant to be the kind of thing you open in your different devices and look how it looks rather, this is how content should adapt, does it make any sense?

sophiedennis 14y ago
exactly :)

sophiedennis 14y ago

The tool is for demonstrating what's meant by "responsive design" to lay/non-web people. So it isn't trying to show how a non-responsive site without any "magic css/js" like meteor.com might display, or replicate the behaviour of any specific device or mobile browser. It's specifically NOT designed for actually testing designs - you need to do that with actual mobiles and tablets.