#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2017
    Posts
    90
    Rep Power
    2

    Best approach for mobile responsive


    What would be the best approach for a site using XHTML 1.0 Transitional to become mobile responsive ? What would be the options!? What CSS rules to implement ?
    Thank you
  2. #2
  3. Maddening Moderator
    Devshed Supreme Being (6500+ posts)

    Join Date
    Mar 2007
    Location
    Washington, USA
    Posts
    16,549
    Rep Power
    9645
    Stop using XHTML and switch to HTML 5, for one. I'm not sure you have to but it would be a good idea to do now, since you're considering redoing some of the site anyways.
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2017
    Posts
    90
    Rep Power
    2
    I have thought about that on the long-term. It will take a lot of time replacing all the code to match html5 and also be valid. Table classes and stuff like that. Was thinking maybe there are several ways to do this before switching to html5.
  6. #4
  7. Maddening Moderator
    Devshed Supreme Being (6500+ posts)

    Join Date
    Mar 2007
    Location
    Washington, USA
    Posts
    16,549
    Rep Power
    9645
    Thing is, some of the nicest features are for HTML 5 and "won't" (shouldn't) work in XHTML. Won't be valid, at least. With that said, technically most responsive stuff is CSS - media queries and such - and that doesn't depend on the version of HTML, so you could stay with XHTML a while longer and do the responsiveness first.

    As for what you need to do, well that's highly dependent on the site itself and what sort of responsiveness you want to get.
  8. #5
  9. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,119
    Rep Power
    4308
    You've asked a very broad question. I recommend a mobile-first approach, by which I mean you set base styles that work for a 320px wide screen and then you use media queries to give different styles for larger screens (viewports). I recommend using a separate stylesheet for large viewports.

    Something like this, but if you don't care about IE8, then you can remove the 7th line (the last <link>). The second <meta> tells the browser that the page has responsive styles.
    Code:
    <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>the page title goes here</title>
    <link rel="stylesheet" href="assets/css/mobile.css" media="all" />
    <link rel="stylesheet" href="assets/css/desktop.css" media="only all and (min-width:740px)" />
    <!--[if (lt IE 9)&(!IEMobile)]><link rel=stylesheet href="assets/css/desktop.css"/><![endif]-->
    </head>
    I don't like to use them myself, but you might find a grid system helpful. Three of the more popular ones are Bootstrap, Foundation, and Skeleton.

    A word of advice: do not use a <select> element for mobile navigation. Being easy to implement and easy for people to use are two very different objectives.
    Spreading knowledge, one newbie at a time.

    Learn CSS. | PHP includes | HTML Validator | CSS validator

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  10. #6
  11. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2016
    Location
    Lakewood, WA
    Posts
    236
    Rep Power
    64
    I use @media queries and some Bootstrap tricks - and test, test, test... But I'm really not an expert. I'm probably *not* doing things I should, and doing things I *shouldn't*, but so far my stuff looks good on mobile.

    Wrap your head around Viewports and some of the tricks you can use with them, there are a *$HITTON* of tutorials.

    Also, I don't know that this is a good approach, but I've let go of older browsers. I just don't *personally* think it's worth my time to target everything.

    But having said that, know your audience. If you're targeting old farts that live in a cave, you may need to consider older browsers and platforms.

    One reason I mention Bootstrap is that it specifically has mobile in mind. There are other "frameworks" that do some of the same things, sometimes it comes down to coding preferences.

    Kravvitz says set base styles that work for a 320px wide screen. I'm not going to contradict the expert, but while I *accommodate* 320, I hope people are browsing at a slightly wider screen.

    And HTML5.

    [EDIT]

    This isn't a CSS thing (strictly speaking), but fonts. Choose fonts wisely.
    Last edited by Arty Zifferelli; January 21st, 2018 at 01:41 AM.
  12. #7
  13. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,119
    Rep Power
    4308
    Originally Posted by Arty Zifferelli
    Also, I don't know that this is a good approach, but I've let go of older browsers. I just don't *personally* think it's worth my time to target everything.

    But having said that, know your audience. If you're targeting old farts that live in a cave, you may need to consider older browsers and platforms.
    Knowing your audience is very good advice. There is no such thing as a one-size-fits-all web site (there are a few common types though). Different sites will not all have the same design requirements. One important example is images, on some sites their main purpose is to invoke positive feelings while others are to show specific things, like products for sale.

    I should explain that when I mention IE8, I in no way mean it gets full support. I mean it gets D grade support. On second thought, there's exceedingly little point in encouraging someone inexperienced with CSS to support IE versions before 9, especially since most have upgraded to 11 or switched to Google Chrome or Firefox.

    Originally Posted by Arty Zifferelli
    Kravvitz says set base styles that work for a 320px wide screen. I'm not going to contradict the expert, but while I *accommodate* 320, I hope people are browsing at a slightly wider screen.
    320px wide screens (in CSS pixels, not screen pixels) are now less common than 360px and 375px wide screens. However, since horizontal scrolling is generally unexpected by users, it's best to take the time to adapt the content to make such scrolling unnecessary. (The major exception is content sliders, which should have arrows or something to indicate more content is offscreen.)

    The difference between CSS pixels and screen pixels is that a lot of phones have high pixel densities (pixels per square inch of the screen), so they have between 2 and 4 times the screen pixels as old phones, like an iPhone 3G. To keep text and other content large enough without having to zoom all the time, it's scaled up to an appropriate size.
    Last edited by Kravvitz; January 21st, 2018 at 06:45 PM.
  14. #8
  15. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2016
    Location
    Lakewood, WA
    Posts
    236
    Rep Power
    64
    My biggest "overall" headache is responsive text. Not body text, which is not a problem in general. But responsive text in responsive containers. There are several approaches, and sometimes I use them all. But more often than not I find myself transfixed on a particular element adjusting different things at different screen sizes and never being satisfied.
  16. #9
  17. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2017
    Posts
    90
    Rep Power
    2
    Hmm, lots of good advices. Thank you.
  18. #10
  19. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2018
    Location
    UK
    Posts
    1
    Rep Power
    0
    Good evening,

    I'd definitely use Bootstrap as a starting point, watch lots of beginner tutorials and practice creating codes. I knew about CSS but always shyed away from learning Bootstrap as it looked so complicated but just started reading looking at tutorials and now I am completely comfortable.

    Kind regards,
    BSD

IMN logo majestic logo threadwatch logo seochat tools logo