Why do mobile browsers not work as standard ones?
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.
-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.
background: url(../images/sfondo.png) no-repeat top center;
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.
/* CSS Document */
/*You can decorate the menu's container, such as adding background images through this block*/
background:#fff url(../images/verde.gif) no-repeat center;
margin:0 auto;/*This will make the menu center-aligned. Removing this line will make the menu align left.*/
/*CSS for background bubble*/
background:#693500 url(../images/mb2_2.gif) no-repeat center bottom;
#sses2 li a
margin: 0 30px;/*used to adjust the distance between each menu item. Now the distance is 20+20=40px.*/
font: strong 12px arial;
First two: how it goes on mobile. Third: how in normal pc browsers.
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:
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.
<h2 align="center">- <a href="mailto: email@example.com">firstname.lastname@example.org</a> (Frutta dell'Etna, Biancavilla)</h2>
<h2 align="center">- <a href="mailto: email@example.com">firstname.lastname@example.org</a> (Formaggio di capra amatoriale)</h2>
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!
<h2 align="center" class="black"><strong>ATTUALMENTE DISPONIBILE</strong></h2>
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 03:29 AM.
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.
Last edited by jedaisoul; 09-07-2014 at 04:33 PM.
Reason: abbreviated the lengthy quote
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:
Users Browsing this Thread
There are currently 1 users browsing this thread. (0 members and 1 guests)