Planetaki Planet Desarrollo Web

Upcoming Web Design And Development Conferences For 2012

2012-02-10T22:56:04Z

We’re well into 2012, and many designers and developers around the world are planning their travels for the year, which may include attending one of the many Web design and development conferences that will be held in the upcoming months. To help you out with your plans, we’ve once again put together a list of conferences and events that you might want to consider.

As always, this post covers events taking place in about a seven month timeframe that ends in early September. In August, we’ll post another article like this that will cover events for the six or seven month period beginning in September.

There is no way for us to include every possible event, so you are more than welcome to help us out and provide a comment to an upcoming event that you feel would be of interest to Smashing Magazine’s readers. This may also be a chance for you to meet members of the Smashing Team this year.

Using the in-page links below, you can choose the month that interests you most:

February 2012 Events
March 2012 Events
April 2012 Events
May 2012 Events
June 2012 Events
July 2012 Events
August/September 2012 Events

February 2012 Events

Multipack Events
“The Multipack is a community of multi-talented Web professionals from across the West Midlands. Every month we get together to discuss design, code, standards and technology, and share our knowledge, skills and talents.”

When: Various dates throughout 2012
Where: Various UK locations

Web Directions’ “What do you know?”
“Come by at 6.30pm and we’ll kick off around 7.00pm. There’ll be ten fast and furious five minute presentations showing off a cool web development or design technique. There’ll be free beer and a bite to eat, and it’s a great chance to see who’s doing what in the local web industry. See you there!”

When: Various dates beginning February 16, 2012
Where: Various cities in Australia

WordCamp
“WordCamp is a conference that focuses on everything WordPress. WordCamps are informal, community-organized events that are put together by WordPress users like you. Everyone from casual users to core developers participate, share ideas, and get to know each other.”

When: Various dates beginning February 17, 2012
Where: Miami, Phoenix, Slovakia, Bangkok, The Netherlands, San Diego, Ponce

SES Conference & Expo
“SES Conference & Expo is the leading global event series that educates delegates in search and social marketing, putting a special focus on tactics and best practices. SES Events provide instruction from the industry’s top experts, including representatives from the Search Engines themselves.”

When: Various dates starting February 20, 2012
Where: London, New York, Shanghai, Toronto, San Francisco

In Control Conference
“Learn from a diverse array of Web experts to use modern tools and techniques to refine your Web design craft now. Harness creative inspiration to unlock your potential, amplify innovation, and broaden your reach. Immerse yourself in two days of idea exchange with potential business partners who are as forward-thinking as you are.”

When: February 20-21, 2012
Where: Orlando, FL, USA at the Embassy Suites Orlando

iStrategy
“iStrategy is an inspirational, two-day, digital media conference for senior executives who believe that the success of their business requires a sound digital strategy. iStrategy is held bi-annually at each of our four regional event locations in North America, Europe, Australia and Asia.”

When: Various dates beginning February 21
Where: Sydney, London, Chicago

LessConf
“LessConf is not like other events you’ve heard about. Sure there’s speakers, after parties, people with laptops, but LessConf has been called ‘Summer camp for startups’, ‘the best time of my life,’ and even ‘the world’s worst conference’.”

When: February 23-24, 2012
Where: Atlanta, GA, USA

No Fluff Just Stuff Software Symposiums
“This conference will focus on the latest technologies and best practices emerging in the enterprise software development space. Our speakers are authors, consultants, open source developers, and recognized industry experts. NFJS brings a high quality conference to your city, making the event accessible not only to senior engineers, but to the whole team. ”

When: Various dates beginning February 24, 2012
Where: Various cities in the USA

SuperConf
“SuperConf 2012 is where web development & entrepreneurship converge. We will have 9 startups & 8 speakers over 2 days in perfect weather during February.”

When: February 24-25, 2012
Where: Miami, FL, USA at the Miami Beach Convention Center

PHP UK Conference
“PHP UK Conference 2012 is PHP London’s seventh annual conference, powered by PHP London, a community-run, limited company of the UK. For the first time, it is a two day event. The conference planning committee is made of up of the five members of the PHP London executive committee and five additional volunteers.”

When: February 24-25, 2012
Where: London, UK at the Business Design Centre

OpenCF Summit
“OpenCF Summit is a community gathering focused exclusively on advancing free and open source software in the CFML community. If you’re interested in diving into the free software CFML engines, learning more about the free software movement, and interacting with the most progressive thinkers in the CFML community, OpenCF Summit is for you! 72 hours of CFFreedom for the low, low price of only $72. Sleep optional.”

When: February 24-26, 2012
Where: Dallas, TX, USA at the Hyatt Place Dallas/Garland

Usability Week Conference 2012
“Many conferences offer cavernous exhibit halls, brief seminars on second-hand discoveries, and a sense of anonymity that can be truly alienating. Usability Week takes a different approach. In place of scattered, shallow talks, Usability Week offers up to 6 days of deep learning as international experts lead full-day tutorials”

When: Various dates between February 26 and May 18, 2012
Where: New York, Las Vegas, Edinburgh, San Francisco, Amsterdam, Washington

FITC Amsterdam
“FITC Amsterdam features renowned speakers from around the world, all of whom have signed up to share their knowledge and expertise; attendees will leave inspired, educated and challenged to set the bar even higher.”

When: February 27-28, 2012
Where: Amsterdam, The Netherlands, at the European Centre for Arts and Sciences

Confoo
“PHP, Python, Ruby, Java and .NET Conference.”

When: February 29 – March 2, 2012
Where: Montreal, Canada

Design Indaba Conference and Expo
“With a focus on international thought leadership, the Design Indaba Conference has become one of the world’s leading design events and hosts more than 40 speakers and 2 500 delegates. The Design Indaba Expo was inaugurated in 2004 and provides a commercial platform for the finest South African designers to leverage goods and services to the local and global markets.”

When: February 29 – March 4, 2012
Where: Cape Town, South Africa

March 2012 Events

QCon
“QCon London is the sixth annual London enterprise software development conference designed for developers, team leads, architects and project management is back! There is no other event in the UK with similar opportunities for learning, networking, and tracking innovation occurring in the Java, .NET, Html5, Mobile , Agile, and Architecture communities.”

When: March 7-9, 2012
Where: London, UK in The Queen Elizabeth II Conference Centre

SXSW Interactive
“The 19th annual SXSW Interactive festival will take place March 9-13, 2012 in Austin, Texas. An incubator of cutting-edge technologies, the event features five days of compelling presentations from the brightest minds in emerging technology, scores of exciting networking events hosted by industry leaders and an unbeatable line up of special programs showcasing the best new websites, video games and startup ideas the community has to offer. From hands-on training to big-picture analysis of the future, SXSW Interactive has become the place to experience a preview of what is unfolding in the world of technology.”

When: March 9-13, 2012
Where: Austin, TX, USA

Greenville Grok
“A small thing, in a great place, with wonderful people, asking a ton of questions and making headway on some decent answers.”

When: March 15-17, 2012
Where: Greenville, SC, USA

Webcoast
“We offer a weekend where you expand your knowledge and your network of contacts, a weekend you will remember and enjoy for a long time.”

When: March 16-18, 2012
Where: Gothenburg, Sweden

London Web Summit
“The two largest web & start up conferences in the UK & Ireland, GeeknRolla and the Dublin Web Summit, are merging to create the London Web Summit. LWS will take place on March 19th in the Brewery.”

When: March 19, 2012
Where: London, UK in the Brewery

DrupalCon Denver
“DrupalCon Denver is the official conference of the Drupal community. DrupalCon is a biannual event presented to an ever-expanding international audience since Drupal became an open-source project in 2001. It’s put on by the Drupal Association, as well as a fabulous group of volunteers and organizers from across the globe.”

When: March 19-23, 2012
Where: Colorado, USA, at the Colorado Convention Center

IA Summit
“The IA Summit is the primary event for those redefining strategy and structure in support of cross-channel systems and user experiences.”

When: March 21-25, 2012
Where: New Orleans, LA, USA at the downtown Hyatt Regency Hotel

FITC Spotlight: JavaScript
“Nearly everyone with a personal computer has some sort of JavaScript interpreter on it, making this language essential to the developer’s toolkit. JavaScript has become even more important with the increasing popularity of HTML5, as it is one of the language’s building blocks. By the end of event day, attendees will have enough information to get started with JavaScript development.”

When: March 24, 2012
Where: Toronto, Canada, at the University of Toronto Campus

Made by Few Web Conference
“Made by Few is a 1-day conference featuring talks from entrepreneurs, designers, developers, and creatives. It’s part showcase, part education, and part inspiration.”

When: March 24, 2012
Where: Little Rock, AR, USA at Little Rock River Market

Photoshop World Conference & Expo
“Designed to help you boost your skills, Photoshop World offers three days of pulse-pounding training with classes from renowned experts in the fields of Photoshop, photography and lighting and a once-in-a-lifetime experience guaranteed to enhance your skill set and help your work soar to new heights!”

When: March 24-26, 2012
Where: Washington, DC, USA at the Walter E. Washington Convention Center

DevConnections
“Join us and explore the latest trends and get the most up to date information and training available. All while networking with your colleagues and building a valuable network of peers in one of the most entertaining cities in the world.”

When: March 26-29, 2012
Where: Las Vegas, NV, USA at the MGM Grand

ArabNet Digital Summit
“The region’s largest digital event just got bigger! This year’s summit will go on for 5 action-packed days featuring cutting-edge panel discussions, specialized workshops, exciting competitions, focused networking sessions, social activities and more.”

When: March 27-31, 2012
Where: Beirut, Lebanon

April 2012 Events

JSConf
“We have been doing JSConf for 4 years and every single one has been better than the last, it is something we take a great deal of pride in. We make events that aren’t from the standard conference playbook because we believe you deserve more than that. We focus on two things, presenting mind-altering JavaScript technology and uses during the daytime and providing exceptional ‘networking events’ AKA killer parties during the evenings.”

When: April 2-3, 2012
Where: Scottsdale, AZ, USA at the Firesky resort

TYPO San Francisco
“San Francisco is renowned as a creative hub. The unique blend of innovative thinking, design, software and technological development in the Bay Area has changed the way the world works. Well designed connections have improved and made our lives more fulfilling. Greater connections mean life can be more challenging, and that requires innovative design solutions. TYPO San Francisco brings together incredible speakers from American and European design communities to share and discuss what it means to connect.”

When: April 5-6, 2012
Where: San Francisco, CA, USA at the Yerba Buena Center for the Arts

TYPO3 Developer Days
“So, here is the deal. You have a project related to TYPO3 / FLOW3 / Phoenix or the TYPO3 project in general? You need some manpower to get it done? You want to share your idea and probably find someone who joins your team? You just want to implement the coolest feature mankind has ever seen? Well, then the TYPO3 Developer Days 2012 is the event to go!”

When: April 12-15, 2012
Where: Munich, Germany at MACE

MADinSpain
“Breathe creativity. MADinSpain is an international design event and venue for the most remarkable creative minds of our time.”

When: April 13-14, 2012
Where: Madrid, Spain

360|Flex
“360|Flex has quickly become THE conference for Flex/AIR/ActionScript developers to attend to connect with the community, learn from the Adobe Engineers, as well as community experts, and get the deepest, most technical understanding of Flex and what’s coming for Flex, anywhere.”

When: April 15-18, 2012
Where: Denver, CO, USA

DIBI Web Conference
“Design it. Build it. The two-track web conference.”

When: April 16-17, 2012
Where: Newcastle upon Tyne, UK

Breaking Development
“Breaking Development focuses on new, emerging techniques for web development and design for mobile devices. Our speakers are hand-picked to make sure you get challenging, well-delivered talks from a variety of different perspectives.”

When: April 16-18, 2012
Where: Orlando, FL, USA at the Gaylord Palms

140 Character Conference
“The take aways from this event will provide the attending delegates knowledge, perspectives and insights to the next wave of effects twitter and the real-time internet will have on business.”

When: Multiple dates beginning April 17, 2012
Where: New York, USA

Great Indian Developer Summit
“With over 14000 attendees benefiting over four game changing editions, GIDS is the gold standard for India’s software developer ecosystem for gaining exposure to and evaluating new projects, tools, services, platforms, languages, software and standards.”

When: April 17-20, 2012
Where: Bangalore, India

UX London
“Presented by Clearleft, UX London is 3 days of inspiration, education and skills development for User Experience Designers.”

When: April 18-20, 2012
Where: London, UK, at the Cumberland Hotel

BACON
“BACON is a two-day, two-track technology conference on things developers love. Thirty-two tasty sessions on topics including web development, machine learning, astronomy, and electronic music.”

When: April 20-21, 2012
Where: London, UK

FITC Design & Technology Festival
“The game has changed and FITC is on it! Featuring over 70 renowned digital creators from around the globe, FITC Toronto 2012 attendees will be privy to the knowledge of the best and brightest in the digital space. Covering everything from HTML5 to making digital art, this three day festival will leave attendees inspired to create in new and innovative ways.”

When: April 23-25, 2012
Where: Toronto, Canada at the Hilton

beyond tellerrand – play!
“This a 4 day event with affordable ticket pricing. 2 workshop days feature full-day workshops and the conference covers 2 tracks with over 20 presentations about technology, design and inspiration on 2 days. Who ever wants to hear the latest buzz and exchange with other creative minds has reached the exact right event. And ticket prices start from just €99,00 including German VAT (19%) and booking fees.”

When: April 24-27, 2012
Where: Cologne, Germany

TNW Conference
“The 7th edition of The Next Web Conference will be packed with high quality content, networking events, parties and dealmaking opportunities. It’s the place to be for all web and mobile professionals.”

When: April 25-27
Where: Amsterdam, The Netherlands

Front-Trends
“This is a gathering for front-end lovers to discover the current trends to build a professional career out of innovative front-end development.”

When: April 26-27, 2012
Where: Warsaw, Poland at the Soho factory

ConvergeSE
“Peel back the layers and examine the intersection between design, development and marketing over two days of workshops and lectures.”

When: April 27-28, 2012
Where: Columbia, SC, USA at IT-ology

Future Insights Live
“Future of Web Apps, Future of Web Design, Future of Mobile, and Future of Web in the Enterprise have joined forces to bring you our most comprehensive event EVER!”

When: April 30 – May 4, 2012
Where: Las Vegas, NV, USA at the MGM Grand Conference Center

May 2012 Events

GRAVITY FREE
“If you aren’t finding the inspiration you need to think big ideas, to boldly imagine, to create surprise, to do things a little differently, consider the place you aren’t looking — GRAVITY FREE: Design That Opens Minds.”

When: May 1-2, 2012
Where: Chicago, IL, USA at The Spertus Institute

webDU
“The conference offers the opportunity to get hands-on technical training, gain new skills, hear breaking news from the Web Industry, network with peers and industry leaders, and ultimately become more successful developing and delivering web applications. Nowhere else in ANZ can this audience find the volume and quality of information available under one roof at webDU.”

When: May 3-4, 2012
Where: Sydney, Australia at the Four Points by Sheraton Sydney, Darling Harbour

Next Berlin
“The leading European conference for the digital industry. ”

When: May 8-9, 2012
Where: Berlin, Germany

CMS Expo
“2012 CMS Expo showcases the world’s leading Content Management Systems and the incredible people who power them. Come discover the most innovative CMSs on the planet. Connect to the growing CMS Community. Learn the best ways to deploy your content and tune your CMS to perfectly match the demands of an ever-changing mobile, social, interconnected marketplace.”

When: May 8-10, 2012
Where: Chicago, IL, USA

J. Boye Web and Intranet Conference
“J. Boye’s conferences grew out of our international groups for online professionals. We are in regular contact with our 400+ members from large and complex organisations and we know their agendas and projects. This puts us in a unique position to assess and determine what is happening in every corner of the field at any given time and enables us to put together a relevant program that really reflects the current challenges of our delegates.”

When: May 8-10, 2012
Where: Philadelphia, PA, USA at The Hub CityView

Mobilism
“Mobilism is one of the best-respected web conferences in the world, concentrating exclusively on mobile web design and development.”

When: May 10-11, 2012
Where: Amsterdam, The Netherlands

Semi-Permanent Creative Conferences
“Semi-Permanent is a world leading design conference that to date has hosted 29 events in 9 cities, covering 5 countries, with over 200 speakers and 50,000 attendees. In 2012, Semi-Permanent celebrates ten years of events- that’s a decade full of stories and wisdom from industry idols. ”

When: Various dates beginning May 11, 2012
Where: Sydney, Auckland, Brisbane, Melbourne (Australia)

Future Of Web Design London
“The Future of Web Design proudly presents three days of cutting edge learning and inspiration. Join us for a day of in-depth workshops, followed by two action-packed conference days in the heart of London!”

When: May 14-16, 2012
Where: London, UK at The Brewery

PEPCON
“Join the world’s top InDesign experts and the Adobe InDesign team, May 14-16 in San Francisco for the InDesign event of the year! Find answers and valuable insight on the topics publishing for eBooks, print, interactive documents, and more! Be inspired by fresh ideas and new products. Includes a 2-day multi-track conference followed by three full-day post-conference tutorials.”

When: May 14-16, 2012
Where: San Francisco, CA, USA

Confab
“As the leading conference of its kind, Confab plays a major role in driving the content strategy conversation forward.”

When: May 14-16, 2012
Where: Minneapolis, MN, USA at the Hyatt Regency Minneapolis

Internet Week New York
“Since its debut in 2008, Internet Week New York has quickly become one of the world’s top festivals celebrating digital culture, as well as a global showcase for New York City’s thriving technology industry. Internet Week New York 2012 is expected to bring more than 30,000 people from around the world to nearly 300 events at the festival’s headquarters and at dozens of locations throughout the city. ”

When: May 14-21, 2012
Where: New York, USA

UX Lx
“3 fantastic days with User Experience Professionals from all the over the world. 16 workshops to develop your skills, 10 talks to inspire you and 16 slots open for you to share your experiences. All this coupled with lots of parties and meetups in sunny Lisbon.”

When: May 16-18, 2012
Where: Lisbon, Portugal at the FIL Meeting Centre

