Donncha: WP Super Cache 0.9.9.7

WP Super Cache is a full page caching plugin for WordPress that makes your website run much faster!

I’ve just released a new version and the biggest change in this one is the addition of Content Delivery Network (CDN) support thanks to Mark Kubacki who allowed me to integrate his OSSDL CDN Off Linker plugin. (Please go visit his blog and say thank you if you use this feature!)

The CDN support simply rewrites images, CSS and Javascript files so they point at a different hostname. That hostname can be another virtual host on your own server (aka “Poor Man’s CDN”) pointing at your WordPress install or a fully fledged CDN. If your CDN supports “origin pull” then all the files on your server will be copied there as they are requested by visitors. Otherwise you’ll have to transfer the files over manually.

Apart from that, bugs have been fixed, a few features have been tweaked including the uninstall script which has been streamlined somewhat.

I also added links (on the “Easy” settngs page) to some plugins and tools you may find useful in making your site run faster.

Problems? Go to the forum and someone may already have had that problem and solved it. If not, post there and you’ll get a reply.

Related Posts

• WP Super Cache 0.8.4, the garbage collector
• WP Super Cache 0.8.7
• WP Super Cache 0.9.9

iThemes gets patriotic with Americana blog theme

Matt Danner from iThemes has released their newest Builder child theme, Americana. You can demo Americana here. Some websites are already using it.

Here are some of the features of this new theme:

• Full width modules – Don’t get stuck in the box. Break out with this awesome full width style.
• The Power of Builder with Unique Style – Our Builder theme offers you simple layout control, infinite widget areas, and more settings than you can shake a stick at (if you’re into that). With Americana, you can take advantage of all of this power, but with an awesome design that you can customize to meet your needs, or the needs of your clients.
• Alternate Module Styles – This is our first Builder child theme to offer you Alternate Module Styles. Basically, this allows you to easily have multiple styles of the same module. Rather than me babbling on trying to explain it, check out the video below that demonstrates Alternate Module Styles in action.

Americana is available for download if you are an existing Builder or All Access Pass customer on iThemes. Buy iThemes Builder for $127.

You can follow Matt on Twitter.

Mining Flickr to Build 3D Models of the World

Microsoft’s PhotoSynth tool is jaw-droppingly awesome. But, because it’s a Microsoft project, the technology is unlikely to appear on some of your favorite non-Microsoft online apps, like Google Maps or Flickr.

However, our friends at ReadWriteWeb stumbled across a very similar tool — at least in terms of the end result — developed by the University of North Carolina in conjunction with Swiss university, ETH-Zurich.

The team has developed a method for creating 3D models by pulling in millions of photographs from Flickr and using some fancy algorithms to generate 3D models of local landmarks. Perhaps even more impressive the results can be generated using a single computer in under a day.

Project lead Jan-Michael Frahm touts the project’s efficiency saying, “our technique would be the equivalent of processing a stack of photos as high as the 828-meter Dubai Towers, using a single PC, versus the next best technique, which is the equivalent of processing a stack of photos 42 meters tall — as high as the ceiling of Notre Dame — using 62 PCs. This efficiency is essential if one is to fully utilize the billions of user-provided images continuously being uploaded to the internet.”

While the results are cool and would make an impressive addition to any number of geo-based services, more serious use cases include helping disaster workers get a better idea of where they’re headed and the extent of damage.

So far the researchers have released a movies demonstrating the technique on landmarks in both Rome (get it? built in a day…) and Berlin, and the results are impressive. For more information on how the process works, check out the UNC website.

See Also:

• Photosynth Returns With More Mind-Blowing Photo Tricks
• New Flickr Is Bigger, Wider and Uncut
• ‘Unwrap Mosaics’ Take Video Editing to a New Level

Transparent CSS Sprites

One of the most useful front-end development techniques of recent years is the humble “CSS Sprites”. The technique was popularised by Dave Shea on A List Apart in 2004 with his article CSS Sprites: Image Slicing’s Kiss of Death. CSS Sprites are a relatively simple technique once you understand the fundamentals and it can be applied in all manner of ways. A common use is for a graphic intensive navigation, but it can also be useful for buttons or even styling headings with the corporate font.

Sprites are simply a collection of images which are merged together to create a single file. You then use CSS, changing the

the image, to display the correct part of the image you need. I often use the analogy of a large object passing a window — you only see what is within the frame.

Over the last couple of years CSS Sprites has been one of the most widely adopted CSS-related techniques. Popularised by the Yahoo’s research and documentation around speeding up your website, many high profile websites implement the technique, including Google and Amazon. There are numerous tutorials which help you get to grips with the techniques and sprite generators which help you create the graphics themselves.

The Benefits and Potential Problems

CSS Sprites have become a de-facto way of improving the speed of your website or web application. Merging multiple images in to a single file can quickly reduce the number of HTTP requests needed on a typical website. Most browsers only allow for two concurrent connections to a single domain so although individual files can be large, the overall request and response times are considerably lower. Combining images with similar hues also means the colour and compression information is only need once, instead of per file, which can mean an overall reduced file size when compared to the files individually.

The benefits of reduced file size and HTTP requests are often publicised, but potential problems are rarely ever discussed. One of the main techinical issues with CSS Sprites is memory usage which is explained in the article “To Sprite Or Not To Sprite”. Another issue is the maintenance of the sprites, the images and the CSS, both of which can become rather complicated.

A Technological Solution

A common practice in solving slow-down in computing seems to simply throw in more hardware. We all know hardware prices are dropping all the time, so this seems like a reasonable solution. However, I feel there is a fundamental flaw with this philosophy and ingrained mentality. Developers have access to more computing power and as such they code their applications to be handled in these environments. With each new feature the application becomes slower and slower, but this problem has already has a solution — upgrade your hardware. This is an endless cycle.

Many of the user interfaces people come across today are on the Web. This means the user has to download most of the related material (images, CSS, JavaScript) before interacting with the content, so the same philosophy must be applied to the Web. Websites, or more recently web applications, are becoming more complex, even replacing many desktop applications, therefore the user must first download more and more information before beginning their experience.

Although file sizes required to view a website have increased dramatically over recent years, more and more people are upgrading their Internet connections, with broadband becoming the norm in many countries. This cycle conforms to the hardware upgrade philosophy and in theory should negate any potential user experience problems.

