In the Web design scene, the sense of community is extremely strong. We always talk about “giving back” and about how much we learn from those who do. A few names are popular and dropped here and there. But it’s all still just a bit too impersonal, isn’t it? Here at Smashing Magazine, we’ve decided to give you a more intimate look at our writers.

Among the people who regularly write for us, 15 agreed to answer our questions. We also challenged them to take a picture of themselves on the spot, with no time for make-up. This interview is not meant to give you any particular professional insight, even though we cover that ground a bit. Rather, it’s meant to introduce you to these people on a personal level. The illustrations for this article were created by Andrea Austoni, an illustrator from Poland who we are regularly working with.

A Word About The Community

We still have very little information about the Web design community itself. How many professionals are there around the world? Where do they live? These questions are still difficult to answer precisely. A List Apart publishes an annual survey, whose 2008 edition received responses from more than 30,000 people (2009 edition wasn’t published yet). We can perhaps imagine the Web design community an an entity, which is what A List Apart does to a large extent. But what if we focused on personality? What’s the first thing they do in the morning? What do they love and hate about Web design? What is their biggest strength and worst flaw?

If we could combine our writers into a single person, what kind of person would it be?

• A male in his early 30s,
• Physically, he would have brown eyes, brown hair. He would be about 5′7″ tall (175 cm), 155lbs (70 kg),
• He would maybe wear glasses and will surely be right-handed (there is only one left-handed person out of the 14 writers that replied).

Who said working from home implies eating all the time? Our typical writer would be quite reasonable with junk food, eating only a kg a week.

Question: What is your mission and personal philosophy while on Earth?

Paul Boag: Wow, that is a hard question to answer without sounding pretentious! My primary focus is to help and inspire others. There seems little point in spending my life simply accumulating stuff for myself. I get much more joy out of encouraging others to be better. I will never change the world, but I might inspire someone who does. That is my hope.

Julia May: When I think about my mission on Earth, I tend to agree with George Carlin’s suggestion of why we are all here. As for my personal philosophy, I guess it changes during life, but at the moment I have a constant feeling that something good is in the air, and I try to keep my eyes open so that I don’t miss it when it comes.

Speider Schneider: Aside from an odd leaning towards nihilistic schadenfreude, I have learned to let the bad things slide off my back. I just enjoy what I’ve done with my career and I believe between working for MAD Magazine and creating numerous Pokémon products, I have ruined at least a generation of kids. I guess my philosophy is to create as much havoc as possible. I like to live on the edge because the rent is cheap and there are few neighbors. What will be my philosophy when I leave the Earth? Depends on the planet to which I am heading.

Robert Bowen: My current mission is to see true equality for all beings who share this planet and find the harmonious balance that can bring about a peace. My personal philosophy is that all beings on this Earth deserve to be respected and looked after.

Janko Javanovic: My mission here is to reach true warp speed and see aliens in distant galaxies. Until then, I’ll design user interfaces and learn the importance of user experience every day.

Louis Lazaris: I believe in the Bible and what it says about man’s destiny, and I like to reveal that most religions today do not tell the truth about the Bible’s message.

Christian Heilmann:
Do good things, make myself redundant in doing them, and inspire and train others to take over to get the same great experiences.

Thomas Giannattasio:
When I look back on my life, I hope to see that I’ve improved people’s lives: making them simpler, more fulfilling and more enjoyable.

Paul Andrew:
Difficult question. Without being philosophical, I would simply say personal contentment.

Cameron Chapman:
I’m just along for the ride, trying to do as much of the things I love as possible, and avoiding the rest.

Jean-Baptiste Jung:
I’m a Christian, so most of my philosophy comes from that. I’m also an animal-rights supporter.

Inayaili de León:
Be nice. Put myself in other people’s shoes before criticizing them.

Jacob Gube:
My personal philosophy in life is to enjoy doing what you love doing.

Kat Neville:
I want to love what I do every day. I don’t want any day to go by where I think, “Wow, what an absolute waste of time.”

Aquil Akhter:
I want to do something innovative and creative, work on design and blogging. This is my current mission.

Nationalities, Languages And Localization

Most of our regular writers live in Europe:

Many live in the US:

But there is also Aquil, who is from Pakistan:

Because we are an English-speaking magazine doesn’t mean that the people who write for us are all American or British. In fact, most of them come from another country and therefore speak a different native language. If we combine them all together, we’d able to speak:

• English, French, German, Grenglish (yes, this new language is a mix of English and broken Greek), Italian, Portuguese, Russian, Serbian, Spanish, Ukrainian, Urdu and Uzbek.

Question: What does writing mean to you? Please give us some insight into your working process.

Christian Heilmann: Writing to me means structuring ideas and finding the interesting story and easy explanation in complex matters. My process is to write down everything I want to put in, and then go through it three times, removing all the unnecessary parts.

If you can’t take anything out, then you’ve done a great job. I also tend to write down the outline first — headings, mostly — and then fill in the gaps. This allows me to jump from section to section should I get stuck or bored with one. I’ve outlined the process in the Developer Evangelism Handbook.

Thomas Giannattasio: For me, writing is about spreading ideas and information. It’s also a great way to connect yourself to a community, which is the main reason I love writing for Smashing. My working process is pretty random because my time is limited. I start by outlining my content and doing a little research. Then, I typically try to set aside a Saturday or Sunday to write the bulk of the article. In the evenings, after my 9:00 to 5:00 gig, I try to polish the writing and create my images.

Paul Andrew: Writing is a universally accessible method of sharing knowledge and learning more. From an early age, my father taught me that when writing you should visualize every word, sentence and paragraph, physically. He recommended building a house as you write. I have used this ever since.

Initially, I search for every resource on a subject, using every possible channel open to me (that is the foundation). I then collate everything and filter the bad out of the good and the pointless out of the useful. I then read as much as possible, categorize resources and start taking notes (these are the bricks). Now I have an idea of the layout, rhythm and direction of the article. I put everything together (the roof). Once that is done, I revisit and edit, and I edit again and again, until I am happy with the result (which is a watertight and livable home). Time to move in: publish.

Speider Schneider: It’s therapy. I get angry because of something that happened and I sit down and bang on my keyboard like a deaf Beethoven pounding out a symphony and eventually fall into a comatose state. When I awake, I look at what I’ve written, shrug my shoulders and send it off to the Smashing staff to test the patience of the editor and drive the proofreaders into fits of insanity. Then it’s time to drink.

If anything, through my articles on Smashing Magazine, I feel I’m not only mentoring less experienced creatives, but striking a blow against not only bad business people, but against the mistakes we creatives make along the road that reflect on the entire industry. Is it easy? No. Is it satisfying? Well, to quote Dorothy Parker, “I hate writing but love having written.”

Robert Bowen: Writing to me is a powerful outlet that not only allows me to exercise my demons but affords me an opportunity to connect with and help others. Writing is a part of who I am. Whenever I begin working on a writing project, whether personal or work-related, I always begin with a question and an outline. The question is a variant of “Where is this going” or “What is it saying?” Once I know the answer, I begin to outline — brainstorming on various approaches to take and elements to include until I have a pretty solid foundation to work from. Then I charge forward…

Cameron Chapman: Writing is something I’ve always done, for as long as I can remember. Putting thoughts and concepts on paper in a way that others can understand is as close to telepathy as humans have gotten (as far as I know, anyway). My working process usually starts out with 10 to 15 minutes of research, followed by 30 or so minutes of brainstorming and outlining. Then I go back to research and fill in the outline as much as I can, sometimes expanding it as I go.

Short articles might take me only a morning or afternoon to complete, while longer ones might require a day or two of work. Of course, sometimes I break this up over the course of a few days, working on multiple projects simultaneously.

Janko Javanovic: Writing is a powerful tool for expressing your thoughts and knowledge and for questioning yourself and others. I note all my ideas in a sketchbook. It helps me remember everything and explore ideas further. When I find some free time, I pick one and elaborate on it.

Jean-Baptiste Jung: Writing is sharing. I’ve learned my job that way, by reading books and blog posts, so being able to give back to the community is a great thing. When writing long articles, such as the ones I write for SM, I generally start by creating an article map that shows the different steps to talk about in the post. Then I develop each step until I have a complete article.

Inayaili de León: For me, writing means organizing my thoughts on a particular idea. After finishing an article, I feel I can put that aside and start thinking about something else. Before starting, I tend to do some research to see what’s been written. The time this phase takes depends on the type of article. Then I’ll write down a few of the main points I want to cover, particular quotes to refer to. Finally, I start writing the article itself.

Jacob Gube: Writing is sharing knowledge in an organized way. I start writing by doing some research and outlining the things I want to say. Then I start writing. I edit several times, focusing on what I can cut out, how well the story flows, and whether the reader will gain something from reading it.

Kat Neville: I don’t consider myself a writer, so writing for me is just about explaining something using the clearest possible language. But I think as a Web designer, you really should learn a lot about writing, because every second with a user counts. When I write for SM, I always try to think about what I would find useful. It’s so easy to let your ego get in the way and start writing your own opinions. Even though my articles tend to be long, I hope they are always useful, with a lot of interaction and examples.

