SitePoint Sponsor

User Tag List

Results 1 to 15 of 15
  1. #1
    SitePoint Member
    Join Date
    Feb 2012
    Posts
    4
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Open source options for developing a site for mobiles.

    Sorry if this is a daft question. Are there any good opensource (free) solutions to build a website that is suitable for viewing on mobile phones? I have a couple of sites that are content only that I think would benefit from having a version of the site on a subdomain that is suitable for smart phones.

    Have you used one and what was the result. I would love to see some samples if anyone has built one.

    Thanks in advance
    KT

  2. #2
    . shoooo... silver trophy logic_earth's Avatar
    Join Date
    Oct 2005
    Location
    CA
    Posts
    9,013
    Mentioned
    8 Post(s)
    Tagged
    0 Thread(s)
    HTML and CSS is not open enough? o.o
    There is not a lot you have to do if its just textual content...
    Logic without the fatal effects.
    All code snippets are licensed under WTFPL.


  3. #3
    Foozle Reducer ServerStorm's Avatar
    Join Date
    Feb 2005
    Location
    Burlington, Canada
    Posts
    2,699
    Mentioned
    89 Post(s)
    Tagged
    6 Thread(s)

    Post

    @KatieT

    In CSS there are media queries that let you reflow a single HTML page's content targeted by size. Although this is more of CSS than it is PHP.

    A quick overview:
    HTML Code:
    /* LAYOUT -------------- */
    #wrapper {    margin: 0 6%;}
    #header {
        margin: 0 0 20px 0; 
       overflow: hidden;
        padding: 0 0; 
       position: relative;
    }
    .ie6 #header {
        width: 100%;
    }
    #nav-main {
        float: right; 
       margin: 40px 0 0 0;
    }
    /* MEDIA QUERIES ----------------------------------- */
    @media screen and (min-width: 1200px) {
      #nav-main {
           position: fixed; 
           top: 260px;
           width: 13%; 
           margin: 0;
            -moz-box-shadow: 0 0 8px hsla(0,0%,0%,.1); 
           -webkit-box-shadow: 0 0 8px hsla(0,0%,0%,.1); 
          box-shadow: 0 0 8px hsla(0,0%,0%,.1); 
           -moz-border-radius: 3px;
            -webkit-border-radius: 3px;  
          border-radius: 3px; 
           background: hsla(0,0%,100%,.3); 
           text-align: right;
        }
    }
    @media screen and (max-width: 760px) {
      em.header_img {
            float:left;
            display: block;
            background:  url(images/header_background_760px.jpg) no-repeat left top; 
           width: 900px;
            height: 201px;    
      }
    }
    @media screen and (max-width: 550px) {
        em.header_img {
            display: none;
        }
    }
    @media screen and (max-width: 400px) {
       #header {
          margin: 0;
          overflow: hidden; 
          padding: 0 0;
          position: relative;
       }
    }
    @media screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 480px) {
      #header {
        margin: 0;
        overflow: hidden;
        padding: 0 0;
        position: relative;
      }
    }
    You can see that with the media queries one can target different screen/browser sizes in this way. You can explore more of this in the CSS forum.

    Regards,
    Steve
    ictus==""

  4. #4
    Non-Member
    Join Date
    Apr 2010
    Posts
    298
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I actually have not seen many software options on the market dedicated to mobile site creation. I think this is where the industry is lagging in terms of creation ability. Of course you can easily make a mobile site with HTML and CSS but I feel that is too old fashion for a market that is so mobile driven.

    I wonder if anyone has an iPhone app in the works that makes mobile sites.

  5. #5
    SitePoint Wizard bronze trophy
    Join Date
    Jul 2006
    Location
    Augusta, Georgia, United States
    Posts
    4,151
    Mentioned
    16 Post(s)
    Tagged
    3 Thread(s)
    If they are small sites that are mostly static pages I would recommend jQuery Mobile as most efficient, ease of implementation and maintenance solution.
    The only code I hate more than my own is everyone else's.

  6. #6
    SitePoint Member
    Join Date
    Feb 2012
    Posts
    4
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    @oddz
    Quote Originally Posted by oddz View Post
    If they are small sites that are mostly static pages I would recommend jQuery Mobile as most efficient, ease of implementation and maintenance solution.
    Many thanks, this looks like an option. Do not wish to build a site from the ground up and would prefer to use software options to investigate their suitability. If that fails then I guess its back to the drawing board.

  7. #7
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,207
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Maybe this is of some use? 320 and up

  8. #8
    SitePoint Zealot
    Join Date
    Aug 2009
    Location
    Bavaria, Germany
    Posts
    106
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I just started with jQuery Mobile myself and it's very simple for small websites. When I started I found these frameworks as well (haven't tried them yet):
    jQTouch
    Sencha Touch
    Never argue with an idiot
    they drag you down to their level
    and then beat you with experience

  9. #9
    SitePoint Member
    Join Date
    Feb 2012
    Location
    Cebu
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    How about for iOS applications .. any recommendations for open source tools.

    Thanks

  10. #10
    SitePoint Author silver trophybronze trophy
    wwb_99's Avatar
    Join Date
    May 2003
    Location
    Washington, DC
    Posts
    10,633
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Kinda pointless -- you need a mac, and you need an apple developer license so xcode is free. It does use lots of open source bits to do it's magic and you can use open source libraries in your app if it makes you feel better . . .

  11. #11
    SitePoint Wizard
    Join Date
    Feb 2007
    Location
    Southern California
    Posts
    1,340
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Perhaps these links will give you an idea of what you can do. Look at the Mobile Frameworks section:
    http://iphonedevlog.wordpress.com/ph...va-crib-sheet/

    Mobile Frameworks are code that wrap around your content to make it viewable nicely on smartphones.

  12. #12
    SitePoint Addict
    Join Date
    Nov 2009
    Posts
    310
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Katie,

    Open source doesn't always mean free but you can find some free mobile templates around. Also, there are free plugins for WordPress sites. Here is a sample list:

    Code:
    http://designmodo.com/mobile-website-templates/

  13. #13
    Non-Member
    Join Date
    Feb 2012
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'd avoid WordPress mobile themes. While it is an easy fix, WP-mobile themes are some of the least customizable interfaces around. It doesn't seem like a problem at first, but if you want to add or change anything later... good luck.

    Definitely worth the extra work to do it yourself or even search around for other easy mobile conversions that have more customizability.

  14. #14
    SitePoint Wizard bronze trophy
    Join Date
    Jul 2006
    Location
    Augusta, Georgia, United States
    Posts
    4,151
    Mentioned
    16 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by LarsK
    I just started with jQuery Mobile myself and it's very simple for small websites. When I started I found these frameworks as well (haven't tried them yet):
    jQTouch
    Sencha Touch
    I have spent over 3 months with Sencha Touch2 and while cool at first glance I wouldn't recommend it. There are just to many issues that do make it suitable for production. The first being it won't work without JavaScript. The second being it only works in modern webkit browsers. The third being the staff at Sencha only seem concerned with specific problems and will postpone vital fixes or won't even implement them. For example, I submitted a vital issue regarding XML parsing and it has yet to fixed. This was over 2 months ago. Fourth is that unless an ideal connection is established the initial load time is unbearable. They may market the initial load time as much faster than Touch 1 but the sites I've built with Touch 2 still take 10+ seconds to load on average to load even after aggregation of the all JS usng an ideal production build.

    Fifth it seems like every time a new version is released something breaks. For example, I had both my sites working flawlessly on Touch 2 the initial general release version. However, when I swapped out the next upgrade the complete site(s) broke. They said that the interface was not suppose to change once the beta came out but it has been changing since breaking previous work resulting in hours of added debugging work. Which is understandable for alpha but not beta onwards to general release. This shows a sever lack of testing and I just got sick of dealing with it.

    Off Topic:


    I figured this was a good place to vent about Sencha Touch 2 because it irks me that I spent so much time with it only find the community/support sucks and the code base does not seem to be stable even though the second production version was released. The biggest problem though is by far the initial load time.


    Those projects have since been killed and we have been following down the path of separate sites built on preexisting technologies with mobile optimizations. All the frameworks seem to eliminate page loading to some extent but from my experience this always seems to result in more problems than it solves. In testing it seems more appropriate and stable to actual refresh pages than hijack links and inject content dynamically. That always seems to lead to more problems especially when an internet connection is less than ideal. Which is pretty much what all the frameworks seem to do to achieve that app like interface. I have ran into nothing but problems and things that make me look like an idiot because of "mobile" frameworks.

    At this point I say ig you can get away with it use media queries and/or responsive techniques. Otherwise create a separate site. If nothing else it will give you a chance to clean-up existing logic one day perhaps also supporting the desktop site under the same code base. That is what I have decided to do for all my larger mobile projects considering the sites where created 5+ years ago with less than ideal practices and mark-up. So popularity of mobile has given use a chance to at least start clean in time hopefully deprecating the current desktop sites and using the mobile one with semi-responsive approach.
    The only code I hate more than my own is everyone else's.

  15. #15
    SitePoint Enthusiast
    Join Date
    Jul 2008
    Location
    Washington DC
    Posts
    63
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I agree that jQuery Mobile framework might be just what you are looking for. I haven't used it yet, but I have been studying it intensely.

    http://jquerymobile.com/


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
  •