However, web developers are falling in to the same trap which many application developers have before. As layouts become more complex, more images are required and so the developer creates more images — even if they are sprites. This seems like a reasonable assertion, but it doesn’t mean it is the best solution.

A Twist on the Technique

Due to the limitations of the Web, there have been many inventive solutions to problems. But the Web isn’t the only place where there can be very tight limitations. Innovation strives on limitation. A great example of this was in the iconic game Super Mario Brothers where the bushes were just recoloured clouds.

This very simple but extremely effective implementation made me think about how to reuse common interface elements, trick the user to believe something the same is different!

Now on to the twist, this idea is to create a transparent sprite allowing the

to show through. If you are familiar with CSS Sprites, you should be able to grasp this twist relatively easily.

Simply, an image with a transparent “knocked-out” transparent center is placed over a background colour. Changing the background colour changes the appearance of the element. The only thing you need to pay attention to is that the colour surrounding the transparent part of the image matches the background in which you are using the techinque. This stops the background colour bleeding in to other parts of your image.

Anyway, this technique is much easier to understand in an example…

Example

The following example is only made up of three images. One for all the font samples, one image for both sets of droplets, including hover and active states, and one for the all buttons.

The Images

Fonts
The font image contains transparent typefaces on a white background, meaning they aren’t viewable on a white background. Save the file from the example, open it in your favourite graphics editor and you will see the transparent typefaces.

Drops
The drops image is used on the example above as the colour picker. A single graphic containing the gradient drop on the two different backgrounds, so the

is masked out correctly. The image contains all three states used in modern interactive interfaces — static, hover/focus, pressed/active.

Button
The button technique is the most flexible and probably most useful way to use this technique. A simple sprite image containing two states — static and hover/focus — which is then placed over text to create the button. Simply adding a

will make every use of this button the same style across your application or website.

Below is some CSS which styles simple fixed width buttons with a grey background colour, but also has two different treatments, “warning” and “go”, which have red and green background colours respectively.

a.button {
  display: block;
  width: 80px; height: 30px;
  margin: 0 20px;
  font-size: 14px; line-height: 30px; color: #fff;
  text-align: center; text-decoration: none;
  background: #4a4a4a url(button.png) no-repeat 0 0;
}
a.button:hover,
a.button:focus,
a.button:active {
  background-position: 0 -40px;
}
a.button.warning {
  background-color: #ea1d22;
}
a.button.go {
  background-color: #309721;
}

The CSS above produces the following buttons:

• Normal
• Button
• Continue
• Go!
• Stop!

Conclusion

This techinque could be useful when providing a range of themes for a website. You could create one set of buttons and icons then add the background colour which best suits the selected theme.

Although this technique will never be as broadly useful as the original CSS Sprites, the idea can be useful for websites which allow user theming. The technique could also be used when creating HTML mockups, allowing you to easily update colours based on client feedback.

The main benefit this technique has is that it reduces the number of HTTP requests. But it also reduces browser memory usage compared with what would be needed if you created a larger sprite to handle all the colours you need.

I would like to mention one caveat though, IE6, because it does not natively support transparent PNGs. There are PNG fixes, but none¹ of these support

which is needed if you are using this technique with CSS sprites, such as with the buttons and droplets above. However, you could provide a slightly less optimal experience using GIFs instead.

1. The IE PNG Fix from TwinHelix does include support for

, but the solution requires JavaScript.

Further Resources

If you are interested in any aspect of CSS Sprites, check out the following extra resources.

• Fast Rollovers Without Preload – the initial inspiration for CSS Sprites.
• SpriteMe – a bookmarklet to generate sprites based on an existing website.

Below are a list of links used within the article:

• CSS Sprites: Image Slicing’s Kiss of Death – the A List Apart article by Dave Shea.
• Yahoo! Performance Guideliness – best practices, tools and research from Yahoo!
• CSS Sprite Generator – a tool to help you create your sprites by Ed Eliot.
• To Sprite Or Not To Sprite – an article about some potential system performance caveats with sprites.

© Trevor Morris for Smashing Magazine, 2010. | Permalink | Post a comment | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags: CSS

Take The Initiative and Create Your Own Projects

During my last job with a large corporation, people started to get laid off. Many fellow creatives came to me, as they had no idea what they would do if they were let go. I had come to that small city from New York and my experience was varied and impressive to those who started their careers with this company. Their parents had hoped for their own children to work there and eventually retire in the same homey place. They were anchored in this town that held no other industries. Like layoffs in a town that has a steel mill, there weren’t many options to those looking for work.

“You’re creative,” I would tell people before my turn came in the next to last round of layoffs (which is some comfort). “You can do so many things that are creative. If you get pushed out the door, make your own projects!” Then advise them where to go and spend the rest of the day creating a book, or painting a series for a gallery show, or create postcards, greeting cards, dolls and websites. This was usually followed by the persons to whom I was speaking to, to ask about something they obviously wanted to explore; leading to a discussion, usually joined by others as well, on how to achieve it. The dividing line is how badly does one want it?

Take The Initiative!

Tailor (A) gives creative (B) a snappy new “power suit”, SO irresistible that the client (C) hugs the suit (D) causing it to hit paddle (E), smashing expensive vase (G) and wasting a perfectly goof head of cabbage (I). Further destruction reigns havoc (K – P), dousing all competitors with a toxic chemical (Q). Illustration by Rube Goldberg.

I’m a big believer in self-propelled initiatives. It’s how I make a living. Writing for Smashing Magazine is an initiative. Everything is done before Smashing ever sees it. Authors have to come up with the idea, research it for presentation, get the approval and then write it and submit it. It’s initiative. As with what you may perceive as easy to pitch an article, most initiatives are simple!

All of my career I’ve had people come to me to relay that they have written a book and need a cover or images for the inside so they can send it to a publisher. I tell them they don’t need all that. Just send in the manuscript with a self-addressed-stamped-envelope (many publishers have digital submissions on their sites) and the publisher will choose cover designers and illustrators themselves.

