Web Design & Content Planning Forums

Create a Bursting Spark Effect with Photoshop

Design Festival — Thu, 17 May 2012 20:54:06 GMT

Almost anything can be made with Photoshop. All it takes is the right combination of tools to get the job done. Type is no exception, and in Photoshop, you can make your type stand out with a variety of eye-catching techniques. The possibilities are endless. Combining different techniques and effects can make your work stand out and help your message make a strong impression. Today, I�ll teach you how to create a vibrant, energetic spark effect with your type. You can follow the tutorial, or download the finished PSD here.

Open Photoshop and create a new document. My document is 1024px by 768px. I set the color to black, so that the effect will show up with strong contrast. I also do this for any type of document that will have glow effects, because it helps me to see exactly how my effect look in a colorless backdrop. I can always change the background later.

Next, you have to select the right kind of typeface for your purposes. I chose the typeface called �Designer Block,� which you can download for free here. Create your message and arrange your type how you wish. I liked the look of the type, but I actually wanted an italic appearance, so I broke a cardinal rule of typography and transformed the type to get the look that I wanted.

The first impulse is to try to combine a number of different filters to get the look we are after, but for a more natural look, we are going to create our own brushes and use them to follow the contour of our type and create a truly custom effect. Right-click on your type layer and choose �Create Work Path� from the flyout menu.

Hold Command/Ctrl and click on the new layer icon to create a new layer below your type layer. This layer is going to be for our actual brush strokes. To create our effect, we need to create our own custom brush.

Select the brush tool and choose one of the default brushes called �Dry brush tip light flow,� which is a default scattered brush that is supposed to simulate realistic painting with a dry paintbrush. We aren�t going to use this brush as-is, so we need to open up our brush panel.

The brushes presets give you a plethora of options for customizing your brushes. First, we want to flatten the brush itself, so under brush tip shape, we want to set the roundness to around 8%. I also set the spacing to 5%.

Under �Shape Dynamics,� I bumped the size jitter all the way up to 100%. We want the angles to be random in order to give us the illusion of sparks and particles flying in different directions. I set the angle jitter to 31%. If any of the control options are set to anything, I turned them off.

Under Scattering, I set the scatter setting to 26%, and I set the count jitter to 80%. This scattered the effect, and the count jitter is set high to provide a wide range of values that gives it a more randomized effect.

Under Transfer, I set the flow jitter all the way to 100%. This gives it a wide range, allowing our brush to have a heavy flow in places and a light flow in others. This gives us a more natural look. In all of the tabs, I left the control off, so that the effect is more randomized than controlled. We can sometimes give our work too much of a uniform look, so having the values randomly generated via a high jitter value will give us more realism.

The overall look of your brush preview should be a criss-crossed particle effect. In order to implement our brush, we need to make sure that the brush tool is selected. We also need to make sure that the empty layer below our type is selected, and in the paths panel, we are going to make sure that the paths of our type are active. Then, at the bottom of the paths panel, click the second icon called Stroke Path with brush icon. You will see the path outlined with your new brush.

Make the type layer active again by clicking on the eye icon, and you can see how the effect interacts with the type. We will need to add some layer styles to the type and the brush layers next.

Double-click on the type layer to bring up the layers styles dialog box. Select Inner Glow, and set the blend mode to Hard Light. Set the color to a bright yellow. I chose #fcff00, but anything close to that should work. I set the size to 2px to give it a subtle inner glow. Select Outer Glow and set the blend mode to Hard Light. Select a strong orange for the glow, and set the size to around 20px. I chose #ff8400 as the color for the outer glow.

Now, we need to set the effects for the brush effects layer that we created. Double-click the brush effects layer, and choose Inner Glow. Set the color to white, and set the blend mode to hard light. Since the effects are small, we will set the size to 2px. Select Outer Glow and choose a bright yellow as your glow color. Choose Hard Light as your blend mode and set the size to 1px.

We are going to repeat the previous process twice more. You can do it as many times as you�d like, because this is strictly done to taste. You may find that you only need to repeat it once to get the effect that you are looking for, or you may have to do it 3 or 4 times. Simply create a new blank layer, select your custom brush, go to the paths panel and select �stroke path with brush.�

What�s happening here is that each time you do this, you get different results from the random brush pattern that we created. After doing this multiple times*� each on its own layer*� we need to lessen the effect. You could spend a lot of time with a soft brush, painting out some areas with a layer mask, but a quick way to mask out random areas of your brush layers is to use a clouds mask.

On your first custom brush effects layer, click the layer mask icon. You can alt/option-click your mask icon in the layer to show the actual mask. Then, simply go to �Filter� > �Render� > �Clouds.� This will create a random clouds effect. Take it a step further and go to �Filter� > �Render� > �Difference Clouds� to get a randomized darker cloud mask effect. This randomizes the mask, making your brush effects layer look more natural.

Repeat this for each layer behind your type, giving your brush effects a much more natural look.

To make this much more natural, go into the layer styles for each brush effects layer after the first one that we created, and change the Outer Glow colors. For example, on my second version, I chose an orange value of #ff8400 instead of yellow, and on the third version, I chose an intense orange value of #ff5502. This adds a lot of depth to your sparks and looks much more like fire or heat coming from your sparks.

With the 2nd Brush Layer:

With the 3rd Brush Layer:

Next, we are go you add some sparks shooting off from different areas of the type. Create a new layer, and with your pen tool, draw a couple of arcs coming from your type.

Select all three paths and just as we did with the type paths earlier, make sure the brush tool is selected, make sure your are on a blank new layer, and choose �stroke path with brush� from your Paths Panel.

As you can see, it is a bit too streamlined and uniform in its flow. As we did earlier with our effects around our text, add a clouds/difference clouds layer mask. This will break up the monotonous brush effect, making it look much more natural.

The only problem with this method is that it darkens the sparks too much, so feel free to duplicate this layer to brighten the effect.

The next thing that we want to do is add in our color. To save some time, simply copy the layer styles from one of the path/type layers by right-clicking on it and selecting �Copy Layer Style.� Then, right-click on the two layers that we just created and choose �Paste Layer Style.� The only change that we are going to make to both of these layers is adding a gradient overlay layer style to them.

