If you’re primarily a designer and have recently started learning CSS, you’ve probably started to incorporate some of the new CSS features that have been added to the language in CSS3.

But if you don’t have a lot of experience with CSS, then you’re probably trying to figure out what is the best way to handle some of the challenges that arise from using multiple vendor prefixes, dealing with older versions of Internet Explorer, and other CSS3-specific dilemmas.

In this article, I’ll try to cover some of the important things to remember when dealing with these issues. Keep in mind that nothing here is set in stone but these should just be guidelines to help you write more effective, easier to maintain, and future-proof code.

Know your support charts

You probably won’t have to memorize which features work in which browsers. In most cases, CSS3 features will not work in all in-use browsers. And in some instances, even the most recent versions of browsers don’t have full support.

So the first thing you should do is understand where support is lacking. The primary resource you should use is the When can I use… site, which includes charts for CSS3, HTML5, and tons more. You can even do side-by-side comparisons with different browsers, as shown in the screenshot below that compares CSS3 support in Firefox 3.6 vs. IE9:

Although When can I use… is probably the only support chart source you’ll need, here are a few other options to consider:

• CSS3 Click Chart
• CSS contents and browsers compatibility
• CSS Compatibility and Internet Explorer
• Comparison of Layout Engines (CSS)

But know that although a CSS feature may be listed somewhere as “supported”, that doesn’t mean it’s without bugs or inconsistencies. So test thoroughly.

Don’t overuse polyfills

Due to client or agency pressure, or just the fact that you want everything to look and function the same everywhere, you might be tempted to use the many CSS Polyfills.

But many of these scripts can slow your pages down considerably — especially if you use more than one. There are many studies and sources that show the importance of a website’s speed, so any polyfills should be considered carefully and with your site or app’s overall best interests in mind.

To help you decide what to polyfill and what to just allow to degrade to a lesser experience, use the HTML5 Please site. As shown in the example screenshot below, HTML5 Please will often recommend avoiding polyfills for certain features:

Test how features degrade

If you’re avoiding a lot of polyfills, then naturally you’re going to have to allow many CSS3 features to degrade to a more primitive experience in older browsers (usually IE6-8). But don’t assume this will happen automatically.

In many cases (for example, when using multiple backgrounds), you’ll have to declare a property that gets overwritten by the CSS3 feature, but that will still show up in older browsers.

For example, for multiple backgrounds, you might do this:

.element {
	background: url(images/fallback.jpg) no-repeat;
	background: url(images/example.png) center center no-repeat,
		    url(images/example-2.png) top left repeat;
}

Notice the single background image declared before the multiple background images line. Non-supporting browsers will display the single image but will ignore the 2nd line. Supporting browsers will read both lines, but the first line will be overwritten by the second.

Some other CSS3 features that could benefit from this type of fallback are RGBA colors, HSLA colors, and gradients.

To help you see how CSS3 feature degrade in older browsers, you can use a bookmarklet called deCSS3.

It currently only works in Chrome and Safari, but just drag the link to your bookmarks bar and then click the link on any site that you want to ‘de-CSS3′ and it will show you the site with text shadows, rounded corners and other new stuff removed. Of course, this is no replacement for actual browser testing, but can serve as a useful guide for faster development before you do your final testing towards the project’s end.

Another tool to aid in dealing with fallbacks is the Modernizr JavaScript library. But if you’re intimidated by libraries, don’t be. Modernizr is not difficult to deal with from a CSS perspective. Check out this tutorial for a pain-free introduction.

Dealing with vendor prefixes

One of the messy parts of CSS3 is having to deal with all the different vendor prefixes. Maintaining code that uses all the prefixes is tedious and in some cases you don’t need all of them. Who can possibly remember when to include “-o-” or “-ms-” and when not to?

Well, as mentioned, using the support charts will help. But here are a few other suggestions to help deal with vendor prefixes.

Use a CSS preprocessor

Preprocessors are all the rage right now. But CSS beginners and designers who aren’t hardcore developers or programmers may have a hard time dealing with these new tools.

So although preprocessors are certainly not for everybody, they are definitely worth considering, because they can seriously improve your production and maintenance time.

An extensive discussion of preprocessors is certainly beyond this article, but here are some links to get you started:

• LESS
• Sass
• Compass
• Stylus

And if you find that stuff too heavy, Chris Coyier of CSS-Tricks has some thoughts on preprocessors that might help you get an overall view. And here’s a post on Nettuts+ that covers some of the features and benefits of using a few of the most popular CSS preprocessors.

Be consistent in your code

If you choose not to preprocess your CSS using one of the aforementioned technologies, then you’ll have to deal with maintaining all the vendor prefixes. So make sure you pick a style and order for your vendor prefixes and stick with it. This way, your code will be easier to read and maintain.

For example, some CSS developers put their vendor prefix lines in alphabetical order, and use indenting so that the values all line up, like this:

.element {
	-moz-transition: 	background-color linear .8s;
	-ms-transition: 	background-color linear .8s;
	-o-transition:  	background-color linear .8s;
	-webkit-transition: 	background-color linear .8s;
	transition:		background-color linear .8s;
}

That’s just one way to do it. But whatever method you choose, just be consistent throughout your code. This would be especially important if you work on a team where others have to read and/or maintain your code.

Of course, not all CSS3 features are this easy to organize (for example, the code for keyframe animations is much more complicated), but for most features you should be able to have a consistent style that makes development and maintenance smoother.

What about the standard property?

You’ll notice in the example in the previous section, the last property declared after the vendor lines is the standard version of the property. If you’re going to include the standard property, this is definitely how you should do it. So always include it last when you add it.

This is to ensure that the vendor implementation of the feature is overwritten by the standard implementation. But there’s a caution here.

For some complex animations and interactions, it is conceivable that the implementation could change so much that when the browser starts supporting the standard property, it could have undesirable effects. So in some cases, you might be better off leaving out the standard property altogether.

I wrote about this topic more in-depth on my blog, so check that out if you want a more comprehensive discussion of this issue.

Use Prefixr

One of the easiest ways to deal with all the cross-browser vendor weirdness is to use a handy little tool called Prefixr. With Prefixr, you just developer your code as always, and you could just use a single vendor prefix (for example, only “-moz-”) for all your CSS3. Then, when you’re done testing in that one browser and have everything working the way you want, just throw your code into Prefixr and it will generate all the extra vendor code for you.

Prefixr also can be integrated automatically with your text editor, and includes support for lengthy keyframe animations code. As an alternative, you can also try out a tool I created called Animation Fill Code that adds the extra vendor code for keyframe animations.

Test thoroughly

The last suggestion I’ll give here is to test thoroughly in all the browsers you’re supporting. You can use dozens of tools and libraries to assist you with your CSS3 development, but nothing can replace thorough tests in real browser environments.

And this advice would be especially important if you’re dealing with a lot of responsive design-related CSS3 (e.g. media queries), and heavy use of typographic features. You want your content to be usable and readable in all browsers, even if the CSS3 features aren’t available.

Your thoughts?

Do you have a lot of experience with CSS3? Do you have any ‘best practices’ that you’ve developed? Feel free to offer your comments and suggestions.

This post was written exclusively for Webdesigner Depot by Louis Lazaris, an author, freelance writer, and web developer. Louis is a co-author of HTML5 & CSS3 for the Real World, published by SitePoint, and he writes about front-end web design technologies on Impressive Webs. You can follow Louis on Twitter or contact him through his website.

Creative Font Collection from HVD Fonts – only $47!

Source

Today we have a guest post by Andy Walpole sharing his experience from creating the Lightbox Ultra on Mozilla Demo Studio. Several years ago developer Lokesh Dhakar created the familiar Lightbox script with Prototype and script.aculo.us. It's smooth animation and sleek aesthetics were an instant hit in the web design community and it was used [...]

Advertise here with BSA

Every week we tweet a lot of interesting stuff highlighting great content that we find on the web that can be of interest to web designers.

The best way to keep track of our tweets is simply to follow us on Twitter, however, in case you missed some here’s a quick and useful compilation of the best tweets that we sent out this past week.

Note that this is only a very small selection of the links that we tweeted about, so don’t miss out.

To keep up to date with all the cool links, simply follow us @DesignerDepot

Learning LESS: Mixins http://su.pr/6YvmKG

Interested in game design? Check out these 4 interactive lectures: http://ow.ly/b2xEz

A Great Showcase Of Websites With Seamless Social Media Integration http://ow.ly/b2ylP

Project management and the design professional http://ow.ly/b2uqt Do project managers often do more harm than good? *Great @netmag read

Selling Art: Creative and Artistic Advertisements http://ow.ly/b2wqg Awesome collection

Nobody likes a short visit http://ow.ly/b4aFM Improving 404 Page Design

There’s a new kid in town: CanJS http://ow.ly/b4dvc

A short documentary about the craft of storytelling by Ken Burns http://ow.ly/b4cfD A must-see for your inspiration

Awesome 5-second animations from Ross Phillips http://ow.ly/b5UwL

FF Chartwell http://ow.ly/b62X6 Travis Kochel’s fantastic typeface for creating simple graphs

The real conflict behind <picture> and @srcset – http://ow.ly/b66mb – Interesting read. Enjoy!

http://infogr.am/ let’s you create interactive infographics

Fast food, rockets, blue skies and McDonalds villains in Rob Flowers’s illustrations http://ow.ly/b68rG Two thumbs up

In Charlotte Caron’s portraits, everyone is wearing a mask http://ow.ly/b68K1

Numerografía-Yorokobu by Wete = a really cool typography http://ow.ly/b68X5

The History Of Usability: From Simplicity To Complexity http://ow.ly/b7pTS *great article by @smashingmag

Design my #CSS > http://ow.ly/b7pDk < Free tool to custom design your website components

Change aversion: why users hate what you launched (and what to do about it) http://ow.ly/b7qnc

Impressive Illustrations by Rory Kurtz with a touch of dark and beautiful http://ow.ly/b7pbO

How do graphic designers say “happy birthday?” http://ow.ly/b7pgL 30 Years, 30 Posters: Milton Glaser, 2×4, and Michael Bierut

Embroidery is hot and Maricor/Maricar knows that http://ow.ly/b9mHe #typography

Want more? No problem! Keep track of all our tweets by following us @DesignerDepot

Creative Font Collection from HVD Fonts – only $47!

Source

There is an aspect to Web design that no one likes to talk about: spec’ing. We all do it, we all hate it, but we also understand that specs are vital to both designers and developers.

For those who aren’t familiar with the term in this context, “specs” is short for specifications — in the case of design, they are instructions that specify colors, fonts, sizes, spacing and so on, just like a blueprint. Specs are a crucial part of the design and development process for companies with big teams and for small companies that have to outsource some of their development. Specs function not only as instructions to developers, but also as a reference point to make sure the whole team is on the same page.

However, the process of producing specs is repetitive and time-consuming, especially for creatives. But now this can all change: Specctr, together with Adobe Fireworks, offers a quick and easy way to generate this important information automatically.

The Idea

My idea to make Specctr came from my personal experience working on a design team at a large corporation. Spec’ing was part of my routine. One day, after hours of spec’ing, my eyes hurt and I was bored and frustrated. Suddenly, I realized that this kind of intensive work should be automated, and that a designer’s time is much better spent designing rather than spec’ing.

Specctr is more than a tool: it is a business solution for any company whose designers must generate specs for developers. Specctr facilitates this communication and leaves designers and developers happier and more productive. Making this process quicker frees up the business to focus more intently on its core mission.

Possible time saved using Specctr for Adobe Fireworks.

Time saved using Fireworks and Specctr Pro.

In the process of creating Specctr, I brought my design background and practical experience in spec’ing to bear on the issues and opportunities in automating the process. Meanwhile, my colleague, Dmitriy Fabrikant, engineered the software from the ground up. Working in tandem at On Pixel, we released Specctr Pro in January 2012. Since then, it has received many favorable reviews.

Specctr Lite

In addition to the commercial version of the tool, we’re happy to release a free version called Specctr Lite as a contribution to the community. We chose to highlight width and height as well as text spec’ing abilities, because they are most common to a designer’s workflow. These two feature sets alone will save a lot of valuable time.

The Lite version includes:

• Width and height
• Text spec (font family, size, color)
• Expand canvas feature

Specctr Lite can be downloaded for free from our website, and we’re happy to say that it was created and released as a result of the involvement of Smashing Magazine!

Pro and Lite: a quick comparison

The Lite version is as easy to use as the Pro version, and its features work the same way.

Requirements And Installation

To use Specctr (Pro or Lite), you need:

• A Mac or PC
• A copy of Adobe Fireworks CS3, CS4, CS5 or CS5.1

The installation process is pretty straightforward:

1. Download the Specctr installer
2. Double-click the MXP file to open the Adobe Extension Manager
3. Click on “Install”
4. Restart Adobe Fireworks
5. In Fireworks, go to Window → Specctr to open the Specctr panel.

Please note: If you are using Windows Vista or 7, you might need to launch the Adobe Extension Manager as Administrator, otherwise the extension could fail to install.

If you still have questions, don’t hesitate to consult our online tutorial (PDF, 1.9 MB) or contact us directly!

Specctr Pro

A Brief How-To Guide

Once you install Specctr through the Adobe Extension Manager, restart Fireworks, and then open Specctr from the Window menu. Now that Specctr is open, you can spec a document in a few easy steps.

First, prepare your document by making room for your specs. Select the size of your design’s border, and click on the “Expand Canvas” button.

Select which details to display by toggling them on or off from the panel’s menu.

Now Specctr Pro will automatically display your spec with a click of the button.

To spec a shape (shape, line, dot, etc.) or a text object, select the object (or multiple objects), and click on the “Spec Object” button. The specs will be outputted to the nearest edge of the canvas.

Properties of objects in a spec

You can also spec the spacing between two objects by selecting them and then clicking the “Spacing” button. If you select only one object, Specctr will measure the object’s distance to the edges of the canvas.

Measuring the space between objects

Finally, you can also spec the width and height of any object.

Insight Into The Fireworks Extension Development Process

The process of developing Fireworks extensions consists of the following steps:

1. First, we design and build the panels in Adobe Flash Pro.
2. We import the panels into Flash Builder and add the ActionScript code, which makes them run.
3. Finally, we have to connect with the Fireworks API, which is written in JavaScript, in order to manipulate Fireworks.

Because the development process is spread over three separate environments, integrating the different pieces of the application and debugging the application present some challenges. But in the end, it’s well worth the positive response from our users.

In the next couple of weeks, Dmitriy will release on GitHub a few ActionScript libraries that he has built during the process of developing Specctr. These libraries will hopefully reduce some of the pain points of the tiered development process. We might also write another article that highlights in more detail the development process for building a Fireworks extension.

One of Fireworks’ strengths is its potential as a development platform that leverages the creativity and innovation of its community. We would love to help this process and show that Fireworks is a powerful tool for Web design.

Further Reading

Here are a few useful resources related to extending Adobe Fireworks:

Extensions

• Aaron Beall
• John Dunning
• Matt Stow
• Orange Commands, Ale Muñoz

Other Resources

Extending Fireworks blog, Grady Kelly

Extending Fireworks, Fireworksguru Forums

“Creating Fireworks Panels, Part 1: Introduction to Custom Panels,” Trevor McCauley, Adobe Developer Connection

“Extending Adobe Fireworks CS5” (PDF), Adobe Product Support

(al) (mb)

---

© Chen Blume for Smashing Magazine, 2012.

Every week we feature a set of comics created exclusively for WDD.

The content revolves around web design, blogging and funny situations that we encounter in our daily lives as designers.

These great cartoons are created by Jerry King, an award-winning cartoonist who’s one of the most published, prolific and versatile cartoonists in the world today.

So for a few moments, take a break from your daily routine, have a laugh and enjoy these funny cartoons.

Feel free to leave your comments and suggestions below as well as any related stories of your own…

The wrong type of consistency

The donation tab

Bring your kid to home day

Can you relate to these situations? Please share your funny stories and comments below…

Creative Font Collection from HVD Fonts – only $47!

Source

Probably the most remarkable characteristic of our Web design community is that we care about our craft. We care about best practices, about our work, about learning, sharing and improving our skills. This very spirit is the driving force behind our daily work at Smashing Magazine, and this spirit is what has prompted us to organize the very first Smashing Conference: a friendly, valuable and inspiring community event that will help us all become better at what we do.

Whether you are a designer, developer, content strategist or business owner, at the Smashing Conference you’ll explore insights hands on and gain practical tips and new perspectives on our craft. We are very happy to provide an opportunity for you to share and gain practical knowledge in an intimate, informal atmosphere — right in our beautiful home town of Freiburg, Germany, at the foot of the legendary Black Forest.

The legendary Historical Merchants Hall, a late-Gothic building built between 1520 and 1530. Its façade is decorated with statues and the coat of arms of four Habsburg emperors. An exquisite location for the very first Smashing Conference. Image credit.

When and Where?

We’re delighted to invite you to come together for this inspiring, forward-thinking event on 17 to 19 September 2012. The conference will host a two-day single-track conference on September 17th and 18th, as well as three workshops on September 19th. By “we,” we mean Vitaly Friedman, editor-in-chief of Smashing Magazine, and Marc Thiele, who has been running community events such as beyond tellerrand for over 12 years.

The aim of the event is to deliver the same high-quality content that we deliver on Smashing Magazine, in the familiar atmosphere that beyond tellerrand events are known for. This will be a high-caliber yet friendly event that brings great value to everyone involved, and we’d be honored if you took a part in it.

The conference will take place in Freiburg, Germany at the legendary Historical Merchants Hall at the foot of the Black Forest.

The main hall of the venue. 350 tickets are available in all for our two-day single-track event. Image credit

Keeping the conference affordable for everyone is important to us. All tickets includes two full single-track conference days, on Monday and Tuesday. Please note that only 350 seats are available.

We are pleased to announce that the first 70 early-bird tickets are on sale for a price of €249. The regular price after that is €349. And all prices include the German VAT of 19% and booking fees! Get your ticket now before it’s too late. We’d be honored to meet you in September!

Speakers and Topics

If you’ve been following Smashing Magazine for a while, then you won’t be surprised by the focus of the Smashing Conference. We’re aiming to cover a wide variety of Web design topics, such as visual design, front- and back-end development, UX design, mobile, responsive design, the business aspects of running a website, as well as the intricate details of the designer and developer’s workflows. We’re encouraging our dear speakers to share details on how they work, what tools they use, and what their design and coding process looks like. We’re aiming for valuable, practical and inspiring talks.

We’ve handpicked all of the speakers to ensure the high quality of the event. So far, 10 out of 15 speakers are officially confirmed. Please note that the topics presented here are subject to change. More details on the conference, speakers, talks and workshops are available on the conference’s official website.

Speakers

Speaker	Talk	Details
Aarron Walter	The Real Me
Aarron Walter is the lead user experience designer for MailChimp, where he socializes with primates and ponders ways to make interfaces more human. Aarron is the author of Designing for Emotion, the purple stripe in the rainbow of knowledge from A Book Apart. He lives with his wife and son in Athens, Georgia, and is a wannabe barista. He tweets about design under the moniker @aarron.
Chris Heilmann	To be announced
Chris Heilmann has dedicated a lot of his time to making the Web better. Originally from a radio journalism background, he built his first website from scratch in around 1997, and he spent the following years working on a lot of large international websites, and a few years at Yahoo building products and training people; he is now at Mozilla. Chris has written and contributed to four books on Web development and has written many articles and hundreds of blog posts for Ajaxian, Smashing Magazine, Yahoo, Mozilla, ScriptJunkie and many more.
Jeremy Keith	The Spirit of the Web
Jeremy Keith makes websites. He is responsible for the death of the trees used to print the books DOM Scripting, Bulletproof Ajax and, most recently, HTML5 for Web Designers. He also shot a man in Reno just to watch him die. Originally from Ireland, Jeremy now lives in Brighton, England where he pretends to work with Clearleft. Peas grow there.
Jonathan Snook	Your CSS Is a Mess
Jonathan Snook writes about tips, tricks and bookmarks on his blog. He has also written for A List Apart, 24ways, and .net magazine, and he has coauthored two books, The Art and Science of CSS and Accelerated DOM Scripting. Most recently, Snook has written the eBook SMACSS, sharing his experience and best practices on CSS architecture. Snook also works on the design team at Shopify.
Josh Brewer	Responsive Is as Responsive Does
Josh spends his time thinking about, designing and building things that live at the intersection of form, function and aesthetic. He is principal designer at Twitter and is the co-creator of 52 Weeks of UX, Ffffallback and Shares. He is also an advisor and mentor at The Designer Fund.
Lea Verou	To be announced
Lea has a long-standing passion for open Web standards and has been often called a CSS guru. She loves researching new ways to take advantage of modern Web technologies, and she shares her findings on her blog. Lea also makes popular tools and libraries that help Web developers learn and use these standards. She speaks at a number of well-known international Web development conferences and writes for leading industry publications. Lea also co-organized and occasionally lectures in the Web development course at the Athens University of Economics and Business.
Paul Boag	Better Websites, Happier Clients and Improved Job Satisfaction
Paul Boag has been working on the Web since 1993. He is Web Strategist at Headscape Ltd, a Web design agency that he cofounded back in 2002. Paul also produces and hosts the longest-running and award-winning Web design podcast at boagworld. He is a regular speaker at conferences and author of Client-Centric Web Design.
Rachel Andrew	The Future of Content Management
Rachel Andrew is a front- and back-end Web developer, author and speaker. Her books include the bestselling CSS Anthology for SitePoint, and she is a regular contributor to a number of publications both online and off, including Smashing Magazine. She writes about business and technology on her own website.
Stephen Hay	To be announced
Stephen has been designing and developing for the Web since 1995. He currently helps clients with front-end design and development, multi-platform strategy and accessibility through his consultancy, Zero Interface. Aside from his client work, he can be found speaking at industry events about Web design-related topics such as CSS layout and responsive design workflow. Stephen is co-organizer of Mobilism, one of the world’s leading mobile Web development conferences. He is also co-creator of Grip Workshops, a series of two-day intensive workshops for Web project managers on the client side. Stephen has written for publications including A List Apart and .net Magazine. He also coauthored the Smashing Book 3 with a host of super-talented folks. When he makes the time for it, he publishes his thoughts on The Haystack.
Tim Ahrens	Web Fonts Backstage and On Stage
Tim Ahrens is a type designer based in Berlin, where he runs Just Another Foundry with Shoko Mugikura. As a former architect, he is interested in the interplay between technology and design. He develops design software such as the Font Remix Tools and Web applications such as the FontFonter. Since 2010, he has been working as a consultant for Typekit.

