I have a responsive wordpress site.
In this site I have two CSS files.
style.css - for desktops
style-400 - for mobile devices
Now no matter what device used (mobile or desktop), it loads both of these CSS files. (I think so because Google PageSpeed Insights shows both of them loaded)
What I want to do is (one of the following):
Load style.css for desktops only, load style-400.css for mobile only.
or
Combine both CSS to one CSS (not sure if this is a good approach in terms of mobile page loading speed. Please advise)
To do it that way would require some form of device sniffing, which is not reliable. Another option would be to combine the two style sheets into one and divide it with a media query.
Start with the default css, then add a query at a sensible width value. Copy and past all the mobile css into the brackets of the query.
Default CSS here
@media screen and (max-width: 500px) {
Mobile CSS goes here
}
Thinking about this further, I have not seen the css. If it already had media queries in the mobile section, it may cause confusion. That is possible as you say it is a responsive site. Having said that, if it truly is responsive, you should not require separate mobile css.
What I said the first time is maybe not a good idea, because of what I said the second time. The main style sheet has no media queries, but the mobile one has lots. My preference is to combine everything into one sheet, but it’s difficult to see the best way without creating too much redundant or over-ridden/conflicting code, those Wordpress sheets are kind of big a lot to take in. Perhaps doing it the other way around, putting the main css in a min-width query would do it, since that has no queries of its own, but I would not like to say. I’m not used to working with Wordpress sheets.
Thanks for the reply. I posted the same question in another webmaster forum and a member suggested that I can add following. What do you think?
<?php
if(stristr($_SERVER['HTTP_USER_AGENT'], "Mobile")){ // if mobile browser
?>
<link rel="stylesheet" href="style-400.css" type="text/css" />
<?php
}
else { // desktop browser
?>
<link rel="stylesheet" href="style.css" type="text/css" />
<?php
}
?>
That is one way to do it, by device sniffing. Though if you want to be purist about it, RWD done right should do away with such things as device sniffing and multiple style sheets. It depends on what you are happy with, the end result you want and just how much the desktop and mobile views should differ. You would think that just the style-400.css alone would do the job with all those queries.
As SamA74 said above it is bad practice to do browser sniffing because it is unreliable (as browsers lie) and for the simple fact that not all mobile devices are the same size anyway and they should have media queries based on their viewport width instead. Small mobile tablets can be quite wide and need almost a desktop display.
It also means that you miss out on small desktops/laptops that may need a responsive site or users who resize their browsers window smaller to get more screen room. For instance a mini ipad is not a mobile device but its not a desktop or laptop either.
You can cater for al these in one css file by keeping common styles outside the media queries and then using media queries to supply alternative layouts at various widths that your design requires.
The best approach is therefore device agnostic and just concentrates on changing the layout based on the width of the viewport. If you close your desktop browser window smaller and the design doesn’t look good then throw in a media query and make it better.
However, looking at your files it seems you have made virtually two separate sites so you may already be too far down this road to turn back and may have to stick with your current approach unless you want to start afresh.
So basically what you are saying is its better to keep this as it is because trying to change it means more work, more potential problems??
EDIT: I found this Firebug extension. https://addons.mozilla.org/en-us/firefox/addon/css-usage/
Lets say I manage to scan almost all of my pages and compile the CSS that’s only used.
I will be doing this scan from my PC Firefox browser, so will it detect CSS rules that applies ONLY for mobile? or will it show Mobile CSS rules as unused because Im using Desktop for scan?
If it does detect them right, then I guess exporting those rules to One CSS and loading just that will make my site responsive?
I’d put the css all in the same file and tailor the media queries to suit. Of course that could take some time to do properly as you presently have two separate css files that seem to be almost duplicates except that the mobile version is a 1000 lines longer and contains media queries for desktops!!!
I’m more than a little confused by this question as it has little to do with responsiveness as such.
You make the site responsive by tailoring the css to match the width of the viewing area not by finding out what rules are being applied.
I think we need some background information to your problem. Where did you get the two css files you are using from? Are they your own files or have you copied then from somewhere or got them with a theme of sorts?
It certainly looks like you shouldn’t be using both css files and indeed your mobile version contains rules for desktops so browser sniffing and giving that large file to mobiles would be nonsense.
Do you have a live link to the page so we can see what we are talking about?
[quote=“PaulOB, post:11, topic:196989, full:true”]
I’m more than a little confused by this question as it has little to do with responsiveness as such.
You make the site responsive by tailoring the css to match the width of the viewing area not by finding out what rules are being applied.[/quote]
After seeing this reply I guess I totally misunderstood how this works in the first place. I must say that Im not a developer. You could say Im a beginner trying to learn some new things.
So putting media queries is how you make a site responsive?
That means if I were to copy all content from style-400.css to style.css, then Scan the page/s using above Firebug extension, that should remove the unused CSS rules. Then if I load just that file, it should work OK for both Desktop and Mobile?
I didn’t develop this site. I hired a company to do this for me. These two files came with the theme they developed for me.
Its been few months so I thought maybe I could test first and try to improve things myself. My goals here are to reduce the requests as much as I can, decrease the page size which in return should affect the page load speed.
[quote=“PaulOB, post:11, topic:196989, full:true”]
Do you have a live link to the page so we can see what we are talking about?[/quote]
Sorry. I should have posted this in the first place:
AdSpot.lk
I wouldn’t worry much about removing CSS rules. Unless the files are extremely large it won’t make much difference and unless you test every page you might mistakenly break something.
IMHO if you want to make the greatest savings optimizing images and caching are better places to start.
I’ve been having a look at the site, it has a few style sheets. I believe that the http://adspot.lk/wp-content/themes/maya-classifieds/style.css sheet is a non-responsive style theme and that http://adspot.lk/wp-content/themes/maya-classifieds/style-400-100000.css is a responsive version of the same theme. What this means is that you can do away with the non-responsive version and remove media="only screen and (max-width: 960px) from the link to the responsive one. Disclaimer! I don’t want to be responsible for screwing up your site, I could be wrong. Please test it thoroughly off-line first on copies. I only tried this on a local copy of the home page.
There is another css: http://adspot.lk/includes/css/custom_css.150623.css inbetween the other two sheets, I not sure what that one does, commenting it out did not appear to affect the home page. Then there are a couple more css for IE (I can guess what they are for). Then there are two <style> tags in the head with more stuff.
It may be possible (leaving alone the IE ones) to condense it all to one css file.
But as mentioned, don’t be hasty, test it out on local copies first, until you are sure.
No, most of those css cleaners simply look at the html elements and make sure there is a target for the rule. It does not look at every screen size and decide whether a rule is in use or not. I would avoid css cleaners unless you are an expert as they will likely cause more problems than they fix.
As Mittineague said above optiising images (or even removing one image) will likely save you more bytes than any css optimisation.
See also SamA74 comments above as it looks like you already have a responsive template anyway and no need for the other one.
I always do these kinds of things in a test site first. Just to be more careful I hosted it on a totally different host, server and domain, so even by a mistake I wouldn’t do anything harmful.
So I did what you said and loaded only the style-400.
“Most” of the things seem OK. There are some texts, icons, button out of align. (please check following URLs)
My test site is:
adspottest.cf
Please compare these URLs.
Notice Confirm Pass field and content under “Why You Should Register”
I just look for css class in the certain page source code
Search for that in style.css
Copy that CSS rule to style-400.css?
EDIT: In style-400, before those media queries (under the heading “Responsive Styles”), I replaced all contents with style.css content. Now it seems above CSS problems are OK too.
[quote=“SamA74, post:14, topic:196989, full:true”]There is another css: http://adspot.lk/includes/css/custom_css.150623.css inbetween the other two sheets, I not sure what that one does, commenting it out did not appear to affect the home page. Then there are a couple more css for IE (I can guess what they are for). Then there are two <style> tags in the head with more stuff.
It may be possible (leaving alone the IE ones) to condense it all to one css file.
But as mentioned, don’t be hasty, test it out on local copies first, until you are sure.[/quote]