Some people smile at the realization that their dreams were an easy step closer. Some didn’t believe me and insisted I design something for them (and draw, because I’m an “artsy-type!”). I look over the pages and tell them it’s an idea that shouldn’t be “set aside lightly”. They smile and then I tell them it should be “thrown with great force” (with apologies to Dorothy Parker). Some people want it to be done for them. Maybe it’s the prompting of a contest or a “might-as-well-take-it” project.

Would you rather be working on a low-paying project that is screwing you up at every turn or invest in yourself with the time put towards your dream project? It’s not hard coming up with an idea and creating the images, code or what-have-you. The difficult part is making yourself do it and then selling it and that’s where most people fail.

One of my recent favorite self-initiative stories was about an injured creative with time on his hands and a need for income. Dave is a designer at the Iconfactory and responsible for the ultimate Twitter icon Ollie the Twitterrific bird; he had broke his foot while playing soccer over the Fourth of July. That meant that the poor guy was relegated to staying off his feet at home. Rather than wallow in self-pity, he decided to use the opportunity to keep himself from going completely Rear Window and offer up his design skills to the large Web community — and successfully so!

Self-initiative is not easy for most people. Working for someone else provides a regular paycheck, security, after a fashion, and someone telling you what to do. No self-motivational projects needed. As one person commented on a past article on crowdsourcing,

“I recently participated in the LG “Design the Future” contest (yeah, I didn’t win)… but rarely do I get the chance to design a cell phone like product… it was a great exercise in creativity and it really let me flex my muscle… and they had some substantial cash prices (first prize was $20,000)… I feel like competitions like that are great for the industry. The rules were pretty relaxed and it really let people go hog wild and show off what they can do. Too often you’re forced to roll with the clients vision. It’s great to have a contest that let’s you be you.”

As I was arguing the pros and cons of crowdsourcing in that article, I just had to reply for his edification:

“I understand your point, but let me play devil’s advocate and explore another option. So you submitted something you really enjoyed designing and it stretched your creativity. You loved your final submission. You didn’t win and the client, I assume, owns it anyway. What if you had designed it but not submitted it and then sought out companies that might purchase the rights to the design? You would have taken a cue to create your own initiative and owned the product rights.”

Was the prize worth giving away all rights to the winner? What would the client have paid a design firm or freelancer to do the work? I’m guessing that the prize cost was considerably less than the one that would have run the company. So, who was the real winner? Which avenue held a better chance for him? The odds of him winning the contest and giving up the idea anyway without winning, or the odds of him being able to sell the design on the open market, or  maybe not, but owning it to try again? I can’t say.

Persistence in selling the idea and protecting it can be daunting. Even though, sometimes even an e-mail comes back right away that says, “I love it!”… and a check eventually arrives. (Note: you shouldn’t participate in such speculative design work as a professional in the first place and here is why — Smashing Editorial)

What Will Get You Started?

A tidal wave of ideas or bills (A) will motivate another creative nearby to foolishly open an umbrella (E) in a lame attempt to hold back the flood, causing what looks like a giant earring (H) to fall and pull the hammer (J) so it strikes a piece of metal (K), waking up the baby (L) who must be rocked to sleep (N) by a trained and poorly-paid dog (M), causing the attached backscratcher (O) to tear at your flesh until you decide it’s better to get off your rear and do something. Illustration by Rube Goldberg.

Your idea. Your dream. No one will do it for you. Even if you have to work at something non-creative — use the money to live, but make your dream the priority. Crappy job gets in the way of your dream? Find another crappy job! They’re everywhere and except for the slaughterhouse idea, they won’t drain your creativity. Have the idea? Now set your plan. Just like your previous boss who had always made projects go around and around, it’s finally time to make your own plan, knowing it will work better, and make it happen!

First, research who your customer is. Using Web sources or going to stores are the best way to find out some helpful examples of consumer habits (yes, marketing people never leave the office, they rely too much on figures supplied to them). See what people are buying and talk to them. I used to go to stores that carried products made by the company for which I worked for, and watched what people bought or didn’t and asked them why.

I would smile as I approached them, excuse myself and explain what I was working on and gathered their opinions. This is probably why my products sometimes sold very well. Know your consumer base!

Also, figure out costs and how you will cover them. You may need a loan or investors. What website and functionality will you need? Packaging, having stock, shipping, advertising, taxes? Is your dream project for you to start a business or do you want someone else to produce it? If you are producing it yourself, you can get a business loan, but you are about to take many, many risks. Get legal and financial advice next. It’s well worth the money and will give you the final tally of whether or not this will be your dream or nightmare.

If you are creating something to pitch to a company for their purchase or licensing a property (certain photos for calendars and cards, for instance), there are a similar but different set of rules.

Start with the idea and marketing, create a style guide and/or presentation. A friend of mine wanted to publish a graphic novel for a pitch for a property she was trying to sell but couldn’t afford upfront fees for an artist and writer and printer, so I told her to use a WordPress blog to post her promotional material that she already had and that would give her a great presentation — the easy way.

Research which company you think would want to take on the project. Again, go online or to a store and look around. Want to really impress potential clients? Ask the store’s permission to set everything up; take videos of shoppers and their answers. What better way to produce proof of a need and then give clients the means to fulfill it!? Let your imagination run wild! As with the man who was so excited by the contest he entered, stretch yourself creatively.

Found the perfect prospect? Do your research and find the people you need to reach. There are many business networking sites. Search the company and find people and their titles. Get addresses and phone numbers. Call the receptionist and ask her/him who is the head of marketing or if they have an R & D contact person. If they don’t know, ask to speak to the secretary of the VP of marketing. Maybe she/he can get you closer. Also, use your network. Do any of your contacts know someone you are trying to reach?

Sounds difficult? It isn’t really; just keep in mind that it takes a lot of persistence, patience, as well as a good sense of humor. Once you lost one of those, you won’t make it.

A Non-Disclosure Agreement Is Standard

While feeding yourself (A), the spoon pulls the string (B), flipping a piece of drilled iron into the head of a parrot (E), who is knocked unconscious and knocks it’s beak into a bowl (G) which spills parrot food into a bucket (H) that sets of fireworks (K) inside your house with a razor sharp sickle (L) attached to it, cutting the string (M) and forcing you to remember the paperwork to enforce your rights by smacking you in the face with a contract repeatedly! Illustration by Rube Goldberg.

