1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

CSS and JS Libraries to Mobile Optimise websites fast.

Discussion in 'HTML & Website Design' started by Web_Dev_Chris, May 2, 2020.

  1. #1
    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.
    SEMrush
    Regards,
    Chris
     
    Web_Dev_Chris, May 2, 2020 IP
    SEMrush
  2. hdewantara

    hdewantara Well-Known Member

    Messages:
    486
    Likes Received:
    45
    Best Answers:
    22
    Trophy Points:
    130
    #2
    Hello Chris,
    I've never heard any. Should there be one of this kind then it should be done server side I guess.
     
    hdewantara, May 3, 2020 IP
  3. Web_Dev_Chris

    Web_Dev_Chris Active Member

    Messages:
    218
    Likes Received:
    12
    Best Answers:
    1
    Trophy Points:
    80
    #3
    Why does this have to be done server side? JavaScript is quite capable of something this simple.
     
    Web_Dev_Chris, May 3, 2020 IP
  4. hdewantara

    hdewantara Well-Known Member

    Messages:
    486
    Likes Received:
    45
    Best Answers:
    22
    Trophy Points:
    130
    #4
    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?
     
    hdewantara, May 3, 2020 IP
  5. Web_Dev_Chris

    Web_Dev_Chris Active Member

    Messages:
    218
    Likes Received:
    12
    Best Answers:
    1
    Trophy Points:
    80
    #5
    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.
     
    Web_Dev_Chris, May 3, 2020 IP
  6. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,327
    Likes Received:
    1,821
    Best Answers:
    244
    Trophy Points:
    515
    #6
    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.
     
    deathshadow, May 6, 2020 IP