Welcome to the RapidWeaver Community Forums, where you can chat with RapidWeaver users from around the world!
How to: Make a mobile version of your website
abelincolnzombie
Posts: 4Members
You've paid good money for this. You've seen all of the various themes, plugins, and user guides that you could buy to help you make a mobile version of your website. Well, here's something else to get you started. What I'm about to post is probably a) shoddy to the seasoned programmer b) able to be found already on the forum, but it should be free or built in already.
Step 0. Download Xcode from the Mac App store. It is free, and comes with an iPhone/iPad simulator. When you load the app, you can load your Rapidweaver exported web pages into it from Mobile Safari. Just direct it to:
Easy. You don't need to fumble with uploading your site to a server OR resorting to buy an iPhone or an iPad for testing. I just saved you $800. Yay!
Step 1. The first thing that you're going to do is make your website for a desktop. When you're done, make a subdomain on your server. This will be the best thing for mobile devices to go to, something along the lines of "m.yourdomain.com". Optionally, you can just make it look like yourdomain.com/mobile if you don't have access.
Step 2: Let's start designing your silly mobile page. Rapidweaver makes their own theme, but it turns out that you can modify existing ones with this code I'm about to give you. So pick one, make a page, and throw in this to your site's inspector -] header -] header.
Throw this into your Header --> CSS
Make sure your page width is variable, or at least 900px.
Throw this into your photo page's CSS (no Flash, please):
I've only tested the iPhone theme photo pages, but I'm sure it will work on others. At this point, you can really just start designing and messing with it.
Step 4. When you're done, upload your newly made site to the mobile domain. Open the Home info of your desktop site, navigate to Header, and paste in the following code into javascript (oh God I hope it doesn't break the tables just double click if it does OK?) This is a redirector:
Please note where you put your subdomain! You can keep doing this for pages if you made them in your mobile version. Wow!
Step 0. Download Xcode from the Mac App store. It is free, and comes with an iPhone/iPad simulator. When you load the app, you can load your Rapidweaver exported web pages into it from Mobile Safari. Just direct it to:
file:///Users/[Your Home Folder Name]/Documents/WhereverYouDumpedIt
Easy. You don't need to fumble with uploading your site to a server OR resorting to buy an iPhone or an iPad for testing. I just saved you $800. Yay!
Step 1. The first thing that you're going to do is make your website for a desktop. When you're done, make a subdomain on your server. This will be the best thing for mobile devices to go to, something along the lines of "m.yourdomain.com". Optionally, you can just make it look like yourdomain.com/mobile if you don't have access.
Step 2: Let's start designing your silly mobile page. Rapidweaver makes their own theme, but it turns out that you can modify existing ones with this code I'm about to give you. So pick one, make a page, and throw in this to your site's inspector -] header -] header.
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name = "viewport" content = "width = device-width">
Throw this into your Header --> CSS
a { text-decoration:none; }
#navcontainer a#show_sidebar {
text-indent: -999em;
padding: 0;
display: block;
width: 0px;
height: 0px;
position: absolute;
right: 0;
top: 0;
z-index: 100;
background: url(images/menu_button.png) no-repeat left center;
}
#contentContainer #content {
padding: 10px;
text-align: left;
}
Make sure your page width is variable, or at least 900px.
Throw this into your photo page's CSS (no Flash, please):
#navcontainer a#show_sidebar { text-indent: -999em; padding: 0; display: block; width: 0px; height: 0px; position: absolute; right: 0; top: 0; z-index: 100; background: url(images/menu_button.png) no-repeat left center; } .photo-links { padding-top: 10px; color: #000000; text-align: left; height: 35px; overflow: hidden; top: 0; left: 0; margin-right: 0; margin-top: 0; margin-left: 0; } .photo-caption { color: #909090; margin: 100px 15px 0; } .photo-title { margin: 0; padding: 0 0 0 0; height: 0px; width: 0%; display: inherit; font-size: 1.5em; font-weight: normal; color: #fff; left: 0; top: 43px; text-align: left; } .photo-background img { max-width: 90%; height: auto; margin: 15px 0 0; padding: 1%; background: #000000; #container { width: 15px; max-width: 5px; }
I've only tested the iPhone theme photo pages, but I'm sure it will work on others. At this point, you can really just start designing and messing with it.
Step 4. When you're done, upload your newly made site to the mobile domain. Open the Home info of your desktop site, navigate to Header, and paste in the following code into javascript (oh God I hope it doesn't break the tables just double click if it does OK?) This is a redirector:
(function(a,b){if(/android|avantgo|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|e\-|e\/|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(di|rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|xda(\-|2|g)|yas\-|your|zeto|zte\-/i.test(a.substr(0,4)))[removed]=b})(navigator.userAgent||navigator.vendor||window.opera,'http://m.yourmobilesite.com');
Please note where you put your subdomain! You can keep doing this for pages if you made them in your mobile version. Wow!
Comments
If you want to skip a redirector, you may choose to find a template which looks good in both formats, but I doubt that this is truly possible. If you have a blog or something else which is always updated, I'm afraid that you may be out of luck. This process is well-suited for business or mostly static websites.
Make sure for the photo page that you put the other header stuff in place (I forgot to mention that). Only a few themes, including the iPhone theme actually work using this process. You're going to have to go by trial and error to see what will take (the one that looks like a notepad works and looks great!). Sizes should actually be under or around 900 for the site to display correctly. Choose to hide the sidebar when you can.
If you're really itching to size something down, you can try to get rid of the header image if you poke around in the style.css file exported. All you'd do is find the weblink to the terrible background that you're looking for (you may find it in a folder, and can search for its name using TextWrangler). Then, you'd take the code between '}{', and paste it into your header's CSS with the link line deleted. This should work in theory.
Please limit yourself to about four pages using the 'iPhone' theme. You can post tons of links underneath of them, and I strongly encourage you to use tables using raw HTML pages.
If you're not great at HTML, this is a good start for you.
edit: I am very much against having a separate tutorial site for $80/year, or having to shell out $25 just for a CSS template. I think Rapidweaver is very powerful, but should have more functionality out of the box. I am a capitalist by nature, but if I have made a dent in some of the gouging rampant in these parts, I think that I've done my duty. Happy coding, and good luck.
Do you need Xcode for anything else apart from the simulator? - I know it's a 10Gb install - or at least that's what it robbed off my hard drive.
Phil
RapidWeaver Training and Theme Modification (including header graphics design)
Aniseed Media Design - Brighton Website Design
Follow me on Twitter
Xcode can open up CSS sheets, but I suggest TextWrangler for that. The simulator is really the only thing I've been using so far on this project, and it is very accurate as to what displays on the actual devices. The biggest challenge I have so far is making sure that the theme sizes well and looks good when rotated.
Drop this into 'Header'
Drop this into CSS:
Turn off header (blank) and switch to the lowest width style.
The photo page still has some weirdness, but I don't know how to fix it as of now. I've made it so it at least displays OK. I also want to propose to the developers of Rapidweaver that they implement a feature to switch to an alt CSS page if a mobile device is detected. This can be done through Javascript, but I don't have the code here.
I have a site I built several years ago that needs some updating, but I also want to design a non-flash mobile version, just using static images and better proportions. If you peek at the non-mobile version you will see why the client wants to keep the flash.
http://www.cordovastation.com/gallery/index.html
Where can I find the JavaScript to make it automatically load the mobile version when needed?
Thanks!
Margot Friend
Pura Vida Fitness & Spa
http://www.nimblehost.com/store/mobilize/
Phil
RapidWeaver Training and Theme Modification (including header graphics design)
Aniseed Media Design - Brighton Website Design
Follow me on Twitter
EDIT: Phil beat me to it by a few minutes.
Vasily
The High-Tech Coach
Margot Friend
Pura Vida Fitness & Spa
I've created a couple dozen sites using Mobile Fusion (for Blackberrys) and Phelix (for iPhones and Androids) - and am very, very happy with the way they've turned out. Keep in mind, though, that the website will look much better on an actual phone then within a desktop-simulator. As an example, the screenshots below show what a couple of my sites look like using a simulator and what it looks like on an iPhone. Notice how the menu stays out of the way until needed (the sidebar acts likewise), but within the simulator, it's a mess.
I've also implemented his Mobilize plugin on all of my non-aspx sites (only works with PHP which, I'd venture to say, virtually everyone on the RW is using). It's so easy to do, works flawlessly, and includes the ability for visitors to override the redirection and navigate to the desktop site should they want to. I can't speak highly enough of Nimblehost's mobile themes and Mobilze plugin (and no, I've never met Jonathan - I'm just a very happy customer).
Cheers,
Dave
"When you load the app, you can load your Rapidweaver exported web pages into it from Mobile Safari. Just direct it to:"
David