Our Blog and Vlog, the latest happenings in multimedia...

Fast Websites That Are Easy To Run and Manage


Get your fast website with a totally cool management system that's loaded with features here...

We've Got All The Top-Shelf Features Already Baked-In


Like free stuff that rocks? Install the hottest web apps in 1-click automagically from a growing 250+ selection...

We Do Web 2.0, 3.0 or Whatever The Latest *.0 Might Be


Deep knowledgebase and resources, video tuts, killer tricks-tips, sweet themes, plus much more...

Desktop Wallpaper Calendar: January 2012





 



 


We always try our best to challenge your artistic abilities and produce some interesting, beautiful and creative artwork. And as designers we usually turn to different sources of inspiration. As a matter of fact, we’ve discovered the best one — desktop wallpapers that are a little more distinctive than the usual crowd. This creativity mission has been going on for over two years now, and we are very thankful to all designers who have contributed and are still diligently contributing each month.

We continue to nourish you with a monthly spoon of inspiration. This post features 20 free desktop wallpapers created by artists across the globe for January 2012. Both versions with a calendar and without a calendar can be downloaded for free. It’s time to freshen up your wallpaper!

Please note that:

  • All images can be clicked on and lead to the preview of the wallpaper,
  • You can feature your work in our magazine by taking part in our Desktop Wallpaper Calendar series. We are regularly looking for creative designers and artists to be featured on Smashing Magazine. Are you one of them?

A New Ending

"Wishing everyone a lucky and successful year 2012!" Designed by Lina Itskovitch from USA.

Smashing Desktop Wallpapers - January 2012

Red

"Photo taken at a friend’s house with one of her toys and my glass of rose wine. It’s perfect for a cold winter day, warmth for the soul and body." Designed by Diana Samoila from Romania.

Smashing Desktop Wallpapers - January 2012

Caucasian Mountains

"From Caucasus with love!" Designed by Ilona from Russia.

Smashing Desktop Wallpapers - January 2012

Bloody January

"Something to cure that New Year’s hangover." Designed by Suety Kwan from USA.

Smashing Desktop Wallpapers - January 2012

Back To Go To Work

Designed by Forsaken from France.

Smashing Desktop Wallpapers - January 2012

Royal World

"Our first submission to the Desktop Wallpapers. To start a great new year, we designed a world that represents our goals and aspirations for this new year." Designed by Javier Castillo from Guatemala.

Smashing Desktop Wallpapers - January 2012

Cold Flakes To Write Home About?

Designed by Marc James Productions from Sault Ste Marie, Canada.

Smashing Desktop Wallpapers - January 2012

Winter Melancholy

Designed by Aleksandra Laczek from Poland.

Smashing Desktop Wallpapers - January 2012

The Year Of Dragon

"Dragon is the legendary animal in the Chinese zodiac calendar." Designed by Cheloveche.ru from Russia.

Smashing Desktop Wallpapers - January 2012

Delicate Frost

"Don’t let Jack Frost nip too much at your nose but do let him decorate your windows!" Designed by Tirelessweaver from Canada.

Smashing Desktop Wallpapers - January 2012

Resolution Libs

"It’s time for New Year’s resolutions! And the best way to keep them is by writing them down and keeping track of your progress. So this wallpaper is a recreation of the chalkboard in my house." Designed by Illuum Design Team from Canada.

Smashing Desktop Wallpapers - January 2012

Carry Warmth Carry Each Other

Designed by Marika Smirnova From “oblako Studio” from Russia.

Smashing Desktop Wallpapers - January 2012

What’s On Your Mind?

"Sometimes it seems that girls are from another planet. I just can’t figure out, whats going on in their heads…" Designed by Kristjan Ait from Estonia.

Smashing Desktop Wallpapers - January 2012

Facts

"I was reminded of a simple fact while I was browsing for inspiration for this wallpaper. I’ve read on Wikipedia that January is the coldest month on most of the northern hemisphere and the hottest one on most of the southern hemisphere. I found it fascinating that someone in Australia is enjoying a surf while I am watching the first snowflakes of the winter. I was hoping to create a wallpaper that will serve as a reminder of the fact that we live in a fascinating world full of varieties and contrasts. The old-worn-out-encyclopedia style hopefully emphasizes the educational theme of the wallpaper :) ." Designed by Danijel Gajan from Serbia.

Smashing Desktop Wallpapers - January 2012

Memorize Me

"This calendar has 4 sheets. Each sheet shows 4 months.The Sundays of these 4 months are colored in the order of the rainbow colors.If you commit these columns to memory, you won’t need to resort to any pocket calendar or electronic device to know when the next holiday is, to know the date of the first Monday of the next month…." Designed by Araz Kelian from Lebanon.

Smashing Desktop Wallpapers - January 2012

Soft Wishes

"Let yourself be carried away by the delicate desires of your heart…" Designed by Katia Piccinni from Italy.

Smashing Desktop Wallpapers - January 2012

Bonsai

Designed by Marta Miazek from Poland.

Smashing Desktop Wallpapers - January 2012

Owl

"The first month of phpfaber’s calendar for 2012 with our hero Owl." Designed by Katerina Bobkova from Ukraine.

Smashing Desktop Wallpapers - January 2012

Join In Next Month!

Please note that we respect and carefully consider the ideas and motivation behind each and every artist’s work. This is why we give all artists the full freedom to explore their creativity and express emotions and experience throughout their works. This is also why the themes of the wallpapers weren’t anyhow influenced by us, but rather designed from scratch by the artists themselves.

A big thank you to all designers for their participation. Join in next month!

What’s Your Favourite?

What’s your favorite theme or wallpaper for this month? Please let us know in the comment section below! And Happy New Year 2012!

(il) (vf)


© Smashing Editorial for Smashing Magazine, 2011.

Tags: - - - - - - - - - - - -
Read More...

Freebie: Free Vector Web Icons (91 Icons)





 



 


Today’s freebie may be the last one for this year, but that doesn’t mean it will be the last of our freebies on Smashing Magazine — no siree! Before this year does come to an end, we are happy to present to you a fresh new Web UI set includig 91 icons created by August Interactive for the holiday season. The set is a collection of widely used UI elements, including volume, zoom, player, view, and download controls.

Freebie Preview

Designed by Tomas Gajar, the set was developed using Adobe Fireworks and has been exported as a fully editable layered Photoshop file as well. The set is clean, pixel perfect, and meant to full your everyday needs for UI design.

Download the Set for Free!

This freebie offers vectors, all scalable, Adobe Photoshop PSDs as well as Fireworks PNGs. The icon set is completely free to use for commercial or personal applications without any restrictions. Please link to this article if you want to spread the word.

Full Pack

Fully Scalable

Behind the Design

As always, here are some insights from the designers:

“For us, the end of the year usually brings some precious time to reflect on our work and how our love for design remains relevant to the user interface design community. Our revelation this year is that clean, pixel perfect vector icons have become immensely important to our work. This means we typically spend the extra time to develop the icons that fit the specific need of the job at hand. As you can imagine, this ‘extra’ time takes considerable effort — effort that is often not a part of a clients’ original scope of work.

These holidays, we decided that the best gift we could offer our friends and colleagues is free access to some of our favorite custom UI icons. They are available in Adobe Photoshop PSDs, and for our really special friends, Fireworks PNGs. All vector, all scalable, all free to use for commercial or personal applications. Stay tuned for more in 2012!”

Thank you, Tomas Gajar and August Interactive. We appreciate your work and your good intentions!

(il) (vf)


© Smashing Editorial for Smashing Magazine, 2011.

Tags: - - - - - - - - - - - -
Read More...

The Myth Of The Sophisticated User





 



 


As I sat in my local co-working space, shoulder-deep in a design problem on my MacBook Air, I could hear him. He was on the phone, offering screen-by-screen design recommendations to his client for the project they were working on. When this acquaintance of mine arrived at the subject of a particularly hairy task flow, he said, “Well, these aren’t going to be very savvy users, so we should probably put some instructions there.” He followed this by rattling off some dry, slightly too formal line intended to clear up any confusion about the page.

The Myth Of The Sophisticated User
Image Source: Robb North

It was an act that reflected his apparent belief that some savvier type of user is out there who would immediately understand the screen and could live without the instructive text. I cringed. I’ve heard the same suggestion on far too many phone calls, and it’s been wrong every time. To shed light on my reaction to it and to illustrate why such a suggestion is problematic, let’s consider a quick tale of two users.

A Tale Of Two Users

First up is the type of user who my acquaintance thought he was trying to help. Let’s call him John.

John is a guy with little experience using the Web beyond the typical. He pays a few bills, Facebooks a few friends, buys the occasional bauble, but he has found himself having to use this fancy new internal Web app as part of his job, the one designed by the person in my co-working area.

At the next desk over is Jane, a tech-savvy user who spends nine hours a day doing one thing or another on a variety of screens — her laptop, her phone, her tablet — and whose hobby is loading up on as many apps as she can find. She’s never met a problem the Internet couldn’t solve. She has chops, and she loves to use them.

When John approaches this complicated Web app, he knows a couple of things: that he has to learn to use the thing in order to do his job, and that he often struggles to understand the complicated interfaces that seem to come at him from every direction these days. He’s not excited about having to cope with this one, too.

Jane, on the other hand, is a “producer.” She gets things done, and she pushes this app’s buttons without hesitation. The list in her to-do app has a hundred things on it, and doing work on this app is just one of a slew of tasks whose ass she’ll kick before even heading out for lunch.

John and Jane both see the same screen, but they see different things there. Their understanding and familiarity with it are not the same; their confidence in conquering it is at different levels; and different psychological factors are at play when they interact with it. For John, the pressure is in figuring out how to do this part of his job so that he can get back to nervously doing the others. For Jane, the pressure is in cranking through this so that she can devour the next item on her list.

Identical Needs

Now comes the part that too few people who make design decisions realize: while John and Jane have different problems and are different types of users, their needs are identical. In short, they both want to get the hell off this screen. John is unconfident, and Jane has other things to do. They both need the screen to make sense. They both need the task flow to be obvious. They both need to just get past it.

So, which user was my acquaintance helping by adding instructions to the page? In truth, the answer is probably neither.

The only reason a line of instruction would help John is because the screen was designed for Jane, whose vast experience helps her decipher the purpose, benefit and flow of this task. And that’s exactly the problem. Jane, though perhaps more likely to work her way through the screen with some success, has better things to do than struggle with it. She may have more technological experience, but she’s in a hurry. Besides, a poorly designed screen can make Jane feel as much of a moron as John feels. Her experience means nothing against a screen that wholly fails to explain itself.

John is less likely to recognize design patterns or to be able to parlay his previous experiences to this one. Jane is more likely to recognize patterns, but only if they’re used in ways she’s familiar with or can quickly adapt to (although weak designs are weak usually because established design patterns have been misused). John’s lack of confidence pitted against a tough design might kill his desire to ever work with it again. And Jane, despite being ready and willing to fight through it, will not be any more loyal after the battle.

In short, Jane is just as likely as John to walk away from this screen frustrated. And no line of instruction will compensate for a bad design.

Frustration Is Frustration

Despite hearing it all the time from designers and executives alike, the notion that tech-savvy users will be more amenable to difficult interfaces is, in a word, crazy. Yes, some users, when asked, would prioritize user control over ease of use (and vice versa: unconfident users would prioritize ease of use over control), but does this mean that the tech-addicted among us will more readily understand an unclear message, tolerate a poor task flow, or swear by a product that they themselves have trouble using? Heck no. Complexity can be managed, control can be beneficial, but frustration is never a good business strategy.

It doesn’t matter how savvy your users are, better design benefits everyone. Having a proficient audience is no excuse to slack off. You’re still designing for human beings, and human beings, one and all, have better things to do than try to make sense of a weak design.

You’re A Jane

If you’re reading this, odds are that you’re a Jane. You are a tech-savvy, confident user who jams those buttons down like there’s no tomorrow, fearlessly marching your way through whatever task stands in your way. When was the last time you had the time and willingness to put up with a poor interface from a company that thought it could get away with it because you’re an experienced user? When was the last time you liked it? When was the last time you recommended an app with such a design?

The next time you’re designing for John, remember that you’re also designing for the Janes of the world, too. Their to-do lists will be the better for it.

(al)


© Robert Hoekman Jr for Smashing Magazine, 2011.

Tags: - - - - - - - - - - - -
Read More...

Teach Them How To Hit The Ground Running And Faceplant At The Same Time?





 



 


A few days ago, a tutorial on how to Create A Christmas Wish List With PHP was published on Smashing Magazine’s Coding section that frustrated me. It frustrated me as it was incredibly easy to predict the comment reactions it caused. It also frustrated me as it was a classic example of a tutorial resulting in very happy readers who will go out and cause a lot of terrible things on the Web unless they understand that this was meant as a “beginner tutorial”. A lot of the bad feedback was about security — something we shouldn’t take lightly.

It frustrated me mostly because it all happened on Smashing Magazine, a well-respected online publication that is read by many beginners (especially in back-end technologies) and one that is dedicated to quality content with an advisory board (one of which is me) meaning that every article gets reviewed by experts before it is published. This one slipped by in the rush of the holidays, and it was updated a couple of hours after it was published, i.e. the editors added an editor’s note and addressed some important missing points. I am happy that it was published in its original form as it inspired me to point out some things that I see happening in online magazines a lot lately.