It’s standard to either have your own Non-Disclosure Agreement or pick up a copy of Tad Crawford’s book on contracts and forms. Bigger companies will insist on using their own. Bigger corporations, to their own detriment, usually have no access point for outside ideas. They are afraid your idea may be something they are working on and they will be sued down the line. Middle-sized companies will just tell you they happen to be working on the same idea. Document your contacts and submissions well.

I was recently told over a dozen product designs would not be used. I later heard the products were available in every catalog world-wide. Did they think my price would go up if I found out how well the work did? You bet it will! Keep your expectations high (expect the middle to low high) when negotiating. A recent question came in from an artist in Mexico who ran across a sleazy representative in the United States who was basically ripping her off for one of her licensed characters. She had jumped at the chance because it was her first time working in a licensing arrangement. I hope she followed my advice.

As with any business transaction… think! Anyone who rushes your decision is up to something. Do your research and see what you find.

Bless The Web And All Who Surf It!

Extended and dangerous hook (A) catches old fashion sign (B), causing electrical shorts that start a fire and the boot to swing back, kicking the football (C) over the goal post (D) and into a colander (E) which tips the watering can (G) to soak the creative’s back, pants and shoes, which will lead to misunderstandings and new nicknames. The string (I) pulls open the cage (J) allowing the bird (K) to go to eat the worm (M), as the bird had been starved in retaliation for all the Twitter fails, causing the shade to be pulled down (N), which reminds the creative to mail that proposal in his pocket. Using theiWeb only takes half the steps. Illustration by Rube Goldberg.

The Web holds a billion of possibilities. As I mentioned about my friend who built a blog, rather then going through the costs of print, you can hardly lose with a great idea and the ability to bring it to life on the Web. With e-commerce made so easy, how can you not have a site that sells something? At least most of the people I know have a Cafepress or Zazzle “shop”.

When I first started with web design, back in the days when processors ran on mud and sticks… and fire, which was new, I put up sites for my infamous chili recipe, one for each of my kids, a site for toy collectors, and it went on. Why? The Web was young and there were probably only 73 sites live and forty of them were mine!

Use your down time. Partner with friends and split the rewards. Ever hear of a group of social outcasts who got together and created something called “The Onion?” No? I haven’t either, but I do hear good things and that they crawled their way up to be, I believe, the number one humor site in the world. It must have started with an idea and someone’s dream.

(ik) (vf)

© Speider Schneider for Smashing Magazine, 2010. | Permalink | Post a comment | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags: creative, initiative, projects, spec

Billboard Web Design: How to Win Your Audience’s Attention

Let’s say you’re driving down the freeway at 65mph and you see the roadside plastered with advertising posters on both sides. Some small, some large, all meant in some measure to cause you to remember a brand or identity, to keep that company name in your mind. The more saturated the roadside becomes with advertisements, the more the brand has to be distinctively creative, unique and memorable.

Generally, the eye-catching ads are mostly the ones with witty taglines that are easy and fun to remember. As much as the colors of the images and fonts being used are important to make it easy on the eyes, the idea actually has to be unique and simple enough to be separated from other commercials.

Photo credit: Randy Harris

The same principle applies to any website. Though a user won’t necessarily be passing by your site at 65 mph, there is a certain bounce rate — visitors who leave your site shortly after entering it. For many websites, these rates are much too high. This poses a very similar challenge to those who design billboards. You have a very short amount of time to capture your audience’s attention and to keep it for long. With that in mind, here are some principles for developing billboard-style Web designs.

Creative and Unique

An important piece to the billboard website puzzle is creative and unique design. This can be intertwined within the other principles, and when done effectively, can be the sole reason for viewers to dig deeper into your site.

Hey Indy
Creative and fun, heyindy.com breaks the mold of an ordinary, plain and boring website. Complete with customized illustrations, drawings and playful typography, each page engages users, making them feel comfortable on the site. Notice how well the illustration on the top fits with the tagline of the site. Hey Indy creates websites, illustrations and animations and uses the “mixtape” metaphor to attract client’s attention. The site is not obtrusive, but inviting instead. A very personal, attractive design.

Dropr
This online service uses a nice typographic poster with playful typography on the front page to explain what it does. The design is attractive and inviting, although a plain simple text message could have worked just as well to deliver the message to the visitors. The interesting part are the animated clouds on the left side with colorful water drops. Very nice use of metaphor contained in the title of the service. An original and unique design.

TVLCORPs
Interested yet? Though the tagline shown on the web design below does not really say what this company does, the layout is creative and compelling; the strong, vivid contrast is more than enough to turn some heads. Notice how “UX/UI” stands out on the site, focusing the visitor’s attention on the ‘services’ section of the page.

{ ro:newmedia }
Sometimes it’s a good idea to risk an unusual design approach — be it exaggerated typography, striking color combinations or unusual design layouts. The latter is the case in point for ro:newmedia’s website. The layout is very unusual and original, and therefore memorable. Colorful large spinning circles look like an overlay of the site layout and appear vividly against the dark background. A downside: the font size of the text on the page could be a bit larger.

Pixelmator
Much different than the standard, pasted screenshot, Pixelmator works the sleek, elegant interface of their application directly into the design of their page.

Relogik
What makes this particular site effective is its ability to draw the eye to the name of the product or service they are showcasing. In this case, it works well to give the company name an afterthought as well as making the product more prominent.

Made My Day
One more test to run is to assume how much impact a particular site has on a reader, if they were to take a quick glance and look away. Ask yourself: If you were to carry out your day from that point, what were you to still remember about that particular site? The large orange circle elegantly integrated into this composition does an excellent job of leaving a style for returning visitors to remember.

Compelling Headlines

A good design only goes as far as the content it contains. For this reason, it’s vital to go beyond average with your copy text. If you’ve seen a billboard advertisement or two, you may remember the tag lines featured on them. Short and to the point, they’re meant to get you to remember a certain brand.

Many large corporations don’t even use ad copy, but rely solely on their logo and identity to remain effective. One has even gone as far as making their billboard a working sundial in this respect. Though we should all aspire to having a brand of our own this influential, it’s recommended that you stick to clear and powerful copy text along with your design to help capture your readers. Here are some examples of compelling headlines:

Ryan & Sofia
Ryan and Sofia combine hand-drawn design elements with a compelling headline, all supported by a very informal, emotional language and choice of layout. The message is strong and clear, and therefore very appealing.

Comwerks Interactive
This design agency uses a clear and simple language to communicate the purpose of the website. Cute illustrations make a website look less formal and much more engaging. The purpose is clear and the client list immediately proves that the design agency indeed builds cool stuff. A downside: the text on the images in the slideshow would benefit from not being embedded in the images.

Camera+
Clear, contrasting colors only add to the effectiveness of the headline given on this website. In a clear and elegant manner, a reader is quickly able to glance at this website and know its purpose.

Just Dot
Sticking to the billboard clarity, Just Dot provides a clever design and tagline to attract readers. Along with a creative chalkboard theme, this site features neat and clean navigation to help guide readers through the site.

Jeroen Homan
In clear and impacting typography, this site screams out its purpose distinctly. In today’s fast-lane crowd of web-surfers, such clear and impacting titles are a must-have for a captivating and inviting website. This of course, is the case as long as the amount of content allows for this.

DBA Products
An important part of capturing your reader’s attention is in engaging in a conversation. When one reads, “Think before you write” a first reaction is to wonder about what is actually meant by that phrase. Firstly, attention is captured. Secondly, a reader eye is lead to the bottom left corner where they can view a video to learn more.

Clever and Poignant

Not every billboard is meant to be humorous, however, almost all strive in some way to get a point across in a not-so-ordinary fashion. Consider the last few advertisements you’ve seen. If they were selling toothpaste, did the ad simply state “Buy this Toothpaste” or was there something creative and direct to get you to remember that particular brand?

In Web design, the same principle can be applied. With the hundreds, if not thousands, of websites we’re exposed to overall, trends can be seen which are all too often followed. But because the Web is ever changing, simply following trends can lead to a site becoming outdated the moment it’s published.

How can this be avoided? Once again, we can look back at billboard advertisements. What makes many of them effective is their ability to deliver something creative, or other than what the average person was expecting to see.

Tea Round
Complete with high-quality images, Tea Round’s website captures attention, while incorporating a creative tagline.

Spring: Supporting Biodiversity
This particular tagline is effective because it engages you with a question. Notice how the question is not “Do you support biodiversity?” but rather “What will you do to support biodiversity?” which places the reader in a position to feel as though they need to take action!

Tapbots
Another element to creating memorable billboard-style web designs, is the product or service itself. Short and snappy names are just as, if not more important, than the tagline. “Calcbot” is much easier to say and much more memorable than something like “Calculator Application for iPhone.”

Pointy
Featuring a vibrant color scheme and typestyle, Pointy successfully merges creative typography with a compelling and challenging headline. Along with the headline is a clear next action for the reader to take: “Let’s talk”.

Powerfully Branded

Though it’s already been touched a bit thus far, branding is another important piece to powerful Web design which deserves further attention. As with the toothpaste example, a billboard’s purpose may in the end be to generate sales, but just as important is the building of the brand the company is advertising. After all, you can get dozens of different brands of toothpaste, just as there are a multitude of of websites out there, so how is one among the crowd to be remembered? Building a brand through a Web design is the very mark or entity visitors remember you by.

Nike®
Showing the importance of subtle repetition, Nike® combines a creative display of their shoes, while giving viewers multiple views of their logo.

McCafé®
With every cup featuring the McDonald’s® and McCafé® logo, a viewer can be grabbed by the quality of the product, while remembering the brand correlating to it.

Coca-Cola®
The Coca-Cola&reg website is a billboard in action. Complete with the clean logo and bottle, with the clear and simple tagline, the brand is very easy to remember.

What Does a Brand Have to do with a Website Anyway?

Even if the website you’re developing doesn’t have the sole purpose of making money, a brand is still very important. Brands are essential for goading visitors to come back time and time again. Consider some of the recent advertisements you’ve seen. If there is a company you know and love, would you say you’re much more apt to spend time looking at that advertisement, as oppose to the dozens of others you’ve never seen before, or the ones that don’t interest you? The same applies for websites.

Eye-catching, yet tactful

There are countless sites on the web that will undoubtedly catch your attention, but only for the worse. Poor, outdated design, or a heap of flashing animated gifs will only increase your bounce-rate. Appealing sites achieve a balance between capturing reader’s attention and providing an adequate amount of useful information. Something to keep in mind: the design is a key piece of your website, but if it distracts away from the aimed content, it no longer serves its purpose!

Megumi
With jaw-dropping elegance and simplicity, this web design effectively brands their name, gives a brief tour, all while keeping the design clean and clear.

MailChimp
MailChimp’s website design is bold and clean, and it sticks to a consistent color scheme. Bright, complimenting colors are used while making the main content readable.

Row to the Pole
Still retaining a subdued and clean typestyle and color scheme, this site is still able to feature a commanding headline. Communication, clarity, and balanced design are all utilized exceptionally on this layout.

Clean, Simple and Straight to the point

Of course, one of the options is also as simple as simplicity. Not to say we cannot be creative in our delivery, but a saturation of text and images, especially on a home page, can motivate our viewers to click that back button! Here we’ll take a look at some good billboard-style websites that have captured the essence of simplicity to attract readers:

Less
Less has a clean and well-designed interface. Complete with a clever tagline, this application shows you a screenshot of exactly what they’re offering to you. It doesn’t get much clearer than this.

Courier Mac App
Complete with a well crafted icon, Courier clearly depicts their application with cool, soft colors, yet elegantly displaying the showcased application. The catchy subtitle also assists with remembering the name. Something to take note of as well is the fact that the “download” and “purchase” buttons are clearly displayed at the top of the page.

We Are Omazing
With a simplistic approach, this site integrates the imagery and style into the tagline. Branding is in effect as a memorable name is complimented with readable design.

Clarity and Contrast

Pivotal to any design, good contrast is a must. While subtle typefaces and graphics have their place in design, strong contrast is important to quickly direct a reader’s attention or get them to remember something particular. If viewers have to hunt around for what you do or what you offer – more than likely they will not stick around for long. Make it easy for your readers to know what you’re about from the very beginning.

Charles Elena
Don’t be afraid to go big with your text. This site sports an effectively large Sans-Serif font to grab the attention of its readers and to get them to remember what they do. The design isn’t necessarily strong and vivid, but the message is communicated very clearly.

