Web Conferences Roundup: Events from Around the Globe


  

Each year, thousands of developers, designers, and programmers from around the world gather together at conferences and events to share ideas, promote the latest technologies, and discuss best practices, standards, and emerging trends in their respective fields. For those of us who have had the privilege to participate in one or more of those events, we likely received valuable information that had a profound effect on our progress as web professionals.

In this article, I’ve attempted to gather together a comprehensive list of web development and graphic design-related conferences and events that developers and designers can use as a reference to find out where and when the latest of such of events will be taking place. I’ve tried to ensure that the event descriptions and links are as general as possible, allowing this list to stay relevant for as long as possible.

Unfortunately, it is not possible to include every pertinent event. So if there is anything relevant missing, please comment below and we’ll try to add it to the list. Also, if any of the information is incorrect or out of date, you can contact me using the bio information at the bottom of this article, and we’ll make any necessary corrections.

The list, which includes a brief description plus location, is divided into the following categories:

General Web Design Conferences

The following list consists of web conferences and events that cover a broad range of topics, including design, usability, web standards, and coding.

An Event Apart
“From the makers of A List Apart. 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.”

Location: Multiple U.S. cities

An Event Apart

Web Directions
“Our major conferences, Web Directions South and Web Directions North, are held annually in Sydney, Australia and Vancouver, Canada, and cover the full range of interests for web professionals — web design, front-end and back-end development, information architecture, interaction design, accessibility, data visualization and much more.”

Location: Australia, North America, Japan

Web Directions

Front-End Design Conference
“web-conference-roundup.”

Location: U.S.A.

Front-End Design Conference

Future of Web Design
“There’s loads going on at this years event. You’ll hear from great speakers, enjoy in depth workshops and make new friends and contacts. It’s a 1 day, 1 track event with a 2nd day of fantastic workshops.”

Location: New York City, U.S.A.

Future of Web Design

Voices That Matter Conferences
“The Pearson Education Voices That Matter Conference series gives voice to the most important thought leaders in technology, design, and business today. These conferences give our readers access to those who have devised new technologies, new approaches and new inventions. Our speakers are the individuals who have made the strongest contributions impacting their industry. ”

Location: Multiple U.S. cities

Voices That Matter Conferences

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.”

Location: U.S.A.

In Control Conference

@media Web Conferences
“Founded in 2004, Vivabit has been producing widely renowned and consistently well-received conferences for web professionals since the first sell-out @media event in London in 2005.”

Location: Multiple cities worldwide

@media

Webstock
“Webstock is a range of web-related events with the aim of improving how websites are built through inspiration, education, insightful analysis and practical application. It features industry leaders and kick-ass speakers talking on topics such as accessibility, web standards, usability and other best practices.”

Location: New Zealand

Webstock

WebVisions
“WebVisions explores the future of design, content creation, user experience and business strategy to uncover the trends and agents of change that will shatter your assumptions about the Web. Be ready to network, share ideas and be inspired by an all-star lineup of speakers.”

Location: Portland, Oregon, U.S.A.

WebVisions

Web Developers Conference
“As always we’ve put together a great line up of speakers from across the UK. Not only that but we have also got local developers and designers together to help answer your questions.”

Location: Bristol, U.K.

Web Developers Conference

Edge of the Web Conference
“The conference program offers a diverse range of leading edge and highly topical content focusing on key areas of current web development best practise, such as usability and accessibility and current web trends such as social networking and open data exchange, in a two day conference format.”

Location: Western Australia

Edge of the Web Conference

Build Web Conference
“With a variety of companion workshops, lectures, parties, meetups and an unconference, Build was created for those enthusiastic about the web and passionate about what they do.”

Location: Belfast, Ireland

Build Web Conference

EdUI Conference
“EdUI offers a rare speaker lineup of top web innovators that will inspire and enlighten web designers, developers, managers, and user experience and interaction design professions from any industry.”

Location: Charlottesville, Virginia, U.S.A.

EdUI Conference

The Rich Web Experience Conference
“RWE is a technically focused event targeted at: Web Designers, Developers, and Technical Project Managers.”

Location: Orlando, Florida, U.S.A.

The Rich Web Experience Conference

Web Design World
“Since 1997, we’ve helped thousands of Web designers learn what they need to know to make better web sites, manage web projects, and get home at a decent hour.”

Location: Seattle, Washington, U.S.A.

Web Design World

Fronteers
“Fronteers wants to organize a world class front-end web development conference each year. This is entirely done by volunteers, so we can keep the costs as low as possible.”

Location: Amsterdam, The Netherlands

Fronteers

The Big (D)esign Conference
“The Big Design Conference is an intense day of learning within the scope of Strategy, Social Media, User Experience, and Code Development. 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.”

Location: Dallas, Texas, U.S.A.

The Big (D)esign Conference

IDEA Conference
“IDEA brings together leading interaction design thinkers from across the globe, and challenges them: to share beyond the concepts that inspire them most, and deliver practical guidance for attendees to begin making an immediate difference in the networked world of today and tomorrow.”

Location: North America

IDEA Conference

UI, UX, & IA Conferences

The following list includes conferences and events focused on user interface design, user experience design, usability, and information architecture.

User Interface Conference
“Whether you’re looking for insights into new strategies, you need to learn the latest advancements, or you want a primer for new skills, this conference is the one for you. Our team of experts will set your imagination on fire, powering up your creative juices so you can dazzle and delight, whether you’re a member of a large team or a UX-Team-Of-One.”

Location: Massachusetts, U.S.A.

User Interface Conference

International Conference on Intelligent User Interfaces
“IUI is the annual meeting of the intelligent interfaces community and serves as the principal international forum for reporting outstanding research and development on intelligent user interfaces.”

Location: Worldwide

International Conference on Intelligent User Interfaces

Web 3.0
“At Web 3.0 Conference we will explore how companies are using the semantic web today, and should be using them tomorrow, for significant bottom line impact in areas like marketing, corporate information management, publishing, customer service, and personal productivity.”

Location: Multiple U.S. cities

Web 3.0

Information Architecture Summit
“The Information Architecture Summit is the premier gathering place for information architects and other user experience professionals. The conference has grown from a special interest group’s efforts to define an emerging field, to a rich and expanding community of practice, shaping and informing multiple disciplines.”

Location: Multiple cities worldwide

Information Architecture Summit

UX Australia
“UX Australia is a 3-day user experience design conference, with inspiring and practical presentations, covering a range of topics about how to design great experiences for people.”

Location: Australia

UX Australia

UXCampLondon
“A one day BarCamp in Richmond, London for anyone involved or interested in user experience design, interaction design, information architecture or usability.”

Location: Richmond, London, U.K.

UXCampLondon

UX Week
“UX Week is the premier user experience conference. With a mix of inspiring talks from recognized thought leaders and hands-on workshops delivering takeaway skills, this event delivers for user experience professionals at all levels — directors, managers, and practitioners.”

Location: San Francisco, U.S.A.

UX Week

UX London
“UX London is a unique three-day event combining inspirational talks with in-depth workshops presented by some of the industry’s biggest names.”

Location: London, U.K.

UX London

Usability Week Conference
“In place of scattered, shallow talks, Usability Week offers up to 6 days of deep learning as international experts lead 33 full-day tutorials on topics such as: Fundamental guidelines for Web usability, Improving usability for complex applications, Applying information architecture (IA) principles, Writing for the Web, Agile development and usability, Managing user experience strategy.”

Location: Multiple cities worldwide

Usability Week Conference

Advanced Common Sense Usability Workshops
Usability workshops presented by the consulting firm “Advanced Common Sense”, owned and operated by Steve Krug, author of Don’t Make Me Think.

Location: Multiple U.S. Cities

Advanced Common Sense Usability Workshops

JavaScript & Ajax Conferences

The following list includes conferences and events focused on JavaScript programming, JavaScript libraries, and Ajax.

jQuery Conference
“The annual conference of jQuery users and developers. There will be talks on jQuery, jQuery UI, plugins, complex application development, and more — all from the top jQuery developers. Case studies from some of the leading users of jQuery will be included along with a 3 hour tutorial for those just getting started.”

Location: U.S.A.

jQuery Conference

Full Frontal JavaScript Conference
“Full Frontal is a conference held in Brighton UK, for the front end developers with JavaScript skills ranging from beginner to advanced. If you’ve dabbled with JavaScript in the past and wanted to learn more about how the language works and what makes it tick, then this conference is for you.”

Location: Brighton, U.K.

Full Frontal JavaScript Conference

The Ajax Experience
“The Ajax Experience (TAE) is the original, and most authoritative, event for Web developers and designers wanting to learn more about Ajax and next generation Web applications. TAE bridges technology and practice by focusing on new solutions for real world problems, and giving practical examples on those solutions. Presented by over 40 independent Ajax experts from across the globe and with so many expert attendees present as well, you can even network and leverage informal learning opportunities from your peers who can contribute directly to your skills and project success.”

Location: Boston, Massachusetts, U.S.A.

The Ajax Experience

JSConf
“JSConf … is a conference devoted to the programming language we all love to hate and hate to love, JavaScript. This is conference will be thoughtful, content driven, and exemplify the very nature of JavaScript. The core focus of this conference is to expose some of the details about JavaScript that are often overlooked and present them more as a discussion with the audience. The content of the conference should cater to all types of JavaScript users from client interfaces to server development to testing.”

Location: Europe

JSConf

AJAXWorld RIA Conference & Expo
“The first and only major AJAX event in the world.”

Location: New York City, U.S.A.

AJAXWorld RIA Conference & Expo

Graphic Design Conferences

The following list focuses on events and conference related to graphic design and design-related tools and technologies.

HOW Design Conference
“The HOW Design Conference recognizes that graphic design is a business as well as an art. We launched this annual event in 1991 with the goal of providing a hands-on, educational program to enable designers to better balance the three key components of graphic design: creativity, business and technology. Conference sessions cover a mix of these three critical design issues, with particular emphasis on creative and business topics.”

Location: U.S.A.

HOW Design Conference

Adobe MAX
Connect. Exchange ideas and build relationships with leading designers and developers, industry experts, and Adobe product teams. Discover. Choose from hundreds of sessions and labs presented by industry leaders and Adobe experts on best practices and emerging technologies. Inspire. Join the inspiring conversations that unfold when thousands of the most innovative, creative minds gather in one place.”

Location: U.S.A.

Adobe MAX

AIGA Design Conference
“Join us for the AIGA Design Conference, to celebrate design excellence, reinforce friendships and connections and stimulate thinking about the critical issues that surround design practice.”

Location: U.S.A.

AIGA Design Conference

TypeCon
“TypeCon explores type for the screen, printing history, Dutch design, type in motion, Arabic calligraphy, the American Arts and Crafts movement, experimental typography, and much more. Special events include the third annual Type and Design Education Forum, and an exhibition of international type and design.”

Location: U.S.A.

TypeCon

Photoshop World Conference & Expo
“Photoshop World is the ONLY Photoshop and digital photography conference designed to put you at the top of your game with fast and furious classes from the world’s leading experts. Photoshop World is where Photoshop users go to learn hard and play even harder!”

Location: Multiple U.S. Cities

Photoshop World Conference & Expo

PDN PhotoPlus International Conference + Expo
“PDN PhotoPlus International Conference + Expo is the most important event in the photo industry. Designed for professionals and advanced amateurs in the photographic and imaging industries, PDN PhotoPlus Expo showcases the latest advances in photography.”

Location: New York City, U.S.A.

PDN PhotoPlus International Conference + Expo

London Design Festival
“The London Design Festival is an annual event established to celebrate and promote London as the creative capital of the world.”

Location: London, U.K.

London Design Festival

View Conference
“VIEW Conference is the premiere international event in Italy on Computer Graphics, Interactive Techniques, Digital Cinema, 3D Animation, Gaming and VFX.”

Location: Italy

View Conference

Design City
“Design City, a ’show within a show’, will bring together graphic designers with vendors who sell to the graphic design market. It connects buyers with sellers in a modern, interactive, results-driven environment. As one of the first trade shows of its kind in Canada, Design City aims to further strengthen the graphic design community and bring together buyers and sellers in the industry.”

Location: Canada

Design City

Design Indaba
“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. Independently curated with a focus on case studies and ingenious problem solving, rather than simply eye-catching portfolios, conference alumni are contemporary industry pacesetters.”

Location: Cape Town, South Africa

Design Indaba

5D: The Future of Immersive Design
“Our goal is to unite a vital community of designers and image-makers and to serve as a catalyst for innovation.”

Location: California, U.S.A.

5D: The Future of Immersive Design

Mogo Media Web & Graphic Design Conferences
“Home of the InDesign Conference, the Adobe Creative Suite Conference, the Pixel Conference, the Vector Conference, the Web Design & Developer Conference, the Conference for Adobe Acrobat, and more!”

