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.

Mobile View On Website

Discussion in 'HTML & Website Design' started by Eyrique, Feb 14, 2013.

  1. #1
    Hi,

    I have a site that display fine on Chrome, IE, Safari. If I view it on some mobile (Sony Experia Ray, Samsung Note), all the logo, columns seems to be misplace. I'd tried to fixed the width of each column, used min-width, max-width on CSS, but it seems not working.

    Need help on this.

    Here's the site: http://www.myholidayinmalaysia.com

    Thanks
     
    Eyrique, Feb 14, 2013 IP
  2. focequartz

    focequartz Active Member

    Messages:
    152
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    60
    #2
    Dear Member,

    I will suggest you to check the CSS file and open it in dreamweaver and make sure all your table content allignment is marked as Center.

    Check it if it could help you out
     
    focequartz, Feb 14, 2013 IP
  3. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #3
    Your site was not designed for mobile -- at all. It's a fixed width layout, no media query triggers, so on anything less than desktop resolution (basically anything smaller than a tablet) you are relying on the mobile browser to 'fix' the page for you, instead of having it work by design... and the sad fact is, most mobile browsers other than Opera/Safari/Chrome mangle sites like yours, and even those three on mobile can only do so much.

    From an accessibility standpoint, the site in question is a absolute wreck. It's a fixed width design full of 'but I can do it in Photoshop' nonsense... It uses fixed metric (px) fonts with fixed height containers meaning many users are diving for the zoom when they shouldn't have to -- and because it's a fixed width, you can only zoom so far before it throws a wobbly.

    Under the hood it's your typical HTML 5 bloat garbage and of course is saddled with the oh so common "Wordpress canz haz intarnets" coding practices... which is to say just slap everything in there any old way with endless div, classes, pointless garbage like clearfix, tables for layout, tables for nothing, tables inside elements that aren't even valid (like a UL wrapping TABLE, with the LI inside the TD?!? That's gibberish!)

    With 256 Validation Errors and 82 Warnings you don't even HAVE HTML there, you have gibberish. (and in the loosy-goosy sleaze it together any old way crap HTML 5 at that!) It's nothing short of a miracle it works in ANY browser and whoever wrote that markup needs to sit back and actually LEARN HTML... This is further shown by the 139k of markup used to deliver 7k of plaintext and around two dozen content images -- most likely anywhere from eight to ten times as much code as should be needed on such a simple layout!

    Not exactly a shocker that this monument to the worst of 1997 practices has trouble on mobile -- again it's more of a shock it works on desktop browsers, and even then it does so poorly. Seriously, anyone who's writing code like this:

    <ul>
    	<table width=100%>
    	<tr>
    	<td><li class="category-selected"><a href="/">All</a></li></td>
    
    Code (markup):
    Needs to do the world a favor, back the ***** away from the keyboard and not come back until they've actually learned how HTML works.

    It's just another of these poorly written sites that to be frank, needs to be completely tossed and started over from scratch -- preferably NOT by just slapping together a bunch of off the shelf components any old way.
     
    deathshadow, Feb 15, 2013 IP
  4. pix582

    pix582 Active Member

    Messages:
    313
    Likes Received:
    14
    Best Answers:
    1
    Trophy Points:
    70
    #4
    You need to use media queries
    e.g @media only screen and (max-device-width: 480px) {
    }
     
    pix582, Feb 17, 2013 IP
  5. duckz

    duckz Active Member

    Messages:
    245
    Likes Received:
    3
    Best Answers:
    1
    Trophy Points:
    68
    #5
    does your wp theme actually support responsive design? if not probably you will need to code in extra css and load mediaqueries.js to switch between small screen like iphone on portrait mode, medium screen like ipads or other pads, and full size like on desktop 1900px width.
     
    duckz, Feb 17, 2013 IP
  6. Stone Rain

    Stone Rain Greenhorn

    Messages:
    15
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    11
    #6
    [​IMG]

    No way this design can work on mobile. Take a look at this tool: http://mattkersley.com/responsive/ with your URL plugged in; it doesn't adapt to screen size one bit.

    There's zillions of nested divs and classes, many of which have width thats' *set in pixels*. Did you write this yourself? If so...why should you even be asking why it's not working well with mobile interfaces?

    Example: <div class="menu3" style="width:100%;"><div style="width:1000px;text-align:center;margin: 0em auto;">&nbsp;

    Width:1000px. Phones and tablets don't have screens anywhere near 1000px. This div will not adapt to them at all.

    Another peeve of mine is sites that are asininely long; which this one is. Your front page, on a lower end phone would take ages to load and might freeze the browser. After going through and getting rid of the shoddy nonresponsive styling, I suggest you cut your front page into one that shows the first few "packages" and then has a "show more" button.

    Also...it helps if you use correct punctuation and spacing in your <title> ;)

    All in all, it should be obvious why this isn't working on smaller screens: it needs a design overhaul.
     
    Last edited: Feb 19, 2013
    Stone Rain, Feb 19, 2013 IP