mdb

Hi Folks, I'm trying to work out, or really confirm, a best practice for creating responsive pages while keeping load times down to a minimum. I've seen examples where peeps are designing primarily for desktop and adding more styles / stylesheets to cater for mobile. While it works it seems like the approach is back-to-front - there's an unecessary amount of downloading taking place on mobile devices and it goes against the principle of mobile first. I would have thought a better approach would be to load certain base styles that are incorporated for all views - font types, colours etc. then use conditionals to load specific stylesheets. Just to use the iPhone as an example... I wouldn't use these measurements in a real world scenerio, but as a proof of concept... <link rel="stylesheet" media="screen" href="baseStyles.css"> <link rel="stylesheet" media="screen and (max-width: 320px)" href="mobilePortrait.css"> <link rel="stylesheet" media="screen and (min-width: 321px)" href="mobileLandscape.css"> If you were looking at the page in portrait view, would the browser initally download mobileLandscape.css too? Or, would it only be downloaded when the phone was flipped around to landscape view? I've tested the HTML and it works fine, but because the html / css is only brief I can't tell when mobileLandscape.css is being downloaded. Is it downloaded initially but just not applied, or does the browser download it the moment the browser has a minimum width of 321px? Assuming the css is long enough to justify separate style sheets, if it is the former, and this approach is good, would you control the download of mobileLandscape.css via jQuery? I'm just more interested in minimising download / bloat and as the title says, having a best practice. Thanks