Julia May: Writing is a puzzle: for hours I can sit and shuffle words to find the right combination. Writing is a science: profound research and bold experiments lead to progress. Writing is an art: there is always someone who likes one thing and another who doesn’t. Finally, writing is a creative process: no inspiration means no success.As for my working process, in short, it’s always dozens of open browser tabs, thousands of “Backspace” and “Delete” hits and millions of doubts. If all this results in at least one satisfied reader, then it was worth doing.

Louis Lazaris: Writing is an art based on standards and principles, just like Web design. I believe each article should be its own unique entity, one that never makes the reader say, “Oh, I’ve read this before.” This would make each article a truly creative and inspiring experience for both author and reader.

As for my working process, I like to start formulating my articles with a very general theme, then a four-to-six point outline. Then I slowly put the “meat on the bones” through research and development of the theme in a very specific and focused manner. This helps prevent my articles from rambling too much and going off topic near the end, which happens to many writers online.

Aquil Akhter: In my opinion, writing an article means providing something interesting and unique to our readers. Because I mostly do design- and photography-related articles, I always keep in my mind that a picture is worth a thousand words.

What is the first thing you do when you wake up in the morning?

Ignore the buzzer and keep sleeping!

Checking e-mails, Twitter and Facebook

Drinking coffee.

Question: Where did you start, and what principles and skills helped you get to where you are now?

Paul Boag: I started as a graphic designer who was very fortunate to get a placement as a student with IBM. This happened around the time that the Web was created, so I got to work on it from day one. My skills as a print designer were extremely valuable, and those early days of the Web taught me loads about coding. It made me the all-rounder I am today.

Bizarrely, I think the most valuable skills didn’t come from design school or IBM but actually from my local church. It was there that I learned how to do public speaking, communicate and empathize. These are all skills I use every day in my job.

Christian Heilmann: I always had various “jobs” during school: organizer of summer camps for the council, brick layer, packer in a chainsaw factory, ice-cream maker, waiter, DJ, plumber, pizza delivery guy… My first real full-time job after high school was working for the Red Cross for 15 months, instead of doing 12 months of mandatory army service. There I learned a lot about what can go wrong with the human body, and I also learned how to work with people with learning and physical disabilities, which taught me a lot about life.

I then went on to work at a local radio station, where I learned how to crunch a lot of information into a few lines for the news, where each sentence needed to be an entity on its own — because nobody consciously listens to the radio. This taught me a lot about writing for the Web, too. I also learned how to use my voice and to ask the right questions to get real answers, which helped me with my public-speaking skills. I then started Web development very early and was lucky to jump from job to job, taking on as much as I could, to get where I am now.

Generally, I can say that the main skills needed for all this are an ability to adapt to situations, not being scared to physically move and to get excited (rather than scared) about new things. I also learned that forcing myself to understand something properly before applying it was much more useful than waiting for official training. Asking the right questions and taking advice — even when it is annoying — was another big factor.

Thomas Giannattasio: I like to think that my career in art and design began back in the second grade. Every Saturday morning, I could be found lying in front of the TV with a sketchbook and pencils, recreating scenes from my favorite cartoons. My first commercial endeavor evolved from these sketches, when I learned that classmates were willing to sacrifice their lunch money to buy some drawings of Ninja Turtles.

As I got older, my passion for art and design grew stronger, but in a different direction. I became fascinated with the interconnectedness and reach of the Internet. When I was 12, I begged my parents to let me get my own website. After weeks of nagging, they finally caved and bought me an “HTML for Dummies” book, which I studied every day after school as I worked on my Geocities site.

My early days were really exciting, and that excitement eventually grew into a passion that lives to this day. I think it’s that passion that drives me to learn and do more. The skills, knowledge and experience I’ve developed have just been byproducts of that passion.

Robert Bowen: I started writing poetry when I was a teenager, and as my love for the arts grew, my pen carried me towards the stage and screen. After writing plays and short stories, I began to expand my pen and write projects larger in scope (scripts and novels). Along the way, Angie began getting into Web design, and I found my interests piqued as well.

Soon, we both found our focus shifting towards the blogosphere, and that’s when we found the communities that were thriving there. As we began to learn so much from the community, we decided that we had found our proverbial home and that we really wanted to give back. I began to shift my writing style to fit the Web more, and I may still have some work to do in that arena. I know that no matter the medium, my poetic nature tends to add a flourish or two to the text.

Our mission quickly became to return the favors from the community by striving to enrich it and be as helpful as we can be. Through it all, my writing skills have helped me get to where I am now and leave my mark on it.

Speider Schneider: I started at the bottom. I worked hard, had some good breaks and some bad but I built on each success and with a strong network, built on trust and respect, I was able to keep increasing my projects, clients and fees. Naturally, my network was earned through hard work volunteering with artists organizations and such. I met the right people and made sure, at all times, my work spoke for itself. I also tried, whenever allowed, to break all the design rules I could. It created pieces that intrigued people because it worked but was obviously a mess of broken rules.

A teacher once told my class that we needed to be kind to those we met on the way up the ladder, because we would meet them on the way down. Aside from an angry stumble here and there, I was careful to be very kind to people, except the guy with cat liter in his portfolio. Being kind has created a network of the top people in design. That and always buying the coffee.

Paul Andrew: I started the hard way, by leaving school at 16, thinking I could do anything. How wrong I was. The only way you can achieve personal satisfaction and success is by working hard, working honestly, learning from your mistakes, learning from others and never giving up.

Cameron Chapman: I got into Web and graphic design through my husband, who went to college for graphic and multimedia design. The only formal design training I have is in interior design, which has been a big help in certain aspects (spatial relationships and color being two of the biggest). I pretty much just learn to do things as I need to. The only drawback to that is that I tend to forget them as soon as I don’t need them anymore.

Janko Javanovic: I started as a freelance programmer in the early 1990s. During the crisis in Serbia, I, along with my cousin, somehow managed to earn a decent living. Huge ambition and persistence helped me get to where I am now.

Jean-Baptiste Jung: I started alone, in my room. I’m 90% self-taught. I’m constantly learning, and that’s a very exciting thing in the Internet world.

Inayaili de León: I started learning about Web design by myself. I was working, so I had to do it after work, in the evenings, and I may have sacrificed a few nights out, but I think the hard work and perseverance paid off.

Jacob Gube: I started as a graphic designer and ended up being a Web developer.

Kat Neville: I used to do print work, but it really wasn’t nerdy enough for me. One day I designed a website for the print company I was working for. They asked me, “Can you build that?” and I said “Yes,” even though I’d done only a bit of HTML. Although I made a few mistakes when I started, I really enjoyed the combination of design, interaction, usability and coding. I guess I always try to do what I feel I’ll love doing and challenge myself every day. It’s been working out well for me.

Julia May: In terms of my career, I don’t think I’ve gotten far from the start yet. But, in general, I’m curious by nature, and I learn pretty fast. I think these qualities are the main forces behind my progress.

Louis Lazaris: For years, I rarely paid attention to Web design news, trends and developments, which held me back. Reading articles and books by top designers and developers has helped me learn the most important skills I have today.

Aquil Akhter: I started by designing websites, and I always believe in dedication and constant attention to my work.

What is your strongest quality…

… and your worst flaw?

Question: What distracts you from working these days and how do you handle these distractions?

Paul Boag: My biggest distractions are my family and the youth group I run. However, I wouldn’t describe these as distractions from work. Instead, I would call work a distraction from them. I work to live, not live to work. I have been married for 11 years to a gorgeous woman named Catherine. We have a seven-year-old son named James. Without a doubt, they are my priority in life.

The youth group I run is for teenagers who live in Blandford. Because Blandford is so small and rural, it is possibly the most boring place on the planet to be a teenager. I try to rectify this shortcoming. Although I love it dearly, it does take up a lot of time. Most Monday, Wednesday and Saturday evenings are taken up with it. Combined with church and work, I don’t have a lot of free time.

When I do find some free time, I tend to burn it watching TV. I lack energy for anything else. Like all good geeks, I am obsessed with sci-fi. Favorites include Battlestar Galactica, Doctor Who and, more recently, V.

Christian Heilmann: I don’t realize I’m working when I do my “work.” I actually relax. What stops me from doing my work can be politics, meetings, technical failures and volcanoes. I sleep five hours a day, and I don’t own a TV, which gives me a lot of time to achieve what I want and also to plan for time to see a play or have fun with my friends. Not being tethered down by normal working hours helps, too (I live in Europe but report to the US).

Thomas Giannattasio: My biggest and most pleasant distraction has to be my wife. She really supports all the work I do, but she also keeps me balanced by taking me away from it. I tend to get really wrapped up in a project and neglect other responsibilities around the house, but she’s always there to step in and pick up my slack. My second distraction is a bit more guilty. I’m nearing 30, but I’ve definitely not grown out of video games yet. Currently, Modern Warfare 2 has a tight grip on me, ha ha.

Paul Andrew: Kids are my main distraction. I have a four-year-old little boy, and my wife (who is in a full-time nursing course) also has two older kids. I am essentially a stay-at-home dad, which I do love, but it does make it very difficult to get any continuous or scheduled work done.This is my typical Monday to Friday working day:

• 5:00 am: Wake up and start work.
• 7.30 am: Stop work and get the two older kids ready and off to school.
• 12:00 pm: Off to school nursery. Return home and work.
• 3:00 pm: Stop work and pick up all the kids from school.
• 8:00 pm: Kids off to bed and I start working again.
• 11:00 pm: Off to bed.