The predictable outcome of this kind of tutorial is:

  • Seasoned developers will find issues with the code and claim that it should not be done that way.
  • Other people will disagree and tell the old men to stop telling young kids to get off their lawn.
  • Real beginners will chime in and say that they are very happy about the article and getting the feeling that things are not as complex as they seem to be.
  • A lot of fanboys will mention technology XYZ that makes this much easier.
  • The author will add more disclaimers about the nature of the code within the article with some edits and add warning messages about its viability in the wild — saying that this is just demo code.

Quick Wins Full Of Traps

“Quick tutorials for beginners” are killing our craft. Instead of pointing to existing documentation and keeping it up to date (in the case of the wiki-based docs out there) every new developer turned to an author wanting the fame for themselves. And a lot of online magazines cater to these to achieve “new” content and thus visitors. We measure our success by the number of hits, the traffic, the comments and retweets. And to get all of that, we want to become known as someone who wrote that “very simple article that allowed me to do that complex thing in a matter of minutes”.

Teacher/Learner

Image credit: Opensourceway.

Instead of teaching the underlying technology, we tend to show a quick, beautiful implementation and put a lot of effort into it. We teach a “create something amazing in 5 minutes” and hope people will care enough afterwards and look at learning the underlying technologies. We aim to whet their appetite whilst giving them full solutions. The reason is that this is exactly what we wished we had had when we learned that thing in the first place. Sadly, this is not how teaching and learning works.

Road Safety Begins In A Classroom

At this moment, let me go back in time a bit. Growing up in a small village having a driving license and subsequently a car was a vital part of your social life and also your work options. Therefore, I couldn’t wait to get mine.

Now, what you want to do is to learn driving. You want to get into the car, go vroom-vroom and be off. The reality of getting a driving license though (at least in Germany where there are no speed limits on the motorway and therefore it is taken very seriously) is that you spend quite a lot of evenings in a boring classroom before you get behind the wheel. You learn about the code of the street, the different signs and what to do in all kind of situations in a car. You even learn about the different parts of the car and what they do.

The reason is that it scales better — you need to learn all that stuff and it is much easier to pack 40 students in a room to teach the basics before you try to make up a schedule where all of them can drive out on the road. As a driving school, instead of 40 cars you can get by with 5. And students who already know what they should not do and where things are in a car are less likely to crash them.

Educators Learning From Bad Experiences?

This is frustrating and annoying, the same way learning things at school without being told what they are good for is surely annoying. On the Web, we want to be different. We want to make learning fun and we are tempted to put in as much as possible for beginners so they can get past the basics very quickly and build the awesome of tomorrow instead. The author actually mentions that in the comments:

“I think teaching people to do things is very complicated, doubly so over the internet. If I were teaching a university class I would take a very different approach.”

Yes, teaching is hard. That’s why not every gifted developer is also good at explaining or a good trainer.

While it is a very good idea in our heads to give people quick solutions with real results instead of step-by-step basics, we forget how we actually got there. Once we reached the level in a skill to be educators in it, we went through a lot of trial and error using the skill. By avoiding this, we strip others of the chance to learn a skill on their own terms and with their own obstacles to overcome.

How About Writing Beginner Tutorials Covering Beginner Tasks?

So, I think it is safe to assume that there are two needs/aims battling when we want to write a beginner tutorial, i.e. we want to teach people good practices and we want to get them as far as possible with the least effort. A lot of times these don’t go well together.

jQuery is a poster child of great “new” Web development. “Write less, achieve more” is the mantra and I love that we have it. jQuery achieved this by replacing JavaScript and the unwieldy DOM with a clever and fast API and a totally new syntax: chaining. This is great. This is how to do it. jQuery abstracts the annoyances and complexities out into its core and lets developers write code. You cannot just take this approach and mantra and apply it to any technology without providing a simpler API/platform that abstracts the dangers and annoyances.

Teaching Non-Live Code On The Web?

The discussion that happened in the comments of the aforementioned article was mostly about security and the inability of implementing the code discussed in it in a real environment. And yes, they are very much valid. The code is good as an exercise but awful as a live example. Putting it on an live server means you are open to any kind of attacks and scripts looking for zombies to infect — not to mention how a botnet would have a field day with it!

And the author knows this. This is why a lot of the article is dedicated to explaining that this is not live code:

“Please notice that this article was written for beginners who already grasp HTML and CSS, know a bit of PHP and have seen phpMyAdmin before. I will not go into best practices, safety and all the rest of it; let’s just have fun with this one!”

And later on — as a response to some feedback, even more “don’t do this” was added:

“Note that this is meant as a beginner’s exercise. The code you see here will give you the intended result, but a lot of it is not safe for production websites. It lacks a lot of safeguards, such as data validation, salts for passwords (for better security), htaccess rules and so on. The goal of this article is to let beginners forget about all of these things and just concentrate on building something nice.

Neither does this article promote best practices. You may find yourself adopting different methods later on, or I may write in another article that we shouldn’t do something you see here. The article is intended as a fun little example for beginners to spice up their boring theory sessions. I believe that the best way to learn is through increasingly difficult examples.

That said, I encourage you to try all of this out and play around with it at home or on your servers. If you put this on a live server, I recommend using an account that has only this website on it (or only test websites). I also recommend using passwords for user accounts that are not the same as your other passwords.”

This, actually very much is against the very idea of a beginner tutorial. A beginner tutorial gets people on the way, i.e. it teaches them the first steps and what one can do with it. As these quotes show, teaching people PHP by starting with SQL and writing a login system and file uploader is obviously the wrong way.

Out of a sudden, the simple beginner tutorial is “intended as a fun little example for beginners to spice up their boring theory sessions” (cited). What boring theory sessions? I thought we are building something from scratch here?

Piling On Too Much

The article tries to teach four things at once: SQL with PHP, login and session control, file uploads and how to build a beautiful Web interface powered by PHP. The login system and the file upload is where it gets very dangerous in terms of security. This is not a beginner tutorial — it is giving beginners the wrong impression that everything is easy and everybody else probably just does it wrong and cares far too much about boring details.

We should not teach new developers that they can do things in a few lines of code and keep quiet about the bad effects this has. This is condescending and based on an assumption that people learn only from successes on the Web. The author mentions that in the comments:

“I don’t think beginners need to concern themselves with SQL injection attacks. The point here is to start to learn something, not to learn everything at once. When someone understands SQL at all, then teach them about the problems, not before.”

This is very dangerous thinking — if you teach how to do something, also make people aware of the consequences it has. I totally agree that the point is to learn something. Defining the “something” is the skill of a good tutorial writer or educator. We focus far too much on the final product to be built, rather than the components we use to get there.

This is where using a complex example like a “Christmas Wishlist” that needs a login, uses a database and has an upload feature for any file is a bad choice. There is no way to keep this “simple” unless you teach people how to write code exclusively for their own localhost.

