BlogmyQuery – BMQ

One of the best patterns for browsing a small collection of featured products is the carousel. Unfortunately, many mobile app implementations do not offer an engaging or satisfying carousel experience and are not effective at driving conversions.

In this article, we’ll use the analogy of a real-world amusement park carousel to explain what makes for an authentically mobile user experience, and we’ll give you the design, the complete source code and a downloadable mini-app, which you can use today to add an enjoyable and effective carousel to your own app on phones and tablets.

How It Works

The carousel is fairly simple. The customer is able to view several images of products across a row, and they can swipe horizontally across the row to navigate to the next set of products. An arrow indicating the direction of the carousel’s movement is usually provided as a clue to how to interact with it. Optionally, the next set of products in the queue may be partially hidden, creating what we call the “teaser,� indicating that more content will be visible by swiping.

Example

One excellent example of this pattern is the Amazon app’s home screen.

The carousel on the home screen of Amazon’s app is excellent. Larger preview.

This implementation of the carousel uses the teaser method to hint at the required interaction, showing only a small tantalizing glimpse of the naked CAT5E Ethernet cable, which is (and I have this from most reliable sources) completely irresistible to Amazon’s more impressionable customers, who can’t help but swipe across to see more of the naked cable and get to more of the content.

When And Where To Use It

The carousel is a fantastic pattern to show off featured items and relevant new arrivals. For example, new items matching the customer’s last search in their local area would be a sure winner.

In fact, consider using a carousel any time you have a small set of products (8 to 20 items) that are easily recognizable from just their picture. Augmenting the mostly visual content with a small amount of overlaid text is also sometimes effective. For example, in the screenshot below of the Pulse app on a 7-inch Android tablet, the carousel’s visual content is augmented with a semi-transparent dark-gray overlay, which provides the date and name of the comic. Without this overlay, the thumbnails of the carousel, especially in the first row, could be easily misinterpreted as belonging to a single comic.

The visual carousel content with semi-transparent overlay helps with comprehension in the Pulse app. Larger preview.

I am a huge fan of semi-transparent layers in mobile design. This example is particularly effective because the overlay on the thumbnails is semi-transparent and thus does not interfere with viewing the thumbnails, all the while augmenting the carousel experience in a way that is both visually appealing and informative. (Well, it does interfere just a bit, but it keeps interference down to a minimum while making best use of the small screen space.) The example also demonstrates that a carousel is an exceptionally great pattern for the large swiping gestures that small and large tablets invite.

Why Use It?

The carousel is an attractive and still fairly underused control for presenting visual information. It takes full advantage of the multi-touch gesture of swiping available on a mobile device. The carousel is easy and intuitive to operate and takes full advantage of the compressed real estate on mobile devices, where few words are needed to support the content.

Other Applications

One of the best features of a carousel is that it works well for a wide variety of device sizes and screen resolutions. This includes the ever-tricky horizontal orientation, for which the carousel works even better than in the vertical orientation.

The carousel adjusts to various screen sizes, and it works even better in a horizontal orientation. Pictured here is Amazon’s app. Larger preview.

Whereas the usefulness of traditional search results is severely hindered by the lack of vertical space, a well-designed carousel shines by showing off even more inventory.

Also noteworthy is the presence of the “See all� link, which points to the featured products.

The “More like this� link in this carousel navigates to a list of search results. Larger preview.

A “More� link is an excellent idea if your carousel has a small subset of items (8 to 20) that fails to meet the customer’s desires but piques their interest. In this case, the entire carousel control serves as advertising of sorts, enticing the customer to explore the relevant area of Amazon’s massive inventory.

Caution

As with any pattern, many implementations of the carousel do not feel quite right. One instance is NewEgg’s “Shell shocker� carousel:

NewEgg’s carousel has a few issues. Larger preview.

Some recommendations based on the UX problems in NewEgg’s implementation might help.

Make the Scrolling Smooth

To begin with, NewEgg’s carousel is structured more like the iTunes cover flow feature on iOS, with a large central element and two partial elements on the periphery of either side.

The cover flow screen in iTunes on iOS emphasizes the central element. Larger preview.

Like Amazon’s carousel, NewEgg’s can be swiped faster to advance more quickly through the list of products. However, NewEgg’s carousel moves very jerkily because of the structure of the central element, making it hard to see the intermediate states while scrolling — a major disadvantage. Seeing the two peripheral elements change is particularly hard — things hop all over the place, instead of smoothly swimming by the way they do in Amazon’s app. Higher-end and traditional carousels accelerate and decelerate smoothly and provide a pleasant, mellow, smooth ride. A carousel should be a high-end visual viewing experience that induces calm in the user, not stress. All parts of the control, including transitions, should behave accordingly and work together smoothly.

Indicate the Scrolling Direction

NewEgg’s carousel appears to be scrollable in both the left and right directions, causing a confusion: Is this carousel meant to represent a circle? Have I seen everything already, or do I need to keep scrolling? Amazon uses Android 4.0’s standard “blue parallax� visual treatment to signal the end of the line, a much better approach.

Amazon uses Android 4.0’s standard “blue parallax� to signal the boundaries of the carousel ride. Larger preview.

Just as a real carousel has papier-mâché horses that point you unambiguously in the right direction (you wouldn’t sit backwards on a horse now, would you?), so must your own carousel show which way the ride goes.

End the Ride Quickly

Good carousel implementations indicate the end of the list with the same parallax treatment seen at the beginning, and they present only 8 to 20 items, after which the ride is over and the customer can get off the carousel. Most importantly, the customer needs to exit the ride with the feeling of still wanting more. By contrast, NewEgg’s carousel seems to go on forever, so the customer does not get off until they feel bored (or, more likely given the jerky transitions, weak in the stomach). A much better approach would be to accompany the last element in the carousel with an obvious built-in “More like this� link, as shown below.

Show a “More like this� tile at the end of the carousel. Larger preview.

A “More like this� link can be used to jump into search results, which are more efficient for scanning large quantities of data and which are more likely to be relevant because of the sheer volume of items. Think of the “More� link as a premium combo ticket that grants admission to all of the remaining delights at the amusement park, conveniently presented after the cheap introductory carousel ride is over. Kind of puts a different spin on the entire carousel pattern, doesn’t it?

Make Sure Your Horses Look Amazing

No matter how smooth the ride is or how far or how fast the carousel goes, the best carousels have the best-looking horses, period. Make sure your horses (i.e. thumbnails) tell the story you want your audience to be told. For example, Amazon’s thumbnails are much better looking than NewEgg’s, although sometimes even the e-commerce giant screws up the ride, dropping thumbnails entirely:

Amazon’s carousel sometimes misses thumbnails. Large preview.

It goes without saying that ghost horses make for a terrible ride, even on Halloween (unless you’re the Headless Horseman). Which brings up my next point: some products are just not that visual, making them poor candidates for inclusion in a carousel. A classic example from my first book, Designing Search: UX Strategies for Ecommerce Success (Wiley 2011), is coffee — Peet’s Coffee to be exact. Even though Berkeley, California-based Peet’s makes some of the world’s most divine premium coffee, all of the thumbnails are identical pictures of a generic coffee bag and some spilled beans.

Some thumbnails, like these coffee bags from Peet’s, are not good candidates for the carousel pattern. Large preview.

Carousels are way more fun when the horses are all different; likewise, these generic bean-bag thumbnails are not good candidates for inclusion in a carousel pattern. A much more interesting horse would have been a close-up photo of a bean variety, or a map of a coffee-growing region, or a Tufte-style diagram of coffee taste attributes such as acidity, earthiness and body.

Even for products that have good thumbnails, presenting enough information can be a challenge. Including the right text in the individual tile is especially important for information scent; this could include key specifications such as processor speed, hard drive capacity and so on for the kind of technical gadgets sold by NewEgg. Picking an image resolution that can handle the amount of detail you are trying to show is also key. For example, can you tell what the item below is by looking at the small thumbnail and truncated description?

A small thumbnail and overly short description lead to “pogo-sticking.� Large preview.

Only by drilling down into the item do we see that it’s actually a screwdriver set. A larger thumbnail and better description would have helped a great deal and reduced the “pogo-sticking� (i.e. the frustrating navigation back and forth between carousel control and details page), which ruins the entire ride.

Having to pogo-stick between the carousel and details page ruins the ride. Large preview.

If the picture tells only half the story and you have to include a great deal of text, then you might find yourself having to increase the size of the individual element to the point that the carousel is no longer the best choice of presentation. For such items, think twice about whether you even really need a carousel, and whether a simple vertical list (more akin to a themed roller coaster) would make for a better experience.

Code

Carousel code can be fairly straightforward. One way to implement an ultra-simple demo using Java is shown below. Plugging cute pictures of puppies into the carousel, you should end up with a mini-app that looks something like this:

Mini-app with a puppy carousel. Large preview.

First, we define how many items to show, and compute the width of the carousel item based on the screen’s width. (You may need to use more sophisticated code that computes a dynamic INTIAL_ITEMS_COUNT if you’d like to accommodate longer carousels for tablet devices.)

/**
* Define the number of items visible when the carousel is first shown.
*/
private static final float INITIAL_ITEMS_COUNT = 3.5F;

// Compute the width of a carousel item based on the screen width and number of initial items.
final DisplayMetrics displayMetrics = new DisplayMetrics();
getWindowManager().getDefaultDisplay().getMetrics(displayMetrics);
final int imageWidth = (int) (displayMetrics.widthPixels / INITIAL_ITEMS_COUNT);

Next, for the purposes of this demo, we will create a static array of pictures. In a real app, this list would come from a database, of course.

// Get the array of puppy resources
final TypedArray puppyResourcesTypedArray = getResources().obtainTypedArray(R.array.puppies_array);

Then, we simply populate the carousel with items in the array and display it by overriding the onPostCreate() function. While onPostCreate() is mostly intended for framework use (according to the documentation), we can use it for this simple demo to simplify things a bit.

// Populate the carousel with items
ImageView imageItem;
for (int i = 0 ; i < puppyResourcesTypedArray.length() ; ++i) {
// Create new ImageView
imageItem = new ImageView(this);

// Set the shadow background
imageItem.setBackgroundResource(R.drawable.shadow);

// Set the image view resource
imageItem.setImageResource(puppyResourcesTypedArray.getResourceId(i, -1));

// Set the size of the image view to the previously computed value
imageItem.setLayoutParams(new LinearLayout.LayoutParams(imageWidth, imageWidth));

/// Add image view to the carousel container
mCarouselContainer.addView(imageItem);
}

This code is provided free of charge and distributed under the GNU General Public License v3. See the README_LICENSE file for details. Download the complete source code for the app.

Try It Out

If you want to see how the carousel app runs, the completed puppy carousel mini-app is available for you to download and try out. To install it, I recommend using an app installer (I use the one made by FunTrigger, which you can get free from the Play market).

Here’s how it works. Connect your Android device to your computer. You should see the Android file-transfer window open automatically. Download the APK source file (download the entire package), and place it in the “App Installer� directory (you may have to create it).

Place the APK file in Android’s file-transfer window. Large preview.

Now you will be able to launch the app installer on your device, navigate to the right directory, and tap the icon for the APK file that you want to install.

Use the app launcher to install the app. Large preview.

After a few customary Android disclaimers, the app will be installed in the normal apps area on your device, and you can launch it from there.