It is a very stop-start schedule, which can be very frustrating. I do have the occasional day when I can work on a normal schedule (9:00 to 5:00), but they are few and far between.

On top of all that, when it is the school holidays, things become even harder. A few weeks back, during the school Easter holidays, I fell so far behind my writing commitments that I am only now just recovering.

Thankfully, there is a light at the end of the tunnel. After this summer, my son starts school full time, and my wife will have finished her nursing course and will be working only two or three days a week, which will finally allow me to work freely and with no time constraints. I am counting down now!

Family aside, my big love in life is football, and with the World Cup happening, I fear this may affect work. That gives me a couple of ideas for an article: “Designer’s Guide to the 2010 World Cup” and “How to Deal With World Cup Distractions as a Designer.”

Speider Schneider: Shiny objects distract me. Pop ups on the web distract me. Facebook distracts me. Life distracts me. It’s my ability to focus while I rant and rave in writing that keeps me working. Once I start typing, I find I won’t look up or blink for several hours and 2,500-4,000 words later. If I have writer’s block, lemon juice sprayed in my eyes is the current punishment and motivator to get back to work. Poverty is another good motivator. Being paid, having money for food usually reminds me to write faster.

As with my design work, eating and deadlines are always a good motivator. I’ve never missed a deadline in my life, but I look forward to my first one. Everyone should have a missed deadline at some point in their lives. I would like to miss the deadline for my funeral.

Cameron Chapman: My biggest distractions at the moment are Tumblr and We Heart It. I spend way too much time on both. I also love getting out of the house as much as possible, because I work from home. I sometimes have to force myself to go out for a ride or whatever after having worked for an hour or two.

Janko Javanovic: I’d say that different sides of my knowledge, while diverse, are somehow related to each other, so it is not always hard to manage all obligations. But I am always focused on those aspects that are highly related to each other and relevant to current projects. So, carefully choosing and adapting different knowledge to current situations helps me stay focused and efficient. Oh, and yes, my working day lasts a minimum of 12 hours.

Over the past decade, I have completely moved from development to design. I am now focused on learning about user experience design and implementing knowledge that I gain from ongoing projects. Learning new skills makes me really happy. But I am not always efficient. A big workload sometimes results in my being unable to manage all obligations, from project-related activities to writing and speaking. Because projects are always the priority, other activities suffer.

Jean-Baptiste Jung: Well, my current distraction is your questions. But that’s just me being funny. Distractions are often a problem to those who, like me, are used to working alone at home. You have to be very motivated and focused to handle them correctly.

Inayaili de León: Twitter, Facebook, Tumblr, RSS feeds, TV, a blank wall. I handle them by setting specific tasks for each day, and I don’t go to bed until everything’s done… most of the days.

Jacob Gube: Twitter is very distracting. I handle this distraction by not using it until I have done all my important work.

Kat Neville: I’m very easily distracted: the computer, Twitter, email and my RSS feeds are always tempting me. In the outside world, I always want to do arts and crafts and work on my garden! Then, there are the activities: I’m a sucker for an adventure!I do sometimes freak out, but usually a good night’s sleep is all I need, and then I’m back at it. I tend to take on too much, but I’m making it my goal now to take on less, so that I can actually do a good job on my projects and don’t let people down (including myself). Sometimes, though, even though you want to spend a lot more time on a project, you really have to deliver, and so you hope it’s good enough for now. On the Web, you can always improve later, and I have a million things I’d like to work on and improve.

Right now, most of my own apps have taken the back-burner, and that makes me really sad. But because I’m still building my client base, I need to focus on their work right now. I hope to get a proper balance back by the end of the summer.

Julia May: Usually when I’m working, the biggest distractions are email, Twitter and my own thoughts. So, when I really need to concentrate, I log out of my Gmail and Twitter accounts (although I still don’t know how to log out of my own thoughts), and that usually helps. Fortunately, I’m not such a workaholic that those examples you mentioned are distractions.

Louis Lazaris: Too obsessed with online Scrabble and doing word anagrams online. Wife always wants me to help with dinner. I don’t handle these distractions well.

Aquil Akhter: I don’t have any distractions from my work as such. When I’m working, I don’t get involved in other matters.

Challenge: Would you dare taking a picture of yourself on the spot and send it to us?

Question: If you had to choose your boldest subject for an article ever, what would it be and why?

Paul Boag: “Stop Being a Web Designer and Go Save the World.” As Web designers, we love to think that we’re changing the world. Certainly, the Web is an enormously important technology and is having a profound impact on Western culture. However, sometimes we have to get over ourselves and realize that we aren’t that special. We talk about Web celebs, but that is a complete joke. The people I admire and respect are those out there working in third-world countries for little pay and no fame. I just wish I had the guts to give up the Web and go follow them.

Speider Schneider: Ha! The Smashing Editor-In-Chief, Vitaly Friedman and I were just going over that the other day, trying to discuss an article that could be very touchy but is groundbreaking! I won’t talk about it until it’s finalized but if you are a fan of my articles, you know it will be interesting.

There are so many bold articles to write! Our industry is filled with lying, micromanaging, anal-compulsive, passive-aggressive, loud-mouthed, opinionated morons who will stab you in the back if they think it will help change the background color of a design, and those are my close friends!

I pretty much get to just go bold from article to article. The Smashing staff encourages stretching the boundaries and reaching deeper for content and information that will be helpful to the readers. I plan on being a part of SM for as long as they can stand me!

Christian Heilmann: “Seven Reasons Why Web Development Stays Stagnant — And How This Secures the Jobs of Far Too Many People for It to Change.”

Thomas Giannattasio: “Why Web Standards Suck and Flash Is the Platform of the Future.” Not that I believe that, but it would definitely cause controversy. I could probably find a few reasons to support the argument, though.

Paul Andrew: “Why My Love Affair With WordPress Is Coming to an End.” And “Readability First, Accessibility and Usability Second.” (Okay, I chose two titles.)

Robert Bowen: Well, I assume you’re talking about articles related to the design field, in which case I think that those articles addressing the spec-work issue and its impact on the way designers are undervalued are important and often, I would hope, unintentionally divisive. This is an issue that affects the entire community, yet so many see only the personal effects rendered from it, and that is what they care about. But it does get its fair share of coverage.

On the contrary, I think a subject not broached enough is the sexism that pervades the design community. I think this is often overlooked because it is such an accepted social ill that it spills into every aspect of our lives, and challenging it in this one area means challenging it in all of its reaches. Also, because this is such an ingrained problem in our society, so many participate in this demeaning practice without realizing it. In design, women tend to be relegated to a patronizing position of near irrelevance, until someone needs something “girly” done, and then their input and skills are recognized in a biased way.

Inayaili de León: Hm, maybe an article about how we should be a little less serious about what we do and more flexible in accepting the ideas of others? I’m not sure how bold that is, though.

Jacob Gube: Right now, advocating for continued support of IE6 will get you a good lambasting. But IE6 is still relevant. According to Wikipedia, as of February 2010, IE6 still accounts for about 20% of browser usage. That’s around 5 to 6% more than all versions of Safari, Chrome and Opera combined! From the standpoint of a business ROI or the Pareto Principle, it makes sense to forget about Safari, Chrome and Opera and focus on IE6. But people want to hear the opposite.

Kat Neville: “Throw Everything Away: Why You Should Start Everything All Over Again.” I guess it would be about how we get attached to the work we’ve designed and the “stuff” we buy (especially as techy people).

Julia May: It would probably be “Steve Jobs and His Connection to Occultism.” I’ve suspected Steve Jobs of being connected with the Masonic Lodge or something like that. Do you have a better explanation for the mass hysteria about the iPad?

Aquil Akhter: It would certainly be “Photography of Poor People,” to shock the sophisticated world with how many people are living below the poverty line.

What about you?

It is also hard for us to know where our readers come from, which is why we had the idea of creating this Google public map. The idea is to localize where web professionals are from and what their profession is.

Now, why not add yourself on the map (you need to be able to sign up with a google account) and include a few words about you such as your job title for example? To add a placemark, you need to click on “Edit” in the left column of the page and then use the Placeholder icon that will appear in the left upper area of the map. Please do not change the title and description of the map. And let’s see what this map looks like in a few days.

(al)

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

ForeUI is an amazing UI prototyping tool meant for designers, programmers and anyone who needs a desktop tool to create screen mockups for web or desktop applications. You can use ForeUI.com desktop app to create a prototype of an application or a website.

The need of using a prototyping tool is when you have to verify the design with your clients or colleagues and then start the development process. You can use the prototype to write the documentation before starting the development phase or perform usability testing before coding and so on.

Download ForeUI

ForeUI is available for Windows and MAC operating systems and the latest version of ForeUI (2.3.2) can be downloaded from this page

Features of ForeUI Prototyping Tool

When you run the ForeUI desktop app, you see the following work interface:

The middle pane which is shown in white, acts as a board for holding all the elements of your mockup. You can drag and drop the different elements from the sidebar and adjust the position and styling of different elements as you want.

For example: I created a screen mock up of a simple HTML website by dragging and dropping the rectangle element from the sidebar. Following is a preview of the mockup:

Just double click an element from the left sidebar and it appears on the main pane for editing. Next, you can use your mouse to resize it or place it anywhere on the plot. The right sidebar lets you add style rules to the elements e.g adjusting the background color, position, border, width, height, layers and so on.

Here are all the properties of an element which you can tweak:

Next, I wanted to see how the prototype may look in the browser. ForeUI lets you export the mockup to image, PDF or DHTML formats, hence I chose the DHTML format and exported it in my desktop. Following is the result:

This is very useful, I can create the sample of a design and export the copy to PDF or DHTML formats. Then I can email the sample to my clients or developers and they can have a rough idea about my project.

The best part is that the mockup is Fidelity independent. You can always change the style by switching the UI theme and make adjustments as desired. Currently, ForeUI supports 5 UI themes – Windows XP, Windows 7, MAC OS X, Wireframing and Hand Drawing.

Changing the UI theme is very easy, all you have to do is select the theme from the UI theme dropdown as shown below:

The Action Editor : The Action editor in ForeUI lets you define the behaviour of each element in your plot. The behaviour can be a simple message, popup window, link or anything which you want the application to perform once the user interacts with the element.

To access the action editor, select an element and click the action button, shown by a flag:

This will open a pop up window where you can define the action of the element. Defining the action is fairly easy, you have to create a flowchart and add the logic and order of events in the flowchart.

For example: If on clicking a button, you want to show a dialog box containing a Yes / No button. If the user clicks the Yes button, the required action will be performed. If he clicks the No button, he will be returned to the current page.

In that case, you can create a simple If else conditional check and design the flow chart as follows:

Here is how the output will look like:

You can define more complex conditions and logics, this depends on what you want your prototype to perform once the user’s action triggers an event. The Action editor contains a lot of options to define conditional checking, adding different events e.g onclick, mouse hover and looping.

Once you are done with defining the logic and behavior of an element, you can run the simulation and your plot will run as a DHTML page in the browser.

This is really great, you can define how your application interacts with the user and do not have to code anything. Just create the mockup, add the rules and conditional checking and export it as a DHTML page. Then send it to your developers and ask them to do all the coding or design work.

You can also export the UI file of your plot and let your developers see the flowchart and the different order of events associated with a web element. The interactive design and flowchart model is really time saving.

Sharing Resources:
ForeUI supports packing a chosen part of your design as a custom element and exporting it. This is extremely useful when you want to share a part of your design or mockup with anyone.

Consider an example: You are designing a web application and want someone else to work on the site’s navigation. You have already designed the navigation and want the developer to add more features in it.

In that case, you can export the navigation as a custom element and send it to the developer. The developer can then import the custom element as a plot and customize it the way he wants. He can add more elements, events, conditional checking, modify the layout and colors and so on.

When he has finished modifying the custom element, he can export it and send it back to you. Then you can import the modified custom element in your prorotype.

The resource sharing feature is a lifesaver, you can divide the functional areas of your application to different developers. Let them develop the different elements on their own and then merge all the elements together in your prototype.

To export a custom element, click the “Resource sharing” button from the left sidebar. This will open a new popup window where you can sign in with your ForeUI account and share a resource with other users of the ForeUI comunity.

See Examples: At the ForeUI demo page, you can see some good examples of screen mockups and DHTML prototypes. Just click a thumbnail and the demo prototype will run in your browser.

Join the ForeUI Community

ForeUI has an active community of users at ForeUI.net, where you can meet and interact with other people who are already using the ForeUI application. You can download or upload resources from the ForeUI community for Free, this includes custom elements, libraries and plots .If you have any problems or need any help, you can ask questions, leave comments or start a discussion.

More information about using ForeUI is available on the official documentation page.

The free version of ForeUI lets you test all the features for 15 days. If you seriously need a full featured prototyping tool, it’s worth giving ForeUI a try.

Brought To You By

Do you want to advertise here? Click to get more info…

The first image below clearly says that the story “$10M X Prize Announced for Solution to Gulf Oil Spill Crisis“  could not succeed when it came in the digg trending story this morning and digg failed it to get on the home page, as per the message says ” Failed! just like nu metal, this trend failed. It won’t be promoted. But it was not the case. So, what’s the case then? see the second image. I am not sure if it does matter but this story was submitted by Jay Adelson who worked as Digg’s CEO for five years and recently left out.

For those who don’t know what is digg trending story, click here to read in their own words.

Yes, in the image below digg says that story made popular 3 minutes ago which is weird, isn’t it? I dont understand that if the story was failed and won’t be promoted then how come it made popular.

This case forced me to think if digg algorithm is still alive or we are a part of community which is not credible anymore. Maybe it’s because that trending at digg.com is still in beta but they must consider this seriously. I am hoping Digg.com will not penalized us for bringing this case to the world.

Thanks to Chris who bring this in our knowledge and shared his latest experience with us.

Brought To You By

Do you want to advertise here? Click to get more info…

The updates didn’t add any new features, but they did add an important change to the code contained in each one. The full story on that is technical and likely to be quite boring (I’ll expand on this for those interested later in the post). The important bit is that I highly recommend those using Builder and/or any of the above-mentioned plugins upgrade their sites to these new versions.

Updating is important as some of the new features that will be released soon (such as the Builder Blocks that we discussed during yesterday’s iThemes.tv show) will only work properly if all of these updates are present on your system. In other words, if you update Builder to 2.4.15 but have an older version of Tabber Widget on your site, these new features will have a chance of not working properly. Again, please make sure that you upgrade Builder, Builder Style Manager, Builder SEO, and Tabber Widget.

I’m very sorry for this inconvenience. Please leave a comment if you have any questions or concerns.

Technical Explanation

For those that want to know the technical details, I am more than happy to share them.

The Builder, Builder Style Manager, Builder SEO Plugin, and Tabber Widget projects all have a shared set of code found in each project’s lib/classes directory. The lib/classes code library provides a robust set of functions and classes that makes development quicker and more reliable. For example, this library contain classes and functions that generate forms, process form data, provide versioned storage systems complete with upgrade abilities, handle files and images, offers a parent class that allows for rapid creation of new editors, etc. This central set of libraries started development with the Builder project and has grown to contain a wealth of valuable code that can be used for numerous projects (as none of the code is Builder-specific). Thus, this library has found its way into other projects.

For a couple of months, I’ve known of a serious problem with this code spreading to other projects: the fact that there is now a possibility of multiple versions of the code being present on the same system. This can be easily caused when more than one project that uses the library is present and only one of the projects is updated after a new library release. Since only one set of the code libraries can load, it was impossible to ensure that only the most current version of the libraries loaded. If the old set of libraries loaded, it could very easily cause the updated project code to fail.

These new releases contain a new set of the lib/classes code (version 1.2.0) which addresses this issue. Now, instead of a first come, first loaded process of deciding which library version loads, each project’s library registers itself. When all the plugins and the theme have loaded and registered their respective versions of the library code, a process runs that identifies the most current version of the library and loads only that one.

If you are interested in how this works, check out the load.php and init.php files in lib/classes of one of the updated projects. The init.php file is what is loaded when the current version is identified. Inside the init.php file, a function is defined that all the projects use to load that version’s file when needed.

1. More screen estate – more windows opened at once.
2. More windows opened at once – more time spent on managing them.
3. More time spent on windows management – less time spent on actual work.

Looks frustrating, isn’t it? You bought the second monitor to increase your productivity and make your work faster, not to shuffle numerous windows between monitors! Attaching the third monitor doesn’t help – even more screen estate, opened windows and time lost on routine window manipulations.

The right answer is following: to be efficient, multi-monitor computing requires specially designed user interface tools and utilities. Historically, Windows user interface was designed in a single-monitor era and haven’t changed significantly since then. Even the latest Windows 7 system, though introduced many smart updates in its UI, provided nothing new regarding the work with multi-display desktops.

Actual Multiple Monitors, a software utility by Actual Tools, has been developed to upgrade Windows user interface with all necessary tools and means and make the work with multiple monitors fast, pleasant and efficient.

Multi-monitor Taskbar

The first thing you notice on a second display is its “emptiness”: there is no taskbar, no icons, no windows. Okay, windows can be dragged and new icons can be created there, but what about the taskbar? Your short research ends up with a disappointing result: Windows has no task management options on secondary displays. Yes, each time you need to activate a window minimized on a secondary monitor, to launch a new task from the Start menu, to access a background service’s icon in the notification area – you have to drag the mouse to the primary display and back.

General Windows Taskbar in a multi-monitor environment

Actual Multiple Monitors can emulate Windows Taskbar on all secondary monitors you have. Each such taskbar looks and works like a full replica of the main taskbar: it has the Start button, notification area and clock, it can display toolbars (like Quick Launch), it can be locked or hidden, and it even supports the new abilities presented in Windows 7: Pin and Peek.

Besides the regular features of the main taskbar, Multi-monitor Taskbar offers some advanced abilities.

Most of them are available in each secondary taskbar’s context menu:

First, each taskbar (including the primary one) can display just the tasks running on its host monitor (so-called individual mode).

Multi-monitor taskbar (individual mode)

In other words, you can use each monitor for a separate activity, and applications from different monitors won’t be mixed up in the taskbar. However, if you need to manage all running tasks despite which monitor you are currently working with – each secondary taskbar can mirror the contents of the primary one (the mirror mode).