Let’s Not Assume That People Read And Care As Much As We Think They Do

One comment was quite interesting as a summary, as it very much sums up some of the comments and assumes good on the side of the readers:

“Good stuff just to have some fun and help the super beginners get a quick footing. I think a lot of the people commenting here are either A) Too seasoned to look this far back, and not doing things the “proper” way just irks them, or B) I’d be willing to bet some are just flexing their programmer’s ego a bit.

I think assuming that people will take this as serious programming and build from it, building the wrong way, is a bit too much of a stretch. Anyone who can read and who cares about doing things the right way will take the author’s disclaimer to heart. If not, odds are they’re looking for the easy route. If that’s the case, you can’t really stop them. This article isn’t ending the world.”

I agree, it is not. But it also brings nothing new to the table. When I learned PHP coming from Perl in around 2000, I read thickbook.com and — except for the CSS styles — it had similar examples. Over the years we learned to protect our systems more. I think the assumption that readers will care much about the “this is not live code” doesn’t cover one main use case of “beginner tutorials”, i.e. that people will most probably find the article via a Google search and simply use the code example in a live environment without reading the tutorial or the comments. All they wanted was a quick, simple to understand example after all and beginner tutorials have those, right?

In My Humble Opinion

Image credit: Opensourceway.

Want proof of that? Look at the success of W3Schools.com. The Web is full of materials to learn the same things. The quick “here’s the solution — don’t worry about how it works right now” are the most successful ones. We also have a Web full of systems that lack very basic quality and security features and we spend months educating hires in companies what developing production code means when you protect the data of our users.

I think it is time to stop chasing the hollow success of creating a “quick tutorial” that is actually a “bad implementation with quick, sloppy code” in disguise and start curating what is already on the Web. We can then concentrate on the next level tutorials.

I think Web-based education will be a big thing in the near future, and creating a new generation of Web makers should be on all of our agendas. We do this with tools, great documentation and frameworks, and not with a “write this, it is awesome” approach.

(il)


© Christian Heilmann for Smashing Magazine, 2011.

Tags: - - - - - - - - - - - -
Read More...

How Do You Deal With Overstressed, Irrational Clients? An Entrepreneur’s View





 



 


As an entrepreneur who has been on the client’s side of the design and development process, I’d like to discuss the thought process of the client, as well as some effective ways to interact with them. For example, why do they ask for Shakira music on the home page? And how do you respond to that?

I was recently referred to Sam Barnes’ piece on Smashing Magazine “How to Explain to Clients That They Are Wrong.” The article was well written and made a lot of sense to me, but there are two sides to every story, and I’d like to add value to the argument by responding from the client’s point of view.

For the most part, Sam did a great job of discussing how to evaluate and act on poor decisions made by clients. What he missed, however, was the impact that the nature of the relationship between clients and creatives has on how decisions are made by both sides. By “creatives,” I mean anyone involved in the design or development of a website or application. Understanding this relationship will enable you, and your clients, to make better decisions about the product.

What’s On the Line For Us

Before getting into the decisions that entrepreneurs make, let’s look at some of the factors that motivate these decisions. Setting the scene will shine a light on the thought process of entrepreneurs and give you a better idea of how to deal with them.

You’ll notice I use the terms “entrepreneur” and “client” interchangeably. Even if your client works within the confines of a corporation, as opposed to at the top of a new venture, it would not be unusual for them to act in an entrepreneurial capacity. And even if they aren’t entrepreneurs, but middle men who were assigned the project, chances are they will still behave accordingly.

Formal design reviews
How do you deal with clients who often come up with weird, irrational requests? Image source

First, let’s think about the person you’re working with. They believe in an idea. They believe in it so much that they’ve left a paying job for it. They’ve worked nights and weekends for it, alienated their spouse, friends and family for it. They’ve begged, borrowed and stolen for the opportunity to pursue it. They’ve put everything on the line for their idea, their vision. And you know what the most important part of their vision is?

You.

It’s not them. And to be honest, it never really was. The first question investors ask after hearing someone’s idea is, “OK, who’s building it?” Your client knows that their creative team is the only thing that can make their idea a reality.

You’re the most important piece of their puzzle, and, despite what they tell themselves, what they know about you before starting the project is often limited.

So, how did they find you?

Clients turn over every stone in search of a designer or developer, because, by that time, the necessity of a good creative team has settled in. Entrepreneurs might look harder than others because of the pressure of their particular situation, but the importance of a good creative team is lost on no one. And this isn’t like finding a lawyer, a doctor or even a girlfriend.

It’s way harder.

The Leap of Faith

There are three gigantic problems with the process of finding a creative team. First, the client has probably never done this before. Secondly, finding a creative team is tough. Products such as Elegant.ly will help, but because clients generally don’t speak your language, assessing the strengths of a firm and how it would mesh with their product is difficult. When the team I picked told me they were experts in Ruby on Rails, my first thought was, “Is that a train or a restaurant?” Thirdly, and by far the most important point, for those of us not in the Web design or development community, feeling comfortable with our evaluation of creatives is impossible.

This is a relatively young industry, one with very low barriers to entry. Heck, my designer took his first client when he was 13. There are very few, if any, metrics we can use to evaluate a creative team. We can look at its past work, speak with the head of the team and maybe get some sort of sample or mock-up, but for the most part, we are flying blind. There are no requisite degrees, certifications or guarantees. If you go to a physician who hasn’t finished college, you probably wouldn’t be willing to let them operate on you. A developer who hasn’t gone to college could build you the next Foursquare.

The Search

In our search for a creative team, we come upon cousins and uncles of acquaintances, people who have designed investor-relations websites for Fortune 500 companies, people who wait tables but build iPhone apps on weekends. We have absolutely no idea what to think of all this.

First-time clients especially don’t understand how hard their product is to create, or how long creative design takes, or even if you’ve done this sort of work before. It’s all Japanese to them, and it’s an enormous leap of faith. All we can do is look at some of your prior work and decide whether we like it. In what other sphere of life would you make a decision this important on a gut reaction? (Wait, don’t answer that.) It’d be like grabbing someone at the grocery store and asking them to marry you because you both have Fruit Loops in your carts.

Even when we look at successful companies in our fields, their success is not always commensurate with the development or design of their products. Take Craigslist: great business idea, poor design; but it doesn’t matter because the content is great. On the other hand, Flipboard’s design is fantastic, and that’s enough to make the product successful, even although its functionality isn’t really revolutionary.

Flipboard
Flipboard.

Grasping For Control

With reservations and doubts lingering in the back of the client’s mind, in steps the creative team. You start pumping stories into Basecamp, PivotalTracker or some other product-management system that the client’s never heard of, and suddenly they are on your turf. Now the client works when you work, and often sits quietly on their hands when you don’t. The product goes when you say it goes, and their input is limited. Worst of all, we flat out don’t understand what you’re doing.