Location: Multiple cities worldwide

Mogo Media Web & Graphic Design Conferences

Mobile Web Conferences

The following list focuses on events and conferences covering to mobile web design and related technologies.

Design for Mobile
“The Design for Mobile conference is North America’s only design conference exclusively for mobile devices. All aspects are covered, from academic explorations to practical execution, from research to design to development.”

Location: Lawrence, Kansas, U.S.A.

Design for Mobile

Mobile 2.0 Conference
“Our two-day event, presented by the Mobile 2.0 Organizing Committee, focuses on understanding and leveraging Mobile Ecosystems, building and successfully monetizing new Mobile Applications and Services, and exploring Disruptive Mobile Innovation and Business Models.”

Location: San Francisco, California, U.S.A.

Mobile 2.0 Conference

Voices That Matter: iPhone Developers Conference
“Learn what it takes to build killer iPhone apps, leveraging your existing skills in Objective-C. From Core Animation and Core Data to Push Notification Services and MapKit, we’ve got the bases covered.”

Location: Massachusetts, U.S.A.

Voices That Matter: iPhone Developers Conference

BlackBerry® Developer Conference
“At the heart of the BlackBerry® Developer Conference is a core group of technically minded people who come together because they’re passionate about development and the possibilities for building outstanding mobile applications on the BlackBerry solution. Join the best and the brightest from Research In Motion (RIM), drawn from a team of thousands focused on the success of one platform, with a wealth of knowledge and experience in mobile application development.”

Location: California, U.S.A.

BlackBerry® Developer Conference

Mobile Web & Applications
“Mobile Web and Apps, incorporating an exclusive focus day on Mobile Social Networking, will provide you with all that you need to understand, improve and profit from this seismic shift in our industry.”

Location: London, U.K.

Mobile Web & Applications

FITC Mobile
“Jam packed with information as well as a massive networking opportunity, FITC Mobile consists of presentations, demonstrations, and panel discussions, and is one of the only events in the world covering all aspects of mobile content.”

Location: Toronto, Ontario, Canada

FITC Mobile

PodCamp Az
“What makes ours different? Well, as you’ll note from the main page, this isn’t all about podcasting. Now we love podcasting, don’t get us wrong. But podcasting is simply a means to an end. It’s a method of distributing media files. We think the creation of those media files is more interesting. And we think what people do with those files is far more interesting than that.”

Location: Arizona, U.S.A.

PodCamp Az

Mobile 2.0 Conference
“The event provides a dynamic networking and information-sharing business environment, bringing together key stakeholders within the mobile web 2.0 value chain to discuss current trends and revenue generation possibilities, successful business models and the future opportunities that exist within Mobile social networks, Mobile internet and broadband, Devices and mobile AppStores, Mobile advertising Mobile content, Mobile gaming, video and TV.”

Location: Berlin, Germany

Mobile 2.0 Conference

Back-End Programming Conferences

The following list consists of events and conferences focused on back-end programming languages and tools, platforms, and technologies related to those languages.

PHP Conferences
Visit the conferences page at PHP.net for updates and information on php-related conferences from around the world.

Location: Multiple cities worldwide

PHP Conferences

MySQL Conference & Expo
“The MySQL Conference & Expo is an interactive learning community — four days packed with connections to MySQL developers and open source experts who know their subject inside and out. You’ll gain unique insights from speakers, vendors, project leaders, and other participants who are using MySQL to successfully run the world’s most demanding applications, saving millions of dollars over proprietary software and hardware solutions.”

Location: Santa Clara, California, U.S.A.

MySQL Conference & Expo

Microsoft Professional Developers Conference
“The Professional Developers Conference (PDC) is the definitive developer event focused on the technical strategy of the Microsoft developer platform. Attendees come from around the world to learn about the future of Microsoft developer technology directly from the people who make it happen. If you’re a developer, architect or technology leader involved in making strategic technology decisions for your company or organization, the PDC is for you.”

Location: Los Angeles, California, U.S.A.

Microsoft Professional Developers Conference

Microsoft MIX
“MIX is for designers and developers who build innovative web sites. Attendees are coders, strategists, information architects, visual designers, UX professionals and digital marketers. They represent top web sites, web start-ups, interactive agencies and other organizations that do business on the Web.”

Location: Las Vegas, Nevada, U.S.A.

Microsoft MIX

The ExpressionEngine & CodeIgniter Conference (EECI)
“At the ExpressionEngine & CodeIgniter Conference you can meet the experts, be inspired and break new boundaries! This event brings you presentations and workshops from your favorite EE & CI speakers. Both beginners and experienced users will benefit from a variety of topics and sessions: discover how your favourite content management system and PHP framework can bend even further!”

Location: Leiden, The Netherlands

The ExpressionEngine and CodeIgniter Conference (EECI)

JavaOne
“The JavaOne conference is the kind of event where the declaration “Classpath is dead!”* causes hundreds of people to applaud soundly and hoot their approval. We’re talking hardcore, middleware-loving, certified-geeky Javaheads coming together to share their love of — and frustrations over — the Java programming language and platform, and the extended technology that it informs.”

Location: San Francisco, California, U.S.A.

JavaOne

Yahoo Developer Conference: Open Hack
“Hack Days are events hosted by Yahoo!—sometimes with other partners—in which participants are encouraged to create web applications in 24 hours ideally using one or more of Yahoo’s APIs or open source libraries. They normally consist of a combination of structured talks and unstructured ‘hacking’ time, often run overnight and normally conclude with a hack demo session with prizes for the best hacks.”

Location: Multiple cities worldwide

Yahoo Developer Conference: Open Hack

OpenSource World
“OpenSource World focuses on innovative solutions in real-world environments using open source, open standards and open architecture as part of an integrated IT infrastructure. The OpenSource World conference will present the latest Linux and open source ideas in a technical context by industry experts and innovators, giving IT end-users actionable initiatives that bring cost savings to the enterprise.”

Location: Multiple cities worldwide

OpenSource World

Google I/O Developer Conference
“Google I/O is a web developer-focused conference held annually by Google to discuss web applications using Google and open web technologies.”

Location: San Francisco, California, U.S.A.

Google I/O Developer Conference

Google Developer Day
“Google Developer Days are a chance to learn about Google developer products from the engineers who built them. These one-day events will include seminars and “office hours” on web technologies including Google Maps, OpenSocial, Android, AJAX APIs, Chrome, Google Web Toolkit and more.”

Location: Multiple cities worldwide

Google Developer Day

Atlanta Linux Fest
“The Atlanta Linux Fest is a free grassroots conference for the GNU/Open Source Software/Free Software community to gather and share information about fun and exciting existing and upcoming Linux and Open Source Software. Attendees of all skill levels are invited to share their experiences to benefit all users of Linux/Free and Open Source Software. Atlanta Linux Fest is the place to learn, make new friends, and have fun!.”

Location: Atlanta, Georgia, U.S.A.

Atlanta Linux Fest

PayPal Innovate Developer Conference
“For two days, you’ll have the absolute inside track on how to capitalize on all of PayPal’s products. You’ll be in the mix with hundreds of other passionate developers — front and center as the possibilities of innovation are explored in over 35 interactive, technical sessions and Code & Build Labs. You’ll see how some of the most innovative developers in the world are building business on the PayPal platform.”

Location: San Francisco, California, U.S.A.

PayPal Innovate Developer Conference

Scotch on the Rocks
“Scotch on the Rocks, established in 2005, is a conference based out of Edinburgh, Scotland concentrating on all things ColdFusion. Incorporating keynotes, technical sessions and tutorials, as well as the most innovative and successful ColdFusion experts and companies, Scotch on the Rocks is a must-attend conference.”

Location: Edinburgh, Scotland

Scotch on the Rocks Cold Fusion Conference

OSCON Open Source Convention
“OSCON brings together over 3,000 experts, visionaries, and hackers in the trenches to explore all that open source has to offer. OSCON is the premier gathering place to gain exposure to and evaluate the new projects, tools, services, platforms, languages, software, and standards sweeping through the open source community.”

Location: U.S.A.

OSCON Open Source Convention

DrupalCampLA
“DrupalCampLA is the annual FREE conference organized by LA Drupal to unite and improve the Drupal Development Community in Los Angeles and the Greater Southern California Area. DrupalCampLA is an unconference-style Drupal training, founded in the style of BarCamp. While there are some differences (DrupalCamp does more pre-planning on the sessions), they have the common goal of bringing smart people together in an environment that is accessible to everyone.”

Location: Los Angeles, California, U.S.A.

DrupalCampLA

WordCamp WordPress Convention
“WordCamp is a conference type of event that focuses squarely on everything WordPress. Everyone from casual end users all the way up to core developers show up to these events. These events are usually highlighted by speeches or keynotes by various people.”

Location: Los Angeles, California, U.S.A.

WordCamp WordPress Convention

Ruby on Rails Conferences

The following list consists of events and conferences focused on the Ruby programming language and Rails web application framework.

RubyConf
“RubyConf 2009 is the premier gathering of Ruby developers, experts, and innovators.”

Location: U.S.A.

RubyConf

EuRuKo
“EuRuKo is an annual conference about the Ruby programming language with an informal atmosphere and lots of opportunities to listen, to talk, to hack and to have fun.”

Location: Barcelona, Spain

EuRuKo

Aloha On Rails
“The Aloha on Rails Conference is the premier destination event for Ruby on Rails and Web Development. This unique, intimate three day event (2 day conference and 1 day tutorial) unites the community’s top speakers and talent with motivated and excited attendees for an unforgettable conference in beautiful Hawaii.”

Location: Hawaii, U.S.A.

Aloha On Rails

RailsConf
“RailsConf, co-produced by Ruby Central, Inc. and O’Reilly Media, Inc., is the largest official conference dedicated to everything Rails. Through keynotes, sessions, tutorials, panels, and events, RailsConf is an interactive meeting ground for the most innovative and successful Rails experts and companies.”

Location: U.S.A.

RailsConf

WindyCityRails
“Join us for a one-day conference packed with an abundance of Rails knowledge at WindyCityRails. Sharpen your technical skills, network with other professionals, and meet some of the top minds in the Ruby on Rails community. Developers, designers, entrepreneurs, and investors all find value in WindyCityRails.”

Location: Chicago, Illinois, U.S.A.

WindyCityRails

acts_as_conference
“Want to know what the future of Ruby on Rails looks like? Come to acts_as_conference … and find out. This annual two day event is dedicated to Ruby on Rails and the happy developers that use it (or wish to use it) in their daily lives. Come learn what’s to come.”

Location: U.S.A.

acts_as_conference

Scottish Ruby Conference
“Whether you’re interested in finding out what Ruby and Rails can deliver, or already convinced and keen to hang out with some of the foremost thinkers in the community, this conference is for you!”

Location: Scotland

Scottish Ruby Conference

The Rails Edge Conference
“The Rails Edge is a unique conference where we bring some of the best minds in the Rails and Ruby communities together with you in a single-track environment, so that we can all sharpen our edge. We hope you’ll join us!”

Location: U.S.A.

The Rails Edge Conference

Flash & ActionScript Conferences

The following list consists of events focused on Adobe Flash animation, ActionScript development, and related technologies.

Flash on the Beach
“Flash on the Beach conference is the place to go for design, technical and inspiration if you are a web developer. It has grown quickly and gained fantastic status as the ‘must go to’ conference around… Flash on the Beach brings together the most creative, technical, inspirational, awe-inspiring, educational and entertaining industry leading speakers in the rich media industry.”

Location: Brighton, U.K.

Flash on the Beach

FITC Design & Technology Events
“FITC has produced events for the last 7 years with over 700 presenters and 14 000 attendees through countless cities around the world. From Flash to Motion Design, FLEX to AIR, Mobile and more, FITC events each stand as unique and exciting experiences that inspire, educate and challenge.”

Location: Multiple cities worldwide

FITC Design & Technology Events

The ActionScript Conference
“The ActionScript Conference (TAC) is a community conference with the focus on Flash Platform. Attendants will see themselves immersed in a day of learning, knowledge exchange, and networking. TAC aims to bring topics on ActionScript 3.0, Flash development, Enterprise Flex 3 and 4, AIR, Integrating of Flash and other Platforms, and building Rich Internet Application to its audience.”

Location: Singapore

The ActionScript Conference

Flash on Tap
“The Flash on Tap conference is blurring the lines between business and pleasure. Experience the excitement of a beer festival while soaking in presentations by top tier design and technology professionals. It’s a three-day event, by Flash professionals for Flash professionals. Who’s talking? We have rounded up a great mixture of talented, Flash and beer-loving speakers.”

Location: Boston, Massachusetts, U.S.A.

