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.

The dashboard experience has been improved for iPads and other tablets, which will help people on the move. Other features of the dashboard include a responsive design of some elements, HTML5 doctype, a new dashboard welcome feature and new help tabs. A new drag-and-drop feature has made uploading different types of content a breeze.

This latest release is exciting for developers worldwide, and reminds me how happy I am to be part of the WordPress community.

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/

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

I’m not going to cover the basics of what Google+ is and why it’s important for you to use, I’m simply going to get you up to speed on how to quickly create a business Google+ page for your business (consider Google+ as a combination of Facebook and Twitter).

Starting your Google+ Business Page

The first step is to go right here and choose which category your business falls into (or none if it doesn’t). Depending on which category you choose the next step might be slightly different (Google may have you verify the address or contact information of your business).

Designing your Google+ Business Page

The first step to customizing your page is to upload your profile photo. If you’re creating it in Photoshop I would recommend making it 200px by 200px.

After you have the profile photo upload you’ll want to click on the About tab to edit the basic information about your business.

One of the easiest ways to quickly customize your Google+ business page is to add 5 custom photos to the top of the page, as seen here:

The 5 photos at the top of the page are called “scrapbook photos”, you add these photos by clicking on the blue “edit profile” button, and then double clicking the empty white space where the photos will go. Once uploaded, save your edits and you will see the photos at the op of the page when you return to the homepage.

Once you have all your information and photos updated make sure to send a new status update to the page, add people to your circles, send out a tweet and of course invite your Facebook friends to add you to their circles.

Speaking of, don’t forget to add WebDesign&Such to your circles!

Here are 10 great looking WordCamp website designs:

1. SF.wordcamp.org

2. Kobe2011.wordcamp.jp

3. Capetown.wordcamp.org

4. WordcampMidAtlantic.com

5. WordcampSeattle.org

6. WCkansascity.or

7. Atlantawordcamp.com

8. OC.wordcamp.org

9. Sandiego.wordcamp.org

10.WordcampJerusalem.com

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. PremiumPixels.com

Premium Pixels has top notch free graphics. Instead of designing your button from scratch, pop over to this site to see if there is one that you can download and edit for your application.

2. 365psd.com

When I’m looking for free website graphics, I always make sure to check out this great site.

3. DesignMoo.com

Design Moo is one of the most popular resources online for free website graphics.

4. IconFinder.com

If it’s icons you’re after, make sure to check out Icon Finder. This powerful search tool gives you a ton of results for common searches like ‘Twitter’, or ‘Facebook’; many icons are free to use on commercial projects.

5. SubtlePatterns.com

This site is rather young, but the quality of the free website background patterns that they have will have me coming back to the site for some time.

6. 960.gs

If you code websites you should be using this grid system. I don’t actually use their ‘code’, but the Photoshop website templates alone make them such a valuable resource.

7. HTML5BoilerPlate.com

HTML5 kicks ass. The HTML5 BoilerPlate offers a complete template with some amazing code. This is one of the best resources on the web without a doubt if you’re a coder.

8. html-ipsum.com

Where do you copy your ipsum from? This website is great because it offers a whole variety, from a simple paragraph to more complicated lists, headings, etc. Great for quickly setting up dummy content on a website.

9. ScriptSrc.net

Don’t waste time tracking down the latest version of jQuery for your next project. These guys keep the link up to date with each release. I must go to this site at least every other day.

10. Placehold.it

This site might be not known to a lot of people, but it’s one of my favorites. Say you’re setting up a website and you need place holder images. Simply grab the code from this site, change the dimensions of the image right in your code, and voila!

Here’s the CSS used for the Post-it in the demo (which is a div with class “post-it”).

.post-it {
background:#fefabc;
padding:15px;
font-family: 'Gloria Hallelujah', cursive;
font-size:15px;
color: #000;
width:200px; 

-moz-transform: rotate(7deg);
-webkit-transform: rotate(7deg);
-o-transform: rotate(7deg);
-ms-transform: rotate(7deg);
transform: rotate(7deg);

box-shadow: 0px 4px 6px #333;
-moz-box-shadow: 0px 4px 6px #333;
-webkit-box-shadow: 0px 4px 6px #333;

}

You can customize your CSS Post-it note by changing the background color, changing how much the note is rotated, or changing the font. Here is the font I used for the demo: Gloria Hallelujah

ThemeShock CSS3 Shadow Generator

CSS3.me Generator

CSS3 Generator

CSS3 Button Generator

Border Radius Generator

CSS3 Maker

CSS3 Box Shadow Generator

css3-click-chart

CSS Corners

CSS3 Button Generator

Theme Shock CSS Text Shadow

Style Master

Colorzilla Gradient Generator

CSS3 Selectors Test

HTML5 Readiness

Font Squirrel Font Face Generator

CSS3 Please!

CSS Gradient Generator

CSS3 Gradient Generator

CSS-Tricks Button Generator

Border Image Generator

Column Generator

CSS3 Transform

CSS Warp

Button Maker