WebVisions Portland
“It’s our 12th big year in Portland, and we’re celebrating with a fabulous lineup of experts in web and mobile design, technology, user experience, DIY, strategy and more!”

When: May 16-18, 2012
Where: Portland, OR, USA at the Oregon Convention Center

D2W Conference
“Workflow is what we do. Day in and day out, although you may not think about it like that. Do you work with multiple applications during the day? Do you work with a developer or designer (depending on which you are)? Then that is what the D2W is all about.”

When: May 16-18, 2012
Where: Kansas City, MO, USA at the Plaza Marriott

TYPO Berlin
“For decades, design has been looking for something new, for something different – often at the expense of resources and global justice. Many companies have already had to learn things the hard way, because they ignored contemporary social values. Others have learned from the crisis and take social and ecological matters into consideration in their business strategies. Discover at TYPO Berlin 2012 sustain the long-living and the constant in design!”

When: May 17-19, 2012
Where: Berlin, Germany at Haus der Kulturen der Welt

J and Beyond
“J and Beyond, an International Joomla! Conference, is back for the third year. For 3 days in May Joomla! developers and site builders from over 30 countries will gather in Bad Nauheim, near Frankfurt, right in the heart of Europe.”

When: May 18-20, 2012
Where: Bad Nauheim, Germany

phpDay
“We’ll show new development traits, best-practices and success cases related to quality, revision control, test-driven development, continuous integration and so on. There are also talks about design, project management, agile and various php-related technologies like Zend Framework2, Symfony2, Codeigniter, Drupal, WordPress.”

When: May 18-19, 2012
Where: Verona, Italy at San Marco Hotel

A Web Afternoon
“A Web Afternoon is a mini event intended to inspire and educate people who love the web. Think TED, but for the web. Both speakers and attendees will be people from a variety of disciplines, but who all share a common passion for making the web a better place.”

When: May 19, 2012
Where: Atlanta, GA, USA at the GTRI Conference Center

AgIdeas International Design Week
“agIdeas International Design Week is the largest and most prestigious design festival in the world. Established in 1991 by Ken Cato, developed and presented by the Design Foundation. agIdeas offers an extraordinary program of events that celebrate design excellence and promotes the value of design driven innovation. ”

When: May 21-23, 2012
Where: Melbourne, Australia

UXcamp Europe
“The main rule of the conference is: No spectators, just participants! This BarCamp-rule does not mean everybody has to do a Session, but everybody should come prepared to participate in an active manner.”

When: May 26-27, 2012
Where: Berlin, Germany at Erwin-Schrödinger-Zentrum of the Humboldt University

O’Reilly Fluent Conference
“The O’Reilly Fluent Conference is about everything JavaScript. If you’re developing for the Web, desktop, or mobile, knowing the ins and outs of JavaScript and related technologies is critical. Come to Fluent to learn from expert developers who are using JavaScript in all kinds of contexts, to do things that no one ever expected JavaScript could do, and do so well.”

When: May 29-31, 2012
Where: San Francisco, CA, USA

Big Design Conference
“Experts from across the country will gather to present theories, research, experiences, and best practices to students, professionals, and executives looking to stay on the bleeding edge.”

When: May 31–June 2, 2012
Where: Addison, TX, USA at the Addison Crowne Plaza Hotel

June 2012 Events

webinale
“The conference is to grow revenues, which shines through the web holistically, focusing not only on individual fragments. The conference is, thus bridging the gap between designers, web developers, managers and entrepreneurs, providing an incredibly lively forum for inspiration, networking and practical know-how.”

When: June 4-6, 2012
Where: Berlin, Germany

International PHP Conference
“The International PHP Conference is the global recognized event for PHP developers, webworkers, IT managers and everyone interested in web-technology.”

When: June 5-6, 2012
Where: Berlin, Germany at The Maritim proArte Hotel

Eyeo Festival
“In 2011, eyeo brought together an incredible group of creative coders, data viz pros, designers and artists. For 2012 we’ll raise the bar. Expect lectures, conversations and workshops with some of the most fascinating minds and makers today.”

When: June 5-8, 2012
Where: Minneapolis, MN, USA at the Walker Art Center

Interlink Web Design Conference
“Interlink Conference is a small hand-crafted event created for web professionals of all types. Explore the intersection of web design, code, and content during 2 empowering days of curated talks and workshops in Vancouver. (Plus, there’s dodgeball.)”

When: June 6-7, 2012
Where: Vancouver, Canada at Robson Square

Valio Con
“Conference at the beach where it’s all about actual fun and not sitting in a hotel lobby the entire time.”

When: June 7-10, 2012
Where: San Diego, CA, USA at the Hyatt Mission Bay

Front-End Design Conference
“The Front-End Design Conference is an annual event dedicated to content, presentation and behavior. The speakers and attendees are made up of awesome people from the web design and development community.”

When: June 8, 2012
Where: St. Petersburg, FL, USA at the Palladium Theater

NXNE Interactive
“With over 80 presentations, NXNEi bridges the gap between creators of all kinds and interactivity. Whether you’re a musician, film producer, marketer, public relations pro or community manager, NXNE Interactive programming has you covered. Join us for three days of tech and social media exploration to learn how to boost ingenuity while enhancing your marketing and business efforts.”

When: June 11-17, 2012
Where: Toronto, Canada

Ampersand 2012
“Combining the worlds of web & type design.”

When: June 15, 2012
Where: Brighton, UK

Nordic Ruby Conference
“Learn stuff. Meet people. Have fun. Nordic Ruby is a two-day, single-track Ruby conference. At a Japanese spa in the beautiful Stockholm archipelago. All-inclusive.”

When: June 15-16, 2012
Where: Stockholm, Sweden at Yasuragi Hasseludden

An Event Apart Boston
“An Event Apart is an intensely educational two-day conference for passionate practitioners of standards-based web design. If you care about code as well as content, usability as well as design, An Event Apart is the conference you’ve been waiting for.”

When: June 18-20, 2012
Where: Boston, MA, USA at the Marriot Copley Place

HOW Design Live
“In 2012, Boston is the meeting point for the biggest gathering of designers, freelancers, creative team managers, and other creative professionals in the country. That much creative energy under one roof? It’s a recipe for revolutionary ideas and life-changing inspiration. You’ll rethink your approach to work and life, connect with like-minded allies, hear from creative visionaries, and discover new tools to make your job more satisfying and productive than ever before.”

When: June 21-25, 2012
Where: Boston, MA, USA at the Hynes Convention Center

O’Reilly Velocity Conference
“Most companies with outward-facing dynamic websites face the same challenges: pages must load quickly, infrastructure must scale efficiently, and sites and services must be reliable, without burning out the team or breaking the budget. Velocity is the best place on the planet for web ops and performance professionals like you to learn from your peers, exchange ideas with experts, and share best practices and lessons learned.”

When: June 25-27, 2012
Where: Santa Clara, CA, USA

Google I/O
“After Google I/O 2011, you consistently told us you wanted more time to attend sessions, visit our partners in the Developer Sandbox, and meet 1:1 with the engineers behind Google’s developer platforms and APIs. We recently received an unexpected opportunity to extend Google I/O to three days, so as we announced on our +Google Developers page, we are moving the conference to June 27-29, 2012.”

When: June 27-29, 2012
Where: San Francisco, CA, USA at Moscone Center West

Lone Star PHP Conference
No description available.

When: June 29-30, 2012
Where: Dallas, TX, USA

Scottish Ruby Conference
“The Scottish Ruby Conference started life as Scotland on Rails in 2008 and has grown to become Europe’s premier multi-track Ruby conference. And by premier, we mean the one with the most whisky consumed.”

When: June 29-30, 2012
Where: Edinburgh, Scotland at the Royal College of Physicians

July 2012 Events

WebVisions Barcelona
“WebVisions heads to Europe for three days of workshops, sessions and keynotes by leading web, mobile, UX, DIY and strategy experts.”

When: July 5-7, 2012
Where: Barcelona, Spain at Pompeu Fabra University

An Event Apart Austin
“An Event Apart is an intensely educational two-day conference for passionate practitioners of standards-based web design. If you care about code as well as content, usability as well as design, An Event Apart is the conference you’ve been waiting for.”

When: July 9-11, 2012
Where: Austin, TX, USA at the Hilton

WDCNZ
“Tech talks for web devs. JavaScript, HTML5, CSS3. Mobile, Security, Scale. Web dev conversations.”

When: July 14, 2012
Where: Wellington, New Zealand

O’Reilly OSCON
“OSCON is where all of the pieces come together: developers, innovators, businesspeople, and investors. In the early days, this trailblazing O’Reilly event was focused on changing mainstream business thinking and practices; today OSCON is about how the close partnership between business and the open source community is building the future. That future is everywhere you look.”

When: July 16-20, 2012
Where: Portland, OR, USA

CSS Summit
“The online conference for CSS. Speakers include Chris Coyier, Lea Verou, Estelle Weyl, Jonathan Snook, and more.”

When: July 31 – August 2, 2012
Where: Online Conference

August/September 2012 Events

An Event Apart DC
“An Event Apart is an intensely educational two-day conference for passionate practitioners of standards-based web design. If you care about code as well as content, usability as well as design, An Event Apart is the conference you’ve been waiting for.”

When: August 6-8, 2012
Where: Washington, DC, USA at the Westin Alexandria

UX Week
“UX Week is the premier user experience design conference. Design professionals from all over the world gather for four days of community, inspiration and skills building.”

When: August 21-24, 2012
Where: San Francisco, CA, USA

An Event Apart Chicago
“An Event Apart is an intensely educational two-day conference for passionate practitioners of standards-based web design. If you care about code as well as content, usability as well as design, An Event Apart is the conference you’ve been waiting for.”

When: August 27-29, 2012
Where: Chicago, IL, USA at the Westin Chicago River North

UX Australia
“UX Australia 2012 is a 4-day user experience design conference, with two days of workshops and two days of presentations about designing great experiences for people.”

When: August 28-31, 2012
Where: Brisbane, Austalia at Sofitel Brisbane Central

UX Australia also presents Agile UX and Service Design 2012.

dConstruct
“”Our 8th year!””

When: September 7, 2012
Where: Brighton, UK at the Brighton Dome

A Beginner’s Guide To jQuery-Based JSON API Clients

2012-02-10T22:56:05Z

Are you fascinated by dynamic data? Do you go green with envy when you see tweets pulled magically into websites? Trust me, I’ve been there.

The goal of today’s tutorial is to create a simple Web app for grabbing movie posters from TMDb. We’ll use jQuery and the user’s input to query a JSON-based API and deal with the returned data appropriately.

I hope to convince you that APIs aren’t scary and that most of the time they can be a developer’s best friend.

APIs Are The Future But, More Importantly, The Present

JSON-based APIs are a hot property on the Web right now. I cannot remember the last time I went onto a blog or portfolio without seeing the owner’s tweets or Facebook friends staring back at me. This interactivity makes the Web an exciting place. The only limit seems to be people’s imagination. As demonstrated by everything from pulled tweets to a self-aware exchange-rates API, data is currently king, and websites are swapping it freely.

Developers are allowing us to get at their data much more openly now; no longer is everything under lock and key. Websites are proud to have you access their data and, in fact, encourage it. Websites such as TMDb and LastFM allow you to build entirely separate applications based on the data they’ve spent years accumulating. This openness and receptiveness are fostering an intertwined network of users and their corresponding actions.

This article is aimed at people who are competent in HTML and CSS and have basic knowledge of jQuery techniques. We won’t delve deep into advanced JavaScript techniques, but will rather help the beginner who wants to create more complex Web tools.

APIs in a Nutshell

In basic terms, an API enables you to access a website’s data without going near its databases. It gives us a user-friendly way to read and write data to and from a website’s databases.

Sure, Great, But What Code Do I Need?

Like many developers, I bounce merrily between back-end and front-end development, and I am as happy working in PHP as in jQuery. It just depends on which hat I’m wearing that day.

Because this article is mainly about jQuery-based JSON API clients, we’ll focus on client-side code (i.e. jQuery).

When dealing with APIs, and armed with jQuery, one is more likely to encounter JSON.

Player 1: JSON

JSON (or JavaScript Object Notation) is a lightweight, easy and popular way to exchange data. jQuery is not the only tool for manipulating and interfacing with JSON; it’s just my and many others’ preferred method.

A lot of the services we use everyday have JSON-based APIs: Twitter, Facebook and Flickr all send back data in JSON format.

A JSON response from an API looks like this:

([{"score":
null,"popularity":
3,"translated":true,"adult":
false,"language":"en","original_name":"The Goonies","name":"The Goonies","alternative_name":"I Goonies",
"movie_type":"movie","id":9340,"imdb_id":"tt0089218",
"url":"http://www.themoviedb.org/movie/9340",
"votes":16,"rating":9.2,"certification":"PG","overview":"A young teenager named Mikey Walsh finds an old treasure map in his father's attic.
Hoping to save their homes from demolition, Mikey and his friends Data Wang, Chunk Cohen, and Mouth Devereaux runs off on a big quest
to find the secret stash of the pirate One-Eyed Willie.","released":"1985-06-07",
"posters":[{"image":{"type":"poster","size":"original","height":1500,"width":1000,
"url":"http://cf1.imgobject.com/posters/76b/4d406d767b9aa15bb500276b/the-goonies-original.jpg",
"id":"4d406d767b9aa15bb500276b"}}],"backdrops":[{"image":{"type":"backdrop","size":"original","height":1080,"width":1920,
"url":"http://cf1.imgobject.com/backdrops/242/4d690e167b9aa13631001242/the-goonies-original.jpg",
"id":"4d690e167b9aa13631001242"}}],"version":3174,"last_modified_at":"2011-09-12 13:19:05"}])

A bit of a mess, right? Compare this to the same JSON viewed in Google Chrome’s developer console:

The JSON response is accessible via a jQuery function, allowing us to manipulate, display and, more importantly, style it however we want.

Player 2: jQuery

Personally, I’d pick jQuery over JavaScript any day of the week. jQuery makes things a lot easier for the beginner Web developer who just wants stuff to work right off the bat. I use it every day. If I had to complete the same tasks using native Javascript, my productivity would grind right down. In my opinion, JavaScript is for people who want a deeper understanding of the scripting language and the DOM itself. But for simplicity and ease of use, jQuery is where it’s at.

In essence, jQuery is a JavaScript library, with handy functions like getJSON. This particular function will be the glue that holds our API client together.

The Goal: A jQuery-Based JSON API Client

I recently submitted to An Event Apart the Web app that we’re about to go through now. It’s called Front Row.

The idea of the Web app is to take a movie title inputted by the user, run it through TMDb’s API, and return the relevant poster. The user could then share it or save it to their computer.

The Web app is split into HTML, CSS and jQuery. We’ll focus on the jQuery, because that’s where the magic happens.

The HTML

Below is the basic structure of the Web app. Nothing special here.

<!DOCTYPE html>
<html>
<head>
   <meta name="author" content="Ben Howdle and Dan Matthew">
   <meta name="description" content="A responsive movie poster grabber">
   <title>Front Row by Ben Howdle</title>
   <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0">
   <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.2.min.js"></script>
        <!--jQuery, linked from a CDN-->
   <script src="scripts.js"></script>
   <script type="text/javascript" src="http://use.typekit.com/oya4cmx.js"></script>
   <script type="text/javascript">try{Typekit.load();}catch(e){}</script>
   <link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
   <header>
      <h1>Front Row</h1>
   </header>
   <section id="fetch">
      <input type="text" placeholder="Enter a movie title" id="term" />
      <button id="search">Find me a poster</button>
   </section>
   <section id="poster">
   </section>
   <footer>
      <p>Created by <a href="http://twostepmedia.co.uk">Ben Howdle</a></p>
   </footer>
</div>
</body>
</html>

All we’ve got is a bit of Twitter self-indulgence, an input field and a submission button. Done!

The CSS is a bit off topic for this article, so I’ll leave it to you to inspect the elements of interest on the live website.

The jQuery