Live Books
There are many different features listed on Live Book’s website, but one thing that’s executed exceptionally well is its clarity. There’s no mystery here, you know exactly what they offer.

Conclusion

In an age where advertisements saturate our market, it becomes all the more visible of the need for creative and effective design. As we’ve explored here, good design goes beyond making things look nice, or following trends, but rather effectively capturing the audience of those whom we wish to view the site. In the end, what action viewers do, or do not take, can come down to the finest details of the decisions made by the Web developer.

Feel free to share your opinions or experiences in the comment section below!

Bonus Billboard Template Download

In addition to the concepts explored here, you can download your free billboard website/image template for displaying your billboard-style design. Place any 440px wide image into the code provided, or modify it yourself for a great way to display your images. See some samples below:

Download the template for free

• download the PSD template (20 Mb, .zip)
• download HTML with CSS (+ a Web ready version of the billboard image)

(ik) (vf)

© Thomas McGee for Smashing Magazine, 2010. | Permalink | Post a comment | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags: advertisement, audience, billboard, commercial, showcases, tagline

PHP snippets to interact with Twitter

Get number of Twitter followers

Have you seen my blog sidebar? I display the number of followers I have in full text. This is actually pretty easy to do. The first thing you need is this function:

function get_followers($twitter_id){
	$xml=file_get_contents('http://twitter.com/users/show.xml?screen_name='.$twitter_id);
	if (preg_match('/followers_count>(.*)</',$xml,$match)!=0) {
		$tw['count'] = $match[1];
	}

	return $tw['count'];
}

Once you have the function, you can call it as shown below:

$nb =  get_followers('phpsnippets');
echo "PHP Snippets already have ".$nb." followers!";

» Credit: http://www.phpsnippets.info/get-twitters-followers-in-php

Get latest Twitter status

Using PHP and cURL, it is pretty easy to get the status of a specific user. Once you have it, what about displaying it on your blog, like I do in WPRecipes footer?

function get_status($twitter_id, $hyperlinks = true) {
    $c = curl_init();
    curl_setopt($c, CURLOPT_URL, "http://twitter.com/statuses/user_timeline/$twitter_id.xml?count=1");
    curl_setopt($c, CURLOPT_RETURNTRANSFER, 1);
    $src = curl_exec($c);
    curl_close($c);
    preg_match('/<text>(.*)<\/text>/', $src, $m);
    $status = htmlentities($m[1]);
    if( $hyperlinks ) $status = ereg_replace("[[:alpha:]]+://[^<>[:space:]]+[[:alnum:]/]", '<a href="%5C%22%5C%5C0%5C%22">\\0</a>', $status);
    return($status);
}

The function is extremely easy to use:

echo get_status('catswhocode');

» http://www.phpsnippets.info/get-twitter-status-using-php

Link to update status, without encoding problems

Many websites and blogs show you how to create a link to Twitter that will update your status. But unfortunely, most websites don’t explain what you need to do in order to avoid encoding problems of spaces and special characters.

<a href="http://twitter.com?status=@catswhocode Hi Jean, how are you?">Tweet!</a>

So, where’s the change? Pretty simple: Just note that I havent linked to

, but to

, without the www.

A working example can be seen on my company website: http://www.webdevcat.com/contact.

Get number of retweets for a specific page

Most bloggers are using the Tweetmeme widget to display the number of retweets of their posts. Did you know that Tweetmeme also has an API you can use to get how many times a specific url has been retweeted?

The following function will get the number of RT’s of the url passed as a parameter:

function tweetCount($url) {
    $content = file_get_contents("http://api.tweetmeme.com/url_info?url=".$url);
    $element = new SimpleXmlElement($content);
    $retweets = $element->story->url_count;
    if($retweets){
        return $retweets;
    } else {
        return 0;
    }
}

Using the function is easy, as you can expect:

echo tweetCount('http://www.catswhocode.com');

Note that the Twitter API also provide a way to get the number of retweets. See http://urls.api.twitter.com/1/urls/count.json?url=www.google.com for example.

» http://www.phpsnippets.info/get-how-many-times-a-page-have-been-retweeted-using-php

Testing friendship between two users

If you want to know if a specific user is following you (or someone else) you have to use the Twitter API. This snippet will echo

if the two users specified on lines 18 and 19 are friends. It will return

otherwise.

/* makes the request */
function make_request($url) {
	$ch = curl_init();
	curl_setopt($ch,CURLOPT_URL,$url);
	curl_setopt($ch,CURLOPT_RETURNTRANSFER,1);
	$result = curl_exec($ch);
	curl_close($ch);
	return $result;
}

/* gets the match */
function get_match($regex,$content) {
	preg_match($regex,$content,$matches);
	return $matches[1];
}

/* persons to test */
$person1 = 'phpsnippets';
$person2 = 'catswhocode';

/* send request to twitter */
$url = 'https://api.twitter.com/1/friendships/exist';
$format = 'xml';

/* check */
$persons12 = make_request($url.'.'.$format.'?user_a='.$person1.'&user_b='.$person2);
$result = get_match('/<friends>(.*)<\/friends>/isU',$persons12);
echo $result; // returns "true" or "false"

» http://www.phpsnippets.info/get-twitter-status-using-php

Shorten urls for Twitter

As you know if you’re a Twitter user, you can’t post messages which are longer than 140 characters. To avoid this problem, you have to use an url shortener. There’s lots of different url shorteners on the internet. TinyUrl.com is one of them, it doesn’t produce the shortest urls but what I really love it is that you don’t need to have an account to use it with PHP.

The following function takes a long url as a parameter and return a shorter url, using the TinyUrl url shortener.

function getTinyUrl($url) {
    return file_get_contents("http://tinyurl.com/api-create.php?url=".$url);
}

» http://www.phpsnippets.info/convert-url-to-tinyurl

Shorten urls using Bit.ly

In the previous snippet of that article, I’ve shown you how you can shorten your urls using TinyUrl.com. This is cool, but I’m pretty sure some of you prefer using the bit.ly service. No problem, you can still use PHP to get your shortened url.