Conclusion

The carousel pattern is a microcosm of mobile design: deceptively simple. It is also a somewhat new Android pattern, and pitfalls abound. Nevertheless, if you take the time to get it right, the carousel is a fantastic pattern for showing off featured items and relevant new arrivals, as well any items that are highly visual. It dovetails perfectly with the local context by showing new items that match the customer’s last search in their local area. Finally, with the right implementation of the carousel, you will be supporting touch gestures on today’s Android devices to the fullest extent, fitting more products on the screen and making them accessible with a natural swiping gesture.

When designing your carousel control, think of it as you would its real-world namesake, the carnival ride. Make sure your horses look amazing; indicate the scrolling direction; make the scrolling smooth; and end the ride quickly, providing an exit to more of your inventory. We’ve provided you with the Java code and a demo implementation of the carousel pattern, so now you have no excuse not to try it!

(al)

---

© Greg Nudelman for Smashing Magazine, 2013.

User-centered design has served the digital community well. So well, in fact, that I’m worried its dominance may actually be limiting our field.

The terms “user experience designâ€� (UX) and “user-centered designâ€� (UCD) are often used interchangeably. But there’s an important distinction.

UX design is the discipline: what we do. Precise definition is elusive, but most attempts focus on experience as an explicit design objective.

User-centered design is a process: how we do it. Again the specifics vary, but usually form shades of the same hue:

• Research. Immerse yourself in your users’ worlds to understand what they do and why they do it.
• Sketch ideas that address these learned needs.
• Prototype the most promising ideas to evaluate them more accurately.
• Iterate through testing, repeating steps as required.

Other design processes

UCD is the dominant design approach within UX, so pervasive that some UX designers behold it as the Platonic ideal of design. Deviation from the UCD faith is even met with derision. A naive recruiter whose job specs aren’t explicit about direct user contact soon learns not to reoffend.

But other design processes are available. Jared Spool’s article 5 Design Decision Styles explores alternatives to UCD, including:

• Self design, aka “scratching your own itch.â€� The designer acts as a surrogate for the audience. It’s convenient and quick, but clearly only reliable in narrow circumstances.
• Genius design. Genius design has no first-hand research phase. To anticipate user behavior, the designer draws upon stockpiled experience, imaginative analogy, and psychological fundamentals.
• Activity-focused design. Here, the designer addresses users’ primary tasks rather than any underlying needs. Tasks are derived a priori, from a logical interpretation of the domain, rather than from research.¹

It seems arbitrary to regard these alternative design processes as inferior substitutes. Surely other modes can fulfill the broad UX mandate of creating experiences?

Weaknesses of UCD

UCD’s ascendancy deserves historical context. Its success came largely as an antidote to what preceded: the Wild West of the early web, dominated by Hey-This-Looks-Cool hackery. UCD offered rigor (or at least the perception of rigor; see Scientism below) that helped the immature web refocus on its audience. But that phase is long past, and the more experience I earn, the more flaws I see in UCD’s finery.

Heaviness

UCD simply takes longer than genius or self design. Clients typically identify research as the culprit, meaning the research phase is usually targeted when time is short. The UX industry has countered this variously through client education, seeking shortcuts, or by slipping research in without formal consent. But—whisper it quietly—some design research is wasted effort. For research to be valuable, it must:

• be free from sampling or cognitive biases;
• address issues that are central to the product;
• offer genuinely new insight; and
• be used to forge new ideas, not to validate predetermined decisions.

In these circumstances UCD is unparalleled, enabling breakthroughs other modes can’t. But I think UCD advocates overstate how often these planets align. I argue that genius design and iteration will often achieve better results in the same time.

Someone with experience as not only a designer but also as an attentive user has built up an unconscious repertoire of patterns and approaches that suit various contexts. As this library grows, it frees the designer from the need to research every problem.

The UX industry appears to acknowledge the relevance of genius design by its adoption of the expert review—a tool that epitomizes the approach—but often feels it has to prop this review up with user validation. It’s hard to escape the thought that the primary function of this redundancy is to retain the appearance of neutrality.

Negation of style

Among the UX community’s favorite quotes of late:

“[Good design] dissolves in behavior.� —Naoto Fukosawa
“The best interface is no interface.� —various
“Great design is invisible.� —various

At first glance, these are elegant statements of aesthetic intent: the user should never notice the designer’s influence. This “disappearing designer� motif holds self-sacrificial appeal, and for many interactions it’s great advice. I don’t want my tax forms to bear any trademark flourishes. However, when we extend this line of thought to its logical conclusions, these quotes start to look like mere slogans.

By negating the idea of a designer’s influence, we also negate the idea of style within the UX discipline. We’re saying that, done properly, it should be impossible to tell one UX designer’s work from another’s. There should be no signature elements, no philosophical movements, no overarching tenets except that of transparency.

The commoditization of designers that this idea suggests is troubling. Moreover, style is crucial for a creative discipline’s evolution. The best writers and architects—whose work, just like UX design, has function and engenders experience—have unmistakable styles. Throughout history, daring work from iconoclasts has sparked entire movements, and thus transformed creative practice. The transition between the Neoclassical and Modernist architectural eras, for example, wasn’t simply a case of replacing Doric columns with perpendicular glass. It was a total reframing of architecture and its values. Modernity usurped antiquity.

Is our form of functional art any different? In a system that deprecates style, is there room for a designer to pioneer entirely new approaches?² If not, are we happy with the resultant ideological homogeneity?

Of course our designs must put users first. But there is never just a single way to meet user goals. Instead of trying to deprecate style, we should embrace it as a way to drive our practice forward and lend personality to the things we make. In a marketplace of bewildering clutter, products with a damn opinion are by far the most interesting.