Flash on Tap

Flashbelt
“The mission of Flashbelt is to bring together new media designers, developers and enthusiasts to share knowledge, inspiration and build community. It’s about professional development and creative inspiration.”

Location: Minneapolis, Minnesota, U.S.A.

Flashbelt

360|Flex
“360|Flex is a community driven event. The sole purpose of the show is to bring the best of the Flex community together in one place to share war stories from the trenches and to allow the experts to share their deep technical knowledge with the community at large. Another benefit is finally being able to put a face, voice and personality onto the bloggers, flex coders and article writers that you’ve come to depend on.”

Location: Brighton, U.K.

360|Flex

Flash Forward
[Flash Forward was recently acquired by Lynda.com, so there was no information available about the event.]

Location: TBD

Flash Forward

Flash Camp Bangkok
“Flash Camp Bangkok will provide an introduction to the Flash platform as well as covering everything you need to know about getting started with building and designing rich Internet applications (RIAs) with Flex 4, Flex Builder 4 and Catalyst.”

Location: Bangkok, Thailand

Flash Camp Bangkok

Flash Camp St. Louis
“Flash Camp St. Louis is a full-day event featuring some top industry experts on the Adobe Flash Platform from both inside and outside Adobe. Come advance your Flash, ActionScript and Flex skills, meet members of the Adobe team and network with local companies and fellow developers. Sessions are geared towards designers and developers with beginning to intermediate level of experience with ActionScript 3, Flash, and/or Flex and AIR.”

Location: St. Louis, Missouri, U.S.A.

Flash Camp St. Louis

SEO & SEM Conferences

The following list consists of events and conferences focused on Search Engine Optimisation and Search Engine Marketing.

Search Engine Strategies (SES)
“Search Engine Strategies (SES) is the leading global conference & expo series that educates delegates on search engine marketing (SEM), including optimization (SEO) and advertising strategies, tactics and best practices. SES Search Marketing Events provide instruction from the industry’s top Search experts, including representatives from the Search Engines themselves.”

Location: Multiple cities worldwide

Search Engine Strategies (SES)

Search Marketing Expo
“The world’s leading search engine marketing conference, Search Marketing Expo — SMX — is the search engine marketing conference from Third Door Media, the company behind the Search Engine Land news site, Sphinn.com, and the Search Marketing Now webcast series. SMX is programmed by the sharpest minds in search marketing. Together, Search Engine Land editor-in-chief Danny Sullivan and executive editor Chris Sherman have covered the topics, interviewed the luminaries and educated a generation of search marketers.”

Location: Multiple cities worldwide

Search Marketing Expo

PubCon
“WebmasterWorld’s PubCon is an educational conference and industry trade show programmed specifically for web professionals and website site owners. Although our center piece is Search Engine Marketing, whether your primary role is in web site marketing, corporate IT development, or in technology business management, you will find something of value at PubCon (aka: Publishers Conference). It is also designed to be fun and entertaining with ample opportunity for quality networking.”

Location: Worldwide

PubCon

Marketing & Social Media Conferences

The following list consists of events and conferences focused on Internet marketing, social media, and related trends and technologies.

BlogWorld New Media Expo
“BlogWorld & New Media Expo is the only trade show and conference created for the industry of blogging and new media. It will give participants the strategies, tools and technologies they need to stake their claim in the blogosphere.”

Location: Las Vegas, Nevada, U.S.A.

BlogWorld New Media Expo

The Good Web
“The Good Web is a forum for Advertisers, Designers, Brands, and Non-Profits to share their ingredients of success for building awareness and participation around the causes they believe in.”

Location: New York City, U.S.A.

The Good Web

Internet Marketing Conference (IMC)
“IMC is going to be a full day event dedicated to the challenge of how Internet is impacting your business. The program will be designed to meet executives needs of information about how big part of a companies revenues & costs should belong to the Internet channel.”

Location: Multiple cities worldwide

Internet Marketing Conference (IMC)

Atlantic Internet Marketing Conference (AIM)
“Winning in today’s online marketplace takes skill and understanding of the tools, methods, and strategies employed by Online leaders. The AIM conference will teach your team what it takes to win. From marketing strategists to designers and programmers — we’ll show you the most successful practices today online, how to execute them, and get ahead of your competition.”

Location: Eastern Canada

Atlantic Internet Marketing Conference (AIM)

mesh conference
“mesh is happening because the five founders (see below) believed that Toronto deserved to have a world-class conference where people with an enthusiasm for the Web could talk about how it is affecting the media, marketing, business and society as a whole. Join us at mesh 2009 and help us connect, share and inspire.”

Location: Toronto, Ontario, Canada

mesh conference

meshmarketing
“meshmarketing is a one-day event focused on insights, tools and tactics to help you win customers’ hearts and minds, online. An insightful keynote will lead us into a series of engaging conversations and “show and tell” presentations, as well as in-depth workshops.”

Location: Toronto, Ontario, Canada

meshmarketing

Webit e-marketing & e-business Expo
“e-Business & e-Marketing Expo for SE Europe is the first event of such scale in the region of Southeastern Europe. At the heart of Webit is The Main Stage, where the very essence of modern integrated marketing will be debated and challenged by influential industry leaders.”

Location: South East Europe

Webit e-marketing & e-business Expo

Social Media World Forum
The Social Media World Forum brings together a good diverse range of speakers from different areas in the world, with the right mix of brands, agencies and social networks, and provides an excellent recap of Social Network best practice, brought to life with inspiring case studies.

Location: Worldwide

Social Media World Forum

The Internet Show
“The Internet Show is a series of seminars and showcases, presented globally. It is the only event that brings together Big, Medium and Small business, all eager to find new ways of doing internet business. It is a business, not a technology, show.

Location: Multiple cities worldwide

The Internet Show

TWTRCON
“Twitter is transforming business, government and the non-profit world. At TWTRCON, a one-day conference focused entirely on the business use of Twitter, you’ll see case studies and learn best practices from leading organizations that are using the real-time web to deliver measurable results.”

Location: Multiple U.S. cities

TWTRCON

140 Characters Conference
“At the #140conf events, we look at twitter as a platform and as a language we speak. Over time it will neither be the only platform nor the only language. #140conf is not an event about microblogging or the place where people share twitter ‘tips and techniques’ but rather where we explore the effects of the emerging real-time Internet on Business.”

Location: Multiple cities worldwide

140 Characters Conference

MIMA Summit
“The Summit attracts professionals from design, media, promotions, content development, product development, publishing, marketing, usability, and experience design. This day-long conference is the top interactive marketing event in the Midwest.”

Location: Minnesota, U.S.A.

MIMA Summit

UGCX
“UGCX will uncover success stories behind companies who have maximized user-generated content, and the importance of building a robust community management strategy. Leaders in the field will also discuss the best ways to generate revenue as the big shift in media continues to take shape.”

Location: New York City, U.S.A.

UGCX

The Next Web
“Internet professionals gather for 3 days to enjoy Amsterdam, the conference and to do business.”

Location: Amsterdam, The Netherlands

The Next Web

eduWEB Conference
“The eduWeb Conference is an annual, internationally recognized event for the higher education community, attracting those who are involved in online strategy, marketing and technology. This includes recruiting, web site design/ development, CMS, social media, marketing communications and the integration of traditional marketing channels into this new medium.”

Location: U.S.A.

eduWEB Conference

Technology Conferences

The following list consists of events and conferences covering a broad range of web-related technologies.

Devconnections Conferences
“DevConnections rocks the technology industry as the largest and most exciting event focused on Microsoft technology and your needs. Hands-down this event has the best speakers in our industry, not to mention the coolest attendees. Compare the number of expert speakers, Microsoft architects and in-depth number of sessions to other conference events and you will not find a better value.”

Location: Las Vegas, Nevada, U.S.A.

Devconnections Conferences

dConstruct
“dConstruct brings together leading thinkers from the fields of ubiquitous computing, interface design, gaming and mobile to explore the challenges of designing for tomorrow.”

Location: Brighton, East Sussex, U.K.

dConstruct

Apple’s Worldwide Developers Conference (WWDC)
“The Apple Worldwide Developers Conference provides developers and IT professionals with in-depth technical information and hands-on learning about the powerful technologies in iPhone OS and Mac OS X from the Apple engineers who created them.”

Location: California, U.S.A.

Apple's Worldwide Developers Conference (WWDC)

International World Wide Web Conference
“The World Wide Web Conference is a yearly international conference on the topic of the future direction of the World Wide Web. It began in 1994 at CERN and is organized by the International World Wide Web Conferences Steering Committee (IW3C2). The Conference aims to provide the world a premier forum for discussion and debate about the evolution of the Web, the standardization of its associated technologies, and the impact of those technologies on society and culture.”

Location: Worldwide

International World Wide Web Conference

DLD (Digital, Life, Design) Conference
“DLD (Digital, Life, Design) is an inspiring community for the 21st century which features digital innovation, science and culture and brings together thought leaders, creators, entrepreneurs and investors from Europe, the Middle-East, the Americas and Asia.”

Location: Munich, Germany

DLD (Digital, Life, Design) Conference

webDU
“webDU is the premier Antipodean Web Technology Conference. 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.”

Location: Sydney, Australia

webDU

Web 2.0 Expo
“Web 2.0 Expo is a conference and tradeshow for everyone who cares about embracing and extending the opportunities created by Web 2.0 technologies.”

Location: New York City & San Francisco, U.S.A.

Web 2.0 Expo

Macworld Expo
“Macworld offers access to hundreds of Mac products and services, paired with expert advice, demonstrations and instruction. Macworld conference programs feature industry leading minds, presenting cutting edge product training on the topics you most want to see. Whether you are a creative professional or a Mac IT pro, Macworld has the conference content, special presentations, exhibit hall highlights and experiences that meet your specific Mac needs.”

Location: U.S.A.

Macworld Expo

International Conference on Scalable Vector Graphics
“At the Scalable Vector Graphics (SVG) Open Conference you will have the opportunity to learn to use SVG to create effective and compelling web content, learn techniques for developing SVG software solutions, and see the latest developments from the W3C. You will meet the creators of SVG applications in person, the authors of the SVG specifications, and you will have the opportunity to provide your own input for future development.”

Location: Worldwide

PSVG Open

Webinale
This conference covers e-Business and Advertising, RIAs, Wdigets, Social Networking, Future and Mobile Web as well as Design and Usability. It takes place every year in Germany and features over 70 talks from leading web experts in English and in German languages.

Location: Berlin, Germany

Webinale

Where 2.0 Conference
“Now in its sixth year, the Where 2.0 Conference is where the grassroots and leading edge developers building location-aware technology intersect with the businesses and entrepreneurs seeking out location apps, platforms, and hardware to gain a competitive edge. In the O’Reilly conference tradition, Where 2.0 presents leading trends rather than chasing them.”

Location: California, U.S.A.

Where 2.0 Conference

Internet Summit
“Presented by TechJournal South and Southern Capitol Ventures, the Internet Summit supports web oriented entrepreneurial activity, innovation, and the resultant economic development of the southeast region.”

Location: North Carolina, U.S.A.

Internet Summit

Is Your Event or Conference Missing?

Do you know of any significant web-related event or conference that is not listed here? Let us know in the comments below and we’ll do our best to add it to the list.

About the Author

Louis Lazaris is a writer and freelance web developer based in Toronto, Canada. He has 9 years of experience in the web development industry and posts web design articles and tutorials on his blog, Impressive Webs. You can follow Louis on Twitter or contact him using this form.


© Louis Lazaris for Smashing Magazine, 2009. |
Permalink |
4 comments |
Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine

Post tags:

10 Useful WordPress Coding Techniques


  

10 Useful WordPress Coding Techniques (via @smashingmag) –

Since last year, the WordPress themes market has grown incredibly. The reason? Great designs, of course, but also a lot of amazing new functionality. Top WordPress developers are always looking to get the most out of WordPress and use all of their knowledge to find ways to make their favorite blogging engine even more powerful.

In this article, we have compiled 10 useful WordPress code snippets, hacks and tips to help you create a WordPress theme that stands out from the crowd.

You may be interested in the following related posts:

1. Style Posts Individually

Screenshot

The problem.
Your blog has a lot of posts, but the posts aren’t all of the same type. To give special styling to one or more of your posts, you can take advantage of both the post_class() function and the post ID.

The solution.
To apply this trick, just open your single.php file, find the loop and replace it with the following:

<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<div <?php post_class() ?> id="post-<?php the_ID(); ?>">
<h3><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h3>
<?php the_content(); ?>
</div>
<?php endwhile; else: ?>
<?php _e('Sorry, no posts matched your criteria.'); ?>
<?php endif; ?>

