Can anyone recommend me a tutorial for converting a fairly simple website that mostly contains information to a mobile version for tablets and smartphones with OS' such as iOS, Android and WP7? Any other tips would greatly be appreciated as well.
Got a tip for us?
Let us know
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.
Mobile version of a website?
- Thread starter definitive
- Start date
- Sort by reaction score
Here's a tutorial for responsive web design using HTML and the LESS framework *looks pretty interesting, though I've not had a chance to implement anything like it myself yet.
Why would you want to create an app for a website? I would personally set up a mobile version of your website, so that people don't have to visit an app store to view your content. Much easier for the end user.
After looking through it, I don't think that it's what I'm looking for. I'd prefer to have two separate versions of the site, because looking through what the framework offers, I don't think it would work well with what I already have made. The site I have now wouldn't work too well with scaling between browsers, so I'd prefer something very simple instead that I could maybe point from mobile.websiteurl.com instead.
What should I be looking for? Info on how to do it or templates?
Not sure if my initial post was clear or not, but what I'm looking to do is make a mobile version (html) of a website I've already made in the past. I'm looking for a good, but fairly easy to follow tutorial or maybe even a simple template that would allow me to do it. I have no interest in building apps.
Some things I found
The easiest solution would be loading a new CSS specifically for mobile browsers, keeping your HTML intact.
http://speckyboy.com/2010/10/07/designing-a-mobile-stylesheet-for-your-website/
I'm not sure if this is possible for your particular website, but here is an aggregate of resources that may be able to help you.
http://www.noupe.com/how-tos/tutorials-for-making-your-website-mobile-friendly.html
In particular, this link looks fairly reasonable, as it seems you are not using any frameworks and more just HTML.
http://www.elementfusion.com/tutorial-optimizing-your-website-for-mobile-devices
Good luck!
The easiest solution would be loading a new CSS specifically for mobile browsers, keeping your HTML intact.
http://speckyboy.com/2010/10/07/designing-a-mobile-stylesheet-for-your-website/
I'm not sure if this is possible for your particular website, but here is an aggregate of resources that may be able to help you.
http://www.noupe.com/how-tos/tutorials-for-making-your-website-mobile-friendly.html
In particular, this link looks fairly reasonable, as it seems you are not using any frameworks and more just HTML.
http://www.elementfusion.com/tutorial-optimizing-your-website-for-mobile-devices
Good luck!
The thing that I am having difficulty understanding is how I would go about omitting some parts of the site if I was simply going to use a second css file for mobile devices. For example, I don't want to include certain large images, or certain text that's being displayed on the pages. Also, I have some javascript stuff on the current site ( an accordion script), and I'd like for it to show up on as many different phones as possible, though I am aware that there are many older phones that probably won't work with it. I also have a php page with a contact form, and I don't know how that would factor into things, especially if I'd decide to skip the page, and have a html version one instead to simply list all the contact info as text. This is why I'm leaning towards making a separate mobile version of the site.
Media Queries are the first thing you should research.. that will give you the CSS separation you are looking for...
Thanks, I'll look into it.
Another question. Say I decide to simply code a mobile version of the website instead of using an alternative CSS file. How would I be able to auto forward mobile devices to it without simply having a mobile version link on the front page?
Another question. Say I decide to simply code a mobile version of the website instead of using an alternative CSS file. How would I be able to auto forward mobile devices to it without simply having a mobile version link on the front page?
You would need some javascript to redirect mobile users, such as these snippets.
For my websites, I pretty much always build in Drupal. Theres a great drupal module for this, Mobile Tools.
For my websites, I pretty much always build in Drupal. Theres a great drupal module for this, Mobile Tools.
Instead of reinventing the wheel, why don't you change to a CMS such as Wordpress and use something such as wp touch? (I use the pro version on my site).
I was thinking of using WordPress, but I am not that advanced with building a website in it (not a blog).
Safari Web Content Guide.
The "Optimizing Web Content" section covers conditional CSS, and the fact that iOS Safari doesn't use the @media handheld rule. You can also make screensize-specific media rules, so the CSS differs for wide vs. narrow screens.
The "Optimizing Web Content" section covers conditional CSS, and the fact that iOS Safari doesn't use the @media handheld rule. You can also make screensize-specific media rules, so the CSS differs for wide vs. narrow screens.
Should be straightforward
I'd look at JQtouch and/or Sencha Touch. I have heard they are easy to use and you get nice pretty results without having to do too much coding.
Hope this helps,
Rob
I'd look at JQtouch and/or Sencha Touch. I have heard they are easy to use and you get nice pretty results without having to do too much coding.
Hope this helps,
Rob