$(document).ready(function(){

   //This is to remove the validation message if no poster image is present

   $('#term').focus(function(){
      var full = $("#poster").has("img").length ? true : false;
      if(full == false){
         $('#poster').empty();
      }
   });

I like validation messages to disappear when the user starts retyping in an input field. The script below checks whether an image is present (i.e. a movie poster), and if not, empties the container of the validation message once the input field gains focus.

//function definition

   var getPoster = function(){

        //Grab the movie title and store it in a variable

        var film = $('#term').val();

         //Check if the user has entered anything

         if(film == ''){

            //If the input field was empty, display a message

            $('#poster').html("<h2 class='loading'>Ha! We haven't forgotten to validate the form! Please enter something.</h2>");

The reason why we store the main code that retrieves the data in a function will become clear later on (mainly, it’s for DRY programming).

We then store the value of the input in a variable, so that when we use it again in the code, the jQuery doesn’t have to rescan the DOM.

Basic validation is performed on the input, checking that something has actually been entered in the field.

In an attempt at humor on my part, I display a message warning the user that they haven’t entered anything and asking them to please do so.

} else {

            //They must have entered a value, carry on with API call, first display a loading message to notify the user of activity

            $('#poster').html("<h2 class='loading'>Your poster is on its way!</h2>");

If the input contains a value, we then process the user’s request. Another message is displayed, letting the user know that something is happening.

$.getJSON("http://api.themoviedb.org/2.1/Movie.search/en/json/23afca60ebf72f8d88cdcae2c4f31866/" + film + "?callback=?", function(json) {

               //TMDb is nice enough to return a message if nothing was found, so we can base our if statement on this information

               if (json != "Nothing found."){

                  //Display the poster and a message announcing the result

                     $('#poster').html('<h2 class="loading">Well, gee whiz! We found you a poster, skip!</h2><img id="thePoster" src=' + json[0].posters[0].image.url + ' />');

Here we get to the meat of our API client. We use jQuery’s getJSON function, which, by definition, loads “JSON-encoded data from the server using a GET HTTP request.”

We then use the API’s URL, suppled in this case by TMDb. As with many other APIs, you have to register your application in order to receive a key (a 30-second process). We insert the API key (23afca60ebf72f8d88cdcae2c4f31866) into the URL and pass the user’s movie title into the URL as a search parameter.

One thing to mention is that appending callback=? to the end of the URL enables us to make cross-domain JSON and AJAX calls. Don’t forget this, otherwise the data will be limited to your own domain! This method uses what’s called JSONP (or JSON with padding), which basically allows a script to fetch data from another server on a different domain. To do this, we must specify the callback above when jQuery loads the data. It replaces the ? with our custom function’s name, thereby allowing us to make cross-domain calls with ease.

In the function’s callback, we have put the word json (which holds our retrieved data), but we could have put data or message.

The next check is to see whether any data was returned. TMDb is kind enough to supply us with a message of “Nothing found” when it can’t find anything. So, we’ve based our if statement on this string’s value.

This check is API-specific. Usually if no results are found, we would expand the object to find a property named length, which would tell us how many results were returned. If this happens, the code might look something like this:

   if (json.length != 0){

As a side note, before writing even a line of code in the callback function of the JSON call, we should become familiar with the results returned in Chrome’s console or in Firebug. This would tell us exactly what to check for in if statements and, more importantly, what path to take to grab the data we want.

Let’s add console.log(json);, like so:

$.getJSON("http://api.themoviedb.org/2.1/Movie.search/en/json/23afca60ebf72f8d88cdcae2c4f31866/" + film + "?callback=?", function(json) {
         console.log(json);

This will output something like the following in the console of your favorite browser (click the image to see the full size):

The last line of this code outputs our poster. We display another message to the user saying that we’ve found a result, and then proceed to show the image.

Let’s spend a moment figuring out how we got to the poster images using the line json[0].posters[0].image.url.

The reason we use json[0] is that — since we want to display only one poster, and knowing how relevant TMDb’s results are — we can gamble on the first result. We then access the posters array like so: json[0].posters[0]. Chrome even tells us that posters is an array, so we know what we’re dealing with. Again, we access the first value of the array, having faith that it will be most relevant. It then tells us that image is an object, so we can access it like so: json[0].posters[0].image. By expanding our object further, we see that image contains a property named url. Jackpot! This contains a direct image link, which we can use in the src attribute of our image element.

} else {

   //If nothing is found, I attempt humor by displaying a Goonies poster and confirming that their search returned no results.

   $.getJSON("http://api.themoviedb.org/2.1/Movie.search/en/json/
23afca60ebf72f8d88cdcae2c4f31866/goonies?callback=?", function(json) {

      $('#poster').html('<h2 class="loading">We're afraid nothing was found for that search. Perhaps you were looking for The Goonies?</h2><img id="thePoster" src=' + json[0].posters[0].image.url + ' />');

   });
}

Having determined that the API has no results for the user, we could display an error message. But this being a movie-related Web app, let’s give the user a preset poster of The Goonies and let them know we couldn’t find anything. We’ll use the exact same src attribute for the image that we used before, this time with goonies hardcoded into the API call’s URL.

});

          }

        return false;
   }

   //Because we've wrapped the JSON code in a function, we can call it on mouse click or on a hit of the Return button while in the input field

   $('#search').click(getPoster);

   $('#term').keyup(function(event){

       if(event.keyCode == 13){

           getPoster();

       }

   });

});

It is now clear why we wrapped our JSON call in a function: doing so allows us to run the function when the user hits the submission button or presses Enter while in the input field.

The Full Code

The HTML

<!DOCTYPE html>
<html>
<head>
   <meta name="author" content="Ben Howdle and Dan Matthew">
   <meta name="description" content="A responsive movie poster grabber">
   <title>Front Row by Ben Howdle</title>
   <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0">
   <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.2.min.js"></script>
        <!--jQuery, linked from a CDN-->
   <script src="scripts.js"></script>
   <script type="text/javascript" src="http://use.typekit.com/oya4cmx.js"></script>
   <script type="text/javascript">try{Typekit.load();}catch(e){}</script>
   <link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
   <header>
      <h1>Front Row</h1>
   </header>
   <section id="fetch">
      <input type="text" placeholder="Enter a movie title" id="term" />
      <button id="search">Find me a poster</button>
   </section>
   <section id="poster">
   </section>
   <footer>
      <p>Created by <a href="http://twostepmedia.co.uk">Ben Howdle</a></p>
   </footer>
</div>
</body>
</html>

The jQuery

$(document).ready(function(){

   $('#term').focus(function(){
      var full = $("#poster").has("img").length ? true : false;
      if(full == false){
         $('#poster').empty();
      }
   });

   var getPoster = function(){

        var film = $('#term').val();

         if(film == ''){

            $('#poster').html("<h2 class='loading'>Ha! We haven't forgotten to validate the form! Please enter something.</h2>");

         } else {

            $('#poster').html("<h2 class='loading'>Your poster is on its way!</h2>");

            $.getJSON("http://api.themoviedb.org/2.1/Movie.search/en/json/
23afca60ebf72f8d88cdcae2c4f31866/" + film + "?callback=?", function(json) {
               if (json != "Nothing found."){
                     $('#poster').html('<h2 class="loading">Well, gee whiz! We found you a poster, skip!</h2><img id="thePoster" src=' + json[0].posters[0].image.url + ' />');
                  } else {
                     $.getJSON("http://api.themoviedb.org/2.1/Movie.search/en/json/
23afca60ebf72f8d88cdcae2c4f31866/goonies?callback=?", function(json) {
                        console.log(json);
                        $('#poster').html('<h2 class="loading">We're afraid nothing was found for that search. Perhaps you were looking for The Goonies?</h2><img id="thePoster" src=' + json[0].posters[0].image.url + ' />');
                     });
                  }
             });

          }

        return false;
   }

   $('#search').click(getPoster);
   $('#term').keyup(function(event){
       if(event.keyCode == 13){
           getPoster();
       }
   });

});

Conclusion

That’s it: a handy method of reading data from a remote API with jQuery, and manipulating the JSON output to fit our needs.

Every API is different, and every one returns different results in a different structure — it’s all part of the fun! So, get used to using console.log(), and familiarize yourself with the results set before trying to access it with code or using it in your application.

Start with something practical and entertaining: build a check-in checker with Gowalla’s API; visualize trends with Twitter’s API; or make a face-recognition app with Face.com’s API.

APIs are fun. By definition, the data they bring to the page is dynamic, not static.

If you have any problems with the API we’ve used here or you have any success stories with other APIs, please do leave a comment.

Further Resources

“How to Use JSON APIs With jQuery,” Joel Sutherland, HiFi
“How to Use jQuery With a JSON Flickr Feed to Display Photos,” Richard Shepherd
“Bing Instant Search With jQuery and Ajax,” Srinivas Tamada, 9Lessons

(al)

Set YouTube Video as Background with Tubular jQuery Plugin

2012-02-10T07:13:20Z

Advertise here via BSA

Tubular is a jQuery plugin that lets you set a YouTube video as your page background. Usage is straightforward and requires JavaScript and the Flash player to be installed and functional on the client’s browser. tubular is dependent on jQuery and swfobject.

Just attach it to your body tag, specify a YouTube video ID and tell it the ID of your content wrapper, and you’re on your way. Please note, tubular must be deployed on a web server to function. The YouTube player will not work when loaded into your browser from your machine.

Requirements: jQuery and Flash
Demo: http://code.google.com/p/jquery-tubular/
License: MIT License

Sponsors

Professional Web Icons for Your Websites and Applications

Smashing Special: WordPress Theme Trends For 2012

2012-02-09T21:50:44Z

This special is the first in our series of Smashing Specials — extended articles and studies dedicated to a specific topic. The special features current WordPress theme trends for 2012, covering past trends, new developments in theme design and trends in the theme development.

2011 was a great year for WordPress, with some excellent new updates that saw the introduction of a drag-and-drop uploader, distraction-free writing, the HTML5 Twenty Eleven theme, and movement towards a fully responsive dashboard. As well as changes to WordPress core, theme development continued to evolve, as whispers of responsive design spread like wildfire across the WordPress community.

(image credit: Bowe Frankema)

Over the next year, some recent developments will become standards. Others, now just remote flickerings in the eyes of a few theme designers and developers, will start to take hold. Now that 2012 has properly started, let’s look at some trends that have emerged and are emerging.

Due to the length of this special, it was split into three parts:

Part 1: Past Predictions
Part 2: WordPress Design Trends for 2012
Part 3: WordPress Development Trends for 2012

Past Predictions

When thinking about future trends, it’s fun to look back and see what people predicted before to see whether any of their predictions came to fruition. Thankfully, with the power of Internet, combined with Ian Stewart’s “Future of WordPress Themes” posts (as well as WPCandy), doing this is very easy.

So, just what were people predicting when WordPress was growing up?

The Demise of the WordPress Premium Theme Market

At the start of 2008, when creating a premium WordPress theme was frowned upon, Ian Stewart wrote this in a post:

It’s prediction time: The premium WordPress theme phenomenon has approximately one year left before collapsing entirely, leaving a rather large hole between completely free WordPress themes and custom themes $1500 and up. If you’ve got a “premium” WordPress theme waiting in the wings, I advise releasing it sooner rather than later. As in, now.

We don’t really need to add a comment to that one.

“Cluttered and Pimped Out”

Here’s what Robert Ellis said about the future of WordPress themes in 2008:

The vast majority of themes will still be garish mutations of Kubrick, but more cluttered, more pimped out with widgets, scripts and effects. There will still be premium themes that push the envelope in terms of built-in options and quality, but the market will become saturated, setting off even more accusations of copying (as we’ve seen with magazine themes; though personally, I think most of them look like they were “inspired” by CNN).

This was more on the money, and we have seen amateur designers cram in a lot of different scripts and effects. This has diminished over time. Hopefully, our direction now is more Zen.

Early Niche Predictions

Justin Tadlock had this to say in 2008:

I do hear some talk of moving into designs for specific niches, so theme developers could cater to particular users. I think this is a great idea, which could be a nice trend as we’ve seen with magazine-styled themes. Users want something that works for them before unwrapping the packaging.

Justin was definitely prescient then, as niche themes became more popular in 2011. And we’ll see much more of them in 2012.

Everyone Loved Theme Options

In 2009, themes that allowed you to customize the layout and design started to appear. Here’s what Dougal Campbell had to say:

The main change I see happening here is with themes which provide some sort of customizing feature on the back end which lets you choose options like: header graphics; one, two or three sidebars, along with their positions; color schemes; They will also be pre-bundled with several plugins which allow you to pull in your content from other sources such as Twitter, Facebook, Flickr, etc. These kinds of themes already exist, but I think we’ll see the ease of customization rise to a new level.

By 2012, this trend towards adding options and customizations reached its zenith, and it will hopefully decline over the coming year.

Want to have fun reading past WordPress theme predictions. Check them out here:

“The Future of WordPress Themes in 2008,” Theme Shaper
“The Future of WordPress Themes in 2009,” Theme Shaper
“The Future of WordPress Themes in 2011,” WPCandy

A Trip Down Memory Lane

Let’s look at how theme design has changed over the past few years.

Free Themes: The WordPress Repository

Below are the most popular themes downloaded from the WordPress theme directory since 2009 (thanks to Otto for getting this information). You can see how WordPress themes have moved away from looking like blogs to a more professional appearance.

2009

iNove was the most popular theme in 2009, followed by Atahualpa and then Pixeled.

2010

Mystique was the most popular theme in 2010, followed by Atahualpa and then TwentyTen.

2011

Delicate was the most popular theme in 2011, followed by TwentyEleven and then Platform.

The Most Popular Themes in the Forest

To see how things have fared on the commercial theme front, we scoured the archive of ThemeForest. Below are the best-selling themes from the last quarter of each year.

Here were the top themes:

2008

Sharp was the top theme for the end of 2008.

2009

Twicet topped downloads for the last quarter of 2009.

2010

Striking was the most popular theme in the last quarter of 2010.

2011

The multi-optioned uDesign was the most downloaded theme in the last quarter of 2011.

What Happened In 2011?

Before getting to our predictions for what will take hold in WordPress themes this year, let’s quickly look at what has happened over the past year:

Theme frameworks
Theme frameworks were everywhere in 2011. As someone who blogs regularly about WordPress, I found myself announcing the launch of three different frameworks in one week. WordPress staples such as Thematic, Thesis and Genesis continued to grow in popularity, but more and more frameworks appeared on the scene, including the likes of Wonderflux, Bones and Roots. Perhaps in 2011 we’ll see fewer new frameworks and more themes for existing ones.
Child themes
Child themes took off in a big way in 2011. Once people grasped the concept that creating a child theme and making edits to it was better than hacking away at the parent, they started to have fun. Will we see child themes in the WordPress repository in 2012?
The “CMS” theme
At the start of 2011, everyone seemed to be calling their theme a “CMS” theme, implying that their awesome theme gave WordPress the characteristics of a CMS, as opposed to WordPress itself being a CMS. Thankfully, that trend petered out towards the end of the year, perhaps as it became less imperative to convince people that WordPress was a CMS.
Sliders everywhere
Every theme seemed to have a slider on the home page. This might have been due to the gorgeousness of Nivo and other sliders that make it easy for anyone to include a jQuery slider in their theme. Hopefully, designers will be more inventive with their jQuery this year.
Tumblr themes
All of a sudden, creating a Tumblog became easy. Designers first achieved this with the Woo Tumblog plugin, but the introduction of WordPress post formats made it possible to create a Tumblog with WordPress core functionality.
Custom post type mania
As predicted by Brad Williams in WPCandy’s predictions for 2011, we saw loads of themes that made use of custom post types, including ones for job rollers, e-commerce websites, real estate websites, review websites and so on and so on. Not to mention a plethora of WordPress custom post type plugins.

Now we’ve got the past out of the way, let’s look at the future!

Smashing Special: A Three-Part Series

Due to the length of the series, it was split into three parts:

Part 1: Past Predictions
Part 2: WordPress Design Trends for 2012
Part 3: WordPress Development Trends for 2012

(al)

Generate Consistent Color Palette with Colllor

2012-02-09T14:06:25Z

Advertise here via BSA

With Colllor it is much easier to generate a consistent color palette with just a few clicks. You should use colors consistently, so you have a common look and feel throughout your design. All the alternative proposals produced by Colllor derive from the same color and they all have a common denominator sharing hue, lightness or saturation values.

Colllor will let you find the exact value of darker shades of any color, not just something that ‘looks darker’. That will be a huge step towards professionally looking color combinations. And also, you can use plain English or Hex color names.

Requirements: -
Demo: http://colllor.com
License: License Free

Sponsors

Professional Web Icons for Your Websites and Applications

A Craft Of Consequences: Reader, Writer And Emotional Design

2012-02-09T21:50:45Z

Before the very first page of a book has been read, you’ve already analyzed it in countless ways without even noticing. The paper stock, the thickness of the binding, the aroma, the color of the type and even the texture of the cover; the very character of the book is being dissected by the hand and eye at every moment.

In this brief second there is a dialogue between the reader and the object. This conversation is subtle and complex, but for most people it is entirely subconscious. This is because we rarely think about these things — we feel them instead.

Before this dialogue can take place however, the ideas of the author must be given shape. By examining the relationship between the form of the book and the information contained within, we can begin to understand how these visual and sensory components work, but it will also teach us how to create long-lasting emotional bonds that we’ll want to keep forever.

Lost In Translation

I recently read The Greatest Show on Earth by Richard Dawkins. His book explores the wonder of evolution and scientific discovery in fabulous detail and also goes into explicit detail as to how these ideas better our society and affect our perspective of morality and philosophy. But its uncomfortable size and shape as well as its flimsy typesetting gives the book characteristics of apathy and exhaustion.

The object reveals much about the world in which it was made: a heartless, ignorant and illiterate world, filled with people that viewed the author and the reader as a stepping stone to the top of the New York Times bestseller list.

And yet, these aesthetic and ergonomic failures are more than skin deep as they interfere with the relationship between writer and reader. Dawkins’ evidence seems less empirical, less established and somehow less wonderful, as the book miserably fails to explain the poetry of its content.

Notice how jarring and uncomfortable it is as these glossy, brightly colored pages sit next to ordinary blocks of text.

Dawkins’ argument is damaged by these cluttered, noisy and mistreated illustrative pages. Whilst he describes the wonderful and unique beauty of life, his ideas feel ordinarily ugly. The images to the left of the spread, their jarring and chaotic arrangement, the tension built by their seemingly random position, fail to reflect the ideas of wonder, beauty and order that the writer so eloquently describes.

The ideas contained within have lasted centuries, yet this book has barely lasted a single reading.

Walk into any large, commercial bookstore and you’ll see thousands of books treated in a similar way — each with layer upon layer of unnecessary information that conflicts with the intent of the author. Something crucial is destroyed in this journey as the object disrupts vital information on transit.

To understand why these books are not working, we must first examine how information passes from writer to reader.

The Journey

For centuries, the book was a tool that existed for a single purpose; to transfer information from one mind to another. Although much has changed, there will always be a problem with this form of communication, and in our reliance on systems to safely relay data.

In bookmaking these systems are traditionally enforced by a publisher, as they have complete control over the quality of the binding, the typographic details, the use of color and the overall physical identity of the idea. All of these visual and sensory elements combine to produce the system by which the idea is given form. However, as in the case of the majority of books out there, this system poisons and infects it.

These systems comprise of an immense number of components, such as the combination of typefaces, the paper density, the use of color, the printing method, the measure, the width of margins, and other typographic details. But the problem with these systems is that they are incapable of reflecting the ideas of the writer with the form of the book. They act as a barrier that the information must travel through to be able to find the reader.

Cheap paper, bad typesetting and an awkward binding cause confusion and disrespect to the author’s ideas. But if we understand how these elements work together we can make systems that provide useful signs to the reader, and also manage to safely transport the ideas of the writer at the same time.

Emotional Information

When a visual component accurately represents the ideas of the writer, it becomes a source of emotional information. This aids in the transferral of ideas, and promotes and persuades the reader that the content is worthy of their precious time.

It’s more than just a pretty cover, visual pun or marketing gimmick that creates emotional information. It’s everything from the size of the type to the texture of the page, because these components not only help to explain the content of the book but also continue to engage and stimulate the reader throughout.

The Vintage Classics edition of As I Lay Dying is almost lifeless, whereas Trevor Baum’s redesign provides the reader with an emotional experience as they must carry this dying woman in their hands, much like the characters in the novel.

A system can bind the ideas of the writer to the form of the book with these carefully chosen elements, but it’s when the form and the idea become inseparable that unique relationships begin to emerge.

Take for example Do You Know What It Means to Miss New Orleans? that was published by the Chin Music Press back in 2008. The book is focused primarily on the aftermath of Hurricane Katrina and the impact it had on the music, economy and spirit of the city.

The physical elements of the book act as a rhetorical device, directing the reader with subtlety and charm.

Nineteenth century engravings flourish beside carefully set blocks of text and each page has been lavishly printed on high quality paper. These components, amongst many others, combine to create a distinct sense of pace that sets itself apart from legions of other books. The idea of the book and the form of the book become one — they merge into an emotional cornucopia that is impossible to ignore.

The texture of the page, the subtle typographic details and the distinctive illustrations implies a specific tone and atmosphere.

This is emotional information and it coerces the reader to take notice of the subject and to read each page with as much attention and focus as those that designed and published it.

Another book that provides the reader with emotional information is the Book of war, mortification and love. The author, Ruud Linssen, investigates why people suffer voluntarily whether it be for love, war, religion or art. The blend of fiction and non-fiction, and the haunting accounts of depression and loneliness are only reinforced by the physical elements of the object.

The text also acts as a specimen for the typeface Fakir. This dark blackletter eloquently explains the subject and forewarns the reader of the book’s ghostly nature. It is even printed with the author’s own blood, the ink on the cover blends into the background as if the words are shaking with anxiety.

Texture, ink, type: three dimensions of emotional data that captures the spirit of the writer’s intent.

It’s these extra pieces of information, these tangible components of a unique sensory and visual language that must be pieced together in order to accurately reflect the author’s ideas. It is the format, the texture, and the combination of the printed word and the weight of the object that ignites this special relationship, and aids in the transfer of information between writer and reader. Ideally, these extra pieces of information provide the reader with the unspoken history, idea and argument of the book. Without them, the conversation between the book and the reader would be less interactive and engaging.

Of course, not every book can feel like Do You Know What It Means to Miss New Orleans?, or Book of war, mortification and love – but then why should they? Each book should be treated as a unique problem requiring a distinct and innovative solution.

Emotionless Systems

This is the problem with the current state of ebooks. As e-readers split content numerically or into ‘real’ turning pages they impersonate the form of the book, whilst disregarding the unique nature of the writer’s ideas. This gives us books that all feel and look the same.

The Picture of Dorian Gray by Oscar Wilde and Shit My Dad Says by Justin Halpern look and feel the same, but are different in every meaningful way.

The system disregards the writer almost entirely; all ideas have the same graphic character, tone and appearance. But just as unique and brilliant writers follow a certain pattern and rhythm within their work, so too must the visual and sensory elements of a system. This indicates to the reader that the content is one of a kind and worthy of their precious time, but these systems are also capable of creating emotional experiences that can entertain, persuade, teach and inspire.

So the problems on screen are very similar to that of the problems on paper: the system is acting as a barrier into the author’s ideas.

Why Should We Design Emotional Systems?

In a perfect world we would share ideas through a semipermeable membrane; we would absorb ideas via osmosis and send them around the world as casually as we breathe. Sadly, we cannot do this. Instead, we have systems set in place to communicate. The problem is that these systems are failing us. They are hurting us. They are making beautiful things boring and are getting in between us and the ideas that we need.

This is not about nostalgia or the glorification of a particular medium. This is about information, and how best to communicate the content as a visual and sensory device. These systems have an obligation to not only safely and quickly transfer data, but also to make us care.

Of course, this is subjective and very little of this article goes into the specifics as to how to create emotional experiences, but this is because each idea requires a different visual and sensory tone. Some books require explosive typography and thick paper to feel revolutionary, others require a softer and more delicate tone to feel calm or charming.

The form of the book is merely a tool, a sometimes wonderfully beautiful and effective tool, but a tool nonetheless. It is the ideas within that give us wonder, and these tools must be built for their purpose if they are not to be thrown away, lost or forgotten.

We can embed within these systems a lasting piece of our culture if only we are willing to change the way we think. So instead of us asking the question, “How do these things look?” perhaps we should rather be asking, “How do these things feel?”

JavaScript Templating Engine by Twitter

2012-02-08T13:14:24Z

Advertise here via BSA

Hogan.js is a 2.5k JavaScript templating engine developed at Twitter. You can use it as a part of your asset packager to compile templates ahead of time or include it in your browser to handle dynamic templates.

Hogan.js was developed against the mustache test suite. That means you get variables, sections, lambdas, partials, filters, and everything else you’ve come to expect from mustache templating but only much, much faster.

Requirements: JavaScript supported browsers
Demo: http://twitter.github.com/hogan.js/
License: Apache License

Sponsors

Professional Web Icons for Your Websites and Applications

Adding Alert Bubbles for Favicon Image with Tinycon

2012-02-07T12:33:14Z

Advertise here via BSA

Tinycon allows the addition of alert bubbles and changing the favicon image. Tinycon gracefully falls back to a number in title approach for browers that don’t support canvas or dynamic favicons.

Alerts in the favicon allow users to pin a tab and easily see if their attention is needed. You can look up and check out the favicon on the example page to see the library in action on chrome and firefox.

Requirements: Canvas Supported Browsers
Demo: http://tommoor.github.com/tinycon/
License: MIT License

Sponsors

Professional Web Icons for Your Websites and Applications

Collaging: Getting Answers To The Questions You Don’t Know To Ask

2012-02-07T20:02:48Z

When conducting user research, we all know that asking the right questions is just as important as how you ask them, but how do you know exactly what questions to ask? What if the discussion topic is very personal? How do you get a complete stranger to open up? There is a better way to conduct an in-depth interview, and it doesn’t involve a clipboard. Just imagine what you could discover if the participant’s answers weren’t limited to a predetermined set of questions. This is where collaging can help.

Collaging is a projective technique by which participants select images that represent how they feel about a particular topic. The participants then explain to the moderator the reason they chose each image. The collage becomes an instrument through which participants are able to express needs and feelings that they might not otherwise have been able to articulate. This information enables us to better understand the user’s world and how to design for it.

A Picture Is Worth A Thousand Words

So, you might be asking yourself, “Why should I have people make collages, rather than just ask them point-blank questions about their needs and feelings?” It’s a great question, and the answer is, sometimes the most valuable answer is not in response to a direct question, but one that’s elicited. An image can be a powerful stimulus that evokes a strong response, triggers a memory and draws out feelings that exist below a person’s own level of awareness.

Gerald Zaltman, author of How Customers Think, states that “95% of our thoughts and feelings are unconscious.” There is just so much that we carry around in thought but never share until something triggers it. When we ask a participant a set of pre-defined questions, we are predetermining the scope of the interview. Instead, by presenting a visual stimulus, we are letting the participant start the conversation and bring up topics that are meaningful to them.

There are also times when you don’t know the right question to ask. Sometimes you do, but you don’t know how to ask it. Depending on what you’re researching, participants might have difficulty opening up to you. The research topic might be too personal, controversial or sensitive for the participant to just open up and start discussing with a complete stranger. The collage becomes a catalyst for discussion, an ice-breaker.

What You Can Learn

Collaging is a method of building empathy with your users. You gain an emotional understanding of the user’s feelings, problems, state of mind and so on, which is imperative to know when designing for them. Collaging can also help you better understand the user’s needs, in turn helping you to address them in your product.

The wonderful thing about this method is that participants might reveal stories that prompt a line of questioning about a topic that you never expected to explore (as we’ll see in the examples below). You honestly don’t know what you will learn from each participant’s collage.

A Brief History Of Projective Techniques

Collaging is not new. The method has been well used to conduct qualitative marketing research for at least 40 years. Its use in marketing has mainly been to assess feelings towards brands and products. Other projective techniques — tests such as the Rorschach, word and sentence completion, draw-a-person, and thematic apperception — date back to the early 19th century. All of these methods are rooted in psychology, but their application has expanded to other fields such as advertising, management, sociology, anthropology and, more recently, user experience (UX), to name a few. Collaging as a user research method has yet to be widely adopted in our industry, but I’ve seen a steady increase in its use and popularity over the past few years.

Conducting A Collaging Exercise

Listed below are all the steps necessary to conduct your own collaging study. Let’s walk through them together.

1. Choose Your Topic of Interest

The collaging exercise should focus on a specific topic. You will be asking participants to choose pictures that reflect how they feel about this topic. For example, if I were redesigning a website, I might ask the participant,

“Select pictures that reflect how you would and would not want the new website to greet you.”

You could word this in a lot of different ways, such as,

“Create a story about how you would want the website to communicate with you. What qualities should it have? What qualities should it not have?”

Or, to learn more about a participant’s day-to-day struggle with a problem, you could simply say,

“Select pictures that reflect your experience with using [x].”

2. Create a Collage Board and Get Pictures

You will need a board or a large piece of paper to which the participant can tape their pictures. It doesn’t need to be fancy. In the past, I have just used 11 × 17-inch ledger paper. If I were asking the participant to create two separate collages, I would divide the paper by drawing a line down the middle. I’ve seen other people put a target on a collage board and ask participants to stick pictures on the board according to how closely they “hit home” for them. Feel free to be creative here, and find what works best for you.

Example of a completed collage.

Participants will need to be able to choose from a pool of about 150 to 200 pictures. The pool of pictures must be a mixture of random pictures. They should not have a running theme (i.e. no pictures of just animals or people or medical scenes or nature, etc). The pool should be a good mixture of all sorts of pictures. You can use stock photography or even pictures clipped from magazines. Here are some online sources of free images:

Print the pictures small enough (approximately 3 × 3 inches) for participants to have plenty of room to put as many as they want in their collage. You’ll also want multiple copies of pictures to replace the ones used by participants. In the past, I’ve printed pictures on stickers, which worked well but was a little more expensive.

3. Moderate the Study

Set up the room.
Lay out all of the pictures on a big long table. Make sure they do not overlap so that the participant can see them all. Put the collage board, some tape and a pen on another table.
Give the topic and instructions.
Instruct the participant to pick out at least four or five pictures that reflect how they feel about the given topic. Then ask them to tape those pictures to the collage board, and add a caption to each one explaining why they chose it.
Leave the room.
I prefer to leave the room for five to ten minutes to give the participant time to peruse the pictures without feeling any pressure. When I reenter the room, I tell them to take as long as they need and to let me know when they have completed the collage.
Discuss the collage.
The collage is finished. Now comes the fun part! Have the participant explain to you why they chose each picture. This is your opportunity to learn as much as you can about how the participant feels about the topic. Let the collage and the participant guide the interview. Be sure to follow up with questions and to probe deeper when needed and appropriate. Keep in mind that the experience can be very personal and revealing for some participants, depending on the sensitivity of the topic. The collage might make it easy for a participant to open a door that they don’t necessarily want to walk through. Be mindful of the participant’s comfort level when probing deeper into something personal.

4. Conduct Analysis

When conducting your analysis, keep in mind that what’s really important is not the pictures they chose, but why they chose them. The analysis and report should focus on what the collage reveals about the participant, not the collage itself. It would be interesting if multiple participants chose the same pictures, but even more interesting if they chose them for the same reasons.

When to Conduct a Collaging Exercise

Consider collaging during the early stages of product development, when user requirements are being gathered. The method is also helpful at any time in the product’s development if you feel the design team is having trouble understanding and identifying with the users. Sometimes designers need to step back and remember exactly who they are designing for.

As mentioned, this method can be most useful if the topic is sensitive, but it’s great for impassive topics, too. Collaging can be used if you just need a fun activity to put the participant at ease and break the ice before a formal interview. For example, I have conducted collaging exercises with cancer patients, with people dealing with chronic pain and even with women about their menstrual cycles and feelings about birth control. On the other hand, I’ve conducted collages to learn more about people’s daily commutes and how they feel about public transportation — much lighter topics.

Collage Examples

The examples below are from collage exercises that I’ve moderated. Each one shows how a picture can change the line of questioning in an interview. The topics, which were discussed because of these images, might never have been brought up in a traditional interview.

Picture from a collage done for research on people suffering from chronic pain.

The participant wrote the caption, “That’s my daughter consoling me when I’m in pain.” When discussing this picture, I was able to probe deeper into how the participant’s pain affects their family and how they deal with it. We were then able to discuss what role family plays in how they manage their pain.

Picture from a collage done for research on how people feel about their commute.

The participant wrote the caption, “Wish my commute was this enjoyable.” I was able to follow up with questions about what their ideal commute to work would be like and what they wished they could change about their current commute.

Picture from a collage done for research on cancer patients.

The participant wrote the caption, “Vomiting!” This led to a line of questioning about the side effects of the participant’s cancer treatments and their coping mechanisms.

Pitfalls To Avoid

Sometimes a stimulus can be too strong and can disrupt a participant’s train of thought and be a distraction. The example below resulted from two participants choosing the same image for the same study:

The participants wrote the captions “Disgusting” and “Gross.” Their captions and their reasons for choosing the image were similar, but in no way did they relate to the topic of interest, which was pain management. The participants couldn’t explain how the image related to what they felt about the topic, but they still chose it because they were drawn to it and it provoked a strong emotion. In this case, we decided to remove the image from the pool because it was obviously a distraction. When conducting a collaging exercise, remove any pictures that you find derail the participants.

Conclusion

Collaging is a great method for learning more about your end users. Depending on when the collaging study is conducted during the product’s development cycle, your findings could do any or all of the following:

Aid in persona development,
Be used in early ideation for creating new products,
Reveal how people feel about the experience of using an existing product,
Help to define new requirements or enhancements for features.

The method might not be right for every user research initiative, but try it if you feel something is lacking from your traditional interviews. You will be amazed at what you can learn when you throw away the clipboard and let participants direct the interview.

Resources

How Customers Think: Essential Insights Into the Mind of the Market, Gerald Zaltman
Customer Intimacy: Pick Your Partners, Shape Your Culture, Win Together, Fred Wiersema

(al) (il)

HTML5 Book-Flipping jQuery Plugin

2012-02-06T11:50:48Z

Advertise here via BSA

Turn.js is a plugin for jQuery that adds a beautiful transition similar to real pages in a book or magazine with HTML5. It works in all modern browsers including touch devices. And it is easy to manipulate, and lightweight with only 15k. Turn.js is released under MIT License.

Requirements: HTML5 Supported Browsers
Demo: http://www.turnjs.com/
License: MIT License

Sponsors

Professional Web Icons for Your Websites and Applications

How To Use Custom Post Types To Organize Online Marketing Campaigns

2012-02-04T04:01:55Z

Custom post types add a level of flexibility to WordPress that makes this open-source Web development platform more useful on many levels. Whenever I have been faced with a Web-based task, especially one that involves organizing information, the first thing I do is examine WordPress to determine if it can handle the job. It usually can.

Image Source

As an Internet marketer and analyst, I need to be able to organize online marketing campaigns in a way that is trackable in Google Analytics. This is the perfect task for WordPress custom post types.

In this article, we’ll explain how to create a WordPress plugin that enables you to organize Internet marketing campaigns using trackable URLs, shortened versions of those URLs, and trackable QR codes that you can also use for offline marketing activities.

We’ll show you how to create this plugin in a way that maximizes ease of use and functionality. If you have other methods that you have found useful, please share them in the comments. Also, let’s remember that we are standing on the shoulders of WordPress developers who have laid the foundation for easier coding.

Here are the criteria for our custom post type plugin:

It must provide a form in which users can specify a landing page to be tracked, the anchor text or content, the term (if this link is a PPC ad), and any additional information about this link.
It must provide three custom taxonomy types, so that users can select the URL variables for source, medium and campaign name. This is a taxonomy type because they will be reusable across campaigns and posts.
It must be organizable in the admin area and be displayed in the user interface.
The output must include a Google Analytics campaign-trackable URL, the information about the URL in human-readable format, a shortened version of the URL using a URL shortener, and a QR code of the shortened URL.

The File Structure

This plugin will use three files. To set up the structure, create a plugin folder named campaign-tracker. Inside the campaign-tracker folder, create the following three PHP files:

campaign-tracker.php
ga-functions.php
campaign-template.php

After you have created the files, we are ready to start adding the code.

The Plugin File

The main plugin file will be campaign-tracker.php. The content of this file will begin the standard way, by providing WordPress with the information that it needs to recognize it is as plugin. We then dive into setting up the CampaignTracker10 class and functions. We will set up our campaign custom post type and register the taxonomies that we will need. We will also initiate our admin interface.

   <?php
   /*
   Plugin Name: Campaign Tracking 1.0
   Plugin URI: http://www.convergeconsulting.org
   Description: Google Analytics Campaign Tracking system for WordPress 3.0 and above.
   Author: Joshua Dodson
   Version: 1.0
   Author URI: http://www.convergeconsulting.org
   */

   // Include the ga-functions.php helper functions
   include_once('ga-functions.php');

   if(!class_exists('CampaignTracker10'))
   {

      class CampaignTracker10 {

         var $meta_fields = array("gaca10-gaurl","gaca10-gaterm","gaca10-gacontent","gaca10-gadescription");

         // This function will create the custom post type. Thanks to Konstantin Kovshenin's example for additional examples of how to construct custom post types (http://kovshenin.com/2010/03/custom-post-types-in-wordpress-3-0-2089/), which inspired much of this.
         function __construct(){
            // Register custom post types
            register_post_type('campaign', array(
            'label' => _x('Campaigns','campaigns label'), // We're labeling the custom posts as Campaigns and also accounting for gettext appropriately
            'singular_label' => _x('Campaign','campaign singular label'), // Each post will be called a Campaign
            'public' => true, // These will be public
            'show_ui' => true, // Show the UI in admin panel
            '_builtin' => false, // This is a custom post type, not a built in post type
            '_edit_link' => 'post.php?post=%d',
            'capability_type' => 'post',
            'hierarchical' => false,
            'rewrite' => array("slug" => "campaign"), // This is for the permalinks
            'query_var' => "campaign", // This goes to the WP_Query schema
            'supports' => array('title'/* We only need the default title field, but we could use others such as 'author', 'excerpt', 'editor' ,'custom-fields'*/)
            ));

            add_filter("manage_edit-campaign_columns", array(&$this, "edit_columns"));
            add_action("manage_posts_custom_column", array(&$this, "custom_columns"));

            // Register custom taxonomies gasource (for the Campaign Source), gamedium (for the Campaign Medium), and ganame (for Campaign Name)
            // Campaign Source
            register_taxonomy("gasource", array("campaign"), array("hierarchical" => true, "label" => _x( 'Campaign Sources', 'campaign sources taxonomy label' ), "singular_label" => "Campaign Source", "rewrite" => true));
            // Campaign Medium
            register_taxonomy("gamedium", array("campaign"), array("hierarchical" => true, "label" => _x( 'Campaign Mediums', 'campaign mediums taxonomy label' ), "singular_label" => "Campaign Medium", "rewrite" => true));
            // Campaign Name
            register_taxonomy("ganame", array("campaign"), array("hierarchical" => true, "label" => _x( 'Campaign Names', 'campaign names taxonomy label' ), "singular_label" => "Campaign Name", "rewrite" => true));

            add_action("admin_init", array(&$this, "admin_init"));
            add_action("template_redirect", array(&$this, 'template_redirect'));

            add_action("wp_insert_post", array(&$this, "wp_insert_post"), 10, 2);

         }

Let’s give the columns on the admin screen some headings:

   function edit_columns($columns)
   {
      $columns = array(
      'cb' => '<input type="checkbox" />',
      'title' => _x('Campaign Title','campaign title label for edit columns'),
      'gaca10_ganame' => _x('Campaign Name','campaign name label for edit columns'),
      'gaca10_gasources' => _x('Campaign Source','campaign source label for edit columns'),
      'gaca10_gasmedium' => _x('Campaign Medium','campaign medium label for edit columns'),
      );
      return $columns;
   }

Let’s specify which columns we would like to show up on the admin screen for this custom post type. We’ll have columns for campaign source, medium and name, in addition to the post’s title.

   function custom_columns($column)
   {
      global $post;
      switch ($column)
      {
         // The campaign source
         case "gaca10_gasources":
         $gasources = get_the_terms(0, "gasource");
         if ( $gasources && ! is_wp_error( $gasources ) ) :
         $gasources_html = array();
         foreach ($gasources as $gasource)
         array_push($gasources_html, '<a href="' . get_term_link($gasource->slug, "gasource") . '">' . $gasource->name . '</a>');

         echo implode($gasources_html, ", ");
         endif;
         break;

         // The campaign medium
         case "gaca10_gasmedium":
         $gamediums = get_the_terms(0, "gamedium");
         if ( $gamediums && ! is_wp_error( $gamediums ) ) :
         $gamediums_html = array();
         foreach ($gamediums as $gamedium)
         array_push($gamediums_html, '<a href="' . get_term_link($gamedium->slug, "gamedium") . '">' . $gamedium->name . '</a>');

         echo implode($gamediums_html, ", ");
         endif;
         break;

         // The campaign name
         case "gaca10_ganame":
         $ganames = get_the_terms(0, "ganame");
         if ( $ganames && ! is_wp_error( $ganames ) ) :
         $ganames_html = array();
         foreach ($ganames as $ganame)
         array_push($ganames_html, '<a href="' . get_term_link($ganame->slug, "ganame") . '">' . $ganame->name . '</a>');

         echo implode($ganames_html, ", ");
         endif;
         break;
      }
   }

Once our columns are set up appropriately, we should see the following columns (note that this example is with one campaign already added):

The next section enables us to specify which template we would like to use to display this custom post type. We will be using the campaign-template.php template:

   function template_redirect()
   {
      global $wp;

      // If the post type is set and is campaign…
      if (isset($wp->query_vars["post_type"])) {
         if ($wp->query_vars["post_type"] == "campaign")
         {
            // Then use the campaign-template.php file from this plugin directory
            include WP_PLUGIN_DIR.'/campaign-tracker/campaign-template.php';
            die();
         }
      }
   }

If a post is inserted or updated, then loop through the array and update or add the post’s meta data.

   function wp_insert_post($post_id, $post = null)
   {
      if ($post->post_type == "campaign")
      {
         foreach ($this->meta_fields as $key)
         {
            $value = $_POST[$key];
            if (empty($value))
            {
               delete_post_meta($post_id, $key);
               continue;
            }

            if (!is_array($value))
            {
               if (!update_post_meta($post_id, $key, $value))
               {
                  add_post_meta($post_id, $key, $value);
               }
            }
            else
            {
               delete_post_meta($post_id, $key);

               foreach ($value as $entry){
                  add_post_meta($post_id, $key, $entry);
               }
            }
         }
      }
   }

With the following function, we can add custom meta boxes for the admin screen where we edit the campaign:

   function admin_init()
   {
      // Add custom meta boxes for the edit campaign screen
      add_meta_box("gaca10-meta", "Campaign Information", array(&$this, "meta_options"), "campaign", "normal", "core");
   }

The following function is for the admin post meta contents. This lets us create the form in which we specify some of the variables for our trackable URL (except for the taxonomies). It also provides a read-only field that shows the shortened URL after the URL variables have been saved.

   function meta_options()
   {
      global $post;
      $custom = get_post_custom($post->ID);
      if($custom["gaca10-gaurl"][0]){
         $gaurl = $custom["gaca10-gaurl"][0];
      }
      else{ $gaurl = ''; }
      if($custom["gaca10-gaterm"][0]) {
         $gaterm = $custom["gaca10-gaterm"][0];
      }
      else { $gaterm = ''; }
      if ($custom["gaca10-gacontent"][0]) {
         $gacontent = $custom["gaca10-gacontent"][0];
      }
      else { $gacontent = ''; }
      if ($custom["gaca10-gadescription"][0]) {
         $gadescription = $custom["gaca10-gadescription"][0];
      }
      else { $gadescription = ''; }

      $url = trackable_url();
      if ($custom["campaign_tinyurl"][0]) {
         if($gaurl == '') { $shortenedurl = ''; }
         else{ $shortenedurl = create_tiny_url($url); }
      }

      ?>
      <label><?php _ex('Website URL:','website url label'); ?></label><input name="gaca10-gaurl" value="<?php echo $gaurl; ?>" /><br />
      <em><?php _ex('(e.g., http://www.google.com)','website url example'); ?></em><br /><br />

      <label><?php _ex('Campaign Term:','campaign term label'); ?></label><input name="gaca10-gaterm" value="<?php echo $gaterm; ?>" /><br />
      <em><?php _ex('(identify the paid keywords)','campaign term information'); ?></em><br /><br />
      <label><?php _ex('Campaign Content:','campaign content label'); ?></label><input name="gaca10-gacontent" value="<?php echo $gacontent; ?>" /><br />
      <em><?php _ex('(use to differentiate ads)','campaign content information'); ?></em><br /><br />

      <label><?php _ex('Campaign Description:','campaign description label'); ?></label><input name="gaca10-gadescription" value="<?php echo $gadescription; ?>" /><br />
      <em><?php _ex('(use to remind yourself about this specific link)','campaign description information'); ?></em><br /><br />

      <label><?php _ex('Shortened URL:','shortened URL label'); ?></label><input name="gaca10-gashortened-url" value="<?php echo $shortenedurl; ?>" readonly="readonly" /><br />

      <?php
   }
}

}

Here is how the “Add/Edit Campaign” screen will appear:

If CampaignTracker10 exists, then we initiate the plugin:

   if(class_exists('CampaignTracker10')){

      // Initiate the plugin
      add_action("init", "CampaignTracker10Init");

      function CampaignTracker10Init() {
         global $gaca10;
         $gaca10 = new CampaignTracker10();

      }
   }

Combine these functions into the campaign-tracker.php file.

The following taxonomy examples should also be on the “Add/Edit Campaign” screen after everything has been added. Here is the “Campaign Names” taxonomy:

Here is the “Campaign Mediums” taxonomy:

Here is the “Campaign Sources” taxonomy:

Similar to how traditional post categories are set up, you can create new categories or select previous categories.

A note on usage: When you begin to use the system, try to select only one category each from name, source and medium. One category per taxonomy type will prove to be most useful in your actual analysis in Google Analytics. So, as a general rule: one name, one source and one medium per URL.

The Helpful Display Functions

Each of the functions in this section is part of the ga-functions.php file. The functions have been separated from the other functions in order to keep the display functions together.

Our file will begin with the formatted_utm_taxonomy_terms function, which will display a URL-friendly version of the taxonomy terms:

   <?php
   /* Some Helpful Display Functions */

   function formatted_utm_taxonomy_terms($the_term) {
      global $post;
      $post_terms = get_the_terms( $post->ID, $the_term );
      if ( $post_terms && ! is_wp_error( $post_terms ) ) :
      $encoded_terms = array();
      foreach ($post_terms as $term ) {
         if(!$encoded_terms[] = $term->slug){
            $encoded_terms[] = urlencode($term->name);
         }
      }
      $return_terms = implode('+',$encoded_terms);
      return $return_terms;
      endif;
   }

The trackable_url function generates the trackable URL from the fields on the admin screen as well as the taxonomies. This appends the appropriate tracking criteria to the URL so that Google Analytics can use the variables and provide information based on these specific variables. To do this, we will use the add_query_arg WordPress function.

   function trackable_url() {
      global $post;
      $custom = get_post_custom($post->ID);

      // the url
      if ($custom["gaca10-gaurl"][0]) {
         $gaurl = $custom["gaca10-gaurl"][0];
      }
      else { $gaurl = ''; }

      // the term(s)
      if ($gaterm = $custom["gaca10-gaterm"][0]) {
         $gaterm = $custom["gaca10-gaterm"][0];
         $gaterm = urlencode($gaterm);
      }
      else { $gaterm = ''; }

      // the content(s)
      if ($custom["gaca10-gacontent"][0]) {
         $gacontent = $custom["gaca10-gacontent"][0];
         $gacontent = urlencode($gacontent);
      }
      else { $gacontent = ''; }
      $arr_params = array ( 'utm_campaign' => formatted_utm_taxonomy_terms('ganame'), 'utm_source' => formatted_utm_taxonomy_terms('gasource'), 'utm_medium' => formatted_utm_taxonomy_terms('gamedium'), 'utm_term' => $gaterm, 'utm_content' => $gacontent);
      return add_query_arg( $arr_params, $gaurl );

   }

The following functions take the campaign-trackable URL and shortens it with TinyURL. This method uses wp_remote_get to generate the shortened URL. It then saves the shortened URL to the post’s meta data when a post is saved. The trackable_url_tiny function enables us to retrieve the shortened URL in the template.

   // Save the shortened trackable URL to the post meta
   function save_shortened_meta($post_ID) {
      $url = trackable_url();
      $shortened_url = create_tiny_url($url);
      update_post_meta($post_ID, "campaign_tinyurl", $shortened_url);
      return $post_ID;
   }

   // Add an action to save it when the post is saved.
   add_action('save_post', 'save_shortened_meta');

   // Retrieve the shortened URL from post meta
   function trackable_url_tiny($url = null, $post_ID) {
      global $post;
      $custom_fields = get_post_custom($post->ID);
      $campaign_tinyurl = $custom_fields['campaign_tinyurl'][0];
      return $campaign_tinyurl;

      return $post_ID;
   }

   // Create shortened trackable URL through the wp_remote_get function
   function create_tiny_url($strURL) {
      $tinyurl = wp_remote_get( 'http://tinyurl.com/api-create.php?url='.$strURL );
      if( is_wp_error( $response ) ) {
         return 'Something went wrong!';
      } else {
         return $tinyurl['body'];

      }
   }

The trackable_url_report function is what provides the human-readable version of the variables. These are broken out by each section. The landing page, campaign name, source, medium, terms and content are all separated and displayed individually if they exist.

   function trackable_url_report() {
      global $post;
      $custom = get_post_custom($post->ID);

      // get the url
      if ($custom["gaca10-gaurl"][0]) {
         $gaurl = $custom["gaca10-gaurl"][0];
      }
      else { $gaurl = ''; }
      // get the term(s)
      if ($gaterm = $custom["gaca10-gaterm"][0]) {
         $gaterm = $custom["gaca10-gaterm"][0];
      }
      else { $gaterm = ''; }

      // get the content(s)
      if ($custom["gaca10-gacontent"][0]) {
         $gacontent = $custom["gaca10-gacontent"][0];
      }
      else { $gacontent = ''; }

      // The Landing page
      $url_info ='';
      $url_info.= "<strong>". _x( 'Landing Page:','landing page label') . "</strong> ";
      $url_info.= $gaurl;
      $url_info.= "<br />";

      // The campaign name
      $url_info.= "<strong>". _x( 'Campaign:','campaign label') . "</strong> ";
      $url_info.= formatted_utm_taxonomy_terms('ganame');
      $url_info.= "<br />";

      // The Source
      $url_info.= "<strong>". _x( 'Source:','source label') . "</strong> ";
      $url_info.= formatted_utm_taxonomy_terms('gasource');
      $url_info.= "<br />";

      // The medium
      $url_info.= "<strong>". _x( 'Medium:','medium label') . "</strong> ";
      $url_info.= formatted_utm_taxonomy_terms('gamedium');
      $url_info.= "<br />";

      // The term
      $url_info.= "<strong>". _x( 'Term:','term label') . "</strong> ";
      $url_info.= $gaterm;
      $url_info.= "<br />";

      // The content
      $url_info.= "<strong>". _x( 'Content:','content label') . "</strong> ";
      $url_info.= $gacontent;
      $url_info.= "<br />";

      return $url_info;
   }

The display_description function displays the description of the URL. We’ve broken this part out here in order to keep all of the pieces that are specific to the URL together. This is also the last function in the ga-functions.php file.

   function display_description(){
      global $post;
      $custom = get_post_custom($post->ID);
      $description = $custom["gaca10-gadescription"][0];
      return $description;
   }

   ?>

Combine these functions into the ga-functions.php file, and then we can move onto creating the template file.

The Template File

The final file that we will use to generate the view of the trackable URL is campaign-template.php. You will remember from the campaign-tracker.php file that we have a call in the template_redirect() function to redirect users to this template when viewing the custom post type of campaigns.

For display purposes, we will use the single.php file from the current default WordPress theme, TwentyEleven. You can, of course, use another theme and different styles.

First, we include the ga-functions.php file so that we can use some of our display functions. The campaign template also uses the Google Charts API to generate the QR code.

The following code will do all of the heavy lifting to display our campaign-trackable URL, the information about the URL, the shortened URL and the QR code. It will also allow us to edit the post if we need to change a variable. Simply drop this code into the loop.

   <h1 class="entry-title"><?php the_title() ?></h1><br />

   <?php
   echo "<strong>". _x( 'Description:','description label') . "</strong> ";
   echo display_description();
   echo "<br />";
   echo trackable_url_report();
   echo "<br />";
   echo "<strong>". _x('Trackable URL:','trackable URL label') . "</strong> ";
   echo "<a href=".trackable_url()." target='_blank'>".trackable_url()."</a><br />";

   echo "<strong>" . _x('Shortened Trackable URL:','shortened trackable URL label') . "</strong> ";
   echo "<a href=".trackable_url_tiny()." target='_blank'>".trackable_url_tiny()."</a><br />";
   ?>

   <br />
   <img src="https://chart.googleapis.com/chart?chs=150x150&amp;cht=qr&amp;chl=<?php trackable_url_tiny(); ?>" /><br />
   <?php edit_post_link( __( 'Edit', 'twentyeleven' ), '<span class="edit-link">', '</span>' ); ?>

When we combine the code, the campaign template will be as follows:

   <?php
   /**
   * The Template for displaying all single posts.
   *
   * @package WordPress
   * @subpackage Twenty_Eleven
   * @since Twenty Eleven 1.0
   */

   // Include the ga-functions.php file so that we can easily display the results
   include_once('ga-functions.php');

   get_header(); ?>

   <div id="primary">
   <div id="content" role="main">

   <?php while ( have_posts() ) : the_post(); ?>

   <nav id="nav-single">
   <h3 class="assistive-text"><?php _e( 'Post navigation', 'twentyeleven' ); ?></h3>
   <span class="nav-previous"><?php previous_post_link( '%link', __( '<span class="meta-nav">&larr;</span> Previous', 'twentyeleven' ) ); ?></span>
   <span class="nav-next"><?php next_post_link( '%link', __( 'Next <span class="meta-nav">&rarr;</span>', 'twentyeleven' ) ); ?></span>
   </nav><!-- #nav-single -->

   <h1 class="entry-title"><?php the_title() ?></h1><br />

   <?php
   echo "<strong>". _x( 'Description:','description label') . "</strong> ";
   echo display_description();
   echo "<br />";
   echo trackable_url_report();
   echo "<br />";
   echo "<strong>". _x('Trackable URL:','trackable URL label') . "</strong> ";
   echo "<a href=".trackable_url()." target='_blank'>".trackable_url()."</a><br />";

   echo "<strong>" . _x('Shortened Trackable URL:','shortened trackable URL label') . "</strong> ";
   echo "<a href=".trackable_url_tiny()." target='_blank'>".trackable_url_tiny()."</a><br />";
   ?>

   <br />
   <img src="https://chart.googleapis.com/chart?chs=150x150&amp;cht=qr&amp;chl=<?php trackable_url_tiny(); ?>" /><br />
   <?php edit_post_link( __( 'Edit', 'twentyeleven' ), '<span class="edit-link">', '</span>' ); ?>

   <?php comments_template( '', true ); ?>

   <?php endwhile; // end of the loop. ?>

   </div><!-- #content -->
   </div><!-- #primary -->

   <?php get_footer(); ?>

When the template is set up and a campaign has been added, then it should display the following page:

In Conclusion

By using WordPress custom post types in the method described, it is possible to organize marketing campaigns with the relevant Google Analytics campaign-tracking URL, shortened URL and QR code. This makes organizing marketing campaigns much simpler and more effective.

Custom post types make it very easy to set up a system by which to organize content. And we can get creative in how we use custom post types. They can be very useful when organizing content outside of the normal structure of WordPress and other content management systems (i.e. posts, pages, etc.).

Other possible uses of custom post types include the following:

Manage client contacts,
Create an employee directory,
Keep an inventory of items,
Organize other data.

Resources

You may be interested in the following resources and articles:

“Custom Post Types in WordPress 3.0,” Konstantin Kovshenin
“Custom Post Types in WordPress,” Justin Tadlock
“Creating a TinyURL With TinyURL’s API,” Richard Castera
“Getting Started With Infographics” (QR Codes with the Google Charts API), Google Code
“Post Types,” WordPress Codex
URL Builder tool Google Analytics
“IQ Lessons,” Google Analytics

(al)

Stunning Free Icon Set for Valentine’s Day

2012-02-03T12:46:02Z

Advertise here via BSA

Smashing Magazine has just released fantastic St. Valentine’s icon set, which is available in transparent PNGs as well as Photoshop PSDs (128×128 px) and are perfect for any projects you have coming up for St. Valentine’s Day.

Valentine’s icon set is completely free to use for commercial or personal applications without any restrictions.

Requirements: -
Demo: http://www.smashingmagazine.com/2012/02/02/freebie-valentines…
License: License Free

Sponsors

Professional Web Icons for Your Websites and Applications

Using max-width on images can make them disappear in IE8

2012-02-02T19:58:20Z

I recently ran into a problem that was really hard to figure out. I was working on a responsive design where I used img {max-width:100%;} to make sure that images would be downsized rather than overflow in narrower viewports.

It worked great everywhere… until I went to check in IE8. The site’s logo was gone! None of the usual IE bug fixes cured the problem, and it took me quite a while to realise that max-width was part of the problem.

Read full post

Posted in Browsers, CSS.

Freebie: St. Valentine’s Day Icon Set (10 PNG/PSD Icons)

2012-02-03T03:58:48Z

Every now and then, we release useful freebies for all of our highly valued readers. Today, it is our pleasure to present to you Cuberto‘s fantastic St. Valentine’s icon set — exclusively designed for Smashing Magazine and its loyal readers. The icons presented are available in transparent PNGs as well as Photoshop PSDs (128×128 px) and are perfect for any projects you have coming up for St. Valentine’s Day. Enjoy!

Download the Set for free!

This icon set is completely free to use for commercial or personal applications without any restrictions. Please link to this article if you want to spread the word.

large preview
download the .zip-package (.zip, 2 Mb)

Initial sketches of Cuberto’s St. Valentine’s icon set.

Quick preview of the icons in the set.

Behind the Design

As always, here are some insights from the designers:

“Our goal was not only to create nice icons but also a functional set that can be used in navigation elements as well as gifts throughout social networks on the upcoming sweet Valentine’s day. Please link to this article if you want to spread the word.”
— Peace and Love

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

(il)

A Photoshop (PSD) File Parser in JavaScript

2012-02-02T12:37:43Z

Advertise here via BSA

psd.js is a Photoshop (PSD) file parser written in Coffeescript/Javascript for both browsers and NodeJS implementations. Given a PSD file, it can parse out information such as image size and color modes, image resources, layer info, image contents, etc.

This implementation is more or less a direct port of pypsd with some help from psdparse. However, this is still a work in progress and is not finished yet. We do not recommend using in production anywhere.

Requirements: -
Demo: http://meltingice.github.com/psd.js/
License: License Free

This article made possible by the rack card printing company with quick turnaround times, Next Day Flyers.

Sponsors

Professional Web Icons for Your Websites and Applications

Bootstrap 2.0 Released with Lots of New Features

2012-02-01T12:15:49Z

Advertise here via BSA

Bootstrap 2.0 has just released with a lot of new features, rewritten documentation, and use cases to test with the addition of media queries.

They have also added some new components like progress bars, customizable gallery thumbnails and split buttons. Another great new feature are the new glyph icons, that you can use to style your buttons and menus.

Now there are total 12 custom jQuery Plugins for you to enhance Bootstrap. It includes, Modals, Tooltips, Dropdowns, Scrollspy, Carousel and more. All in all a huge update with many exciting features.

Requirements: -
Demo: http://twitter.github.com/bootstrap/
License: Apache License v2.0

Sponsors

Professional Web Icons for Your Websites and Applications

jQuery 1.7.2 Beta 1 Released

2012-02-01T04:06:44Z

Hey there Internets, it’s the jQuery Core team! We haven’t talked in a while, but over the holidays we were busy fixing the bugs you reported. The result of that hard work is jQuery 1.7.2 Beta 1. We decided to get a beta out by Groundhog Day so you wouldn’t be in the shadow of six more weeks of unfixed bugs.

You can get the code from the jQuery CDN:

http://code.jquery.com/jquery-1.7.2b1.js

Oh, we know what you’re thinking: “Cool, a new version of jQuery; I’ll wait until the final release has been out a few weeks and then I’ll give it a try.” Right, and then you’ll find some bug that keeps you from upgrading. Nothing makes us sadder than finishing up a release and only then seeing a report of a serious bug that could have been fixed earlier.

So please, come out of your burrow and try this beta with your code. Did we miss an old bug? Did we create a new bug that makes you feel like Bill Murray waking up to “I Got You Babe?” We want to know. You can use the bug tracker to report bugs; be sure to create a test case on jsFiddle so we can figure it out easily. If you’re not sure it’s a bug, ask on our forum or on StackOverflow.

jQuery 1.7.2b1 Change Log

The current change log of the 1.7.2b1 release.

Ajax

#10978: jQuery.param() should allow non-native constructed objects as property values

Attributes

#5571: Allow chaining when passing undefined to any setter in jQuery

Build

#10692: Configure the jshint options to more accurately match the style guide
#10902: ability to test a built version of jQuery in unit tests
#10931: Unit tests shouldn’t require internet access

Core

#10466: jQuery.param() mistakes wrapped primitives for deep objects

Css

#10639: outerWidth(true) and css(‘margin’) returning % instead of px in Webkit
#10754: have jQuery.swap return the return of the callback instead of just executing it
#10782: Incorrect calculating width
#10796: Bug in IE7 with $(‘#el’).css.(‘background-position’)
#10858: css.js regular expressions are incomplete
#11119: The curCSS function only need 2 arguments

Effects

#8498: Animate Hooks
#10006: method show is not working as expected in all browsers when called for document fragment
#10848: Animation toggling loses state tracking in certain atomic edge cases

Event

#8165: .live(‘click’, handler) fires on disabled buttons with child elements in Chrome
#10819: Eliminate “this.on.call(this, “
#10878: $(“select”).live(“change”, function(){ …broken in IE8 in jQuery 1.7
#10961: Error in XRegExp using jQuery 1.7.1 in IE6-9
#10970: The .on() selector parameter doesn’t work with :not(:first) selector
#10984: Cannot off() custom events ($.event.special)
#11021: Hover hack mangles a namespace named “hover”
#11076: .clone(true) loses delegation filters
#11130: jQuery.fn.on: binding map with null selector ignores data
#11145: $(document).on() not working with name=”disabled”

Manipulation

#9427: Passing undefined to .text() does not trigger setter
#10753: inline the evalScript function in manipulation.js as it’s only used once
#10864: text() method on a document fragment always returns the empty string
#11055: Update HTML5 Shim elements list to support latest html5shiv

Misc

#10952: .fired() doesn’t work on Callbacks object when it is flagged with “once”
#11257: Wrong path to source files in test suite if PHP missing

Support

#11048: Support Tests affect layout for positioned elements in IE6-9

Desktop Wallpaper Calendar: February 2012

2012-02-01T03:27:55Z

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

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

Please note that:

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

Colored Edge

"For February, the month of spring, love and 29 days." Designed by Rahul.s from India.

preview
with calendar: 1024×768, 1024×1024, 1280×960, 1440×900, 1440×1050, 1600×1200, 1680×1050, 1920×1080, 1920×1200, 1920×1440
without calendar: 800×600, 1680×1200, 1920×1200

Hungry Owl

"February, just one more cold month.. :)." Designed by Katerina Bobkova from Ukraine.

preview
with calendar: 320×480, 1024×768, 1024×1024, 1280×800, 1440×900, 1680×1050, 1920×1080
without calendar: 320×480, 1024×768, 1024×1024, 1280×800, 1440×900, 1680×1050, 1920×1080

Hot Drinks

"Which drink will you choose to make you feel better during the cold season?" Designed by Agathe Altwegg from France.

preview
with calendar: 320×480, 1024×768, 1280×800, 1440×900, 1680×1200
without calendar: 320×480, 1024×768, 1280×800, 1440×900, 1680×1200

Bold

preview
with calendar: 320×480, 1024×768, 1024×1024, 1280×800, 1280×1024, 1366×768, 1440×900, 1680×1050, 1920×1080
without calendar: 320×480, 1024×768, 1024×1024, 1280×800, 1280×1024, 1366×768, 1440×900, 1680×1050, 1920×1080, 1920×1200

February Prison Break

"We suggest – do not mess with February." Designed by Marek Guziсski From Rio Creativo from Poland.

preview
with calendar: 1280×720, 1280×800, 1440×900, 1680×1050, 1920×1080, 1920×1200, 2540×1440
without calendar: 1280×720, 1280×800, 1440×900, 1680×1050, 1920×1080, 1920×1200, 2540×1440

All You Need Is Love

"Love is all you need." Designed by Kaspars Dedzis from Latvia.

preview
with calendar: 1280×800, 1280×1024, 1366×768, 1680×1050, 1920×1200, 2560×1440
without calendar: 1280×800, 1280×1024, 1366×768, 1680×1050, 1920×1200, 2560×1440

February Splashes

preview
with calendar: 1280×720, 1280×800, 1440×900, 1680×1050, 1920×1200

Penguin Hockey

"No coward plays hockey!" Designed by Cheloveche.ru from Russia.

preview
with calendar: 1024×768, 1280×800, 1280×1024, 1440×900, 1680×1050, 1920×1200
without calendar: 1024×768, 1280×800, 1280×1024, 1440×900, 1680×1050, 1920×1200

Mr. & Ms. Nice

preview
with calendar: 1024×768, 1280×800, 1280×1024, 1440×900, 1680×1050, 1920×1080, 1920×1200, 2560×1440
without calendar: 1024×768, 1280×800, 1280×1024, 1440×900, 1680×1050, 1920×1080, 1920×1200, 2560×1440

Jealous Much?

"Calendar for February 2012." Designed by Annabelle Bay from USA.

preview
with calendar: 320×240, 1024×768, 1024×1024, 1280×800, 1280×1024, 1680×1050, 1920×1200
without calendar: 320×240, 1024×768, 1024×1024, 1280×800, 1280×1024, 1680×1050, 1920×1200

Heartbroken

"Illustrated wallpaper for february on the theme of heartbreak.1920 x 1200." Designed by Danae Botha from South Africa.

preview
with calendar: 320×480, 800×480, 800×600, 1024×768, 1024×1024, 1152×864, 1280×720, 1280×800, 1280×1024, 1440×900, 1440×1050, 1600×1200, 1680×1050, 1680×1200, 1920×1080, 1920×1200, 1920×1440, 2560×1440
without calendar: 320×480, 800×480, 800×600, 1024×768, 1024×1024, 1152×864, 1280×720, 1280×800, 1280×960, 1280×1024, 1440×900, 1440×1050, 1600×1200, 1680×1050, 1680×1200, 1920×1080, 1920×1200, 1920×1440, 2560×1440

The Shortest Month

preview
with calendar: 1024×1024, 1280×800, 1400×1050, 1440×900, 1680×1050, 1920×1080
without calendar: 1024×1024, 1280×800, 1400×1050, 1440×900, 1680×1050, 1920×1080

Kids And Dragon

"My drawings are mostly black-and-white and the year of the Black Dragon inspired me to start drawing another picture. Let the Dragon this year be friendly and playful ;)." Designed by Jelena Tљekulajeva from Estonia.

preview
with calendar: 1280×800, 1280×1024, 1366×768, 1440×900, 1680×1050, 1920×1080
without calendar: 1280×800, 1280×1024, 1366×768, 1440×900, 1680×1050, 1920×1080

Heart On A String

"For hopeless romantics that let others play with their heart." Designed by Jacob Giesler from USA.

preview
with calendar: 1280×800, 1440×900, 1680×1050, 1920×1080, 1920×1200, 2560×1440
without calendar: 1280×800, 1440×900, 1680×1050, 1920×1080, 1920×1200, 2560×1440

A Shadow’s Chance

"A nod at Groundhog Day! The artwork provided with a calendar has a winter color, because the groundhog sees his shadow which means six more weeksof winter. And the other (Green) has no Calendar and no Shadow which denotes anearly spring." Designed by Joseph Brooks from United States.

preview
with calendar: 1024×1024, 1280×800, 1280×1024, 1920×1080, 2560×1440
without calendar: 1024×1024, 1280×800, 1280×1024, 1920×1080, 2560×1440

Be Mine

"A cutsie calendar theme." Designed by Sandi | Pop Up Factory.com from Toronto, ON, Canada.

preview
with calendar: 1024×768, 1280×800, 1366×768, 1440×900, 1680×1050
without calendar: 1024×768, 1280×800, 1366×768, 1440×900, 1680×1050

It’s The Love Signal

"Let’s beam our love to the universe!" Designed by Lew Su-ann from Brunei Darussalam.

preview
with calendar: 800×600, 1024×768, 1152×864, 1280×800, 1280×960, 1400×1050, 1440×900, 1600×1200, 1680×1050, 1920×1200
without calendar: 800×600, 1024×768, 1152×864, 1280×800, 1280×960, 1400×1050, 1440×900, 1600×1200, 1680×1050, 1920×1200

Winter Church

preview
with calendar: 320×480, 1024×768, 1280×800, 1280×1024, 1440×900, 1680×1050, 1920×1200
without calendar: 320×480, 1024×768, 1280×800, 1280×1024, 1440×900, 1680×1050, 1920×1200

Lock Your Love

"February is the month of couples and love, so if you do have that one special person in your life! Then this would be the prefect month to show how much you love her or him :)." Designed by Rihards Gromuls from Latvia.

preview
with calendar: 1024×768, 1280×800, 1280×1024, 1440×900, 1680×1050, 1920×1200
without calendar: 1024×768, 1280×800, 1280×1024, 1440×900, 1680×1050, 1920×1200

Cyclops Encounter

"I am a big fan of the Odyssey. Cyclopses are awesome." Designed by Glorm from Canada.

preview
with calendar: 1024×1024, 1280×800, 1400×900, 1680×1050, 1920×1200
without calendar: 1024×1024, 1280×800, 1400×900, 1680×1050, 1920×1200

Gloomy Light

"Sometimes we ever feel’s like useless, moody, gloomy, that’s so sadly. Maybe it just like an old gloomy paper effect on my calendar template. But, we can change it with give it colors, this year our life will be not far from heaviness like our years before, just bright it up and make a colors in your moody days!" Designed by Dwi Prastika from Indonesia.

preview
with calendar: 1024×768, 1024×1024, 1280×800, 1440×900, 1680×1050, 2560×1440
without calendar: 1024×768, 1024×1024, 1280×800, 1440×900, 1680×1050, 2560×1440

Chillout

"Once upon a time, in a land far, far away, where you will not be online…" Designed by Chilid Interactive Agency from Poland.

preview
with calendar: 1280×800, 1366×768, 1440×900, 1680×1050, 2560×1440
without calendar: 1280×800, 1366×768, 1440×900, 1680×1050, 2560×1440

All You Need Is Love

"The Beatles said it best! Love is all you need." Designed by Allison Brown from Canada.

preview
with calendar: 1024×768, 1024×1024, 1280×800, 1280×1024, 1440×900, 1680×1050, 1920×1080
without calendar: 1024×768, 1024×1024, 1280×800, 1280×1024, 1440×900, 1680×1050, 1920×1080

Fight For You

"This valentine we should fight for the ones we love." Designed by Tonie Tannous from Lebanon.

preview
with calendar: 1440×900, 1680×1050, 1920×1080, 1920×1200, 2560×1440
without calendar: 1440×900, 1680×1050, 1920×1080, 1920×1200, 2560×1440

Ice Melted

"Ice melted is coming back soon." Designed by Yank from France.

preview
with calendar: 640×480, 800×600, 1024×768, 1280×1024, 1600×1200, 1920×1200
without calendar: 640×480, 800×600, 1024×768, 1280×1024, 1600×1200, 1920×1200

Load Time

"What Scott Adams means about load time." Designed by Fredrik Jensen from Norway.

preview
with calendar: 320×480, 640×480, 800×480, 800×600, 1024×768, 1152×864, 1280×720, 1280×800, 1280×960, 1440×900, 1600×1200, 1680×1050, 1680×1200, 1920×1080, 1920×1200, 1920×1440, 2560×1440
without calendar: 320×480, 640×480, 800×480, 800×600, 1024×768, 1152×864, 1280×720, 1280×800, 1280×960, 1440×900, 1680×1050, 1680×1200, 1920×1080, 1920×1200, 1920×1440, 2560×1440

Love Is In The Air

preview
with calendar: 1024×1024, 1280×720, 1680×1050, 1920×1080, 1920×1200
without calendar: 1024×1024, 1280×720, 1680×1050, 1920×1080, 1920×1200

Join In Next Month!

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

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

What’s Your Favourite?

What’s your favorite theme or wallpaper for this month? Please let us know in the comment section below! We are looking forward to your submissions next month!

(il) (vf)

Ten Things To Think About When Designing Your iPad App

2012-02-01T03:27:55Z

Like most well-designed things, the magic of an iPad app comes from a union of usefulness, usability and meaning. Games aside, the app must be useful by solving a problem that people actually have through the right set of functionality at the right time. It must be easy to use and, just as importantly, easy to get started using, without a lot of pesky setup and learning steps. And it must hold meaning for the user through visual beauty, an emotional connection, personal insights, etc. In this article, we won’t outline the entire design process for creating an iPad app, but we will explore 10 of the key things to think about when designing your app (and planning the design process).

We’ve excluded tips that have already been mentioned in every single iPad design article ever written (such as, “Invite users to touch by presenting real-world metaphors in a skeuomorphic interface” —look it up!). Instead, we’ll focus on what to really think about when doing design work. By reviewing these considerations in the context of your own application, you can assess whether you’re making good decisions about your design.

Take A Goal-Oriented Approach To Simplify Functionality.

Good iPad apps are about simplicity and doing a few things well. This means you have to be selective about the functionality you include and not throw in the kitchen sink. Consider following a goal-oriented approach to figure out what functionality you need. List all of the high-level goals a user might have when using your app (better yet, watch users doing things that you hope your app will help with in order to get a full picture of what the user’s goals are — but that’s an article for another time). What would someone be trying to get done? Then, brainstorm all of the functionality that someone might want in order to accomplish that task. Look at that big list, and start pruning, with an eye for the minimum that is needed to help the user succeed. And then select a few magical, delightful features to complete the package.

For example, Epicurious does an excellent job of giving the multi-tasking cook exactly what they need. When viewing a recipe in landscape format, users can easily scan ingredients on the left while keeping track of the next instruction on the right, with a bright placeholder that can be dragged with the finger to the current spot. Reviews and additional tips for the recipe are easily accessible via tabs, but the main screen is kept clean and uncluttered, with just the basics.

Epicurious provides a clean interface for recipes, with an orange marker to keep your place.

By contrast, the Whole Foods app starts off being helpful by letting you add recipe ingredients to a shopping list. Unfortunately, it neglects to combine repeated ingredients, so items are listed multiple times. In the screenshot below, bananas appear three times, once for each recipe that requires them, instead of being combined into one entry.

Whole Foods should enhance its app by merging duplicate list items.

Also, don’t provide a button for every control the user might need to accomplish their goal. Think about what the user can infer about the UI through gesture. For example, Apple’s Notes app doesn’t have an “editing” mode; instead, you simply touch the screen to bring up the keyboard, and it auto-saves when you’re done. Basic editing controls such as cut, copy and paste also appear only in response to gestures as needed (and undo is accomplished by shaking).

The Notes app limits on-screen buttons and presents controls only if it detects they are needed.

Leverage What You Know To Create A Fully Personalized Experience.

No one wants to spend a lot of time setting up a $1.99 app. Leverage as much of what the iPad and other websites know about your users as possible (with their permission, of course). Could you use the user’s location, calendar, Twitter feed or contacts list to make the app smarter and more personalized?

Zite is a fabulous RSS reader for iPad that doesn’t wait for you to add sources, but rather connects to your Google Reader, Twitter or Delicious account and then presents articles based on what it has learned about your interests. I connected it with Delicious (where I store all of my bookmarks), and in five seconds it created a personalized magazine for me to explore new and interesting content! And just like Pandora, the more you use it, the more relevant and personalized the content becomes. So far, even though some argue that Flipboard’s UI is more elegant, engaging with Zite is easier because it’s all set up.

Zite sets things up immediately by connecting to an existing account.

Zite created my own personal magazine by learning about my interests through my Delicious account.

Think About The Place Of Use.

Assume that your user will be out and about when using your app — in a restaurant, in the car, in the kitchen, on a sofa, etc. How does that change the list of goals you’ve put together? For a user browsing recipes, are their needs different on the sofa than in the kitchen, or in a restaurant?

Open Table’s Web app for reserving tables displays a list of restaurants as the default view for search results (i.e. without a map). On the iPad, the default view is a large map with a list of restaurants on the right, along with an option to search your vicinity. This accommodates the common use case of someone trying to find a place to eat when they are out and about.

When you’re out and about with the iPad, Open Table shows you what is near.

Awesome Note opens with a set of default categories that reflect the various places that people might take notes on an iPad.

Awesome Note complements traditional categories like “My idea” and “To-do list” with out-and-about categories like “Travel diary” and “Shopping.”

GroceryIQ is a shopping list that organizes items by aisle to speed up shopping. It also allows filtering by store, which is handy.

GroceryIQ offers functionality to make your shopping trip more efficient.

Consider Multi-User And Multi-Device Cases.

Assume that multiple members of a family will be sharing an iPad or viewing the device at once. Unlike a personal computer, the iPad is not necessarily a personal device but could be treated more like a coffee-table book or magazine that multiple residents share. In addition to allowing users to switch accounts, indicating who is currently logged in is also important. An added benefit of accounts is that they facilitate syncing between devices (for example, an iPad and a smartphone).

Flipboard is a great example of shared use through multiple accounts. When you sign in, your name is displayed on the home page.

Flipboard makes clear that it knows who you are.

Like Flipboard, FedEx displays the name of the logged-in user (although the app’s heavy grayscale appearance is odd).

eBay, on the other hand, supports accounts but provides no indication of who is signed in until you touch the “My eBay” button in the corner.

eBay doesn’t make clear who is logged in until you touch “My eBay” in the corner.

Don’t Do Crazy Navigation Unless It’s A Game Or One-Hit Wonder.

Crazy, spinny, eye-catching interactions are fine for one-hit wonders and games. But stick with standard navigation for frequently used apps, such as news readers. If you do want to do something innovative, make sure it supports the task at hand and is extremely usable.

Martha Stewart Living, which is built on the well-designed Adobe Digital Publishing Suite, uses horizontal and vertical scrolling in a novel way by reserving horizontal scrolling for navigating between articles and vertical scrolling for navigating pages of an article. This is paired with a clever pane that visually shows how scrolling works, plus an overview of the current issue for even quicker navigation. With all that and a clickable table of contents, the whole experience is quite lovely.

Martha Stewart Living’s overview pane shows the clever horizontal and vertical scrolling scheme for content created with the Adobe Digital Publishing Suite.

The best thing you could do is actually use an iPad constantly for all kinds of things, and see what works for you. You’ll quickly discover inconsistencies and annoyances all over the app world, and you’ll figure out where to be consistent and where to branch out.

Here are three different methods that news readers follow to enable users to exit articles:

Huffington Post: top right.

New York Times: bottom left.

Zite: top left.

People tend to rest their thumb near the top left when holding an iPad, so putting the button there is easiest because then people wouldn’t have to change their grip. Also, Zite enables you to click anywhere on the screen outside of the article to close it, which makes for a nice flexible gesture. Similarly, the New York Times enables you to pinch an article to close it and return to the home page, which is even better, especially because the controls disappear once an article has been open for a few seconds — although a one-finger gesture closer to the top left would have worked better, because the two-finger gesture would probably require the user to change their grip.

Be mindful of how you yourself use features, and notice when something is usable and when you have to move your hand awkwardly or do something that disrupts your flow. Look around to find apps that do what you’re trying to do, assess their usability, and decide whether being consistent or doing something different would make more sense. iPad apps are still a new frontier, so now is not the time to buckle down and set conventions — but we should assess whether a new idea really adds something useful or is just novel for the sake of novelty.

Provide A Home Page.

People are used to home pages that orient them to what’s available and that give them a base of operations. Without one, discovering and browsing content can be disorienting and frustrating. Take the NASA news app, which has no home page. Upon launching the app, users are dropped directly into a news article. To view other articles, they would use the carousel arrows on the left and right, or press the tiny list icon in the bottom-left corner of the screen. The list view allows users to browse content in a small scrolling pop-over window that has only enough room for thumbnails and short headlines. The navigation is generally unwieldy and disorienting.

NASA does not provide a home page, but rather drops you into an article with vague pop-over navigation.

Pulse, on the other hand, is a great news app that uses a home page to quickly orient users and to introduce the navigation scheme, which is consistent throughout the app. From the home page, users can easily browse content, having plenty of space to view the large thumbnails and article descriptions to see what interests them. Drilling down into an article will collapse the navigation to the side so that you don’t lose context.

Pulse presents a horizontal scrolling list of articles on the home page.

Opening an article will collapse the navigation to a side panel in landscape view.

In portrait view, Pulse displays the navigation for one content source at the bottom, with easy access to the next page.

Beware Of Awkward Pop-Overs.

iPad offers the nifty interaction of a pop-over to help users retrieve content and navigation in context. But the interaction can also make for a jerky flow, cramming a lot of information into a tiny peephole. Given the limited width and height of a pop-over, avoid stuffing too much in it. Awesome Note tries to cram the interaction for editing a list of folders into a small pop-over, presumably to maintain context. Instead, we get a confusing interaction, with tabs duplicated on the screen and not enough room to get things done.

Awesome Note has a somewhat confusing pop-over that duplicates the information on the screen in a cramped space.

NASA’s complex navigation, which we saw in the preceding point, is a similar example of a bad pop-over.

Consider when opening a new page would make more sense than opening a pop-over. Unless context is critical, don’t be afraid to take users to a full-screen view to give the content some room to breathe.

Or consider using split views in clever ways:

Houzz has secondary navigation for each category in a convenient split view.

Martha Stewart Living displays the table of contents for an issue as a full-length pop-over, opening up space for images and descriptive headlines.

Flipboard favors a slide-out panel to give the navigation enough room to do its job.

Avoid Gratuitous Splash Screens.

Remember when the Web had splash screen, and then everyone got annoyed and left? They are even more annoying on the iPad because you’re usually trying to access content while someone is waiting for either you or the iPad. If you need a splash screen because something has to load, display it for the minimum amount of time possible. Better yet, display useful content while the rest of the app loads to give users a head start on the interaction.

Zite piques your interest by loading the first few photos on the home page while the rest of the app loads. When the app is ready, those initial photos animate into place, making for a delightful little welcome interaction.

Zite draws you in on the splash screen, with thumbnails of articles that will be ready once the full app loads.

Use Gestures In Clever Ways, But Don’t Overdo It.

Cool, useful gestures are a mainstay of iPad use. But the line between effective gestures and gesture overload is fine. For example, don’t provide a swipeable carousel and then also allow a generic swipe gesture on the same screen, because this would put competing swipe gestures at odds with each other.

And if a gesture is not obvious, give users a hint.

Zite indicates more content with a cute little “swipe” text at the bottom.

Discovr, a music-discovery application, integrates information about gesture controls right into the UI. The red circle in the screenshot below says “Tap me,” leading to information on how to expand nodes.

Discovr educates users with a red dot explaining the gesture options for the current screen.

Once basic information has been provided, another red node appears saying “Tap and hold me,” informing users how to access more content with a new gesture. With this information baked into the app experience itself, users learn about powerful features of the UI without having to be psychic.

Make Clear What’s Touchable, And Make It BIG.

Many apps suffer from what Jakob Nielsen calls “read-tap asymmetry,” whereby the font may be legible in size, but the tappable areas are so small that users are prone to missing the targets or are unsure whether the areas are even tappable. In the advertisement below, from the Martha Stewart Living app, the arrowed questions in the middle of the screen are tappable, but you wouldn’t know it because they have no affordance. If you’re going to go through the trouble of making more content available, then make it clear where to tap, and make the tappable area nice and big.

It’s not obvious where you would tap in this ad to get more information.

It turns out that tapping the light-gray boxes in the middle shows more information.

The image areas at the top of the Cool Hunting application are actually swipeable galleries, but we get no hint of it. What if there was some kind of affordance, such as dimensionality or a peek at another image to indicate there was more to the right?

Cool Hunting does not indicate that swiping the top image would reveal more images, which makes this functionality hard to discover.

In iOS itself, double-tapping the home key and then swiping left in the multitasking bar reveals a bunch of controls for sound and music, yet this functionality is pretty well hidden. Why not provide some affordance of what is available?

Double-tapping home and then swiping left on an iPad reveals hidden functionality.

What Else?

These are just 10 of the many things to consider when designing your iPad app, but it’s a good place to start. We’d love to hear your top considerations and examples in the comments. We especially lack a strong repository on the Web of examples of good and bad iPad app design. Please share examples of the different ways that apps treat the same functionality (such as exiting articles), and explain why certain solutions are better than others. Have you discovered other techniques through your own design work that you think everyone should put on their list of do’s and don’ts? Let us know.

Responsive Images: How they Almost Worked and What We Need

2012-01-31T19:23:11Z

With a mobile-first responsive design approach, if any part of the process breaks down, your user can still receive a representative image and avoid an unnecessarily large request on a device that may have limited bandwidth. But with several newer browsers implementing an “image prefetching” feature that allows images to be fetched before parsing the document’s body, some of the web's brightest developers are abandoning responsive images in favor of user agent detection, at least as a temporary solution. For us standardistas, UA detection leaves a bad taste in the mouth. More importantly, as the number and kinds of devices continue to grow, UA detection will quickly become untenable—just as browser detection did back in the bad old days before web standards. What's really needed, argues Mat Marquis, is a new markup element that works the way the HTML5 video element works. Sound crazy? So crazy it just might work.

Pricing Strategy for Creatives

2012-01-31T19:23:17Z

Strategic pricing helps your brand and helps you to make more money. Issuing a price is like handing out a business card—it’s a great branding tool, but be careful about what it says to your market. Beginning relationships with customers at a high price makes the statement: “we’re good at what we do and we know it.” Fighting with a competitor over a low price says “I’m uncertain about my abilities, so I’ll take what I can get.” Failing to use a considered pricing policy will leave you treading water in a sea of design mediocrity, allowing you to just stay afloat while you sell commodities. Jason Blumer explains how to become strategic about your pricing—including three things you can do immediately to kick-start your journey toward strategic pricing.

Generate CSS Template Based on Your HTML Markup

2012-01-31T12:07:44Z

Advertise here via BSA

Bear CSS is a handy little tool for web designers. It generates a CSS template containing all the HTML elements, classes & IDs defined in your markup. It was created using a combination of HTML5/CSS, jQuery and PHP, with some help from the PHP Simple HTML DOM Parser and Uploadify jQuery Plugin.

Requirements: -
Demo: http://bearcss.com/
License: License Free

Sponsors

Professional Web Icons for Your Websites and Applications

Look Up HTML5 and CSS3 Features with HTML5Please

2012-01-30T12:13:01Z

Advertise here via BSA

HTML5 Please helps you look up HTML5, CSS3, etc features, know if they are ready for use, and if so find out how you should use them – with polyfills, fallbacks or as they are. So that, you can decide if and how to put each of these features to use.

The recommendations represent the collective knowledge of developers who have been deep in the HTML5 trenches. If you think the recommendation is incorrect, you can edit the recommendation for each feature and send a pull request as well.

Requirements: HTML5 Browser Support
Demo: http://html5please.us/
License: License Free

Sponsors

Professional Web Icons for Your Websites and Applications

Limiting The Visibility Of WordPress Posts Via Usernames

2012-01-27T20:36:57Z

Controlling who is able to view a post is a simple task once the system is established. Limiting access to certain users has several applications, such as enabling a design studio to distribute artwork to its various clients, or enabling a small school to arrange for homework to be posted online using a cheap and easy solution.

The easiest method to get this system working is to make the recipients of the information “subscribers” (since they need not be able to post) and the distributors of information “authors” (since they should only be able to edit their own posts). This system eliminates several headaches for the webmaster by managing who has access to particular posts. The username would be used to identify who is allowed to view certain posts, since it is unique and, for the most part, constant.

The Basics

What Will You Need?

WordPress 3.1 or later
Members of various roles
The ability to modify your theme’s files
Basic knowledge of PHP and MySQL

What Is a Username?

In general, a username is a means by which to identify and verify a user. It is not the only way to identify a user, but remembering a username is easier for the person logging in than having to remember a random user ID. A username can be made unique to an individual, unlike a person’s name or email address (family members may share the same name, or even the same email address). This ease of use and uniqueness is why usernames are used on most websites that require people to sign up in order to access the website or certain of its features.

To WordPress, a username is means of identifying a user. Paired with a password, a username enables someone to access their profile and, depending on their permissions within WordPress, to access to the administrative pages of the website. A username can be used for many functions in the operation and management of a website, such as karma, prestige, user roles and expulsion.

A WordPress username is unique and impossible for the average user to change. Thus, the system is a potentially reliable means of identifying individuals. This reliability is important for a system in which a post must be visible to only a few people. The permissions of a post should not alter merely because someone has changed their name or email address.

The user page in a WordPress installation. Note that “Usernames cannot be changed.”

Setting Up The Back End

In order for an author to be able to set permissions for visibility, a method of selecting users must be set up on the post editing page. We could accomplish this by one of several methods, one of the easiest and most efficient of which is to create a meta box (or widget) in the post editing page that allows the author to add custom information, as required by a theme or plugin. This information enables us to tell the theme which members should have viewing rights to particular posts.

A Basic Custom Meta Box

Justin Tadlock’s article “How to Create Custom Post Meta Boxes in WordPress” explains how to create meta boxes, and we’ll reuse that code here.

Let’s assume we’re dealing with a website for a music school named “Smashing Magazine’s Fancy Flautists.” We will use the name smashing_flautist_access in the code for the back end to distinguish it from other custom functions. Justin’s code is a great starting point for this project, but it needs a little customization for our purpose. Place the following code in your theme’s functions.php, and modify the various labels according to your project.

/* Fire our meta box setup function on the post editor screen. */
add_action( 'load-post.php', 'smashing_post_meta_boxes_setup' );
add_action( 'load-post-new.php', 'smashing_post_meta_boxes_setup' );

/* Meta box setup function. */
function smashing_post_meta_boxes_setup() {

	/* Add meta boxes on the 'add_meta_boxes' hook. */
	add_action( 'add_meta_boxes', 'smashing_add_post_meta_boxes' );

	/* Save post meta on the 'save_post' hook. */
	add_action( 'save_post', 'smashing_flautist_access_save_meta', 10, 2 );
}

/* Create one or more meta boxes to be displayed on the post editor screen. */
function smashing_add_post_meta_boxes() {

	add_meta_box(
		'smashing-flautist-access',			// Unique ID
		esc_html__( 'Post Viewing Permission', 'smashing_flautist' ),		// Title
		'smashing_flautist_access_meta_box',		// Callback function
		'post',					// Admin page (or post type)
		'normal',					// Context
		'default'					// Priority
	);
}

/* Display the post meta box. */
function smashing_flautist_access_meta_box( $object, $box ) { ?>

	<?php wp_nonce_field( basename( __FILE__ ), 'smashing_flautist_access_nonce' ); ?>

	<p>
		<label for="smashing-flautist-access"><?php _e( "Enter the username of the subscriber that you want to view this content.", 'smashing_flautist' ); ?></label>
		<br />
		<input class="widefat" type="text" name="smashing-flautist-access" id="smashing-flautist-access" value="<?php echo esc_attr( get_post_meta( $object->ID, 'smashing_flautist_access', true ) ); ?>" size="30" />
	</p>
<?php }

With Justin’s code, modified for this project, we should have a custom meta box that looks like this:

A basic meta box positioned below the post editing box.

Adding Ease to the Selection

This box can be used as is, and the author would simply input the members who they want to allow to view a post. This would work well if each author had very few usernames to remember; but if the author has long list of usernames to choose from, then a list of members would have to be displayed, and there would have to be a system that allows the authors to choose members from the list. Add the following code to the area just below the original box, just after the closing paragraph tag, to display a list of users with their names, along with radio buttons to grant one of the users access to the current post.

<table class="smashing-flautist-access">
<tr align="left">
<th>Username</th>
<th>    </th>
<th>Visiblity</th>
<th>    </th>
<th>Name</th>
</tr>
<?php
global $post;
	$users = get_users('role=subscriber');
	foreach ($users as $user) {
			$user_info = get_userdata( $user->ID );
			if(get_post_meta( $object->ID, 'smashing_flautist_access', true ) == $user->user_login) $ifchecked = 'checked="checked" ';
			echo "<tr>";
			echo "<td>$user->user_login</td><td>    </td>";
			echo "<td align=\"center\"><input type=\"radio\" name=\"smashing-flautist-access\" id=\"smashing-flautist-access\" value=\"$user->user_login\" " . $ifchecked ."/></td><td>    </td>";
			echo "<td>$user_info->last_name, $user_info->first_name</td><td>    </td>";
			echo "</tr>";
			unset($ifchecked);

	} ?></table>

If everything goes well, you should end up with a box underneath the post editor that looks similar to the image below. The form containing the radio buttons gets a list of users that are listed as subscribers and makes the selection of the student with viewing permissions easy, all without the post’s author having to remember any usernames.

A meta box that contains a method to select the particular name and information of each user.

Saving the List

Now that we have generated a list that makes it easy for the authors to pick which members they want to be able to view particular posts, we have to create a system to add the list to WordPress’ MySQL database so that we can retrieve it later. We also need a way to tell WordPress to update this list of usernames in case the author decides later to add or remove someone from a particular post’s list of authorized viewers. The code provided by Justin does excellent work; place his code below in your theme’s functions.php, just after the function that sets up the custom meta box.

/* Save post meta on the 'save_post' hook. */
add_action( 'save_post', 'smashing_flautist_access_save_meta', 10, 2 );

/* Save the meta box's post metadata. */
function smashing_flautist_access_save_meta( $post_id, $post ) {

	/* Make all $wpdb references within this function refer to this variable */
	global $wpdb;

	/* Verify the nonce before proceeding. */
	if ( !isset( $_POST['smashing_flautist_access_nonce'] ) || !wp_verify_nonce( $_POST['smashing_flautist_access_nonce'], basename( __FILE__ ) ) )
		return $post_id;

	/* Get the post type object. */
	$post_type = get_post_type_object( $post->post_type );

	/* Check if the current user has permission to edit the post. */
	if ( !current_user_can( $post_type->cap->edit_post, $post_id ) )
		return $post_id;

	/* Get the posted data and sanitize it for use as an HTML class. */
	$new_meta_value = ( isset( $_POST['smashing-flautist-access'] ) ? sanitize_html_class( $_POST['smashing-flautist-access'] ) : '' );

	/* Get the meta key. */
	$meta_key = 'smashing_flautist_access';

	/* Get the meta value of the custom field key. */
	$meta_value = get_post_meta( $post_id, $meta_key, true );

	/* If a new meta value was added and there was no previous value, add it. */
	if ( $new_meta_value && '' == $meta_value )
		{
		add_post_meta( $post_id, $meta_key, $new_meta_value, true );
		$wpdb->query($wpdb->prepare("UPDATE $wpdb->posts SET post_status = 'private' WHERE ID = ".$post_id." AND post_type ='post'"));
		}
	/* If the new meta value does not match the old value, update it. */
	elseif ( $new_meta_value && $new_meta_value != $meta_value )
		{
		update_post_meta( $post_id, $meta_key, $new_meta_value );
		$wpdb->query($wpdb->prepare("UPDATE $wpdb->posts SET post_status = 'private' WHERE ID = ".$post_id." AND post_type ='post'"));
		}
	/* If there is no new meta value but an old value exists, delete it. */
	elseif ( '' == $new_meta_value && $meta_value )
		{
		delete_post_meta( $post_id, $meta_key, $meta_value );
		$wpdb->query($wpdb->prepare("UPDATE $wpdb->posts SET post_status = 'public' WHERE ID = ".$post_id." AND post_type ='post'"));
		}
}

The three MySQL queries are in place to prevent unauthorized users from viewing protected posts and to hide the posts from the RSS feeds. The first query runs only when new data populates the previously empty custom field, while the second query runs only when the data in the custom field has changed. The third query runs only if the custom field is emptied, and it sets the post’s visibility back to “Public.” All three are protected from SQL injection attacks by using $wpdb->prepare() to validate the data entered into the username form field.

If you don’t like that WordPress precedes the post’s title with the word “Private,” then add the following code to your theme’s functions.php file. This custom function is called when your theme would display a post’s title; it finds any instance of the words “Protected” or “Private” at the beginning of the title and removes them. In the core of WordPress’ programming, the function get_the_title() adds those words if a post’s visibility is restricted and the person viewing is not an administrator. What the following code does is send a message to the action that get_the_title() hooks into, telling it to remove the terms “Protected: ” and “Private: ” from the title. So, you can set a post’s title to begin with either term, and the title will not be altered; this code only affects WordPress’ ability to add to your title.

function smashing_title_trim($title) {
	$title = attribute_escape($title);
	$needles = array(__('Protected: '),__('Private: '));
	$title = str_replace($needles,'',$title);
	return $title;
}
add_filter('protected_title_format','smashing_title_trim');
add_filter('private_title_format','smashing_title_trim');

To allow users at the subscriber level to see private posts, you have to give them that capability. As it happens, some of the code we’ll be using later frees us from having to worry about users at the subscriber level seeing the posts of others.

$subRole = get_role( 'subscriber' );
$subRole->add_cap( 'read_private_posts' );

You can also grant users at the subscriber level permission to view private pages, in case you want a dedicated page of information that subscribers should know.

$subRole->add_cap( 'read_private_pages' );

Setting Up The Front End

Now that we have a way to add members to the list of people who can view a particular post, we have to modify our theme to use this data, and to actually control the visibility of each post based on this list. First, we need a way to get the username of the person who can view a post. Secondly, we would compare the username of the member with viewing permissions to the user who is currently logged in. Finally, we would make the theme display either the post in the loop or an error message (or perhaps nothing at all).

Place this code just after The Loop starts. It goes in single.php, category.php and index.php if you will be displaying posts on the home page.

<?php
/* Get the post's acceptable viewer. */
		$flautist_access = get_post_meta($post->ID, 'smashing_flautist_access', true );
/* Get the post's current viewer, if he or she is logged in. */
		if(is_user_logged_in()) {$current_flautist = $current_user->user_login;}
/* See if the acceptable viewer and the current viewer are the same */
		if($flautist_access == $current_flautist || current_user_can('author') || current_user_can('editor') || current_user_can('administrator'))
			{echo ''; ?>

Place this code just before the loop ends. Here is where you can show an error message telling the user that they may not view this post. Or you could leave this code as is to make it appear as though the current visitor is not missing anything.

<?php } else { echo ''; } ?>

This is what a hidden post looks like to the public or to a user who is not logged in. They would see what appears to be an error message and are redirected away from the post.

If a person is not logged in and tries to view a restricted post, they would get an error message.

If a user is logged in but not allowed to view a restricted post, they would see either nothing or an error message specific to members.

If a member is logged in and authorized to view a protected post, then they would see the post itself.

Conclusion

Being able to control who can view individual posts is a useful feature with a wide variety of applications. Third-party software can natively do this, but WordPress is widely supported and documented, which means that any security holes that might allow unauthorized users to view restricted posts would be shut in a future update. Plus, it allows you to run an actual blog next to posts with limited visibility. This system could be used by administrators to distribute personalized content, by professionals to send files to clients, or by bloggers to restrict the visibility of certain posts to certain members.

Enabling an author to control who can view their posts can help them tailor the blog’s content to the needs or tastes of certain users. Ultimately, you will have to factor in the purpose and content of your website when deciding whether to use this method. It’s not for everyone, but it suit the needs of owners of small websites who want to deliver certain content to certain people.

Resources

“Function Reference/add meta box,” WordPress Codex
“Function Reference/get users,” WordPress Codex
“Roles and Capabilities,” WordPress Codex
“Class Reference/wpdb,” WordPress Codex
“How To Create Custom Post Meta Boxes In WordPress,” Justin Tadlock

(al)

The UX Research Plan That Stakeholders Love

2012-01-26T20:44:47Z

UX practitioners, both consultants and in house, sometimes conduct research. Be it usability testing or user research with a generative goal, research requires planning. To make sure product managers, developers, marketers and executives (let’s call them stakeholders) act on UX research results, planning must be crystal clear, collaborative, fast and digestible. Long plans or no plans don’t work for people. You must be able to boil a UX research plan down to one page. If you can’t or won’t, then you won’t get buy-in for the research and its results.

This article addresses one key aspect of planning UX research: the one-page plan document. Before we get to that, we’ll briefly discuss the benefits of research planning and identify the audience of a research planning document.

(Image: Patrick Hoesly)

A word about stakeholders. A stakeholder in the UX world is a code name for the people who UX practitioners work with. These are our clients, whether internal or external to our organization. These are people who need to believe in what we do, act on research results, and fund and sponsor future research. We all have a stake in product development. They have a stake in UX research.

The Benefits Of Research Planning

Very generally speaking, UX research can answer two types of questions:

What’s useful?
What do people need? Who is the target audience?
What’s usable?
Does the design work for people, and how it can be improved?

Dozens of research methodologies could be implemented to answer these and more specific questions, and it is up to designers, researchers and their teams to decide what works best for them and when is the right time to answer their questions.

Here are the benefits of planning UX research:

Get a better feel of stakeholders.
A written plan helps you identify what works and doesn’t work for people, and what questions they are trying to answer.
Engage stakeholders.
A study plan ensures they are properly involved with the study and its results. If there’s no written plan, then there’s a greater chance that stakeholders won’t feel engaged.
Writing things down helps you.
When you put things in writing, they look very different than how you imagined them when they were just thoughts in your head. Always have a written study plan, even if you don’t share it with anyone else.

Now, let’s quickly identify the target audience for the research planning document.

Who Are You Planning For? Who Are The Stakeholders?

As with every product or service, the best offering comes from carefully identifying the target audience, their needs and their wants. Different UX research stakeholders are interested in different aspects of a research plan:

Product managers and software engineers are mostly interested in the study’s goal, research questions and schedule. In some cases, they are also interested in the criteria for participants. These stakeholders are usually interested in goals and questions because these determine the content of the study and its focus. They are interested in the schedule to make sure it enables them to make timely design, business and development decisions. Criteria for participants interest them when the product targets a very specific demographic and they want to make sure participants are representative of that demographic.
Managers and executives are probably interested in the study’s goal and the overall cost of the study, because they are likely sponsoring the study. Usually, their bandwidth does not allow them more than that.
You! The plan is mostly for you. As soon as you put your thoughts in writing, something happens, and you find holes in them. These holes help you improve the plan. A written plan also helps you focus and better prepare for the study. The fact of the matter is that if you can’t boil your plan down to a page, you probably don’t really understand it.

Now that we’ve discussed why a planning document is important and who it is for, let’s get to the nitty gritty of the document.

The Plan That Stakeholders Love: The One-Pager

The users of a research plan love brevity and appreciate succinct definitions of what will happen, why, when and with whom. Here are the sections that go in a one-page research plan:

Title
The title should combine the thing you’re studying and the methodology; for example, “Monster.com field study” or “XYZ Phone data-entry usability test.” Sometimes mentioning the target audience of the study is also appropriate; for example, “Whitehouse.com news page interviews with senior citizens.”
Author and stakeholders
State your full name, title and email address on one line. After you get the stakeholders’ buy-in for the plan, add their details as well — the research belongs to everyone now.
Date
Update it whenever the plan is updated.
Background
Describe what led to this study. Discuss the recent history of the project. Be brief, no more than five lines.
Goals
Briefly state the high-level reason (or reasons) for conducting this study. Try to phrase it in one sentence. If that wouldn’t make sense, create a numbered list of very short goal statements. If you have more than three to four goals, you are either aiming too high (meaning you have too many goals) or repeating yourself.
Research questions
These are the specifics, the core of your plan. Provide a numbered list of questions that you plan to answer during the study. It is extremely important that your stakeholders understand that you will not necessarily be asking the study participants these questions. As a rule of thumb, have no more than seven to ten questions, preferably around five. Later on, you will construct your study script to answer these questions. An effective way to think about research questions is to imagine that they are the headings in the study’s summary.
Methodology
In an academic environment, this section has one primary goal: to provide as many details as other researchers need in order to repeat the exact same study. In practice, the goal of the methodology section is to briefly inform the stakeholders of what will happen, for how long and where.
Participants
Provide a list of the primary characteristics of the people you will be recruiting to participate in the study. Have a good reason for each and every characteristic. If you have two participant groups, describe both groups’ characteristics in lists or in a table. Append a draft form that you’ll use to screen participants.
Schedule
Inform stakeholders of at least three important dates: when recruiting starts, when the study will take place, and when they can expect results. Large research projects require more scheduling details. For example, if the study involves travel to another city or country, more dates might be required for on-site preparation and meetings or for analysis workshops.
Script placeholder
When a full study script is ready, it will appear under this title. Until then, all you need is a heading with a “TBD” indication.

A Sample UX Research Plan

XYZ Phone Data-Entry Usability Test

By John Smith-Kline, Usability Researcher, jskline@example.com

Stakeholders: Wanda Verdi (PM), Sam Crouch (Lead Engineer)

Last updated: 13 January 2012

Background
Since January 2009, when the XYZ Phone was introduced to the world, particularly after its market release, journalists, bloggers, industry experts, other stakeholders and customers have privately and publicly expressed negative opinions about the XYZ Phone’s keyboard. These views suggest that the keyboard is hard to use and that it imposes a poor experience on customers. Some have claimed this as the main reason why the XYZ Phone will not succeed among business users. Over the years, several improvements have been made to data entry (such as using horizontal keyboards for most features), to no avail.

Goals
Identify the strengths and weaknesses of data entry on the XYZ Phone, and provide opportunities for improvement.

Research questions

How do people enter data on the XYZ Phone?

What is the learning curve of new XYZ Phone users when they enter data?

What are the most common errors users make when entering data?

Methodology
A usability study will be held in our lab with 20 participants. Each participant session will last 60 minutes and will include a short briefing, an interview, a task performance with an XYZ Phone and a debriefing. Among the tasks: enter an email subject heading, compose a long email, check news updates on CNN’s website, create a calendar event and more.

Participants
These are the primary characteristics of the study’s participants:

Business user,

Age 22 to 55,

Never used an XYZ Phone,

Expressed interest in learning more about or purchasing an XYZ Phone,

Uses the Web at least 10 hours a week.

[Link to a draft screener]

Schedule

Recruiting: begins on November 12

Study day: November 22

Results delivery: December 2

Script
TBD

Recap

A short plan that you and your stakeholders prepare together is key to a successful start of a UX research project.

Boil down your collective knowledge, agreements and understanding of what will happen, why, with whom and when.
Set the right expectations among stakeholders.
Try to keep the plan to one page.
Secure buy-in for the UX research by making it a team effort.
The core of the plan is the list of questions you are trying to answer. Choose the right ones.

Happy planning!

(al) (fi) (il)

Planetaki Planet Desarrollo Web

Upcoming Web Design And Development Conferences For 2012

February 2012 Events

March 2012 Events

April 2012 Events

May 2012 Events

June 2012 Events

July 2012 Events

August/September 2012 Events

Related Links

A Beginner’s Guide To jQuery-Based JSON API Clients

APIs Are The Future But, More Importantly, The Present

APIs in a Nutshell

Sure, Great, But What Code Do I Need?

Player 1: JSON

Player 2: jQuery

The Goal: A jQuery-Based JSON API Client

The HTML

The jQuery

The Full Code

The HTML

The jQuery

Conclusion

Further Resources

Set YouTube Video as Background with Tubular jQuery Plugin

Sponsors

Smashing Special: WordPress Theme Trends For 2012

Past Predictions

The Demise of the WordPress Premium Theme Market

“Cluttered and Pimped Out”

Early Niche Predictions

Everyone Loved Theme Options

A Trip Down Memory Lane

Free Themes: The WordPress Repository

The Most Popular Themes in the Forest

What Happened In 2011?

Smashing Special: A Three-Part Series

Generate Consistent Color Palette with Colllor

Sponsors

A Craft Of Consequences: Reader, Writer And Emotional Design

Lost In Translation

The Journey

Emotional Information

Emotionless Systems

Why Should We Design Emotional Systems?

Further Reading

JavaScript Templating Engine by Twitter

Sponsors

Adding Alert Bubbles for Favicon Image with Tinycon

Sponsors

Collaging: Getting Answers To The Questions You Don’t Know To Ask

A Picture Is Worth A Thousand Words

What You Can Learn

A Brief History Of Projective Techniques

Conducting A Collaging Exercise

1. Choose Your Topic of Interest

2. Create a Collage Board and Get Pictures

3. Moderate the Study

4. Conduct Analysis

When to Conduct a Collaging Exercise

Collage Examples

Pitfalls To Avoid

Conclusion

Resources

HTML5 Book-Flipping jQuery Plugin

Sponsors

How To Use Custom Post Types To Organize Online Marketing Campaigns

The File Structure

The Plugin File

The Helpful Display Functions

The Template File

In Conclusion

Resources

Stunning Free Icon Set for Valentine’s Day

Sponsors

Using max-width on images can make them disappear in IE8

Freebie: St. Valentine’s Day Icon Set (10 PNG/PSD Icons)

Download the Set for free!

Behind the Design

A Photoshop (PSD) File Parser in JavaScript