letscounthedays » Tutorial http://www.shayhowe.com The Online Portfolio of Creative Professional Shay Howe Fri, 02 Dec 2011 15:15:32 +0000 en hourly 1 CSS3 Support with Modernizr http://www.shayhowe.com/tutorial/complete-css3-support/ http://www.shayhowe.com/tutorial/complete-css3-support/#comments Wed, 09 Mar 2011 03:59:37 +0000 Shay Howe http://www.shayhowe.com/?p=1169
  • CSS3 Animated Owl Tutorial
  • HTML5 & CSS3 Development Talks
  • Hyperlink CSS Attribute Selectors
    • ]]>     Designing with CSS3 Support & Alternative Fallbacks Designing with CSS3 Support and Alternative Fallbacks

    CSS3 is a hot topic these days. Designers and developers are starting to widely utilize CSS3 and new tutorials are popping up nearly everyday. As a designer it is an exciting time to be at the forefront of it’s development. There are, however, many designers and developers that see browser support for CSS3 as insufficient. In their defense, not all clients are open to letting their websites look moderately different from browser to browser.

    Thankfully Faruk Ateş, Paul Irish and Alex Sexton have developed a script, Modernizr, that detects CSS3, as well as HTML5, browser support and allows us to take advantage of CSS3 in compatible browsers while providing alternative fallbacks to incompatible browsers. The script adds a unique class to the html element of a page specific to each CSS3 property supported. As an example, in browsers that support CSS3 border radius a class of borderradius will be added to the html element, while in browsers without support for CSS3 border radius a class of no-borderradius will be added to the html element. This opens up a world of opportunities, giving us just what we need to fully implement CSS3 without worrying about incompatible browsers.

    View a Sample CSS3 Menu with Fallbacks

    Best viewed in Safari or Chrome.

    Putting Modernizr and CSS3 to Use

    I built the following sample navigation to demonstrate how Modernizr works with CSS3 and how to build out fallbacks for incompatible browsers. With the help of Modernizr, the benefits of this navigation include:

    • 100% compatible with all browsers
    • No images and no flash for modern browsers with CSS3 support
    • One image for depreciated browsers without CSS3 support

    The Code

    Step 1: The HTML Structure

    <!DOCTYPE HTML>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<title>CSS3 Navigation</title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>

<h1>Sample Navigation</h1>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Our Services</a></li>
<li class="last"><a href="#">Contact Us</a></li>
</ul>