Second, you can move groups of windows between monitors in a single click using the special commands in the taskbar’s context menu. There are two basic actions: transfer all windows from one monitor to another (“Get…” and “Send…” commands) and collect windows from all monitors onto a certain one (“Gather all…” command). This may be useful for those who attach/detach certain displays frequently.

Finally, there are some usability features for versions older than Windows 7 or for visual themes other than Aero:

• you can make all taskbars semi-transparent of any desired level
• you can drag task buttons and notification area icons with the mouse, arranging them as you like
• you can stretch the Start button out to the multi-row taskbar in such visual themes as Windows Classic or Windows XP Blue/Green/Silver (so it can be hit easily)

Multi-monitor Task Switcher

This small window is invisible most of the time and appears only when you press Alt-Tab, but it’s almost as important as the taskbar. Despite this, Windows displays the Task Switcher on the primary display only, too, as in case with the taskbar. That means you need to switch your attention from the display you are currently working with to the primary one and back. Though it’s faster than moving the mouse (as in taskbar case), but it’s also annoying and distractive.

Using Actual Multiple Monitors, you can clone the Task Switcher window on secondary displays and switch between tasks smoothly and conveniently on any monitor.

Multi-monitor Task Switcher

Advanced Window Manipulations

When you have more than one monitor displaying your Windows desktop, there appear some opportunities that were impossible or had no mean for a single monitor.

Move to Monitor

The first thing that immediately becomes obvious is the fast transfer of a particular window from one monitor to another. Dragging it with the mouse isn’t fast enough (at first; later, it becomes tedious and annoying). With Actual Multiple Monitors, you can put an additional button onto each window’s title bar: click it – and window will jump instantly to the next monitor! Right click on this button pops up a menu with the list of monitors so that you can transfer a window to the exactly required one; the same menu is available in window’s context menu.

Move to Monitor title button          Move to monitor submenu

Also, the program provides special hotkeys – Move to Next Monitor (Win-/ by default) and Move to Previous Monitor (Win-Shift-/ by default).

Maximize to Desktop

The second thing is the ability to expand a window quickly to entire composite desktop, as the regular Maximize button does for a single monitor (in a multi-monitor desktop this button maximizes a window to its current monitor only). Actual Multiple Monitors offers you another special title button – Maximize to Desktop. It works exactly as its name implies: first click on this button expands a window to desktop’s extent; second click restores window’s size and position.

This button also has the corresponding item in window’s context menu and the hotkey combination (Win-Num* by default).

Multi-monitor Desktop Extensions: Background Wallpaper and Screen Saver

No matter how large picture you put as desktop background – Windows still displays its top-left corner on each monitor; there are no options to make this picture span all monitors, as well as to set different backgrounds on different monitors. The same is true for screen savers: although some of them are able to span the entire multi-monitor desktop, there are still many screen savers that know nothing about multiple monitors.

Actual Multiple Monitors comes to the rescue in this situation too: with its help, you will be able to either set a single picture as background for the entire desktop or put different background pictures on different monitors.

The same extension is available for screen savers.

Multi-monitor Wallpaper Slideshow

In addition, the background wallpaper extension supports the slideshow mode: you create a “playlist” of individual images and image folders, set the delay between slides – and the program will automatically rotate pictures from the playlist on the entire desktop’s background or just the backgrounds of specified monitors.

Multi-monitor Desktop Management

Sometimes the number of monitors connected to your system may vary. This situation is quite common for mobile computers (notebooks, netbooks, Tablet PCs) that can be connected to an external display, and for home media center PCs that are usually plugged to a high definition TV. Also, in some cases the need arises to change the entire desktop configuration: arrange monitors differently, alter their properties (resolution, color depth, etc.) and so on. Each time such need arises, you have to open the Display Settings dialog and adjust all required options separately. The more often it happens – the more time you spend on changing your desktop configuration.

Actual Multiple Monitors gives you the tools to make such changes in about two clicks. Right-click the program’s icon in the system tray to invoke its context menu:

The “Manage Secondary” submenu lets you switch secondary displays on/off either one at a time or all at once (please note that “Disable all…”/”Enable all…” commands have their corresponding keyboard shortcuts). In the related “Set Primary” submenu you can quickly switch the primary display. And the “Desktop Profiles” submenu lets you activate or configure so-called desktop profiles.

Multi-monitor Desktop Profiles

Desktop profiles are named groups of various settings applied at once when the profile is activated. Each profile includes the number of displays, their relative layout and per display information: resolution, color depth, refresh rate, is display enabled, is display primary.

You can create as many profiles as you need and switch between various desktop configurations in a flash: either via above-mentioned context menu or by pressing the keyboard shortcut to invoke the “Desktop Profiles” submenu at the mouse pointer.

Multi-monitor Desktop Icons Manager

If you often change the configuration of your desktop, you may notice that sometimes Windows fails to keep the order of desktop icons: their habitual layout becomes garbled, and you have to restore it manually. The more icons you have – the more annoying each such situation is. Actual Multiple Monitors can save the current layout of your desktop icons for the current desktop configuration and then restore this layout automatically in a single click – see the “Save/Restore desktop icons order” commands in the context menu above (both commands also can be invoked via hotkeys).

Conclusion

Windows user interface for a multi-monitor environment is incomplete and may significantly reduce the actual benefit from the expanded screen real estate. Actual Multiple Monitors supplies it with all goods (multi-monitor taskbar, advanced window manipulations, extended options for wallpapers and screen savers, special desktop control utilities) and hence, appears to be a must-have program for any user who wants to use multiple displays at full extent.

Brought To You By

Do you want to advertise here? Click to get more info…

The challenge of coming up with great posts has challenged bloggers for years, although there is a great way that you can nearly eliminate this problem with just a few visits to other websites.

The most popular content is ranked by users on sites like Digg, TweetMeme (for Twitter), and Like Button (for Facebook), giving you a glimpse into the most popular content on the Web. So much content is being shared at any time that even these sites can be difficult to use when you need new topics to write about.

For the most part, shared content revolves around two main types: original content, such as news stories, blog posts, and photographs, while the second group revolves around collections and remixes, ranging from list posts to edited photographs and remixed songs.

I’ll take a quick look at the front page of Digg and then we’ll look at how you can apply these trends to come up with interesting blog posts.

• There are two posts in the list format, “6 Bizarre Mysteries (That Are Still Totally Unanswered)” and “The 6 TV Badasses We’d Love to Have a Drink With”. These posts are popular across all types of sites, so it is no surprise to see them on Digg.
• Seven of the posts are news-specific. While news generally doesn’t revolve around the main television stations, it might depend on the time of the day, as many of the news posts currently on Digg are from sites like Telegraph, The NY TImes, CNN, Kiplinger, USA Today, and MSNBC.
• Four articles deal specifically or link directly to an image, while one links to a video. The other articles also include some type of images, but their main focus is on text.

How to Integrate Current Trends into Your Blog

Even if you don’t have a news blog, it can be a good idea to base your new posts on the current trends. Contrary to popular belief, some of the most trafficked posts deal with current events, rather than timeless content. Sure, the timeless content will still have rewards down the road, but that is only if it becomes popular today, is linked to frequently, and then is ranked well in search engines for a wide array of terms.

A popular post format working its way across the social networking sites right now is the “in-depth” post, with analysis of current trends, such as the Facebook debacle. Readers want to know how certain events will impact their life, rather then just the news, which can be found on the original site.

While there has certainly been debate about the format of list posts, these posts are popular and will remain so. They have always been popular, even in the days of newspapers and print. They grab a visitor’s attention and can become popular in a matter of minutes. Putting the time into researching the posts is ideal, and it’ll result in a post that will be linked to across social networking sites and relevant blogs.

The key is creating unique content. Until you have become as large as some of the most popular blogs, you’ll need to set yourself apart in some way or another. The key to doing this is to create content that few other sites have, and this may include breaking news. Scour the web for hot trends and then see if any new developments have taken place. Starting a really local blog can draw in the traffic levels that will let you earn an income – al inspired by sites like Topix.

Other Ideas to Keep in Mind:

1. Breaking a news story may not result in a lot of traffic unless it is an a popular niche, like technology.
2. If you simply re-post news topics found on other blogs, you’ll likely exhaust yourself, as you’ll generally need to post more than ten new posts per day.
3. Generating ideas based on the top news stories can be just as difficult as creating a post about something you have never researched before.

No matter what type of site you run, keeping tabs on the popular social networking sites and the directories connected to them will allow you to constantly see where markets are heading. Even if you have a blog about an extremely specific topic, you can still perform searches on these sites and see how well other posts have done.

Remember, the only thing that matters in all this si that your site stands out. Focus solely on what your visitors are looking for even before they tell you. Stay involved in your niche and create a community around your site to maximize the time you spend writing posts.

The Help documentation provided within Office2 Pro includes some guidance about configuring your Google account within the application, but the steps are not thorough or very clear.

Make sure you are viewing the application in LANDSCAPE mode to begin. Step 1 is to click the BACK button.

Step 2: Click the EDIT button.

Step 3: Click ADD SERVICE.

Step 4: Click GOOGLE DOCS to add it as a service.