Set the blend mode to Multiply, and create a gradient that goes from black to red, then yellow, to light yellow(faded), and ends at white. Set the angle at 3� and click �OK.� This gradient overlay will darken the spark trails and lighten them where the source of the sparks will be located.

The last thing that we are going to do is add the hot sparks to the end of our spark trails. Go back to the paths panel and select the path layer that has your spark trails on it. Then, select the brush tool and in the brush options, change the brush to a soft edged round brush with a size of 1-2px. Choose white as your foreground color and on a new layer choose the �stroke path with brush� icon in the Paths Panel. Select the brush in your default brushes presets called Fuzzball, and click at the ends of your spark trails, as if you were making a comet. The result should be similar to the one shown below:

Now, all we have left to do is add a couple of glow effects. Double-click this layer and choose Outer Glow. Choose Hard Light and choose a bright yellow. Set the size to 5px and click �OK.� The final result is shown below:

Conclusion

With the ability to create custom brushes with their own behaviors and combine those with different layer styles and effects, you can create almost anything. Randomizing the effects with Difference Clouds applied to layer masks can make your effects look much more natural. Imperfections and random effects happen naturally in nature, so in order to emulate those, we need to implement randomization and imperfects in our artwork.

More...

What�s New in Chrome 19

SitePoint — Thu, 17 May 2012 20:54:06 GMT

I doubt you noticed but Chrome 19 was released this week. I rarely mention Chrome’s updates because, well, they’re rarely worth mentioning. However, I’ve discovered a few hidden gems in the latest browser…

Tab Syncing

The big new feature is tab syncing. If you’re using Chrome on two or more PCs/smartphones, you should see an “Other devices” link on the new tab page. Click it and you can open synchronized links. I say “should” because I haven’t been able to get it working.

Tab syncing has been available in Firefox for a while so I’m surprised it’s taken quite so long to appear in Chrome. Hopefully, you’ll have better luck than I did.

CSS3 calc() Support

The webkit team has finally implemented one of my favorite CSS3 features: the little-known calc() function. It allows you to define calculated dimensions, e.g.

#myelement { width: calc(50% - 2em + 4px); }Chrome supports calc() with the -webkit prefix. Firefox uses -moz and IE9 is happy without prefixes. To use it effectively, you’ll need fallback code such as:

#myelement{ width: 46%; width: -webkit-calc(50% - 2em + 4px); width: -moz-calc(50% - 2em + 4px); width: -o-calc(50% - 2em + 4px); width: calc(50% - 2em + 4px);}Combined Settings Page

Choosing tool > Settings now displays a side menu with History, Extensions, Settings and Help. The Help page provides a couple of links and the update checker which normally appears on the “About” dialog (will that disappear soon?)

New JavaScript/ECMAScript 5.1 (Harmony) Features

A number of experimental JavaScript features have made their way from the Harmony specification into Chrome’s V8 engine. However, they’re not available by default — you’ll need to “Enable Experimental JavaScript” in chrome://flags. Language structures such as collections and proxies look great, but it’ll be some time before they’re available in all browsers.

Security and Bug Fixes

21 issues have been fixed in Chrome 19 and Google has paid almost $15,000 to eagle-eyed security hackers.

Chrome has remained fast and stable. It looks set to knock IE from the top of the browser usage chart during the summer of 2012. I’m not convinced any other vendor can prevent Google’s domination of the web and the software we use to access it.

More...

Helping Your Clients Build an Effective Mobile Strategy

Six Revisions — Thu, 17 May 2012 14:43:03 GMT

Advertise here with BSA

It can be a challenge convincing clients to add new strategies to their existing Web presence.

In a perfect world, a client would simply say, "You’re the expert. You know what’s best. Do whatever needs to be done to make it happen!" But, unfortunately, it just doesn’t work like that.

Granted, we shouldn’t expect smart business managers to implement every new thing just because we tell them it’s a good idea. That wouldn’t be cost effective. But what if you know in your gut that the future of a client’s business may be at stake?

With Google executives saying things like "I believe that in 3 years desktop computers will be irrelevant…" and studies by Gartner stating that "Websites not formatted for the smaller screen will become a market barrier…" the Mobile Web is one of your gut instincts you want your clients to follow. And follow now!

In a state of desperate urgency, you may be tempted to place all diplomacy aside, and just tell it to them straight, perhaps even reminding them of those other times they put off your advice. I like to call this the "Timeline of Lost Opportunities" tactic.

You may very well have clients who respond to that type of pressure, but more likely, you will need to ease your clients into the idea of a full-on Mobile Web strategy.

Below is a plan that can help. I’ve even included graphics in each step since, as the old adage goes, "A picture is worth a thousand different ways of pleading with one’s clients." (Or something like that.)

Step 1: Show Them the Money

The Mobile Web is upon us, whether we like it or not. People are using mobile devices to search, shop and click through on ads at unprecedented rates. And rates that are only expected to grow. Presenting numbers like those shown above, as well as information on how their competitors may already be capitalizing on the Mobile Web, can get your clients listening.

Step 2: Show Them What Their Customers Expect

Mobile device users search the Internet as often as they use apps, so having a mobile-ready website is important. Mobile consumers know what they want from a website, and typically take action once they get there. It’s important that your clients understand that their customers have different expectations of what a mobile website does and provides compared to their existing website. Mobile conversion rates can be impressive, but only if a website caters to the expectations of this mobile audience.

Step 3: Outline Best Practices and Give Them Choices

Once you’ve shown your clients how people use mobile devices, it should become more apparent that they need a mobile version of their website. Mobile website solutions need not be complicated or expensive. Show your clients some options, such as responsive web design or going with a dedicated mobile-optimized version of the site (along with the pros and cons of each) while emphasizing mobile website best practices.

Step 4: Help Them Decide Whether They Need a Mobile App

Mobile app usage is impressive, but while people do spend a lot of time using mobile apps, most of that time is spent on games and social networking. So does your client really need a mobile app? You can help them decide by weighing the pros and cons of mobile app development, and presenting ways they can optimize their mobile website as an alternative.

Step 5: Explain the Marketplace and Mobile App Nuances