<script src="modernizr-1.7.min.js"></script>
</body>
</html>

    The HTML here is pretty cut and dry. We have the basic structure of an HTML5 document, including a heading and an unordered list with a set of links. A few things to note here:

    • The no-js class on the html element
    • The last class on the last li element within the unordered list
    • The Modernizr script included at the bottom of the document

    Once we include the Modernizr script at the bottom of the document we need to set it into action with adding the no-js class to the html element. The last class on the last li element is in place for older browsers which do no support the :last-child pseudo-class.

    Step 2: Adding General Styles to the Heading

    h1 { 
color: #222;
font-size: 15px; 
line-height: 36px; 
margin: 0;
padding: 0 10px; }

    Before we jump into the CSS3 and specific property support we declare the general styles for the heading.

    Step 3: Declaring Heading Styles for Browsers with CSS3 Support

    .cssgradients h1 { 
background: -moz-linear-gradient(#f5f5f5, #d9d9d9);
background: -webkit-gradient(linear, left top, left bottom,
	    from(#f5f5f5), to(#d9d9d9));
border: 1px solid #bbb;
-moz-border-radius: 4px 4px 0 0; 
-webkit-border-radius: 4px 4px 0 0;
border-radius: 4px 4px 0 0;
-moz-box-shadow: inset 0 1px 0 #fff; 
-webkit-box-shadow: inset 0 1px 0 #fff;
box-shadow: inset 0 1px 0 #fff;
height: 34px;
width: 198px; }

    First up we use the Modernizr class of cssgradients to target browsers who specifically support this CSS3 property. Equally, we could use a borderradius or boxshadow class since we will be using these properties as well. We will be using CSS3 gradients later on so we will choose the cssgradients class to keep everything consistent.

    Within this CSS3 please note that we are using the old WebKit gradient syntax. The new WebKit gradient syntax will mirror that of the Mozilla syntax however at the time of publish the new syntax is only viewable within the WebKit Nightly builds.

    Step 4: Declaring Heading Styles for Browsers without CSS3 Support

    .no-cssgradients h1 { 
background: url("bg.png") 0 0 no-repeat;
height: 36px;
width: 200px; }

    To target browsers without CSS3 gradient support we use the no-cssgradients class. In place of all of the CSS3 declarations we used before we now use a background image instead.

    Step 5: Adding General Styles to the Unordered List and Links

    ul { 
list-style: none;
margin: 0;
padding: 0;
width: 220px; }

a {
border: 1px solid #bbb; 
border-bottom: 1px solid #ccc;
border-width: 0 1px 1px 1px;
color: #3690cf;
display: block; 
font-weight: bold; 
line-height: 30px; 
padding: 0 10px; 
text-decoration: none;
-moz-transition: all .25s ease-in-out;
-webkit-transition: all .25s ease-in-out;
transition: all .25s ease-in-out; }

a:hover {
background: #fff;
color: #222;
padding: 0 10px 0 18px; }

    As with our heading before, we will declare all of the general styles for the unordered list and links. These styles apply to all browsers and are unspecific to browsers with or witout CSS3 support.

    Within the a element CSS rule set we use the CSS3 transition property. This property will be ignored by browsers that do not support it however using it here will prevent us from having to use another CSS rule set specific for CSS3 links. Additionally it is worth noting that the transition value is set to all, which will transition all of our priorities including color, background-color, padding, opacity, and more.

    Step 6: Declaring Unordered List and Link Styles for Browsers with CSS3 Support

    .cssgradients li {
background: -moz-linear-gradient(#fff, #f2f5f5);
background: -webkit-gradient(linear, left top, left bottom,
	    from(#fff), to(#f2f5f5));
position: relative; }

.cssgradients a:before {
border-bottom: 4px solid transparent;
border-left: 4px solid #666;
border-top: 4px solid transparent;
content: "";
display: block;
height: 0;
left: 10px;
opacity: 0;
position: absolute;
top: 11px;
width: 0; }

.cssgradients a:hover::before {
opacity: 1; }

.cssgradients li:last-child a {
border: 1px solid #bbb;
border-width: 0 1px 1px 1px;
-moz-border-radius: 0 0 4px 4px;
-webkit-border-radius: 0 0 4px 4px;
border-radius: 0 0 4px 4px; }

    Keeping in pace with our cssgradients class for CSS3 support we declare all of our styles for the unordered list and links. Here we kick things up a bit with different pseudo classes and elements, along with a combining the :before pseudo-element with the :hover pseudo-class.

    We start this block of code by declaring our styles for the li element, including a CSS3 gradient and a position of relative. You may wonder why we are declaring a gradient background on the li element and not the a element. The reason for this is because CSS3 background gradients are seen as background images and we are currently unable to transition a background image within CSS3. What we have done is declared a background gradient on the li element and then declared a solid background color to the a element upon hover. This way the a elements background will transition on top of the li elements background gradient giving the impression that the gradient is smoothly transitioning into a solid white. The relative position on the li element is necessary to properly position our arrow, which we will build next with all CSS.

    We use the :before pseudo-element to attach the arrow to the beginning of all of the links. Building the arrow using CSS borders is not too difficult and is actually pretty fascinating. We do set an opacity of 0 to the arrow to hide it until hovered upon. We then combine the :before pseudo-element with the :hover pseudo-class to display arrow when a link is hovered over by setting the opacity to 1. Right now we could technically combine the two rule sets into one under the .cssgradients a:hover::before selector and omit the opacity property altogether since the transition property does not yet apply contents of the :before pseudo-element. However we have left them separate because transition support for the :before pseudo-element is coming and when available the opacity property will provide the perfect transition.

    Lastly, we use the :last-child pseudo-class to select the last li element and round the bottom corners and change the border.

    Step 7: Declaring Unordered List and Link Styles for Browsers without CSS3 Support

    
.no-cssgradients a {
background: url("bg.png") 0 -36px no-repeat;
height: 30px; }

.no-cssgradients a:hover {
background: url("bg.png") 0 -66px no-repeat; }

.no-cssgradients li.last a {
background: url("bg.png") 0 -96px no-repeat;
border: none;
height: 31px; }

.no-cssgradients li.last a:hover {
background: url("bg.png") 0 -127px no-repeat; }

    Finally to wrap everything up, and to provide a fallback for browsers without CSS3 support, we use the no-cssgradients class. Using this class we use a background image fallback for the CSS3 gradients, border radius, and pseudo classes and elements.

    Wrapping Up

    View a Sample CSS3 Menu with Fallbacks

    Best viewed in Safari or Chrome.

    Hopefully this short tutorial has opened you up on how to use CSS3 while still providing support for older browsers. Modernizr is a fantastic tool and can be used far wider than what has been outlined here.

    Related posts:

    1. CSS3 Animated Owl Tutorial
    2. HTML5 & CSS3 Development Talks
    3. Hyperlink CSS Attribute Selectors

    ]]>     http://www.shayhowe.com/tutorial/complete-css3-support/feed/ 1     CSS3 Animated Owl Tutorial http://www.shayhowe.com/tutorial/css3-animated-owl-tutorial/ http://www.shayhowe.com/tutorial/css3-animated-owl-tutorial/#comments Tue, 25 Jan 2011 03:58:07 +0000 Shay Howe http://www.shayhowe.com/?p=1153
  • CSS3 Support with Modernizr
  • HTML5 & CSS3 Development Talks
  • Stunning Hand Painting Illusions
    • ]]>     CSS3 Transforms, Transitions, and Animations in Action CSS3 Transforms, Transitions, and Animations in Action

    As with any inquisitive web designer or developer I am always looking for ways to experiment with the latest HTML and CSS source. This past spring I got engaged and set off to create a wedding website, providing me just the opportunity to play with CSS3 transforms, transitions, and animations.

    My fiancé loves owls so my idea was to have an owl that moved his eyes every so often and when hovered over would raise his wings while a few light rays would spin in the background. A little excessive? Probably. Necessary? Nope. However, exactly what I was looking to do with CSS3 transforms, transitions, and animations.

    View the Demo

    Best viewed in Safari or Chrome.

    CSS3 transforms, transitions, and animations altogether are not yet wildly supported. (Transforms themselves are fairly well supported, transitions are on the rise, and animations are currently only available within webkit browsers.) The idea was to create something that was amusing for users that could view it but something that would not limit the users who could not.

    The Code

    Step 1: The HTML Structure

    <a id="owl" href="#">
<img id="rays" src="rays.png" alt="Rays" />
<img id="bod" src="owl.png" alt="Owl" />
<img id="rt" class="wing" src="rt-wing.png" alt="Right Wing" />
<img id="lt" class="wing" src="lt-wing.png" alt="Left Wing" />
<img id="eyes" src="eyes.gif" alt="Eyes" />
</a>

    The HTML is about straight forward as it gets. An a element wrapping several images. The images each have a unique ID and are broken out into the background rays, the owls body, a right wing, a left wing, and then the owls eyes. We will use CSS to position them correctly and add in all of the embellishments. For now, note how they are vertically stacked from the furtherest image back at the top, the rays, to the foremost front image at the bottom, the eyes.

    Step 2: Stylizing the Link within CSS

    a#owl {
display: block;
height: 210px;
margin: 0 auto;
position: relative;
width: 210px; }

#owl img {
border: none;
position: absolute; }

    The CSS starts off with setting the dimensions of the a element and setting the position to relative so that we can absolutely position all of the containing images. Since all of the images will be absolutely position we create a default style for all of them as well.

    Step 3: Positioning All of the Images with CSS

    #owl #eyes {