Code explanation.
The important part is mostly in line 3. Here, we have added the PHP post_class() function. Introduced in WordPress 2.8, this function adds CSS classes to the post. For example, it can add:

  • .hentry
  • .sticky
  • .category-tutorials
  • .tag-wordpress

With these CSS classes now added, you can now give a custom style to all posts that have the sticky tag or those that belong to the tutorials category.

The other important piece of this code is id="post-<?php the_ID(); ?>". By displaying the ID of the post here, we’re able to style a particular post. As an example:

#post-876{
	background:#ccc;
}

Source:

2. Display Related Posts… With Thumbnails!

Screenshot

The problem.
After they have read your latest post, what do your readers do? That’s easy: most of them simply leave. A great way to keep them interested is to display a list of related posts. Many plug-ins can do that, but for those who like to know how things works, here is some nice code to get related posts and their thumbnails.

The solution.
Simply paste this code after the the_content() function in your single.php file:

<?php
$original_post = $post;
$tags = wp_get_post_tags($post->ID);
if ($tags) {
  echo '<h2>Related Posts</h2>';
  $first_tag = $tags[0]->term_id;
  $args=array(
    'tag__in' => array($first_tag),
    'post__not_in' => array($post->ID),
    'showposts'=>4,
    'caller_get_posts'=>1
   );
  $my_query = new WP_Query($args);
  if( $my_query->have_posts() ) {
    echo "<ul>";
    while ($my_query->have_posts()) : $my_query->the_post(); ?>
      <li><img src="<?php bloginfo('template_directory'); ?>/timthumb/timthumb.php?src=<?php echo get_post_meta($post->ID, "post-img", true); ?>&h=40&w=40&zc=1" alt="" /><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></li>
    <?php endwhile;
    echo "</ul>";
  }
}
$post = $original_post;
wp_reset_query();
?>

Code explanation.
First, this code makes use of TimbThumb, a PHP image-resizing script. We have used it to automatically resize images to 40 by 40 pixels.

Once this code is pasted in your theme, it uses the first tag of the post to fetch related posts. In this example, four related posts are displayed. You can change this number on line 10.

Also, notice that I have cloned the $post variable at the beginning of the script and restored it at the end. This prevents problems that may occur with the loop, such as comments being assigned to the wrong post.

Source:

3. Alternate Post Styling On Your Home Page

Screenshot

The problem.
Many new WordPress themes have an amazing way of displaying posts on the home page. For example, we can display the first three posts bigger than the rest, with images and extended text, with the remaining posts shown more simply.

I have seen many themes in which developers use two distinct loops to achieve this, which isn’t necessary and can cause further problems. Let’s use a much simpler method.

The solution.
Here is a custom loop that displays the first three posts different than the rest. You can replace the existing loop in your index.php file with this code.

<?php
$postnum = 0;
while (have_posts()) : the_post(); ?>

<?php if ($postnum <= 3){ ?>
<div <?php post_class() ?> id="post-<?php the_ID(); ?>">
  <div class="date"><span><?php the_time('M j') ?></span></div>
    <h2>(<?php echo $postnum;?>)<a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2>
	<div class="post-image" style="text-align:center;">
		<a href="<?php the_permalink() ?>"><img src="<?php bloginfo('template_directory' ); ?>/timthumb.php?src=<?php  echo catch_that_image(); ?>&amp;w=500&amp;h=200&amp;zc=1" alt="<?php the_title(); ?>" /></a>
	</div>
	<p><?php the_content('Read the rest of this entry &raquo;'); ?></p>
	<p class="more"><a href="#">Read More</a></p>
  </div>
</div>

<?php } else {
<div <?php post_class( 'single ' . $end ); ?> id="post-<?php the_ID(); ?>">
	<div class="post-content">
		<h3><a href="<?php the_permalink() ?>">(<?php echo $postnum; ?>)<?php the_title(); ?></a> <?php edit_post_link('_', '', ''); ?></h3>
		<p><?php the_excerpt( '' ); ?></p>
		<p class="more"><a href="#">Read More ?</a></p>
	</div>
</div><!-- End post -->

<?php }
	endwhile;
	?>

Code explanation.
Nothing hard here! We just created a PHP variable, named $postnum, which is invoked at the end of the loop. If $postnum is less than or equal to 3, the post is displayed in full. Otherwise, it is displayed in its more compact form.

4. Using Multiple Loops

Screenshot

The problem.
When coding complex WordPress pages with more than one loop, it can happen that one of the loops doesn’t behave as expected: for example, unwanted offset, repeated posts, etc. Happily, with a bit of knowledge and a very useful function, we can avoid this.

The solution.
The following example features two distinct loops. Notice the rewind_posts() function on line 8. This example can be used on any WordPress file as is: index.php, single.php, etc.

// First loop (get the last 3 posts in the "featured" category)
<?php query_posts('category_name=featured&showposts=3'); ?>
<?php while (have_posts()) : the_post(); ?>
  <!-- Do stuff... -->
<?php endwhile;?>

//loop reset
<?php rewind_posts(); ?>

//Second loop (Get all posts)
<?php while (have_posts()) : the_post(); ?>
  <!-- Do stuff... -->
<?php endwhile; ?>

Code explanation.
This piece of code doesn’t use any hacks; rewind_posts() is a standard WordPress function.

The purpose of rewind_posts() is to “clear” a loop that has been previously used (like the first loop in our example above), allowing you to use a second loop that isn’t affected by the first loop’s results.

Source:

5. Overwrite Post Titles Easily

Screenshot

The problem.
the_title() is a basic but very useful WordPress function: it displays the post or page’s title. No more, no less. But hey, have you ever wished you were able to display the full title in your listing of posts and a custom title on the actual post’s page? If so, find out how right here.

The solution.
In your single.php file, find the call to the the_title() function and replace it with the following code:

<?php $title = get_post_meta($post->ID, "custom-title", true);
if ($title != "") {
	echo "<h1>".$title."</h1>";
} else { ?>
	<h1><?php the_title(); ?></h1>
<?php } ?>

Once that’s done, you can rewrite the post’s title by creating a field named custom-title. Its value will be your custom title for this post.

Code explanation.
When this code loads, it retrieves the meta field named custom-title. If this meta field exists and isn’t blank, it is displayed as the post’s title. Otherwise, the the_title() function is called, and the post’s regular title is displayed.

Source:

6. Add Multiple Sidebars

Screenshot

The problem.
Sidebars are great because they allow you to display a lot of useful info, such as related posts, author info, a blog roll, 125×125-pixel ad spaces and so on. But sidebars can quickly become very busy, and readers may be hard-pressed to find what they’re looking for. So, what about having different sidebars available and displaying the most appropriate one for the post?

The solution.
To apply this hack, duplicate your sidebar.php file and fill it with whatever information you would like to appear. Save the file as sidebar-whatever.php.

Once that’s done, open your single.php* file and find the call to the get_sidebar() function:

<?php get_sidebar(); ?>

Replace it with:

<?php $sidebar = get_post_meta($post->ID, "sidebar", true);
get_sidebar($sidebar);
?>

Now when you write a post, create a custom field named sidebar. Set its value as the name of the sidebar that you want to include. For example, if its value is right, WordPress will automatically include sidebar-right.php as a sidebar.

If no custom sidebar field is found, WordPress automatically includes the default sidebar.

*The same can be done with page.php.

Code explanation.
This trick is quite simple. The first thing we did was look for a custom field named sidebar and get its value as a variable. Then, the variable is used as a parameter for the WordPress function get_sidebar(), which allows us to specify a particular file to use as a sidebar.

Source:

7. Display Content Only To Registered Users

Screenshot

The problem.
As you probably know, WordPress lets you decide whether to allow readers to create accounts and sign in to your blog. If you want to increase your blog’s registered readers or would just like to reward existing readers, why not keep some content private, just for them?

The solution.
To achieve this hack, we’ll use a shortcode. The first step is to create it. Open your functions.php file and paste the following code:

function member_check_shortcode($atts, $content = null) {
  if (is_user_logged_in() && !is_null($content) && !is_feed()) {
    return $content;
  } else {
    return 'Sorry, this part is only available to our members. Click here to become a member!';
}

add_shortcode('member', 'member_check_shortcode');

Once that’s done, you can add the following to your posts to create a section or text (or any other content) that will be displayed only to registered users:

[member]
This text will be displayed only to registered users.
[/member]

That’s it. Registered users will see the text contained in the shortcode, while unregistered users will see a message asking them to register.

Code explanation.
The first thing we’ve done is create a function named member_check_shortcode, which checks whether the current user is logged in. If they are, then the text contained in the [member] shortcode is displayed. Otherwise, the message on line 5 is shown.

If you’d like to know more about WordPress shortcodes, you should definitely have a look at our Mastering WordPress Shortcodes post.

Source:

8. Display Your Most Popular Content In The Sidebar

Screenshot

The problem.
If you want to feature your best content and help readers discover more articles from your blog, you might want to display a list of your most popular posts, based on the number of comments they’ve received, in your sidebar.

The solution.
This code is really easy to implement. Just paste it wherever you’d like your popular posts to appear. To get more or less than five posts, just change the value of the SQL limit clause on line 3.

<h2>Popular Posts</h2>
<ul>
<?php $result = $wpdb->get_results("SELECT comment_count,ID,post_title FROM $wpdb->posts ORDER BY comment_count DESC LIMIT 0 , 5");
foreach ($result as $post) {
setup_postdata($post);
$postid = $post->ID;
$title = $post->post_title;
$commentcount = $post->comment_count;
if ($commentcount != 0) { ?>
<li><a href="<?php echo get_permalink($postid); ?>" title="<?php echo $title ?>">

<?php echo $title ?></a> {<?php echo $commentcount ?>}</li>
<?php } } ?>
</ul>

Code explanation.
In this code, we use the $wpdb object to send a custom SQL query to the WordPress database. Then we verify that the results aren’t empty (i.e. that no posts are without comments), and finally we display the list of posts.

Sources

9. Create A Drop-Down Menu For Easy Tag Navigation

Screenshot

The problem.
Tags are cool because they allow you to categorize content using precise terms. But displaying tag clouds is a problem: they are ugly, not easy to use and can be extremely big.

So, what’s the solution? Simply create a drop-down menu for your tags. That way, they don’t get in the way, but people still have easy access to them.

The solution.
To create our drop-down menu of tags, we first have to paste the two functions below into the functions.php file of our WordPress theme:

<?php
function dropdown_tag_cloud( $args = '' ) {
	$defaults = array(
		'smallest' => 8, 'largest' => 22, 'unit' => 'pt', 'number' => 45,
		'format' => 'flat', 'orderby' => 'name', 'order' => 'ASC',
		'exclude' => '', 'include' => ''
	);
	$args = wp_parse_args( $args, $defaults );

	$tags = get_tags( array_merge($args, array('orderby' => 'count', 'order' => 'DESC')) ); // Always query top tags

	if ( empty($tags) )
		return;

	$return = dropdown_generate_tag_cloud( $tags, $args ); // Here's where those top tags get sorted according to $args
	if ( is_wp_error( $return ) )
		return false;
	else
		echo apply_filters( 'dropdown_tag_cloud', $return, $args );
}

function dropdown_generate_tag_cloud( $tags, $args = '' ) {
	global $wp_rewrite;
	$defaults = array(
		'smallest' => 8, 'largest' => 22, 'unit' => 'pt', 'number' => 45,
		'format' => 'flat', 'orderby' => 'name', 'order' => 'ASC'
	);
	$args = wp_parse_args( $args, $defaults );
	extract($args);

	if ( !$tags )
		return;
	$counts = $tag_links = array();
	foreach ( (array) $tags as $tag ) {
		$counts[$tag->name] = $tag->count;
		$tag_links[$tag->name] = get_tag_link( $tag->term_id );
		if ( is_wp_error( $tag_links[$tag->name] ) )
			return $tag_links[$tag->name];
		$tag_ids[$tag->name] = $tag->term_id;
	}

	$min_count = min($counts);
	$spread = max($counts) - $min_count;
	if ( $spread <= 0 )
		$spread = 1;
	$font_spread = $largest - $smallest;
	if ( $font_spread <= 0 )
		$font_spread = 1;
	$font_step = $font_spread / $spread;

	// SQL cannot save you; this is a second (potentially different) sort on a subset of data.
	if ( 'name' == $orderby )
		uksort($counts, 'strnatcasecmp');
	else
		asort($counts);

	if ( 'DESC' == $order )
		$counts = array_reverse( $counts, true );

	$a = array();

	$rel = ( is_object($wp_rewrite) && $wp_rewrite->using_permalinks() ) ? ' rel="tag"' : '';

	foreach ( $counts as $tag => $count ) {
		$tag_id = $tag_ids[$tag];
		$tag_link = clean_url($tag_links[$tag]);
		$tag = str_replace(' ', '&nbsp;', wp_specialchars( $tag ));
		$a[] = "\t<option value='$tag_link'>$tag ($count)</option>";
	}

		switch ( $format ) :
	case 'array' :
		$return =& $a;
		break;
	case 'list' :
		$return = "<ul class='wp-tag-cloud'>\n\t<li>";
		$return .= join("</li>\n\t<li>", $a);
		$return .= "</li>\n</ul>\n";
		break;
	default :
		$return = join("\n", $a);
		break;
	endswitch;

	return apply_filters( 'dropdown_generate_tag_cloud', $return, $tags, $args );
}
?>

Once you’ve pasted this function in your functions.php file, you can use it to create your drop-down menu of tags. Just open the file where you want the list to be displayed and paste the following code:

<select name="tag-dropdown" onchange="document.location.href=this.options[this.selectedIndex].value;">
	<option value="#">Liste d'auteurs</option>
	<?php dropdown_tag_cloud('number=0&order=asc'); ?>

</select>

Code explanation.
To achieve this hack, we take the wp_tag_cloud() WordPress function and rewrite it to make it display tags in an HTML “Select” element.

Then, we just call the newly created dropdown_tag_cloud() in our theme to display the drop-down menu items.

Source:

10. Auto-Resize Images Using TimThumb And WordPress Shortcodes

Screenshot

The problem.
A good blog post needs images, whether screenshots or simple eye-candy. Readers always prefer articles with nice pictures to plain boring text.

But images can be a pain to deal with, especially because of their various sizes. So how about we create a WordPress shortcode that uses Timthumb to automatically resize images?

The solution.
The first thing to do is create the shortcode. Paste the following code in your functions.php file:

function imageresizer( $atts, $content = null ) {
	return '<img src="http://media1.smashingmagazine.com/wp-content/uploads/2009/10//timthumb/timthumb.php?src='.$content.'&w=590" alt="" />';
}

add_shortcode('img', 'imageresizer');

Now, you can use the following syntax to add an automatically resized image to your blog post:

[img]http://www.yoursite.com/yourimage.jpg[/img]

Code explanation.
You have probably already noticed how cool WordPress shortcodes are and how they make your blogging life easier. This code simply creates a shortcode that takes a single parameter: the image’s URL. Please notice that it’s not a good idea to resize large images this way as it unnecessarily increases the server load – in such cases it’s better to create and upload smaller images instead.

TimThumb resizes the image to 590 pixels wide, as specified on line 2 (w=590). Of course, you can change this value or add a height parameter (e.g. h=60).

Source:

Related posts

You may be interested in the following related posts:

About the Author

This guest post was written by Jean-Baptiste Jung, a 27-year-old WordPress expert from the French-speaking part of Belgium. He blogs about WordPress at WpRecipes, about practical Web development tips at Cats Who Code and about blogging at Cats Who Blog. You can stay in touch with Jean by following him on Twitter.

(al)


© Jean-Baptiste Jung for Smashing Magazine, 2009. |
Permalink |
48 comments |
Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine

Post tags: , ,

The Mystery Of The CSS Float Property

Years ago, when developers first started to make the transition to HTML layouts without tables, one CSS property that suddenly took on a very important role was the float property. The reason that the float property became so common was that, by default, block-level elements will not line up beside one another in a column-based format. Since columns are necessary in virtually every CSS layout, this property started to get used — and even overused — prolifically.

The CSS float property allows a developer to incorporate table-like columns in an HTML layout without the use of tables. If it were not for the CSS float property, CSS layouts would not be possible except using absolute and relative positioning — which would be messy and would make the layout unmaintainable.

In this article, we’ll discuss exactly what the float property is and how it affects elements in particular contexts. We’ll also take a look at some of the differences that can occur in connection with this property in the most commonly-used browsers. Finally, we’ll showcase a few practical uses for the CSS float property. This should provide a well-rounded and thorough discussion of this property and its impact on CSS development.

Definition and Syntax

The purpose of the CSS float property is, generally speaking, to push a block-level element to the left or right, taking it out of the document flow. This allows naturally-flowing content to wrap around the floated element. This concept is similar to what you see every day in print literature, where photos and other graphic elements are aligned to one side while other content (usually text) flows naturally around the left- or right-aligned element.

Screenshot
Flickr photo by presentday

The photo above shows the “Readers’ sites” section of .net magazine, which displays 3 readers’ photos each aligned left in their respective columns with text wrapping around the aligned images. That is the basic idea behind the float property in CSS layouts, and demonstrates one of the ways it has been used in table-less design.

The effectiveness of using floats in multi-columned layouts was explained by Douglas Bowman in 2004 in his classic presentation No More Tables:

No More Tables - Floats
No More Tables

Bowman explained the principles behind table-less design, using Microsoft’s old site as a case study. Floats were used prominently in his mock overhaul of the Microsoft layout.

Syntax

The float CSS property can accept one of 4 values: left, right, none, and inherit. It is declared as shown in the code below.

#sidebar {
	float: left;
}

The most commonly-used values are left and right. A value of none is the default, or initial float value for any element in an HTML page. The value inherit, which can be applied to nearly any CSS property, does not work in Internet Explorer versions up to and including 7.

The float property does not require the application of any other property on a CSS element for float to function correctly, however, float will work more effectively under specific circumstances.

Generally, a floated element should have an explicitly set width (unless it is a replaced element, like an image). This ensures that the float behaves as expected and helps to avoid issues in certain browsers.

#sidebar {
	float: left;
	width: 350px;
}

Specifics on Floated Elements

Following is a list of exact behaviours of floated elements according to CSS2 Specifications:

  • A left-floated box will shift to the left until its leftmost margin edge (or border edge if margins are absent) touches either the edge of the containing block, or the edge of another floated box
  • If the size of the floated box exceeds the available horizontal space, the floated box will be shifted down
  • Non-positioned, non-floated, block-level elements act as if the floated element is not there, since the floated element is out of document flow
  • Margins of floated boxes do not collapse with margins of adjacent boxes
  • The root element (<html>) cannot be floated
  • An inline element that is floated is converted to a block-level element

Float in Practice

One of the most common uses for the float property is to float an image with text wrapping it. Here is an example:

Float - Lifesaver

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper.

Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui.

Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.

Lifesaver Image from stock.xchng

The CSS applied to the image in the box above is as follows:

img {
	float: left;
	margin: 0 15px 5px 0;
	border: solid 1px #bbb;
}

The only property required to make this effect work is the float property. The other properties (margin and border) are there for aesthetic reasons. The other elements inside the box (the <p> tags with text inside them) do not need any styles applied to them.

As mentioned earlier, floated elements are taken out of document flow, and other block elements remain in flow, acting as if the floated element is not even there. This is demonstrated visually below:

This box is floated left

This <p> element has a different background color to show that it spans the width of its parent, ignoring the floated element. This inline text, however, wraps around the floated box.

In the above example, the <p> element is a block-level element, so it ignores the floated element, spanning the width of the container (minus padding). All non-floated, block-level elements will behave in like manner.

The text in the paragraph is inline, so it flows around the floated element. The floated box is also given margin settings to offset it from the paragraph, making it visually clear that the paragraph element is ignoring the floated box.

Clearing Floats

Layout issues with floats are commonly fixed using the CSS clear property, which lets you “clear” floated elements from the left or right side, or both sides, of an element.

Let’s take a look at an example that commonly occurs — a footer wrapping to the right side of a 2-column layout:

Left column floated left

Right column also floated left

Footer

If you view this page in IE6 or IE7, you won’t see any problems. The left and right columns are in place, and the footer is nicely tucked underneath. But in Firefox, Opera, Safari, and Chrome, you’ll see the footer jump up beside the left column. This is caused by the float applied to the columns. This is the correct behaviour, even though it is a more problematic one. To resolve this issue, we use the aforementioned clear property, applied to the footer:

#footer {
	clear: both;
}

The result is shown below:

Left column floated left

Right column also floated left

Footer

The clear property will clear only floated elements, so applying clear: both to both columns would not cause the footer to drop down, because the footer is not a floated element.

So use clear on non-floated elements, and even occasionally on floated elements, to force page elements to occupy their intended space.

Fixing the Collapsed Parent

One of the most common symptoms of float-heavy layouts is the “collapsing parent”. This is demonstrated in the example below:

Float - Lifesaver

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper.

Notice that the bottom of the floated image appears outside its parent. The parent does not fully expand to hold the floated image. This is caused by what we discussed earlier: the floated element is out of the natural document flow, so all block elements will render as if the floated element is not even there. This is not a CSS bug; it’s in line with CSS specifications. All browsers render the same in this example. It should be pointed out that, in this example, adding a width to the container prevents the issue from occurring in IE, so this would normally be something you would have to resolve in Firefox, Opera, Safari, or Chrome.

Solution 1: Float the container

The easiest way to fix this problem is to float the containing parent element:

Float - Lifesaver

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper.

Now the container expands to fit all the child elements. But unfortunately this fix will only work in a limited number of circumstances, since floating the parent may have undesirable effects on your layout.

Solution 2: Adding Extra Markup

This is an outdated method, but is an easy option. Simply add an extra element at the bottom of the container and “clear” it. Here’s how the HTML would look after this method is implemented:

<div id="container">
<img src="http://blog.theunical.com/wp-content/plugins/wp-o-matic/cache/11236_lifesaver.jpg" width="200" height="222" alt="" />
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper.</p>

	<div class="clearfix"></div>
</div>

And the resulting CSS applied to the new element:

.clearfix {
	clear: both;
}

You could also do this by means of a <br /> tag with an inline style. In any case, you will have the desired result: the parent container will expand to enclose all of its children. But this method is not recommended since it adds nonsemantic code to your markup.

Solution 3: The :after Pseudo-Element

The :after pseudo-element adds an element to the rendered HTML page. This method has been used quite extensively to resolve float-clearing issues. Here is how the CSS looks:

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

The CSS class “clearfix” is applied to any container that has floating children and does not expand to enclose them.

But this method does not work in Internet Explorer up to version 7, so an IE-only style needs to be set with one of the following rules:

.clearfix {
	display: inline-block;
}

.clearfix {
	zoom: 1;
}

Depending on the type of issue you’re dealing with, one of the above two solutions will resolve the issue in Internet Explorer. It should be noted that the zoom property is a non-standard Microsoft proprietary property, and will cause your CSS to become invalid.

So, because the :after pseudo-element solution does not work in IE6/7, is a little bit bloated code-wise, and requires additional invalid IE-only styles, this solution is not the best method, but is probably the best we’ve considered so far.

Solution 4: The Overflow Property

By far the best, and easiest solution to resolve the collapsing parent issue is to add overflow: hidden or overflow: auto to the parent element. It’s clean, easy to maintain, works in almost all browsers, and does not add extra markup.

You’ll notice I said “almost” all browsers. This is because it does not work in IE6. But, in many cases, the parent container will have a set width, which fixes the issue in IE6. If the parent container does not have a width, you can add an IE6-only style with the following code:

// This fix is for IE6 only
.clearfix {
	height: 1%;
	overflow: visible;
}

In IE6, the height property is incorrectly treated as min-height, so this forces the container to enclose its children. The overflow property is then set back to “visible”, to ensure the content is not hidden or scrolled.

The only drawback to using the overflow method (in any browser) is the possibility that the containing element will have scrollbars or hide content. If there are any elements with negative margins or absolute positioning inside the parent, they will be obscured if they go beyond the parent’s borders, so this method should be used carefully. It should also be noted that if the containing element has to have a specified height, or min-height, then you would definitely not be able to use the overflow method.

So, there really is no simple, cross-browser solution to the collapsing parent issue. But almost any float clearing issue can be resolved with one of the above methods.

Float-Related Bugs in Internet Explorer

Over the years, there have been numerous articles published online that discuss common bugs in connection with floats in CSS layouts. All of these, not surprisingly, deal with problems specific to Internet Explorer. Below, you’ll find a list of links to a number of articles that discuss float-related issues in-depth:

Changing the Float Property with JavaScript

To change a CSS value in JavaScript, you would access the style object, converting the intended CSS property to “camel case”. For example, the CSS property “margin-left” becomes marginLeft; the property background-color becomes backgroundColor, and so on. But with the float property, it’s different, because float is already a reserved word in JavaScript. So, the following would be incorrect:

myDiv.style.float = "left";

Instead, you would use one of the following:

// For Internet Explorer
myDiv.style.styleFloat = "left";

// For all other browsers
myDiv.style.cssFloat = "left";

Practical Uses for Float

Floats can be used to resolve a number of design challenges in CSS layouts. Some examples are discussed here.

2-Column, Fixed-Width Layout