function bitly($url) {
	$content = file_get_contents("http://api.bit.ly/v3/shorten?login=YOURLOGIN&apiKey=YOURAPIKEY&longUrl=".$url."&format=xml");
	$element = new SimpleXmlElement($content);
	$bitly = $element->data->url;
	if($bitly){
		return $bitly;
	} else {
		return '0';
	}
}

To use the function, simply use the following:

echo bitly("http://www.catswhocode.com");

» http://woorkup.com/2010/06/06/3-practical-wordpress-code-snippets-you-probably-must-know/

Like CatsWhoCode? If yes, don’t hesitate to check my other blog CatsWhoBlog: It’s all about blogging!

PHP snippets to interact with Twitter

PHP: Fast and easy SQL queries using ezSQL

What’s ezSQL, and why it is useful

On big projects, the usual good practice is to use a CMS or a framework such as Symfony or CodeIgniter to build your site on. But on smaller projects, many developers are still using PHP functions such as

to do SQL queries to the database.

While it’s functional, I do not recommend to use all those

functions: Most websites are using MySQL, that’s right, but if one day you have to deal with another DB like PostGres or Oracle… Your code will not work at all, and you’ll have to rewrite it. Scary, isn’t it? This is why is it recommended to use a database abstraction layer, an API which unifies the communication between your application/website and databases such as MySQL, Oracle or PostgreSQL.

As you can guess, ezSQL allows you to work with various databases very easily. Though, please note that it does not support differences in SQL syntax implementations among different databases.

Also, ezSQL provide a few methods which simplify queries to the database, and help producing a cleaner code.

ezSQL and WordPress

As most of you are familiar with WordPress, you probably know the

class, which allows you to send queries to the database. As wpdb is based on ezSQL, and you’re already familiar with the WordPress class, you won’t have any trouble to learn using ezSQL. And don’t worry if you never heard of WordPress or the wpdb class. ezSQL is extremely easy to learn and to use.

Downloading and installing ezSQL

Right, I have talked too much. How about some coding now? Let start by grabbing your copy of ezSQL. Once you have it, unzip on your server (or hard drive).

In order to be able to use ezSQL in your projects, you have to include two files: The first is

, which is ezSQL core file. The second depends on the database you’re going to use. In order to use ezSQL with a MySQL database, you have to include

.

Once done, you have to create a ezSQL object. This is done easily using your database username, password, name and host. The following example demonstrates the inclusion of the required files and the creation of a ezSQL object:

include_once "../shared/ez_sql_core.php";
include_once "ez_sql_mysql.php";
$db = new ezSQL_mysql('db_user','db_password','db_name','db_host');

Now, you have an object called

. We’ll use it run any types of queries to our database.

Queries examples

ezSQL has a few methods to make SQL queries extremely simple. Let’s see what you can do with it:

Execute any query

In order to insert, delete or most generally, run any kind of query to the database, we have to use the

method. In case of a data insertion, the method will return the insert id.

$db->query("INSERT INTO users (id, name, email) VALUES (NULL,'The Cat','cat@google.com')");

Example of an update query:

$db->query("UPDATE users SET name = 'Patrick' WHERE id = 4");

Select a row

The

method is great if you just need to select a row from your database. The example below executes a simple select query and displays the results.

$user = $db->get_row("SELECT name, email FROM users WHERE id = 4");

echo $user->name;
echo $user->email;

Select a single variable

If you only need a variable, the

method is here to help. Using it is extremely simple as shown below.

$var = $db->get_var("SELECT count(*) FROM users");

echo $var;

Select multiple results

Although the methods documented above are quite useful, most of the time you’ll need to get various rows of data from your database. The method called

will get various data from your database. To output the data, a simple

loop is all you need.

$results = $db->get_results("SELECT name, email FROM users");

foreach ( $results as $user ) {
    echo $user->name;
    echo $user->email;
}

Select a column

If you need to get a column, you can use the get_col method. The second parameter is the column offset.

foreach ( $db->get_col("SELECT name,email FROM users",0) as $name ) {
            echo $name;
}

Debug

When something doesn’t work as expected, ezSQL has a great method to perform some debugging. Not surprising, the method is called

. When called, the method will display the last query performed and its associated results.

$db->debug();

I hope you enjoyed this article and that you’ll use ezSQL in your future projects. It’s a great tool which was very helpful for me many times!

Like CatsWhoCode? If yes, don’t hesitate to check my other blog CatsWhoBlog: It’s all about blogging!

PHP: Fast and easy SQL queries using ezSQL

Best practices for modern Javascript development

Use the correct <script> tag

When you have to use some Javascript in an html file, you should always use the following

tag:

<script type="text/javascript">
    ... some JS code
</script>

But instead, how many times have you seen this when looking at the source code?

<script type="text/javascript" language="javascript">
    ... some JS code
</script>

In HTML, the

attribute is deprecated due to its redundancy with the

attribute. You should never use it anymore.

Keep your code in an external file

Using an external

file for your Javascript code is a lot cleaner than writing it in your html document, and it also allows the browser to cache the file, which will result in a faster website.

Put your Javascript code in a

file, then use the

tag in your html document to import the file:

<script type='text/javascript' src='http://www.catswhocode.com/myscript.js'></script>

Don’t wrap code in HTML comments

In the 90′s some very old browsers weren’t able to interpret Javascript. In order to prevent unwanted results on those browsers, it was considered good practice in 1994-1997 to wrap Javascript code within html comments, so browsers with no Javascript support will simply ignore it.
Here is an example of some code wrapped within html comments:

<script language="JavaScript">
<!--
...some code
//-->
</script>

However, in 2010, all browsers (Even IE6, that means a lot) can interpret Javascript, so there’s absolutely no need to wrap code within comments anymore. Even worse, if code is wrapped within comments and use the decrement symbol

, you’ll expect some weird problems due to the fact the browser may think it’s the end of the html comment.

Use a framework

Unless your Javascript code is really short and easy, you should always avoid reinventing the wheel by using a framework of your choice. In my opinion, jQuery is the best and has an awesome community, so you should give it a try if you haven’t already.

Always declare your variables using var

You should introduce any variable you create with the

statement, otherwise it gets to the global scope. Also, using

makes your code more readable and self-explanatory.
Example of variable created using the

statement:

var name = "Jean";
var size = data.length;

Keep your code unobtrusive