Scientism

Given its academic influences, it’s not surprising that UCD has been sold as a science. Empiricism runs through its discourse, to the unfortunate extent that the UX industry often oversells the certainty it can offer.

Scientism—akin to Colbert’s “truthinessâ€�—is the veneer of science where little scientific validity exists. While UCD is methodical, it is manifestly not scientific. There can never be a universal truth to design. Solutions applied in one context may fail magnificently in another, and the few governing principles (Fitts’s Law, the Gestalt principles, and affordance, say) give at best partial guidance. Some supposed laws, such as the “magical number 7±2â€� persist in ill-informed fringes of UX, despite being largely rebutted.

While researchers and designers can learn plenty from the scientific method, design simply does not yield to scientific analysis in the way its scientistic proponents wish.

To treat design as a science is to retreat to the illusory safety of numbers, where designers are mostly seen as agents of skewing the odds in your favor. This can start a race to the bottom as design gets less and less leeway. Weak leaders overtest in lieu of trusting designers to make decisions: it’s just a small step from there to the infamous forty-one shades of blue.

Imbalance

Finally, I’m concerned about the mindset that UCD can instill in its practitioners.

It’s unsurprising that a user-centered process can skew inexperienced designers’ loyalties away from business priorities. Some claim that this serves as counterweight to the business-first leanings of other employees. The argument strikes me as infantile. When a designer adopts simplistic, reductive arguments that ignore business reality, it undermines him. It limits his potential influence. Only the well-rounded designer who can fight for what’s right while accommodating business reality will be seen as a true leader.

What next?

I don’t expect UCD’s pre-eminence to change. Nor do I think it necessarily should. But a design community is most healthy when it shares a respectful variety of opinions. I don’t see that in the UX industry today, and I hope we can begin to appreciate the value of alternative design approaches.

The designers who will stand out in future will be those who are familiar with many modes of design. These designers may have a favorite, of course—and UCD is an excellent candidate—but they also have the versatility to draw on other processes when suitable. Perhaps they will even pioneer new approaches to add to our toolkits.

We’ve all been total newbies. In fact, I spend most of my time still feeling like one. So researching this article was a great opportunity for me to do some more learning, and to share all of that good stuff with you.

I reached out to people from across the WordPress community to ask what advice they would give to people just starting their WordPress journey. I talked with developers, designers, support reps, security experts, hosting companies, theme shops, plugin developers and just about everything in between.

This article is a result of their insight, and I hope that it provides some encouragement and guidance to newbies — whether you’re a user or a developer — as well as some tips for advanced WordPress users who continue to learn throughout their lives. With that in mind: WordPress community, take it away!

Get Involved With The Community

WordPress has a tight community with active contributors from all over the world, so it’s no surprise that a bunch of people within that community recommended newbies start chatting with others. Having a desire to learn and get help will get you far. As Japh Thomson pointed out:

“There’s a lot to learn, and this is the best way to ensure you’re learning the right way to do things. It also means that as you learn, you can give back, which helps the community to grow. As you give back, you’ll find this actually helps you learn even more!

Being a part of the WordPress community is a mutually beneficial arrangement, and a fantastic way to build your skills and experience.”

There are plenty of places to get involved. If you’re a developer you could check out the weekly WordPress core developer chats on the #wordpress-dev channel on the freenode IRC (Internet Relay Chat) network. Just listening to what’s going on in the chat will help you to understand the direction of the codebase and the decisions that have been made. You’ll also learn who is doing the talking, i.e. who the project leaders are.

WordPress community members chatting at the WordPress community summit. (Image source: Andrea R)

When Brad Williams started out with WordPress, he just hung out in the #wordpress chat. Within a few months he went from asking questions to answering them, and made some new friends while he was at it.

If IRC isn’t for you, sign up for WordPress.org and use the Codex and the forums to start learning. While you’re there, you can help out by fixing any problems that you see in the Codex, or replying to support forum questions that you might know the answer to.

You can also follow WordPress people on Twitter, comment on blogs and go to WordCamps and Meetups. “Being a part of that conversation,” says Kailey Lampert, “is vital to anyone who wants to learn.”

Take the time to learn who is who in the WordPress community. As Remkus de Vries says:

“The most important thing is to check your surroundings. You can’t enter a community without knowing who the key players are and what the rules are. Learning that is also learning WordPress. No matter what you’d like to get out of the community, you have to be willing to put the time in there without expecting anything monetary in return. Think of it as earning your ‘street cred.’ The more you make yourself visible, and there’s lots of ways to do that, the better you’re helping yourself and the project.”

As a developer, you can get involved by open-sourcing your software and distributing it. This could involve writing a plugin or a theme and putting it on the WordPress repository or GitHub. “Not only will you gain the respect of other developers and community members, you’ll learn so much about what it means to be part of the WordPress community,” says Drew Strojny. “You’ll get feedback and ideas to help improve whatever you built or contributed and you’ll likely learn something along the way.”

Simon Wheatley pointed out that there is space for everyone in the WordPress community:

“If you are a developer, look out for places you can start to get involved in code contributions to plugins or to core WordPress. If you are a business person or you are using WordPress, look for opportunities to get involved in local events and meet other users. The more contact you have with the community, the better your experience will be. WordPress is written by people who see something they want to improve and get involved with the code, WordCamps and meet ups are organized by people who see a gap and get involved in helping improve the community, documentation is written by people who don’t understand something and get involved in creating explanations… getting the idea? Get involved!”

The other great thing about getting involved is that you’ll make friends and create a support network, which means if things do go wrong in the future, there’ll be people around who can help you out.

Thanks for input from: Japheth Thomson, Mason James, Eric Mann, Kailey Lampert, Dre Armeda, Ronnie Burt, Simon Wheatley, Jared Atchison, Brad Williams and Remkus de Vries.

