I’m new to mobile development. I’m working on my first mobile site.
It’s responsive, but I’ll say the mobile ‘version’ is waaay different than the desktop/table ‘version’. Because they are so different I assume I should make a mobile stylesheet??
I guess I would want, for example, desktop.css to load at x viewport width and mobile.css to load for mobile devices. So my questions is, what’s the best way to load the appropriate stylesheet?
Sorry if this doesn’t make too much sense, I’m brand new to mobile.
First you would need to add the viewport meta tag to tell mobile devices that you are handling the display and then you would use media queries to adjust the display when it no longer fits at a certain size width.
Read this article for a good overview of one of the best techniques to use. You cater for the design rather than the device because there are so many devices at various widths that it is impossible to make fixed width layouts for each device so you create a fluid layout that goes from large to small and then it fits all devices almost automatically.
<link rel="stylesheet" href="styles.css" media="only screen and (max-device-width: 480px)">
<link rel="stylesheet" href="styles_mobile.css" media="only screen and (min-device-width: 480px)">
Is that an acceptable thing to do? Or is it hacky? For this project, the mobile version is sooooo much different, so I figure it doesn’t make sense to server non mobile styles to mobile devices and vice versa.
Yes you can use those but remember they will be of no use to you without the viewport meta tag I mentioned in my post. You must first have the viewport meta tag before the device will behave properly otherwise it will still be minuscule and shrunk to fit.
Making a separate mobile stylesheet is generally regarded as not the way to approach this because you are still working with the same html so you will be duplicating lots of stuff if you keep them separate. The browser will download both files anyway even if it only uses one of them.
Device width will work but you are limiting yourself to a fixed number of devices and there will be loads that you miss. Max-width and min-width media queries focussed on the design and not the device are the better way to handle this and then you cater for all devices automatically if you make the page correctly to start with.
You shouldn’t think of mobile as a separate entity as its really just someone with a smaller viewport so you should make your design fit the whole range on the desktop (open and close the window) and then it will fit all devices as well.
If I close the window on my desktop browser I don’t really want all the content cut off and have to scroll to see it. I would like the content to adapt to the size of my viewport.
To answer your question yes you can use those stylesheets as long as you have the viewport meta tag in place but expect to miss quite a few devices along the way (not to mention all the various tablet sizes that abound).