A good mobile app strategy should analyze current marketplace trends and weigh the pros and cons of developing native apps versus web apps. Be sure to explain how the mobile marketplace works as well as the difference between native and web apps. This can help your clients make more informed decisions.

Step 6: Show Them Options and Give Them Choices

Mobile app solutions vary in price and complexity. Outline options for your client that include using HTML5 or one of the many do-it-yourself mobile app tools available today. Make your recommendations based on the client’s present and future needs.

Step 7: Introduce Other Mobile Marketing Tactics

The Mobile Web is more than just websites and apps. From QR codes to augmented reality, there are a host of tactics and tools you can implement to help your clients promote their business on the Mobile Web. Help your clients understand the importance of mobile-optimized landing pages. When they are marketing to a mobile audience, it is imperative that clients ultimately send potential customers to landing pages and other sources compatible with the customer’s mobile device.

The goal should be to educate your clients on the "hows" and "whys" of the Mobile Web and to help them understand their options. This approach can ultimately help them make informed decisions as they consider your recommendations.

This article is based on the book, The Bootstrapper’s Guide to the Mobile Web. The graphics used in this article are part of a sharable infographic available at TheBootstrappersGuide.com, where you’ll also find free mobile website, mobile app, and other mobile strategy worksheets.

Related Content

Mobile UI Design Patterns: 10+ Sites for Inspiration
Will the Browser Wars Invade the Mobile Web?
10 Excellent Tools for Testing Your Site on Mobile Devices
Related categories: Mobile and Project Management

About the Author

Deltina Hay, author of The Bootstrapper’s Guide to the Mobile Web and The Social Media Survival Guide, is a web developer, publisher and small business owner. Hay presently teaches the graduate level Social Media Certificate course for Drury University. Her YouTube video series can be found at YouTube.com/deltinahay. Connect with her on Google Plus.

More...

Stop Redesigning And Start Tuning Your Site Instead

Smashing Magazine — Thu, 17 May 2012 14:43:03 GMT

In my nearly two decades as an information architect, I�ve seen my clients flush away millions upon millions of dollars on worthless, pointless, �fix it once and for all� website redesigns. All types of organizations are guilty: large government agencies, Fortune 500s, not-for-profits and (especially) institutions of higher education.

Worst of all, these offending organizations are prone to repeating the redesign process every few years like spendthrift amnesiacs. Sadly, redesigns rarely solve actual problems faced by end users. I�m frustrated because it really doesn�t have to be this way. Let�s look at why redesigns happen, and some straightforward and inexpensive ways we might avoid them.

More...

jQuery/JavaScript Tools and Plugins Worth Checking Out

Impressive Webs — Thu, 17 May 2012 14:43:03 GMT

Sure, recently I mocked the fact that our industry is inundated with scripts, boilerplates, libraries, and frameworks. But that was just a light-hearted look at the state of our industry. I still think there are tons of tools that are valuable and worth knowing about for front-end developers. So here's another list of tools and other goodies that might be of interest to JavaScript developers.

More...

SASS vs. LESS

CSS Tricks — Thu, 17 May 2012 08:11:35 GMT

"Which CSS preprocessor language should I choose?" is a hot topic lately. I've been asked in person several times and an online debate has been popping up every few days it seems. It's nice that the conversation has largely turned from whether or not preprocessing is a good idea to which one language is best. Let's do this thing.

Really short answer: SASS

Slightly longer answer: SASS is better on a whole bunch of different fronts, but if you are already happy in LESS, that's cool, at least you are doing yourself a favor by preprocessing.

Much longer answer: Read on.

The Much Longer Answer

The Learning Curve with Ruby and Command Line and Whatever

The only learning curve is the syntax. You should use an app like CodeKit to watch and compile your authored files. You need to know jack squat about Ruby or the Command Line or whatever else. Maybe you should, but you don't have to, so it's not a factor here.

Winner: Nobody

Helping with CSS3

With either language, you can write your own mixins to help with vendor prefixes. No winner there. But you know how you don't go back and update the prefixes you use on all your projects? (You don't.) You also won't update your handcrafted mixins file. (Probably.) In SASS you can use Compass, and Compass will keep itself updated, and thus the prefix situation is handled for you. Yes you'll have to keep your local preprocessor software updated and compile/push once in a while, but that's trivial and thinking-free.

So what this comes down to is: SASS has Compass and LESS does not. But it goes deeper than that. The attempts at creating a real robust project like Compass for LESS haven't succeeded because the LESS language isn't robust enough to do it properly. More on that next.

Winner: SASS

Language Ability: Logic / Loops

LESS has an ability to do "guarded mixins." These are mixins that only take affect when a certain condition is true. Perhaps you want to set a background color based on the current text color in a module. If the text color is "pretty light" you'll probably want a dark background. If it's "pretty dark" you'll want a light background. So you have a single mixin broke into two parts with these guards that ensure that only one of them takes effect.