Learn

By far, the most common advice that I was given for beginners was based around learning. This encompasses everything from setting up your first WordPress website to starting out with developing for WordPress. Learning is your first step to becoming a pro in WordPress, whatever your area.

Ben Balter points out that WordPress has its own way of doing things:

“There’s the computer-sciencey way (formal MVC, elegance on paper), and then there’s the WordPress way (think actions/filters, the loop). It’s a lot more intuitive in many ways, but if you’ve been trained the wrong way, it could take a minute or two to unlearn. WordPress purposely breaks certain formal design patterns, and almost always walks away with a solution that is more elegant for the user AND the developer.”

If you’re a developer coming to WordPress for the first time, you might wonder why WordPress does things in such a WordPressy way. Once you dig deeper you will start to find it enjoyable!

Image source: opensourceway.

And if you’re coming to WordPress for the first time to build yourself a website, Jan Dembowski has this great advice:

“Don’t be intimidated. Once you have gotten your own installation of WordPress software running, understand that the magic happens via the PHP files and possibly mod_rewrite’s .htaccess rules.

Everything hitting a WordPress installation starts with a Web request, gets processed and data gets pulled from or inserted into the database. Poof! The Web page is generated. All you had to do was sign in, publish a post and suddenly you’re publishing on the internet.

If you don’t know how it all works that can be intimidating especially if something is not working the way you thought it would.”

Don’t be Afraid to Experiment

“One of the best ways to get familiar with a new product is to tinker,” says Collis Ta’eed. Sometimes the best way to learn is to take stuff apart and put it back together, to break things and to be forced to fix them.

You should take Andrea Rennick’s advice to both users and developers to “be fearless!” Even if everything goes totally wrong, you can install a new copy of WordPress and start again.

Or, as Helen Hou-Sandi says:

“Be curious about what’s out there and don’t be afraid to figure it out for yourself. Whether that means figuring out how to get a test or playground site up and running somewhere so you can try out themes and plugins without worrying about your live site, or actually reading through the code of some of those themes and plugins to see how it’s done (or shouldn’t be done), don’t get stuck in ruts or consider the first thing you read to be gospel. It’s kind of like saying ‘do your research,’ but think of it more as encouraging curiosity rather than doing homework. In the long run, you’ll know more, and who knows — maybe you can even help somebody out who’s now in your former shoes!”

If you want to truly get rid of your inhibitions, learn how to install a local development environment. Michael Krapf suggests that your first WordPress website should be a testing playground. There are plenty of tools out there that you can use to get set up. Try out installing WordPress with MAMP on your Mac or with XAMPP on Windows. Kurt Payne recommends trying out ServerPress Desktop Server.

Don’t be afraid to experiment! (Image source: opensourceway)

Add content to your website and manipulate it. Try out themes and plugins. If you’re a developer you can create themes and plugins. You’ll be able to take your time troubleshooting without worrying about having taken your website down.

If you’re starting out in development, Pippin Williamson has this advice:

“Just build something. Too many beginning developers get caught up with trying to make sure they do it right the first time, but that isn’t that important when you first start. Everyone makes mistakes, and you learn a heck of a lot faster from your mistakes than you do from attempting to learn how to do it perfect the first time.”

Remember that the scope of things that people do with WordPress is changing. Jake Goldman points out that the 2012 WordPress survey highlighted the content management system (CMS) as the most dominant use case, but that WordPress as an “app engine” is the greatest area of growth. “Other tools might offer a better fit,” he says, “but I’ll guarantee WordPress is a capable contender. Frame the way you think about WordPress in the context of a rich ‘framework’ for building great Web applications with an out-of-the-box CMS configuration, take the time to really understand its architecture, and challenge yourself to apply WordPress to challenges way outside of the box. You’ll open up a whole new world.”

Thanks for input from: Pippin Williamson, Collis Ta’eed, Marko Heijnen, Andrea Rennick, Paul Hughes, Andy Stratton, Helen Hou-Sandi, Michael Krapf and Kurt Payne.

Read

The internet has so much information out there that it can be difficult to know where to start looking. A great place is WordPress.org. Both the forums and the Codex are great resources for learning and understanding how WordPress works. Catia Kitahara started using WordPress after a recommendation from someone on a mailing list. The first place she looked for help was the Codex. Before you start asking questions of people, have a look in the Codex and the forums to see if there is already a solution.

And there is plenty of advice outside of the Codex. The internet is full of WordPress tutorials that will help you to achieve your goals. A word of caution though: If you find a tutorial or code snippet, check the date of the post. WordPress has a fast release cycle, and a lot changes over the years. The post may still be entirely legitimate, but some will be out-of-date and may cause you confusion.

As a documentation writer, I know how little people actually read the things I write, and if the documentation actually got read people would find themselves in much less trouble. I’m not the only person aware of this.

As Joshua Strebel says:

“The old joke that people don’t read, and that they read instructions even less, is as true as it has ever been. You can do your part and make the WordPress world a better place by becoming a savvy user that wants to understand and learn versus the type that refuses to think and just wants things done for them.

We have found in our business that encouraging and guiding the customer to digest the support information we have provided and educating them on not just the How but also the Why, leads to a more satisfied and happy user. Once the unknown becomes known, everyone is happier.”

Thanks for input from: Eric Mann, Joshua Strebel, Slobodan Manic and Cátia Kitahara.

Write

You learn best when you are explaining what you do to other people. It’s a well-worn saying, but true nevertheless. You may have lots of knowledge on a specific subject, but can you break it down and explain it to other people? Once you’ve done that, you know that you’ve really got a grasp on it yourself.