This is extremely hard for people who are used to complete control. Your client has gained so much momentum to get to this point that, when the creative team takes charge, the ground drops from under them like they’re some unfortunate cartoon character. This reversal of control is jarring.

This would be fine if the entrepreneur was working with a lawyer, an accountant or even a bank. But early on in the life cycle of a company that depends on a creative team for its success, nothing, and I mean nothing, is as important as the creative team. And our control over the success of this phase is so limited. That’s why we make uninformed suggestions like, “Let’s make that @ symbol spin,” and “I think users would like some Shakira playing when they land on the home page. I know I would.” Because we’re grasping at straws.

We are trying to hold onto our vision, because suddenly it’s in your hands. We may know what we want, but we often don’t know how to do it, and we have trouble expressing it. I’ve often found myself telling my developer things like, “I want a magic search box that pulls information from the Facebook API [I learned that term a few months ago, no big deal], Twitter and Foursquare and spits out relevant people based on our compatibility algorithm,” only to have him respond, “… Yeah. Let’s start by allowing users to log in with their Facebook account.”

I know how I want the product to feel to the user, but I have no idea how to get there without my team’s help. Saying, “I want it really simple, easy to use and elegant” is not helpful. Grasping at some visual element that we comprehend is sometimes the only bullet in our gun.

So, How Do You Deal With Overstressed, Irrational Clients?

Now you have an idea of the sometimes fragile psyche of the client. The question is, how do you handle us when we say we want Shakira?

Sam’s points are all well taken and, for the most part, right on. But they are directed at a rational, faceless client. The overview is good, but implementing it in real life would be difficult. So, here is the perspective of a client with a face. The following five actionable tips should drastically help your client relationships.

  1. Show us.
    This one is the most important. It’s very hard for us to visualize our idea. We know how we want the product to feel, but we don’t know how to get there. We would certainly recognize that Shakira isn’t the answer if you showed us this on our website — or on a comparable website if building our mistake would be too time-consuming. Usually, if the client was savvy enough to get to this step in the process, they would know what works and what doesn’t. And if they don’t, their idea is hopeless anyway.
  2. Tell us.
    This one wasn’t in Sam’s points. Good entrepreneurs are flexible and can adjust their vision to meet the reality of the situation. If we want something, but you think it would take too long and not be worthwhile, tell us. Suggest a workaround if you want, or just ask us if there’s another way. Entrepreneurs are usually great at creative solutions; we make our living by avoiding barriers. But we can only avoid barriers if we know what they are.
  3. Explain the rules of the game.
    If you’re building a basketball, you know what you can and can’t do. You could probably make one that’s bouncier or more durable than competing products. But you couldn’t make one that goes in the basket every time. You know your limitations, but sometimes we don’t, and creativity is only able to flourish inside the box of reality. Because we don’t know the rules of the design and development game, we often don’t know what’s possible. More often than not, we’ll assume that something isn’t possible when it actually is. The head of my creative team had a good solution for this: he created a folder of ridiculous ideas that I wished could be part of the website, and I dumped stuff in there from time to time. More often than not, he’d ping me saying, “Hey Brian, that’s possible. Let’s try it out.” Being creative is difficult when the canvas is blank. If you can give us a line to start with, some sense of what you are capable of, it’ll help us enormously on the creative side.
  4. Be confident and enthusiastic.
    Everyone appreciates an expert. Sam touches on this, and it’s extremely important. When I told my designer that I was considering profile pages that end users could design, he said something like, “Well, it certainly worked for MySpace.” Point taken. Demonstrating your expertise puts clients at ease and instills trust in your decision-making abilities. Also, don’t be afraid to occasionally ask for forgiveness rather than permission (as long as the change is not customer-facing). It will reaffirm that we made the right decision. Nothing is more invigorating than someone who believes in your vision.
  5. We can’t act like locals.
    Clients aren’t completely oblivious to their mistakes, either. They know that some of their suggestions are absurd. They know that they don’t understand this stuff one-tenth as well as you do. They know they’ve stepped into a subculture that they couldn’t possibly fit into. It’s like when you go on a ski vacation and try to act like the locals. No matter what you do, you won’t be one. And we hate that we are an outsider in your world. That manifests itself in a number of ways: weird suggestions, holding firm on an irrelevant point, demanding certain color schemes that probably don’t matter (but sometimes do). This will still happen, but now that you know where they’re coming from and how to assuage them, you should hopefully have a more effective connection with clients. On the flip side, expect to be treated with the same level of suspicion and hesitation when you step into our world. Sam urges you to speak the client’s language, to set goals in business terms. Be very careful with that one. Misusing one business buzzword can waste your credibility, just as one suggestion for a spinning @ symbol will make you wary of any other design ideas. Discussing markets that you have exposure to but aren’t immersed in can have adverse effects. Know that we are all tourists. Which leads to the final point.

The Odd Couple

In writing this article, I realized how odd the relationship is between creatives and clients. Without my creative team, I would have no shot at getting my company off the ground. I rely on them 100%, but I have no clue what they do, how they do it or if the work they do is reasonably priced. This forces me to try to speak their language, to attempt to enter their world by learning quickly, and to try to maintain control of a vision that they are responsible for bringing to life.

Creatives, on the other hand, rely on clients only somewhat. They don’t live and die by each project, as clients do. Their work is in great demand; many of the firms I considered are growing quickly in this recession.

However, bits and pieces of Web design and development work are slowly being fragmented and commoditized, and for the same reasons that evaluating designers and developers is difficult: the barriers to entry are low. This opens the door for 99Designs to pick off clients, especially vulnerable entrepreneurs. These services leverage the crowdsourced model by matching designers who have little or no experience with clients who don’t understand the nuances of the craft well enough to be able to tell. This pushes creative firms to differentiate themselves through means that clients can understand. Business acumen is an incredibly helpful skill for creatives to have, and something 99Designs can’t offer.

Summary

So, we’re left with two groups, each possibly operating in unknown waters, working to create a product that requires both of them to be firing on all cylinders in order to succeed. That being said, do business-savvy creatives exist? Heck, yeah. I’ve got them helping me build my company, and it makes all the difference in the world. Do design- or development-savvy entrepreneurs exist? Probably. I’ve got a Mac — does that count?

The goal is to establish a working relationship between the two parties that leverages the strengths of each to quickly and effectively create a product and bring it to market. The tips above should help those working on the creative side. I’d be interested to hear a designer or developer’s take on what I should be doing to get the best out of my creative team. After all, we’ve got to have more in common than liking Fruit Loops for this thing to work.

Go easy on us poor entrepreneurs. I realize we make dumb suggestions sometimes, but it’s just an attempt to maintain some control over a process that we occasionally feel we’ve lost control over. And consider the business decisions that clients make from both sides. We’ve had a lot of practice with this stuff.

