CSS and JS Libraries to Mobile Optimise websites fast.

Hi,

I'm wondering if there is a JS library or script or CSS library that allows you to mobile optimise any HTML5 / CSS website instantly or very fast.

It can be very time consuming going in and adding a hundred media queries.

Regards,
Chris

 

Hello Chris,
I've never heard any. Should there be one of this kind then it should be done server side I guess.

 

Why does this have to be done server side? JavaScript is quite capable of something this simple.

 

Umm, I'm not sure.
Consider a webpage which HTML doesn't need re-structuring but still needs some CSS rules to make its images responsive.

It's more clean+ efficient (for you or PHP) to directly write CSS rule in head:

img{
     display:block;
     max-width:100%;
     height: auto;
}

Code (CSS):

than for including a client-side javascript to either:

• append that CSS rule above
  
• or to inject that CSS

to body. Right?

 

Well you can write to the head as well wth client side Javascript like

var mobileStyle = document.createElement(‘style’);

document.head.appendChild(mobileStyle);

mobileStyle.innerHTML = `
img{
display:block;
max-width:100%;
height: auto;`


This will append the style tag to the bottom of the head which is ideal so it can overwrite relevant styles.

If designing my own website from scratch than I’ll make it as mobile friendly as possible but someone else’s website that needs a quick mobile friendly hack - Something like this would be useful.

If this doesn’t exist than I’ll create my own script and css library for this.

 

If you need "hundreds of media queries" there is something HORRIFYINGLY WRONG with either the design, or the methodology used to code it. Responsive layout isn't rocket science, and just as the vast majority of real websites have no need of more than 48k of CSS in one file per media target (screen, print, speech, etc) only around 4k of that is likely to need to be your media queries.

...and for TBL's sake, throwing JavaScript at things is NOT the bloody answer!

Again, know all those things I keep talking about that people keep making lame excuses not to do? Yeah, that.

Don't do those things, you won't have these types of issues.

In all likelihood if you are having the need of "thousands of media queries" you likely have five to ten times the markup needed, and ten to fifty times the CSS needed to do the job. As I've said hundreds of times the past decade, if you think you need a framework to make things simpler or easier, you're probably just doing it all wrong in the first place... this is because libraries, frameworks, and their kin/kine don't make a single thing easier no matter how many know-nothings blindly parrot the wild unfounded claims to the contrary.

I'd have to see the site(s) in question though to say how to fix whatever mess you've gotten yourself into.