Protected Mailto Command:

 I like Spam, especially in Musubi, but its not cool when you get it in your inbox. For many of us who maintain and design websites, the mailto command has been the main way to create a hotlink on our webpages. Wasn't it cool to click a link and have an email client open up, start a new message, and have your address already in the "To:" line? When I saw that, I thought it was a great way for clients to stay in contact with you. 

The drawback, is that this "mailto" command and the email address associated with it, is harvested by robots, thus resulting in a flood of spam mail. Bad, very bad. So I started looking for possible solutions. 

I recently tried this Javascript method that encrypts your email address and it can be found on this page below...

http://www.killersites.com/webDesignersHandbook/emailObscucator.htm

On Version 2, you'll have a crazy looking email address that looks like this...

mailto:you@e

It looks crazy, but this email address works just fine, you can copy and paste it in your HTML and it looks exactly like how your mailto command email would work. I know this isn't 100% foolproof, but it may help a little. The reason why it works is because the code removes the "@" symbol and encrypts the letters making it tough for a robot to figure out. At least that's the idea. I'm gonna give it a shot.

Remember too that a sure fire way to deflect spam is to use a hearty spam filter. The one in gmail works amazing for me. I get little or no junk mail at all. 

Designing a Mobile Version of Your Website: The Easy Way

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!