Roger Johansson of 456 Berea Street outlines an 8-step tutorial to create a simple, cross-browser, 2-column, horizontally centered layout. The float property is integral to the chemistry of this layout.

“The layout consists of a header, a horizontal navigation bar, a main content column, a sidebar, and a footer. It is also horizontally centered in the browser window. A pretty basic layout, and not at all difficult to create with CSS once you know how to deal with the inevitable Internet Explorer bugs.”

2-Column Layout
Simple 2 column CSS layout

3-Column, Equal-Height Layout

Petr Stanicek of pixy.cz demonstrates a cross-browser 3-column layout, again using float:

“No tables, no absolute positioning (no positioning at all), no hacks(!), same height of all columns. The left and right columns have fixed width (150px), the middle one is elastic.”

3-Column Layout
3-Column Layout with CSS

Floated Image with Caption

Similar to what we discussed earlier under “Float in Practice”, Max Design describes how to float an image with a caption, allowing text to wrap around it naturally.

Floated Image with Caption
Floating an Image and Caption

Horizontal Navigation with Unordered Lists

The float property is a key ingredient in coding sprite-based horizontal navigation bars. Chris Spooner of Line25 describes how to create a Menu of Awesomeness, in which the <li> elements that hold the navigation buttons are floated left:

Menu of Awesomeness
How to Create a CSS Menu Using Image Sprites

To demonstrate the importance of the float property in this example, here is a screen shot of the same image after using firebug to remove the float: left:

Menu of Awesomeness without Float

Grid-Based Photo Galleries

A simple use for the float property is to left-float a series of photos contained in an unordered list, which gets the same result as what you would see in a table-based layout.

Foremost Canada

Foremost Canada’s product page (above) displays their products in grid-based format, next to a left-column sidebar. The photos are displayed in an unordered list with the float property for all <li> elements set to float: left. This works better than a table-based grid, because the number of photos in the gallery can change and the layout would not be affected.

Paragon Furniture

Paragon Furniture’s futons page (above) is another example of a product page using an unordered list with floated list items.

iStockphoto

iStockphoto’s search results page (above) is a similarly-structured grid of photos, but this time the photos are contained in left-floated <div> elements, instead of <li> elements.

Aligning an <input> Field with a Button

Default styling on form elements across different browsers can be a pain to deal with. Often times, in a single-field form like a search form, it is necessary to place the <input> element next to the submit button. Here is a simple search form, with an image used for the submit button:

In every browser, the result is the same: The button appears slightly higher than the input field. Changing margins and padding does nothing. The simple way to fix this is to float the input field left, and add a small right margin. Here is the result:

Conclusion

As was mentioned at the outset, without the CSS float property, table-less layouts would be, at worst, impossible, and, at best, unmaintainable. Floats will continue to be prominent in CSS layouts, even as CSS3 begins to gain prominence — even though there have been a few discussions about layouts without the use of floats.

Hopefully this discussion has simplified some of the mysteries related to floats, and provided some practical solutions to a number of issues faced by CSS developers today.

Further Reading

About the Author

Louis Lazaris is a writer and freelance Web Developer based in Toronto, Canada. He has 9 years of experience in the web development industry and posts web design articles and tutorials on his blog, Impressive Webs. You can follow Louis on Twitter or contact him using this form.

Louis Lazaris for Smashing Magazine

Buddy Media Launches Integrated Facebook And Twitter Client For Brand Management

As more brands look to Facebook and Twitter for a social media presence, the need for applications that make this presence simple grows. Buddy Media, a startup that develops applications for social networks, is hoping to attract the attention of brand marketers with its new all-in-one social media management system.

Targeted towards advertisers and PR reps, the Buddy Media Platform helps create, manage and track social campaigns on Facebook and Twitter (the client will soon offer functionality for MySpace and other social networks). With regard to Facebook, the platform lets agencies create, manage and track Facebook Pages to drive and increase user and brand engagement. Users don’t need to have any prior HTML knowledge to create pages on Facebook and can create sleek and interactive pages fairly easily. And the pages themselves aren’t just advertisements; users can add a variety of apps to their pages such as polls, YouTube videos, coupons, slideshows and virtual gifts. The platform also lets you publish updates directly to a page’s wall. And the Buddy Media Platform lets agencies implement Facebook Connect on a brand’s site to tap into the social network’s graph.


IBM Upgrades Software To Manage Data Centers And Virtualization

IBM is enhancing its VMControl software for managing data centers to give enterprise users a single point of control across multiple types of IT systems and virtualization technologies. Combined with IBM’s Tivoli software, VMControl allows for combinations of physical and virtual IBM servers to be managed as a single entity, called “system pooling.”

IBM says this approach optimizes virtualization by helping corporate data centers simplify management functions and better share and prioritize use of critical resources such as CPU, memory and storage. Having centralized control over virtualized environments lets companies manage large amounts of information and processing resources and then parcel them out to applications when and where they’re needed.

And this efficiency also brings with it lower capital, operational and energy costs for businesses. IBM also claims that the new and improved VMControl will help with the deployment of cloud computing applications. To compliment VMControl, there’s a new version of Tivoli Provisioning Manager that is being released that provides enhanced automation of the manual tasks of provisioning and configuring servers, operating systems, middleware, software applications, storage and network devices.

The combination of Tivoli and VMControl allows for speedier deployments, gives users the ability to downsize management tools into an efficient platform, and provides for additional monitoring and management features. IBM’s vice president of technical sales for systems and technology group, David Gelardi, tells us that the upgrade of these software represents the company’s larger strategy of investment on systems software for the enterprise vs. hardware. In fact, IBM’s recent strong earnings reflects this shift in focus.

Crunch Network: CrunchGear drool over the sexiest new gadgets and hardware.


Back to Mono

abbeyI went to a birthday party this weekend where I ran into a Facebook guy, a smart guy who asked me to go off the record. In fact, the whole party was supposed to be off the record. So I ignored the off the record part by insisting that I already knew the thing I was being told, and then I told him on the record what I thought was about to happen for Facebook. This being my usual m.o. which is to insist on not being NDAed except for things I don’t really want to talk about anyway, like the next version of Office.

That way, I can just make up what I want to have happen, never breaking any confidence and yet at the same time painting as plausible picture of assumed reality that it is hard to deny or in fact slow down. So here’s what I told the Facebook guy: the company has at most 3 months window to absorb FriendFeed and open the Everyone News Feed, and if that’s true (again, making all this up) then the messaging about how that’s going to work must begin immediately, like in two weeks. Then I went home and saw MG Siegler’s post and Scoble’s remake of Frenzy on FriendFeed.

OK, so I was off by two weeks. The noise about the death of FriendFeed is already off the charts, and the proof is in the lack of rejoinder from the FriendFeed team. As in: of course FriendFeed is not dead, and here’s what we’re going to do to remake Facebook in the next few weeks. Actually, that is indeed the message from Twitter, what with Lists and ReTweets and the return of Track just as soon as, well, sometime next year or so. No need for FriendFeed real soon now, because these Lists will soon be carved up and meshed together into an authority stream by the 3rd party developers.

Siegler nails the one provable negative about FriendFeed Facebook edition which is the lack of any innovation moving forward. The one thing the FriendFeeders didn’t get in under the wire before the money arrived was stream splicing, the ability to mesh together lists into an authority stream. Is that coming soon from Twitter either? Nope. So the antidote to FriendFeed stasis is Twitter right up until stream splicing is enabled… by who? As of right now, that would be via the FriendFeed APIs. If Siegler/Scobler are right, the danger of doing that is iterating on a dead API.

Here’s where the FriendFeed is dead rumor falls apart. OK, you’re Facebook and you’ve just spent $50 million or actually $15 million plus NetWhuffie stock. Now we sell the deal as a talent buy, which of course it is because the talent built the damn thing. We put Brett Taylor in charge of the platform (API) and Paul Buchheit in charge of something else he hasn’t said yet. So Taylor can still deliver stream splicing, just not in the FriendFeed context. Buchheit, the Gmail guy, now what do we do with him….

Remember, where were the FriendFeed guys when the clock was stopped. They were streamlining not just the API but the architecture of what used to be rooms and what was now groups. Subsumed into that construct was the wonderful Imaginary Friend notion, another way of saying how do we capture individual streams and normalize personal and group communications. Meanwhile, RSS is dying and with it readers of same, and we begin to see seedlings like Threadsy and Brizzly popping up to address the vacuum. Can we assume the Gmail guy might be in a good position to noodle down on this, particularly given the Google Wave fork under way across town?

Obligatory Beatle analogy: I’ve spent the last few weeks partying on the Beatles Mono Mixes, in particular the period that began with Rubber Soul, followed by Revolver, and then jumped ahead to the White Album and its companion Part II, also known as Abbey Road. In just two years, the group transformed themselves from lovable moptops into four individuals who wrote music to avoid board meetings with accountants (Something) and seers who mixed Tibetan chants with backwards tape loops (Tomorrow Never Knows.) At the time it seemed like a lifetime, but in mono as they blended this stuff together it takes on a sense of purpose and inevitability that belies the official storyline.

In effect, with Abbey Road they tied up the loose ends of the White Album’s API and architecture, injected the realtime nature of Revolver and the betrayal of Norwegian Wood, and sold the company to EMI on the promise of new records from a group that had already broken up. Listening to the mixes and reveling in the deconstruction of Beatles RockBand, you can see how intricate their alchemy became during those brief two years, and how valuable it would become for the ages. As David Crosby said recently of a CSN project to do cover versions of favorites, when it came to the Beatles, they’d work up one or another from memory and then give up after listening to the original.

This then is what Facebook bought, or rather invested in: the best work and that yet to come from this group of engineers, strategists, and explorers of realtime. It’s easy to forget how completely wrongheaded it was to attack the realtime experience, how to this day Wave is reviled as an unbridled solution to a problem that doesn’t exist. What are people afraid of to fuel this alleged stampede for the exits, particularly given that there is no credible replacement for many of its most addictive features? The very hysteria of the charge, a cry for no one, a love that should have lasted years.

More likely is that we’ll see a healthy battle for the legacy of FriendFeed between Facebook, Twitter, and Google. First will be the conversational flow, still a pathetic hack in Twitter, possible in Facebook only with a fast (three month) Everyone newstream rollout with 2 way Twitter/Everyone stream sync. Never mind the Web site; this has to come from the API, complete with granular tools for filtering the flow by data type and guaranteed RSS-hubbed delivery. Facebook must invest quickly in stream splicing to make filtering useful, and Twitter Lists give them the room to build it while no such tools exist on the Twitter side.

Second, if there is a second after that first takedown, is splicing email and personal FB data into the stream, through a combination of intelligent push into email for filtered stream data for mobile clients and harvesting of the Twitter follow and List social graph as an open directory outside Twitter’s control. Google has a play here with Gmail, but they need to drive here with Wave taking a backup role rather than the other way around. Buchheit is the key here, regardless of who does it, and Twitter’s lock on direct messages needs to be factored in in the Facebook sync planning, something that didn’t survive the cut in the FriendFeed lockdown.

Yoko didn’t break up the Beatles. The Beatles did. FriendFeed isn’t dead. It’s just getting started. And the walrus is Paul.

Crunch Network: TechCrunch obsessively profiling and reviewing new Internet products and companies


Showcase of Web Design in Russia


  

Showcase of Web Design in Russia (via @smashingmag) –

This article is the first of our new series “Global Web Design“. Over the next months we’ll be covering various continents, featuring web developers and web designs from different countries of the world and taking a close look of what is happening in the web design scene worldwide. We start today with an article about web design in Russia. We will continue with Ireland (Lee Munroe) and Brazil (Fabio Sasso) upcoming weeks. Hence, you may want to subscribe to our RSS feed Subscribe to our RSS-feed for more similar posts.

If you’d like to prepare an article for this series, please contact us and we’ll discuss the details.

Web Design in Russia

The land mass that is one-sixth of the Earth is always surprising. As the founder of one of design-related magazines in Russia (Designcollector.ru), I am happy to present the hidden force that is Russia. I won’t dwell on the classic stereotypes but will rather look at the creativity flowing through.

The era of professional and commercial online design started in Russia about a decade ago. We’re now seeing an increase in professional design and development. I won’t concentrate much on the history of Web design in Russia; that has been happening for ages. Like everywhere in the world, Web design came to Russia as a modern way to present any kind of information to an audience online. So, principles such as simplicity, accessibility and eye-catching design have been cultivated for several years.

Russian Web Design
Russian Web Design: Mospromstroy

Web development as a profession was relegated to the elite for years until geek heads and artists took it over. For a few years there was a boom of home pages and tiny corporate websites that were built with any regard for the end user. This trend ended thankfully, in large part due to the highly scaled websites that came out the original and still unique studio founded by Artemy Lebedev, which has produced more than 760 websites.