left: 81px;
top: 74px; }

#owl #lt {
left: 65px;
top: 98px; }

#owl #rt {
left: 128px;
top: 98px; }

#owl #bod {
left: 70px;
top: 58px; }

#owl #rays {
left: 0;
top: 0; }

    Easy enough, we set positions for all of the images within the a element.

    Step 4: Moving the Wings with CSS Transforms and Transitions

    #owl #lt {
left: 65px;
top: 98px;
-webkit-transform-origin: top right;
-moz-transform-origin: top right;
-o-transform-origin: top right;
transform-origin: top right; }

#owl #rt {
left: 128px;
top: 98px;
-webkit-transform-origin: top left;
-moz-transform-origin: top left;
-o-transform-origin: top left;
transform-origin: top left; }

#owl .wing {
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
transition: all .4s ease-in-out; }

#owl:hover #lt {
-webkit-transform: rotate(30deg);
-moz-transform: rotate(30deg);
-o-transform: rotate(30deg);
transform: rotate(30deg); }

#owl:hover #rt {
-webkit-transform: rotate(-30deg);
-moz-transform: rotate(-30deg);
-o-transform: rotate(-30deg);
transform: rotate(-30deg); }

    We add a CSS transform property within the links hover attribute so that the wings only change position when the owl is hovered over. Since we want each wing, left and right, to rotate from a different origin we declare the the transform-origin within each individual wings ID. From here the wings will pop up and down, however we want the wings to raise and fall smoothly for a more lively feel. To accomplish this we use the .wing class and create a CSS transition. Within our CSS transition property we set all of the properties to transition at a duration of .4 seconds with a timing function of ease-in-out so that the wings move gradually. Now the wings raise and fall naturally.

    Step 5: Animating the Rays with CSS Transitions and Animations

    @-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg); }