Step 5: Enter your Google credentials, and a name for this ‘service.’

Step 6: Click DONE.

Step 7: Click on the name you provided as a description for your Google account.

Step 8: Click on an existing document you want to edit, or the “+” symbol to add a new document.

Step 9: Choose to create a word processing document or a spreadsheet /workbook. (If you noticed the misspelling in the image below, rest assured I DID correct “analysis” in the top document. That was one shared with my by someone else. )

Step 10: Enter a new name for your document.

“Unknown errors” unfortunately appear to be common with this version of Office2 Pro and Google Docs.

Step 12: Select text as desired and choose font type and text size from the menu bar, using your finger.

Step 13: Select formatting options as desired, including bulleted or numbered lists. Note the formatting menu bar can be “slid” to reveal a second set of formatting options.

Step 14: Since a SAVE button is not available, you must click CLOSE to save the document.

Step 15: “Unknown errors” are common, so save often.

I was able to do SOME editing on a Google Doc last Friday using Office2 Pro, but overall the experience was very frustrating and not nearly as productive as I’d hoped it would be because of frequent “unknown errors.”

I hope the application will be updated soon and this buggy behavior with Google Docs will be fixed. It’s GREAT the application developers are working to create an iPad environment which will enable editing for Google Doc word processing and spreadsheet files.

Once that is possible in more seamless way, if Apple makes the iPad Keynote application responsive to the Bluetooth keyboard’s arrow keys to wirelessly advance slides I may be able to leave my laptop at home when I travel for presentations! I’d like to become an “iPad only” presenter and conference session blogger, and trade in my 10 lbs+ laptop for the 1.5 lb iPad.

Technorati Tags:
doc, google, ipad, pro, docs, office2, edit, word, processing, excel, file

  

WordPress’ popularity has grown exponentially as of late. This rise in popularity is due in part to WordPress’ custom fields. Custom fields allow you to add little bits of data to posts. They have changed the way people look at WordPress. A couple of years ago, WordPress was a blogging platform — a good one, but a blogging platform nonetheless. Now it’s widely considered to be an excellent simple content management system. How did it evolve so quickly? Custom fields, that’s how.

How exactly did these bits of data transform WordPress? The fields could initially include the weather — as the codex points out — the temperature and various other not-particularly-useful things. And that was the story for a while. Then people started to realize that they could use the custom fields to store URLs of images. They could then pull these images to the home page to create magazine-style layouts. These magazine themes, as they became known, evolved, and eventually you were able to pull images automatically from posts. You can draw a direct line from WordPress’ popularity to the magazine themes to custom fields.

[Offtopic: by the way, did you know that Smashing Magazine has one of the most influential and popular Twitter accounts? Join our discussions and get updates about useful tools and resources — follow us on Twitter!]

The Custom Field Syntax

In order to do more complicated things, you’ll need to understand the syntax. Creating a custom field is easy: it requires a name and a value. The name is constant, but the value can change with each post.

A real-world example: let’s say you run a blog about cameras. You have categories set up for each type of post (“Review,” “New,” etc.), and you tag the post with the manufacturer’s name. But you want to display the price and specifications of the camera. This is as easy as creating a new custom field with the name Camera_Specs and then typing the info into the value box. Click the “Add” button and you will have added the custom field to the post.

Displaying the field on the page is simple, too. In the single.php file, add the following code:

<?php echo get_post_meta($post->ID, "Camera_Specs", true); ?>

(You might want to wrap this in a paragraph, ordered list or the like. You can use HTML in the value of the field.)

Custom fields can be conditional, too. We can display a camera’s specs or, if that isn’t available, some generic text.

<?php $camera_specs = get_post_meta($post->ID, 'Camera_Specs', true);
if ($camera_specs) {
?>
<?php echo $camera_specs; ?>

<?php } else { ?>

<p>No specification available.</p>

<?php } ?>

That’s the general syntax, and now the only limit is your imagination!

Spicing Up Post Titles

Post titles are usually fairly boring. You’re limited to text. Links aren’t possible, nor is HTML. Well, not anymore. Custom fields to the rescue!

Using a conditional statement and custom fields, adding any HTML to your posts’ titles is now possible. (This won’t work with RSS feeds or the like, but it works great for any titles on the blog itself.) We’ll use the custom field Post-Title:

You can add any HTML you like to your posts’ titles. Implementing it on your blog is easy, too. You’ll have to use the following code on all pages on which titles are displayed: the home page, archives, current posts, etc. The following snippet looks for the custom field and falls back on the_title:

<?php $post_title = get_post_meta($post->ID, 'Post-Title', true);
if ($post_title) {
?>
<h2><?php echo $post_title; ?></h2>

<?php } else { ?>

<h2><?php the_title(); ?></h2>

<?php } ?>

An easy yet effective way to improve your website.

Only Display Posts With A Specific Custom Field

WordPress displays posts through something called a loop. Another WordPress function, query_posts, allows you to choose exactly which posts are displayed in your loop. One parameter lets you display only posts that have a custom field and/or that have a specific custom field value. Going back to our camera website, we could display only posts that have the custom field Camera_Specs:

query_posts('meta_key=Camera_Specs');

If we wanted to display only cameras that had 10 megapixels (and if all posts had the custom field Camera_Specs_Pixels that specified the value of the number of megapixels), we could do so with the following:

query_posts('meta_key=Camera_Specs_Pixels&meta_value=10');

You may want to do this on a custom page template. If so, just add the following to the top of the file and name it appropriately (e.g. camera-specs-pixels.php):

<?php /*Template Name: Camera Specs Pixels */?>

To make your new page template show up, create a new page, and then in the drop-down on the right, choose the page template you’ve just created. Publish the post, and you’re done!

Using Custom Fields To Create A Unique Design

WordPress 2.7 introduced the post_class function. This allows you to apply specific CSS classes to posts (thus giving them unique designs). Guess what? You can use custom fields to apply particular classes!

This one is a bit more involved. First, open your functions.php file and add the following code:

function shiftnews_post_class($classes) {
   global $post;
   $sn_post_class_array = array (
      get_the_author_meta('display_name'),
      get_post_meta($post->ID, 'post-class', true)
   );
   $classes[] = implode(" ", $sn_post_class_array);
   return $classes;
}

You’ll then need to edit your single.php file, adding <?php post_class(shiftnews_post_class()); ?> to a DIV that wraps your content. Using the custom field post-class, you can then type in CSS classes (e.g. flower-bg or blue-content, which would apply the classes .flower-bg or .blue-content), thus adding them to the post.

The possibilities here are inspiring, and this is quite possibly the best way to create a unique post design for WordPress.

Set a different background for each post with custom fields

You could take this even further by allowing users to choose a background image through custom fields. Of course, you could just resize the image to 1920×1200, upload it and copy the URL into a custom field, ‘background’ and then put the following code in your header:

<?php if (is_page() || is_single()) {

<?php $background = get_post_meta($post->ID, 'background', true);
if ($background) {
?>
<style type="text/css">body{ url(<?php echo $background; ?>) no-repeat fixed; }</style>

<?php }
}?>

But that would be a pain to do every single time you just wanted to change the background image. There is an easy way to do it: upload an image, copy the URL into a custom field and then use a script to resize the image and set it as the background.

First thing to do is to upload an image. We’re going to be resizing it to 1920px (although depending on your audience you may want to use a higher/lower resolution) so anything that’s 1200px wide or above should look fine.

Copy the relative URL of the image (ie /wp-content/… , not http://yoursite.com/wp-content/) into a custom field called ‘background’ and click ‘add custom field’. Next, we need something to resize the images with. We’ll be using timthumb. Upload it to /yourtheme/timthumb/ and we’re ready to go!

Open up your header once again and add (below your theme’s stylesheet) the following:

<?php if (is_page() || is_single()) {

<?php $background = get_post_meta($post->ID, 'background', true);
if ($background) {
?>
<style type="text/css">background: url(<?php bloginfo('template_url'); ?>/timthumb/timthumb.php?w=1920&zc=1&src=<?php echo $background; ?>) fixed no-repeat;</style>

<?php }
}?>

What that does is takes the image from the custom field and then runs it through timthumb so it gets resized to fill the entire screen, even on large monitors (the image then gets cached, so it is only generated once). The resized image is then displayed as the background of the post.

If you’re having problems, make sure you’ve got the relative URL and not the absolute URL of the image, it is hosted on your server (you’re not hotlinking!) and that you have the file permissions set correctly (as shown in the timthumb wiki). This is one of my favourite things to do with custom fields as not only is it easy to do, but it’s also very effective in differentiating different blog posts; this technique is used to great effect on Nometet.com.

Search Engine Optimization With Custom Fields

The “All in One SEO Pack” is consistently one of the most popular plug-ins for WordPress. It allows you to do things like specify your own title tag or meta description. It is powered by custom fields, meaning you can recreate it in your theme.

Start by adding the following code to your theme’s title tag:

<?php if ( is_single() || is_page() ) { ?><?php $title = get_post_meta($post->ID, 'Title', true);  if ($title) { ?>
<?php echo $title; ?> | <?php bloginfo('name'); ?>
<?php } else { ?>
<?php wp_title(''); ?> | <?php bloginfo('name'); ?>
<?php } ?>
<?php } ?>

Now, when a page or post is displayed, WordPress will look for the custom field Title. If it exists, its contents will be displayed; if it doesn’t, then the post’s title will be displayed. To use this new-found power, create the custom field Title and make its value what you want to be displayed in the title tag (note that | [Blog name] will be added).

You can apply the same idea to other elements, such as the description tag:

<?php if (is_single() || is_page() ) : if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<meta name="description" content="<?php $description = get_post_meta($post->ID, 'Description', true);  if ($description) { ?><?php echo get_post_meta($post->ID, "Description", true); ?>
<?php } else { ?><?php the_excerpt_rss(); ?><?php } ?>" />
<?php endwhile; endif; elseif(is_home()) : ?>
<meta name="description" content="<?php bloginfo('description'); ?>" />
<?php endif; ?>