Today, the professional scene of web design consists of thousands of freelancers, studios, agencies and large media companies, along with offshore and outsourcing businesses. I won’t do a “Top 20″ this or that rating, but I will try to touch on the most established parts of Russian Web design, including agencies, freelancers, portals and so on.

State Of Things

Measuring a Web design market by the products of its agencies is not quite fair. Russian agencies have also proven their management technologies and quality-control processes. As someone once said, “The best way to understand a new city is to go to the central market.” And in Russia, Web design is still concentrated in the hands of freelancers and small studios. To get a better picture of freelancing in Russia and the bordering Ukraine, I have asked two freelancers to talk about their work.

I spoke with Gennady V. Osypenko, who is the rather famous Kiev-based designer working with companies from Eastern Europe (he is also known as Genn), and Dmitry Sulliwan, a Russian freelance Web designer.

Russian Web Design - Alexarts
Alexarts

Q: Could you please describe the life of a freelancer, developer and designer?

Gennady Osypenko: You do work, get inspiration and then do more work: that is freelancing. For sure, you meet clients and collaborate a lot. Compared with an office job, you travel around the city a lot, wasting your time on that. Freelance designers become the center of the project, and even oversees developers, acting as a kind of art director. Designers in offices just do the routine, yelling at account managers and listening to art directors. Hence, I am a freelancer, and I do not remain at one job for long.

Dmitry Sulliwan: The work of freelancer is very interesting. You get new experiences from working with different companies on diverse projects, and some of those experiences may not even be related to design. Different cultural and professional events make the life of the freelancer easier and allow him to share his experience and understand the value of his job. A freelancer’s life is good because he manages himself, which allows you to get more pleasure from your work. But that does not mean you work any less. From my perspective, freelancers work one-and-a-half times more than permanent contractors. The only barrier to getting the best results is laziness. Hence, there are not a whole lot of true professionals in the freelancing space.

Russian Web Design
Profsouz.tv

Q: Are there any regular meetings or events?

Genn: We hold festivals and different advertisement exhibitions. The only exhibition I have visited abroad was the designers market in Budapest (Sziget). Web-oriented conferences were very popular last year. Not all of them were about design, but some were useful and interesting anyway. I’ve done things like short master classes at some of them, and I plan to do that in future; I’ve been invited at the end of October to say something about being a freelance designer. I like talking about what I do to people who are eager to listen.

Dmitry: There is a good set of conferences in Russia. I can name the last ones: DesignAct in Moscow, and the 404 Web Designers Conference in Samara. Many Russians also visit foreign events in Europe and around the world.

Russian Web Design
Erarta.com

Q: Where do you get inspiration from?

Genn: I get inspiration from everything around me. That is a typical answer, but any object could lead my imagination to the unique and perfect idea. It is like in the House M.D. series on TV, when House is stuck on a diagnosis and suddenly gets inspiration to solve it. I got inspiration for my last project from the Wipeout Pulse game on PSP. I played it for hours and eventually got an idea for a website architecture.

Dmitry: Design books, magazines and Internet resources. Nowadays, we have a nice bunch of local design blogs on which they share their experiences and thoughts.

Russian Web Design
Solisty Moskvy

Q: What’s the situation with the market? How much do designers earn?

Genn: I don’t know the situation in the market, but I know for sure that a lot of people want to make a website or establish an online identity. As a freelance designer or creative process supervisor, I prefer more interesting and specific projects, ones that don’t reflect the whole market situation.

Dmitry: True designers, like any other good specialists, cost a good amount of money. The question is whether there are enough positions. There are many agencies and studios, and so fewer of them would be able to provide a good experience or take on interesting projects.

Russian Web Design
Stilyagi

Q: Is being a Web designer considered high-level, sophisticated work?

Genn: When you see an ad on every (literally every) open surface saying, “Site for $100,” how could you regard Web designers or anyone connected with website creation to be high level or sophisticated? Luckily for us, customers who really need complex, functional websites understand that they have to work with professionals. Just because you can illustrate something does not mean you are a Web designer. If you can organize the craziest information in a usable and readable way, and then decorate it, then you are a Web designer. So, we could say that being a Web designer is both high level and not high level at the same time. Actually a lot of Web designers also create perfect identities and motions, so I’d better call them designers, even though we create beautiful websites.

Dmitry: Unfortunately, not always. Mostly because people still confuse Web designers with system administrators [Interviewer note: That’s true, because most Russian Web designers can do Shell and Apache tasks, hosting stuff and email management and develop a reputation for mixing them together. When a Russian customer orders a website, they want it 100% with domains, parking, hosting, support. This is the main issue with the profession.] But in most IT and related companies, the position of Web designer (and developer, UI designer and visual designer) is valued and respected because of the high-level skills and usually complex work involved. These days, the Web design profession has cut out its own place in the market and is recognized for it.

Russian Web Design
Nel’ma

Q: There are rumours that many designers in Russia still use tables, and that most designs are 100% fluid, regardless of screen resolution?

Genn: Are you referring to HTML coders and Web developers? As far as I know, the trend is to use semantic code and follow accessibility and other compliance standards. One Ukrainian HTML coder even coded his own blog in HTML 5 and met all standards requirements, even if only for a few browsers. So they’re all progressive and forward-looking. As for 100% fluid width, there was an assumption that all websites had to be 100% wide and fill the whole browser window. As I explain in my training and master classes, the width of websites should fit the requirements. As I can tell, incorrect use of fluid widths is declining and used in only specific instances.

Dmitry: Those are only rumors. Professional Web developers follow standards and adopt the latest trends in coding. Fluid width is a distinction of Russian Web development and a common standard. Good fluid layouts are usable, dynamic and look good at different resolutions. And good Web developers can avoid common issues, such as those related to floating and typography, by using fluid width.

Russian Web Design
Imja Rossii

Q: What about typography and Web standards?

Genn: It’s a common joke that all designers hate Cyrillic letters. The letters really look odd if you want to create something fancy, but we adapt to it. I like the story of one logo made in the US for some candy trademark. The designer decided to add a feature to the logo and name, so he made ö out of o. Years later, he found out that Scandinavian designers hate umlauts, but he used them as decoration and it worked well. We have to abstract and not see hieroglyphs in letters but rather understand their nature and use them in the best way.

Dmitry: Cyrillic type has far-reaching issues. The main illusion is that Cyrillic type is not better than Latin. That issue is outdated. We have great Russian typography designers who do amazing type that fits certain designs well and win awards. Nowadays, even Web editorials order custom typography for their titles. Typography on the Web has become user-friendly and readable.

Russian Web Design
vtransport.ru

Q: Are there any issues unique to Russian Web design?

Genn: Yeah, there might be some difference between design in Ukraine and in Russia. As long as designers are not regarded as high-level specialists in the community, then customers will continue to believe that they are perfect designers, too. So, they will always want to move this a bit, repaint that a touch, and change the whole layout five minutes before the deadline. With any project, I try to be as specific as possible in explaining almost every pixel (or dot, if we are talking about print) so that the customer can see why the product is the way it is. It’s surprising, but it works more than half the time. The other problem is that no one wants to part with their money, so you could end up waiting some time before getting money for a project that is done, implemented and working.

Dmitry: Russian customers still do not understand that designers do not blindly follow their ideas but are rather themselves highly motivated workers who want to produce the best results for the given job. Whoever the customer, whether foreign or local, every time it is a minor war. Designer-client relations are not stable in Russia and are not even regulated. We have no professional unions and, of course, no support from the government. Newcomers to freelancing are often not aware that some customers are unfair, but they find out when they do not get paid.

Russian Web Design
Zemlja

Q: Do you see any remarkable differences between Russian designs and ones in the US and Western Europe?

Genn: I am happy that distinguishing between designs in Russia and those on the worldwide scene is becoming harder and harder. The designs here are unique in their own way, but then the work of every good designer is unique.

Dmitry: As mentioned, the main difference is fluid layouts. Good Russian websites have a clear and semantic structure, and they don’t follow strict grids, which make the layouts dynamic and fresh. They use modern Web technologies, combining unobtrusive JavaScript with clean xHTML.

Russian Web Design - UK Style Website. © Losinsky Vladimir
Russian UK Style

Q: How does all of this work?

Genn: I don’t know. I didn’t like physics in university much. When I ask myself that question, I start reading British science fiction. It doesn’t answer the question, but it has a lot of funny jokes.

Dmitry: Briefly, the situation is good. Russian Web designers are always looking forward and no longer do clumsy, heavy Flash-based websites. We have started to concentrate on usability and accessibility and become more integrated with the rest of the professional world.

DC: Russian Web designers are even starting to organize professional unions (like WSG Russia) and visit local conferences, such as 404, RIT, Drupal Camp and many others.

Showcase Of Creative Agencies

Let’s turn now from the freelancing life in Russia to the FMCG and promotional sectors, where Russian creative agencies live. They do their best to impress consumers with their products and corporate websites. The results are meant to impress visitors and make them spread the news like a virus. Here are some agencies that have gained public attention as well as prestigious awards, such as the FWA, ADCR and even the Cyber Lions shortlist.

Design Depot

Design Depot

OrangeLabel

Russian Web Design - OrangeLabel

Ony.ru

Russian Web Design

Deluxe Interactive

Russian Web Design

FIRMA

FIRMA

BrandStudio

BrandStudio

Red Keds

Red Keds

Nile Studio

Nile Studio

Coalla Revolving

Coalla Revolving

Instinct

Instinct

ONY!

ONY!

Transformer Studio

Transformer Studio

Showcase Of Web Agencies

These guys create great websites and form the foundation of the Russian Web design scene. They’re not necessarily the best; they just do their work better than most.

As mentioned, ArtLebedev Studio is still the largest studio in the Russian market, based on portfolio size. To date, it has done more than 760 websites, 725 graphic designs, 113 product designs, 44 interfaces, 32 environmental designs and 30 presentations. This record is still unbeaten, and its brand is something of a guarantee on the Russian Web design scene. Also worthy of mention is its Bronze Cannes Cyber Lion award (the only studio in Russia to win it), and its internship program, which helps international students realize their ideas.

ArtLebedev Studio work
ArtLebedev Studio’s work

The next largest studio in Russia is DEFA Interaktiv. It was founded by Dmitry Kozlov eight years ago and has made a success of its customers’ businesses with its highly professional skills.

DEFA Interaktiv work
DEFA Interaktiv’s work

The quite new and fast-moving creative agency Deluxe Interactive has already been mentioned at the Favorite Web Awards (FWA) and continues to produce great promotional Flash websites.

Deluxe Interactive work
Deluxe Interactive’s work

Futurico

Futurico

Turbomilk

Turbomilk

Creative People

Creative People

Proekt

Proekt

Pixel

Russian Web Design - Pixel

Oblako

Oblako

Showcase Of Freelancers

Freelancers are the hidden force of Russian creativity. As we mentioned, anyone who can successfully freelance in Russia could handle art direction at any agency with no problem. To grow as professionals, freelancers need a decent place to showcase their work and share insight. Such places include Deforum.ru, free-lance.ru, illustrators.ru, behance.net, revision.ru and russiancreators.ru. Quite a few magazines and blogs profile the best practitioners: kak.ru, Designet.ru, Designlenta.com, Revision.ru, Creativenews.ru, Peopleofdesign.ru, Omami.ru, ru.designeast.eu, designwar.net, djournal.com.ua and Designcollector Network

Valery Fironov

Valery Fironov

Stepan Burlakov

Stepan Burlakov

Illya Mikhailov

Illya Mikhailov

Alexander Kizyachenko

Alexander Kizyachenko

Andrey Gorokhov

Andrey Gorokhov

Stas Polyakov

Stas Polyakov

Andrew Tron

Andrew Tron

Denis Drachyov

Denis Drachyov

Dmitry Sulliwan

Description of the image

Eugeny Muravyev

Eugeny Muravyev

Nazir Khasavov

Nazir Khasavov

Alexandr Martinov

Alexandr Martinov

Alex Kuh

Alex Kuh

Anton Ponomarev

Anton Ponomarev

Dmitry Evstropov

Dmitry Evstropov

Bogdan Sviridov

Bogdan Sviridov

Yuriy Degtyar

Yuriy Degtyar

Web Developers Online

The Web developer scene in Russia is well represented on blogs, too. We’ll cherry-pick the best ones here among the dozens that exist. On them, Web developers and intelligent commentators share their thoughts on various topics and host friendly communities. Vadim Makeev and Constantine Osnos chose these ones for us.

Vadim Makeev

Description of the image

Alexander Shabunevich

Alexander Shabunevich

Nikita Vakorin

Nikita Vakorin

Gennady Osipenko

Gennady Osipenko

Din Neville

Din Neville