Related Articles:

You might be interested in the following related articles:

(al)


© Brian Scordato for Smashing Magazine, 2011.

Tags: - - - - - - - - - - - -
Read More...

The Smashing Deals Countdown: Three More Days Till Christmas





 



 


As the end of the year approaches and the holidays near, many of you might already be pondering your new year’s resolution for 2012. Before you get back to serious business in the new year, you should lean back, relax, spend some quality time with loved ones, and give a good book or eBook a closer look. After all, you don’t want to fall behind just as the year begins, do you? This is an occasion to catch up on developments in the fields of Web design, Web development and coding.

The Smashing Bundle Countdown To Christmas

For each of the last seven days, we have been offering a different special bundled deal. We hope many of you have found an appealing offer in there, and we hope we were able to inspire some of you to get your colleagues and office friends a resourceful printed book or an eBook for the new year. In this post we’d like to kindly inform you about the books we’ve prepared for the last three days of our Bundle Countdown to Christmas and we are confident that they will make your visit to the Smashing Shop worthwhile.

The last three Smashing Christmas Bundle Deals
The last three Smashing Bundle Deals of the year.

December 22nd – “Mobile Bundle” for just $9.99 instead of $20.93
Today Santa is mobile and so you should be, too. The “Mobile Design” eBook offers everything you need to keep up in the mobile Web game. Insights, techniques, trends and tips on getting your own mobile app set up are only a few clicks away. In addition to that, we threw in a mobile portfolio for your work. Be prepared and start the new year by optimizing your future projects for mobile use.

December 23rd – “Coding Bundle” for $9.99 instead of $17.82
Coding night, jQuery bright… This bundle is a treat for all truly smashing coders. It covers CSS, jQuery and JavaScript at an intermediate level. The eBooks are all authored by experts of the respective field and offer the Smashing quality you are used to. Two of the three eBook have just been published. Be one of the first to enjoy the still dewy read!

December 24th – “Smashing Book Super Bundle (Print + Digital)” for $34.99 instead of $89.96
Finally, the Christmas Eve bundle deal is the grand finale. We are proud to present the Smashing Book Super Bundle with both printed and digital versions of the Smashing Book #1 and Smashing Book #2. Each book comes in a printed and a digital version (EPUB, PDF and MobiPocket formats). If you’ve been avoiding the Smashing Books until now, you won’t be able to pass them up any longer. Read some of the outstanding reviews that the Smashing Books have received, and let the readers themselves convince you.

Let’s Get Merry!

Now you’re all set for these last Smashing special bundled deals of the year. We sincerely hope you find our offers valuable to you and your colleagues, and perhaps you’ll find gifts for people who you never know what to give. Please keep in mind that all Christmas deals are valid only for 24 hours and then will be offered at the normal price.

Thank you for reading, dear friends. We wish our worldwide Smashing community a blissful last couple of weeks of the year. Enjoy the countdown to Christmas Eve and always remember to stay Smashing!

Yours sincerely,
The Smashing Team

(al)


© Smashing Editorial for Smashing Magazine, 2011.

Tags: - - - - - - - - - - - -
Read More...

Freebie: New Twitter Profile Page GUI PSD





 



 


Today we are glad to release a yet another freebie: a Twitter GUI PSD for the recently released Twitter UI update, designed by Jon Darke of Every Interaction and released exclusively for Smashing Magazine and its readers. The PSD provides the full mockup with all layers in vectors, allowing you to scale up the design elements without loss of quality. The set includes two versions: one for personal accounts and also the new Twitter Enhanced profile page with 835×90 header image for brands and advertisers. The set is compatible with Adobe Photoshop CS4+.

Twitter GUI Preview

Download the Set for free!

You can use the freebie for all your projects for free and without any restrictions. Please link to this article if you want to spread the word. You may modify the file as you wish.

Features

  • 100% pixel-accurate
  • 2 versions: personal and enhanced profile pages
  • All assets redrawn in vector, hence scalable
  • All layers labeled and grouped
  • Adobe Photoshop CS4+ compatible

Behind the Design

“As designers, we often produce various assets for our clients, be it their online presence on their Web pages or in social media. Hence, often we need to skin pages such as the Twitter profile pages for brands that we are working on. When those sites update their UI, we also need to update our resources in order to be able to display an accurate representation of what a client’s Twitter page would look like. So we thought that we could share the PSD file we created with the rest of the design community. Hopefully, it will help you save some time to focus on the creative work!”

Thanks Jon, we sincerely appreciate your time and your intentions!

(vf)


© Smashing Editorial for Smashing Magazine, 2011.

Tags: - - - - - - - - - - - -
Read More...

Dear Drupal: Season’s Greetings. Love, Smashing WordPress.





 



 


Every day I work with WordPress in one way or another. My Twitter feed is full of WordPress types, and I’m a regular at my local WordPress meetup. I’m a WordPress fan.

The developer across the hall from me works with Joomla. His Twitter feed is full of Joomla types, and he uses the CMS every day. It wouldn’t surprise me to learn that he attends the local Joomla user group. He’s a Joomla fan.

Drupal and WordPress

The White House hosts a number of Web developers who use Drupal every day. Their Twitter feeds are probably full of Drupal types, and some may well attend the Washington DC Drupal meetup. They are Drupal fans.

All three of these tools produce the same thing, HTML. Throw in some CSS and JavaScript, and you have yourself a website. This is what I love about Web development: so many tools are available, each with its strengths and weaknesses.

We Have A Problem

In the WordPress community, I often see snide remarks directed at the Drupal and Joomla communities. I see the occasional remark directed at WordPress, too, but because I hang around mostly with WordPress types, I see more outbound comments.

This bickering ranges from overt expressions of contempt to, more subtly, gleeful sharing of accounts of internal disputes on “the other side.”

I am more effective at working with WordPress than with Joomla or Drupal, both of which baffle me to some extent. It’s not that the other CMS’ are inferior, but that my knowledge of them is.

Drupal Is Better Than WordPress

Without a doubt, Drupal is better than WordPress. Out of the box, it can handle higher traffic, its database management is better, and complex data maps are easier to handle. Out of the box, assigning permissions and preventing certain users from accessing data are easier to do. If you were creating a public-facing intranet website – for example, to allow salespeople to access internal documents on the road – this would be comforting.

WordPress Is Better Than Drupal

Without a doubt, WordPress is better than Drupal. Out of the box, content submission is easier for someone who is untrained in HTML, the default rewrite URLs are much nicer than Drupal’s, and customizing the default settings is easier.

The core developers focused on backwards compatibility, so a theme written today for version 3.2.1 will likely work in four years’ time.

The Gift Of Inspiration

Despite the trash talk, Drupal and WordPress have one thing in common: a frequent crossover of features. In some cases, it’s a core feature (a recent example being menus in Drupal being brought over to WordPress).

