Mobile Design Help

Discussion in 'Web Design' started by drding, Aug 6, 2012.

to remove all ads.
  1. drding

    drding New Member

    Messages:
    29
    I was wondering if anyone knew of a few good tutorials for learning how to create mobile versions of websites? Or any advice on that subject.
    I know I can technically Google it, but there's just so much info out there to pick through, and I value the opinions here.

    I know a few key concepts of it so far; like keeping it to a minimal design (but hopefully not drab), no huge images, keeping scripting to a minimum?, interactive but not confusing or convoluted, etc. And also that I should look at other mobile designs for the type of site I'm building to see what's being utilized (or not utilized even) for both design/functionality and content.

    I'm not sure how to identify mobile devices versus computers either. I'm pretty sure it has to do with user agents but I a.) am not sure that's right and b.) am not sure how to go about that in the most sufficient way if it is right.

    Any advice or if someone can point me in the right direction would be much appreciated. Thanks!
     
  2. chrishirst

    chrishirst Well-Known Member Staff Member

    Messages:
    2,611
  3. drding

    drding New Member

    Messages:
    29
  4. Roddy

    Roddy New Member

    Messages:
    117
    Responsive Design

    jQuery Mobile has just been updated and has a huge number of features..

    http://jquerymobile.com

    The demo file has all the info you need to get started.

    One mod that I make is to set a maximum width and center the page in the browser so that it can be viewed on desktops as well.

    If you want a design which changes for PCs, tablets and smart phones, have a look at ...

    http://www.initializr.com

    .. which will help you get the idea of media queries and how they work.

    There are various ways to detect browsers and devices but simple is usually best. If you have a conventional website and a mobile version, put this in head of the index.html file for the conventional one...

    <script type="text/javascript">
    <!--
    if (screen.width <= 800) {
    window.location = "http://mobile.domain-name.com/"; }
    //-->
    </script>

    This code will send any visitors using a device with a screen width of 800px or less to the mobile version. You can change this number to suit yourself.

    If you want to get complicated, try this...

    http://detectmobilebrowsers.mobi
     
  5. jaydenharris98

    jaydenharris98 New Member

    Messages:
    8
    Here is some good points for better mobile web design.

    -Website or App?
    -Designing for a Smaller Screen Size
    -Consider Poor Connectivity
    -Choose a Separate URL for Your Mobile Site
    -Detect And Redirect Users
    -Consider a Mobile Friendly 1 Column Page Structure
    -Simplify and Optimize Your Content
    -Reduce Your Navigation and User Input
     
  6. Edge

    Edge Member

    Messages:
    461
    Good excuse to buy an ipad ;) for testing - that's what I told missus...
    (It was brilliant for watching Olympics!)
     
  7. drding

    drding New Member

    Messages:
    29
    Roddy - Thanks for the JM link, I've just started dabbling with jquery and I'm really digging what it can do. I never knew it was that easy to redirect based on screen size, that's awesome!
    Yeah it would also be great to have something that could change based on the device used to view it, I'll check out that initializr link.

    jaydenharris98 - You raise some really good points I hadn't thought about. For example poor connectivity. Which I think really puts emphasis on having a clean design that loads fast. Definitely less is more in this case.

    sdesign1 - Hehe that would be a good reason to spring for an ipad. All for the sake of testing right? :D


    Excellent advice so far, thanks everyone!
     
  8. Anjali Banerjee

    Anjali Banerjee New Member

    Messages:
    11
  9. drding

    drding New Member

    Messages:
    29
    Thanks Anjali, seems like I'm heading in the right direction or at least aware of a lot of the key concepts design-wise for a mobile site. I like the idea of a clickable phone number!
     
  10. Anjali Banerjee

    Anjali Banerjee New Member

    Messages:
    11
    Happy to help :) Here's a follow-up article if it interests you.. One of the tools mentioned may be of use to you.
    http://web-woman.tumblr.com/post/30724736488/how-to-build-a-mobile-website
     
  11. sandbox

    sandbox New Member

    Messages:
    3
    Last edited: Oct 2, 2012
  12. Roddy

    Roddy New Member

    Messages:
    117
    A mobile website needs to be viewable on smart phones. Yours isn't. Here's a screenshot

    What's with all the unsupported browsers?
     
  13. sandbox

    sandbox New Member

    Messages:
    3
    What I have now is just a mockup design aimed for tablet device. I still work on the redesign when it comes to smaller devices. It is meant to be used as an app not a... mobile website.

    Sencha Touch framework only works with browsers that support the css webkit e.g. chrome, safari... mobile browsers
     
    Last edited: Oct 2, 2012
  14. Phreaddee

    Phreaddee Super Moderator Staff Member

    Messages:
    1,978
    id build from mobile first, so incorporate the smaller devices in your build.
    and make it a mobile website.
    when its complete push it on to an app.

    I don't know that just seems logical to me.
    and I would make it to work on all browsers (save for the usual suspects that'll get their own bastardised version of the website)

    and I wouldn't "touch" Sencha Touch with a 10 foot pole.
     
  15. sandbox

    sandbox New Member

    Messages:
    3
    I agree what you are saying. This project is a bit different, it is a diesel engine back up generator app. There is no website about this product. The manufacturer sent us the data and we converted it into user selectable options. And they wanted to see the tablet version first...
     
  16. Roddy

    Roddy New Member

    Messages:
    117
    I wondering why you posted the link to this site in answer to a question about mobile website design? An experimental site like this might be better posted in the Reviews section with a better explanation of what it is.

    Perhaps you could explain your thinking?
     
  17. webstudent123

    webstudent123 New Member

    Messages:
    171
    User Agent

    You can view the mobile version of a site by changing the user-agent - for iPad you have to use Safari (I think) -

    For how to change the user-agent:
    http://www.google.com/search?client=safari&rls=en&q=change+user+agent&ie=UTF-8&oe=UTF-8

    Also, if you want a headstart get 'HandHeld' from ElegantThemes and make life easier with WordPress.
     
  18. Roddy

    Roddy New Member

    Messages:
    117
    Changing the user agent in Safari isn't going to tell you much.

    Use the iOS Simulator app that comes with the Apple Developer tools. Its just been updated for iOS 6.
     

Share This Page