The particular nature of Russian communication has produced these huge community platforms, where any topic can rise or fall according to the “vox populi.” Everything IT-related, from Web 2.0 to Web development, is discussed on Habrahabr. The best place to talk about Russian Web standards is Webmascon magazine. And Deforum is the place to share your creative work and welcome a crowd of decent, and sometimes obscene, critics.

Also worthy of mention is Injun, a Flash and ColdFusion development blog, as well as Inforedesign and SEOBaby, for their useful content. Nbsp and Internet Things are great for their professional content related to Web design, development and promotion.

Creative Formations

To round out our picture of Russian creativity, we’ll mention some online resources related to other design industries. For example, advertising: Adme and Advertka. For fashion: LookAtMe and Fashion Communication. And the 3-D and CG arts: Render Ru and CGTalk.

Russian creativity bears fruit every day, and the best way to stay on top of it is to read our Designcollector Network and stay connected to Russia’s magic networks.

Showcase of Russian Web Designs

ValdiGroup

Russian Web Design - ValdiGroup

Pestovo Golf and Yacht Club

Russian Web Design - Pestovo Golf and Yacht Club

Yaltinsky Mjasozavod

Russian Web Design

Adv.ru

Russian Web Design

73dpi

Russian Web Design - 73dpi

DEFA Interaktiv

Russian Web Design - DEFA Interaktiv

Worktrek.ru

Russian Web Design

JustParty

Russian Web Design - JustParty

Russian Web Design

Russian Web Design

Russian Web Design

Gamer.ru

Russian Web Design - Gamer.ru

F5.ru

Russian Web Design - F5.ru

Turbomilk

Russian Web Design

Centrostroy

Russian Web Design

Red.mts.ru

Russian Web Design

Pink.

Russian Web Design - Pink.

SOFT BAG

Russian Web Design - SOFT BAG

Rosinka International Group.

Russian Web Design - Rosinka International Group.

Armenianchurch.ru

Russian Web Design

Industry-daily.ru.

Russian Web Design

ElCheVive.

Russian Web Design - ElCheVive.

Plohiestihi

Russian Web Design

Stella Artois

Russian Web Design - Stella Artois.

Maminy Kolybelnye

Russian Web Design

RBC.ru

Russian Web Design

Tish

Russian Web Design - ...:::Tish:::...

© Creative People

Russian Web Design - © Creative People

Stanley

Russian Web Design - Stanley.

Panorama Parket

Russian Web Design

Tomichechek

Russian Web Design - © Tomichechek

Red Apple 18

Russian Web Design - Red Apple 18

Dymov1.ru

Russian Web Design

Stardust shop

Russian Web Design - Stardust shop.

mobilemarafon

Russian Web Design - mobilemarafon.

Bork.ru

Russian Web Design - Ð’ork.ru.

MTV 2008

Russian Web Design - MTV 2008.

Elementshop

Russian Web Design

Semejnoe Puteshestvie

Russian Web Design

Would you like to see more similar posts on SM?

Hopefully you’ll find this new format inspirational and interesting. What do you think? Please let us know and comment on this article! Your feedback is very valuable for us and it helps us to meet your expectations. Thank you.


Would you like to see more similar posts on SM in the future?(surveys)

Stay Tuned and Get in Touch!

This article is the first of our new series “Global Web Design“. Over the next months we’ll be covering various continents, featuring web developers and web designs from different countries of the world and taking a close look of what is happening in the web design scene worldwide. We start today with an article about web design in Russia. We will continue with Ireland (Lee Munroe) and Brazil (Fabio Sasso) upcoming weeks. Hence, you may want to subscribe to our RSS feed Subscribe to our RSS-feed for more similar posts.

If you’d like to prepare an article for this series, please contact us and we’ll discuss the details.

About the author

Arseny Vesnin is the founder and creative mind behind Designcollector.ru, a blog that showcases designs created by artists from Russia and other countries of the world.

(al)


© Arseny Vesnin for Smashing Magazine, 2009. |
Permalink |
67 comments |
Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine

Post tags: , ,

Nuxeo Releases ECM Product With OpenSocial Capabilities

Nuxeo-Open-Source-ECMNuxeo, an Enterprise Content Management company founded in 2000, announced today the release of their newest product, Nuxeo Document Management 5.3. This product comes replete with integration of OpenSocial initiatives, Windows Sharepoint Support services, improved search functions, and CMIS support.

Nuxeo’s newest release aims to please the demands of customers who need an all-inclusive solution to the management of digital content while simultaneously incorporating social business applications. The introduction of OpenSocial support to Nuxeo DM 5.3 allows users to create gadgets to use within enterprise applications. Nuxeo DM 5.3 can be used as an OpenSocial container, allowing for enterprise mashups with products such as Atlassian’s Jira, as well as being a publisher of gadgets.

Another new feature to Nuxeo DM 5.3 is deeper integration with Microsoft Sharepoint for document collaboration. Users can see information regarding their content via the Document Panel in Microsoft Office and files can be opened and saved directly through Nuxeo DM. Additionally, integration with Internet Explorer allows users to access content from Nuxeo while performing familiar browsing operations.

Image 8

Nuxeo DM 5.3 has added support for draft 0.62 of the CMIS initiative. The inclusion of this, via an add-on component, will ensure interoperability for users who are supporting multiple content repositories.

Search functionality has also been improved in this version. Users are now able to search granularly for metadata and can search for information in multiple fields.

Nuxeo faces stiff competition from the likes of IBM, EMC, OpenText, and Oracle; all of whom are proponents of the CMIS platform. However, the price point of Nuxeo, through developer and production support subscriptions (Nuxeo DM is freely available under the standard LGPL), is lower than many of their bigger competitors.

Screencasts of the product can be found here.

Crunch Network: CrunchBase the free database of technology companies, people, and investors


IBM Q3 Profits Rise 14 Percent

IBM is reporting a 14 percent growth in year over year net income, posting a third-quarter profit of $3.2 billion, or $2.40 a share, on revenue of $23.6 billion. IBM has been shifting its focus towards software and services from hardware and it appears to be paying off. Chairman, president and CEO, Samuel Palmisano said in a statement that IBM’s “strategic shift to higher-value businesses” contributed to the growth and the company saw “improved revenue trends in business and share gains in software and hardware.”

IBM expects increased full-year 2009 earnings of at least $9.85 per share compared with its previous expectation of at least $9.70 per share. IBM CFO Mark Loughridge said in the earnings call that revenue was boosted by increased sales of software and services. He added that IBM gained share in software areas, specifically mentioning competitor Oracle.


The Ultimate Round-Up Of T-Shirt Design Tutorials

Among all of the graphic designers in the world, many of them have probably had a go at designing some cool artwork for t-shirts. The t-shirt, after all, is one of the world’s most purchased products, and a lot of us wouldn’t know what to do without them! If you have yet to design for apparel goods, today is your lucky day! Below, we present over 20 useful t-shirt graphic tutorials written by fellow designers, followed by a selection of great resources (such as vector apparel mock-up templates), an inspirational showcase to get your brain thinking and some great websites where you can submit your new t-shirt graphics. You may be interested in the following related posts:

T-Shirt Graphic Tutorials

Create a Balanced T-Shirt Graphic

  • Work with vector image tools to trace stock photos.
  • Learn how to make great compositions.

Balanced T-Shirt Graphic How to Design a T-Shirt on a Budget and a Tight Deadline

  • Use existing vector packs to produce new graphics.
  • Work with limited color schemes.

Designing on a budget and tight deadline T-Shirt Design in Photoshop

  • Work with the Saturation Settings to manipulate photos.
  • Use the Circular Marquee Tool to produce custom shapes.

T-Shirt Design in Photoshop Super-Slick Screen-Printing Separations with Illustrator

  • Set up documents and bleeds ready for screen printing.
  • Use Calligraphic Brushes to trace photographs.
  • Separate colors to be ready for screen printing.

Screen Printing Separations How to Create Photorealistic T-Shirt Mock-Ups

  • Use apparel templates to produce realistic digital mock-ups.
  • Use layer masks to hide unwanted areas of a graphic.

Photorealistic T-Shirt Mock-Ups Screen Printing Effects

  • Simulate silk screen imperfections in Photoshop.
  • Learn how to use alpha channels.

Screen Printing Effects Create a Custom T-Shirt Stencil Design

  • Create stencils for your t-shirt artwork.
  • Use craft knifes and spray paint to produce home-made t-shirts.

Custom T-Shirt Stencil Design Screen Printing Tricks

  • Get your hands dirty and produce home-made screen-printed t-shirts.
  • Use various objects from around the home to save money on one-off production tees.

Screen Printing Tricks Separating Colors for Screen Printing in Photoshop

  • Use the Magic Wand Tool to select individual colors.
  • Use registration marks to help line up artwork when screen printing.

Separating Colors for Screen-Printing How to Win at Design by Humans

  • Learn tips and tricks for submitting your artwork to Design by Humans.
  • Use Pantone Color books to get your colors correct.

How to win at Design by Humans How to Prepare Artwork for Screen Printing in Illustrator

  • Use various Pathfinder Tools to separate your colors.
  • Use the Magic Wand Tool to select individual colors.

Prepare Artwork for Screen-Printing Designing Ultra SceneXCore Apparel

  • Manipulate stock photos using various tools.
  • Use existing vector images to spice up your artwork.

Ultra SceneXCore Apparel Create a Three-Color Illustration for Screen-Printing

  • Separate colors in Photoshop to be ready for screen printing.
  • Learn about trapping to avoid slight alignment on press.

Three-Color Illustration for Screen-Printing Easy Color Separations for Screen-Printing in Photoshop

  • Learn the process of screen printing and how it all works.
  • Learn how to separate your artwork colors in Photoshop.

Color Separations for Screen-Printing How to Create Awesome T-Shirt Mock-Ups like Jimiyo

  • Use the Transform Tool to correctly position your artwork.
  • Use the highlight and shadow levels to give your digital mock-up a realistic look.

Awesome T-Shirt Mock-Ups DIY Vintage T-Shirts

  • Combine Photoshop and Illustrator to produce stunning artwork.
  • Use an imported sketch as a guideline.

DIY Vintage T-Shirts Rapid-Fire Illustration Tutorial

  • Use the Live Trace Tool to quickly and effectively trace traditional ink drawings.
  • Use the Pen Tool to create custom shapes.

Rapid-Fire Illustration How to Create a T-Shirt from Scratch

  • Use various Photoshop Tools to create custom shapes.
  • Use the Polygonal Lasso Tool to delete unwanted areas of artwork.

T-Shirt from Scratch Create a Complete Apparel Tech Pack

  • Learn how to prepare your files correctly.
  • Learn how to separate colors correctly.

Complete Apparel Tech Pack CMYK Process Printing for the Emerging T-Shirt Designer

  • Learn how to mix existing resources to create a good composition.
  • Work with unusual color schemes to produce eye-catching artwork.

CMYK Process Printing

Digital T-Shirt Mock-Up Resources

After giving a few of the above tutorials the once over, you should have enough knowledge to begin making your own separated t-shirt artwork. Below are several links we have collected to help you present your work in the most stylish way possible. GoMedia Ultimate Apparel Vector Collection GoMedia Ultimate Apparel Vector Collection Freebie T-Shirt Template T-Shirt Templates: Free and Paid T-Shirt Templates: Free and Paid Free Blank Vector Clothing Free Blank Vector Clothing Huge Collection of T-Shirt Design Mock-Up Templates Collection of T-Shirt Mock-Up Templates VIP Mock-Up Templates VIP Mock-Up Templates

T-Shirt Inspiration

Now you’ve got everything you need… except maybe for some ideas! Take a look at these great inspirational posts to help you get your thinking cap on!

Where To Sell And Submit Your Artwork

Below we have collected various online stores and open-ended competitions that invite you to submit your t-shirt designs, with the chance of getting them printed and taking home some well-earned cash!

  • Design by Humans An ongoing design contest and community where artists and t-shirt lovers can create, buy and talk about everything related to art and t-shirts.
  • Threadless Threadless is a community-based tee-shirt company with an ongoing open call for design submissions.
  • Teetonic Teetonic is about passion for design. It wants to create the best t-shirts and is always open for submissions.
  • Allmightys Submit designs to win tees, commisions, fame, friends and more!
  • Oddica Submit your artwork for a chance to earn 41% of every sale made.
  • Zazzle Make money online by selling your designs on hundreds of retail-quality products! It’s free and easy.
  • Cafepress Design, make and sell your t-shirts.
  • La Fraise This is pretty much the French version of Design by Humans.
  • Spreadshirt Create your own t-shirt shop for free, and fill it with your very own designs.
  • BigCartel BigCartel is a simple shopping cart for artists. Create an account and start selling!

— Smashing Magazine