Some years ago, when a programmer wanted to add an event to an html element (for example, if you want to validate a date when the user typed something) he simply put Javascript code in the html, using a special attribute such as

,

,

, etc.
Example:

<input type="text" name="date" onchange="validateDate()" />

This works great, but it is a bit dirty. HTML should only contain the document description. Just like it’s bad practice to use inline CSS styles, it’s bad practice to use inline Javascript.

Instead, what about using some unobtrusive Javascript? Using jQuery, it is pretty easy to do, as you can see in the following example:

$(document).ready(function(){
	$('input[name=date]').bind('change', validateDate);
});

Include your scripts at the bottom of your HTML files

Not so long ago, it was generally considered good practice to insert your Javascript files within the

and

tags of your html document.
But browsers read html files from top to bottom, and load external files dynamically. Which mean that inserting scripts within the

and

tags will make your Javascript load before some of the page content.
In order to always load scripts after the content, Javascript files should always been included at the bottom of your html files, as shown below:

    <script src="myscript.js?" type="text/javascript"></script>
  </body>
</html>

Use JSLint

JSLint is a web-app which takes a JavaScript source and scans it. If it finds a problem, it returns a message describing the problem and an approximate solution.
JSLint is great to find bugs in your code, and also things that may be written in a better way. This site is definitely my favorite coding buddy when developing some Javascript.

Don’t use document.write

The good old

method has been deprecated for years, however it is still very common to see it while browsing code.

document.write("hello world");

Instead of using this deprecated method, you should use the DOM and the

function to insert text on a page:

document.getElementById('hello').innerHTML('hello world');

Like CatsWhoCode? If yes, don’t hesitate to check my other blog CatsWhoBlog: It’s all about blogging!

Best practices for modern Javascript development

Enhance your web forms with new HTML5 features

Please note that HTML5 is an emerging technique. These examples are not intended for use on a production site. Results may vary according to browser implementation. Please use Chrome or Safari for best results.

Required fields

Whose ever tried to submit a form and gotten an error message saying that you “forgot” to enter your email address? Probably not a lot of us: In fact, 99 percent of all web forms have at least one field marked as required.

In good ol’ HTML, we had to manually display that a specific field is required, most of the time by using a red asterisk. But with HTML5, you can set up a input field to be required:

<input type="text"  name="client_name" required>

And on the CSS side, something like

input:required {
    border: 1px red solid;
}

will save you a lot of time.

Two similar attributes are also available:

and

. They work exactly as the

attribute explained above.

Placeholders

In a form, an input field always has a label explaining what kind of information is required. While you can currently use the

tag to display a label for a specific text field, HTML5 introduces the

attribute. As shown below, using it is pretty simple:

<input name="firstname" placeholder="Please enter your first name">

The HTML5

attribute works exactly as the

attribute, except that when the user click on the text field, the placeholder text is automatically removed so the user can easily enter his information.

The placeholder attribute currently works only in safari/webkit. Don’t worry about other browsers though, it is pretty easy to simulate placeholders using javascript:

Autofocus

A new HTML5 attribute is named

. If applied to an element, the element will automatically receive the focus once the page is loaded. This can be seen on some sites and most search engines.

Nothing complicated, just use the syntax below, and remember that in HTML5, there’s no more need for attributes to have a value like in XHTML 1.0.

<input name="search" autofocus>

Email fields

Asking someone’s email on a web form is extremely common because email is still the easiest way to contact someone over the internet. HTML5 introduces a new type for the input element, named

.

<input name="email" type="email">

Pattern attribute

When validating a web form, we have to validate the data entered by the visitor. The new

HTML5 attribute allows you to define a regular expression pattern. Only the data that matches the defined pattern will be validated. If the data doesn’t match the pattern, then the form will not be submitted.

This is, in my opinion, an extremely good thing, which will save lots of time to developers when coding forms. Though, remember that you should always validate data on the server side as well.

<input type="text" name="Phone" pattern="^0[1-689][0-9]{8}$" placeholder="Phone" required>

Url fields

Nowadays, many people have a website, blog, or at least a Twitter profile. This is why many web forms offer the possibility to enter an url.

HTML5 introduces a new type for the

element, designed specifically for entering urls:

<input name="url" type="url">

Although I didn’t test it myself, I heard that the W3C validator will raise an error if the value of a url field doesn’t match a proper url structure.

Date pickers

Many businesses are offering an appointment request through their website. In that case, the visitor has to specify the day they would like an appointment. HTML5 introduces the

type for the

element:

<input name="day" type="date">

When clicked, the

attribute will display a date picker so visitors will simply have to choose a date instead of entering it manually. Unfortunately, except in Opera, most browsers don’t have it implemented yet.

Note that a date picker can be implemented on your forms using the following types:

<input type="date">
<input type="datetime">
<input type="month">
<input type="week">
<input type="time">

Isn’t that user friendly? Personally, I can’t wait to implement this in my forms but as I said earlier this isn’t very well implemented in browsers at the time of writing this post. Of course, Javascript is always here to help. On this site I found a simple fallback implementation for the

HTML5 attribute:

var i = document.createElement("input");
i.setAttribute("type", "date");
if (i.type == "text") {
    // No HTML5 native date picker support, use jQuery or your favorite framework to create one.
}

Search boxes

To enhance ease of retrieving information, many websites have implemented their own search engine. HTML5 has created a new type for search fields.

<input name="q" type="search">

For now, the only difference with regular text inputs is that, if you use Safari, the search box will have rounded corners. But maybe interesting functionalities will be implemented in the future. Let’s hope, because right now I have to admit that I don’t really see why we should use this type.

Sliders type and step attribute

HTML5 is also introducing sliders: A new type for the input element, which allows visitors to easily select a number instead of entering it manually.

<input name="number" type="range" min="0" max="10">

The example above allows the visitor to choose a number between 0 and 10. If you want the slider to be incremented/decremented 2 by 2, you’ll have to use one more new attribute: step. Here is an example:

<input name="number" type="range" min="0" max="10" step="2" >

That way, visitors will only be able to select numbers like 0, 2, 4, and so on.

Like CatsWhoCode? If yes, don’t hesitate to check my other blog CatsWhoBlog: It’s all about blogging!

Enhance your web forms with new HTML5 features