In other cases, a developer will port a popular module or plugin to their platform of choice. The new functionality may be optional, but it is still cross-platform pollination.

All Software Has Its Weaknesses

Every piece of software I have ever used has at some point made me get up from my desk, walk calmly across the room and kick the crap out of the garbage can. (Try it. It’s cheaper than throwing the computer.)

The big three open-source CMS’ are no different from any other software. There are idiosyncrasies to work around, and there are edge-case and intermittent bugs that will hit you and one other person.

Share Your Weaknesses

Instead of trash-talking the “the other” CMS’ and dwelling on their weaknesses, let’s come together and recognize that we are all part of the same community: the open-source community.

In open-source circles, hearing of the desire to give back to the community is relatively common. Expanding your definition of “community” from the one around your platform to encompass the open-source community will increase your opportunity to give back.

Giving back doesn’t have to mean offering a tangible product, such as a theme, plugin or module repository. It could be as simple as sharing how you solved a particular problem.

Send Christmas Cards

Instead of sending broadsides in each other’s direction, let’s send Christmas cards to each other. If you start sharing with the opposition, it’ll soon reciprocate.

I’m not advocating that all open-source CMS communities strive for the same goals, sitting around a campfire singing Kumbaya and having conversations along the lines of:

“You’re the best.”

“No, you’re the best.”

I am advocating that we respect the strengths of each other’s non-preferred CMS and help improve its weaknesses. Sitting around a campfire is strictly optional.

(al)


© Peter Wilson for Smashing Magazine, 2011.

Tags: - - - - - - - - - - - -
Read More...

JavaScript frameworks, tools and techniques to create killer applications

Ofmlabs Codecs: Pure JavaScript audio decoding


Ofmlabs is bringing audio decoding to JavaScript with two great pieces of code. The first, named JSMad, was the first proof that JS audio decoding is possible and is a port of libmad, a C based MPEG audio decoder.
The second file, ALAC.js is a port of the recently open sourced Apple Lossless decoder to JavaScript. Now it is possible to play MP3 and Apple Lossless even in browsers without native support.
→ Visit Ofmlabs Codecs

Popcorn.js


Brought to you by Mozilla, Popcorn.js is an event system for HTML5 media developers. Think jQuery for video. You can leave the heavy lifting to Popcorn, and concentrate on what you do best: writing awesome code.
→ Visit Popcorn.js

JSZip: Create .zip files with JavaScript


JavaScript today is capable of generating a lot of data. The easiest way to deliver multiple files to your users is in a zip file. Instead of wasting server resources and bandwidth you can get the client to do it for you.

Is it simple and easy, you ask? Yes, definitely. Look at the example code below:

zip = new JSZip();
zip.add("Hello.", "hello.txt");
Downloadify.create('downloadify',{
...
  data: function(){
    return zip.generate();
  },
...
  dataType: 'base64'
});

→ Visit JSZip

Money.js: JavaScript currency converter


Currency conversion is a recurrent task in many businessses, but it’s not that easy to automate as everyday currencies are fluctuating. This lightweight JavaScript library can do the hard work for you. A great find!
→ Visit Money.js

Resizable videos with fitvids.js


Last year, responsible web design was a very popular new concept among web developers and designers. fitvids.js is a jQuery plugin that allow fluid width video embeds. A great tools for all responsible websites.
→ Visit fitvids.js

Generate pdf files with pdfkit for node.js


PDFKit is a PDF document generation library for Node.js written in CoffeeScript(but you can choose to use classic JavaScript of course). A very cool API for those already using server-side JavaScript to build their apps!
→ Visit pdfkit

Impress.js:


Impress.js is a presentation tool inspired by the idea behind prezi.com and based on the power of CSS3 transforms and transitions in modern browsers. This handy JavaScript file will transform your web browser into a very powerful presentation tool. Who still need programs like Powerpoint, really?
→ Visit impress.js

Tags: - - - - - - - - - - - -
Read More...

Super useful WordPress hacks and snippets

Add Google+ button to your posts automatically

Google+ is a new “social” service offered by Internet giant Google. If you want to let your visitor “plus” your post, why not adding a Google+ button to all of your entries automatically?

Simply paste the code below into your

functions.php

file. Once you saved the file, the Google+ button will be automatically displayed near your posts.

add_filter('the_content', 'wpr_google_plusone');
function wpr_google_plusone($content) {
	$content = $content.'<div class="plusone"><g:plusone size="tall" href="'.get_permalink().'"></g:plusone></div>';
	return $content;
}
add_action ('wp_enqueue_scripts','wpr_google_plusone_script');
function wpr_google_plusone_script() {
	wp_enqueue_script('google-plusone', 'https://apis.google.com/js/plusone.js', array(), null);
}

Source: http://www.wprecipes.com/wordpress-hook-automatically-add-a-google-button-to-your-posts

Redirect RSS feeds to Feedburner

Feedburner is a well known service that let you know how many people have subscribed to your RSS feeds. Instead of tweaking your theme to replace links to WordPress built-in feed, you should definitely use this hook which automatically redirect all WordPress feeds to your Feedburner feeds.

Edit line 4 and replace my feed url by yours. Once done, paste the code in your

functions.php

file. Save the file, and you’re done!

add_action('template_redirect', 'cwc_rss_redirect');
function cwc_rss_redirect() {
	if ( is_feed() && !preg_match('/feedburner|feedvalidator/i', $_SERVER['HTTP_USER_AGENT'])){
		header('Location: http://feeds.feedburner.com/catswhocode');
		header('HTTP/1.1 302 Temporary Redirect');
	}
}

Source: http://wp.smashingmagazine.com/2011/12/07/10-tips-optimize-wordpress-theme/

Track post views without using a plugin

Are you curious about how many people are reading your posts? A few “view counts” plugins exists, but here’s a simple way to do this yourself. The first thing to do is to create the functions. Paste the code below into your

functions.php

file.

function getPostViews($postID){
    $count_key = 'post_views_count';
    $count = get_post_meta($postID, $count_key, true);
    if($count==''){
        delete_post_meta($postID, $count_key);
        add_post_meta($postID, $count_key, '0');
        return "0 View";
    }
    return $count.' Views';
}
function setPostViews($postID) {
    $count_key = 'post_views_count';
    $count = get_post_meta($postID, $count_key, true);
    if($count==''){
        $count = 0;
        delete_post_meta($postID, $count_key);
        add_post_meta($postID, $count_key, '0');
    }else{
        $count++;
        update_post_meta($postID, $count_key, $count);
    }
}

Then, paste the code below within the

single.php

within the loop:

<?php setPostViews(get_the_ID()); ?>

Finally, paste the snippet below anywhere within the template where you would like to display the number of views:

<?php echo getPostViews(get_the_ID()); ?>

Source: http://wpsnipp.com/index.php/functions-php/track-post-views-without-a-plugin-using-post-meta/

Display number of Facebook fans in full text

If you have a Facebook page for your blog, you might want to display how many fans you have. The following snippet will display how many fans you have. Just paste it on any of your theme files, where you’d like the count to be displayed.

<?php
	$page_id = "YOUR PAGE-ID";
	$xml = @simplexml_load_file("http://api.facebook.com/restserver.php?method=facebook.fql.query&query=SELECT%20fan_count%20FROM%20page%20WHERE%20page_id=".$page_id."") or die ("a lot");
	$fans = $xml->page->fan_count;
	echo $fans;
?>

Source: http://wp-snippets.com/742/display-number-facebook-fans/

Display search terms from Google

This code let you know what search terms your visitors entered before arriving to your website. Simply paste the code on any of theme files, where you’d like to display the search terms.

<?php
$refer = $_SERVER["HTTP_REFERER"];
if (strpos($refer, "google")) {
	$refer_string = parse_url($refer, PHP_URL_QUERY);
	parse_str($refer_string, $vars);
	$search_terms = $vars['q'];
	echo 'Welcome Google visitor! You searched for the following terms to get here: ';
	echo $search_terms;
};
?>

Of course, this snippet can also be used in order to log what user searched before arriving to your website.

Source: http://wp-snippets.com/820/display-search-terms-from-google-users/

Easily display external files using a shortcode

When blogging, you may sometimes need to include a file from a remote website. The following code will create a shortcode so you’ll be able to include any file you want from your WordPress post editor.

The first step is to open your

functions.php

file and paste the code below in it.

function show_file_func( $atts ) {
  extract( shortcode_atts( array(
    'file' => ''
  ), $atts ) );

  if ($file!='')
    return @file_get_contents($file);
}

add_shortcode( 'show_file', 'show_file_func' );

Once you saved your

functions.php

file, you can use the shortcode using the following syntax:

[show_file file="http://www.somesite.com/somepage.html"]

Source: http://www.prelovac.com/vladimir/wordpress-shortcode-snippet-to-display-external-files

Email contributors when their posts are published

In case you’re running a multi-author blog, it can be a good thing to let your contributors know when one of their posts are being published. The following code have to be pasted in your

functions.php

. Once done, an automated email will be sent to any contributors when his posts are published.

function wpr_authorNotification($post_id) {
   $post = get_post($post_id);
   $author = get_userdata($post->post_author);

   $message = "
      Hi ".$author->display_name.",
      Your post, ".$post->post_title." has just been published. Well done!
   ";
   wp_mail($author->user_email, "Your article is online", $message);
}
add_action('publish_post', 'wpr_authorNotification');

Source: http://www.wprecipes.com/how-to-automatically-email…

Display snapshots of external websites using a shortcode

Are you showcasing websites on your blog? If yes, you may find very useful to be able to put a snapshot of any website just by using a shortcode and the website url. This code, created by Ben Gillbanks and initially released as a plugin, will do the job perfectly.

Let’s start by adding the functions below into your

functions.php

file.

<?php
function bm_sc_mshot ($attributes, $content = '', $code = '') {

	extract(shortcode_atts(array(
		'url' => '',
		'width' => 250,
	), $attributes));

	$imageUrl = bm_mshot ($url, $width);

	if ($imageUrl == '') {
		return '';
	} else {
		$image = '<img src="' . $imageUrl . '" alt="' . $url . '" width="' . $width . '"/>';
		return '<div class="browsershot mshot"><a href="' . $url . '">' . $image . '</a></div>';
	}

}

function bm_mshot ($url = '', $width = 250) {

	if ($url != '') {
		return 'http://s.wordpress.com/mshots/v1/' . urlencode(clean_url($url)) . '?w=' . $width;
	} else {
		return '';
	}

}

add_shortcode('browsershot', 'bm_sc_mshot');
?>

Once done, you can use the

[browsershot]

shortcode on WordPress editor, as shown below:

[browsershot url="http://link-to-website" width="foo-value"]

Source: http://www.binarymoon.co.uk/2010/02/automated-take-screenshots-website-free/

List sites from your network

Here is another super-useful function for those running a network of websites using the features available in WordPress 3.+. Do you need to list all sites from your network? It’s actually pretty easy using the following function.

The first step is, as you can guess, to add the required functions into your theme

functions.php

file.

function wp_list_sites( $expires = 7200 ) {
   if( !is_multisite() ) return false;

   // Because the get_blog_list() function is currently flagged as deprecated
   // due to the potential for high consumption of resources, we'll use
   // $wpdb to roll out our own SQL query instead. Because the query can be
   // memory-intensive, we'll store the results using the Transients API
   if ( false === ( $site_list = get_transient( 'multisite_site_list' ) ) ) {
      global $wpdb;
      $site_list = $wpdb->get_results( $wpdb->prepare('SELECT * FROM wp_blogs ORDER BY blog_id') );
      // Set the Transient cache to expire every two hours
      set_site_transient( 'multisite_site_list', $site_list, $expires );
   }

   $current_site_url = get_site_url( get_current_blog_id() );

   $html = '
<ul id="network-menu">' . "\n";

   foreach ( $site_list as $site ) {
      switch_to_blog( $site->blog_id );
      $class = ( home_url() == $current_site_url ) ? ' class="current-site-item"' : '';
      $html .= "\t" . '
<li id="site-' . $site->blog_id . '" '="" .="" $class=""><a href="' . home_url() . '">' . get_bloginfo('name') . '</a></li>

' . "\n";
      restore_current_blog();
   }

   $html .= '</ul>

<!--// end #network-menu -->' . "\n\n";

   return $html;
}

Once done, the following code will display all sites from your network. Simply paste it on any of theme files, where you want the list to be displayed.

<?php
// Multisite Network Menu
$network_menu = wp_list_sites();
if( $network_menu ):
?>
<div id="network-menu">
   <?php echo $network_menu; ?>
</div>

<!--// end #network-menu -->
<?php endif; ?>

Source: http://wp.smashingmagazine.com/2011/11/17/wordpress-multisite-practical-functions-methods/

Add post class if the post has a thumbnail

When styling your theme, it can be tricky to deal with post that have a post thumbnail and those who don’t. In order to simplify yor front-end coding, you should use this code, who add a

has_thumb

css class to the post class.

Just paste the code below into your

functions.php

file.

function has_thumb_class($classes) {
	global $post;
	if( has_post_thumbnail($post->ID) ) { $classes[] = 'has_thumb'; }

		return $classes;
}
add_filter('post_class', 'has_thumb_class');

Source: http://wp-snippets.com/2178/add-post-class-if-post-has-thumbnail/

Tags: - - - - - - - - - - - -
Read More...