The code above should replace the entire description tag and allow you to use the custom field Description to display the contents of the description tag. If the custom field does not exist, then the excerpt is used on posts and pages, and the blog’s description (which you set when you installed WordPress) is used on the home page.

Read more on the topic in the article WordPress SEO: The Definitive Guide To Higher Rankings For Your Blog.

Custom This, Custom That!

Custom fields are very powerful, and the only limit is your imagination! As we’ve seen in this post, you can do some really awesome things with WordPress’ custom fields. They can improve both your blog and its ranking in search engines. Enjoy!

If you’d like to do some further reading:

• 10 Awesome Things to Do With WordPress’ Custom Fields
• WordPress Custom Field Tutorial, Part 1 and Part 2
• Custom “Read More” Links

The possibilities for this are inspiring, and this is quite possibly the best way to create a unique post design for WordPress.

Of course, the other option is to use custom fields to include a style sheet that is specific to the post or even just to use inline styling.

You can add a style sheet to a post with a custom field value quite easily. First, add the following code to the header.php file, after your theme’s style sheet loads:

<?php if (is_page() || is_single()) {

<?php $stylesheet = get_post_meta($post->ID, 'Stylesheet', true);
if ($stylesheet) {
?>
<link rel="stylesheet" href="<?php bloginfo('template_url'); ?><?php echo $stylesheet; ?>.css" type="text/css" media="screen,projection,tv" /></h2>

<?php }
}?>

This tells WordPress to look for the custom field Stylesheet on posts and pages. All you’ve got to do is enter the name of the style sheet (so if it’s blue.css, just enter the value blue) and upload it to your theme’s directory.

A whole new style sheet might be overkill in some cases, though. If you’re changing just one or two styles, then inline styling might be the way to go. This is just as easy: paste the following code into your header.php file, again after your theme’s style sheet loads:

<?php if (is_page() || is_single()) {

<?php $styles = get_post_meta($post->ID, 'Styles', true);
if ($styles) {
?>
<style type="text/css"><?php echo $styles; ?></style>

<?php }
}?>

This piece of code looks for the custom field Styles; put in it any styling you want to apply only to that post. For example:

body{
    color:#000;
    background:#fff;
}

There’s something for everyone here, so you can start to quickly create unique post designs however you prefer! You might want to look at Smashing Magazine’s previous post about custom fields as well.

(al)

© Alex Denning for Smashing Magazine, 2010. | Permalink | 33 comments | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags:

  

I’ve been writing JavaScript code for much longer than I care to remember. I am very excited about the language’s recent success; it’s good to be a part of that success story. I’ve written dozens of articles, book chapters and one full book on the matter, and yet I keep finding new things. Here are some of the “aha!” moments I’ve had in the past, which you can try out rather than waiting for them to come to you by chance.

[Offtopic: by the way, did you know that Smashing Magazine has one of the most influential and popular Twitter accounts? Join our discussions and get updates about useful tools and resources — follow us on Twitter!]

Shortcut Notations

One of the things I love most about JavaScript now is shortcut notations to generate objects and arrays. So, in the past when we wanted to create an object, we wrote:

var car = new Object();
car.colour = 'red';
car.wheels = 4;
car.hubcaps = 'spinning';
car.age = 4;

The same can be achieved with:

var car = {
  colour:'red',
  wheels:4,
  hubcaps:'spinning',
  age:4
}

Much shorter, and you don’t need to repeat the name of the object. Right now, car is fine, but what happens when you use invalidUserInSession? The main gotcha in this notation is IE. Never ever leave a trailing comma before the closing curly brace or you’ll be in trouble.

The other handy shortcut notation is for arrays. The old school way of defining arrays was this:

var moviesThatNeedBetterWriters = new Array(
  'Transformers','Transformers2','Avatar','Indiana Jones 4'
);

The shorter version of this is:

var moviesThatNeedBetterWriters = [
  'Transformers','Transformers2','Avatar','Indiana Jones 4'
];

The other thing about arrays is that there is no such thing as an associative array. You will find a lot of code examples that define the above car example like so:

var car = new Array();
car['colour'] = 'red';
car['wheels'] = 4;
car['hubcaps'] = 'spinning';
car['age'] = 4;

This is not Sparta; this is madness—don’t bother with this. “Associative arrays” is a confusing name for objects.

Another very cool shortcut notation is the ternary notation for conditions. So, instead of the following…

var direction;
if(x < 200){
  direction = 1;
} else {
  direction = -1;
}

… You could write a shorter version using the ternary notation:

var direction = x < 200 ? 1 : -1;

The true case of the condition is after the question mark, and the other case follows the colon.

JSON As A Data Format

Before I discovered JSON to store data, I did all kinds of crazy things to put content in a JavaScript-ready format: arrays, strings with control characters to split, and other abominations. The creation of JSON by Douglas Crockford changed all that. Using JSON, you can store complex data in a format that is native to JavaScript and doesn’t need any extra conversion to be used immediately.

JSON is short for “JavaScript Object Notation” and uses both of the shortcuts we covered earlier.

So, if I wanted to describe a band, for example, I could do the following:

var band = {
  "name":"The Red Hot Chili Peppers",
  "members":[
    {
      "name":"Anthony Kiedis",
      "role":"lead vocals"
    },
    {
      "name":"Michael 'Flea' Balzary",
      "role":"bass guitar, trumpet, backing vocals"
    },
    {
      "name":"Chad Smith",
      "role":"drums,percussion"
    },
    {
      "name":"John Frusciante",
      "role":"Lead Guitar"
    }
  ],
  "year":"2009"
}

You can use JSON directly in JavaScript and, when wrapped in a function call, even as a return format of APIs. This is called JSON-P and is supported by a lot of APIs out there. You can use a data endpoint, returning JSON-P directly in a script node:

<div id="delicious"></div><script>
function delicious(o){
  var out = '<ul>';
  for(var i=0;i<o.length;i++){
    out += '<li><a href="' + o[i].u + '">' +
           o[i].d + '</a></li>';
  }
  out += '</ul>';
  document.getElementById('delicious').innerHTML = out;
}
</script>
<script src="http://feeds.delicious.com/v2/json/codepo8/javascript?count=15&callback=delicious"></script>

This calls the Delicious Web service to get my latest JavaScript bookmarks in JSON format and then displays them as an unordered list.

In essence, JSON is probably the most lightweight way of describing complex data—and it runs in a browser. You can even use it in PHP using the json_decode() function.

Native JavaScript Functions (Math, Array And String)

One thing that amazed me is how much easier my life got once I read up thoroughly on the math and string functions of JavaScript. You can use these to avoid a lot of looping and conditions. For example, when I had the task of finding the largest number in an array of numbers, I used to write a loop, like so:

var numbers = [3,342,23,22,124];
var max = 0;
for(var i=0;i<numbers.length;i++){
  if(numbers[i] > max){
    max = numbers[i];
  }
}
alert(max);

This can be achieved without a loop:

var numbers = [3,342,23,22,124];
numbers.sort(function(a,b){return b - a});
alert(numbers[0]);

Notice that you cannot use sort() on a number array because it sorts lexically. There’s a good tutorial on sort() here in case you need to know more.

Another interesting method is Math.max(). This one returns the largest number from a list of parameters:

Math.max(12,123,3,2,433,4); // returns 433

Because this tests for numbers and returns the largest one, you can use it to test for browser support of certain properties:

var scrollTop= Math.max(
 doc.documentElement.scrollTop,
 doc.body.scrollTop
);

This works around an Internet Explorer problem. You can read out the scrollTop of the current document, but depending on the DOCTYPE of the document, one or the other property is assigned the value. When you use Math.max() you get the right number because only one of the properties returns one; the other will be undefined. You can read more about shortening JavaScript with math functions here.

Other very powerful functions to manipulate strings are split() and join(). Probably the most powerful example of this is writing a function to attach CSS classes to elements.

The thing is, when you add a class to a DOM element, you want to add it either as the first class or to already existing classes with a space in front of it. When you remove classes, you also need to remove the spaces (which was much more important in the past when some browsers failed to apply classes with trailing spaces).

So, the original function would be something like:

function addclass(elm,newclass){
  var c = elm.className;
  elm.className = (c === '') ? newclass : c+' '+newclass;
}

You can automate this using the split() and join() methods:

function addclass(elm,newclass){
  var classes = elm.className.split(' ');
  classes.push(newclass);
  elm.className = classes.join(' ');
}

This automatically ensures that classes are space-separated and that yours gets tacked on at the end.

