www.webdeveloper.com
Results 1 to 5 of 5

Thread: Why do mobile browsers not work as standard ones?

  1. #1
    Join Date
    Sep 2014
    Posts
    2

    Why do mobile browsers not work as standard ones?

    Hi everyone,

    I’m incontering a few setbacks with my website (www.ilcontadinobio.it)
    Try to open it on pc (it should be fine) and on smartphone…exactly, chaos!
    The behaviour is pretty much the same on mobile browsers such as Chrome, Mozilla, Opera and Dolphin.

    -the flash header is within table and centered.

    -same story for the azure rectangle with fading sides that I put in backgroung.

    Code:
    body {
      background: url(../images/sfondo.png)  no-repeat top center;
    }
    -Less convincing is the green menù which I don’t know whether there is any setting that might change its position but since it work on standard browsers, leave me clueless.

    Code:
    @charset "utf-8";
    /* CSS Document */
     
    #sse2
    {
        /*You can decorate the menu's container, such as adding background images through this block*/
       background:#fff url(../images/verde.gif) no-repeat center; 
        height: 20px;
        padding: 10px;
        border-radius: 6px;
        -moz-border-radius: 6px;
        -webkit-border-radius: 6px;
    }
    #sses2
    {
        margin:0 auto;/*This will make the menu center-aligned. Removing this line will make the menu align left.*/
    }
    #sses2 ul 
    {
        position: absolute;
        list-style-type: none;
        float: center;
        padding: 0;
        margin: 0;
        width: 1074px;
        top: 225px;
        height: 43px;
    }
    #sses2 li
    {
        float: left;
        list-style-type: none;
        padding:0;margin:0;background-image:none;
    }
    /*CSS for background bubble*/
    #sses2 li.highlight
    {
        background:#693500 url(../images/mb2_2.gif) no-repeat center bottom;
        top:3px;
        height:17px;
        border-radius: 8px;
        -moz-border-radius: 8px;
        -webkit-border-radius: 8px;
        z-index: 1;
        position: absolute;
        overflow:hidden;
    }
    #sses2 li a
    {
        width: 2000;
        height:30px;
        padding-top: 3px;
        margin: 0 30px;/*used to adjust the distance between each menu item. Now the distance is 20+20=40px.*/
        color: #f6f165;
        font: strong 12px arial;
        text-align: center;
        text-decoration: none;
        float: center;
        display: block;
        position: relative;
        z-index: 2;
    }
    It doesn't seem so difficult to solve but I lack the css knowledge and experience to pick the right tag and tamper with it.

    First two: how it goes on mobile. Third: how in normal pc browsers.

    http://i.imgur.com/ih30sh3.jpg

    http://i.imgur.com/AxAR4b2.jpg?1

    http://i.imgur.com/9zkecfC.png

    Help please!
    Thanks

  2. #2
    Join Date
    May 2014
    Posts
    936
    Well for starters you have a flash based header, something that to be brutally frank has no business on a website EVER! Flash is for video content and/or games, NOT static parts of your design; hence why here I get a big "missing plugin" box.

    It's a fixed width layout -- you expect that to fit onto a mobile device HOW exactly? Fixed width design is an inaccessible mess that has no business on a modern website. To design for mobile - or just in a general accessible fashion your layout should be:

    1) Semi-fluid -- Automatically expanding and shrinking to fit the available space, with a maximum width set so really long lines of text aren't hard to read.

    2) Elastic -- Fonts declared in %/em with all major area sizes declared in EM. This way the entire layout auto-adjusts to the default text size of the device or any changes the user has made to them at the browser or OS level. (depending on browser and OS).

    3) Responsive -- change the layout based on the available screen space using media queries. This involves things like changing images from floated to centered block, stripping off columns on small displays, adding columns on larger displays, stripping out presentational images that don't fit the display size and so forth.

    You don't have that, OF COURSE it doesn't work on mobile... or on a netbook, or on my tablet... and it ends up this tiny little useless box on my 27" 2560x1440 display.

    The laugh being you have elastic/dynamic fonts on your menu, which is why it's blowing out of it's container on both sides. There's a reason you don't build menus like that.

    It's also a REALLY bad idea to create a crappy little internal scrollbar and to force everything into a fixed-height container like that. It's inaccessible trash and just leaves people on smaller displays AND really big displays going "wow, this site SUCKS!"

    Under the hood you've got a laundry list of how not to code a website -- from tables for layout, to jQuery for nothing, DIV for nothing, STRONG around elements that shouldn't be receiving "more emphasis", gibberish use of numbered heading tags, H2 around things that are quite obviously NOT the start of subsections of the page and as such aren't headings, attributes like ALIGN, BORDER and BGCOLOR that have no business on any website written after 1997, paragraphs around non-paragraph elements, TITLE attributes that look like they should be HREF...

    I mean seriously, what makes these:
    Code:
      <h2 align="center">- <a href="mailto: anticofruttetodelmirio@virgilio.it">anticofruttetodelmirio@virgilio.it</a> (Frutta dell'Etna, Biancavilla)</h2>
            <h2 align="center">- <a href="mailto: salvogiammello@tiscali.it">salvogiammello@tiscali.it</a> (Formaggio di capra amatoriale)</h2>
    Starts of subsections of that PAGE. (not the site, but the PAGE you are declaring them on) -- they don't even have their own content, so they are quite obviously NOT headings.

    Code:
      <h2 align="center" class="black"><strong>ATTUALMENTE DISPONIBILE</strong></h2>
              <h1 align="center">Frutta</h1></td>
    If a H1 is the heading under which all parts of the page are subsections, and a H2 is the start of a subsection of H1's... how can you even have a H1 after a h2. That's just gibberish; though I suspect given all the other presentational markup you aren't even TRYING to use tags for what they mean, and instead are using them based on what they look like; which is the wrong reason to even choose a tag in the first place!

    You don't have anything remotely resembling semantic markup, you have so much presentation in the markup you can't possibly even practice media targets much less semi-fluid elastic design -- to be frank it reeks of 1990's coding and makes me start to wonder, just which WYSIWYG did you use to make this as no sane coder would write markup like this.

    Though even the first line proudly proclaims much of the problem -- the tranny doctype, which effectively means "in transition from 1997 to 1998 coding practices"... good for a laugh when there's HTML 5 mixed in there, but that seems to be from that garbage "jet-form" nonsense.

    Which is how you ended up with 20k of HTML for 1.5k of plaintext, quite possibly twice as much HTML as should have been used on such a simple layout. It's a laundry-list of how not to build a page, and I'd highly suggest pitching it all in the trash and starting over with a recommendation doctype (HTML 4.01 STRICT or XHTML 1.0 STRICT), semantic markup, separation of presentation from content -- doing yourself a huge favor and backing away from the flashtardery and scripttardery that are just making the page harder to use and aren't really doing anything useful for you.

    Apologies if that seems harsh, but the truth often is. The site wasn't designed with mobile or accessibility in mind, so naturally it doesn't work. It wasn't even built using HTML and CSS properly.
    Last edited by deathshadow; 09-04-2014 at 02:29 AM.
    Java is to JavaScript as Ham is to Hamburger.

  3. #3
    Join Date
    Mar 2012
    Posts
    1,560
    To answer your query, mobile browsers do not behave like PC ones because they are designed for touch screen operation and, at least originally, had tiny screens. That, and the fact that the market was originated and dominated by Apple, whose business model is based on introducing deliberate incompatibilities to fragment the market and protect their share.

    However, the market is maturing and, as deathshadow has said, there are ways to write web sites that are compatible with both PC and mobile platforms, but a conventional static site has no hope of doing that. Sites have to be written from scratch to be fluid and responsive.

  4. #4
    Join Date
    Sep 2014
    Posts
    2
    Well for starters you have a flash based header, something that to be brutally frank has no business on a website EVER! Flash is for video content and/or games, NOT static parts of your design; hence why here I get a big "missing plugin" box...
    Oh boy, I couldn't stop laughing..

    You cannot see the flash header? Maybe you're using IE

    Yeahh I know, I'm not a developer I'm an sicilian farmer and as you already pointed out I use tags for what they look like. That is as far as I could go. Would you be able to accomplish the same being in my clotes? I'm sure you would

    In the meantime people in other forums solved my problem. Would you be able to? I'm sure you would I'd really like to see a website you built. Thanks for the rigmarole! I'll keep it
    Last edited by jedaisoul; 09-07-2014 at 03:33 PM. Reason: abbreviated the lengthy quote

  5. #5
    Join Date
    Nov 2002
    Location
    Flint, Michigan, USA
    Posts
    594
    Whether you start over from scratch or have the problem "solved" on another forum, please validate the result. The page you listed has 69 errors and multiple warnings. See them here:

    http://validator.w3.org/check?charse...ntadinobio.it/
    Please give me a hand at http://www.gofundme.com/bkzr98.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles