If you’re looking into developing a mobile website for your business or for your client make sure to checkout my mobile website and theme pack “emdot”, available exclusively on ThemeForest. For only $9 you get a fully functioning mobile site with 12 different themes, a validating contact form, a portfolio with mobile touch, an “add to home bubble” for iPhones and iPads, 50+ icons for the navigation, 20 social media icons, and a bunch more. Simply pop in your content and you’re ready to go. Well almost ready to go, the last thing you’re going to need is to redirect people to your new mobile website.

Redirecting people to your mobile website is easy enough by using a .htaccess file. Basically you say “if people visiting my website are on a mobile device send them to http://m.example.com, and if they aren’t on a mobile device send them to http://example.com”. This of course assumes that you setup a subdomain located at “m.example.com”.

After setting this up for a client I realized one problem with this. When setting up your mobile website you should have a link in the footer allowing the user to visit your full website (you most likely have some content on your full website that you don’t have on your mobile website). Your link would look something like this:

<a href="http://example.com">Visit full site</a>

Easy enough, except for one thing.. we redirected the users from the main site to the mobile site. So if they click the “visit full site” link they will be redirected back to the mobile site again.

The solution is to set a cookie which allows you to visit the full site without being redirected. Setting the cookie allows you to go from the mobile site to the full site, and visit any page on the full site once you’re there without being redirected back to the mobile site.

Step 1.

Setup your mobile site at http://m.example.com

Step 2.

Add the following link to your mobile site:

<a href="http://www.example.com?m=0">Full Website</a>

*If you’re using jQuery mobile (such as the emdot theme), you may need to add rel=”external” to your link, like this:

<a rel="external" href="http://www.example.com?m=0">Full Website</a>

Step 3.

Create a .htaccess file (which is just a regular file such as a .txt files renamed .htaccess). Add the following code and replace the 2 domain names. Upload the file to the root of your website. If you already have a .htaccess file simply add this code to the existing file.

*Notes: Make sure you don’t overwrite your existing .htaccess file by accident. This only works on Apache servers.

RewriteEngine on
RewriteBase /

# Check if this is the noredirect query string
RewriteCond %{QUERY_STRING} (^|&)m=0(&|$)
# Set a cookie, and skip the next rule
RewriteRule ^ - [CO=mredir:0:www.example.com]

RewriteCond %{HTTP:x-wap-profile} !^$ [OR]
RewriteCond %{HTTP:Profile}       !^$ [OR]
RewriteCond %{HTTP_USER_AGENT} "acs|alav|alca|amoi|audi|aste|avan|benq|bird|blac|blaz|brew|cell|cldc|cmd-" [NC,OR]
RewriteCond %{HTTP_USER_AGENT} "dang|doco|eric|hipt|inno|ipaq|java|jigs|kddi|keji|leno|lg-c|lg-d|lg-g|lge-" [NC,OR]
RewriteCond %{HTTP_USER_AGENT}  "maui|maxo|midp|mits|mmef|mobi|mot-|moto|mwbp|nec-|newt|noki|opwv" [NC,OR]
RewriteCond %{HTTP_USER_AGENT} "palm|pana|pant|pdxg|phil|play|pluc|port|prox|qtek|qwap|sage|sams|sany" [NC,OR]
RewriteCond %{HTTP_USER_AGENT} "sch-|sec-|send|seri|sgh-|shar|sie-|siem|smal|smar|sony|sph-|symb|t-mo" [NC,OR]
RewriteCond %{HTTP_USER_AGENT} "teli|tim-|tosh|tsm-|upg1|upsi|vk-v|voda|w3cs|wap-|wapa|wapi" [NC,OR]
RewriteCond %{HTTP_USER_AGENT} "wapp|wapr|webc|winw|winw|xda|xda-" [NC,OR]
RewriteCond %{HTTP_USER_AGENT} "up.browser|up.link|windowssce|iemobile|mini|mmp" [NC,OR]
RewriteCond %{HTTP_USER_AGENT} "symbian|midp|wap|phone|pocket|mobile|pda|psp" [NC]
RewriteCond %{HTTP_USER_AGENT} !macintosh [NC]

# Check if we're not already on the mobile site
RewriteCond %{HTTP_HOST}          !^m\.
# Can not read and write cookie in same request, must duplicate condition
RewriteCond %{QUERY_STRING} !(^|&)m=0(&|$) 

# Check to make sure we haven't set the cookie before
RewriteCond %{HTTP_COOKIE}        !^.*mredir=0.*$ [NC]

# Now redirect to the mobile site
RewriteRule ^ http://m.example.com [R,L]

Credit. I tried a few different scripts to find a solution that worked for me, and the above script was the winner. The original script came from this thread on Stack Overflow.

One great way to use fancyBox is to open Google Maps over your webpage. If you need to have a map but don’t have enough room on the page to embed the map you can integrate fancyBox with Google Maps and open the enlarged map when you click on a link. Checkout the demo and download. Since this latest release of fancyBox is responsive the frame around the map resizes based on the size of the browser window!

Note: The new version of fancyBox has different licensing, be sure to visit the website for full details to make sure you are using it correctly, and for all the customization details.

http://fancyapps.com/fancybox/

Old FancyBox video / browser large.

Old FancyBox video / browser small (and cutoff).

New FancyBox video / browser large.

New FancyBox video / browser small (and auto resized!).

Note: The new version of fancyBox has different licensing, be sure to visit the website for full details to make sure you are using it correctly, and for all the customization details.

http://fancyapps.com/fancybox/

The idea of creating responsive websites for real world business websites raises a few questions. The main question many designers and developers had (including myself) was “What about image galleries and sliders?”. Most websites have moved away from Flash in the last few years, many Flash animations being replaced by jQuery sliders. So how do you deal with a slider when developing a responsive website? Until now that left most people scratching their heads, but recently there have been some great responsive image sliders, galleries and plugins released.. so let me introduce my roundup of the 10 best responsive image sliders and galleries you can use on your website today(in no special order).. enjoy!

1. FlexSlider

2. Blueberry

3. Responsive Image Gallery

4. Responsive jQuery Slideshow

5. UnoSlider

6. Elastislide

7. Photoswipe

8. Responsive jQuery Carousel

9. Seamless Responsive Photo Grid

10. responsive thumbnail image gallery plugin

The Idea

What I decided to create was a transparent image overlay when hovered on. So when you hover over the image you would see a magnifying glass icon over a transparent black background. This would make it easy for the user to see where they are on the page. Another reason this method is better than simply changing the border color is that the magnifying glass gives an indication that the image will zoom in or expand when clicked on. I’ve create two ways of accomplishing this effect, one used jQuery, and the other uses only CSS3.

The Solution

Both methods use similar techniques, the only difference is weather they use jQuery or CSS for fading the opcaity. There is an image wrapped in a link. Inside of this link there is a span element. By setting the span to display block, setting the width and height of the span, and setting a higher z-index than the image; the span element covers the image. By setting the background image and color the span element hides the original image. Setting the opacity to zero on the span element allows the thumbnail image to be seen. To create the overlay effect we simply change the opacity of the span element to 70% (or whatever you want to use for your project). One method uses jQuery to apply this opacity, the other method uses CSS3 transitions and opacity settings.

Check out the demo, and grab the free download.

jQuery Method

The jQuery method is cross browser safe, and unlike the CSS3 method fades the magnifying glass both in AND out. This method uses jQuery to set the opacity of the span element when hovered over. Here is the HTML for this method:

<a class="image"  href="#">
	<span class="roll" ></span>
	<img class="imgborder" alt="" src="images/pic.jpg">
</a>

Here is the CSS for this method:

span.roll {
	background:url(images/mag.png) center center no-repeat #000;
	height: 346px;
	position: absolute;
	width: 347px;
	z-index: 10;
	-webkit-box-shadow: 0px 0px 4px #000;
	-moz-box-shadow: 0px 0px 4px  #000;
	box-shadow: 0px 0px 4px  #000;
}

And the jQuery:

$(function() {
// OPACITY OF BUTTON SET TO 0%
$(".roll").css("opacity","0");

// ON MOUSE OVER
$(".roll").hover(function () {

// SET OPACITY TO 70%
$(this).stop().animate({
opacity: .7
}, "slow");
},

// ON MOUSE OUT
function () {

// SET OPACITY BACK TO 50%
$(this).stop().animate({
opacity: 0
}, "slow");
});
});

CSS3 Method

With the increasing support for CSS3 in modern browsers I just had to try this method using CSS3 opacity and transitions. Here’s the HTML for the CSS (no javascript used) method:

<a class="image"  href="#">
	<span class="rollover" ></span>
	<img class="imgborder" alt="" src="images/pic2.jpg">
</a>

Here’s the CSS, where all the magic happens:

span.rollover {
	opacity: 1;
	-o-transition-duration: 1s;
	-moz-transition-duration: 1s;
	-webkit-transition: -webkit-transform 1s;
	background:url(images/mag.png) center center no-repeat #000;
	cursor: pointer;
	height: 346px;
	width: 347px;
	position: absolute;
	z-index: 10;
	opacity: 0;
}

span.rollover:hover {
	opacity: .7;
	-o-transition-duration: 1s;
	-moz-transition-duration: 1s;
	-webkit-transition: -webkit-transform 1s;
	-webkit-box-shadow: 0px 0px 4px #000;
	-moz-box-shadow: 0px 0px 4px #000;
	box-shadow: 0px 0px 4px #000;
}

Credits:
jQuery Fade Script
Magnifying Glass Image

1. Can you make a background behind individual Tweets?
2. Can you put the date on it’s own separate line?

As the case goes with a lot of things these days jQuery to the rescue! Check out the demo to see both of these things in action, and then continue reading to see how to accomplish these things with jQuery and download the source files.

View Demo

The jQuery and CSS code to make this happen came from Chris over at CSS-Tricks. I slimmed down and edited it to make it work for me. Here is a zip of the files used for the demo so you can download and edit it as you want.

Download Files

You’ll see in the head of the index page the jQuery which makes it work. The line you need to change is the following:

First replace the part I highlighted in Blue “ilz_” with your Twitter user name.

Next, replace “count=5″ with the number of tweets you want to show up on your page.

Other than that, you should be able to style the rest of the text, links, etc. as long as you know basic CSS. Enjoy!

The actual slider and website I created it for isn’t live yet. I used the base slider I created and used a few Apple images to show the general idea in the demo. Check out the demo, and then keep reading to see the details.

The original code for this slider is jCarousel. I figured I would put up this demo to show how with a few modifications to the code you can create a useful product slider. You’ll notice how it’s created with an unordered list. I also showed how you can use rollover effects, and link each image to a webpage; which is obviously the point of the slider in the first place.

The slider has an autoplay feature. I added some code to the original jCarousel to make the slider go only one product at a time. This is in the head of the index.html file. The line “scroll: 1“. If you want it to scroll 2 items, change it to 2, and so on.

Now I admit the code here isn’t the prettiest, but as I mentioned this was created strictly for the demo, to show some of the possibilities. Grab the download above and use it however you want. Enjoy!