The first place you could start writing is on your blog. If you’ve discovered a solution to a WordPress problem, write about it and share it with the world. This way you’re helping out people who have the same problem. It’s also a great thing that a blog has a feedback loop. If you’ve got something wrong, or if there is a better way to do it, someone will tell you.

Try out different ways to reach your goal. (Image source: opensourceway)

Brad Williams knows all about it:

“Some of my earlier WordPress posts were a big help to others and some were actually incorrect. What I learned from this is other WordPress developers would read my posts and correct any mistakes I might have made in my code samples. This actually made me more comfortable with releasing my code to the public because I realized the WordPress community ultimately just wants to help, not make fun of small coding mistakes.”

This is my own experience as well. Of course, if you get something wrong there may be people who get snarky with you, but largely the WordPress community wants to help you to improve. Good content on blogs benefits the entire community.

Once you’re comfortable with writing on your blog, why not try writing on the WordPress Codex. This is another place where you can test to see if you can make your ideas as clear in writing as they are in your head.

Thanks for input from: Brad Williams and me.

Learn the Basics

When it comes to theme development, Andy Stratton points out that he learned on default themes such as Classic and Kubrick, which were much simpler than the latest default — Twenty Twelve. Twenty Twelve shows off WordPress beautifully but it’s not the most useful tool for absolute beginners. Look for simpler themes to learn from, and learn by working through simple tasks. Here are some things Stratton suggests you try:

• Creating a theme that lists blog posts, has a single post template and page template;
• Implementing comments on a single post template;
• Implementing a custom output for comments;
• Implementing date, category and tag archives;
• Implementing a widgetized sidebar;
• Creating a custom widget;
• Create a child theme that does nothing;
• Create a child theme that changes how single posts are displayed.

“Tackling these challenges individually is similar to project management techniques of splitting larger tasks into more manageable pieces. You will learn more and start to relate how these things fit together. Eventually, you would have mind-mapped most of the template and theming structure for WordPress.”

Thanks for input from: Andy Stratton.

Read the Code

If you’re a developer, you shouldn’t just be looking at the Codex or online tutorials. These will get you started but they won’t provide you with everything you need to become an expert developer.

Alex King points out that “the documentation says what the code is supposed to do, while the code says what it actually does.” Documentation can lag behind the code, especially when core patches are merged. And while you’re poking around in the code, you may find other things that are immediately helpful and that you can file away for the future.

Image source: opensourceway.

When Konstantin Obenland started out with WordPress, he started out by looking at the code. He opened files and read them. This gave him an idea of what functions were available, how the APIs work and what was going on internally.

“The biggest challenge for me was to get an idea of where actions and filters were available and how I could alter behavior. Since they are what we work with to tweak core, I would encourage developers new to WordPress to grasp the concept of actions and filters and learn about which one to use in a given context.”

Thanks for input from: Alex King and Konstantin Obenland.

Other ways to learn

Other people had suggestions of different ways to learn:

• Stratton suggests that you get paid to learn by taking on new freelance projects that offer a little bit of new stuff for you to learn. Tell your client that it may take you a little longer and that it will require a learning curve. By the end of the project you’ll have been paid for a good job done, and you’ll have acquired a new skill.
• When he started to develop themes, Magnus Jepson learned by customizing free themes he liked instead of building from scratch. “I had basic knowledge of CSS/HTML and PHP before, but by looking at how other themes worked I gained knowledge and was able to build my first custom theme for a client.”
• Ryan Duff reminds you that “you also need to be receptive to comments and criticism. Talking to others online, whether it is in forums, IRC, etc… That networking and learning will allow you to discover early on the who, what, when, where and why of WordPress.”

Build

It’s great to learn, but it’s also fun to build. If you want your WordPress website to be sustainable and secure, it’s worth putting some planning and thought into what you’re going to do. If you’re building your first WordPress website, think about the design and the functionality that you want. If you’re a developer, take some time to actually understand what it is that you’re doing.

Here’s some advice from Mike Little:

“It is so easy to search the Web and find some code to copy into functions.php that’s supposed to do what you were looking for. But if you don’t understand it, you won’t be able to fix it if doesn’t quite work, or change it to make it work differently. Equally importantly, you will eventually learn to spot bad code from good, and there is a lot of bad code out there in the wild that unfortunately finds it’s way into people’s websites. I include in that statement code that used to be good code, but is now old and out-of-date. I see a lot of code implementing some functionality that got incorporated into core WordPress aeons ago (that’s at least a year in Internet Time).”

If you’re a user or developer, a little bit of understanding goes a very long way. Planning your website and taking things slowly will help you to learn and understand along the way. With that in mind, here’s some advice for building your website.

Take Things Slowly

When you’re building your first website, don’t just rush in and think you can master everything at once. “Starting a new blog can quickly become overwhelming,” says Rachel Baker. “Don’t try to master theme design, plugin development, SEO, community building and writing viral content before you even begin writing your first blog post. Set small achievable goals to stay focused and keep up momentum.”

Learn to go slowly.

Just because there are lots of different things that you can do with your blog doesn’t mean that you need to do them. Amy Hendrix suggests that you have a plan for what you want your website to be and design what you’re going to use based on that plan.

“There are a zillion themes and plugins for WordPress that can add all sorts of shiny widgets, gizmos and gadgets to your site,” says Dougal Campbell. “Your first priority is to make sure that your site is easy for your readers to use — if you add too much clutter it can detract from your message.”

Remember that your website is for delivering a message and you should always keep your audience in mind.

That said, you should plan to go big, suggests Mika Epstein:

“You start small, with a good foundation and make it solid. Build your site with thought. ‘If I use ugly permalinks now, what happens if I want to change it later?’ You can’t know the future, but you can make reasonable assumptions. Make a hard list of your needs and your wants and be absolutely brutal with yourself. You know the difference between a need (gas for the car) and a want (a new car, when yours runs just fine).”

