Results 1 to 7 of 7

Thread: convert website for mobile/tablets/etc

  1. #1
    Join Date
    Jan 2009
    Location
    NH
    Posts
    366
    Thanks
    54
    Thanked 10 Times in 10 Posts

    Question convert website for mobile/tablets/etc

    I made this website and it works well on computers. I want to make a mobile friendly version also. I've been searching around but still a bit confused on the best, newest way to do this.

    I was looking at this from Google http://www.google.com/sites/help/mob...ages/mlpb.html


    Do you think that would be the best and most easy way for me to do this?

    thank you


    if this is in the wrong forum please move it

  2. #2
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    2,027
    Thanks
    16
    Thanked 315 Times in 313 Posts
    Blog Entries
    13

    Default

    As far as 'mobile friendly' goes, your current site is already performing rather well in mobile devices - it looks nice, it fits on the screen and its easy to read, even without the zoom gesture. Granted, the menu requires some zooming to use effectively but its certainly not a horrible experience.

    One option might be to use some form of mobile detection script to switch-in an on-click rather than on-hover menu. That would be a relatively easy solution.

    Another option would be to look into a site redesign using a responsive /fluid layout and CSS media queries to target handheld device sizes. With careful use of on-click events instead of on-hovers, and larger action buttons, you can acheive a 'fit-all' site that would adapt to just about any screen size or device.

    You don't necessarily need to produce a seperate site on a dedicated mobile platform.

    I think I would personally look at fluid/responsive design with CSS media queries - i know its something that I want to do more work on but haven't delved in too deeply just yet.
    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps |
    The only limit to creativity is imagination: JemCon.org

  3. #3
    Join Date
    Jan 2009
    Location
    NH
    Posts
    366
    Thanks
    54
    Thanked 10 Times in 10 Posts

    Default

    I forgot to add this in my original post: would it be wise to change my doctype for the site from <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    to the newer HTML 5 <!DOCTYPE html>

    I've also seen this used for older browsers
    <!DOCTYPE HTML <!--[if lte IE 8]>PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd"
    <![endif]-->>
    Last edited by mlegg; 01-07-2013 at 09:25 PM. Reason: add code

  4. #4
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    2,027
    Thanks
    16
    Thanked 315 Times in 313 Posts
    Blog Entries
    13

    Default

    I think its entirely up to you. At this stage HTML5 is still officially in draft mode, although it offers backwards compatability and is being rolled out on lots of websites. Here are the official docs for reference: http://www.w3.org/TR/html5-diff/

    HTML5 offers more advanced features and there are a greater number of benefits, especially for mobile users (multimedia content), so if you intend to make use of these in your website (or if you just want to take the opportunity to become more familiar with the differences), this could be a good opportunity to transition: http://tympanus.net/codrops/2011/11/...ml5-right-now/
    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps |
    The only limit to creativity is imagination: JemCon.org

  5. #5
    Join Date
    Jan 2013
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    If i were you, i would not start adding all the browser / mobile specific hacks but instead produce a site that works well on both from a single code base (not different execution paths for different browsers, it soon gets messy). As already suggested, your site is pretty close to working well on mobiles and tablets. However, since they don't have a hover event, you will need to change the menu to an on click event to show the menu. Once you have done that, you should be fine. Remember, a vast majority of sites on the net don't actually have mobile versions. Instead, mobiles and devices are getting better a rendering websites!

  6. #6
    Join Date
    Jan 2009
    Location
    NH
    Posts
    366
    Thanks
    54
    Thanked 10 Times in 10 Posts

    Default

    Thank you for you thought/suggestions.

    Is there a nav menu from Dynamic Drive that is similar to what I made that will work on the tablets/mobile device? Or can you point me to the way of one?

  7. #7
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    2,027
    Thanks
    16
    Thanked 315 Times in 313 Posts
    Blog Entries
    13

    Default

    The DD Mega Menu script supports an onclick event: http://www.dynamicdrive.com/dynamici...ddmegamenu.htm

    You should be able to style it up to look like your existing one fairly easily

    There may also be modified versions of some of the other DD menus knocking about in the forums. If you check the DD Script Help forum theads, you might find modified js files posted that include onclicks instead of hovers. I think John posted one recently, but I cant find it at the mo - maybe he will see this thread and offer-up a link?
    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps |
    The only limit to creativity is imagination: JemCon.org

Similar Threads

  1. Mobile Website Detection
    By jcdesigns in forum Other
    Replies: 3
    Last Post: 12-05-2012, 08:18 PM
  2. embedding a musicplayer for mobile website
    By drosster in forum Other
    Replies: 0
    Last Post: 11-10-2011, 10:27 PM
  3. Mobile friendly website
    By rohitnarang12 in forum Other
    Replies: 2
    Last Post: 11-10-2010, 01:28 PM
  4. Mobile website using CSS
    By lowmarklow in forum Looking for such a script or service
    Replies: 1
    Last Post: 09-29-2010, 03:14 PM
  5. Website for Mobile Phones - Please Help
    By me_myself in forum Other
    Replies: 1
    Last Post: 11-25-2008, 01:20 AM

Bookmarks

Posting Permissions

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