.set-bg-color (@text-color) when (lightness(@text-color) >= 50%) { background: black; } .set-bg-color (@text-color) when (lightness(@text-color) < 50%) { background: #ccc; } So then when you use it, you'll get the correct background:

.box-1 { color: #BADA55; .set-bg-color(#BADA55); } That is overly simplified, but you likely get the idea. You can do some fancy stuff with it. LESS can also do self-referencing recursion where a mixin can call itself with an updated value creating a loop.

.loop (@index) when (@index > 0) { .myclass { z-index: @index; } // Call itself .loopingClass(@index - 1); } // Stop loop .loopingClass (0) {} // Outputs stuff .loopingClass (10); But thats where the logic/looping abilities of LESS end. SASS has actual logical and looping operators in the language. if/then/else statements, for loops, while loops, and each loops. No tricks, just proper programming. While guarded mixins are a pretty cool, natural concept, language robustness goes to SASS. This language robustness is what makes Compass possible.

For example, Compass has a mixin called background. It's so robust, that you can pass just about whatever you want to that thing that it will output what you need. Images, gradients, and any combination of them comma-separated, and you'll get what you need (vendor prefixes and all).

This succinct and intelligible code:

.bam { @include background( image-url("foo.png"), linear-gradient(top left, #333, #0c0), radial-gradient(#c00, #fff 100px) ); } Turns into this monster (which is unfortunately what we need for it to work with as good of browser support as we can get):

.bam { background: url('/foo.png'), -webkit-gradient(linear, 0% 0%, 100% 100%, color-stop(0%, #333333), color-stop(100%, #00cc00)), -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 100, color-stop(0%, #cc0000), color-stop(100%, #ffffff)); background: url('/foo.png'), -webkit-linear-gradient(top left, #333333, #00cc00), -webkit-radial-gradient(#cc0000, #ffffff 100px); background: url('/foo.png'), -moz-linear-gradient(top left, #333333, #00cc00), -moz-radial-gradient(#cc0000, #ffffff 100px); background: url('/foo.png'), -o-linear-gradient(top left, #333333, #00cc00), -o-radial-gradient(#cc0000, #ffffff 100px); background: url('/foo.png'), -ms-linear-gradient(top left, #333333, #00cc00), -ms-radial-gradient(#cc0000, #ffffff 100px); background: url('/foo.png'), linear-gradient(top left, #333333, #00cc00), radial-gradient(#cc0000, #ffffff 100px); } Winner: SASS

Website Niceitude

LESS has a nicer, more usable website. The SASS documentation isn't awful. It's complete and you can find what you need. But when competing for attention from front end people, LESS has the edge. I don't doubt this plays a large role in LESS currently winning the popularity race. Things may be changing though.

Winner: LESS

The @extend Concept

Say you declare a class which has a bit of styling. Then you want another class which you want to do just about the same thing, only a few additional things. In LESS you'd likely:

.module-b { .module-a(); /* Copies everything from .module-a down here */ border: 1px solid red; } That's an "include" essentially. A mixin, in both languages. You could use an include to do that SASS as well, but you're better off using @extend. With @extend, the styles from .module-a aren't just duplicated down in .mobule-b (what could be considered bloat), the selector for .module-a is altered to .module-a, .module-b in the compiled CSS (which is more efficient).

.module-a { /* A bunch of stuff */ } .module-b { /* Some unique styling */ @extend .module-a; } Compiles into

.module-a, .module-b { /* A bunch of stuff */ } .module-b { /* Some unique styling */ } See that? It rewrites selectors, which is way more efficient.

Winner: SASS

Variable Handling

LESS uses @, SASS uses $. The dollar sign has no inherit meaning in CSS, while the @ sign does. It's for things like declaring @keyframes or blocks of @media queries. You could chalk this one up to personal preference and not a big deal, but I think the edge here is for SASS which doesn't confuse standing concepts.

SASS has some weirdness with scope in variables though. If you overwrite a "global" variable "locally", the global variable takes on the local value. This just feels kind of weird.

$color: black; .scoped { $color: white; color: $color; } .unscoped { // LESS = black (global) // SASS = white (overwritten by local) color: $color; } I've heard it can be useful but it's not intuitive, especially if you write JavaScript.

Winner: Tossup

Working with Media Queries

The way most of us started working with @media queries was adding blocks of them at the bottom of your main stylesheet. That works, but it leads to mental disconnect between the original styling and the responsive styles. Like:

.some-class { /* Default styling */ } /* Hundreds of lines of CSS */ @media (max-width: 800px) { .some-class { /* Responsive styles */ } } With SASS or LESS, we can bring those styles together through nesting.

.some-class { /* Default styling */ @media (max-width: 800px) { /* Responsive styles */ } } You can get even sexier with SASS. There is a really cool "respond-to" technique (see code by Chris Eppstein, Ben Schwarz, and Jeff Croft) for naming/using breakpoints.

=respond-to($name) @if $name == small-screen @media only screen and (min-width: 320px) @content @if $name == large-screen @media only screen and (min-width: 800px) @content The you can use them succinctly and semantically:

.column width: 25% +respond-to(small-screen) width: 100% Note: requires SASS 3.2, which is in alpha, which you can install with gem install sass --pre. I don't think there is any doubt this is a very nice way to work.

Winner: SASS

Math

For the most part, the math is similar, but there are some weirdnesses with how units are handled. For instance, LESS will assume the first unit you use is what you want out, ignoring further units.

div { width: 100px + 2em; // == 102px (weird) } In SASS, you get a clear error: Incompatible units: 'em' and 'px'. I guess it's debatable if it's better to error or be wrong, but I'd personally rather have the error. Especially if you're dealing with variables rather than straight units and it's harder to track down.

SASS will also let you perform math on "unknown" units, making it a bit more futureproof should some new unit come along before they are able to update. LESS does not. There is some more weird differences like how SASS handles multiplying values that both have units, but it's esoteric enough to not be worth mentioning.

Winner: Narrowly SASS

Active Development

At the time of this writing...

Number of open issues on LESS: 392
Number of open issues on SASS: 84

Pending pull requests on LESS: 86
Pending pull requests on SASS: 3

Number of commits in the last month in LESS: 11
Number of commits in the last month in SASS: 35

None of that stuff is any definitive proof that one project is more active than the other, but the numbers do seem to always leans toward SASS. As I understand it, both of the leads work on the languages in whatever little free time they have, as they both have other major new projects they are working on.

Winner: Probably SASS

More Reading

Chris Eppstein: SASS/LESS Comparison
Jeremy Hixon: An Introduction To LESS, And Comparison To Sass
Ken Collins: Too LESS? Should You Be Using Sass?
Johnathan Croom: Sass vs. LESS vs. Stylus: Preprocessor Shootout

SASS vs. LESS is a post from CSS-Tricks

More...

15 Great Icon Sets for Web & Mobile Apps

Design Festival — Wed, 16 May 2012 20:21:26 GMT

Icons can be a pain when it comes to web design. Designers who haven�t been in the game for long might not have picked up the basic illustration skills that more experienced designers use to create their own icons suited to a project. Similarly, more experienced designers just might not have the time to create a new icon set for every project.

On top of all that, it can be difficult to make sure your work looks different when a combination of current design trends and your own signature design style limits your options. Using great icon sets, available for free, is one way to reduce the similarities between your projects and make them stand out on their own.

Furniture Icons

Social Media Rounded Square Icons

Web Dev Icons

User Icons

Social Media Icons

Simplito

Twenty Icons

gCons

8 Social Icons

Free Social Media Icon Set

Social Media Shields

Web Icon Set

Pictograms

Simple Icons

3D Glossy Icons

Do you have any favorites? Do you use icon sets, or do you prefer to illustrate your own?

More...

iOS to IE10 Metro: Building Cross-Browser Plugin-Free Experiences

SitePoint — Wed, 16 May 2012 20:21:26 GMT

If you�ve built a plugin-free browsing experience for the iPad, a few changes will make it ready for the new IE10 plugin-free experience on Windows 8. As more browsers adopt the plugin-free approach, now is a good time to start thinking about it. I�ll show you how to do this in a few steps by writing code that works well in all modern browsers.

Today we�re going to work with a MSNBC plugin-free experience for rich media. It breaks down to two things: styles and scripts.

To modify the files of MSNBC, I will be using a proxy application known as Fiddler. You can download this tool from http://fiddler2.com. This tool allows me to modify remote files as though they were on my local machine. If you have direct access to your own site, you can ignore Fiddler, and work directly with your files. Fiddler provides a great way for testing changes without the risk of breaking your live site.

Step 1: Declare Standards Mode and Valid Markup for Modern Browsers

In order to use the HTML5 elements that we�ll be utilizing below, you�ll first need to ensure that you are operating in standards mode. One way to do this is to include the HTML5 doctype at the top of your document:

Step 2: Update your CSS Vendor Prefixes

The CSS language is undergoing a lot of change as new features are suggested, updated, and standardized. In order to allow developers to learn these new features, browser vendors typically offer experimental implementations via prefixed properties.

A key part of using vendor prefixes responsibly is to ensure that prefixes from each vendor are included in your site to allow for the broadest level of feature support. In many cases, especially when building an iPad-centric site, you may focus solely on -webkit properties, omitting the prefixes that target other browsers such as -o, -ms, and -moz. The end result of this is that you greatly limit the target devices that can render your plugin-free site as well as provide a degraded experience for users of other modern browsers, many of which could serve up equally engaging functionality.

For instance, we find the following on MSNBC:

background: -webkit-gradient( linear, left top, left bottom, color-stop(1, rgba(192,192,192,.6)), color-stop(0.5, rgba(0,0,0,.6)));With the growing trend towards an HTML5 plugin-free experience, it�s important to expand these rules to provide the vendor prefixes of other major browsers as well:

background: -webkit-linear-gradient( top, rgba( 0, 0, 0, 0.0 ) 0%, rgba( 0, 0, 0, 0.6 ) 50% );background: -moz-linear-gradient( top, rgba( 0, 0, 0, 0.0 ) 0%, rgba( 0, 0, 0, 0.6 ) 50% );background: -ms-linear-gradient( top, rgba( 0, 0, 0, 0.0 ) 0%, rgba( 0, 0, 0, 0.6 ) 50% );background: -o-linear-gradient( top, rgba( 0, 0, 0, 0.0 ) 0%, rgba( 0, 0, 0, 0.6 ) 50% );background: linear-gradient( top, rgba( 0, 0, 0, 0.0 ) 0%, rgba( 0, 0, 0, 0.6 ) 50% );While more verbose, the benefits to broad browser feature support certainly outweigh the extra typing involved. In addition, there are a number of great tools that can break down this workload, such as SASS and Compass, -prefix-free, or even CSS Snippets in the upcoming Visual Studio 2011.

Also, if you�re working predominantly in JavaScript and would like to save time determining which features are supported by your client�s browser, review the instructions in A Best Practice for Programming with Vendor Prefixes on the IEBlog.

Step 3: Get Rid of Browser Sniffing Methods

There are two methods used to determine the capabilities of the user�s browser and device. One method, which unfortunately is somewhat popular, is browser sniffing. This method consists of examining the navigator object for certain patterns or values:

if ( navigator.userAgent.indexOf("iPad") > -1 ) { // Load HTML5 Experience} else { // Load Flash Experience}The above code looks at the user agent string for the value �iPad�, and if found delivers a plugin-free HTML5 experience. Otherwise, it�s assumed you are on a device that has Flash installed. This will result in a broken experience for non-iPad users who are browsing with plugins disabled, even though their browser is capable of handling HTML5 features.

Here is an attempt to find the version of Internet Explorer:

if ( tests.IE ) { j = /msie.(\d\.\d+)/i; k = navigator.userAgent.match(j)[1];}The user agent string is tested for a pattern that attempts to target the version number. This pattern looks for a single digit, followed by a period, followed by any number of additional digits. While this test will find values like �MSIE 8.0� and �MSIE 9.0�, it will not identify the latest version of Internet Explorer, which identifies itself as �MSIE 10.0�, as only one digit is expected before the period.

These are just a couple examples of why browser sniffing is not a best practice. The user agent string is not immutable—it is a read-write value that is easily changed by plugins, or even the user. Most modern browsers include the ability to easily change this value from their development tools, which some users take advantage of to get around poorly-developed websites.

If we disable plugins, or visit MSNBC from a device/browser that doesn�t have Flash, we would expect it to attempt a plugin-free experience. Unfortunately, this is not the case. Rather than seeing an HTML5 experience, we�re instead asked to download Flash. This is because the site puts the user in one of two categories: an iPad user, or a Flash-enabled user.

Feature Detection

Rather than trying to guess what a browser is capable of by sniffing its user agent string (which will fail you eventually), it is much wiser to actually test features directly in the browser. If you wanted to test the browser�s ability to deliver video and audio via HTML5, you could actually attempt to create these elements via JavaScript, and see if the browser understands them. This practice is called feature detection:

if ( !!document.createElement(�video�).canPlayType ) { // Load HTML5 Video} else { // Load Flash Video}In the above example, we start by testing whether the canPlayType method exists on our newly-created video tag. We�re using double-negation to cast the response to a Boolean. If the browser understands what a video element is, the canPlayType method will be present. If the video element is unknown to the browser, the canPlayType method will not exist. If this test passes, we load our HTML5 video. If the test does not pass, we attempt to load Flash. Deeper feature detection could take place here, because Flash may not be on the machine, or may be disabled.

Feature detection is the preferred method of determining what a browser is capable of, as there is no guesswork involved. If the browser passes properly-constructed tests, it absolutely supports the features you would like to use.

Many great tools exist to provide feature tests for you. Once such tool, which provides over 40 tests, is Modernizr. This tool creates a global object called �Modernizr� which contains the results of your tests. With Modernizr, testing for HTML5 video support is extremely easy:

if ( Modernizr.video ) { // Load HTML5 Video}MSNBC engages in browser sniffing to see if the device accessing the page is an iPad or not. Our first step is to remove the browser sniffing code, and replace it with feature detection code.

Before we can modify browser sniffing code, we first need to locate it. While in Internet Explorer, pressing F12 will pull up our Developer Tools. Within the tools, open the Script tab and do a search for �userAgent�. This search will seek out any instance of this property name in all of the site�s script files. We�re interested in the result from line 41 of http://www.msnbc.msn.com/id/37156949/.

Now that we know what we want to edit, we can open up Fiddler and load up our traffic. Once Fiddler is opened, perform a hard-refresh (Ctrl+F5 in IE) on the MSNBC page. This results in all of the page sessions being listed in Fiddler.

Looking carefully, you�ll notice our resource is the third from the top. Next we can set up an AutoResponder for this session file so that anytime it is requested, a custom file is substituted in the place of the server response:

Right-click this session and select �Decode Selected Sessions� from the context menu.
Select the AutoResponder tab on the right.
Click the �Enable automatic responses� checkbox in the AutoResponder tab.
Drag the selected session from the left panel into the AutoResponder tab.

At this point, you should have an entry within your AutoResponder tab with the following rules:

If URI matches: EXACT:http://www.msnbc.msn.com/id/37156949/
Then respond with: *200-SESSION_3

Right-click the entry in the AutoResponder and select Edit Response. In the popup that follows, switch to the SyntaxView tab where we will find the source for this file. As expected, line 41 contains our browser sniffing code:

if ( !(navigator.userAgent.toLowerCase().indexOf("ipad" )>-1) ){ // Flash Experience}Rather than test the contents of the userAgent, we�re going to instead look for support for the HTML5 video tag. Switch the above condition to the following:

if ( !document.createElement("video").canPlayType ) { // Flash Experience}This test checks to see if we cannot use the video element. If canPlayType comes back as undefined, it will be cast to true and the first code block will be entered, setting up the Flash experience.

Step 4: Update Touch and Pointer Events

Safari supports both a touch event model and a mouse event model. Internet Explorer 10 groups touch, mouse, and stylus events into a single abstract item known as a pointer. In fact, Internet Explorer 10 is the first browser to work for all input types, across all devices. This abstraction cuts down drastically on the amount of effort involved to determine which event model you ought to bind to and how to detect user-interaction. This pointer is then handled through MSPointer events. If necessary, you can determine the type of pointer by accessing the pointerType property.

As Internet Explorer doesn�t support Apple�s proprietary event model, which includes touch events like touchstart, touchmove, and touchend, MSNBC�s event listeners will need to be amended to listen for MSPointer events like MSPointerDown, MSPointerUP, and MSPointerMove.

Due to the difference in event model implementations, use a feature detection tool like Modernizr or code like this to target all major event models:

if (window.navigator.msPointerEnabled) { myCanvas.addEventListener("MSPointerMove", paint, false);} else { myCanvas.addEventListener("mousemove", paint, false); myCanvas.addEventListener(�touchmove�, paint, false);}MSNBC only supports touch events, which we will need to change so that visitors who happen to be using a mouse can still interact with the page. Our events are tied up in http://www.msnbc.msn.com/id/43662671/15:

document.addEventListener("touchstart", touchHandler, false);document.addEventListener("touchmove", touchHandler, false);document.addEventListener("touchend", touchHandler, false);We�re going to update this to include the MSPointer events as well:

if (window.navigator.msPointerEnabled) { document.addEventListener("MSPointerDown", touchHandler, false); document.addEventListener("MSPointerMove", touchHandler, false); document.addEventListener("MSPointerUp", touchHandler, false);} else { document.addEventListener("touchstart", touchHandler, false); document.addEventListener("touchmove", touchHandler, false); document.addEventListener("touchend", touchHandler, false); document.addEventListener("mousedown", touchHandler, false); document.addEventListener("mousemove", touchHandler, false); document.addEventListener("mouseup", touchHandler, false);}First, we�re checking for the presence of pointers. Since the MSPointer covers the mouse, fingers, and pens, we don�t need anything else besides them. We fall back, if necessary, to provide both touch and mouse events.

Next, we need to create cases for these event types in http://www.msnbc.com/id/44937131/. Currently, MSNBC starts with the following:

if ( event.type == "touchstart" ) { /* Start drag logic */} elseif ( event.type == "touchmove" ) { /* Drag logic */} elseif ( event.type == "touchend" ) { /* Complete drag logic */}We�ll modify this to listen for all of the registered event types:

if ( event.type.match( /(down|start)$/i ) ) { /* Start drag logic */} elseif ( event.type.match( /move$/i ) ) { /* Drag logic */} elseif ( event.type.match( /(up|end)$/i ) ) { /* Complete drag logic */}The above uses the match method and a series of regular expressions to determine which event was raised. If the event raised ends with a case-insensitive �down� or �start�, we begin our drag code. If the event ends with a case-insensitive �move�, we perform the actual drag logic itself. And lastly, if the event ends with a case-insensitive �up� or �end�, we end our dragging event. Note: other events may be caught here as well, like onresizeend and keyup. Be sure to consider this in your project.

The above is an implementation of Ted Johnson�s solution in Handling Multi-touch and Mouse Input in All Browsers.

The drag logic itself initially relies upon the event.targetTouches TouchList. This member does not exist in Internet Explorer. The drag logic attempts to gather the pageX and pageY properties from the first item in the TouchList, however, in Internet Explorer these values are found directly on the event object:

var curX = event.targetTouches[0].pageX;Using the logical OR operator, I instruct curX to hold the value of event.pageX as long as event.pageX is present on the event object. If this property is not found, look within the targetTouches list:

var curX = event.pageX || event.targetTouches[0].pageX;If event.pageX is not found, we fall back to assigning the value of targetTouches[0].pageX to our variable.

Another important item to keep in mind is that this site initially responds to touchmove. When this event is raised while touching the playlist, the code attempts to reposition the playlist based upon your touch movement. There is no hovering when it comes to touch—you�re either touching, or you�re not.

Now that we have mouse events tied into this logic, we have introduced the possibility for hovering. So while touchmove is free to reposition our playlist when it is over the playlist, we don�t want to do the same for mousemove. In fact, we only want the mousemove event to reposition the playlist when the mouse button is pressed.

For further reading, and examples on how to target all browsers, see Handling Multi-touch and Mouse Input in All Browsers.

Testing Both Experiences

Recall our feature detection from earlier, how we first check to see if HTML5 video support is in the user�s browser. If it is, we give them HTML5. If it is not, we give them Flash. One easy way to test our work is to use a browser, or document mode, that doesn�t support HTML5 features. This is very easy to test with Internet Explorer:

Press F12 to reveal the Developer Tools
Change your Document Mode to Internet Explorer 7 Standards
Refresh the page

If our feature detection condition was written properly, you should now be watching a Flash-based presentation. Switching your Document Mode back into Internet Explorer 9 Standards (or �Standards� if you�re using IE10), will return you to the HTML5 experience.

Get it Done!

Hopefully this post helps to define the types of changes that will allow your iOS site to work properly in IE10 Metro and other plugin-free environments. By including best practices such as feature detection and responsibly using vendor prefixes for great new features, you should be able to provide your users with a great experience, regardless of which browser or device they�re using. To assist with testing in other plugin-free environments, download Internet Explorer 10 (currently available only in the Windows 8 CP) and begin testing today!

More...

5 Useful CSS Tricks for Responsive Design

Web Designer Wall — Wed, 16 May 2012 20:21:26 GMT

Making the design to be responsive is very easy as shown in my Responsive Design in 3 Steps tutorial, but maintaining the elements to look aesthetically balanced on all breakpoint layouts is an art. Today I'm going to share 5 of my commonly used CSS tricks along with sample cases for coding responsive designs. They [...]
Advertise here with BSA

More...

Some Random JavaScript Coding Tidbits

Impressive Webs — Wed, 16 May 2012 13:45:34 GMT

Although my knowledge of HTML and CSS seems somewhat rounded and complete, I don't feel the same way about JavaScript. I always seem to be learning something new, or else reminding myself of stuff I might have learned years ago but have forgotten. So here are a few things I've recently learned or read about that might be useful to you.

More...

10 Excellent Online Payment Systems

Six Revisions — Wed, 16 May 2012 07:17:27 GMT

Advertise here with BSA

In this article, we’ll be reviewing my top 10 online payment systems for accepting payments on the Web. While many of the companies on this list have been available to online merchants for years, many are also now getting into new areas of online payments such as social commerce and in-store online card reader systems.

A Quick Primer on Online Payment Systems

Before getting started, here are just a few things to know about online payment systems.

ACH payments are electronic credit and debit transfers, allowing customers to make payments from their bank accounts for utilities, mortgage loans, and other types of bills. ACH stands for Automated Clearing House and most payment processors offer ACH payment options to their customers, especially for monthly- and subscription-based transactions. Most payment solutions use ACH to send money (minus fees) to their customers.
A merchant account is a bank account that allows a customer to receive payments through credit or debit cards. Merchant providers are required to obey regulations established by card associations. Many processors (such as the ones listed below) act as both the merchant account as well as the payment gateway.
A payment gateway allows merchants to securely pass credit card information between the customer and the merchant and also between merchant and the payment processor. The payment gateway is the middleman between the merchant and their sponsoring bank.
A payment processor is the company that a merchant uses to handle credit card transactions. Payment processors implement anti-fraud measures to ensure that both the front-facing customer and the merchant are protected.
PCI compliance is when a merchant or payment gateway sets their payment environment up in a way that meets the Payment Card Industry Data Security Standard (PCI DSS). The PCI DSS standard was created by the Payment Card Industry Security Standards Council to increase security of cardholder data and to reduce fraud.

What follows are 10 excellent online payment systems.

1. Authorize.Net

Authorize.Net is the Internet’s most widely used payment gateway. With a user base of over 300,000 merchants, Authorize.Net has been the go-to method for e-commerce sites that need a gateway to accepting payments. Widely used e-commerce platforms such as Magento, Volusion and X-Cart are designed to accept payments using Authorize.Net easier.

Pricing: Authorize.Net has a $99 setup fee, costs $10 per month and takes a $0.25 per-transaction fee. Source: Authorize.Net pricing

2. PayPal

PayPal is the world’s most widely used payment acquirer, processing over $4 billion in payments in 2011. PayPal payments are made using a user’s existing account or with a credit card. Money can be sent directly to an email address, thus prompting the users to sign up for a new PayPal account. In addition to taking payments, PayPal also allows its users to send money through the service, which is a feature that only a few payment solutions provide.

Pricing: PayPal takes 2.9% + $0.30 per transaction and has no setup or monthly fees. Source: PayPal merchant fees

3. Google Checkout

Google Checkout is Google’s answer to PayPal. Google Checkout allows users to pay for goods and services through an account connected to their Google profile. The major benefit that Google Checkout has over the competition is that millions of Internet users use Google for other services, making a purchase through Checkout a simpler process.

Pricing: Google Checkout fees start at 2.9% + $0.30 per transaction for sales less than $3,000. The percentage they take goes down depending on monthly sales volume. Source: Google Checkout fees

4. Amazon Payments

Amazon Payments allows its users to receive money using its API (and to send money out via ACH). Popular crowdfunding site Kickstarter uses Amazon Payments.

Pricing: Amazon Payments fees start at 2.9% + $0.30 per transaction for payments over $10 (the percentage they take is less for larger transactions). For payments under $10, the fee is 5.0% + $0.05 per transaction. Source: Amazon Payments fees

5. Dwolla

Dwolla is a direct competitor to PayPal. One of the newcomers in the third-party payments space, the company is processing over $1 million per day. Setting up Dwolla payments is similar to PayPal, although Dwolla doesn’t have the same name recognition as their competition.

Pricing: There are no fees for transactions less than $10. For transactions over $10, Dwolla charges $0.25 per transaction. Source: Dwolla fees

6. Stripe

Stripe provides an excellent payment solution for web developers who would like to integrate a payment system into their projects using Stripe’s robust API. By bypassing the traditional sign up process, Stripe acts as a merchant account for its providers, handling all PCI compliance and merchant approvals.

Pricing: Stripe charges 2.9% + $0.30 per transaction with no setup or monthly fees. Source: Stripe: pricing

7. Braintree

Braintree is an online payment gateway and merchant account solution known for working with popular tech startups such as Airbnb and LivingSocial.

Pricing: Braintree has a $99 setup fee, a $35 monthly fee (with a $75 monthly minimum). Transaction fees start at 2.29% + $0.30 per transaction for qualified cards. Source: Pricing – Braintree

8. Samurai by FeeFighters

Samurai is a payment gateway and merchant account solution. The company’s main product, FeeFighters, is a tool to help merchants compare rates for merchant accounts. Samurai was developed as a direct competitor to Braintree and other gateway/merchant solutions and offers customers a payment gateway or a gateway/merchant account package.

Pricing: For their gateway/merchant solution, Samurai takes 2.3% of all sales volume, costs $25 per month and charges a $0.30 fee per transaction. Source: Samurai by FeeFighters pricing

9. WePay

WePay is a payment processor that allows Internet merchants to accept credit cards and bank account payments online. WePay seems to be focused on the individual user, and has recently added e-store pages to their service to help their customers conveniently take in payments (e.g. event tickets, products, donations and so forth) through their service.

Pricing: WePay charges a 3.5% transaction fee (with a $0.50 minimum) for credit card transactions and $0.50 for bank payments, with no setup or monthly costs. Source: WePay fees

10. 2Checkout

2Checkout is another payment processor that combines a merchant account and payment gateway into one, allowing customers to receive credit card payments as well as PayPal payments. The company offers international payments, shopping cart stores as well as a recurring billing feature.

Pricing: 3.99% (if you apply by May 1, 2012), a $0.45 transaction fee and $10.99 monthly service fee. Pricing and fees – 2Checkout

Other Noteworthy Payment Systems

Here are other online payment systems I think you should also check out:

Serve (by American Express)
V.me (by Visa)
clearXchange (by Bank of America, Chase and Wells Fargo)

What about Payments through Mobile Devices?

These two payment services allow merchants to accept credit card payments directly through their mobile devices, making it possible for devices such as the iPhone, the iPad and Android smartphones to act as a mobile point of sale (POS) checkout system.

Conclusion

There are plenty of online payment systems out there that you can use to conduct e-commerce activities. Choose one that’s in line with your business objectives.

This isn’t an exhaustive list of online payment systems. If your favorite online payment system isn’t on the list, please share it with us in the comments and discuss why you choose it over other online payment systems.

Related Content

Essential E-Commerce Website Features: Tips and Examples
Top 5 Excellent E-Commerce Plugins for WordPress
Tips for Creating an Excellent E-Commerce Website
Related categories: Tools and Web Development

About the Author

Rosston Meyer is the founder of Sponsorist.com, a marketplace where advertisers, non-profits and people in need of sponsorships come together to make deals. Rosston has a strong background in Web marketing, design and development having worked as a freelance developer for the past four years. Follow Rosston on Twitter: @rosstamicah

More...

Responsive Images and Web Standards at the Turning Point

CSS Tricks — Wed, 16 May 2012 07:17:27 GMT

Mat Marquis keeping us up to date on the responsive images hot drama. Good reminder at the end about not picking sides.

Responsive Images and Web Standards at the Turning Point is a post from CSS-Tricks

More...

ShopTalk Episode 18

CSS Tricks — Wed, 16 May 2012 07:17:27 GMT

With ol' Mean Gene Crawford! We talk about crazy clients, responsive images, health, and all kinds of other shoptalk. Thanks to Mijingo for sponsoring this episode.

Direct Link to Article — Permalink

ShopTalk Episode 18 is a post from CSS-Tricks

More...

Responsive Images and Web Standards at the Turning Point

A List Apart — Wed, 16 May 2012 00:23:03 GMT

Responsible responsive design demands responsive images�images whose dimensions and file size suit the viewport and bandwidth of the receiving device. As HTML provides no standard element to achieve this purpose, serving responsive images has meant using JavaScript trickery, and accepting that your solution will fail for some users. Then a few months ago, in response to an article here, a W3C Responsive Images Community Group formed�and proposed a simple-to-understand HTML picture element capable of serving responsive images. The group even delivered picture functionality to older browsers via two polyfills: namely, Scott Jehl�s Picturefill and Abban Dunne�s jQuery Picture. The WHATWG has responded by ignoring the community�s work on the picture element, and proposing a more complicated img set element. Which proposed standard is better, and for whom? Which will win? And what can you do to help avert an �us versus them� crisis that could hurt end-users and turn developers off to the standards process? ALA�s own Mat Marquis explains the ins and outs of responsive images and web standards at the turning point.

More...

jQuery - highlighting a menu item when it's selected in conjuntion with step carousel

Aimee — Tue, 15 May 2012 20:25:17 GMT

Hi all,

Working on the group project at the moment and trying to get our menu to highlight an item when that item has been selected.

Where this seems to become more difficult is that this needs to work in conjunction with step carousel so that the highlighting changes to the new item when the next panel has been selected or moved in the sequence.

This is the script

HTML Code:

and this is the navigation bar

HTML Code:

"secondary-navigation">                           "javascript:stepcarousel.stepTo('mygallery', 1)" class="unselected">about                             "javascript:stepcarousel.stepTo('mygallery', 2)" class="unselected">people                             "javascript:stepcarousel.stepTo('mygallery', 3)" class="unselected">fields       "javascript:stepcarousel.stepTo('mygallery', 4)" class="unselected">philosophy             "javascript:stepcarousel.stepTo('mygallery', 5)" class="unselected">experience             "javascript:stepcarousel.stepTo('mygallery', 6)" class="unselected">awards             "javascript:stepcarousel.stepTo('mygallery', 7)" class="unselected">clients

If you want to have a look at the actual page it's here:
http://www.reedmacevents.co.uk/ta138/
username: maweb
pass: Zeldman1