Thanks for input from: Mika Epstein, Rachel Baker, Amy Hendrix and Dougal Campbell.

Choose your plugins and themes wisely

When you start out with WordPress, it is very easy to think “OMG IT’S FREE!”and then get overexcited by all of the free plugins and themes out there. It’s important to keep in mind that just because something is free, it doesn’t mean that it’s good. And equally important within WordPress is that just because something is commercial, that doesn’t mean it’s good either. There are plenty of powerful, secure, free WordPress themes and plugins, and plenty of poor quality commercial themes and plugins. Learn to distinguish between them.

“Don’t install crappy themes and plugins,” says Rarst. “If you are not confident to know which are good — don’t rush to install any straight away or get someone to help you with choosing.”

You should avoid using Google to search for free plugins and themes, and certainly avoid any torrent/warez websites offering commercial themes and plugins for free. Get what you need from reputable plugin and theme shops. Emil Uzlec notes that the ratings system in the WordPress repositories makes it much easier for you to make a choice about what you’re installing on your website.

Both Andrew Norcross and Mark Jaquith suggest that you put some thought into your selection of plugins. Norcross suggests that you focus on what you’re trying to achieve and then find the right tools to achieve that. A clear idea of what you need helps to sift through all of the tools out there.

And, as Jaquith points out, what you need could actually be in core. “Don’t go crazy and add every one you see that you think might be useful,” he says “Get to know the core software first before you add a bunch of stuff.”

Thanks for input from: Rarst, Andrew Norcross, Mark Jaquith, Emil Uzlec and Sinisa Komlenic.

Know Your WordPress

WordPress and WordPress.com are two different things. Cristi Burcu suggests that you learn the difference between WordPress.org and WordPress.com so that you can decide which one is right for you. In brief:

• WordPress is open source content management system for building and hosting a website on a Web server.
• WordPress.com is a network of blogs that runs on that software.

They are two different entities. If all you want is a blog and aren’t interested in setting up and controlling your own website, then it’s worth checking out WordPress.com.

“It’s free,” says Chris Wallace “and you don’t need to understand any of the technology behind it. In just five minutes, you can be up and running with a shiny new website which has loads of bells and whistles.”

If you want more than a blog, or you want more control, you can use WordPress, the software. When you install the software, you can install any plugins and themes that you want, and have much more control over your website. Plenty of hosts offer one-click installs of WordPress. You can sign up for hosting, click a button and WordPress will be installed via a script. Or, you can sign up for a managed WordPress host like Page.ly, ZippyKid or WP Engine, which come pre-installed with WordPress and specialize in WordPress hosting.

Vid Luther quotes Andrew Spittle, who said “don’t pay less than a shrimp dinner for hosting.”

Thanks for input from: Silviu-Cristian Burcă, Chris Wallace, Vid Luther and me.

Don’t Reinvent The Wheel

Whether you’re building your own themes, starting to build for clients, writing custom functionality or coding plugins, remember that there is a lot of code out there and, since we’re in the WordPress ecosystem, it’s all open source. A great time to start thinking about building upon someone else’s code is when you are building themes.

Christine Rondeau notes that “there are tons of starter themes out there from super stripped down to others full with custom options.” Find one that suits your needs and learn it inside out. This will make it much faster for you to code websites.

(Image source: Zen Sutherland)

This advice filters into any aspect of development. Timothy Wood recommends looking for things that have already been done and finding ways to improve on them.

“The community is full of solutions that are not completed, it is the iterations that improves the solution to be extensible. I believe part of WordPress’s weakness is that a hack is considered a solution because the end goal is the visual or deliverable for implementation. Often the (give back to) community is overlooked in favor of hacking to just get it done.”

By working with other people’s code, instead of in a vacuum, you can help them to improve and give back to the community.

Thanks for input from: Christine Rondeau and Timothy Wood.

Ask For Help

Everyone needs a little bit of help from time to time, and there’s no shame in asking for it.

“There’s no such thing as a dumb question. those of us who have been around a long time have pretty much seen all the questions people ask. We really would be happy to point you in the right direction. Don’t be scared, most of us do not bite.”

That’s from Andrea Rennick, who you’ll often find helping out on the WordPress.org support forums.

As well as the support forums, Syed Balkhi suggests trying WordPress Stack Exchange and Quora. He does mention, however, that these places are staffed by volunteers. People don’t get paid for their time so be nice and polite. Take the time to research your question beforehand. The volunteers will appreciate that you’ve taken the time to do so, and you’ll have a better experience overall. Just landing on a support forum and saying that your website is broken doesn’t help anyone.

And remember, once you’ve gotten help from other people, you can help out by answering questions from others. As Mario Peshev says, “doing support is one of the smoothest ways to gain know-how in a platform and be aware of the common questions and problems.”

Thanks for input from: Andrea Rennick, Mario Peshev and Syed Balkhi.

Find a Mentor

Frederick Townes says that starting a business in open source requires passion for solving a specific problem. He suggests that:

“Early on, make sure you identify mentors that can help you with various aspects of your business as it develops: secure and scalable code, marketing strategy, customer development and support, etc. Be transparent, communities and companies are made up of people, offline relationships make all the difference in not only understanding customer / community needs, but it’s also essential to keep things simple and master the art of creating value.”

Image source: opensourceway.

Finding a mentor will help you to feel less like you’re out on your own, and there’ll be someone there who can provide you with advice, whether that’s on the business or technical side of your business.

Thanks for input from: Frederick Townes.

Make Use Of The APIs