Event Delegation

Events make Web apps work. I love events, especially custom events, which make your products extensible without your needing to touch the core code. The main problem (and actually one of its strengths) is that events are removed from the HTML—you apply an event listener to a certain element and then it becomes active. Nothing in the HTML indicates that this is the case though. Take this abstraction issue (which is hard for beginners to wrap their heads around) and the fact that "browsers" such as IE6 have all kind of memory problems and too many events applied to them, and you'll see that not using too many event handlers in a document is wise.

This is where event delegation comes in. When an event happens on a certain element and on all the elements above it in the DOM hierarchy, you can simplify your event handling by using a single handler on a parent element, rather than using a lot of handlers.

What do I mean by that? Say you want a list of links, and you want to call a function rather than load the links. The HTML would be:

<h2>Great Web resources</h2>
<ul id="resources">
  <li><a href="http://opera.com/wsc">Opera Web Standards Curriculum</a></li>
  <li><a href="http://sitepoint.com">Sitepoint</a></li>
  <li><a href="http://alistapart.com">A List Apart</a></li>
  <li><a href="http://yuiblog.com">YUI Blog</a></li>
  <li><a href="http://blameitonthevoices.com">Blame it on the voices</a></li>
  <li><a href="http://oddlyspecific.com">Oddly specific</a></li>
</ul>

The normal way to apply event handlers here would be to loop through the links:

// Classic event handling example
(function(){
  var resources = document.getElementById('resources');
  var links = resources.getElementsByTagName('a');
  var all = links.length;
  for(var i=0;i<all;i++){
    // Attach a listener to each link
    links[i].addEventListener('click',handler,false);
  };
  function handler(e){
    var x = e.target; // Get the link that was clicked
    alert(x);
    e.preventDefault();
  };
})();

This could also be done with a single event handler:

(function(){
  var resources = document.getElementById('resources');
  resources.addEventListener('click',handler,false);
  function handler(e){
    var x = e.target; // get the link tha
    if(x.nodeName.toLowerCase() === 'a'){
      alert('Event delegation:' + x);
      e.preventDefault();
    }
  };
})();

Because the click happens on all the elements in the list, all you need to do is compare the nodeName to the right element that you want to react to the event.

Disclaimer: while both of the event examples above work in browsers, they fail in IE6. For IE6, you need to apply an event model other than the W3C one, and this is why we use libraries for these tricks.

The benefits of this approach are more than just being able to use a single event handler. Say, for example, you want to add more links dynamically to this list. With event delegation, there is no need to change anything; with simple event handling, you would have to reassign handlers and re-loop the list.

Anonymous Functions And The Module Pattern

One of the most annoying things about JavaScript is that it has no scope for variables. Any variable, function, array or object you define that is not inside another function is global, which means that other scripts on the same page can access—and will usually override— them.

The workaround is to encapsulate your variables in an anonymous function and call that function immediately after you define it. For example, the following definition would result in three global variables and two global functions:

var name = 'Chris';
var age = '34';
var status = 'single';
function createMember(){
  // [...]
}
function getMemberDetails(){
  // [...]
}

Any other script on the page that has a variable named status could cause trouble. If we wrap all of this in a name such as myApplication, then we work around that issue:

var myApplication = function(){
  var name = 'Chris';
  var age = '34';
  var status = 'single';
  function createMember(){
    // [...]
  }
  function getMemberDetails(){
    // [...]
  }
}();

This, however, doesn’t do anything outside of that function. If this is what you need, then great. You may as well discard the name then:

(function(){
  var name = 'Chris';
  var age = '34';
  var status = 'single';
  function createMember(){
    // [...]
  }
  function getMemberDetails(){
    // [...]
  }
})();

If you need to make some of the things reachable to the outside, then you need to change this. In order to reach createMember() or getMemberDetails(), you need to return them to the outside world to make them properties of myApplication:

var myApplication = function(){
  var name = 'Chris';
  var age = '34';
  var status = 'single';
  return{
    createMember:function(){
      // [...]
    },
    getMemberDetails:function(){
      // [...]
    }
  }
}();
// myApplication.createMember() and
// myApplication.getMemberDetails() now works.

This is called a module pattern or singleton. It was mentioned a lot by Douglas Crockford and is used very much in the Yahoo User Interface Library YUI. What ails me about this is that I need to switch syntaxes to make functions or variables available to the outside world. Furthermore, if I want to call one method from another, I have to call it preceded by the myApplication name. So instead, I prefer simply to return pointers to the elements that I want to make public. This even allows me to shorten the names for outside use:

var myApplication = function(){
  var name = 'Chris';
  var age = '34';
  var status = 'single';
  function createMember(){
    // [...]
  }
  function getMemberDetails(){
    // [...]
  }
  return{
    create:createMember,
    get:getMemberDetails
  }
}();
//myApplication.get() and myApplication.create() now work.

I’ve called this “revealing module pattern.”

Allowing For Configuration

Whenever I've written JavaScript and given it to the world, people have changed it, usually when they wanted it to do things that it couldn't do out of the box—but also often because I made it too hard for people to change things.

The workaround is to add configuration objects to your scripts. I’ve written about JavaScript configuration objects in detail, but here’s the gist:

• Have an object as part of your whole script called configuration.
• In it, store all of the things that people will likely change when they use your script:
  • CSS ID and class names;
  • Strings (such as labels) for generated buttons;
  • Values such as “number of images being displayed,” “dimensions of map”;
  • Location, locale and language settings.
• Return the object as a public property so that people can override it.

Most of the time you can do this as a last step in the coding process. I’ve put together an example in “Five things to do to a script before handing it over to the next developer.”

In essence, you want to make it easy for people to use your code and alter it to their needs. If you do that, you are much less likely to get confusing emails from people who complain about your scripts and refer to changes that someone else actually did.

Interacting With The Back End

One of the main things I learned from all my years with JavaScript is that it is a great language with which to make interactive interfaces, but when it comes to crunching numbers and accessing data sources, it can be daunting.

Originally, I learned JavaScript to replace Perl because I was sick of copying things to a cgi-bin folder in order to make it work. Later on, I learned that making a back-end language do the main data churning for me, instead of trying to do all in JavaScript, makes more sense with regard to security and language.

If I access a Web service, I could get JSON-P as the returned format and do a lot of data conversion on the client, but why should I when I have a server that has a richer way of converting data and that can return the data as JSON or HTML… and cache it for me to boot?

So, if you want to use AJAX, learn about HTTP and about writing your own caching and conversion proxy. You will save a lot of time and nerves in the long run.

Browser-Specific Code Is A Waste Of Time. Use Libraries!

When I started Web development, the battle between using document.all and using document.layers as the main way to access the document was still raging. I chose document.layers because I liked the idea of any layer being its own document (and I had written more than enough document.write solutions to last a lifetime). The layer model failed, but so did document.all. When Netscape 6 went all out supporting only the W3C DOM model, I loved it, but end users didn't care. End users just saw that this browser didn't show the majority of the Internets correctly (although it did)—the code we produced was what was wrong. We built short-sighted code that supported a state-of-the-art environment, and the funny thing about the state of the art is that it is constantly changing.

I’ve wasted quite some time learning the ins and outs of all of the browsers and working around their issues. Doing this back then secured my career and ensured that I had a great job. But we shouldn’t have to go through this trial by fire any longer.

Libraries such as YUI, jQuery and Dojo are here to help us with this. They take on the problems of browsers by abstracting the pains of poor implementation, inconsistencies and flat-out bugs, and relieve us of the chore. Unless you want to beta test a certain browser because you’re a big fan, don’t fix browser issues in your JavaScript solutions, because you are unlikely to ever update the code to remove this fix. All you would be doing is adding to the already massive pile of outdated code on the Web.

That said, relying solely on libraries for your core skill is short-sighted. Read up on JavaScript, watch some good videos and tutorials on it, and understand the language. (Tip: closures are God’s gift to the JavaScript developer.) Libraries will help you build things quickly, but if you assign a lot of events and effects and need to add a class to every HTML element in the document, then you are doing it wrong.

Resources

In addition to the resources mentioned in this article, also check out the following to learn more about JavaScript itself:

• Douglas Crockford on JavaScript
  An in-depth video Lecture series.
• The Opera Web Standards Curriculum
  With a detailed section on JavaScript.

Related Posts

You may be interested in the following related posts:

• The Seven Deadly Sins Of JavaScript Implementation
• Developing Sites With AJAX: Design Challenges and Common Issues
• 45 Powerful CSS/JavaScript-Techniques

(al)

© Christian Heilmann for Smashing Magazine, 2010. | Permalink | 60 comments | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags: javascript, js

We do a lot of live shows and online webinar training where we often have to translate what time it is for our customers in different time zones across the world.

If you have an international business, you know how frustrating this can be for you and your clients.

For example, we’re in Central Time Zone … so naturally we do all our online events based on that. But typically, someone from the east or west coast or Australia (and even one time in Egypt) will ask what time for them that is.

I just found that you can get the current time in any location using Google.

Simply type in: “time [location]“

For example, we’re in Oklahoma City. So you would search “time Oklahoma city” ….

Hope this helps you!

[ Find out what time and date it is for iThemes here ]

Found via 10 simple Google search tricks