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
HTML and CSS is not open enough? o.o
There is not a lot you have to do if its just textual content…
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:
/* 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
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.
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.
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
How about for iOS applications … any recommendations for open source tools.
Thanks 
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 . . .
Perhaps these links will give you an idea of what you can do. Look at the Mobile Frameworks section:
Mobile Frameworks are code that wrap around your content to make it viewable nicely on smartphones.
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:
http://designmodo.com/mobile-website-templates/
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.
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.
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.
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.