WordPress has a bunch of APIs built to make your life easier. Ryan Hellyer suggests that programmers avoid writing unneeded code logic as much as possible. WordPress has many ways of handling the internal logic and those who don’t use the APIs often end up doing things incorrectly.

Konstantin Koshenin gets into detail about how the APIs offer easy solutions:

“There’s a lot of code in WordPress that is designed to make your life easier. Don’t use cURL or file_get_contents, there’s the HTTP API (wp_remote_* functions). Don’t design your own jobs system, there’s WP_Cron. Don’t do AJAX requests to your PHP files and include wp-load.php, there’s a lot of great stuff to deal with remote requests. Don’t write your own rewrites engine, there’s the powerful WP_Rewrite API. Other APIs to learn: WP_Query, Options API, Transients API, Shortcodes API, (my favorite) Settings API, Caching APIs and the new Customizer and Media APIs.”

WordPress has a lot going on for you to make use of, so it’s crazy to start writing things for yourself before checking out what it has to offer. And as Aaron Campbell says, “reinventing the wheel is not only a waste of time, but more likely to break in the future.”

Thanks for input from: Konstantin Kovshenin, Ryan Hellyer and Aaron Campbell.

Find A Focus

Finding a focus is great advice for anyone who’s out to get work or make a career in the WordPress ecosystem. While there is a lot of work around, the people who do really well are those who find their niche and dominate it.

Boone Gorges points out that this could be a specific market, such as verticals like music or restaurant journalism ,or a technical focus on a specific aspect of WordPress — BuddyPress, Multisite or a specific framework. He says:

“Specialization has lots of benefits. You get to know your part of the codebase, making it faster to do new and interesting things. Getting your work done faster means making more money. Expertise leads to a better reputation, and reputations are easier to earn in a niche market. The better your reputation, the more you can charge. And if your focus is on one of the non-commercial parts of the WP ecosystem, like bbPress or BuddyPress, your expertise will make it possible to get involved in the free software project in ways that might be easier than cracking into WordPress core.”

This type of focus doesn’t apply only to developers. Tammie Lister is right when she says that the “WordPress world would suffer if we were all developers.” Find the thing that you’re good at and specialize in that area — the WordPress room has plenty of space for designers, writers, support pros, entrepreneurs, business people and all the other types who make up the WordPress ecosystem.

Thanks for input from: Boone Gorges and Tammie Lister.

Go To Events

WordCamps and Meetups, or any sort of WordPress event, are a great way to learn more about WordPress. WordCamps are normally large one or two day conferences, sometimes followed by a “hack day” or “dev day” during which developers get together to work on WordPress. They usually have some sort of social element where you can learn more about your WordPress peers.

(Image source: Stefano Coviello)

Meetups are smaller events. They are usually more regular, lasting a few hours with one or two speakers. While WordCamps often have people from all over a country, Meetups are usually focused on a specific local area. You can learn about WordCamps on WordCamp Central, or find some Meetups on Meetup.com.

Brad Williams recommends that developers go to events to meet other developers — he promises that they don’t bite (I will hold him to this promise).

Kim Gjerstad suggests that you find some people to have a beer with:

“It’s good to go out and meet other people and ask their opinion so if you can find a WordCamp or find a WordPress beer after hours, go out and meet people and talk to them. It’s a whole other level of learning when you meet people, and there is so much advice to be given.”

Thanks for input from: Kim Gjerstad and Brad Williams.

Final Words Of Wisdom

• If you want to read just one website for tips to get started with your blog, Paul Gibbs recommends reading WordPress.com’s Get Focused page.
• Seisuke Kuraishi says you should keep WordPress updated, as “this is the easiest way to keep your website secure and bug free.”
• If you’re a blogger, Eric Mann suggests that you reach out. “Blogging is never done in a vacuum.” Comment on other people’s blogs, respond to comments on your own and interact with the community.
• Another one for bloggers, this time from Vid Luther. Focus on your content. “People come to your website to read and consume what you have to say, interesting content is key. Anything else is bike shedding.”
• If you’re starting a WordPress business, start it based on something that you need, says Vladimir Prelovac. “For example a certain plugin functionality, theme niche or a specific service. This way, even if the business does not take off, you will at least satisfy your own need by building it.”

Conclusion

I want to finish this article with some excellent advice from Isaac Keyet. Isaac is the Mobile Group representative at WordPress.org. His advice is applicable to anyone:

“Just jump in. If you have an idea for a great blog or website, set something basic up quickly (there are good free or cheap WordPress hosts out there) and start writing. As you go, you’ll learn more about what works and what doesn’t, as well as what your readers like the most. There really is no time like now, and too many great ideas never see the light of day because their inventor didn’t take that first step.”

Jump in, get started, don’t be afraid and always feel that you can ask for help. The WordPress community is a pretty welcoming place. Find some of the people mentioned in this article and follow them on Twitter; they continue to come up with WordPress advice that you’ll be able to use as you continue your WordPress learning experience.

Hang out in the WordPress chat room, help out on the support forums, go to WordCamps and Meetups. Everyone starts out as a beginner, but with WordPress it’s easy to get far. All you need is a little bit of patience, commitment and enthusiasm. Eventually you’ll be the one offering the advice.

Got any advice of your own? Let us know in the comments!

(cp) (il)

---

© Siobhan McKeown for Smashing Magazine, 2013.

» The role that dare not speak its name

“When a website launches, the first reactions you hear aren’t ‘Amazing site—must have had a great PM.'� Katie High wants to change that. In today’s Cognition, she calls on project managers to step out of the shadows and inspire their coworkers to new heights.

» The role that dare not speak its name

“When a website launches, the first reactions you hear aren’t ‘Amazing site—must have had a great PM.’� Katie High wants to change that. In today’s Cognition, she calls on project managers to step out of the shadows and inspire their coworkers to new heights.