Code for instructing website to use device width instead of fixed?

Discussion in 'HTML & Website Design' started by adsjoint, Oct 27, 2015.

  1. #1
    Is there a simple HTML code that one can add to webpage to make it responsive to device width and ignore the fixed width with which it was created with?
     
    adsjoint, Oct 27, 2015 IP
  2. hdewantara

    hdewantara Well-Known Member

    Messages:
    538
    Likes Received:
    47
    Best Answers:
    25
    Trophy Points:
    155
    #2
    Hi Adsjoint.
    Have an example page?
     
    hdewantara, Oct 27, 2015 IP
  3. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #3
    Read, reread and thoroughly ingest this thread by @deathshadow. Making your site responsive, semantic and accessible is easy if you start out right. It's damned near impossible if you don't.

    cheers,

    gary
     
    kk5st, Oct 27, 2015 IP
  4. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #4
    90%+ of the time you have a fixed width (aka "crappy litttle stripe") layout it is an uphill battle to convert it to responsive without throwing the ENTIRE codebase away. Typically fixed width layouts rely on concepts that to be frank, have no business on a website to begin with -- and a lot of the tools that are SUPPOSED to make doing responsive easier like bootstrap in fact go out and make it HARDER to do, so avoid those as well.

    There is the HAIR of chance it's not that bad if the site was at least built with semantic markup, separation of presentation from content, and some other good practices -- but as a rule people using such good practices do NOT design fixed with layouts in the first place at the very least building elastic and semi-fluid; the stepping-stones that really should be in place BEFORE even thinking about making it responsive.

    Could we see the site in question? It would let us better dial in if you need to toss it and start over from scratch, or if anything can be salvaged from it.
     
    deathshadow, Oct 27, 2015 IP
  5. adsjoint

    adsjoint Peon

    Messages:
    19
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #5
    First of all, Thanks everyone for sparing time to reply.
    The one page i have in mind is home page of http://adsjoint.com
    I just want to keep same layout if possible and just make it responsive as easily as possible. Not sure if cutting pasting it in blue griffon and saving that page will make it responsive or not?
     
    adsjoint, Oct 28, 2015 IP
  6. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #6
    Well that page has a LOT of issues, again missing the stepping stones to accessibility that should be there before even thinking about making it responsive. All the fonts are in a uselessly undersized pixel measurement, the lack of numbered headings or semantics means there's no logical document structure for when style is unused or does not apply, but worst of all, it's tables for layout -- something that makes going responsive VERY hard to do.

    Even the order of things is problematic -- the advert before what should be the heading for example would make little if any sense. (admittedly, there's a reason I'm against adverts on websites in the first place).

    Things get worse as it was designed without a doctype so IE 6 through 8 will be in "quirks mode" meaning IE doesn't render the page the same as any other browser, yet it has that x-ua nonsense; a modern concept you shouldn't even need. The keywords meta is redundant overstuffed nonsense guaranteed to get you slapped clear off the search engines for abuse, You've basically got HTML 3.2 yet you also have the garbage broken version of the viewport meta that breaks zooming on mobile (WHY do people do this?!?). Title tag's redundancies are also likely to get you slapped down by search, then there's the endless META that not one legitimate UA cares about. You've got completely invalid values in your robots META (there is no such thing as "follow" or "index", to say those, don't say anything!). It's built with an outdated character encoding, there's static style in the markup, attributes like bgcolor, text, background, leftmargin, topmargin, cellpadding, border, etc, etc, etc, that have no business on any website written after 1997.

    ... and that's before talking pointless use of paragraph tags on non-paragraph content, absolute URI's for no good reason, and a host of other "code bloat' that has little if any business on a website... or that there are multiple instances of title and the same meta being repeated. You even start out declaring utf-8, but then oops, change your mind ... which is it?

    These are the reasons WYSIWYG's are nube-bait.

    Which is how it's sucking down 34k of markup to deliver 5k of plaintext; quite easily two or three times the code that should be present if the site were developed properly.

    Hence I would suggest recoding that entire page from scratch, no automated tool could even come CLOSE to making sense of that from an accessibility viewpoint. Even if you made it "look" responsive with trickery, the underlying issues would still result in search engines AND visitors flipping you the bird.

    I'd also suggest swinging an axe at the endless pointless redundancies on that page -- how many times do you need to list the same thing over and over and over? (lemme guess, some SEO-tard told you to do that?)

    Also, no clue what "blue griffon" is, but generally speaking no automated tool is going to be the answer here. Best tool would be the one between someone's ears.

    *GOOGLES IT* -- Oh look, another WYSIWYG. In case you missed it, my signature here is a joke; akin to saying a 1984 Yugo GV North America is a superior car to a 1977 Fiat 128.

    WYSIWYG's delude people into THINKING they can make a website, and the only thing you can learn from them is how to do EVERYTHING wrong!
     
    deathshadow, Oct 28, 2015 IP
  7. adsjoint

    adsjoint Peon

    Messages:
    19
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #7
    Deathshadow
    Before reading your detailed crisp reply i was hoping thst somehow one can convert any page to responsive with a simple copy paste and arrive in web 2015 but your post makes it amply clear why it can't be.
    I will definately ask someone to make an entirely new page.
    No way to retrofit a beat down 1987 Chevy in a new Porche chassis!!
    Thanks a lot for clarifying. Much appreciated.
     
    adsjoint, Oct 29, 2015 IP