Gallery of the speakers at the Smashing Conference.

Workshops

Trainer	Workshop	Details
Aarron Walter	Interface Design Bootcamp
Whether you are designing a Web app or website, following best practices and standard design methodologies will help ensure that your interfaces are usable and engaging. In this workshop, we’ll explore the design process in detail, including user research, wireframing, prototyping and visual design. Through real-world examples, you’ll see how an idea can evolve into an interface.
Andy Clarke	Fashionably Flexible Responsive Web Design
Responsive design has made designing flexible websites fashionable again, but there is more to being fashionably flexible than technology or using CSS3 media queries. So, this unique workshop — hosted by Andy Clarke, designer, author and speaker — puts the design back into responsive design. Andy will teach you how to design from the “content out,” instead of from the “canvas in.” He’ll demonstrate how to separate design from layout; and if you work with designs made in Photoshop, he’ll show how to deconstruct a design into its components (color, texture and typography) before reassembling it for a fluid continuum of devices, from phones to desktops and everything in between.
Jonathan Snook	SMACSS: Scalable and Modular Architecture for CSS
The SMACSS workshop is a full day of instruction and exercises on writing HTML and CSS using a flexible and modular approach that will improve team efficiency and minimize problems with growing projects. It brings the eBook to life with practical examples and in-depth discussion.

Gallery of the workshop experts at the Smashing Conference.

Further Details About the Conference

As we finalize some major details of organization, we are working hard on a plethora of small details to make the event as valuable and memorable as possible. Please expect more speakers to be confirmed soon and more topics to be announced.

Also, we are looking for sponsors of the event, so if you are interested, please get in touch with us. More details on the location, hotels, speakers, talks, workshops and after party are presented on the official Smashing Conference website.

One of the workshop rooms, with medieval decoration and statues of medieval knights. 30 seats are available for each workshop. Image credit.

Facts

• In a nutshell: The Smashing Conference is a friendly, valuable and inspiring community event that will help designers and developers become better in their work, be it front- or back-end development, UX design, content strategy or running a business.
• Dates: 17 to 19 September 2012 (workshops on the 19th, and conference on the 17th and 18th).
• Venue for workshops and conference: “Zum Roten Bären”, Historical Merchants Hall, Freiburg.
• Early-bird price (only 70 tickets): €249 ($315) (including German VAT and fees).
• Regular price: €349 ($440) (including German VAT and fees).
• Each workshop costs €349 ($440) (including German VAT and fees).
• Twitter: @smashingconf
• Lanyrd: http://lanyrd.com/2012/smashingconf/
• Facebook: http://www.facebook.com/smashingconf
• Website: http://www.smashingconf.com

“Zum Roten Bären“, one of the locations for the conference’s workshops. Large view.

We’re very excited about the Smashing Conference, and we’ll do our best to make it a valuable, memorable and useful event. We can’t wait to meet you, and please feel free to contact us if you have any questions about participation or sponsorship.

---

© Smashing Editorial for Smashing Magazine, 2012.

“Mobile Web design.” Unless you’ve been hiding under a bush for the last 18 months, you’ll know that it’s one of the hottest topics in the industry at the moment. Barely a week goes by without new tips being unveiled to help us hone our skills in making websites work as well — and as fast — as possible on mobile devices.

If you own or have designed a WordPress website for the desktop and are considering going mobile, the process can be fairly daunting. You probably know of responsive design and might have heard of the mobile-first approach developed by Luke Wroblewski, which entails planning the content and design for mobile devices first and then desktops second, rather than the other way round.

But if your WordPress website has a desktop theme in which everything is set in pixels, then the thought of adopting a responsive design might have you running for the hills.

It doesn’t have to be that way.

Here are four ways to make your WordPress blog or website mobile-friendly, ranging from the quick and dirty to the complex but potentially very beautiful. As well as outlining the pros and cons of these methods, we’ll include information on plugins that will help without actually doing all the work for you, and we’ll provide some code that you can use for a responsive design.

Plugins: The Quick Way To Make Your Content Mobile-Friendly

Designing for content is increasingly becoming more common than squeezing content into a pixel-perfect design, as documented here on Smashing Magazine.

If your website is more about content than design (say you run a blog that is content-heavy and designed for reading), then you won’t be too fussed about what your website looks like on mobile devices. You just want people to be able to read it without having to zoom in, move the viewport around or generally tie themselves up in knots until they decide to leave.

If this is the case, then a simple plugin might do the trick. Below are some plugins to consider.

WPtouch

WPtouch, which comes in free and premium versions, strips out your existing theme and displays your content and not much else, but the result is user-friendly, robust and easy to read.

WPtouch is widely used on websites, including Stephen Fry’s blog and Social Media Examiner. You can see below how the plugin renders those two websites. The premium version has options to modify the colors and some styles, including a bespoke menu at the bottom of the screen, as seen on Social Media Examiner.

Social Media Examiner desktop design

Social Media Examiner mobile design, using WPtouch

WordPress Mobile Pack

The WordPress Mobile Pack has some color options and can be used as a mobile switcher if you want a completely different theme for mobile devices. It also has a mobile interface for editing posts, although this has been superseded to some extent by the WordPress apps for iOS and Android.

WordPress Mobile Pack screenshots

BuddyPress Mobile

If your website runs BuddyPress, then you’ll need a plugin to ensure that none of its functionality is lost on mobile devices. BuddyPress Mobile has theming options, and you can edit the style sheet to make the mobile design your own.

BuddyPress Mobile

Mobile Themes: The Next Level Up

If you want a consistent design across desktop and mobile, but you don’t yet have a theme or you want to develop one, then a mobile theme might be the answer.

More and more mobile themes have sprung up over the last year. In particular, Twenty Eleven, WordPress’ default theme since version 3.0, is responsive enough for many websites.

Twenty Eleven on the desktop

Twenty Eleven on mobile

Below are some other themes that include a mobile or responsive style sheet.

Carrington

The Carrington family of themes can be used as parent themes. You can edit the CSS and functions to suit your needs, and it has a mobile version.

Carrington on desktop

Carrington on mobile

Scherzo

Scherzo is clean and minimalist and would be great to use as a parent theme. It uses a mobile-first responsive design.

Scherzo on desktop

Scherzo on mobile

Jigoshop

E-commerce websites are trickier to make mobile-friendly, but Jigoshop can help. It’s a full e-commerce plugin and theme, with a responsive layout that can be tweaked to suit your design.

Jigoshop on desktop

Jigoshop on mobile

A Different Theme For Mobile Devices

In the days before responsive design gained traction, websites commonly had two versions: desktop and mobile. The mobile version might have been on an m. subdomain or have a .mobi extension. Some websites out there still do this, mainly huge news websites that serve different content depending on the device.

Fewer WordPress administrators are choosing to do this now, but if you do want to go down this route, then serving two versions of your website from the same database is possible, by using a mobile switcher.

Here are two plugins that make this possible:

• WordPress Mobile Pack
  This tool, already mentioned above as a theme that makes your website mobile-friendly, can also be used as a mobile switcher, detecting mobile devices and using a separate theme of your choice.
• WPtap Mobile Detector
  This targets mobile devices and enables the theme of your choice.

Using one of these plugins enables you to develop a completely separate theme for mobile devices, with its own layout, navigation and content structure.

Or, Finally, Make Your Current Theme Responsive

If you don’t want to throw out your existing theme, then the best way to give mobile users an experience that is at least visually similar to the desktop version is to build responsiveness into your theme.

A responsive theme contains media queries in the theme’s style sheet to define CSS that applies only to devices of a specified maximum or minimum width. A truly responsive theme has a fluid layout that adapts to mobile devices and larger screens to some extent already, but with some extra styling to make the layout optimal for mobile devices.

1. Defining the Media Queries

To get started, you will need to define media queries in the style sheet. Most of the styles already in your style sheet apply to desktop and mobile, so you only need to add CSS that is different for mobile devices. This will go at the end of your theme’s style sheet.

Start by defining the screen width you are developing for. There are two main approaches to this:

1. Start with the narrowest screen width you are targeting (which will usually be mobile phones in portrait orientation); add all of the CSS needed for this screen width; and then add successive media queries for wider screens. This is known as the mobile-first approach, and it has the benefit of making websites faster on mobile devices because only the CSS needed for those devices is loaded.
2. Start with the widest screen width (usually desktop monitors) and work down, adding CSS that applies to each screen width in turn. While this might slow down loading on mobile devices, it has the advantage of working in IE 8 and below, which doesn’t understand media queries. At the moment, most websites are developed this way because they involve making an existing desktop design responsive, so this is the approach we’ll cover here.

A media query consists of three main parts:

1. The @media rule;
2. The media type (the most common being print and screen — we’ll use screen);
3. The maximum width of the screen you are targeting.

You could have a media query to target mobile phones (and other small devices such as the iPod Touch) in portrait orientation that have a width of 320 pixels:

@media screen and (max-width: 320px) {

}

The CSS to be applied to that screen width and any screen narrower than it would be written between the braces.

An alternative to the @media rule would be to create a linked style sheet with the CSS for each screen width. But I don’t do that because it adds another server request with the potential to slow the website down; and managing all of the styles becomes harder if they’re in more than one place.

Here are other media queries for commonly targeted screen sizes:

• (max-width: 480px)
  Works for mobile devices in either portrait or landscape mode, because they are 480 pixels wide in landscape orientation but are still narrower than this maximum width in portrait.
• (max-width: 780px)
  Works for iPads and other large tablets in portrait mode and any screens narrower than them.
• (max-width: 1024px)
  Works for iPads in both orientations, as well as for small desktop browsers.

You can run one media query after another so that each change you make applies to the screen size you’re querying, plus any widths queried further down in the style sheet. In this case, you would work with wider screens first. For example:

@media screen and (max-width: 480px) {

}

If you are ignoring tablets, you would include this media query first and add any CSS for mobile phones in both portrait and landscape modes (for example, any changes to graphics or text size). You would then follow it with this:

@media screen and (max-width: 320px) {

}

Here, we’re adding any styles that apply only to phones in portrait mode (such as layout changes). You don’t need to repeat the CSS that applies to both landscape and portrait modes because this will still apply. In the same way, you don’t need to repeat any styles that will stay the same for desktop views because they will cascade down from the earlier parts of the style sheet.

2. Making the Layout Responsive

