Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Page 1 of 2 1 2 LastLast
Results 1 to 10 of 19
  1. #1
    WDF Staff AlphaMare's Avatar
    Join Date
    Oct 2009
    Location
    Montreal, Canada
    Posts
    4,570
    Member #
    20277
    Liked
    878 times
    Well I guess I'd better move with the times, maybe try some mobile development, and since my daughter wanted a "quick, one-page mobile site, no navigation, straight HTML and CSS, very simple", it seemed like the perfect opportunity.

    "Simple" - HAH!

    I have got a start but am frustrated because while it looks great in Chrome, it goes all catawumpus in FF, and in IE - well, half of it seems to disappear.

    I have tried everything I can think of - I have resized my browser windows to the same pixel size as the most common screen size since I don't have an iPhone or an Android to try it out on (I use a Blackberry).

    I have read so many conflicting tutorials - some say absolute positioning, some say fluid, now that the i-Pad is so popular, and then how to get it to show properly if the screen is rotated?

    If you want to see what i have so far, it's at:
    http://www.digitalinsite.ca/development/alphamobile1/

    I have to say I am not used to being this frustrated - does anyone have any ideas for me?
    Good design should never say "Look at me!"
    It should say "Look at this." ~ David Craib


    http://digitalinsite.ca ~ my current site . . info@digitalinsite.ca ~ my email

    If you feel that someone's post helped you fix your problem, answered your question, or just made you feel better, feel free to "Like" their post. The "Like" link is at the bottom right of each post, along side the "reply" link. And if you are being helped here, try to help someone else - pass it on!

  2.  

  3. #2
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,141
    Member #
    27197
    Liked
    959 times
    I've never actually made the jump, though I have tweaked a few designs to work...less bad on mobile browsers. I've been studying up on it, though because I plan to make a run at it. That said, here are a couple of great articles that I've been going over on the subject:
    http://webdesignerwall.com/general/t...-is-redesigned
    http://webdesignerwall.com/tutorials/css3-media-queries
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."

  4. #3
    Senior Member Webzarus's Avatar
    Join Date
    May 2011
    Location
    South Carolina Coast
    Posts
    3,322
    Member #
    27709
    Liked
    770 times
    I've only done a few myself... but with that said... you have to remember that now all mobile browsers are created equal... and as for just re-sizing the browser to the desired pixel ... not gonna work as mobile brower(s) do render differently...

    most of the popular "mobile browsers" have a "browser emulator"... that will run on most PC(s), that actually use the same browser engine that the mobile devices use....

    as for design... I found out that "aboslute" for the "body" and everything else relative and sizes in % always worked better for me in PALM and Android emulators.

    Since iPhone and iPad browsers are based on the safari engine... and the engine re-renders to display as needed... I normally didn't even bother to consider them in the mix...

    I started out very simple... all fonts were either SERIF or SANS-SERIF.... and then used % for headers... same for DIV's... padding and margin were about the only thing with a fixed PX size... everything else was in %... so resizing didn't break things...

    for the few mobile sites... I always encourage the client to just cover the bases... basic info about the company and or products... faq's... and contact information...

    if the mobile device doesn't support CSS (Symbian OS browsers "Nokia ".. are flaky on css support)... at least the text is still visible... not pretty... but visible

  5. #4
    WDF Staff AlphaMare's Avatar
    Join Date
    Oct 2009
    Location
    Montreal, Canada
    Posts
    4,570
    Member #
    20277
    Liked
    878 times
    Thanks, Webzarus - this is supposed to be a very "simple" site - here's the description they gave me:
    1. A logo
    2. A background picture
    3. A specific font
    4. Sentence text describing the project and the reason for it on the left side of the page
    5. Six transparent boxes with editable text. Each box will contain 1 name, 2 icons and 2 numbers following the icons. Icons and names will be provided.The numbers will be changed on a daily basis since this is a statistical research based project.
    6. Copyright statement at the bottom of the page
    7. White picture-frame-like borders where sponsors and advertisement Logos will be possibly be posted. The main background picture will be inside this border and the boxes and texts will be written on top.
    8. All images, text and fonts will be provided
    9. No links or other functionality at all
    10. Oh, yes, and they want a counter that will be visible on the page and tell them how many page views they are getting and how many of those are return visits...

    The problem I have is positioning the 6 boxes so they will line up properly in whatever size viewer they are being shown in, for example, two across when the unit is held vertically, three across in horizontal.
    and then containing them in a wrapper1 div inside a wrapper2 div to make the white borders.
    Of course it doesn't stop there - the font they have chosen is an image font, so the numbers in each box will be two or more images lined up...and they want me to explain how to edit it themselves - by e-mail as they are in another province from me.
    I'm not even considering the counter - I'll sign them up for Google Analytics and that'll be that.

    I'm beginning to think I might like to hire this one out and then deconstruct it as a learning experience...I wonder how much that would cost?
    Good design should never say "Look at me!"
    It should say "Look at this." ~ David Craib


    http://digitalinsite.ca ~ my current site . . info@digitalinsite.ca ~ my email

    If you feel that someone's post helped you fix your problem, answered your question, or just made you feel better, feel free to "Like" their post. The "Like" link is at the bottom right of each post, along side the "reply" link. And if you are being helped here, try to help someone else - pass it on!

  6. #5
    WDF Staff George Dolidze's Avatar
    Join Date
    Apr 2011
    Location
    Irvine, CA
    Posts
    2,487
    Member #
    27540
    Liked
    416 times
    I'm beginning to think I might like to hire this one out and then deconstruct it as a learning experience...I wonder how much that would cost?
    I was wondering how much a mobile site costs vs a regular site, too.
    My freelancer website: DolidzeDesign



    You only need a parachute if you plan on skydiving twice.

  7. #6
    WDF Staff AlphaMare's Avatar
    Join Date
    Oct 2009
    Location
    Montreal, Canada
    Posts
    4,570
    Member #
    20277
    Liked
    878 times
    I'll let you know if I find out...
    Good design should never say "Look at me!"
    It should say "Look at this." ~ David Craib


    http://digitalinsite.ca ~ my current site . . info@digitalinsite.ca ~ my email

    If you feel that someone's post helped you fix your problem, answered your question, or just made you feel better, feel free to "Like" their post. The "Like" link is at the bottom right of each post, along side the "reply" link. And if you are being helped here, try to help someone else - pass it on!

  8. #7
    Senior Member Webzarus's Avatar
    Join Date
    May 2011
    Location
    South Carolina Coast
    Posts
    3,322
    Member #
    27709
    Liked
    770 times
    This is not exactly what you're looking for... but it might give you some ideas on positioning using percentages....

    .... when working with percentages.... it's really all about the math... you can't exceed 100...




    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>webzarus test</title>

    <style type="text/css">
    body{
    width:100%;
    margin: 0 5% 0 5%;
    padding: 0;
    background-image: url(Images/bg.png);
    font-family: serif;
    font-size: 89%;
    color:#0000ff;
    }

    #wrapper {
    position: absolute;
    top:0;
    left:0;
    margin:0;
    padding: 1%;
    width: 100%;
    height: 100%;

    }

    .logo{
    position: relative;
    display: block;
    height: 10%;
    width: 98%;
    border: 1px solid #FF0000;
    margin: 1% 0 2% 0;
    padding:0;
    background-image: url(Images/logo.png);
    text-align:center;
    }

    .box{
    position:relative;
    height: 22%;
    width: 47%;
    padding:0;
    margin: 1%;
    float:left;
    border: 1px solid #000;
    }

    .footer{
    position:relative;
    display:block;
    height: 10%;
    width: 98%;
    border: 1px solid #CCC;
    margin: 1% 0 5% 0;
    padding:0;
    float:left;
    text-align:center

    }
    </style>
    </head>

    <body>
    <div id="wrapper">
    <div class="logo">logo here</div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="footer">footer here</div>
    <div>
    </body>
    </html>

  9. #8
    Senior Member Webzarus's Avatar
    Join Date
    May 2011
    Location
    South Carolina Coast
    Posts
    3,322
    Member #
    27709
    Liked
    770 times
    BTW.... I've never charged for a mobile site... as it's usually discussed in the beginning and is included in the project... but it's usually a minimal cost... as I only do simple stuff... it's only a line item in the contract to cover me legally.

  10. #9
    WDF Staff AlphaMare's Avatar
    Join Date
    Oct 2009
    Location
    Montreal, Canada
    Posts
    4,570
    Member #
    20277
    Liked
    878 times
    Quote Originally Posted by Webzarus, post: 211618
    BTW.... I've never charged for a mobile site... as it's usually discussed in the beginning and is included in the project... but it's usually a minimal cost... as I only do simple stuff... it's only a line item in the contract to cover me legally.
    Yeah - well this guy only wants the mobile site - and now he wants it by Sunday - not sure if I can do that...
    Good design should never say "Look at me!"
    It should say "Look at this." ~ David Craib


    http://digitalinsite.ca ~ my current site . . info@digitalinsite.ca ~ my email

    If you feel that someone's post helped you fix your problem, answered your question, or just made you feel better, feel free to "Like" their post. The "Like" link is at the bottom right of each post, along side the "reply" link. And if you are being helped here, try to help someone else - pass it on!

  11. #10
    WDF Staff m3n0tu18's Avatar
    Join Date
    Jul 2011
    Location
    Devon, UK
    Posts
    1,467
    Member #
    28473
    Liked
    265 times
    AHA! I know where i might be able to help here.
    Dreamweaver have an addon where you can view the site in normal, tablet and mobile. There's a tut on youtube showing you how its done, its all based off different css and i think if statements where if the browser is mobile style use this statement otherwise use the browser or tablet ones....

    Ill get the url's for you...
    If you like my comments to your thread please click the LIKE button

    Check out my portfolio: Here!
    View my company Facebook Page
    View my company Website

    <<Plrease ignoer my typo's I have isdexlyia>>


Page 1 of 2 1 2 LastLast

Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 10:12 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com