Eventually I tracked down the issue to Bootstrap’s own CSS - they applied to fix Win 8 apps in snapped mode, but it completely broke Bootstrap pages on Windows Phone. As it turns out, the bug applies actual physical pixels when using “device-width” in CSS. The issue came out of nowhere and this blog on Responsive Design in IE10 on Windows Phone 8 helped me a lot. There’s also an interesting issue with setting the IE10 viewport in CSS (as is per recommendation) rather than using the meta tag. There’s a very large and very incomplete List of displays by pixel density on Wikipedia if you wan to have a look. On the other side are tablets where many have a pixel ratio of 1 or 2 in the case of retina displays, but for all intents and purposes tablets usually hit the desktop size mark in landscape and only get to the tablet-specific styles in portrait. This is where the all-time favorite meta tag comes in setting the viewport to match the device width (which removes that annoying scrolling) but limits your space further, something in the range of 320 – 460 of them virtual pixels! Remember the utility class table from Bootstrap I showed last time? I hope it does it make sense now why phones end up in their respective visibility class even in landscape. Those dimensions, usually wider than the screen, are still small enough to squish a non-responsive page and big enough to force the user to scroll. The term ‘CSS pixels’ also pops up here and there, but basically the browser will almost always scale the pixels down (so 1 pixel will actually be multiple physical ones), which in term affects the browser viewport dimensions. Instead, as you can read on CSS pixel ratios (or, why all mobile sites are 320 pixels), pixels we would use for web development are now relative. It's not a bad thing, mind you – most phones these days have such high dpi that it will be impossible to read and interact normally with pages where everything is shrunk to the native resolution. One of the most important things to consider is that many (if not all) smartphone browsers will 'lie' about their dimensions. Some “good to know about” extras – like the browser viewport. There’s an good coverage on the theory behind this and also a good amount of examples! Speaking of which, you can also check out our samples for Responsive Web Design Custom Mode Template Switching and Responsive Web Design Mode of the Grid with Twitter Bootstrap Once you have technology and design considerations in check, I’d like to turn your attention to the now available Documentation for the igGrid Responsive Web Design (RWD) Mode. For example this on UX of Responsive Web Design you should definitely check out! There’s a whole lot more on UX, Design and usability and I highly recommend keeping an eye on those. Our Services or as of recently D3 (from Discover – Design – Develop) have a solid expertise in the field and they share some of it in their blogs. So in case you missed it - here’s a nice summary on Building responsive web design using CSS3 Media Queries!Īnd because creating a Responsive app is all in the name of providing users with a better experience I figured some UX tips and food for thought are in order. Now these are more of honorary mentions as the most basic stuff were already covered elsewhere, but hey, it doesn’t hurt to have them on a speed dial. So now, with 13.1 out and even accompanied by a service release, without further due, let’s dig into the technical stuff! I’ll start with some interesting design considerations and even potential pitfalls related with Responsive Web Design and then have some specific Grid tips. There were also plenty of things that can’t fit in a single blog, plus the fact that the actual feature was not yet released so there wasn’t too much of demo material to see. If you do want to use units other than em, you can always modify the default Media Queries on the Get Started page.I really hope I got you excited about the Responsive Web Design mode for the Ignite UI Grids last time – as it is the kind of an unique feature that truly makes this jQuery control stand out! As previously explained it’s not exactly a simple thing to make a grid responsive, but our team made serious considerations on how to best approach this and I do believe they’ve pretty much nailed it and this will turn out to be very useful addition. Check out this article by Brad Frost for some background information on using relative units within Media Queries. This was a conscious decision since it allows the Media Queries to respond appropriately when people zoom the webpage. You may have noticed that we use em for our default CSS Media Query widths instead of px.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |