Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    Regular Coder harlequin2k5's Avatar
    Join Date
    Sep 2005
    Location
    Holiday, FL
    Posts
    635
    Thanks
    18
    Thanked 0 Times in 0 Posts

    designing for handheld devices

    I'm having such terrible time redesigning my site to view properly on a handheld device

    I was working with a site that had a validator and it said that I needed to use
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN" "http://www.w3.org/TR/xhtml-basic/xhtml-basic11.dtd">
    for my doctype which causes the rest of my code (specifically <hr>'s) to fail miserably

    essentially - what is the best way to design for a handheld - does anyone have any suggestions based on experience with a link demonstrating what you mean?

    thanks!

    edit: to expand on the question above...should I design the main site adding a mobile.css or should I create a directory http://www.example.com/mobile/index.php with it's own stylesheet?
    Last edited by harlequin2k5; 09-17-2007 at 08:23 PM.

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Why are you using XHTML 1.1? Do you know how to properly pass the application/xml+xhtml header? If you don't then don't use XHTML 1.1.

    This is the doctype recommended for a site that is to be displayed on only mobile devices
    Code:
    <!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
    though now days most doctypes will still work fine. I suggest using XHTML strict or HTML strict.

    I think adding a stylesheet that is meant just for handheld devices is the best way to go. It allows you to keep your files in one place rather than having to move them to another directory. Plus if the user had to go to http://www.example.com/mobile/ it wouldn't be to user friendly. Letting them go to the main url is better.

    Also if you have Dreamweaver CS3 it came with Adobe Device Central CS3 which allows you to view your site just as if the specific device you choose was viewing your site.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #3
    Regular Coder harlequin2k5's Avatar
    Join Date
    Sep 2005
    Location
    Holiday, FL
    Posts
    635
    Thanks
    18
    Thanked 0 Times in 0 Posts
    see that's exactly what I thought was that I could use the strict doctype - although I've been using transitional lately...

    no I'm not as well-versed as I would like to be about different doctypes...

    about using a 2nd stylesheet - which is fine - what if I want to have a completely different layout from what is on the main site? that's why I was asking if I should use a separate directory - not all of the menu options need to be available on a handheld - I apologize for not indicating that; I've already learned how to display:none for some of the other elements

    throughout the rest of the day I've come across many different types of emulators, including the web developer toolbar addon for ff and a display setting in opera (quite helpful I must say) and I had even dug out my palm pilot to help view my progress - unfortunately my budget doesn't allow for new cs software

    I realize that there are so many different types and styles and sizes of handheld devices so I can't please them all, nor am I going to try (I know that 2 of my primary users have blackberry's) - but would I continue to use the basic validator at w3c?

    I know some of this may seem routine but I've never done the handheld thing before and I don't want to have to keep redoing it - and I really do appreciate your advice...I had a feeling you were going to reply first aero
    Last edited by harlequin2k5; 09-18-2007 at 12:04 AM.

  • #4
    Master Coder
    Join Date
    Apr 2003
    Location
    in my house
    Posts
    5,211
    Thanks
    39
    Thanked 201 Times in 197 Posts
    If you buold your site with the correct doctype and use a separate stylesheet for each application, eg print, handheld, screen etc, then you can make the stylesheet show the site differently in all of them.

    And if you make the design fluid then it shouldn't matter what the screen size is on the handheld because the design will adjust to fit.

    bazz

  • Users who have thanked bazz for this post:

    harlequin2k5 (09-18-2007)

  • #5
    Regular Coder harlequin2k5's Avatar
    Join Date
    Sep 2005
    Location
    Holiday, FL
    Posts
    635
    Thanks
    18
    Thanked 0 Times in 0 Posts
    I guess it'll take some time to get a handle on

    thanks for the advice!!!

  • #6
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,623
    Thanks
    6
    Thanked 1,001 Times in 974 Posts
    Quote Originally Posted by harlequin2k5 View Post
    about using a 2nd stylesheet - which is fine - what if I want to have a completely different layout from what is on the main site? that's why I was asking if I should use a separate directory - not all of the menu options need to be available on a handheld […]
    Code:
    <link rel="stylesheet" href="screen.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="print.css" type="text/css" media="print" />
    <link rel="stylesheet" href="handheld.css" type="text/css" media="handheld" />
    You apply the media attribute to the stylesheet links (and I’d recommend to always do that so pages won’t be styled in a weird manner on devices other than computer screens). If you added the print value to the attribute of your regular screen stylesheet and viewed the respective page in your computer browser you would see that nothing is styled because that would only be apply to print layouts (press Ctrl+P to preview your print layouts).
    So, by doing that you wouldn’t have to revert styles from your default stylesheet for different devices because this lets you start from scratch and style the site totally different for different applications.

    Quote Originally Posted by harlequin2k5 View Post
    throughout the rest of the day I've come across many different types of emulators, including the web developer toolbar addon for ff and a display setting in opera (quite helpful I must say) and I had even dug out my palm pilot to help view my progress - unfortunately my budget doesn't allow for new cs software
    You don’t necessarily need the latest Dreamweaver. DW 8 also allows you to preview different style renderings in the design/preview window through choosing: “View > Style Rendering” in the menu. Design mode ain’t the best/most accurate way to preview but for simple layouts like for handheld devices or basic print stylesheets it’s doing very well actually.

    Also have you tried http://mtld.mobi/emulator.php?


    Quote Originally Posted by harlequin2k5 View Post
    I realize that there are so many different types and styles and sizes of handheld devices so I can't please them all, nor am I going to try (I know that 2 of my primary users have blackberry's) - but would I continue to use the basic validator at w3c?
    The W3C validator is still the number one choice to validate your code. And be aware: Your HTML will be the same across all devices (mobile phones/computer screens/print – this is where semantic HTML becomes really important), it’s only the CSS that does the styling, and you would, for example, hide all the menu stuff in print stylesheets, or hide useless background images for handheld devices and only do basic text styling, etc.

  • #7
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,785
    Thanks
    8
    Thanked 131 Times in 129 Posts
    http://green-beast.com/blog

    check out Mike's blog and turn it to Print and Handheld styles. He seems to have a very nice job with the alternate style sheets.
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis


  •  

    Posting Permissions

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