Phew! So, now we’ve defined media queries, and we’re ready to roll with some mobile-friendly CSS. Below are the main things you will need to work on for a standard WordPress website. Let’s assume your website’s markup is similar to that of the Twenty Eleven theme (i.e. html → body → header (or div #header) → #main → #content → #primary → #secondary → footer (or div #footer). You might need to substitute your own elements and IDs for the ones in the examples below.

Overall width of website
You’ll need to change this so that it displays correctly. Add the following code between the braces of your first media query:

body {
width: 100%;
float: none;
}

This ensures that the website’s body fills the width of the device and removes any floats. At this point, you might also want to change the background image if there is one (more on that shortly).

You will now have the following code at the bottom of your style sheet:

@media screen and (max-width: 480px) {
   body {
   width: 100%;
   float: none;
   }
}

Width of content and sidebar
In portrait mode in particular, there isn’t room for a sidebar to the right of the main content. Add the following code to the media query relating to devices with a maximum width of 320 pixels:

#content, #primary, #secondary {
width: 100%;
float: none;
margin: 10px 0;
}

Footer content, especially widgets
If your footer has widget areas or other elements with floats applied, you will need to override them for mobile devices in portrait mode.

If you want the footer widgets to be full width in both landscape and portrait modes, then simply add footer.widget-area to the CSS for the sidebars and content.

However, you might want the widget areas to be laid out side by side in landscape mode, depending on how many you have. In that case, you’ll need to do the following:

1. Work out the percentages for the widths, padding and margins (some box-model maths for you!);
2. Add the relevant code to your media query for devices with a maximum width of 480 pixels;
3. Add a separate query for devices with a maximum width of 320 pixels after the one you’re working on, with the following code:

footer .widget-area {
width: 100%;
float: none;
margin: 10px 0;
}

You might also need to adjust the text alignment and borders and padding, depending on your existing theme. Margins should be set to 0 on the left and right; suit them to your theme at the top and bottom, but generally they should be smaller than in the desktop version.

Image sizes
The images in your design might still break the layout or break out of their containing elements, making your website shrink when viewed on a mobile device. There is an easy fix for this:

body img {
max-width: 100%;
}

This will ensure that images are never wider than their containing element. You might need to tweak the CSS if images sized further up in the style sheet have greater specificity.

However, this solution isn’t ideal. The images might look smaller, but mobile devices will still have to download their full sizes, which will slow down response times and possibly lose visitors, as well as annoy users on expensive data plans (more of them are out there than you might think). There a number of solutions to this, some of which you will find in this roundup of articles on responsive images. You may recall the mobile-first approach mentioned earlier; one benefit of this approach is that it serves different-sized image files to devices based on screen width.

Text size
So, our layout is working, and everything displays nicely. But now that the website is narrower, the text might appear huge. We’ll need to adjust the text’s size with the following code:

body {
font-size: 60%;
line-height: 1.4em;
}

This sets the font size as a percentage of the size set for it further up in the style sheet.

4. Changing the Navigation Menus and Creating an App-Like Interface

Sometimes mobile users will want to access specific content; for example, visitors to a store’s website will want to find the store’s location easily, and visitors to an e-commerce website will want to shop with a minimum of clicks (or taps). Sometimes you might want to adjust the navigation to make the website look more like an app.

Here are some methods you can follow to do this:

• Use CSS to turn menu items that are visible on the desktop into drop-down menus, using code similar to what you would use to create a second-level drop-down menu on a desktop website.
• Use conditional PHP or a plugin such as Mobble to display a different menu depending on the device, as seen on the website that I developed for Centenary Lounge:
  
  Centenary Lounge desktop website
  
  Centenary Lounge mobile website
• Use CSS to display menu items as a vertical list of buttons to give the website an app-like look, such as on Cafe Blend:
  
  Cafe Blend desktop website
  
  Cafe Blend mobile website
• Use a plugin such as Dropdown Menus to display menu items as a drop-down walker, freeing up screen real estate.
• Use background images combined with media queries and floats, to create a grid of visual buttons for your navigation, giving the home page an app-like feel.
• Use fixed positioning to fix the navigation to the bottom of the screen, minimizing the need for scrolling, as seen earlier on Social Media Examiner.

The possibilities are limited only by your imagination and creativity!

5. A Problem!

You’ve added the media queries above, but your smartphone still displays the desktop version. Don’t worry! This is because many smartphones use a virtual viewport that is equal to the width of a small desktop, which prevents desktop-designed websites from breaking when rendered in the browser. This can be easily fixed by placing the following code in the head of each page. Because yours is a WordPress website, you need to add it only once, to the header.php theme file:

<meta name=”viewport” content=”width=device-width”>

What this does is tell the phone to treat the size of the screen as its actual size, not the virtual size… if that makes sense.

Summary

Here’s what we’ve looked at in this article:

• Four different ways to make a WordPress website mobile-friendly: with a plugin, with a prebuilt responsive theme, with a separate mobile theme, and by making the existing theme responsive;
• Media queries for responsive design and how they target different device widths;
• Some common styles to make a WordPress website responsive in its layout, images and text.

As you can see, no one option is necessarily the best; it will depend on the website, on the budget and on the time and capability of those involved. Over time, most mobile-friendly WordPress websites will have responsiveness built into them, instead of using a separate theme, mobile website or plugin.

Hopefully this article has given you a starting point to make your WordPress website mobile-friendly. This is just the beginning of the possibilities. To further develop your mobile website, you might want to consider a mobile content strategy; a mobile-first design; APIs and native device functionality to create an even more app-like experience; and more.

Enjoy!

(al)

---

© Rachel McCollin for Smashing Magazine, 2012.

Ruby is an object-oriented language. What does that even mean? It has unique quirks and characteristics that we’ll explain clearly. This article assumes that you have no programming experience, not even HTML.

An important skill to have when creating a program is translating — translating the desires of the user into the output they are looking for. In order to do that, you have to be able to think like a developer so that you can take what you know instinctively (as a user) and morph it into what the computer needs to be able to do what you want. So, we’ll help you start thinking like a developer. When you are done, you should have a mental model of how Ruby works and be on your way to becoming a successful Rubyista.

We’ll take you through a variety of the fundamental elements of the Ruby language and explain the whys behind the hows.

For all the code samples we go over, you can test them out on Try Ruby (without having to install anything on your computer). You can follow Try Ruby’s tutorial if you want, but you don’t need to in order to understand what we’ll outline below. It’s just a quick way to get your feet wet without the headache of installing anything.

How Is Your Code Evaluated by the Computer?

The interpreter for Ruby — basically, the main brain of the programming language that makes sense of the code you write — reads the code from top to bottom and left to right; meaning, it starts at line 1, character 1, literally, and first reads across line 1 to the last character, then goes down to the next line, and repeats this process until it reaches the last line of your program. If you have any syntax errors — i.e. errors in your code, such as misspelled variable names, improper use of constants (we’ll get to constants in a bit), etc. — it will halt execution and show you an error message, usually with a line number corresponding to the code. Remembering this is important because if you encounter an error report while coding, you will need to know how to decipher it. Figuring this out isn’t always straightforward for beginners.

Fictitious code from The Matrix. (Image: Absolute Chaos)

This top-down parsing also affects the control of the flow of logic in your program. Say you want to calculate the balance of someone’s account before showing it to them. You would have to make sure that you put the method and function that does the calculation before the output of the balance; that is, if you are outputting the balance at line 10, then you would have to do the calculations somewhere between line 1 and 9. We’ll dive into this later.

Objects

An object is a thing. It is at the heart of Ruby. Going back to our earlier statement about Ruby being an object-oriented language, that means that Ruby manipulates all data on the assumption that the data is an object. There are many object-oriented languages, but very few put the object at the center of their universe like Ruby does. In Ruby, everything is an object. I mean everything: every variable, every operation. Every object has different characteristics; that’s what makes them different. A string is an object that has built-in characteristics that make it suitable for handling text. For a more technical definition, check out the article “Object” on Wikipedia.

Methods

A method is simply a definition of an action that can be performed on an object. Ruby has built-in object definitions and methods. One such method is capitalize for the Ruby class strings (we will dive into strings later).

string1 = "this string is awesome"

If you wrote string1.capitalize, the output would look something like this:

"This string is awesome".

All that the capitalize method tells the Ruby interpreter to do is convert the first character of the string from lowercase to uppercase. Check out an example directly from the Ruby documentation. As you can see from the documentation, the string object in Ruby has a ton of methods that you can use right out of the box.

Another thing you should have noticed is the way to call a method, string1.capitalize, which is basically <object name> . <method name>.

In this case, the object is a string variable. If you tried to do capitalize on an object that is not a string, Ruby would throw an error.

You can create any method for any of your objects. Here is the way to do that:

def method_name
     #Enter code here
end

The # basically tells the Ruby interpreter that this is a comment for another human and to ignore it. So, the Ruby interpreter skips lines that begin with a #.

Classes

A class is like a blueprint that allows you to create objects of a particular type and to create methods that relate to those objects. But classes have a special property called “inheritance.” Inheritance means just what you would think. When you inherit something from someone, it likely means a few things:

• That you are related in some way (in most cases, it is parent to children or grandparent to grandchildren);
• That either you are getting a bunch of stuff (land, money, etc.) or you have gotten some biological attribute (say, a nose shape or hair type).

Classes are like a blueprint for objects. (Image: Todd Ehlers)

Those principles are the same in Ruby. There are parent, grandparent and children classes. As a general rule, children classes inherit all of the attributes of a parent or grandparent class.

In Ruby, an object’s grandparent class is known as its “superclass.” In other words, if you have an object that is a string — meaning that your object inherits the properties of the String class — then the parent class of String is String’s superclass. Be careful not to miss an important distinction here: the superclass of String (which is a class that tells Ruby how to treat strings) is not the same as the superclass of a String object. Here is a demonstration:

> num1 = "this­ is a strin­g"
=> "this is a string"
> num1.class
=> String
> String.sup­erclass
=> Object
> Object.superclass
=> BasicObject
> BasicObjec­t.supercla­ss
=> nil

What we have done is set the local variables num1 to be a string. When we check the class of num1, by calling the .class method, it tells us that the class of num1 is String. Then, when we checked the superclass of String, it tells us Object, and so on.

Look at what would happen if we tried num1.superclass:

> num1 = "this­ is a strin­g"
=> "this is a string"
> num1.super­class
=> #<NoMethodError: undefined method `superclass' for "this is a string":String>

The reason this doesn’t work is because num1 is an object (a local variable) that has inherited the properties of the class String. And num1 is not a class, so it has no superclass.

Here is another way to do what we did earlier:

> num1 = "this­ is a strin­g"
=> "this is a string"
> num1.class
=> String
> num1.class­.superclas­s
=> Object
> num1.class.superclas­s.supercla­ss
=> BasicObject
> num1.class­.superclas­s.superclass.supercl­ass
=> nil

The reason the last value is nil is because BasicObject has no parent. It inherits nothing from another class, so it stops there.

One key thing we have done here that is different from before is we have “chained” methods, meaning we have continued applying a method to the current statement. That’s another beautiful thing about Ruby: every time it evaluates something, it returns a copy and allows you to continue evaluating it.

Take the last line:

> num1.class­.superclas­s.supercla­ss.supercl­ass
=> nil

Basically, Ruby did this:

• What is the class of num1? It’s a string, so return String.
• What is the superclass of String? String is a child class of Object, so return Object.
• What is the superclass of Object? Object is a child class of BasicObject, so return BasicObject.
• What is the superclass of BasicObject? BasicObject is not a child class of anything, so return nil.

All on one line, all in one command. Simple, neat, elegant.

The structure of classes and superclasses is the hierarchy of class inheritance.

Now the question is, how do you define a class and use one? Glad you asked.

class MyClass
# some code logic
end

That’s it.

Basically, you just have the opening keyword, class, followed by the name of your class (MyClass, in this case). Then you have some code. And when you are done, you close it with the keyword end. Make sure that class and end are always all lowercase (i.e. don’t write Class or End or you might get errors).

That’s all there is to it.

If you have a parent class that you want this new class to inherit stuff from, you would define it like this:

class MyChildClass < MyClass
# some code that is specific to the child class
end

Ruby interprets the < operator to mean that the class name on the right side is the parent and the class name on the left is the child (therefore, the child should inherit methods and such from the parent).

Also, remember that class names usually start with an uppercase letter; and if their name has multiple words, you do what is called “CamelCasing” — i.e. instead of using a space or underscore or hyphen, you just start the new word with an uppercase letter.

Class Instances

Now we know how to create a class, which we know is the blueprint of an object type. So, if you think of baking, a class is like a recipe (which contains a list of ingredients and instructions for creating something). But once you create something — say, blueberry muffins — then each muffin may be considered an “instance” of that class.

So, each instance or muffin is an object.

The way to create an instance is like this:

muffin = BlueberryMuffin.new

That’s it.

To be technical, the only part of the statement above that actually creates an instance of the BlueberryMuffin class is BlueberryMuffin.new. In order to use the object, you have to store it somewhere, so we’ve stored it in the local variable muffin so that we can reuse this specific instance (or muffin).

You will need to do more technical things with a class, like set up an initialization method so that whenever you create an object of the class, Ruby knows how to do that exactly. That is a bit beyond the scope of this article — just understand what a class is, how it relates to objects, how to create new objects, etc.

To read up on classes, check out the article about them on Learn Ruby The Hard Way.

Data Structures

How is data structured?

At the core of programming is the manipulation of data. Computer scientists have come up with a way to manipulate data in a structured way by inventing things called “data structures.” A data structure is simply a container for a particular type of data. Words are handled differently than formulas; likewise, characters and letters are handled differently than numbers — in most cases.

Variables

What’s a variable?

A variable is the name of the most basic type of container that you will store data in. Each variable name has to be unique to its scope (i.e. the area in which the variable is allowed to exist). Think of it as a Venn diagram, in which each variable is only valuable in the circle or square within which it is contained.

Say you wanted to create a program (or a part of a program) that is responsible for adding two numbers. From the coder’s point of view, you would need to set up a container for each of those numbers, and then set up the mathematical function between the containers. The reason to do this is because you don’t want the user to have to edit the source code every single time they want to calculate the sum. Although you could do that, the solution is neither practical nor efficient. Most users know what a calculator looks like, so they can just press the buttons or enter the numbers. But editing source code is a no-no.

In Ruby, each of those containers is a variable. So, you would do something like this:

sum = num1 + num2

As opposed to something like this:

sum = 19 + 20

Ruby and many other languages have many types of variables. We’ll go over just a few to be brief and not confuse you too much.

• Local
  This is a variable that can be used only in a finite part of the program, such as a method or function (we’ll go over what these are later). Once you have exited that part of the program, those variables are destroyed. In fact, say you have a program that has three methods; you could have the same variable — say, num1 — that is used in three different ways in each of those methods and that stores three different values. Going back to the Venn diagram, suppose there are three shapes within the diagram: Circle 1, Circle 2, Square. Also suppose that Circle 1 and Circle 2 are not connected, but both are within Square. A local variable would be confined to its respective circle and would not be able to affect anything outside of its circle. The way to use these variables is to just use them. If you want to use a local variable called sum that stores the sum of the values of num1 and num2, you would simply write sum = num1 + num2.
• Global
  This is a variable that can be used throughout the entire program. Back to the Venn diagram, these variables would be within the square. This way, if you are inside any of the circles that are within the square, you can access a variable that is outside of the circles but within the square. You use these in Ruby by putting a $ before the name. So, suppose you want to calculate multiple dimensions of a circle, and you want to define the radius beforehand. You would do something like this: $radius = 20. Then, at any other time throughout the program, regardless of whether you are in a subcircle of the square or in the square alone, you can reference $radius. Now, using global variables has a good side and bad side. The good side is that you can read the value of a global variable in any method or function within your program. The bad side is that you can also write to a global variable in any method or function within your program. If you change the value, forgetting that another method or function depends on the previous value could really screw things up. As a rule, then, stay away from global variables unless you are confident that you know where they will be used and how changes would affect the rest of the program.
• Constants
  These are “sacred” global variables. The values of these variables are supposed to remain constant for the life of your program. Say you wanted to specify a mathematical constant such as pi that you could easily use throughout your program. You would do something like this: PI = 3.14. Constants have to begin with an uppercase letter, and more often than not they are all uppercase, but they don’t have to be. Note that I said that the values of constants are supposed to be constant throughout your entire program, but they can be changed. Ruby doesn’t forbid you from changing the value, but when you do, it gives you a warning because it doesn’t like it. Going back to the Venn diagram, think of PI as being set outside of the square, and it can be used anywhere within the square and anywhere within the circles within the square.
• Class
  These are variables whose scope is limited to the class that they are defined in. Class variables are defined with @@ at the beginning of the name of the variable.
• Instance
  These are variables whose scope is limited to one particular instance of a class. They are defined with @ at the beginning of the name of the variable.

Here’s a recap on how to use the variable types:

• Local
  sum = num1 + num2
  Local variable names should start with a lowercase letter or an underscore.
• Global
  $radius = 20
  Global variable names should start with a $.
• Constants
  PI = 3.14
  Constants should start with an uppercase letter, but they are commonly written in full caps.
• Class
  @@length = 10 #
  This denotes the length of a side of an object in a class. I’ve used an imaginary class, called Square, and defined the length of each side for demonstration purposes. What’s important to note here is that all “squares” would have a “length” of 10 by default.
• Instance
  @length = 5 #
  This denotes the length of a side of a particular object. Suppose you wanted to create a red square that had a length of 5 instead of the default 10. You could use this instance variable to specify the length of this particular square, your “Red Square.”

Note that these rules are by no means comprehensive. Some words you can’t use as variable names. They are called “reserved words,” which Ruby uses internally to identify various elements of the language.

To find out more about variables and other do’s and don’ts, check out the following resources:

• “The Ruby Language,” Programming Ruby: The Pragmatic Programmer’s Guide
• “Variables,” Ruby User’s Guide
• “Ruby Programming/Syntax/Variables and Constants,” Wikibooks

Strings

What is a string?

A string is a series or sequence of characters — i.e. a “word” or sequence of words. You might say a sentence, but a string is not just a sentence. For instance:

string1 = 'a'
string2 = 'This is a string'

Two things are happening here. The first is that we are using local variables, and the second thing is that we are using single quotes to define the content of the variable. Even though string1 contains just one letter, it is still a string because it is declared in single quotes. Ruby knows how to treat a variable by the way it is declared. You can use double quotes, but you have to be consistent. You can’t start the string’s declaration with a double quote and end with a single quote, like this: string1 = "This is a string'. But you can do this: string1 = "This is a string", or string2 = 'This too is a string'. Both are valid, and it’s just a matter of taste.

num1 = 9

This sets num1 to the numerical value of 9. So, if you did num1 + 1, the result would be 10.

But if you used single quotes around the 9, like this…

num1 = '9'

… then that would say that 9 is actually a string, not a number. So, if you wrote num1 + 1, it would throw an error along the lines of: => #<TypeError: can’t convert Fixnum into String>. The Ruby interpreter is basically saying that you have given it a number and a string and that it doesn’t know how to add them.

To take that one step further, if you did this…

num1 = '9'
num2 = '1'
num1 + num2

… the result would be this:

"91"

Because Ruby would take the two strings and literally squish them together. When you specify a value in quotes (either single and double quotes), you are telling the Ruby interpreter, “Don’t translate this. Just take the exact content between the beginning and end quotes.” It treats the 9 like any other letter. So, as far as Ruby is concerned…

num1 = '9'

… is more or less the same as this:

num2 = 'a'

As a matter of fact, if you did num1 + num2, the result would be 9a.

In summary, a string is just a combination of letters, numbers and special characters.

Collections

So far, we have covered individual pieces of data, such as one or a handful of items that can be stored in a local variable, or a single object created as an instance of a class.

But what happens if we want to work with many pieces of data — that is, a collection, such as a series of numbers that we need to put in ascending order, or a list of names sorted alphabetically. How does Ruby manage that?

Ruby gives us two tools: hashes and arrays.

Arrays

The easiest way to explain an array is to show an image of what a “typical” one looks like.

Rather than having six different variables for the six food types, we have just one food array that stores each food item in its own container or element. The numbers to the right of the diagram above are the “index” or “keys” (i.e. addresses) of each element ([0] = chicken, [1] = rice, etc). Note that the keys are always integers (whole numbers) and always start at 0 and go up from there. So, the first element is always [0], and [1] is always the second element, etc. So, you will know that the range of keys of any array is always [0] to (length-1) — meaning that the last element is always total length of the array minus 1, because we started at [0].

To create the above in Ruby, we would do something like this:

food = ['chicken', 'rice', 'steak', 'fish', 'shrimp', 'beef']
=> ['chicken', 'rice', 'steak', 'fish', 'shrimp', 'beef']
> food.count
=> 6

Notice that for each element, we use single quotes (we could have used double quotes instead) because we are storing strings in each element. Ruby’s array class has some methods that we can use right out of the box, such as count, as used above. It simply counts the total number of elements in the array and outputs that value. Thus, even though the index goes up to 5, there are 6 elements because the index started at 0.

Now that we have created a food array, we can access each item by invoking the name of the array that we created, followed by the index number.

> food[0]
=> "chicken"
> food[1]
=> "rice"
> food[2]
=> "steak"
> food[6]
=> nil

The reason we get nil at food[6] is because there is no [6] — or, rather, nothing is stored in food[6], so Ruby automagically sets food[6], food[7], food[8] and so on to nil. To add another food item to this array, all you would have to do is set the next element to whatever value you wanted, like so:

> food[6] = 'carr­ots'
=> "carrots"
> food
=> ["chicken", "rice", "steak", "fish", "shrimp", "beef", "carrots"]
> food.count
=> 7

There is another way to add elements to your array in Ruby. You use the append operator, <<, which basically sticks something at the end of the array. The difference here is that we don’t have to specify an index position when using the append operator. We just do this:

> food << "irish potato"
=> ["chicken", "rice", "steak", "fish", "shrimp", "beef", "carrots", "irish potato"]
> food << 42
=> ["chicken", "rice", "steak", "fish", "shrimp", "beef", "carrots", "irish potato", 42]

Everything that comes after the << is added to the array. This is pretty convenient because you can append variables and other objects to an array without worrying about the content itself. For instance:

> sum = 10 + 23
=> 33
> food << sum
=> ["chicken", "rice", "steak", "fish", "shrimp", "beef", "carrots", "irish potato", 42, 33]

All we did here was create a local variable named sum, and then push the value of sum to the end of the array. We can even add arrays to the end of other arrays:

> name_and_a­ge = ["Marc", "Gayle", 28]
=> ["Marc", "Gayle", 28]
> food
=> ["chicken", "rice", "steak", "fish", "shrimp", "beef", "carrots", "irish potato", 42, 33]
> food.count
=> 10
> food << name_­and_age
=> ["chicken", "rice", "steak", "fish", "shrimp", "beef", "carrots", "irish potato", 42, 33, ["Marc", "Gayle", 28]]
> food.last
=> ["Marc", "Gayle", 28]
> food.count
=> 11

Even though the last element is an array with three elements — Marc, Gayle, 28 — it still counts as just one element (i.e. one array) inside the food array. So, the count figure goes from 10 (before name_and_age is added) to 11.

If we wanted to find out how many elements were inside the last element of the food array, we could do something like this:

> food.last.count
=> 3

A few other interesting methods that Ruby allows us to use right out of the box are first, last, length, include? (followed by the object you want to check for), empty?, eql? and sort.

> food
=> ["chicken", "rice", "steak", "fish", "shrimp", "beef", "carrots"]
> food.first
=> "chicken"
> food.last
=> "carrots"
> food.length
=> 7
> food.count
=> 7
> food.include?("chicken")
=> true
> food.inclu­de?("filet­ migno­n")
=> false
> food.empty­?
=> false
> food[0]
=> "chicken"
> food[0].eq­l?("chicke­n")
=> true
> food[0].eq­l?("beef")
=> false
> food.sort
=> ["beef", "carrots", "chicken", "fish", "rice", "shrimp", "steak"]

In the brackets right after eql?, we put the string in double quotes because we are dealing with a string. Also, sort arranges alphabetically on strings and from lowest to highest for numbers.

We can store anything in each element, not just strings. We can even mix; some elements can be strings, others can be numbers.

Say we wanted an array of numbers. We would do something like this:

numbers = [1, 2, 3, 4, 5, 6]
=> [1, 2, 3, 4, 5, 6]

Remember what we said earlier about always starting the index at 0. You can see here why that is so important. In order to reference the number 1 in this array, the array reference has to be [0] because that is the first element in the array.

> numbers[0]
=> 1
> numbers[1]
=> 2
> numbers[6]
=> nil
> numbers.fi­rst
=> 1
> numbers.la­st
=> 6
> numbers.co­unt
=> 6
> numbers.le­ngth
=> 6
> numbers.in­clude?(3)
=> true
> numbers.in­clude?(10)
=> false
> numbers.em­pty?
=> false
> numbers[1]
=> 2
> numbers[1]­.eql?(1)
=> false
> numbers[1]­.eql?(2)
=> true

Because we are evaluating numbers, the objects in the brackets should not be wrapped in double quotes. In fact, if we did use double quotes, Ruby wouldn’t find the items because it would be looking for a string and not a number. Be careful with those quotes!

> numbers.in­clude?("3")
=> false
> numbers[1]­.eql?("2")
=> false

To see what other Ruby methods are included in the array class, check the documentation on “Array.”

Everything we’ve just discussed covers one-dimensional arrays (i.e. arrays with just one column). These are best used to store lists of items.

As you can imagine, there are multi-dimensional arrays. We’ll just touch on a 2-D array. Once you understand how to use them, you can then extrapolate to 3-D and beyond (if you ever want to go there).

A 2-D array looks like this:

We are storing two things: the name of the dish, along with a price related to that item.

As the diagram suggests, in order to access each element, you would use both keys.

This is how we would declare this array:

> food2 = [["ch­icken", 10], ["ric­e", 5], ["ste­ak", 20], ["fis­h", 15], ["shr­imp", 18], ["bee­f", 9]]
=> [["chicken", 10], ["rice", 5], ["steak", 20], ["fish", 15], ["shrimp", 18], ["beef", 9]]

A few key differences should jump out at you. Essentially, food2 is an array of arrays (meaning that it is an array whose elements are themselves arrays). Huh? Well, look at each element.

> food2[0]
=> ["chicken", 10]
> food2[1]
=> ["rice", 5]
> food2[2]
=> ["steak", 20]
> food2[3]
=> ["fish", 15]

When you access each “single” element, you notice that each has an array inside of it; ["chicken", 10] is an array that has a string (chicken) in the first element and a number (10) in the second element.

So, to access each individual element, we would do something like this:

> food2[0]
=> ["chicken", 10]
> food2[0][0]
=> "chicken"
> food2[0][1]
=> 10

First, food2[0][0] is saying, “Show me the first element of the first element of the array food2.” And food2[0][1] is saying, “Show me the second element of the first element of the array food2.”

You can also use the same methods of the Ruby class array on subarrays.

> food2
=> [["chicken", 10], ["rice", 5], ["steak", 20], ["fish", 15], ["shrimp", 18], ["beef", 9]]
> food2.coun­t
=> 6
> food2[0]
=> ["chicken", 10]
> food2[0].count
=> 2
> food2.last
=> ["beef", 9]
> food2.first
=> ["chicken", 10]

Keep in mind one important distinction for multi-dimensional arrays: Ruby will check whatever you call the method on.

For instance, if you wanted to check whether chicken is in the food2 array, you could not do this:

> food2.incl­ude?("chic­ken")
=> false

The reason is that food2 is just an array of arrays. So, you would have to do something like this:

> food2
=> [["chicken", 10], ["rice", 5], ["steak", 20], ["fish", 15], ["shrimp", 18], ["beef", 9]]
> food2[0].include?("chicken")
=> true

We had to specify the particular element ([0]) that we wanted to check for the string chicken.

In this case, we knew that the string chicken was stored in food2[0] because we put it there. How would we find it if we didn’t know? We’d have to use an iterator.

Iterators

An iterator is a mechanism in Ruby that enables you to cycle through data structures that store multiple elements (such as an array) and examine each element. One of the most commonly used methods is named each. Each is a method in the array class that comes with Ruby.

Let’s start simple. Suppose we wanted to print a list of all of our food items stored in the food array. How would we do this?

> food
=> ["chicken", "rice", "steak", "fish", "beef"]

food.each do |x|
puts x
end

chicken
rice
steak
fish
beef

A few things to be aware of here:

1. You can only call each on a collection of data.
2. Once you call each, you have to pass a block to it. A block is just a contained bit of code. Basically, you are saying to apply the code contained within the block to each element that you look at.

Block

There are two ways to use a block. The first is similar to the example above, where you just do this:

do |variable|
#some code
end

Note that you have to use a block with an iterator. You can define a block outside of an iterator, but in order to execute the block, you have to use it in conjunction with an iterator. That’s why we called do |x| after food.each earlier.

You can use one or more variables in your block. Those variables are local to the block alone, so they will be destroyed once you leave. Thus, if you had two blocks, you could use the variable x in both, and one wouldn’t affect the other.

In the example above about food, we have said, for each element in the array food, print it to the screen.

Another way to use a block is on one line, like this:

food.each { |x| puts x }

In this case, the opening curly brace ({) replaces the do, and the closing curly brace replaces the end. If your operation is just one line, then this way is convenient, although I have found that rereading such code in future is sometimes harder; so, I usually just use do and end, but that’s a personal preference. Do whatever makes you most comfortable.

The reason that blocks use variables is because the elements of the collection are actually not modified — unless you specifically chose to do so. Basically, what happens is that for every single iteration through the array, a copy of the new element is stored in x, and then x is used in the block.

Going through the food array, the local block variable x would look something like the following.

First iteration:

food[0] = 'chicken'
x = food[0]
x = 'chicken'

Second iteration:

food[1] = 'rice'
x = food[1]
x = 'rice'

Third iteration:

food[2] = 'steak'
x = food[2]
x = 'steak'

Using numbers would more clearly illustrate that the values aren’t changed in the original array:

> numbers = [1, 2, 3, 4, 5]
=> [1, 2, 3, 4, 5]
> numbers.each do |x|
… x = x + 2
… puts x
… end

3
4
5
6
7

> numbers
=> [1, 2, 3, 4, 5]

Here we’ve printed out the numbers 3, 4, 5, 6, 7 (i.e. 1+2, 2+2, 3+2, etc.); but at the end, the numbers array is the same.

Hashes

A hash is another collection type. It is a collection of “key-value” pairs. A key-value pair is a combination of the name of a container (i.e. the key) and the contents of the container (i.e. the value).

a => "Marc"

In the key-value pair above, the key is a, and the value is Marc.

A hash, then, is basically a list of these key-value pairs, separated by commas. A hash looks like this:

a =>"Marc", b => "Cheyenne", c => "Alexander", d=> "Mia"

Hashes and arrays have some key differences, though, and some things to note:

• The keys are not integer keys. They can be characters, integers, strings, etc. — basically, any Ruby object type.
• The keys are not ordered. So, you couldn’t say that a is “first” or that it “comes before” b in the example above, because Ruby does not look at the order of keys in hashes.
• Even though the keys are not ordered, if you were iterating through a hash (which we will do shortly), Ruby would go through them in the order in which they were added to the hash. In our example, if we were printing out each value, Ruby would print out Marc, Cheyenne, etc. But don’t confuse this with the way in which array keys are ordered.

There are multiple ways to initialize (or initially create) a hash, but the most popular ways look something like the following.

To create an empty hash (i.e. a hash with no values):

> day = Hash.­new
=> {}

To create a hash with particular values:

> names = Hash[­"a" => "Marc­", "b" => "Chey­enne", "c" => "Alexander", "d" => "Mia"­]
=> {"a"=>"Marc", "b"=>"Cheyenne", "c"=>"Alexander", "d"=>"Mia"}
> names2 = {"a" => "Marc­", "b" => "Chey­enne"}
=> {"a" => "Marc", "b" =>"Cheyenne"}

You will notice that to create the hash, you don’t have to use the keyword Hash or square brackets ([]). You can use them if you like, or you can just use = { }.

For the keys and values, you also don’t need to put the keys in quotes. You need to do that only if you want to use strings as the key. Ruby also requires a => (pronounced “rocket”) to assign the value on the right side of the rocket to the key on the left side.

If you tried to do names2 without the quotes around the keys, you would likely get an error like this:

> names2 = { a => "Marc­", b => "Chey­enne"}
=> #<NameError: undefined local variable or method `a' for main:Object>

To access values within the hash, you have to specify the name of the hash, along with the key for the value you are trying to access.

> names
=> {"a"=>"Marc", "b"=>"Cheyenne", "c"=>"Alexander", "d"=>"Mia"}
> names["a"]
=> "Marc"
> names["c"]
=> "Alexander"
> names[a]
=> #<NameError: undefined local variable or method `a' for main:Object>

Because we didn’t use quotes for names[a], the Ruby interpreter thinks that a is a local variable or a method and so can’t find a value for it, thus throwing an error.

If you tried to access a seemingly legitimate value via a legitimate key that has not been assigned a value, then Ruby would usually return nil.

> day["a"]
=> nil
> day[9]
=> nil  #For you Day9 fans, don't worry… I am a fan too :)

Suppose you wanted to create a hash in which every value has a “default” value. You could do something like this:

> year = Hash.­new("2012"­)
=> {}
> year[0]
=> "2012"
> year[12]
=> "2012"

All we’ve done was call the method new on the Ruby class Hash and pass the default value of 2012 into that method. So, when trying to access a value that doesn’t exist, instead of returning nil, Ruby would return the default value (2012).

You can use a number of methods with hashes:

> names.keys
=> ["a", "b", "c", "d", "e"]
> names.values
=> ["Marc", "Cheyenne", "Alexander", "Mia", "Christopher"]

As you can guess, the keys just returns all of the keys in the hash, and the values returns all of the values.

> names.leng­th
=> 5
> names.has_­key?("a")
=> true
> names.has_­key?("z")
=> false
> names.has_­key("a")
=> #<NoMethodError: undefined method `has_key' for #<Hash:0x55c797d7>>

Note that the name of the has_key method is actually has_key?. If you left out the ?, it would throw an error like the one above.

All that has_key? is doing is checking the hash to see whether any key matches whatever is in the brackets. If it finds a match, then it returns true; if it doesn’t, it returns false.

> f_names = names
=> {"a"=>"Marc", "b"=>"Cheyenne", "c"=>"Alexander", "d"=>"Mia", "e"=>"Christopher"}
> l_names = {"g" => "Gayl­e", "h" => "Gayl­e", "j" => "Jack­son", "m" => "Brow­n"}
=> {"g"=>"Gayle", "h"=>"Gayle", "j"=>"Jackson", "m"=>"Brown"}
> f_names.me­rge(l_name­s)
=> {"a"=>"Marc", "b"=>"Cheyenne", "c"=>"Alexander", "d"=>"Mia", "e"=>"Christopher", "g"=>"Gayle", "h"=>"Gayle","j"=>"Jackson", "m"=>"Brown"}
> f_names
=> {"a"=>"Marc", "b"=>"Cheyenne", "c"=>"Alexander", "d"=>"Mia", "e"=>"Christopher"}
> l_names
=> {"g"=>"Gayle", "h"=>"Gayle", "j"=>"Jackson", "m"=>"Brown"}

All we’ve done above was create a new hash, f_names, by assigning it the existing names hash. Then, we created another hash, l_names, that has a few last names. Then, we just merged the two hashes to create a master hash. However, because we just ran the merge method without assigning the result to any variable, it wasn’t stored. If you check the values of f_names and l_names after, you will see that they look exactly the same as before we ran merge.

If we wanted to store the value of the merge, we would have had to do something like this:

> master_has­h = f_nam­es.merge(l­_names)
=> {"a"=>"Marc", "b"=>"Cheyenne", "c"=>"Alexander", "d"=>"Mia", "e"=>"Christopher", "g"=>"Gayle", "h"=>"Gayle", "j"=>"Jackson", "m"=>"Brown"}

Another approach is to do a “destructive” merge. This is an interesting feature of Ruby. For many (perhaps most) methods, if you add an exclamation point to the end of the method’s call, you actually replace the value of the method’s caller with the returned value. For example:

> f_names
=> {"a"=>"Marc", "b"=>"Cheyenne", "c"=>"Alexander", "d"=>"Mia", "e"=>"Christopher"}
> l_names
=> {"g"=>"Gayle", "h"=>"Gayle", "j"=>"Jackson", "m"=>"Brown"}
> f_names.me­rge!(l_names)
=> {"a"=>"Marc", "b"=>"Cheyenne", "c"=>"Alexander", "d"=>"Mia", "e"=>"Christopher", "g"=>"Gayle", "h"=>"Gayle", "j"=>"Jackson", "m"=>"Brown"}
> f_names
=> {"a"=>"Marc", "b"=>"Cheyenne", "c"=>"Alexander", "d"=>"Mia", "e"=>"Christopher", "g"=>"Gayle", "h"=>"Gayle", "j"=>"Jackson", "m"=>"Brown"}

As you can see, the f_names value after we ran the destructive merge method (merge!) is now the same value as the merged hash.

Another method that you can use with hashes is each. But it is slightly different. With arrays, you just have to pass in one variable to the block (which essentially represents the index of the array). With hashes, you have to pass in two variables: one that represents the key, and another that represents the value.

> f_names.ea­ch do |key,­ value­|
.. puts "#{ke­y} is #{val­ue}"
.. end
=> "a is Marcb is Cheyennec is Alexanderd is Miae is Christopherg is Gayleh is Gaylej is Jacksonm is Brown"

This looks a little messy. Here is what’s happening:

• Reading from left to right, Ruby reads the left-most and oldest value first, and it stores those values in key and value. So, after the first iteration, key would be a, and value would be Marc.
• Then, Ruby goes inside the block and executes top down. The first command is puts, followed by a string. In other words, it will print everything in quotes to the screen.
• What is that strange syntax in the quotes after the puts? That’s called “string interpolation.” It basically says, stick the value of this variable into my string at this exact position. Thus, after the first iteration, puts would do this:
  1. Look for the key variable.
  2. Print the key variable to the screen (i.e. a).
  3. Then print a space (because we put a space between the key and the is).
  4. Print the next word (is).
  5. Then print another space.
  6. Then print the value variable (Marc). (The entire string, after the first iteration, would be a is Marc.)
  7. Go to the next command because this puts command is done.
  8. Sees end, so goes back to the beginning of the block to see whether any more elements are in this hash object.
• Because it is in a block, it just repeats this entire process for every key-value pair in the hash until there are no more.
• Because we didn’t add a space before the last double quotes on the puts line (and we didn’t put a space after the first quote on the puts line), no space will be between the last character of the first iteration and the first character of the second iteration.
• In other words, if puts looks like puts " #{key} is #{value}", then the resulting string might make more sense: a is Marc b is Cheyenne c is Alexander etc.

I intended for the output to make sense, but when I saw the result, I realized that this has tripped me up many times in my career, so I figured to highlight it.

You can use a lot more methods on hashes, many of which you should be familiar with because they look like others we have covered here, such as value? (note the ? — I’m not asking a question here), and they look similar to the methods we went over in the arrays section, such as include?, empty?, eql?, size, etc.

The last element of Ruby that you should be familiar with is an object type called a symbol.

Symbols

A symbol is an object type that resembles a string, but is not quite one. The major difference between a symbol and a string is that a symbol always begins with a colon (like :name). (For more information, see the “Symbol” article in the Ruby documentation and “The Ruby_Newbie Guide to Symbols” on Troubleshooters.com)

Symbols work nicely with hashes because you can use them as the keys instead of strings.

> f_names
=> {:a =>"Marc", :b =>"Cheyenne", :c =>"Alexander", :d =>"Mia", :e =>"Christopher"}
> f_names[:a­]
=> "Marc"

The good thing about this is that you no longer have to worry about all of those quotes for both the keys and the values… but you can still remember the words for the keys.

> pets = {:dog­ => "Cook­ie", :cat => "Snow­y", :fish­ => "Gold­ie"}
=> {:dog=>"Cookie", :cat=>"Snowy", :fish=>"Goldie"}
> pets[:dog]
=> "Cookie"
> pets[:fish]
=> "Goldie"

Symbols make dealing with hashes much simpler than using strings as keys. You can, of course, use hashes for anything else in the Ruby language; their main function is to store values and make retrieval easier on the interpreter (since handling strings has many rules).

Conclusion

I hope you have learned a lot here. Remember that this guide to Ruby is not comprehensive, but simply an introduction tailored to those with little or no programming experience. It’s not written in the typical programming tutorial style because I’ve always found that to be a bit difficult. I need to understand the whys behind the whats, so I’ve taken that approach here. I also don’t profess to be a Ruby ninja; I just wanted to learn how to build Web products myself, so I taught myself Ruby and Rails.

You now have the foundation to play with Try Ruby some more or to install Ruby on your system and get started (Google it).

Good luck, and remember that true learning often happens when you are struggling with a problem. When you spend one week stuck on a “very simple” problem and you eventually figure it out, you are guaranteed not to make that mistake again. And when you get stuck, don’t panic. Just take a break; maybe Google it and see what solutions others have had. But don’t just copy and paste code. Figure out why it does what it does and how it can help you. That’s how you learn.

If I was unclear with anything, please let me know in the comments.

Additional Reading

There are fabulous books on Ruby to help get you started. Here are some of my favorites.

• Why’s (Poignant) Guide to Ruby
  This wonderful comic has become a classic in the Ruby community. In fact, its author (Why the Lucky Stiff — yes, that’s his name) disappeared a few years ago, which created a somewhat cultish mystique around the work that he did. His wife let the world know that he is fine, but he is no longer an active member of the Ruby community (Google him if you are interested in the saga).
• Humble Little Ruby Book
  Buy the PDF or read it free online. The writing style is engaging.
• Eloquent Ruby
  This book really helped me wrap my brain around “the Ruby way” of programming. It is a little more advanced than the two resources above, but once you have some of the basics down (i.e. once you have a solid understand of everything we’ve covered in this series), you should be able to learn a lot from this book. Russ’ tone is engaging and his writing easy to understand.
• Programming Ruby: The Pragmatic Programmer’s Guide
  This is a little drier in presentation and tone, but rich in content. It is also known as Ruby Pickaxe and the Ruby Bible. A solid encyclopedia of all aspects of the Ruby programming language. The reason it is called Pickaxe is because it had a picture of a Pickaxe on the cover. The first version is free to read, although it is a bit outdated.
• Programming Ruby 1.9: The Pragmatic Programmer’s Guide
  A more up-to-date Programming Ruby (aka Pickaxe). While not free, this one is a must have for all Rubyistas.

(al) (km)

---

© Marc Gayle for Smashing Magazine, 2012.

Today’s freebie is a social icon set which contains all the latest icons needed for you social needs! It includes a total of 75 icons, provided in three sizes: 16×16, 32×32 and 64×64.

The file is free for personal and commercial use. Redistribution is not allowed, so if you’d like to share this one with your friends, kindly direct them to this page so that they can download their own copy from here.

The set was designed by Chris Kirkman, a designer from San Diego that focuses on UI and UX design. You can follow him on Twitter and you can also check out his free digital business card app, uME

See the full preview and download after the jump!

Creative Font Collection from HVD Fonts – only $47!

Source

Today I am going to share a trendy functionality which I have been implementing in my projects for a while now.

I call it “FoxyComplete” and what is does is fetch clickable search results along with images either automatically scraped from the result’s content or a specified file. It’s easy to implement and once done, easy to tweak.

The application of this functionality is purely dependent on the designer and developer preference but its impact on the user experience makes it a top choice to add in modern design and development projects.

Business units where I have personally used this functionality are e-commerce, corporate designs, photography, entertainment and future projects that demand a comprehensive search feature.

I am pretty sure that you all have visited the IMDb and Apple websites and tried their search features. If not – below is a preview of what their advanced search functionality looks like.

We all know it can be done but then the question is, “Why is it not usually done across all those beautifully crafted websites?” Well, I guess it’s probably a lack of a quick, open-to-all solution!

When I implemented the same Autocomplete Search with Images over at my Photography Blog which I designed a while ago, it surely was tricky to achieve, but in the end it came out great. The visitors at my blog really enjoy searching through my image gallery and instantly get a preview of what they will be seeing next.

Below is how the search feature at my blog looks.

In this tutorial I am going to cover the below mentioned points

1. A brief overview of the script
2. FoxyComplete as a WordPress Plugin (Local / Dynamic)
3. Implementing FoxyComplete as a Youtube Search with Images
4. Improving Security

For WordPress Designers, it’s a piece of cake and for the WordPress/PHP Developers – it’s a big opportunity to explore its numerous functionalities and applications it has to offer. For advanced implementation, the requirements would be basic knowledge of WordPress, PHP, HTML, jQuery and CSS.

A brief overview of the script

Lets first quickly take a sneak peak to what what we will be creating in this tutorial. Please click the below image for a basic demo.

Please bear in mind, I am keeping this tutorial to a very basic level to make sure everyone understands it and anyone can design or tweak it according to their requirements. The functionality that I have made was inspired from the jQuery Autocomplete Plugin by Jorn Zaefferer.

The above quick example autocompletes the title of the result but we can also tweak it to redirect to a URL on select (done on the next section). The ID of the search field is kept as “s”, which is the default used for WordPress Search Field (would be beneficial as we continue this concept further to develop a WordPress Plugin).

Styling the results is easy: it’s made up of a clean structure that is easy to style according to your design.

.ac_results -> .ac_results ul -> .ac_results ul li -> .ac_results ul li a -> .ac_results ul li a img and .ac_results ul li a span

This basic example uses a static data source which is a simple JavaScript file in which we have declared an array in JSON format. All our functionality does is to parse the array and display the results.

Don’t worry—it’s just an array with basic key and value pairs and nothing more than that. Our keys are the permalink to take us to the result page, image to preview, and the title in which we have to search the string. I have kept a default image and an example title for this basic demo.

Example array structure

[
{“KEY 1”: “VALUE”, “KEY 2”: “VALUE”, “KEY 3”: “VALUE” },
{“KEY 1”: “VALUE”, “KEY 2”: “VALUE”, “KEY 3”: “VALUE” },
{“KEY 1”: “VALUE”, “KEY 2”: “VALUE”, “KEY 3”: “VALUE” }
… Repeat as much as you want to
]

The JavaScript functionality is easy. We just parse the resultant JSON Array in jQuery, format the results according to our requirements, and pass it display.

Tip for the Developers: In-case you are looking to change how the results are displayed have a look at the function format() in the script foxycomplete.js. It’s a JavaScript function that takes an array as input and returns formatted HTML containing the elements of the array. Pretty basic to understand but if you are looking to change it—do it here!

FoxyComplete as a WordPress plugin (local/dynamic)

Click the below image to download the WordPress Plugin as a .zip file.

For the designers

I hope you remember that I said it was supposed to be a piece of cake for designers, well, here it is! FoxyComplete as a Plug-n-Play WordPress Plugin that works straight out of the box—just simple configuration is required for basic implementation. All you have to do is download it, install it, and play around while you design for it.

The Plugin Options are as below:

Enable Local Search: After browsing a few websites I found that their search option was incredibly fast – even with a huge database—example IMDB. The first thing that struck was their advanced fast servers—but what about the regular users that have shared hosting and varied amounts of data? That is why I made local search a priority option. It simply loads a JavaScript file in the footer of your WordPress installation containing an array to all your posts and pages along with their URLs and, if found, image previews. The plugin defaults to dynamic search although you can change it anytime to local search.

Limit: One sure would need a control over the limit of the results displayed. It helps keep consistency with the design and allow users to get only the most relevant results. It defaults to five top relevant results.

Width of the Autocomplete: Originally it was always kept equal to the input’s width but then I realized we were not searching on a Google-style wide search box. It still defaults to the input element’s width but you can change it at any time.

ID of the Input: Since it is a WordPress Plugin, I gave preference to “#s” as a default choice which can be changed to whatever you like. Just enter the ID (without the ‘#’) of your desired input element and it’s a go.

Default Image: Sometimes the plugin might not find a relevant image and for that I’ve included a demo image, but you have control over that, too: just replace it with your own sample image in the plugin directory.

The Dynamic Search looks for relevant content intelligently and supplies a dynamic JSON array to the functionality immediately. First it collects all the posts and pages in the WordPress installation that are published and public. Then it searches the images in 3 steps from the content as:

1. Media Uploads
2. “Thumbnail” Custom Field
3. Images in the Post Content

Once it has all the data, it combines the title and respective content of each post/page and searches for the queried item for a comprehensive search experience. Once found, let’s say X number of items—it pushes those X is to a JSON array, which is returned to the JavaScript functionality.

Dynamic vs local functionality

This is a critical topic and I am open for a discussion in the comments section. I personally feel there is no harm giving those a local source if it enhances the experience by many folds. Another reason that I implemented the Local Search was because I found even Google implementing it in Gmail.

Once the user logs in, Gmail sends a request to its server and fetches all the email addresses and names or aliases of all your contacts in the footer which are then used for the To, CC, BCC, and Labels autocomplete fields. What do you say, legitimate?

Implementing FoxyComplete as a YouTube-like search with images

As mentioned above, there is a lot of functionality for developers, too. Above is what we did using YouTube feeds and then parsing them in PHP to give the required results in JSON format. You can learn about those here. Click the below image for a demo of the YouTube Foxycomplete Search.

Another functionality you can make is the YouTube Search Engine with on-click play in modal or overlay. For example, when you search for a video and click it in the autocomplete results, it pops open a modal dialog box or an overlay with the video in it, playing on your website but sourced from YouTube. Nice, isn’t it?

Improving security

Though the WordPress plugin is secure as I used WordPress Nounces, it can be made even secure by using constants in the dynamic version and encryption in the local.

One security measure we used was to check for an Ajax call and then also check for an Ajax call from the same domain as shown below.

//define SAME_DOMAIN to true in the Header of your document.

define('IS_AJAX', isset($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest');
define('DOING_AJAX', true);
if(IS_AJAX && DOING_AJAX && SAME_DOMAIN)
{
//your search logic
}

That’s just one of numerous ways to secure it!

Conclusion

So that was the FoxyComplete that could help you in a lot in your design and development projects in the future. This is Version 1.0 and I shall make sure to continue improving it with your valuable feedback and support.

Let me know what you think in the comments section below and since this is hosted on an environment I can easily and regularly edit, with your super suggestions—lets make it a great free plugin with ultimate user experience at both ends.

Written by Pushpinder Bagga who works as an Interactive Developer with Web Design Australia, Follow him on twitter @tobcreatives.

If you have questions about the plugin or ideas for improvement, share them in the comments!

Creative Font Collection from HVD Fonts – only $47!

Source

The story of usability is a perverse journey from simplicity to complexity. That’s right, from simplicity to complexity—not the other way around.

If you expect a “user-friendly” introduction to usability and that the history of usability is full of well-defined concepts and lean methods, you’re in for a surprise. Usability is a messy, ill-defined, and downright confusing concept. The more you think about it—or practice it—the more confusing it becomes. We learned that the history of usability is a “perverse journey from simplicity to complexity”.

What Is Usability?

Early Roots of Usability

If we go far back in history, Vitruvius (1st century BC) was probably the first person to lay forth systematic and elaborated principles of design. His three core design principles became very influential:

1. Firmitas: The strength and durability of the design;
2. Utilitas: A design’s usefulness and suitability for the needs of its intended users;
3. Venustas: The beauty of the design.

Vitruvius’ work was an inspiration to people like Leonardo da Vinci, who drew the well-known Vitruvian Man (fig. 1 below). By empirically measuring and calculating the proportions of the human body, and emphasising the “utilitas” principle, Vitruvius may be considered the first student of ergonomics and usability.

Figure 1: The Vitruvian Man drawing was created by Leonardo da Vinci circa 1487 based on the work of Vitruvius.

Military Roots

The discipline of usability is also rooted in the discipline called Human Factors, which started as military personnel asked themselves the very morbid question:

“What design do we need to kill more enemies through better matching soldier and weapon? And thus avoid getting killed ourselves.”

Both World War I and World War II fueled research into Human Factors. When designing artillery cannons, for example, usability yielded more precision, greater kills, and shorter training of personnel.

Thus, military designers could extract some very concrete usability metrics. For example:

• How quickly will a new crew member learn how to use the artillery cannon (now that the former crew member is dead)?
• How many rounds per minute (ordnance) is the cannon able to fire with an inexperienced versus an experienced crew?
• How will improving the design of the cannon improve target acquisition (and thus kill more enemies)?
• How does a design improvement decrease soldier fatigue (as a consequence of a lighter cognitive load)?

Figure 2: Photograph of the French 320 mm railway gun Cyclone, taken in Belgium in 1917. The gun required not only trained personnel to fire it, but also trained personnel to drive it.

Figure 3: A 155 mm artillery shell fired by a United States 11th Marine Regiment’s M-198 howitzer. The setup time (and thus usability) is essential as anti-artillery weapons necessitate that the position of the howitzer be changed very quickly after firing.

Recent Roots of Usability

The concept of usability has its more recent and direct origins in the falling prices of computers in the 1980s, when for the first time it was feasible for many employees to have their own personal computer. In the 80s, most computer users had practically no, or only basic, training on operating systems and applications software. However, software design practices continued to implicitly assume knowledgeable and competent users, who would be familiar with technical vocabularies and system architectures, and also possess an aptitude for solving problems arising from computer usage.

Such implicit assumptions rapidly became unacceptable. For the average user, interactive computing became associated with constant frustrations and consequent anxieties. Computers were obviously too hard to use for most users, and often absolutely inpractical. Usability thus became a key goal for the design of any interactive software that would not be used by trained technical computer specialists.

The current understanding of usability is different from the early days in the 1980s. Usability used to be a dominant concept but this changed with research increasingly focused on usage contexts. Usage quality no longer appeared to be a simple issue of how inherently usable an interactive system was, but how well it fitted its context of use.

Usability Evaluation: What’s Good And What’s Bad?

Usability is a contested historical term that is difficult to replace. User experience specialists have to refer to usability, since it is a strongly established concept within the IT landscape. In simplified terms, usability work is about finding out what’s good and what’s bad. However, when we examine the hundreds of usability evaluation methods in use, we do see that different approaches to usability result in differences over the causes of good and poor usability. That may sound complicated but let’s take two different approaches to usability:

1. If you think usability is a feature of an interactive system, your approach to usability may be called essentialist—i.e. poor/good usability resides in the “essense” of the system. You will typically find yourself saying things like “that website is not user-friendly”, “a website or system has poor usability when there is no visibility of system status”, “I can reliably measure which website has the best usability”, etc. This means you think that all causes of user performance are due to technology. In that case, you will typically use system-centered usability inspection methods to identify such causes.
2. On the other hand, if you think usability is a feature of the interaction between user, computer and the context, your approach to usability is contextual—i.e. depending on the context. This means that you think questions of user performance have different causalities, some due to technologies, and others due to some aspect(s) of usage contexts, but most due to interactions between both. Several evaluation and other methods may be needed to identify and relate a nexus of causes. You will often find yourself saying vague things like “that depends…”, “well… this website checkout procedure is great for male, fact-oriented, middle-aged buyers, but not for an impatient teenager doing the purchase on his smartphone sitting in the bus”, etc.

The reason I mention the essentialist/contextual distinction is that anyone involved with usability should—ideally—be able to say “this website/technology/system is good, that one is bad”. After all, isn’t that what your client or boss is paying you to do?

To answer if the usability of a website is good or bad you have to employ a usability method. And your choice of usability method will depend on your approach to usability—whether you admit it or not. Maybe you’ll deny it and say, “I’ve never heard of any essentialist/contextual approaches to usability.” However, that would be like selling French wine without ever having spent time in a French vineyard. You can do it, but at some point your client or boss will start asking questions you can’t answer. Or your decisions will have unexpected side-effects.

So what usability method should you choose to determine “what’s good and what’s bad”?

Analytical And Empirical Evaluation Methods

Usability work can involve a mix of methods and the mix can be guided by high level distinctions between methods, for example the distinction between analytical and empirical evaluation methods.

1. Analytical evaluation methods are based on examination of an interactive system and/or potential interactions with it. You analyse the system or analyse the interaction with the system.
2. Empirical evaluation methods, on the other hand, are based on actual usage data.

Analytical evaluation methods may be system-centred, like Jakob Nielsen’s Heuristic Evaluation or interaction-centred, like the Cognitive Walkthrough method. Design teams use the resources provided by a method (e.g. heuristics) to identify strong and weak elements of a design from a usability perspective.

Three types of analytical evaluation methods:

• Inspection methods tend to focus on the causes of good or poor usability.
• System-centered inspection methods focus solely on software and hardware features regarding attributes that will promote or obstruct usability.
• Interaction-centered methods focus on two or more causal factors (i.e. software features, user characteristics, task demands, or other contextual factors).

Figure 4: Jakob Nielsen’s Heuristic Evaluation is a good example of an analytical evaluation method. Heuristic Evaluation became the most popular user-centered design approach in the 1990s, but has become less prominent with the move away from desktop applications.

Empirical evaluation methods focus on evidence of good or poor usability, i.e. the positive or negative effects of attributes of software, hardware, user capabilities and usage environments. User testing is the principal project-focused method. It uses project-specific resources such as test tasks, users, and also measuring instruments to expose usability problems that can arise in use. Also, empirical experiments can be used to demonstrate superior usability arising from user interface components (e.g. text entry on mobile phones) or to optimise tuning parameters (e.g. timings of animations for windows opening and closing).

Such experiments assume that the test tasks, users and contexts allow generalisation in regards to other users, tasks and contexts. Such assumptions are readily broken, e.g. when users are very young or elderly, or have impaired movement or perception.

How To Balance The Mix: Why Is It Difficult?

Achieving a balanced mix of evaluation methods is not straightforward, and involves more than simply combining analytical and empirical methods. This is because there is more to usability work than simply choosing and using methods.

Evaluation methods are as complete as a Chicken Fajita Kit, which contains very little of what is actually needed to make Chicken Fajitas: no chicken, no onion, no peppers, no cooking oil, etc. Similarly, user testing ‘methods’ miss out equally vital ingredients and project-specific resources such as participant recruitment criteria, screening questionnaires, consent forms, test task selection criteria, test (de)briefing scripts, target thresholds, data analysis methods, or reporting formats.

There is no complete published user testing method that novices can pick up and use ‘as is’. All user testing requires extensive project-specific planning and implementation. Much usability work is about configuring and combining methods for project-specific use.

Figure 5. Chicken Fajita Kit. Copyright Old El Paso. All rights reserved.

The Only Methods Are The Ones That You Complete Yourselves

When planning usability work, it is important to recognise that so-called ‘methods’ are simply loose collections of resources better understood as ‘approaches’. There is much work in getting usability work to work, and as with all knowledge-based work, methods cannot be copied from books and applied without a strong understanding of fundamental underlying concepts. All methods must have unique usage settings that require project-specific resources. For user testing, for example, these include participant recruitment, test procedures and (de-)briefings. There are no universal measures of usability that are relevant to every software development project.

The Position So Far

1. There are fundamental differences on the nature of usability, i.e. it is either an inherent property of interactive systems, or an emergent property of usage. There is no single definitive answer to what usability ‘is’.
2. There are no universal measures of usability and no fixed thresholds above or below which all interactive systems are or are not usable. There are no universal, robust, objective and reliable metrics. All positions here involve hard won expertise, judgement calls, and project-specific resources beyond what all documented evaluation methods provide.
3. Usability work is too complex and project-specific to admit generalised methods. What are called ‘methods’ are more realistically ‘approaches’ that provide loose sets of resources that need to be adapted and configured on a project by project basis.

Readers could reasonably draw the conclusion from the above that usability is an attractive idea in principle that has limited real-world application. However, the reality is that we all continue to experience frustrations when using interactive digital technologies, and even we would say that we find them difficult to use. Even so, frustrating user experiences may not be due to some single abstract construct called ‘usability’, but instead be the result of unique complex interactions between people, technology and usage contexts.

Usability In The Design Room

In well directed design teams, there will not be enough work for a pure usability specialist. This is evidenced by a trend within the last decade of a broadening from usability to user experience expertise. User experience work focuses on both positive and negative value, both during usage and after it. A sole focus on negative aspects of interactive experiences is becoming rarer. Useful measures of usage are extending beyond the mostly cognitive problem measures of 1980s usability to include positive and negative effect, attitudes and values, e.g. fun, trust, and self-affirmation. The coupling between evaluation and design is being improved by user experience specialists with design competences.

Many user experience professionals have also developed specific competences in areas such as brand experience, trust markers, search experience/optimisation, usable security and privacy, game experience, self and identity, and human values. We can see two trends here. The first involves complementing human-centered expertise with strong understandings of specific technologies such as search and security. The second involves a broadening of human-centered expertise to include business competences (e.g. branding) and humanistic psychological approaches (e.g. phenomenology, meaning and value).

As such, a usability person is not a lone judge who makes the call “is this usable?” Instead, the usability proficient person will often be a team player taking on many roles in the product development lifecycle.

Figure 6 A-B. From Solo Specialist to Team Member: User Experience—as opposed to Usability—as an integrated part of design teams. Copyright of leftmost picture: Flickr user ‘Tety’ through the Creative Commons Attribution Share-Alike 2.0 licence

Conclusion: Are You Confused?

This Smashing Magazine article is a digested version of the monstrous 25,000 word encyclopedic introduction to the history of Usability Evaluation at Interaction-Design.org. It’s available in a special version for Smashing readers.

Did this article confuse you more than it informed you? Well, it should! If you want an answer to the question of “what is usability?”, it’s just as complicated as asking “what is beauty?” The more you think about it, the less you feel you know. I don’t believe you will ever find the answer to the question “what is usability?”, but I nevertheless hope you—as I—will continue to ask that very question. And be confused again and again. Confusion is—after all—the mother of wisdom.

The concept of usability is a product of millions of designers trying for decades to describe what they are doing to make technology easier and more pleasant. As such, the concept is immensely complex. It may have started out as a simple concept but the more people who are involved with usability, the more multi-faceted the concept will become. Therefore, the history of usability is a journey from simplicity to complexity. Is that journey worth the effort? Certainly! Anyone who masters usability—and all its facets—has a power position when it comes to designing easy/pleasant/cool/useful/usable/etc. technology. As confusing as that endeavour may be!

(jc) (il)

---

© Mads Soegaard for Smashing Magazine, 2012.

Unfortunately, the vast majority of website designers and operators view the 404 error, which occurs when a page is not found, as a dead end.

This page is often given a simple message that just states merely, “Sorry! There’s nothing here.” With WordPress, however, there absolutely can be something there when a user navigates to a page that is no longer there, has moved, or has been deleted.

The unique setup of pages and templates within the Dashboard allows this page to be as dynamic as any other page within the WordPress ecosystem.

Don’t let a drab and unhelpful 404 page be the end of a user’s journey through your website. Instead, turn it into an opportunity for further reading, redirection to the content a user may have been looking for, or a suggestion of where to go when the website’s navigation offers no obvious answers.

It’s time to create a 404 error page using the WordPress Dashboard

Installing a WordPress theme can be a hodgepodge effort, where some pages are included and others were left out of the template for reasons of expedience or other considerations. The 404 error page seems to be one which is not consistently included in every WordPress theme, and some custom design authors even leave it out of their own, self-designed website interfaces. That means that a good number of users will have to create their own 404 error page before they can add content and redirect users to a site’s best features.

Creating a 404 error page is generally done using FTP to create the initial PHP file that will contain basic theme code. It can then be edited using built-in tools contained within the WordPress Dashboard itself. To create a 404 error page for a theme that simply does not have one at all, open up an FTP client and navigate to the theme’s main directory. This can typically be found by navigating through the following site path:

/public_html/wp-content/themes/YOUR-THEME

Contained within this folder is a list of files that pertains to every custom page and template a theme brings to the table. What might be noticeably missing among this list of templates is a file titled “404.php.” If that’s indeed the case, go ahead open a text editing program. Leave the document blank for now, but save it as “404.php.” Upload it to your theme’s main folder.

Putting content on a 404 error page

WordPress treats this new 404 error page template just like it treats any other page within its ecosystem, meaning it can use the company’s PHP includes and WordPress tags to include other templates, display content, and keep a user engaged. These tags and content can be added using either FTP or the WordPress “Theme Editor” panel available within the software’s Dashboard.

With a traditional FTP client:

1. Keep the self-created (and blank) “404.php” file open.
2. Paste PHP include tags for the header and footer, if relevant.
3. Paste in any WordPress tags that display entries, categories, author information, sidebar content, or anything else that should be included on this new page. Do this between the header and footer PHP include tag.
4. Save the file to the server and test the page’s appearance and functions in a web browser.

Using the WordPress Dashboard:

1. Navigate to the Dashboard homepage.
2. Click the “Appearance” category in the Dashboard’s sidebar.
3. Once this has been expanded, click on the “Theme Editor” link.
4. In the Theme Editor panel that appears, a list of templates will be displayed to the right of a text entry field. Click the “404 Template” link, which references the 404.php file created earlier.
5. Perform any edits to this template using the text editing box displayed within the Theme Editor. The same WordPress tags and PHP include codes can be used in this box.
6. Click “Update File” to save any changes, and then test the page’s look and feel in a web browser.

One of the great advantages of using the WordPress Theme Editor is that it offers users the ability to look up critical functions to a page’s display and usefulness. Users can access a drop-down menu that lists several key WordPress functions and tags and, upon selecting one, click the “Lookup” button. This will take them to the WordPress documentation, explaining what the function is and how to call it.

For the 404 error page, users will at least want to know how to include the header and footer within their 404 page. They may also be interested in content tags and the WordPress sidebar code, depending how they intend to structure the error page and what content they plan to display to users who have arrived at a dead end.

Other sources of template and tag information

It’s important to remember that the WordPress 404 error page is not treated like a typical “page” within the software’s Dashboard. Instead, it’s treated as a traditional template file that can display any dynamic WordPress content assigned to it through the use of variables. This means a 404 page can be easily made to display the latest posts in a blog, or an archival list of months and years. It can also display entry category and tag lists, and author biography, and other content stored within the actual WordPress database itself.

Even the most seasoned theme authors can’t recall every WordPress template tag on command, and so they may want to reference the very helpful WordPress Codex when creating their 404 error page. This resource is free to all users of the software and helps to supplement the “common functions” lookup feature that is included a a drop-down menu on every Template Editor page within the Dashboard.

Of course, it might also be wise to directly copy content from the “index.php” or “page.php” files, filling in with new variables or static content where applicable.

Content to include on a dynamic and functional WordPress 404 error page

The reason WordPress has been so successful in recruiting more than 60 million users to its industry-leading content management software is because it offers the ability to place dynamically-generated content on virtually any page within the WordPress purview. The 404 error page is no different, and this allows it to be constructed in a way that displays real site content rather than just an error message.

Users creating a WordPress 404 error page should be mindful of a few things when determining what a user will see on this veritable “dead end” error notification.

• A user should always be informed that the link they clicked simply does not exist and they’ve ended up at an error page. Even if this new template is designed to include dynamic content form the site’s authors, it’s important to admit the error. This is often because a user will expect to arrive at a certain page (for example, an outdated link to an author biography). If they are instead greeted by a list of categories, with no explanation, they’re just as likely to leave a site entirely as they would be without a 404 page being displayed at all. Admit the error, apologize for it, and then guide them to a new resource.
• A site’s best content is just itching to be displayed on a 404 error page. Consider all of the times you’ve made a mistake that annoyed a friend or family member: Almost certainly, your goal was to deflect this mistake by doing something impressive immediately afterward. A website should do the same thing, generating a 404 page that admits the error and the reminds a reader that they’re here for great content. It should then display a sort of “greatest hits” to this reader. It’s a great way to almost lose them, and then pull them right back in for a few more minutes of active reading and browsing.
• Standard site headers and footers should always be included on a 404 error page, as consistency is the key to a great and intuitive web design. There’s no reason to give an entirely new look and structure to the 404 page displayed to users. In fact, this page is naturally a time of great uncertainty for the reader who encounters it. Adding to that uncertainty with a non-standard design will send them elsewhere very quickly.
• If it’s appropriate, add a little humor to the page. Apologizing and redirecting is great, but a little self-deprecating humor makes a page more humanized and approachable. Those are the two keys to success that every WordPress developer should be aiming for, anyway.

Avoiding the 404 error in the first place: the importance of permalinks and double-checking

Even a well-designed 404 error page should be a last resort for the average WordPress site owner, as it’s really not good to subject users to this type of dead-end destination that begs them to turn around and read one more article. In the interest of making a beautiful, custom-designed 404 page a rare occurrence, adhere to some basic practices of web development.

First and foremost, establish a site’s permalink structure from the first day of its operation. This means logging into the WordPress Dashboard, clicking the “Settings” heading in the sidebar, and click on “Permalinks.” Several standard permalink structure options will be presented, or a user can custom develop their own structure. Either way, pick something that is easy to use and will stick with the site for a long time. One small change will make every single entry page, or custom-created user page, the site controls.

Secondly, always double-check links which are hard-coded into blog entries and any pages generated by the WordPress software. The most common cause of a 404 error is a simple typo or an erroneously typed link somewhere in the site’s content. When writing new site content, copy and paste the link instead of typing it from memory and the problem will be solved on its own.

Finally, try not to have a constantly rotating list of pages that are frequently changed and deleted. The ease with which a user can create a new page in the “Pages” control panel almost makes it seem as if these pages are disposable, but changing their URL, name, or deleting them entirely will send users to an error page. Remember that every page you create might be bookmarked, navigated to by memory, or linked to by old entries. This sets readers up for failure over time if page are constantly undergoing permalink changes and deletions.

Enjoy better traffic and long on-site visitations with your 404 error page

A customized WordPress 404 error page is the key to retaining visitors for a longer duration and improving your WordPress site’s performance in web searches and traffic-tracking tools like Google Analytics. These longer visits count for something: They increase a site’s authority and indicate to search engines and ranking websites that the site’s content is of a higher value than its competitors’ content.

Above and beyond that, though, a custom 404 error page is easy to create using either the FTP upload method or the included Theme Editor in the WordPress Dashboard. There’s really no reason not to create one; the enhanced usability it gives to your WordPress website will benefit users’ peace of mind as much as it benefits a site’s search engine performance, and it’s a great excuse to remind even the most loyal (and misdirected) reader of the site’s best content and publications over the course of its time on the internet.

Do you use a custom 404 page on your WordPress site? What have you found works best for content on a 404 page? Let us know in the comments!

Vladislav Davidzon is the principal of a US-based online marketing consultancy, developing integrative solutions through high impact search engine optimized WordPress websites for socially responsible customers of all sizes around the world. For more details visit Vladislav Davidzon & Associates.

Creative Font Collection from HVD Fonts – only $47!

Source

Editor’s Note: This post is the seventh in the new Smashing Daily series on Smashing Magazine, where we highlight items to help you stay on the top of what’s going on in the Web industry. Vasilis van Gemert will carefully pick the most interesting discussions, tools, techniques and articles that have been published recently and present them in a nice compact overview.

In this edition of The Smashing Daily, you will find an answer to the question of why reinventing the wheel is a good thing, why you should make a mobile friendly website first, how to make that website, how to serve a print style sheet and you’ll get an excellent lesson in out-of-the-box thinking and innovation. Doesn’t that sound interesting? There’s much more in here, so hope you’ll like it!

“Web First for Mobile”
Steve Souders argues that you should first optimize your website for mobile. When you’re done you can then start thinking about a native app. He came to this conclusion after seeing a few talks on Mobilism. You should read this article.

“In defense of reinventing wheels”
A few weeks ago I needed a little script to enable simple left and right swipe gestures on touch devices. People sent me links to amazing libraries that emulate all the possible gestures out there—but I didn’t want all possible gestures, I just needed one. This is a common issue and Lea Verou explains it in detail. You should definitely read it.

“Content Everywhere with Lyza Gardner”
I have to admit that I haven’t listened to this podcast (to be honest, I never listen to any podcasts, not even my own, it’s just not my thing… I’d rather read) but looking at the Show Notes and Links is enough to link to it. It’s a show by Jen Simmons and Lyza Danger Gardner about a lot of great stuff that’s happening right now with content on the (mobile) Web. You should probably listen to it (and definitely click throught the links).

“5 years later: print CSS still sucks”
You might think that linking to a separate print style sheet would be a good idea from a performance point of view. Stoyan Stefanov did a little bit of research and yes, you guessed right, linking to a separate print style sheet is very bad for performance. This doesn’t mean you shouldn’t create a print style sheet (you just shouldn’t link to it separately).

“Mobile First Design: Why It’s Great and Why It Sucks”
More and more designers start looking at websites from a mobile-first perspective and there are many good reasons to do so. Joshua Johnson explores these reasons and he looks at the cons to this approach (which are mostly personal issues, like the fact that he isn’t used to working this way). A good article which clearly shows that we have to rethink our workflows.

“Augmented Paper”
Here’s an interesting article in which Matt Gemmell tries to quantify what constitutes an enticing interface. He looks at iOs, Android and Window Phone (which he describes as finding yourself living inside an infographic) and looks at different apps on iOs. A very interesting read that explores the many different approaches to interfaces.

“First thing you should do to optimize your desktop website for mobile”
Jason Grigsby argues that the most important thing you can do if you want to optimize your website for mobile is to focus on performance first. Once performance is good you can then start focusing on things like mediaqueries (but only then).

“TTMMHTM: Cardboard arcade, the power of music, Book tank, Book about Ada and inventing on principles”
Do you need more to read? Here’s the ever inspiring Things That Made Me Happy This Morning by Christian Heilmann, with some beautiful, amazing and fantastic links.

Last Click

“Dr. Reggie Watts on innovation and out of the box thinking”
Definitely: Dr. Reggie Watts is the new Emperor of Marketing Mullshit Bingo. In this presentation he proposes some new, revealing insights on innovation and out of the box thinking in a new world of challenges for the organizational production funnel in business value environments of seemingly unrealistic, concrete demands from new, experienced entrepreneurs. Exactly (-:

Previous issues

You might be interested in the previous issues of Smashing Daily:

• Smashing Daily #6 (22.05)
  Navigation Design Patterns, TV’s And 1337
• Smashing Daily #5 (21.05)
  Strict Mode, Boring CSS And A Self Portrait
• Smashing Daily #4 (19.05)
  Fonts, CSS And Modern Web Design
• Smashing Daily #3 (18.05)
  Typography, eBooks And Decahedrons
• Smashing Daily #2 (17.05)
  Keyboard Navigation, Responsive Workflow And Goats
• Smashing Daily #1 (16.05)
  Mobile Device Lab, Browsers and Animated GIFs.

(jvb)

---

© Vasilis van Gemert for Smashing Magazine, 2012.

At our company, we process a lot of requests on the leading gift cards and coupons websites in the world. The senior developers had a meeting in late October to discuss working on a solution to replicate the MySQL functions of AES_ENCRYPT and AES_DECRYPT in the language of PHP. This article centers on what was produced by senior developer Derek Woods and how to use it in your own applications.

Security should be at the top of every developer’s mind when building an application that could hold sensitive data. We wanted to replicate MySQL’s functions because a lot of our data is already AES-encrypted in our database, and if you’re like us, you probably have that as well.

Why Does Encryption Matter?

We will begin by examining why security and encryption matter at all levels of an application. Every application, no matter how large or small, needs some form of security and encryption. Any user data you have is extremely valuable to potential hackers and should be protected. Basic encryption should be used when your application stores a password or some other form of identifying information.

Different levels of sensitive data require different encryption algorithms. Knowing which level to use can be determined by answering the basic question, “Will I ever need access to the original data after it has been encrypted?” When storing a user’s password, using a heavily salted MD5 hash and storing that in the database is sufficient; then, you would use the same MD5 hashing on the input and compare the result from the database. When storing other sensitive data that will need to be returned to its original input, you would not be able to use a one-way hashing algorithm such as MD5; you would need a two-way encryption scheme to ensure that the original data can be returned after it’s been encrypted.

Encryption is only as powerful as the key used to protect it. Imagine that an attacker breaches your firewall and has an exact clone of your database; without the key, breaking the encryption that protects the sensitive data would be nearly impossible. Keeping the key in a safe place should always be priority number one. Many people use an ini file that’s read at runtime and that is not publicly accessible within the scope of the Web server. If your application requires two-way encryption, there are industry standards for protecting such data, one being AES encryption.

What Is AES Encryption?

AES, which stands for Advanced Encryption Standard, was developed by Joan Daemen and Vincent Rijmen. They named their cipher, Rijndael, after a play on their two names. AES was announced as the winner of a five-year competition conducted by the National Institute of Standards and Technology (NIST) on 26 November 2001.

AES is a two-way encryption and decryption mechanism that provides a layer of security for sensitive data while still allowing the original data to be retrieved. To do this, it uses an encryption key that is used as a seed in the AES algorithm. As long as the key remains the same, the original data can be decrypted. This is necessary if your sensitive data needs to be returned to its original state.

How Does It Work?

AES uses a complex mathematical algorithm, which we will explore later, to combine two main concepts: confusion and diffusion. Confusion is a process that hides the relationship between the original data and the encrypted result. A classic example of this is the Caesar Cipher, which applies a simple shift of letters so that A becomes C, B becomes D, etc. Diffusion is a process that shifts, adjusts or otherwise alters the data in complex ways. This can be done using bit-shifts, replacements, additions, matrix manipulations and more. A combination of these two methods provides the layer of security that AES needs in order to give us a secure algorithm for our data.

In order to be bi-directional, the confusion and diffusion process is managed by the secret key that we provide to AES. Running the algorithm in one direction with a key and data will output an obfuscated string, thus encrypting the data. By passing that string back into the algorithm with the same key, running the algorithm in reverse will output the original data. Instead of attempting to keep the algorithm secret, the AES algorithm relies on complete key secrecy. According to its cryptographic storage guidelines, OWASP recommends rotating the key every one to three years. The guidelines also go through methods of rotating AES keys.

PHP Mcrypt Specifics

PHP provides AES implementation through the Mcrypt extension, which gives us a number of other ciphers as well. In addition to the algorithm itself, Mcrypt provides multiple modes that alter the security level of the AES algorithm to make it more secure. The two definitions that we will need to use in our PHP functions are MCRYPT_RIJNDAEL_256 and MCRYPT_MODE_ECB. Rijndael 256 is the encryption cipher that we will use for our AES encryption. Additionally, the code uses an “Electronic Code Book” that segments the data into blocks and encrypts them separately. Alternative and more secure modes are available, but MySQL uses ECB by default, so we will be crafting our PHP implementation around that.

Why Should You Avoid AES In MySQL?

Using MySQL’s AES encryption and decryption functions is very simple. Setting up requires less work, and it is generally far easier to understand. Apart from the obvious benefit of simplicity, there are three main reasons why PHP’s Mcrypt is superior to MySQL’s AES functions:

1. MySQL needs a database link between the application and database in order for encryption and decryption to occur. This could lead to unnecessary scalability issues and fatal errors if the database has internal failures, thus rendering your application unusable.
2. PHP can do the same MySQL decryption and encryption with some effort but without a database connection, which improves the application’s speed and efficiency.
3. MySQL often logs transactions, so if the database’s server has been compromised, then the log file would produce both the encryption key and the original value.

MySQL AES Key Modification

Out of the box, PHP’s Mcrypt functions unfortunately do not provide encrypted strings that match those of MySQL. There are a few reasons for this, but the root cause of the difference is the way that MySQL treats both the key and the input. To understand the causes, we have to delve into MySQL’s default AES encryption algorithm. The code segments presented below have been tested up to the latest version of MySQL, but MySQL could possibly alter their encryption scheme. The first problem we encounter is that MySQL will break up our secret key into 16-byte blocks and XOR the characters together from left to right. XOR is an exclusive disjunction, and if the two bytes are the same, then the output is 0; if they are different, then the output is 1. Additionally, it begins with a 16-byte block of null characters, so if we pass in a key of fewer than 16 bytes, then the rest of the key will contain null characters.

Say we have a 34-character key: 123456789abcdefghijklmnopqrstuvwxy. MySQL will start with the first 16 characters.

new_key = 123456789abcdefg

The second step taken is to XOR (⊕) the next 16 characters in the value in new_key with the first 16.

new_key = new_key ^ hijklmnopqrstuvw
new_key = 123456789abcdefg ^ hijklmnopqrstuvw
new_key = Y[Y_Y[YWI

Finally, the two remaining characters will be XOR’d starting from the left.

new_key = new_key ^ xy
new_key =  Y[Y_Y[YWI ^ xy
new_key = !"Y_Y[YWI

This is, of course, drastically different from our original key, so if this process does not take place, then the return value from the decrypt/encrypt functions will be incorrect.

Key Padding

The second major difference between Mcrypt PHP and MySQL is that the length of the Mcrypt value must have padding to ensure it is a multiple of 16 bytes. There are numerous ways to do this, but the standard is to pad the key with the byte value equal to the number of bytes left over. So, if our value is 34 characters, then we would pad with a byte value of 14.

To calculate this, we use the following formula:

$pad_value = 16-(strlen($value) % 16);

Using our 34-character example, we would end up with this:

$pad_value = 16-(strlen("123456789abcdefghijklmnopqrstuvwxy") % 16);
$pad_value = 16-(34 % 16);
$pad_value = 16-(2);
$pad_value = 14;

MySQL Key Function

In the previous section, we dove into the issues surrounding the MySQL key used to encrypt and decrypt. Below is the function that’s used in both our encryption and decryption functions.

function mysql_aes_key($key)
{
	$new_key = str_repeat(chr(0), 16);
	for($i=0,$len=strlen($key);$i<$len;$i++)
	{
		$new_key[$i%16] = $new_key[$i%16] ^ $key[$i];
	}
	return $new_key;
}

First, we instantiate our key value with 16 null characters. Then we iterate through each character in the key and XOR it with the current position in new_key. Since we’re moving from left to right and using modulus 16, we will always be XOR’ing the correct characters together. This function changes our secret key to the MySQL standard and is the first step in achieving interoperability between PHP and MySQL.

Value Transformation

We run into the last caveat when we pull the data from MySQL. For the data encrypted with AES, the padded values that we added before encryption will remain tacked onto the end after we decrypt. In general, this would go unnoticed if we were only fetching the data in order to display it; but if we’re using any of basic string functions on the decrypted data, such as strlen, then the results will be incorrect. There are a couple ways to handle this, and we will be removing all characters with a byte position of 0 through 16 from the right of our value since they are the only characters used in our padding algorithm.

The code below will handle the transformation.

$decrypted_value = rtrim($decrypted_value, "\0..\16");

Throwing all the concepts together, we have a few main points:

1. We have to transform our AES key to MySQL’s standards;
2. We have to pad the value that we want to encrypt if it’s not a multiple of 16 bytes in size;
3. We have to strip off the padded values after we decrypt the encrypted value from MySQL.

It’s advantageous to segment these concepts into components that can be reused throughout the project and in other areas that use AES encryption. The following two functions are the end result and perform the encryption and decryption before sending the data to MySQL for storage.

MySQL AES Encryption

function aes_encrypt($val)
{
	$key = mysql_aes_key('Ralf_S_Engelschall__trainofthoughts');
	$pad_value = 16-(strlen($val) % 16);
	$val = str_pad($val, (16*(floor(strlen($val) / 16)+1)), chr($pad_value));
	return mcrypt_encrypt(MCRYPT_RIJNDAEL_128, $key, $val, MCRYPT_MODE_ECB, mcrypt_create_iv( mcrypt_get_iv_size(MCRYPT_RIJNDAEL_128, MCRYPT_MODE_ECB), MCRYPT_DEV_URANDOM));
}

The first line is where we get the MySQL encoded key using the previously defined mysql_aes_key function. We are not using our real key in this article, but are instead paying homage to one of the creators of OpenSSL (among other technologies that he’s been involved in). The next line determines the character value with which to pad our data. The last two lines perform the actual padding of our data and call the mcrypt_encrypt function with the appropriate key and value. The return of this function will be the encrypted value that can be sent to MySQL for storage — or used anywhere else that requires encrypted data.

MySQL AES Decryption

function aes_decrypt($val)
{
	$key = mysql_aes_key('Ralf_S_Engelschall__trainofthoughts');
	$val = mcrypt_decrypt(MCRYPT_RIJNDAEL_128, $key, $val, MCRYPT_MODE_ECB, mcrypt_create_iv( mcrypt_get_iv_size(MCRYPT_RIJNDAEL_128, MCRYPT_MODE_ECB), MCRYPT_DEV_URANDOM));
	return rtrim($val, "\0..\16");
}

The first line of the decrypt function again generates the MySQL version of our secret key using mysql_aes_key. We then pass that key, along with the encrypted data, to the mcrypt_decrypt function. The final line returns the original data after stripping away any padded characters that we might have used in the encryption process.

See It In Action

To show that the encryption and decryption schemes here do in fact work, we must exercise both encryption and decryption functions in PHP and MySQL and compare the results. In this example, we have integrated the aes_encrypt/aes_decrypt and key function into a CakePHP model, and we are using Cake to run the database queries for MySQL. You can replace the CakePHP functions with mysql_query to obtain the results outside of Cake. In the first group, we are encoding the same data with the same key in both PHP and MySQL. We then base64_encode the result and print the data. The second group runs the MySQL encrypted data through PHP decrypt, and vice versa for the PHP encrypted data. We’re also outputting the result. The final block guarantees that the inputs and outputs are identical.

define('MY_KEY','Ralf_S_Engelschall__trainofthoughts');

// Group 1
$a = $this->User->aes_encrypt('test');
echo base64_encode($a).'';

$result = $this->User->query("SELECT AES_ENCRYPT('test', '".MY_KEY."') AS enc");
$b = $result[0][0]['enc'];
echo base64_encode($b).'';

// Group 2
$result = $this->User->query("SELECT AES_DECRYPT('".$a."', '".MY_KEY."') AS decc");
$c = $result[0][0]['decc'];
echo $c."
";

$d = $this->User->aes_decrypt($b);
echo $d."
";

// Comparison
var_dump($a===$b);
var_dump($c===$d);

Output

The snippet below is the output when you run the PHP commands listed above.

L8534Dj1sH6IRFrUXXBkkA==
L8534Dj1sH6IRFrUXXBkkA==
test
test
bool(true) bool(true)

Final Thoughts

AES encryption can be a bit painful if you are not familiar with the specifics of the algorithm or familiar with any differences between implementations that you might have to work with in your various libraries and software packages. As you can see, it is indeed possible to use native PHP functions to handle encryption and decryption and to actually make it work seamlessly with any legacy MySQL-only encrypted data that your application might have. These methods should be used regardless so that you can use MySQL to decrypt data if a scenario arises in which that is the only option.

(al)

---

© Chad Smith & Derek Woods for Smashing Magazine, 2012.

It’s not just me; I’ve asked around: You will probably be your own very worst client. Ever.

Every trade has a similar story to the point where it’s almost cliché: the carpenter’s house is falling apart, the mechanic’s car is a rattling jalopy, and the barber is a balding chatty guy who’s always forcing loved ones into drawn-out awkward small-talk. It only makes sense then that the web designer’s site would be mired in all sorts of miserable problems.

Working on your own site is incredibly hard! You’ve just worked all day on other people’s websites, now you’re going to do yours, on your own time — for free. Ugh! Add to this the pressure of doing your “best work”; you start thinking of incredible ideas and scope-creeping the possibility of it being doable into oblivion.

We’re web designers — this medium is our message, but it’s also where most of our amazing community spends a lot of free time. The pressure to do something outstanding can be pretty crushing. All too often we psych ourselves out, or produce something that doesn’t satisfy.

You’re not alone in this struggle.

I recently refreshed my own personal site into its tenth iteration. That’s right. I’ve done this ten times. The previous nine times have been the dismal and painful worst-case experience I’m talking about. I have been a terrible client. I’ve been demanding, unreasonable, and had vague goals. I never gave this problem much thought until this recent work. These are all symptoms of being unfocused, and not looking at the problem objectively.

If this is something you have gone though, or are in the midst of now it’s time to approach this project different than you would a client’s site. For version 10 for ArleyM.com I decided not to compromise anymore. I invented a few ground rules for myself right from step one. This made the project a joy to work on.

Every client is different (especially when the client is you!) Consider reworking these, or making your own rules to fit with your project:

1. Have fun with it

Self explanatory: if I’m not enjoying working on it, I won’t enjoy the end product, and I’ll never update it. This is my free time. I need a personal project to be fun; this can’t be just-another website. I wasn’t working to a goal or deadline, so I had a freedom to make this rule: the instant this work becomes a drudgery I will go and do something else. I’ll come back to this when I’m feeling inspired and pumped about it again.

2. Break your own rules

This goes hand-in-hand with step one. At work I keep best-practices in mind: write clean semantic code, and make a professional product worthy of our client’s money. I relate following rules to work, which isn’t always fun. At home I shouldn’t hold myself to these restrictions. Browser hacks? Sure! Messy code? OK! Doing crazy impractical things? Yup! I’m the boss of this website, so I will break rules if I feel like it.

3. Do something new

If you’re like me there are a few experiments and techniques that you’ve been itching to try. I like to think of my personal site as a production-level sandbox. Your take on some new technique, or trying out something that’s never been done before will make your site fun, and in the end will score you some traffic from your peers. I put a lot of time and thought into different things I wanted to try for my own site. I wrote about ten things I did on my front page on this post. The bonus to this is that it will stretch you and make you better for client projects too.

4. Be simple

The tendency is to over complicate things in the name of awesomeness. Keep in mind that simple olde-timey principle: Release Early, Release Often. You can iterate and add to your site – this isn’t print, you’re not committing this work for posterity. Think about specific problems on your current site that you’re trying to solve, and solve those. Your site doesn’t have to be everything to everyone when it launches. This sound familiar? We create requirements and goals with clients too! There is beauty in simplicity.

5. Go easy on inspiration

With so many amazing galleries out there like Dribbble, Awwwards, Best Whatever, etc. it’s way too easy to get inspiration overload. I actually usually find inspiration counter productive. Sometimes I’ll see work so great that I begin to feel like “it’s all been done”, or “it’s being done better than I can ever achieve”, or some other anti-inspiring counter productive nonsense. For me, inspiration is good to get thinking along the lines of a certain feel or aesthetic that a client is after – but for a personal project I already know what I like, and I usually have a good idea of how I want the site to look, feel and work. Force yourself to close all of those tabs, and get your head down.

These rules aren’t for everyone, but the spirit of them may be worth considering. I know I’m a “Production” guy, but it’s important to remember that for my own site I’m also the Account Manager, Project Manager, Content Coordinator, and client! For any work I ever do for myself in the future I will first write out a set of constraints like this.

Getting started

The first step is key. Have a reasonable to-do list. “ArleyM.com redesign” sat in my Gmail task list as a massive, daunting item for a very long time. Do you have a two word item on your list that represents an incredible amount of time and effort? That’s a terribly unmotivating starting point as I found out. Break that gigantic thing down into actionable steps, preferably tasks that can be done in less than an hour. Once you start making headway on a few of list items, creativity begins to snowball and the work becomes easy.

Keep going

The bad news is you’re never really done working on your site. Think of it as something continually in a state of progress. Regardless of whether you’re a terrible client to yourself, or an amazing one – you will always be your most important client, and as such you deserve regular and consistent attention.

I try to make time every week to look at polishing some detail, or writing blog posts, or simply getting involved in the conversation elsewhere online. My buddy Andy Patrick is really good at keeping his site fresh. His recent personal site redesign got some attention in online galleries, and he’s had a steady respectable amount of traffic. For many people this is the very definition of success, and a site that has reached the goal – but Andy is still tweaking pixels and details. This tiny, but regular attention will keep your site from transforming into that giant unkempt mess that you started with. Don’t be that designer who is constantly scrapping and rebuilding from scratch (trust me, I did it for years!), keep your project alive and evolving with consistent love. Andy’s approach has inspired me, and I have a list of the next three phases for upgrading my site over time.

Are you pumped? Ready to rock this thing now? My last bit of advice is to leave the computer, grab a pencil and pad and go somewhere far away from glowing screens and broadband access. Let the creativity flow and come back with a plan.

What are some barriers you’re creating that are stopping you from doing great work for yourself?

Today’s post is by Arley McBlain, a front end developer in Burlington, Ontario at Thrillworks. He has a passion for coding outside-the-box and creating unique web experiences. You can follow him on Twitter as @ArleyM.

Creative Font Collection from HVD Fonts – only $47!

Source

What is it that makes a typeface into a text font, instead of a font for larger sizes? The answer differs slightly, depending on whether one aims for print or Web-based environments.

Nevertheless, there are certain features that most good text faces have in common. Familiarity with these helps to select the right fonts for a given project. This article presents a few criteria to help the process along.

Some of today’s most successful typefaces were designed to excel in very specific areas of use: Frutiger grew out of airport signage, Georgia and Verdana were among the first mass-market fonts created for on screen reading, FF Meta was conceived as a telephone book face, and even the Stalwart Times New Roman was tailored for the pages of the London Newspaper The Times. Many typefaces are also often fine-tuned for using in certain sizes.

It should be noted that in this article, when “text” is mentioned, it is in discussion of body text, or running text (in other words, text at a similar size to what you are probably reading right now, rather than much larger sized words).

Features Of A Good Text Typeface

The features outlined in this article are those that type designers keep in mind while developing new typefaces. It’s important to realize that these aspects of typeface design are different from the text treatment a graphic designer employs while laying out a book page or website—no matter what a typeface’s inherent rhythm and niceties are, setting a text is still something that must be done with great care in respect to readability. There are problems that good fonts themselves cannot solve—whether or not a text sings on the page or screen depends on factors like the width of the column, the amount of space between each line, the contrast between the foreground/background and a number of other factors.

Above, Bembo over the years: this typeface was a favorite of many book designers throughout the 20th century. At the top of the image is a scan of the original Bembo typeface, printed with letterpress. The digital version of the typeface—Bembo, seen in the middle, is too light for ideal text in print. A newer digitization was published in 2002—Bembo Book, seen at the bottom. This font is much darker, and is a better representation of the original Bembo idea. However, the middle version is still very elegant, and may still be used well in sub-headlines.

Every typeface has its own inherent rhythm, created by the designer who made the font. With typefaces that are intended for use in body text, it is primarily this rhythm that will make the typeface readable. But there are additional factors that go into the making of a good text face: the space between the letters, the degree of contrast in the letters’ strokes, as well as the x-height and relative size of the whitespace inside of the letters. Not every typeface that works well in text will apply all of these factors in the same way, but all good ones will have many of these features in common.

1. Stroke Contrast

When it comes to typefaces, the term “monolinear” is used to describe letters that appear to be designed with a consistent stroke thickness. Monolinear typefaces are low-contrast typefaces. Stroke contrast can be a helpful feature in small text sizes, but it is not paramount that a text face appears to be monolinear. Indeed, many newspapers employ high-contrast fonts; the question that must be considered is just how thick the thin strokes in high-contrast typefaces are.

The images in this section show different ends of the contrast spectrum: the Cycles types shown above are serifed, with a good deal of contrast. Sumner Stone’s Cycles typeface is an excellent choice for book design as its letter forms combine clarity with a rather high degree of stroke contrast and an almost timeless appearance. Five separate “versions” of Cycles are used in the above image; each block of text is set in its own optically-sized font.

Below, Avenir Next—also a great text face—is from another style of letter, and has very little contrast. I wouldn’t split good typefaces up into good contrast and bad contrast groups. Rather, some typefaces have a degree of contrast—be it too high or too low—that makes them less suitable for use in text. There is no definite rule on how much or how little contrast impacts a text face’s legibility. However, it is clear that both no contrast and excessive contrast can have adverse effects.

Geometric sans serif typefaces often appear to be monolinear stokes; their letters seem not to have any stroke contrast. In order to achieve this effect to the max, type designers have always made slight optical corrections. To look monolinear, a geometric sans needs some degree of thinning. In the image above, Planeta (left) is compared with Avenir Next (right). Both typefaces are more recent additions to the geometric sans category than stalwart faces (like Futura), or classic display designs (like ITC Avant Garde Gothic). Planeta has no visible stroke contrast, which must be a conscious decision on the part of its designer. While this does give it a unique style, it makes the face less suitable for text than Avenir Next, which is actually not as monolinear as it appears at first glance.

2. Optical Sizes

The Garamond Premier typeface family features different versions of each font. These variants are tailored for use in a certain size range. Above, the Display font (left) is compared with the Caption font (right). The Display font is optimized for texts that will appear in very large point sizes, while the Caption font has been optimized for very small text.

In her book Thinking with Type, Ellen Lupton writes:

“A type family with optical sizes has different styles for different sizes of output. The graphic designer selects a style based on context. Optical sizes designed for headlines or display tend to have delicate, lyrical forms, while styles created for text and captions are built with heavier strokes.”

The intended size of a text should be considered when selecting the typeface: is the typeface you want to use appropriate for the size in which you need to set it? Does the family include optical sizes (that is, different versions of the typeface that are tailored specifically for use at different sizes)? As with each of the factors mentioned in this article, the size at which a font is set can make or break your text.

In many ways, it is easiest to see the qualities necessary for good text faces by comparing potential selections with “display” faces. Like the term “text,” “display” refers to the size at which a specific font may best be used. In print media, as well as in many screen and mobile-based applications, the term “display” is often analogous with “headlines.” If a typeface that you are considering looks more like something that you might like to use for a headline, it won’t be the best choice for body text.

In the comparison image below, the Garamond Premier Display font has a tighter rhythm than the Caption font—not as much space is necessary between letters when they are set in large point sizes. Why should one consider type families with optical sizes, anyway? Well, as users bump up the point size of digital fonts, the space between letters increases in equal proportion. This inter-letter space slowly becomes too large, and makes a text feel like it is breaking apart. When a proper text font is set large, it may require some tighter tracking. Typeface families that offer optically-sized variants of their styles play a helpful role here.

In the image above, the first line of text—“Stanley Morison”—is set in the Garamond Premier Display font, while the lines of text underneath it are set in Garamond Premier Caption. Each font is balanced for its size, and they also harmonize well with one another. In another image (below), these fonts have been switched: the headline is now set in the Garamond Premier Caption font, and the text in the Garamond Premier Display. The letters in the Caption face look too clumsy when they are set so large, while the Display fonts’ letters appear uncomfortably thin in a “text” setting.

The amount of stroke contrast visible in caption-sized fonts is much lower than in display-sized fonts. If the Garamond Premier Display font (from the above image) was rendered in a smaller point size, its thin strokes would begin to break apart, making the text unreadable. But this would not occur with the Caption version.

Garamond Premier Caption can robustly set real text, even in poor printing conditions. How well a font will render in small sizes on screen depends on the operating system and applications in question. Font formats themselves also play a role; in certain environments, TrueType fonts with “hinting” information may vastly improve on screen display (see the “Hinting” section at the end of this article).

3. x-Height

Garamond Premier’s Display face (above left) is shown next to the Caption face (above right). Both fonts are set at the same point size. The Caption face features a much higher x-height than the Display font.

Many successful text faces feature high x-heights; this means that the ratio of the central vertical area of lowercase letters—the height of the letter x, for instance—is large when compared to the length of the ascenders and descenders. Depending on its design, a text face may have a low x-height and still be quite legible. But the benefit of incorporating a large x-height in a design is that it maximizes the area of primary activity.

A high x-height may also prevent some letters, like the a or the s, from appearing to become too dark; these two letters have three horizontal strokes inside the x-height space, which is a very small area in text sizes. In order for letters to maintain clarity and understandability, they must have a consistent rhythm, as well as include large, open forms.

4. The Spaces Inside of Letters

The images below illustrate just a few of the intra-letter spacing elements that should be understood and considered when choosing which typeface to choose for your body text. In order for the white spaces inside of letters to remain visible in small sizes, it is necessary for their counterforms to have a certain minimum mass, proportionally.

Counters

The image above shows text set in two members of the ITC Bodoni family: ITC Bodoni Seventytwo and ITC Bodoni Six typefaces. In the first line, “Randgloves” is set in a size mastered for 72pt display (ITC Bodoni Seventytwo), while “and jam” is in the Caption size (ITC Bodoni Six). These words are reversed in the second line. Note how the enclosed white space in the top portion of the e changes between the display and text optical sizes.

Apertures

“Apertures” are the gateways that whitespaces use to move in and out of the counterforms of a typeface’s letter. The above image highlights the wide apertures in four letters from Erik Spiekermann’s FF Meta typeface. These allow for the typeface’s letterforms to feel more open. In certain sizes and settings, wide apertures—and the large counterforms that are their result—will make a text more readable.

The top line of the image above is set in Helvetica, and the bottom line in Frutiger. While the counterforms inside the letters of these two typefaces are similar in size, Helvetica’s apertures are much smaller. Because of this, white spaces inside of Helvetica’s letters and between Helvetica’s letters are much more closed off from each other than in a typeface with more open counters—like Frutiger.

Other counterforms and problematic letters worth remembering include the c; if the apertures of a, e, s are very open, the c should follow this same route. Then there are lowercase letters like a, e, g, s that often have rather complex shapes—specifically, they each feature several horizontal strokes inside a small amount of vertical space. How do their forms relate to one another? How large is the typeface’s x-height? Do the ascenders and descenders have enough room, particularly f and g? Do the counterforms inside of roundish letters (e.g., b, d, p, q, o) have the same optical size and color as those inside of straight-sided letters like, h, n, m, and u? How different from one another are the forms of the capital I, the lowercase i and l, and the figure 1? Can the 3 and the 8 be quickly differentiated from each other? How about the 5 and the 6?

5. Kerning

In the sample above, kerning has been deactivated for the second line. The gaps between the letters T y and V o are too large when compared with the amount of space between the other letters in the text. The typeface used in the image is Carter Sans.

Despite the popular misuse of the term in graphic design circles, “kerning” does not refer to the spacing values to the left and right of the letters in a font. Rather, fonts contain a list of kerning pairs to improve the spacing between the most troubling lettering combinations. The importance of kerning in a font is the role it may play in maintaining an optimal rhythm. Just as kerning describes something much more specific than a typeface’s overall spacing—or the tracking that a graphic designer might apply to a text—kerning is not the rhythm of a typeface itself, but an element that may strengthen a typeface’s already existing rhythm. Not every typeface design requires kerning, and there are typefaces on the market that indeed may have too many kerning pairs—a sign that the basic letter spacing in the font could have been too faulty in the beginning.

6. Consistent Rhythm Along the Line

In the image above, compare the spaces between the letters of the Helvetica typeface (first row) with Frutiger’s (second row). Frutiger is a more humanist design, featuring a slight diagonal axis in its letters; many of them look similar to Helvetica’s, at least at face value. However, the space between Helvetica’s letters is much tighter.

While most of the images in this article feature typeface families that include Optical Size variants, many commonly used typefaces on the market today do not offer these options. This is why it is helpful to be able to identify text typefaces based on their features, rather than just on their names in the font menu. As mentioned earlier, it is primarily the typeface’s rhythm that dictates the readability of a block of text.

Take Frutiger and Helvetica, which are both commonly used in text, especially for corporate communication—Neue Helvetica is even the UI typeface in iOS and MacOS X 10.7. Yet, despite its popularity, Helvetica is not very effective as a text typeface; its rhythm is too tight. By rhythm, I’m not referring to tracking—or any other feature that a designer can employ when typesetting—but the natural flow of space between letters, and within them as well. Frutiger is a much more open typeface—the spaces between its letters are closer in size to the white spaces inside of the letters than in the case of Helvetica. Like all good text typefaces, Frutiger has an even rhythm—space weaves in and out of the letters easily.

7. Caveat: Signage Faces

To round off my discussion on text typefaces, I’d like to briefly mention some fonts that are often shown in rather large sizes: fonts for signage. Interestingly, many signage typefaces have design features very similar to typefaces created for very small applications. The Frutiger typeface, based on letters that Adrian Frutiger originally developed for the Roissy airport in Paris (now named after Charles De Gaulle), is quite legible in small sizes precisely because it is a good signage typeface. Despite their size, signage fonts serve a rather different purpose than Display fonts.

Additional Elements To Consider

After considering the criteria mentioned above, the next question that often comes up is, “does this font have oldstyle figures, or small caps and ligatures, etc.?” A font’s letters might look really great in text, but if they do not include additional elements and features, their use is somewhat minimized. I avoid using fonts with small character and feature sets where I can, because I feel that the lack of these “extras” may break the kind of rhythm I aim to achieve.

1. OpenType Features

Once you’ve established a consistent rhythm by setting your text according to the correct size and application, it would be a pity to inadvertently break that flow. Large blocks of tall figures or capital letter combinations do just that.

Even in languages like German, where capital letters appear at the start of many words, the majority of letters in a text planned for immersive reading will be lowercase letters. Every language has its own frequency concerning the ratio of “simple” lowercase letters like a c e m n o r s u v w x z to lowercase letters with ascenders or descenders—b d f g h j k l p q y. In international communication, language support is a key consideration when choosing a font, and other character set considerations may especially play a role.

Traditionally, the style of figures used in running text also have ascenders and descenders. These figures—often called oldstyle figures or text figures—harmonize better with text than the “uppercase” lining figures. These so-called lining figures either align with the height of a typeface’s capital letters, or are slightly shorter. It is no surprise that, when shipping the Georgia fonts for use onscreen and online, Matthew Carter and Microsoft made the figures take the oldstyle form. Many other typefaces that have long been popular with graphic designers, like FF Meta (seen above), also use oldstyle figures as the default style. In my opinion, lining figures are best relegated to text set in all-caps.

Long all-caps acronyms—like NAFTA, NATO, or USSR—also create an uncomfortable block in the line for the reader. Setting these letter-strings in small caps helps reestablish a specific typeface’s natural rhythm in reading sizes, as may be seen in the first line of the image below (set in Erik Spiekermann’s FF Meta).

Along with common ligatures like fi ff fl, small caps and the many figure options are the most common OpenType features found in quality text fonts. Aside from having both lining and oldstyle figures, OpenType-functionality can enable a font to include both tabular and proportionally-spaced figures, numerators and denominators for fractions, as well as superior and inferior figures for academic setting. Additional OpenType features (such as contextual alternates or discretionary ligatures), are more powerfully noticed in display sizes, and in some cases can even be distracting in text.

2. Hinting

The display of text on screen, particularly on computers running a version of the Windows operating system, may be fine-tuned and improved with the help of size-specific instructions inside of the font file. These instructions are commonly referred to as “hints.” A TrueType font (or a TrueType-flavored OpenType font), is capable of including hinting. However, not every font manufacturer goes to the effort of optimizing the onscreen appearance of its fonts for Windows—even those fonts specially created for use in text sizes.

All of the text in the above image is shown in the same font: Prensa, set at 18 pixels. The lowest row shows this at actual size in three different onscreen rendering environments. In the enlargements, the top row shows a close-up of rendering in Safari on MacOS X, which ignores the hinting data in fonts. The second row shows rendering in Internet Explorer/WindowsXP (Grayscale only, for this sample). The third row is from a ClearType environment—in this case, from Firefox on Windows7. Prensa is a typeface designed by Cyrus Highsmith at the Font Bureau; the Web font is served by the Webtype service.

Recommended Typefaces For Readability

Aside from the typefaces already mentioned in this article and its images, here is a small selection of faces that I personally enjoy at the moment. Even though lists of “favorite” typefaces are about as useful as lists of favorite songs or favorite colors, I am happy to pass my subjective recommendations along. No doubt that as new projects arise, my list of favorites is likely to change, too. I do think that these typefaces serve as great starting places. Some are also just from cool friends whose work I dig. Alongside each selection, I mention whether this choice is currently available for print only, or if there is a Web font version, as well. Don’t forget: the typefaces that you pick in the end should depend on your projects, their audience, and the content at hand.

Arnhem is a no-nonsense high-contrast oldstyle-serif face. It is a contemporary classic for newspaper and book setting, designed by Fred Smeijers and distributed via OurType. Available for print and Web.

Benton Sans is a Tobias Frere-Jones performance of Morris Fuller Benton’s News Gothic genre. Designed for Font Bureau, it is not only a great typeface for small print in newspapers, but one of the best-rendering text faces for the Web as well. Available for print and Web.

Ibis is another Font Bureau typeface, designed by Cyrus Highsmith. This square serif family is also no stranger to cross-media text-setting. Ibis works just as well whether you use it in print or on screen. Available for print and Web.

Ingeborg is modern serif family from the Viennese type and lettering powerhouse, the Typejockeys. Like any proper family should, Ingeborg has optically-sized variants for text and display settings. The display versions of the typeface can get pretty far out, too! Designer Michael Hochleitner named this typeface after his mother. Available for print and Web.

Fred Smeijer’s work in contempory type design is so significant that he gets two shout-outs in my list. His Ludwig type family takes a nod from 19th century grotesques, but he does not try to sanitize their quirky forms, as so many type designers had tried to do before him. Available for print and Web.

This is one of the typefaces that I’ve designed. I’m somewhat partial to Malabar. Available for print and Web.

Martin Majoor’s FF Scala Sans has been my top go-to typeface for almost 15 years. It mixes well with the serif FF Scala type, but it’s also really great on its own. Available for print and Web.

Of all the typefaces designed by Hermann Zapf over his long career, URW Grotesk is clearly the best. Unfortunately, it has been a little overlooked. URW Grotesk is a geometric sans, with a humanist twist that brings much more life into the letters than this genre usually allows for. Plus, the family is super big. Available for print and Web.

Are you a DIY-fan? Do you like to print with letter press, whether you set your own type by hand, or have polymer plates made? Then check out the typefaces of Emil Rudolf Weiß! His Weiß-Antiqua is an eternal classic. Weiß may have passed away 70 years ago, but his work is still relevant. He was German, so his last name is sort of pronounced like Vice, as in Miami Vice. Available for print and Web.

Conclusion

There are many factors that play a role in typeface selection. Aside from just browsing through the available fonts that they have, or fonts that could be newly licensed for a project, designers regularly spend considerable effort determining the right typeface to complement a project’s content, or the message at hand. Understanding some of the thoughts that go into the making of text typeface—including how a typeface’s letters are fitted to each other to determine a text’s default underlying rhythm—helps lead to better informed decisions regarding what types are indeed apt, and which faces are better suited for other sorts of jobs. After having read this article, I hope you feel more comfortable with this kind of decision making, and that you will know what to look for with a font in the future.

Other Resources

For more information about choosing the right text fonts, you may be interested in the following books and Web resources:

1. Websites

• Better Web Typography With OpenType Features
• Figuring Out Numerals
• Figuring Out Numerals — The Sequel
• The @Font-Face Rule And Useful Web Font Tricks
• The Making Of FF Tundra
• What Should I Look For In A UI Typeface?
• Making Geometric Type Work

2. Books

• Counterpunch: Making Typefaces In The Sixteenth Century, Designing Typefaces Now
• Size-Specific Adjustments To Type Designs
• Thinking With Type

Note: A big thank you to our fabulous Typography editor, Alexander Charchar, for preparing this article.

(jvb) (il)

---

© Dan Reynolds for Smashing Magazine, 2012.

I started my career as an illustrator until a motorcycle accident took my career. My smashed hand, arm, and spirit never recovered to the point I could handle a drawing tool again. I always tried to reach for impact…shock…lasting impressions…some said nightmares.

Luckily, my hand could hold a computer mouse very nicely and, with a lot of study and experience, I moved into the design field and became an art director, sitting across the desk from illustrators as my vendors.

There was a great difference between the people I use to service as clients and myself—I allowed greater freedom to the artist and encouraged them to go a step or two farther with the visual impact. I argued the points with editors to publish art that meant something. Not just to compliment a story but to push it forward and have it stick in the reader’s mind.

To be creative, in my thinking, was to let go of convention and reach, even to test your abilities to make visual images that would speak volumes and make lifelong impressions in people’s minds.

Fast forward to recent days and publishing has turned into online content and illustrations are all stock purchases. Think about what you see on web sites. Images of business people shaking hands, sitting at computers, shaking computers with other business people, blah, blah, blah. If I see the same Getty image of the young businessman offering his hand towards the viewer, I’m getty-ing the heck out of this business!

At least this stock photo of businessmen shaking hands from 123rf.com has them jumping in the air.

What is “too far” with an image?

How do people decide what is “too far?” It’s usually subjective. The “taste filter” falls upon the final decision maker and there’s nothing an illustrator, designer, or photographer can do about it. Suck it up and move on. If you fail to get past the “taste filter” enough, you are not a reliable vendor.

I believe in going as far as possible in my thought process and being pulled back by editors, rather than self-editing and second-guessing my client. I want them to have my best. If they think my best isn’t for them, then the working relationship won’t produce a great product for them, I won’t be happy doing the work, and it will show. Let’s face it: the money isn’t enough these days to worry about losing a client. The only upside to crappy fees is the strength it gives you to walk away proudly.

Certain images that shocked people decades ago aren’t seen as even a bit disturbing today. In the Second World War, Life magazine ran the first photo of the bodies of dead American Marines, lying on a beach in the South Pacific (inset image). Obviously, the larger image of the beach at Tarawa is even more disturbing. Had that image been released to the public, who knows what the effect would have been on the morale of the American public.

Certainly there were thousands of violently sickening images that came out of that war, as it does with any war. One image of joy and celebration has become iconic with the end of hostility. After several decades, the sailor and unsuspecting nurse he accosted in Times Square in Alfred Eisenstaedt’s photo were identified. Yet another happy ending and photo opportunity.

The Vietnam War was fondly called “the war we watched from our living rooms.” The nightly news aired footage from the battlefield while people ate their dinner and waited for prime time TV shows to come on. Still, as with every war, iconic images were published that stirred anti-war sentiments.

Early in the war, a Buddhist monk immolates himself in protest to the treatment of Buddhists by the South Vietnamese government. After this incident, Americans were suspicious of the South Vietnamese government.

Children running from a napalm attack, one with her clothes burned off, brought attention to the American public of the involvement of civilians in the conflict. It put a face of the innocent victims of the U.S. bombing.

One of the best known images from the war was the execution of a suspected VC soldier in the street. The image was shocking and also deteriorated support of the war.

The last chopper out of Saigon in 1975. A U.S. diplomat punches a Vietnamese man to keep him from overloading the aircraft as women and children were still boarding. The man behind him obviously is trying to help the man get on board. It spoke to emotions of desperation and sorrow. It was also an end to over a decade of disturbing images that haunted Americans and the world each and every day.

Images need to motivate!

The web moves in the blink of an eye and mistakes can be fixed faster than a retraction can be printed. It is also possible that, as we saw with the recent turmoil in the Middle East, news has become immediate with people able to post images globally.

It is important, as professionals, to know the product/consumer/reader and create appropriately. The wrong image posted to a site will become viral, be shown on Web Soup and Tosh.0 and become a PR nightmare for a company or publication. A recent viral blunder was a famous clothier that put a picture of a pair of pants with a male model who was rather…“excited” to be wearing the pants. Splashed all over the internet, I believe it to be the best form of advertising, but obviously I’m not the best when it comes to being a “taste filter.”

Aside from little mishaps that occur, usually in print, it is important to remember the power magazines that featured photos and illustrations had to the public. LIFE magazine was the premier, over-sized magazine that gave people a view of events and people around the world. National Geographic showed scenes few would ever witness and became the favorite of teenage boys with shots of bare-breasted tribal women. That, of course, was before the days of the internet when a simple click on a “I’m over 18” button led to a portal of porn videos.

The New Yorker, although revered for its brilliant writing, is probably more popular for the cartoons it publishes, even though most of them make absolutely no sense whatsoever. Power of the image!

Diane Arbus, Richard Avedon…

Pronounced “Dee-ann,” Diane Arbus (1923-1971) was a photographer from a privileged upbringing but known for her stark images of “unusual subjects.” Her images were, stark but truthful and they gave life and a humanity to her subjects who were…shunned by society as “imperfect,” “odd,” and “freakish.”

Photos ©Diane Arbus

It was said of Arbus, however, “in photographing the retarded, [Arbus] waits for the moment of fullest expression of disability: she shows people who are slack-jawed, vacant, drooling, uncoordinated, uncontrolled, demented-looking. She does not flinch from the truth that difference is different, and therefore frightening, threatening, disgusting. She does not put herself above us—she implicates herself in the accusation.”

Arbus was brilliant and her images live on long after her. She committed suicide in 1971. An end shared, unfortunately, by many who photograph the harsh realities of life.

Richard Avedon (1923-2004) outlived Arbus and was also known for his stark images of people but he gained notoriety for capturing thoughtful shots of the famous and beautiful. Heavily into fashion and celebrity, he photographed presidents, actors, models, and the common person, giving them all the same treatment through his camera lens. Unlike Arbus’ real, on-the-spot shots of her subjects in their surroundings, which told more of their stories as real people, Avedon took the famous and lowered them to the status of real people by capturing them in stark and empty surroundings. Arbus’ subjects were freaks and outcasts and her images gave them an air of joy and normalcy. Avedon’s subjects, who had everything in the world at their fingertips, became lonely, sullen people surrounded by nothing.

Photos © Richard Avedon

It’s odd that two contemporaries, at different ends of the spectrum in the same field, took their subjects and had them meet in the middle. Freak or famous, these two photographers elevated and lowered all of them into a certain nakedness that equalized them all.

Sickening or fascinating?

In March 1993, photographer Kevin Carter made a trip to southern Sudan, where he took the now iconic photo of a vulture preying upon an emaciated Sudanese toddler near the village of Ayod. Carter said he waited about 20 minutes, hoping that the vulture would spread its wings. It didn’t. Carter snapped the haunting photograph and chased the vulture away.

Carter  won the Pulitzer Prize for this photo, but he was also haunted by it. “I’m really, really sorry I didn’t pick the child up,” he confided to a friend. Journalists in the Sudan were told not to touch the famine victims, because of the risk of transmitting disease.

Some called him a “predator” for not helping the child (he did make many attempts to find out the fate of the child after the picture was published in the New York Times). Consumed with the terrible violence he’d witnessed, and haunted by the questions as to the little girl’s fate, he committed suicide several months later. Ironically, shortly after his death, a package arrived with messages from Japanese school children, telling him how much the photo had affected them and that it had caused them to see the world in a different light.

As with this image and millions of photos of dead bodies and suffering victims, we are reminded, while sitting in the comfort of our clean and peaceful homes, of the violence and cruelty that surrounds us, and it serves to remind us of what may strike at any moment. It jabs a knife into our gut to show us that we are human and cannot ignore our own humanity. It makes us uneasy and sticks with us for a lifetime. Not click by click, moving on to some new distraction—iconic images…change us.

Taking images a step further

Amnesty International is known for not holding back. For obvious reasons, they cannot. For the creatives at advertising agencies, AI is a dream client. One can push beyond convention and reach for the strongest impact and visuals that will have an impact that will stick with the viewer for as long as possible, if not forever.

These print ads by JWT, UAE incorporate not only powerful images of torture, but the placement in the magazine’s center spread used the staples in the victim’s wrists as part of the message.

This environmental ad for Amnesty International by TBWA, Paris uses the brick wall to drive home the message.

While good causes have created stronger messages through shocking images, PETA has come under huge criticism for “missing the mark” with their anti-fur ads but even the “kinder” and “gentler” World Wildlife Fund took a step into the shock zone with some images with Photoshopping to strengthen the message.

The Brazilian Government doesn’t hold back with their message on pedestrian safety. Quite an example of environmental advertising.

An odd image with a message I don’t quite get, is this one for PSP by Sir JJ Institute of Applied Art Advertising in Mumbai, India. Is the message that you can have fun killing people on PSP games or is it that video games are desensitizing us to violence. I hope it’s the latter as the image would work well for such a message. If it supports PSP as a “fun” killing machine, then I weep for the creatives that thought that one up.

Simple and straightforward, these ads by Efekt, USA, say it all in a simple and bold fashion.

Not all images need to tug at the emotions of the viewer. In a global economy, advertisers need to embrace the image that speaks to every language on the face of the Earth. These ads by D&M Publishers send a fun but clear message about reading.

What about video?

Do I have to go into the power of video? With the advent of affordable video cameras, ordinary people caught incidents that shocked the world. The Rodney King beating by Los Angeles police was one of the roots of the L.A. riots that spawned even more shocking video of violence that found its way into living rooms across the globe. Now that every cell phone has video cameras, images are uploaded to Youtube by the millions.

One of my favorite public service ads from decades ago was one by the American Cancer Society. Search as I can, it just doesn’t seem to be on any web site or Youtube. It started with an elegant, beautiful woman smoking a cigarette. As she continues smoking, she is further covered by tar until she is completely covered and screaming in horror. The tag line was, “if what happens on your inside happened on the outside, you would quit smoking.”

It was so disturbing that it didn’t run long. The public’s sensibilities back then couldn’t handle such a strong message. A shame, as it was very powerful and well thought out…except for just how strong of a message it was.

Another favorite of many was this commercial that ran for many, many years…

But shock, horror and sorrow isn’t the only strong message. There’s enough of that in our daily lives. As a former member of the Usual Gang of Idiots at MAD Magazine, I believe that humor has a strong message, too. My favorite commercial from the “Got Milk” people was this one…

Unfortunately, the humor must have been a bit too over the top for the American public and the commercial didn’t get a lot of play. I thought it was brilliant but I have weird sense of humor.

Thumbnail image ©Nick Veasey

Speider Schneider is a former member of The Usual Gang of Idiots at MAD Magazine and has designed products for Disney/Pixar, Warner Bros., Harley-Davidson, ESPN, Mattel, DC and Marvel Comics, Cartoon Network and Nickelodeon among other notable companies. Speider is a former member of the board for the Graphic Artists Guild, co-chair of the GAG Professional Practices Committee and a former board member of the Society of Illustrators. Follow him on Twitter @speider

Did you create an ad or web site with shocking images? What was the reaction? Did you go too far or not far enough? What image sticks out in your mind as affecting your life?

Creative Font Collection from HVD Fonts – only $47!

Source

Every week we tweet a lot of interesting stuff highlighting great content that we find on the web that can be of interest to web designers.

The best way to keep track of our tweets is simply to follow us on Twitter, however, in case you missed some here’s a quick and useful compilation of the best tweets that we sent out this past week.

Note that this is only a very small selection of the links that we tweeted about, so don’t miss out.

To keep up to date with all the cool links, simply follow us @DesignerDepot

Six Common Web Programming Mistakes and How to Avoid Them http://ow.ly/aTe7a

The huge impact of color in website design http://ow.ly/aTnrJ

The Eagleman Stag by Mikey Please is an amazing animation you do not wanna miss! http://ow.ly/aTCPS

Take a look at the dark, brilliant and almost real illustrations of Michael Peck http://ow.ly/aUe1X

Writing A Creative Brief http://ow.ly/aUVA1 Dragging The Right Information Out Of A Client

Illustrator Tom Percival has some awesomely creepy stories to tell you http://ow.ly/aVakP

Photoshop of the 50′s http://ow.ly/aUT1l Pin-Up Girls Before And After

When designing for a pixel grid, why not use a tool that’s based on a pixel grid? http://ow.ly/aWTnR #UI (@Adobe)

Are you having troubles increasing your productivity? http://ow.ly/aX9dd Check out these 5 Proven Tactics

Te creative world of painted fingers http://ow.ly/aXdCp

Thornberg & Forester is very proud to unveil a new montage reflecting its evolution and its growing success http://ow.ly/aXeLm

Very useful http://ow.ly/aYbFv 8 tools to manage an email newsletter

Tomorrow’s web type today: using stylesets http://ow.ly/aYbSk *great article by @elliotjaystocks

Some great stickers that turn your gadgets into something that looks much cooler http://ow.ly/aYcab

How Letraset’s Dry-Transfer Type Transformed Graphic Design http://ow.ly/aYpUu

Kids have never looked cooler than in the photographs of Jamie Hawkesworth http://ow.ly/aYtFl You bet that’s true!

Seth Godin on When You Should Start Marketing Your Product, Service, or Idea http://ow.ly/aZSbU Good insights

{css:hat} is a #useful Photoshop plugin that translates layer styles to CSS3 http://ow.ly/b004N

Time to rethink some icons? http://ow.ly/b00dp The Floppy Disk means Save & 14 other old people Icons that don’t make sense anymore

Sensational work by photographer Peter Hapak http://ow.ly/b03So

The Practical Guide to Multiple Relationships Between Posts in #WordPress http://ow.ly/aZSVh

Want more? No problem! Keep track of all our tweets by following us @DesignerDepot

Creative Font Collection from HVD Fonts – only $47!

Source

Every week we feature a set of comics created exclusively for WDD.

The content revolves around web design, blogging and funny situations that we encounter in our daily lives as designers.

These great cartoons are created by Jerry King, an award-winning cartoonist who’s one of the most published, prolific and versatile cartoonists in the world today.

So for a few moments, take a break from your daily routine, have a laugh and enjoy these funny cartoons.

Feel free to leave your comments and suggestions below as well as any related stories of your own…

A true friend

Designer input

User friendly

Can you relate to these situations? Please share your funny stories and comments below…

Creative Font Collection from HVD Fonts – only $47!

Source

Many dismiss copywriting as something that ad agency people do. Truthfully, all of us need to pay close attention to copywriting if we want to achieve our business objectives.

The goal of a “regular” text is to inform or entertain. The goal of Web copy (and ideally your website in general) is to get people to do something—to sign up, make a purchase, or something similar. Hiring a professional copywriter can be very expensive, which is one of the reasons why this is a valuable skill to have yourself.

“I don’t need to learn copywriting, I write based on how it sounds to me.”

Think you don’t need to learn copywriting?

David Ogilvy, the father of modern advertising, addressed this in his book Ogilvy on Advertising. One of his copywriters told him that he had not read any books about advertising; he preferred to rely on his own intuition.

Ogilvy asked him: “Suppose your gallbladder has to be removed this evening. Will you choose a surgeon who has read some books on anatomy and knows where the gallbladder, is or someone who relies on his own intuition?”

What distinguishes top experts from mediocre players is that the best know more. You can write better copy if you know more about it.

The Process Of Writing Great Copy

Everything is easier with the right process. If your approach to copywriting is “I’ll just try to be convincing”, you’re setting yourself up for failure.

You don’t even need to be a “natural writer” to come up with excellent copy, you just need the right process and some key principles about writing copy that sells.

The best processes are simple, as those are the ones you actually use.

Here are the six steps of effective copywriting process:

1. Research: customer, product and competition.
2. Outline and guideposts.
3. Draft copy.
4. Conversion boost.
5. Revise, rearrange.
6. Test.

And now let’s get to the details:

1. Research

This is often the most time-intensive part of your copywriting.

“You don’t stand a tinker’s chance of producing successful advertising unless you start doing your homework. I have always found this extremely tedious, but there is no way around it.”
— David Ogilvy

David Ogilvy had the task to do copywriting for a Rolls Royce ad. He spent three weeks reading about it before he came up with the headline and the rest of the copy. While he was talking about advertising, it equally applies to your website copy—the goal is to get people to do something.

Ogilvy’s famous Rolls Royce ad.

You need to figure out why people buy the product, how they buy it, what they use it for, and what really matters to them. If you don’t have this figured out, you really cannot write a copy that works. When it’s your own business that you’re writing copy for, things go much faster, of course, as you know the product and the competition.

Gauge the Competition

You need to be aware of your direct competition, how they present their product, and what claims they seem to be making. If you are not selling something unique, you are selling as much for your competition as you are selling for yourself. Being “like” others or choosing to be “one of the leading providers of” is a losing strategy.

Neuromarketing research tells us that differentiating our claims is the key to talking to the old brain, the decision making part of our brain. Our whole business identity should be different from the competition, and the claims we’re making about our product should stand out.

Get Out of the Office

The answers are not in your office and you won’t have eureka-moments at brainstorming meetings (working solo is far more effective anyway). You have to interview people. Don’t waste time interviewing random people, you need to talk to your ideal customers and find out what’s on their minds.

Find out what they think about your kind of product, what language they use when they talk about it, what attributes are important to them, and what promises would most likely convince them to buy it. Pick the last 10 to 20 customers (who still remember their purchasing experiences), and ask them these questions (recording the interviews is a good idea, but ask for permission):

• Who are you? What do you do? (customer profile)
• What does our product help you do? (helps you understand how they use it, tells you words they use to describe our product)
• Which parameters did you compare on different options? (which features matter)
• What were the most important ones? (key pains to solve)
• Which alternatives did you consider? (competitors we have to look at)
• What made you choose our product? (our key advantage)
• What were the biggest hesitations and doubts before the purchase? (things we have to address in the copy)
• Were there questions you needed answers to, but couldn’t find any? (necessary information to provide)
• What information would have helped you make the decision faster? (same as above)
• In which words would you recommend it to somebody you know? (words they use to describe our product)

Take note of the exact wording they use. Your copy needs to match the conversation in your customer’s mind. If you talk about “scribing devices” and he needs a pen, there’s a mismatch.

My point is that when customers see the product described in words they have in their mind already, then you’ve got their attention.

2. Outline And Guideposts

Next step: write the outline. Guideposts are the markers that help you write the content.

Writing an outline usually only takes a few minutes and provides a road map for the rest of the project. It allows you to complete the work faster and ensures that you stick to the flow.

The outline structure will depend on the page you’re writing the copy for. The main pages you need a well thought-out copy in place are your home page and product pages.

Here are outline templates I personally use, and you can copy them. I’ve tweaked and tested them over the years, and this model works the best for me.

Home Page Copy

Your home page copy structure depends a lot on your business. A nail salon would have a different approach from an e-commerce store; a website selling mobile app design courses is different from a hosting company. Hence, it’s basically impossible for me to give you an outline template for your home page.

What IS universal is the value proposition. Every home page needs one (unless you’re a very well-known brand)

A value proposition is a promise of value to be delivered. It’s the primary reason a prospect should buy from you. The value proposition is usually a block of text with a visual.

There is no one right way to go about it, but I suggest you start with the following formula:

• Headline:
  What is the end-benefit you’re offering, in one short sentence. Can mention the product and/or the customer. Attention grabber.
• Sub-headline or a two-to-three sentence paragraph:
  A specific explanation of what you do/offer, for whom, and why is it useful.
• Bullet points:
  List the key benefits or features.

Here’s a list of useful value proposition examples you can check out.

Product Page Copy Outline

Product page is where you sell the value of your product and where the user takes action (adds to cart, sign up, makes a purchase, etc.).

1. Name of the product.
2. Value proposition: what’s the end-benefit of this product and who is it for?
3. Specific and clear overview of what the product does and why is that good (features and benefits).
4. What’s the pain that it solves? Description of the problem.
5. List of everything in the product (e.g. curriculum of the course, list of every item in the package, etc.).
6. Technical information: parameters, what do you get and how does it work?
7. Objection handling. Make a list of all possible FUDs (fears, uncertainties, doubts) and address them.
8. Bonuses (what you get on top of the offer).
9. Money-back guarantee (+ return policy).
10. Price.
11. Call to action.
12. Expectation setting: what happens after you buy?

What you now have in place is like a skeleton. Next step would be to start writing the draft version of the copy by filling in the blanks.

3. Draft Copy

Start filling in the blanks in the template above, and keep these points in mind for the style of your writing.

Avoid Jargon and Blandvertising

The goal of the copy is to connect with the reader, and guide them towards an action.

“Human relationships are about communicating. Business jargon should be banished in favor of simple English. Simplicity is a sign of truth and a criterion of beauty. Complexity can be a way of hiding the truth.”
— Helena Rubinstein

Using complicated, fancy words does not make you seem any smarter or your solution any better—it just turns everybody off. Who wants to read something that doesn’t feel like it’s written for them? Talk to people like a real human. If you wouldn’t use a phrase on your website in a conversation with a customer, then don’t use it.

In addition to fancy words, avoid meaningless phrases. What do “on-demand marketing software”, “integrated solutions” or “flexible platform” really mean anyway?

Or useless phrases like “changing the way X is done”, “paradigm shifting …” or “exceeding customer expectations”—stop the nonsense. These bland phrases have long lost any meaning, and you will just waste precious attention time. You can see a list of the top 100 most overused buzzwords and marketing speak in press releases here.

Another thing to avoid—superlatives and hype. Saying things like “the best”, “world leader”, “once-in-a-lifetime opportunity” will just ruin your integrity. People don’t believe such claims anyway (even if they’re true).

What to do instead? Be specific.

Be Specific

Specificity converts.

“Clearer and more specific subject lines convert better.”
— Bob Kemper, Senior Director of Sciences, MECLABS.

While in that specific quote Bob was focused on subject lines, this principle applies equally well to all copywriting. Specific is believable, specific is attractive, specific is convincing. Don’t be vague, be specific.

“We have the best coffee in the world” vs “Our estate earned the ‘world’s best coffee’ title at the Specialty Coffee Association of America’s Roasters Guild for the third year in a row.” Which claim is more believable?

You can use a superlative if you back it up.

Here’s an example. Can you understand what they offer?

Specific headline. Specific call to action with a specific explanation of what they get when they sign up. Specific benefits listed. Specific image to show the product in action.

It Has to Be About Them

Remember the old brain I mentioned before?

Our brains have three layers, and the oldest part—the old brain—is the decision-making part.

The “Old Brain” is the part that humans and their predecessors have had the longest—like 450 million years or so. So the part of the brain that controls decisions is fairly primitive and mostly concerned with survival.

If your copy is about you (your product, your company) and not the prospect (his problems, his life), you will fail. Make it about them. Too many companies start by stating “our company was founded…”, “we offer …” or something especially useless like “welcome to your website”.

Instead of saying “we specialize in dog training”, say “train your dog in two weeks”—move the focus from you to the benefit they will receive. People care about themselves—not you—and whether your website can be helpful in some way.

How Much Information Should I Provide?

Tests have shown that 79% of people don’t read, they just skim. However, 16% read everything.

Those 16% are your main target group, the most interested people. If people are not interested in what you are selling, it doesn’t matter how long or short your sales copy is. If they are interested, you should give them as much information as possible.

Complete information is the best sales copy. A study by IDC showed that 50% of the uncompleted purchases were due to lack of information. They can always skip parts and click the “buy” button once they have the information they need. But if they read through the whole thing and they’re still not convinced, then you have a problem.

This is why you should always strive to say everything that can possibly be said about your product. You cannot be there in person to explain and answer the questions, so your copy needs to do it for you.

All at Once or Make Them Click?

Long form copy works just great, but it’s not necessary to provide all the information on a single page. It’s okay to move supplemental information onto a different page (layer, popup, etc.) and just link to it.

For instance, Amazon often hides full technical information of products behind a link—since it’s only interesting to the hardcore tech savvy customers (and most customers are not).

Full technical details available after clicking a link.

The important thing is that all the information needed to make the decision is on a single page. Don’t make people work click to read stuff that you want them to read anyway (like features, benefits, testimonials, pricing, etc.).

When, Where and If at All Should I Show the Price?

Some people think that the price drives readers away, and they should hide it somehow—or make it hard to get to. While there is truth in that sometimes, it’s mostly false.

Consider this:

1. People always want to know how much things cost.
2. If you don’t publish the price, have a “get a quote” form instead. But if your competition does, they may get the client.

You should always make the price easy to find, but for more complex / expensive products communicate the value before the price.

Let’s say you’re selling a copper vase. Price: $990.

Seems expensive. But what if you knew that it was designed by Andy Warhol and previously used by Kurt Cobain? If you know who these people are and respect them, this changes everything, and it might seem like a steal instead.

So communicate value before price.

If your price is cheap, you want people to know it. If it’s expensive, the price qualifies the right people who are convinced to buy your copy. Giving price details also convinces your reader of the image and brand value of your product.

4. Conversion Boost

Once you have the content in place, it’s time to give it a conversion boost. The goal of the website copy is to convert the reader into a buyer (or subscriber, lead, etc.). There are certain things we can do to improve the conversion rate (the percentage of readers that take action) of the copy.

We’ll use three guides here to make the copy sell better:

• Conversion frameworks.
• Science of persuasion.
• Neuromarketing research.

Conversion boost. Image credit APM Alex.

Conversion Frameworks and Why They Matter

Conversion frameworks are a structured approach for increasing website conversion rates. The most prominent ones have been fine-tuned over the years and have been proven to boost sales.

While the conversion frameworks apply to a website as a whole, they can also be used as frameworks to improve sales copy.

There are many conversion frameworks around, let’s use one of them as an example:

C = 4m + 3v + 2(i-f) – 2a

This is not a lesson in physics, but a conversion formula developed by Marketing Experiments. Translation:

C = Probability of conversion
m = Motivation of user (when)
v = Clarity of the value proposition (why)
i = Incentive to take action
f = Friction elements of process
a = Anxiety about entering information

Summary: The probability of conversion depends on the match between the offer and visitor motivation + the clarity of the value proposition + (incentives to take action now—friction)—anxiety. The numbers next to each character signify the importance of them.

How to apply this to your copy:

• Is your value proposition easy to understand and perfectly clear? Would everyone understand what you offer and how it’s beneficial to them?
• Go through your copy and see if there’s any way to make your statements clearer.
• Communicate value: don’t just list features, turn them into benefits.
• Make a list of all possible questions, doubts and objections that prospects might have in the buying process. Address them.
• Make the buying or signup process as easy as possible, remove everything that is not absolutely necessary.
• Add microcopy: explain why you need certain data and what happens after they give it to you.
• Provide full information: what happens after they buy, what can they expect, when is the product shipped, what’s the delivery time.
• Add risk reversal: what kind of guarantees are in place? What happens if they don’t like it, or it’s not what they thought, etc?

The Science of Persuasion

Persuasion has been researched thoroughly. Mr. Cialdini is undoubtedly the biggest authority on the field. His books are bestsellers and have been on the “must-read” list for marketers and copywriters for years.

In his research, Cialdini came up with six scientific principles of persuasion that will help guide you to become more effective at getting people to do what you want. In case you’re not familiar with those principles, then here’s the summary:

Principle 1: Reciprocity
People feel obligated to give back to others who have given to them.
How to use it: teach your prospect something useful in your copy, give away free stuff, and better yet—add value to your prospects long before you even start to sell them something.

Principle 2: Liking
We prefer to say “yes” to those we know and like.
How to use it: talk/write like a human, connect with the reader, share details about yourself. Blog. Be friendly and cool (like Richard Branson, Oprah, Gary V).

Principle 3: Social Proof
People decide what’s appropriate for them to do in a situation by examining and following what others are doing.
How to use it: show how many others are already using your product. Show off your numbers. Use testimonials. Link to 3rd-party articles.

Principle 4: Authority
People rely on those with superior knowledge or perspective for guidance on how to respond AND what decisions to make.
How to use it: Demonstrate your expertise. Show off your resume and results. Get celebrity (in your niche) endorsements.

Principle 5: Consistency
Once we make a choice/take a stand, we will encounter personal and interpersonal pressure to behave consistently with that commitment.
How to use it: Start small and move up from there. Sell something small at first (a no-brainer deal), even if you make no money on it. They now see themselves as your customer, and will most likely return to make a larger purchase.

Principle 6: Scarcity
Opportunities appear more valuable when they are less available.
How to use it: Use time or quantity limited bonuses. Limit access to your product. Promote exclusivity.

What Neuromarketing Teaches Us

Research in neuromarketing (put together in this book) reveals interesting things about our brains.

Neuromarketing study in action. Image credit: SMI Eye Tracking.

We’re usually trying to talk to the “new brain”—the sophisticated one—but it’s the brute “old brain” that makes all the decisions, so we need to dumb it down. Here’s the formula for talking to the old brain:

Selling probability = Pain x Claim x Gain x (Old Brain)³

1. First you need to identify the prospect’s pain and make sure they acknowledge the pain before you start to sell them anything. Then, you’ve got to differentiate your claims from your competitors. The strongest claim is the one that eliminates the strongest pain.
2. Next, you have to show convincing proof to back the claims up. The “Old Brain” is resistant to new ideas and concepts, so your proof must be very convincing. Show tangible evidence, data, before & after comparisons, testimonials, and case studies.
3. In order to reach the old brain, you need to start with a “grabber”—something that really gets the attention (“if you’re selling fire extinguishers, start with fire”, like Ogilvy said). Second—the “Old brain” is visual, so use a big picture to illustrate and reinforce your message. Visuals get to the brain much faster than words. Best visuals show contrast—before/after, beginning/end, then/now.

How to apply it to your copy:

• Start with a grabber—something that evokes emotion.
• Address the pain from the get-go.
• Use a big picture next to your value proposition, one that the prospect can identify with.
• Are your claims different from the competition?
• Add proof to your claims in all possible formats.

5. Revise And Rearrange

Done with conversion boosting? Now enjoy a full night of sleep and come back to the copy in the morning.

A fresh look a day later will help you spot inconsistencies, missing information, and flaws in the general flow of the copy. Use this time to add more information, rearrange the order of different blocks and fix the typos (spelling mistakes can cost you customers).

Before you publish the sales copy, it always pays to get two or three other people to read it and give you feedback. You want feedback from your ideal customers—do they get any questions that were left unanswered? Is there any part that needs to be made clearer? And peers—other marketers or entrepreneurs. What could make the offer better and more credible?

Once the editing is complete, you can make it live on your website. Don’t guess whether the headline or value propositions are as good as they can be, immediately launch two versions of the copy and test them.

6. Test

There is no good way to predict how well the copy will do. Sometimes the conversion rates can skyrocket overnight. Sometimes the new copy turns out to be a downright dud.

You need to test your copy. Image credit Horia Varlan.

Maybe it’s because the offer is weak. Perhaps the headline is the bottleneck. It’s impossible to put the finger on the problem as all you have are hypothesis. The only way to know is to test.

Don’t trust a copywriter who says he always writes killer copy on his first try. Nobody does.

Most common problems:

• Your value proposition is poor.
• The offer doesn’t match the audience’s needs.
• The headline is weak.
• It’s not clear how the visitor benefits from this.

Start with A/B testing value propositions, and go from there.

Conclusion

Writing great copy is a skill you have to learn just like anything else. Use the outline and the tips to get started on the right track. Stephen King, the famous writer, said that if you want to be a writer, you must do two things above all others: read a lot and write a lot. I believe the same goes for writing great copy.

The best Web copy is not the one that uses sophisticated persuasion and mind manipulation techniques. The best copy provides full information about the product, its benefits, and makes it clear whether it’s the right one for the user.

(jvb) (il)

---

© Peep Laja for Smashing Magazine, 2012.