These days, mobile devices are doing more and more, they can even access your website. If you website is not formatted to fit one of these mobile devices, the user will have to zoom in and out, and will have to scroll left right, up and down to get to your links. For some people, this is fine, but not for YOU! You want to make it easier for mobile users to access your content.
In this tutorial (perhaps the shortest tutorial ever), we'll set up a mobile homepage, we'll add resize code (explained below), and finally, we'll add a "detect and redirect" line of code to your main homepage that will detect if the user is on a mobile device (iPhone, Android or Windows Phone), if they are one of these, the code will redirect them to your new mobile sight, where they will have an easier time accessing your content.
This is intended for intermediate HTML users (you have to know where the is at, and you should have access to Photoshop and Dreamweaver. Happy designing to you! Good luck with your mobile site.
Tip: For your "contact" hotspot, add the "mailto:" command, so that when people click it, the user's default email app will open up and will populate a message with your address. It should look like this...mailto:youremail@email.com. Be sure however to check the post after this regarding protecting your mailto command.
SETUP / DESIGN:
1. Make a folder in your site called “mobile”.
2. Create a 320 x 480 Photoshop File and design your mobile homepage however way you like. This size fits great on Android. On iPhone, the cutoff (fold) line is about 360 pixels down. Be sure nothing important is below this line, or iPhone users will be forced to scroll. Save this image out as a jpg into your mobile folder.
3. In Dreamweaver, embed this image, and center it. Add hotspots for your interactivity (select image > hotspots are in the lower left hand corner of your screen). Program your hotspots by linking them to any URL or any file. Save this html file as the "index" page of your mobile folder...almost done.
= = = = = = = = = =
SIZING:
On this new html page, paste the following into the head of your mobile website index page so that your design fits the android/iphone screen exactly. If you don't do this, your site will be small, and you will force visitors to your mobile site to zoom in. Not cool.
<;meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;">
= = = = = = = = = =
REDIRECTING:
Last step...Paste the code below in the of your MAIN home/index page. Above your title is a good spot. This is the code that redirects users with Android or Iphone to your mobile site. Put your mobile URL on the "www.yourwebsite.com/mobile" line. This will redirect users to your new mobile site...that's about it. Good luck!
<script type="text/javascript">
if ((navigator.userAgent.match(/iPhone/i)) ||
(navigator.userAgent.match(/Android/i)) ||
(navigator.userAgent.match(/iPod/i)))
(navigator.userAgent.match(/Windows Phone OS 7/i)))
{
location.replace("http://www.yourwebsite.com/mobile");
}
</script>
YOU CAN ALSO VIEW THE TUTORIAL HERE >>
http://www.randolfdimalanta.com/mobile/mobile_tutorial.html
Sorry for the redirect, some of the post was not appearing on this blog. Shoot!
Posts
3 comments:
I hope you have write a good article related to this topic with comparing to other blogs, certainly I was read some other blog then your blog was great than other. Best wishes for future.Web Development Services
This is a must read blog. The technical help presented on this blog is just so amazing. I don’t know where else I would have got all the information I had, but from this article. I count myself lucky for having come across this great work. I’m so impressed with this blog.
Joomla developer hire
Great Information, i really appreicate your efforts taken for the same to share it with all.
website development
Post a Comment