100% { 
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg); }
}

#owl #rays {
-webkit-animation: spin 10s infinite linear;
left: 0;
opacity: 0;
top: 0;
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
transition: all .4s ease-in-out; }

#owl:hover #rays {
opacity: 1; }

    First we change the rays opacity to hide them until hover. Then we add a CSS transition property to gradually fade them in and out when hovered. Similar to how we did with the wings. The only difference this time is that we are transitioning the opacity property in place of the transform property. To get the rays to spin we create a CSS3 keyframes animation titled spin. The animation is called within the rays and set to infinitely rotate the rays image from 0 degrees to 360 degrees, completing a 360 rotation every 10 seconds.

    Completed!

    Now you should have a fully functional owl.

    View the Demo

    Best viewed in Safari or Chrome.

    Additional Notes

    You can download a vector version of the owl from Shutterstock. The eyes are an animated GIF, not CSS animations. The eyes certainly could be developed using CSS animations however for this demonstration I wanted to keep it fairly scaled back. Lastly, if you are curious to learn more about CSS3 I would highly recommend picking up Andy Clarke’s Hardboiled Web Design or the A Book Apart CSS3 for Web Designers by Dan Cederholm.

    Related posts:

    1. CSS3 Support with Modernizr
    2. HTML5 & CSS3 Development Talks
    3. Stunning Hand Painting Illusions

    ]]>     http://www.shayhowe.com/tutorial/css3-animated-owl-tutorial/feed/ 4     Hyperlink CSS Attribute Selectors http://www.shayhowe.com/tutorial/hyperlink-css-attribute-selectors/ http://www.shayhowe.com/tutorial/hyperlink-css-attribute-selectors/#comments Wed, 31 Mar 2010 23:26:12 +0000 Shay Howe http://www.shayhowe.com/?p=1009
  • CSS3 Support with Modernizr
  • 6 Visual Optimization Mistakes
  • Top 10 Keyword Research Tips
    • ]]>

    Document Links Styled with CSS Attribute Selectors

    Document Links Styled with CSS Attribute Selectors

    With CSS3 gaining popularity so are CSS attribute selectors. CSS attribute selectors have been around for some time however CSS3 adds more selectors to the mix bringing new light to subject. Increased browser support, with nearly every major browser currently supporting attribute selectors (Internet Explorer 6 still struggles), has also added to the popularity.

    So what benefit do CSS attribute selectors have to adding style to document links? CSS attribute selectors allow you to quickly and easily add styles to document links while keeping your code clean and clutter free. Ultimately, the more attractive looking your links are the more clicks they will receive.

    PDF Hyperlink Example

    HTML Code

    <a href="#.pdf" title="PDF File Link">PDF File</a>

    CSS Code

    a[href$=".pdf"] {
	background: url(acrobat.gif) no-repeat left center;
	padding-left: 20px;
}

    Output

    PDF File

    Breaking Down the Attribute Selector

    You start your CSS just as if your were to style any other hyperlink. Directly following the a element comes the attribute selector, in this case [href$=".pdf"]. The attribute selector will always be wrapped in [] brackets and will always sit right next to the element to which it applies to without any spaces in-between the two.

    Within the [] brackets the href attribute is declared as we are specifically targeting hyperlinks. Next we insert the $= selector, which specifies that we only want to target hyperlinks ending with the file format value to follow. For this example we are using a PDF document making the value .pdf, which is wrapped in "" quotations.

    To target any other type of document just change the value to what ever file extension you wish. As an example, to target Microsoft Word documents just change the .pdf value to .doc.

    Taking It a Step Further

    Chris Coyier from CSS-Tricks has put together and outstanding resource on CSS attribute selectors in his article “The Skinny on CSS Attribute Selectors”. To learn the full potential of CSS attribute selectors this article is a must read as it does a great job of breaking them down for you.

    If you are worried about the lack of support for Internet Explorer 6 you can, with a some additional work, use CSS attribute selectors via jQuery. Zac Gordon has written a great tutorial, “Selecting and Styling External Links, PDFs, PPTs, and other links by file extension using jQuery”, on how to do so.

    Adding an icon to your document links is a great way to quickly draw more attention to the link. InstantShift has put together an article packed full of icons. If you would like some to use on your website check out the article at “75 Free Useful Icon Sets for Web Designers and Developers”.

    Related posts:

    1. CSS3 Support with Modernizr
    2. 6 Visual Optimization Mistakes
    3. Top 10 Keyword Research Tips

    ]]>     http://www.shayhowe.com/tutorial/hyperlink-css-attribute-selectors/feed/ 4     Top 10 Keyword Research Tips http://www.shayhowe.com/seo/top-10-keyword-research-tips/ http://www.shayhowe.com/seo/top-10-keyword-research-tips/#comments Thu, 05 Mar 2009 04:00:52 +0000 Shay Howe http://www.shayhowe.com/?p=344
  • Keyword Do's and Don'ts
  • Are Meta Tags Important?
  • How Domains Relate to SEO
    • ]]>     10 Keyword Research Tips to Maximize Your SEO Efforts

    I have never heard anyone say that a website could have too much traffic, it is unheard of. People are always looking to obtain more traffic - and rightfully so. But how do you obtain large amounts of traffic? Research shows that the majority of all traffic comes from search engines. And how do you show up in search engines? You target specific keywords and market your website or pages around these keywords. With this, ideally the more keywords you target the more traffic you will see. Follow these top 10 keyword research tips to make the most out of your targeted list of keywords.

    Keyword Research

    1. Think like potential customers.

    To even begin developing a keyword list you need to know and understand how potential customers are going to search for your product or services. What may be relevant and a common understanding to you may be completely over the heads of your clientele. Technical or specific terms you use might not even be searched. Always think like a potential customer when developing keywords.

    2. Analysis any competitors.

    It is always a good idea to know who you are competing against. Doing so will provide you with insight not only to how your industry is being marketed online, but to also new keywords and descriptions you may have never even thought about. Visit competitors websites, check their code, and make sure that you are not leaving out anything critical.

    3. Use typos and misspellings.

    It is not uncommon for people misspell words and phrases in their searches. While you may not want to place misspelled words on your web page for rankings it is possible to run pay per click on these words, and they are often cheaper than the correct spelling. A good tool to use to locate common misspelled words and typos see SearchSpell Typo.

    Examples:
    Calendar > Calender
    Your > You're
    Here > Hear

    4. Use acronyms and abbreviations.

    Acronyms and abbreviations make up a large amount of search traffic, thus making it important for you to make sure that your not missing any keywords. Many keyword generators will miss out on acronyms and abbreviations so be sure that you are doing this yourself to uncover your full potential list of keywords.

    Examples:
    9/11 > September 11th
    SEO > Search Engine Optimization
    PPC > Pay Per Click

    5. Use multiple verbs.

    Everyone has a different mindset when it comes to searching, therefore you want to make sure that you are using a contrast of different verbs.

    Examples:
    try to play
    trying to play
    try playing
    trying playing

    6. Use both plural and singular.

    Using both plural and singular keywords will easily magnify your list quickly. Most major search engines will take in to consideration plural and singular forms within organic results however keep in mind if running a pay per click campaign Yahoo Search Marketing does not while Google AdWords does.

    Examples:
    mountain bike
    mountains bike
    mountain bikes
    mountains bikes

    7. Use compound, separated, hyphenated, and merged keywords.

    Users often search trying multiple variations of words and spellings looking for the right fit. To be sure you are not missing out on any terms or phrases research compound, separated, hyphenated, and merged keywords.

    Examples:
    checkin > check-in > check in
    startup > start-up > start up
    lifesize > life-size > life size

    8. Use locations.

    One of the best ways to pick up traffic is to localize your keywords. If you are looking to pick up traffic on a national level create a few sub pages targeting localized keywords in the most popular areas. This will directly target your visitors and overall will increase your conversion rate if done correctly.

    Examples:
    Phoenix web design
    Arizona SEO
    Chandler, AZ artist

    9. Use Adjectives

    Numerous users will use adjectives in addition to the main keywords. This is a fast way to pick up keywords and even spark an immediate interest with users.

    Examples:
    Good, Better, Best
    Far, Further, Furthest
    Much, More, Most
    Little, Less, Least
    or Free, Cheap, Amazing, Pretty, New

    10. Refine list.

    After you have built your keyword list its quite possible that your list is far too big and contains some keywords that can be tossed out. Narrow down the list by selecting a good mix of both broad and targeted keywords directly related to the subject and theme of your website. Keep these keywords as you will want to rank for both. Remove any keywords that are not relevant to your website or keywords that you don't have enough content to support. Remember it is always possible to go back and add content and keywords later as well.

    Get Started!

    You can begin your keyword research for free using any of the following tools. These are great resources to help you find new keywords or get your pay per click campaign off the ground. However one thing to keep in mind, since these resources are free it is likely that your competitors are using them as well. For the best results be a little creative and thing outside the box when at all possible.

    Related posts:

    1. Keyword Do's and Don'ts
    2. Are Meta Tags Important?
    3. How Domains Relate to SEO

    ]]>     http://www.shayhowe.com/seo/top-10-keyword-research-tips/feed/ 2     iPhone Picture Messaging http://www.shayhowe.com/iphone/iphone-picture-messaging/ http://www.shayhowe.com/iphone/iphone-picture-messaging/#comments Tue, 03 Mar 2009 06:01:22 +0000 Shay Howe http://www.shayhowe.com/?p=282
  • Working With A Bad Client
  • Smart Email Marketing
  • Designing A Non-Profit Website
    • ]]>     Sending Picture Messages with the iPhone iPhone Picture Messaging

    It is amazing that with all of this technology and all of the advancements with cell phones over the past few years that the iPhone still does not have the capability to send picture messages. That is until now. The way it works is most mobile carriers offer free email to SMS/MMS gateways which forward email messages to phones. Therefore when you send an email from your iPhone to an email address specifically related to the recipients phone the email will be displayed on their phone as a picture or text message.

    So how do you figure out what email corresponds to each phone? All you need to know is the person's cell phone number and carrier they are on. From here you will set up an email to be sent to [10-digit phone number]@[carrier gateway address]. Please refer to the table below for a listing major US carriers free email to SMS/MMS gateways.

    CarrierCorresponding Email
    Alltel1234567890@message.alltel.com
    AT&T (formerly Cingular)1234567890@txt.att.net
    1234567890@mms.att.net (MMS)
    1234567890@cingularme.com
    Boost Mobile1234567890@myboostmobile.com
    Nextel (now Sprint Nextel)1234567890@messaging.nextel.com
    Sprint PCS (now Sprint Nextel)1234567890@messaging.sprintpcs.com
    1234567890@pm.sprint.com (MMS)
    T-Mobile1234567890@tmomail.net
    US Cellular1234567890email.uscc.net (SMS)
    1234567890@mms.uscc.net (MMS)
    Verizon1234567890@vtext.com
    1234567890@vzwpix.com (MMS)
    Virgin Mobile USA1234567890@vmobl.com

    For international and smaller US gateways please refer to:

    Related posts:

    1. Working With A Bad Client
    2. Smart Email Marketing
    3. Designing A Non-Profit Website

    ]]>     http://www.shayhowe.com/iphone/iphone-picture-messaging/feed/ 0