Have you ever heard the phrase “Content is King”? Being a Web developer, and therefore having a job that’s often linked to content creation, it’s likely you have. It’s a fairly overused but true statement about what draws visitors to a site.
From a Web developer’s perspective, however, some may argue that speed is king. More and more, I’m starting to favour that stance. In recent years many experienced front-end engineers have offered their suggestions on how we can improve the user experience by means of some performance bestpractices.
Unfortunately, CSS seems to get somewhat overlooked in this area while many developers (for good reason) focus largely on JavaScript performance and other areas.
In this post, I’ll deal with this often overlooked area by introducing you to the concept of object oriented CSS and how it can help improve both the performance and maintainability of your Web pages.
The Principles Of OOCSS
As with any object-based coding method, the purpose of OOCSS is to encourage code reuse and, ultimately, faster and more efficient stylesheets that are easier to add to and maintain.
Almost every element on a styled Web page has different visual features (i.e. “skins”) that are repeated in different contexts. Think of a website’s branding — the colors, subtle uses of gradients, or visible borders. On the other hand, other generally invisible features (i.e. “structure”) are likewise repeated.
When these different features are abstracted into class-based modules, they become reusable and can be applied to any element and have the same basic result. Let’s compare some before and after code so you can see what I’m talking about.
Before applying OOCSS principles, you might have CSS that looks like this:
The three elements above have styles that are unique to each, and they’re applied with the non-reusable ID selector to define the styles. But they also have a number of styles in common. The common styles might exist for branding purposes or consistency of design.
With a little bit of planning and forethought, we can abstract the common styles so the CSS would end up instead like this:
Now all the elements are using classes, the common styles are combined into a reusable “skin” and nothing is unnecessarily repeated. We just need to apply the “skin” class to all the elements and the result will be the same as what the first example would produce, except with less code and a possiblity for further reuse.
Separation of Containers and Content
The second principle described on the OOCSS GitHub wiki page is the separation of containers from their content. To illustrate why this is important, take the following CSS:
These styles will apply to any third-level headings that are children of the #sidebar element. But what if we want to apply the exact same styles to third-level headings that appear in the footer, with the exception of a different font size and a modified text shadow?
Now we’re unnecessarily duplicating styles, and might not realize it (or simply don’t care). With OOCSS, we’re encouraged to give more forethought to what is common among different elements, then separate those common features into modules, or objects, that can be reused anywhere.
The styles that are declared using the descendant selector in those above examples are not reusable, because they are dependent on a particular container (in this case either the sidebar or the footer).
When we use OOCSS’s class-based module building, we ensure that our styles are not dependent on any containing element. This means they can then be reused anywhere in the document, regardless of structural context.
A Real-World Example
To further illustrate how OOCSS can be used, I’ll use something similar to what I did on my site’s recent redesign. After coding the inner header element on my site, I realized that the basic structural styles for the inside of the header could be reused on other elements on the page.
So here’s something along the lines of what I had when I started styling my header:
A few of the styles listed here are unique to the .header-inside element. But the rest can form a module that I can reuse. So I can abstract the structural styles into their own reusable class. Here’s the result:
The styles belonging to the .globalwidth class cover the following:
A fixed width
Centering using margin: auto
Relative positioning to create a positioning context for child elements
Left and right padding of 20px
Overflow set to “hidden” for clearfixing
Now we’re free to use these styles on any elements that require these same characteristics by simply adding that class to the desired element — without writing a single extra line of CSS.
For my site, I reused these structural styles on the primary content element and the inner footer element. Depending on the design, these styles could also apply to a horizontal navigation element that might appear between the header and the content, or any other element that has a fixed-width and needs to be centered on the page.
After adding the “globalwidth” styles to these elements, the markup would look something like this:
Some may feel that this type of styles abstraction clutters the HTML and goes against the principle of separating markup from presentation.
But putting aside any debates about how this might affect the markup, no one can question that this abstraction has now made it easier to track down and modify the common styles that are used to structure these three elements.
The media object is a great example of the power of OOCSS because it can contain a media element of any size with content to its right. Although many of the styles that apply to the content inside of it — and even the size of the media element itself — could change, the media object itself has common base styles that help avoid needless repetition.
The Benefits Of OOCSS
I’ve already alluded to some of the benefits of OOCSS. Here I’ll expand on these.
Faster Websites
The performance benefits of OOCSS should be fairly clear. If you have fewer styles that are repeated in your CSS, then this will lead to smaller file sizes and thus faster downloading of those resources.
It’s true that markup will be more cluttered and thus create larger HTML files. But in many cases the amount of loss in markup performance will be greatly surpassed by the amount of gain in stylesheet performance.
Another concept to keep in mind is something that the OOCSS wiki refers to as performance freebies. This refers to the fact that every time you reuse something in your CSS, you’re essentially creating new styled elements with zero lines of CSS code. For large, high-traffic projects, these “freebies” could be a crucial performance gain.
Maintainable Stylesheets
With OOCSS, instead of a constantly growing stylesheet full of specificity wars, you’ll have an easy to maintain set of modules where the natural cascade plays an important role.
When making additions to an existing site, you won’t be adding new styles to the bottom of your stylesheet without regard for what came before. Instead you’ll be reusing existing styles and extending your styles based on existing rule sets.
With this type of forethought, it’s possible to create entire pages while coding very little CSS. Any existing CSS modules can serve as a basis for all new pages, and any new CSS will be minimal. In some cases you might even be able to create a new fully-styled page without coding a single line of CSS.
These maintainability benefits also extend to the robustness of your stylesheets. Because the styles are modular, pages built on OOCSS will be less likely to break when a new developer starts to use the stylesheet.
Points Worth Noting
OOCSS has created a great deal of discussion in the community, raising some controversies. Here I’ll try to dispel a couple of common misconceptions.
You Can Still Use IDs
If you decide to work exclusively in an OOCSS manner, then your styles will be based largely on CSS classes, and you won’t be styling elements using the ID selector.
Because of this, many have falsely claimed that OOCSS encourages dropping the use of IDs completely. But this is not true.
The rule to avoid IDs is, more specifically, don’t use IDs in selectors. So it’s perfectly acceptable to use OOCSS principles (and thus avoid styling using the ID selector) while using IDs in your HTML for JavaScript hooks and fragment identifiers.
Of course, you may have a situation where you already have an ID applied to an element that you know is unique to the page. So, you can save a few bytes by avoiding adding a class to that element and instead style it using an ID selector. But even in this instance, it’s much safer to rely on a class to ensure you don’t run into specificity problems in the future.
Dealing With Smaller Projects
For smaller sites and apps, you could certainly make the case that OOCSS would be overkill. So don’t take this article as an advocacy for OOCSS in all circumstances — it will vary depending on the project.
Nonetheless, I think it’s a good idea, at the very least, to start thinking in terms of OOCSS in all your projects. Once you get the hang of it, I’m sure you’ll find it much easier to get it working on bigger projects where the benefits would be more noticeable and relevant.
Some Guidelines For Implementation
Getting started working with OOCSS could take time. I’m still working on it, so I don’t claim to have all the answers and experience in this area.
But here are some things you might want to start doing to help you get into an OOCSS mode of thinking:
Avoid the descendent selector (i.e. don’t use .sidebar h3)
Avoid IDs as styling hooks
Avoid attaching classes to elements in your stylesheet (i.e. don’t do div.header or h1.title)
There will obviously be times when some of these rules will be broken, but overall, these are good habits to develop and will lead to stylesheets that are smaller and easier to maintain.
Follow Nicole Sullivan’s Work
If you want to continue learning about OOCSS, the most important person in the industry to keep up with is Nicole Sullivan.
In addition to posting articles regularly on OOCSS on her blog, Nicole has done a number of presentations with accompanying slideshows. Below are some that you might want to check out:
Many people fear the OOCSS ideology because it seems to go against many of the so-called “best practices” we’ve learned. But once the long-term benefits of using OOCSS are understood, I’m sure many developers will become converts.
Overall I think OOCSS has a bright future in CSS development, and it’s a concept that all developers should start incorporating into their projects — at least on some level — to help create Web pages that are faster, more efficient, and easier to maintain.
We spend a lot of time learning and thinking about the designs we see online, yet what we miss quite often are practical insights into the design process and workflow of our colleagues. This is why conferences are great for our industry. We meet people who think very much like we do and most probably struggle with similar problems; and perhaps they’ve found a solution which can inspire others. We learn how our colleagues work and what they have experienced; we can exchange our thoughts and ideas directly — something that we might struggle finding time for on Twitter or via email. Networking is great, and it’s powerful. And this is why every now and again we present an overview of upcoming conferences on Smashing Magazine.
In fact, it’s that time of year again when the Web design conference schedule really heats up. As we’ve always done in the past, here we present to you a chronological list of all the upcoming events and conferences that are of specific interest to Web designers and developers. We’ve also put together a Google Calendar as well as an Events iCal (.ics) file for you to use as a reference for your schedule. If you know of an event taking place between now and February, please add it to the comments. You can jump to a section using the links below:
Flash on the Beach
“Three days of design, code, inspiration and networking for digital designers, developers and artists.”
When: September 11 – 14 Where: Brighton, UK at the Brighton Dome
Breaking Development
“Breaking Development is coming to Nashville with an awesome lineup of mobile speakers and challenging topics. We’ll follow two days of incredible sessions with a day of workshops where you can roll up your sleeves and get elbow deep in the latest coding and design practices.”
When: September 12-14, 2011 Where: Nashville, TN, USA at the Gaylord Opryland
Future of Mobile
“The Future of Mobile (FOM) is a one day conference aimed at mobile designers, developers, and entrepreneurs. FOM brings together mobile visionaries to discuss cutting edge topics such as HTML5 for mobile design, UX for mobile interfaces, tips on how to make your mobile App successful and much more.”
When: September 16, 2011 Where: London, UK at the Mermaid Conference Centre
Google Developer Day
“Google Developer Day is a one-day event featuring advanced technical content on Google platforms and products from the teams that work on them. Join us for the latest developments in Android, Chrome, HTML5, Cloud and more.”
When: September 16, 2011 Where: Sao Paulo, Brazil at the Sheraton WTC Hotel
London Design Festival
“First staged in 2003, the London Design Festival is one of the world’s most important annual design events. The nine-day Festival programme is made up of over 280 events and exhibitions staged by 200 partner organisations across the design spectrum and from around the world.”
When: September 17-25, 2011 Where: London, UK at a number of different venues across the city
Kings of Code
“On September 19th 2011, 300 developers will gather in Amsterdam to explore and discuss the latest trends, developments and best practices in web and mobile development technologies. We’ve invited leading international speakers & developers to share their knowledge and visions on development and coding.”
When: September 19, 2011 Where: Amsterdam, The Netherlands at Felix Meritis
Search Engine Strategies
“SES Conference & Expo is the leading global event series that educates delegates in search and social marketing, putting a special focus on tactics and best practices. SES Events provide instruction from the industry’s top experts, including representatives from the Search Engines themselves.”
When: Six Dates in six cities starting on September 21 Where: Hong Kong, Amsterdam, New York, Berlin, Chicago, and Singapore
EuroIA
“EuroIA invites your participation to this premier European event on Information Architecture. Join us in Prague, Czech Republic, September 22-24, 2011, for three incredible days of workshops, presentations, panels, and networking with information architects from across Europe and around the world.”
When: September 22-24, 2011 Where: Prague, Czech Republic at the Prague Marriott Hotel
WebExpo
“Meet your community. Get inspired by opinion-leaders in your field. Get new contacts and ideas. Enjoy unique atmosphere, which is not replaceable by YouTube. Recharge energy at the biggest Central European web conference for a great price.”
When: September 22-24, 2011 Where: Prague, Czech Republic at the University of Economics
Node.js Conference
“Node.js is an event-driven I/O framework for the V8 JavaScript engine. It is intended for writing scalable network programs such as web servers. This conference is born with this spirit : not strictly a commercial or promotional event, but rather a gathering organized using time, passion and willingness taken away from our daily working life. From the community for the community.”
When: September 24, 2011 Where: Brescia, Italy
Accessibility Summit
“Environments for Humans brings together some of the Web’s most notable experts in Accessibility for an all-new, one-day only online conference, the Accessibility Summit! Bring the experts to your desktop September 27th from 9AM to 5PM (CT).”
When: September 27, 2011 Where: Online
Do-It-Yourself Usability Testing: The Workshop
“In this day-long session, I’ll teach you how to do your own low-cost/no-cost testing that’s simple enough to make it a routine part of your design process.”
When: September 27, 2011 Where: Seattle, WA, USA at Seattle Public Library’s Central Library
Back to the Front
“Back to the Front is a one day Front End Conference organized in Cesena by From The Front with the support of the University of Bologna. Speakers include Jeremy Keith and Lea Verou.”
When: September 29, 2011 Where: Cesena, Italy at Università di Bologna
RubyConf
“RubyConf is the official International Ruby Conference. Founded in 2001, RubyConf has provided an annual venue for the ever-growing Ruby community to meet face to face to share, collaborate, and socialize.”
When: September 29 – October 1, 2011 Where: New Orleans, LA, USA at the Astor Crowne Plaza
Over the Air
“Over the Air is a unique tech-agnostic event for and by the developer community, featuring technical workshops where attendees can roll up their sleeves and tinker with new platforms, operating systems, APIs & SDKs; and tutorial sessions that feature real business cases, new insights and a healthy dollop of inspiration.”
When: September 30 – October 1, 2011 Where: Bletchley, UK at Bletchley Park
A Better World by Design
“A Better World by Design is a three-day internationally acclaimed conference held annually at Brown & RISD campuses in Providence, RI that connects students, professionals, and individuals from a variety of disciplines in order to build a global community of socially conscious and passionate innovators.”
When: September 30 – October 2, 2011 Where: Providence, RI, USA
Usability Week 2011
“Many conferences offer cavernous exhibit halls, brief seminars on second-hand discoveries, and a sense of anonymity that can be truly alienating. Usability Week takes a different approach.”
When: Various dates in September, October and November Where: San Francisco, CA, and Austin, TX, USA and London, UK
October Events
Pittsburgh Web Design Day
“Pittsburgh Web Design Day is a one-day, web design conference to highlight local talent as well as those with strong ties to Pittsburgh who have gone on to be leaders in our industry. Web Design Day is designed to be an intimate and affordable event. We feature a number of high-end web design presentations, a tasty lunch catered by our friends at Franktuary and great networking opportunities.”
When: October 1, 2011 Where: Pittsburgh, PA, USA at the Left Field Meeting Space
jQuery Conference
“jQuery Conferences are so exciting because of the speakers that contribute talks during the conference. This year, speakers include Doug Neiner, Ben Alman, Elijah Manor, and Yehuda Katz.”
When: October 1-2, 2011 Where: Boston, MA, USA at the Royal Sonesta Hotel
JSConf EU
“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.”
When: October 1 – 2, 2011 Where: Berlin, Germany at Alte Münze Berlin
Adobe MAX
“MAX is an opportunity unlike any other, where you can discover the latest tools and techniques, connect with potential clients, new partners, and old friends, and be inspired by the brightest minds in the industry.”
When: October 1-5, 2011 Where: Los Angeles, CA, USA at the Los Angeles Convention Center and the Nokia Theatre L.A. LIVE
Phoenix Design Week[s]
“Phoenix Design Week was started in 2009 to help connect the Phoenix design community. Each year we put together a conference and a week of events and exhibitions meant to bring our community together.”
When: October 1-18, 2011 Where: Phoenix, AZ, USA
FITC Unconference
“The Unconference is a way for attendees to convene in a casual setting to share ideas as well as host their own discussion groups. This year FITC has once again been chosen as one of the organizations to run one of the Unconference areas.”
When: October 3-5, 2011 Where: Los Angeles, CA, USA at the Los Angeles Convention Center
Future of Web Apps
“The Future of Web Apps London (FOWA) is a 3 day conference aimed at Web Developers and Entrepreneurs. FOWA brings together web visionaries to discuss the technologies, platforms and business models you should be using to launch the next generation of successful web apps.”
When: October 3-5, 2011 Where: London, UK
Do-It-Yourself Usability Testing: The Workshop
“In this day-long session, I’ll teach you how to do your own low-cost/no-cost testing that’s simple enough to make it a routine part of your design process.”
When: October 5, 2011 Where: London, UK at The Institute of Contemporary Arts (ICA)
Fronteers
“Founded in 2007, Fronteers is the non-profit trade organization of Dutch front-end developers. Its goals include the professionalisation of our trade, (improved) recognition of the front-end discipline, and improving the position of Dutch front-end developers in their company and the web design/development world in general.”
T3CON11
“We invite you to a stunning event with a broad range of topics and professional speakers. This will be a great opportunity to learn more about the powerful TYPO3 CMS, the FLOW3 framework and to connect with other managers, developers and designers from all over the world. Many internationally known leaders of the TYPO3 community will attend and present.”
When: October 6-8, 2011 Where: Frankfurt, Germany in the Congress Park Hanau
HTML5tx
“HTML5.tx is the premier event for web designers, developers and technologists in Texas. This event will be a place for people of all disciplines and backgrounds to learn from web experts and each other about HTML, CSS, JavaScript and the future of the web.”
When: October 8, 2011 Where: Austin, TX, USA at St. Edwards University, Ragsdale Center
International PHP Conference
“The International PHP Conference is the global recognized event for PHP developers, webworkers, IT managers and everyone interested in web-technology. Again, the conference will focus on main topics for developers and core-technologies for decision makers.”
When: October 9-12, 2011 Where: Mainz, Germany at the Rheingoldhalle
PHPNW 2011
“The heart and soul of a conference is the community that it serves. PHPNW is run by passionate volunteers, bringing an annual conference that benefits both developers and their companies.”
When: October 7th,8th & 9th, 2011 Where: Manchester, UK at the Ramada Manchester Piccadilly
FRONTEND 2011
“A conference that includes masterclasses and two days of conference material. Speakers this year include Simon Collison, Sarah Parmenter, Andy Budd, and Vitaly Friedman.”
When: October 10-12, 2011 Where: Oslo, Norway at the Clarion Hotel Royal Christiania
Web Directions South
“Our philosophy is simple — bring together the best local and international independent experts, covering the most relevant topics for practicing web designers, developers and decision makers. To keep up with HTML5, CSS3, JavaScript, mobile app development and all the latest in design, development and the big picture, there’s only one event to attend: Web Directions South 2011.”
When: October 11-14, 2011 Where: Sydney, Australia at the Masonic Centre and the Convention and Exhibition Centre
Brooklyn Beta
“Brooklyn Beta is a small, friendly web conference aimed at the “work hard and be nice to people” crowd. Last year, our first year, we had a simple message. “Make something you love.” We think the more people who work on their own ideas, the better place the Web and the world will be.”
When: October 12-14, 2011 Where: Brooklyn, NY, USA at the Invisible Dog
Do It With Drupal
“Do It With Drupal is a three-day educational seminar presented by Lullabot that connects attendees with practical information and resources for building Drupal-based websites. Presenters are rockstar Drupal community leaders and authors, as well as renowned experts in fields such as user experience and design, social publishing, and the business of Open Source.”
When: October 12-14, 2011 Where: New York City, NY, USA
Design by Fire
“The Design by Fire Conference provides a stage for inspiring professionals to share their passion for interaction design with peers, refueling knowledge and competence to cope with the challenges of IxD’s professional practice.”
When: October 13-14, 2011 Where: Utrecht, The Netherlands
edUi Conference
“Focusing on the universal methods and tools of user interface and interaction design, as well as the unique challenges of producing websites and applications for large institutions, edUi is a perfect opportunity for Web professionals at institutions of learning—including higher education, K-12 schools, libraries, museums, government, and local and regional businesses—to develop skills and share ideas.”
When: October 13-14, 2011 Where: Richmond, VA, USA at the Marriott hotel
Pivot: AIGA Design Conference
“Join more than 1,500 designers at “Pivotâ€� this fall to share what is inspiring about design, how to succeed in meeting your clients’ needs, and how design can be more effective than ever as society, the economy and the context for design evolves.”
When: October 13-16, 2011 Where: Phoenix, AZ, USA at the Phoenix Convention Center
Design Philadelphia
“As a cultural initiative partnered with the University of the Arts, DesignPhiladelphia aims to further this region’s creative economy and retain jobs locally. It places Philadelphia in the spotlight as an unrivalled city of innovation and vibrancy – an excellent place in which to live, work, play, and grow!”
When: October 13-23, 2011 Where: Philadelphia, PA, USA at various locations
decoded
“The decoded conference stands for the combination of design and code. It combines creative and technological aspects of our everyday life and brings them all together on a one day kick ass event in the heart of Munich. International speakers from the field of generative design, computational art, information visualization and hardware tinkering are teaming up to share some insights of their work and tell their very own stories.”
When: October 15, 2011 Where: Munich, Germany at Freiheizhalle
Wakanday Conference
“Come make JavaScript the singular language for business solutions, from top to bottom. Wakanday is a conference for developers who believe in JavaScript beyond the front end, who want to see JavaScript on the back-end, in the datastore, and in between: JavaScript everywhere. Join the minds who are working to make this a reality.”
When: October 15, 2011 Where: Boston, MA, USA at the Omni Parker House Hotel
ZendCon
“The Zend PHP Conference (ZendCon) is the largest gathering of the PHP Community and brings together PHP developers and IT managers from around the world to discuss PHP best practices and explore new technologies. The conference will include a variety of technical sessions and in-depth tutorials covering cloud computing, mobile, and enterprise PHP.”
When: October 17-20, 2011 Where: Santa Clara, CA at the Convention Center
Blackberry Devcon Americas
“The BlackBerry® Developer Conference is the showcase for the latest innovations and breakthroughs with the BlackBerry Development Platform. Thousands of BlackBerry enthusiasts come together for sessions, demonstrations, hands-on labs and keynotes — all focused on creating mobile applications for the powerful BlackBerry platform.”
When: October 18-20, 2011 Where: San Francisco, CA, USA at the Marriot Marquis
Asbury Agile
“Asbury Agile’s goal is to bring together a group of creative doers and makers in the web industry down to the Jersey Shore to hang out in an informal and friendly environment, 2 stories above the Asbury Park boardwalk, overlooking the ocean, to learn, network and share experiences.”
When: October 19, 2011 Where: Abury Park, NJ, USA
TYPO London
“TYPO London is a three day conference offering up to 40 presentations from the heart of London. TYPO conferences were birthed in the desktop publishing revolution of the 1990s and overtime, events have become a broad based representation of the creative industry, cultural and social issues and as the name suggests, a contemporary commentary on graphic design, typography and communication from the word up.”
When: October 20-22, 2011 Where: London, UK at Logan Hall
The ExpressionEngine and CodeIgniter Conference
“For the second time, EECI is going to the US and this time we’re heading for the East Coast. Fabulous Brooklyn, NY will be ExpressionEngine and CodeIgniter flavored for three exciting days. With a new line-up, fresh topics, a couple of fringe events and the EECI2010 hit “DevDay”, EECI will be the premier ExpressionEngine event of the year.”
When: October 19-21, 2011 Where: Brooklyn, NY, USA at the Invisible Dog Art Center
Front Row Conference
“Front Row is a two-day, one-track conference made by the people and for the people who want to shape the future of the web.”
When: October 20-21, 2011 Where: Kraków, Poland at the Park Inn Kraków
WDC2011
“The aim of the WDC events is to bring together a mix on professionals and students and to teach both levels something new and introduce a bespoke networking opportunity and social gathering.”
When: October 21, 2011 Where: Brisol, UK in the Odeon Bristol, Screen 1.
An Event Apart DC
“An Event Apart is an intensely educational two-day conference for passionate practitioners of standards-based web design. If you care about code as well as content, usability as well as design, An Event Apart is the conference you’ve been waiting for.”
When: October 24-26, 2011 Where: Washington, DC, USA at the Westin Alexandria
VIEW Conference
“VIEW Conference is the premiere international event in Italy on Computer Graphics, Interactive Techniques, Digital Cinema, 3D Animation, Gaming and VFX. Through lectures, meetings, tributes, exhibits, screenings and demo presentations VIEW will reveal the new digital frontier sweeping from cinema to architecture, from automotive design to advertisement, from medicine to videogames.”
When: October 25-28, 2011 Where: Turin, Italy at TorinoIncontra
RIA Unleashed Boston
“Flex, AIR, ColdFusion, and more. FITC is VERY excited to be involved with RIA Unleashed! Guests and speakers from New England and throughout North America will be coming to the 5th Annual RIA Unleashed event this October. This popular, low-cost event is accessible to every budget, and last year’s event was a super success.”
When: October 27-28, 2011 Where: Waltham, MA, USA at Bentley College
PDN PhotoPlus International Conference + Expo
“Get ready for the hottest industry event for photographers and image-makers, PhotoPlus International Conference + Expo, brought to you by PDN. It’s the only place where you have infinite access to emerging technology, trends and talent while test driving new imaging tools, discovering creative solutions and expanding your network. ”
When: October 27-29, 2011 Where: New York, NY, USA at the Jacob K. Javits Convention Center
Creative Camp
“Creative Camp NZ is a non-profit, 2-day and multiple-track event in Wellington happening later this year and successor of the Flash Platform Camps we’ve held in the past two years in Wellington.”
When: October 28-29, 2011 Where: Wellington, New Zealand at Natcoll Design Technology
DevConnections
“Join us and explore the latest trends and get the most up to date information and training available. All while networking with your colleagues and building a valuable network of peers in one of the most entertaining cities in the world”
When: October 31 – November 3, 2011 Where: Las Vegas, NV, USA at the Mandalay Bay Resort & Casino
November Events
HTML5 Live
“Unlike most “other” HTML5 events that are geared towards web design, HTML5 Live is designed for enterprise web application developers and architects. The HTML5 Live program dives into areas of Browser Support, Architecture, Communication, Mobile and Web Applications.”
When: November 1, 2011 Where: New York, NY, USA at New World Stages
YUIConf 2011
“The YUI team is excited to announce YUIConf 2011! We’ll be hosting the YUI developer community at Yahoo’s Santa Clara, CA campus for a two-day technical conference November 3-4. We’re also putting together a couple days of hands-on training workshops November 1-2.”
When: November 1-4, 2011 Where: Santa Clara, CA, USA at at Yahoo’s Santa Clara campus
HOW Interactive Design Conference
“HOW magazine is delighted to introduce HOW Interactive Design Conference, a three-day event dedicated to helping print designers expand their skill set to confidently navigate web, digital, mobile and other forms of interactive media. This info-packed conference will keep you on top of today’s fast-paced design evolution by helping you capitalize on the new technology and trends that are changing design.”
When: November 2-4, 2011 Where: San Francisco, CA, USA
Star TechConf
“StarTechConf is a large conference that brings together worldwide stars in software development and local experts in technologies to talk about HTML5, CSS3, JavaScript, Ruby, Java, Python, Open Data, and more.”
When: November 4-5, 2011 Where: Santiago, Chile
Future of Web Design
“FOWD New York: three days of cutting-edge web design learning and initimate, expert-led workshops. Give your
Design Team the edge, with sessions from the industry’s leading speakers, the hottest topics and some world-class networking opportunities.”
When: November 7-9, 2011 Where: New York, NY, USA at New World Stages
User Interface 16
“3 days of design techniques, insights, and inspiration. Full-day immersive workshops on advanced UX topics. Top UX experts
sharing their real-world experience.”
When: November 7-9, 2011 Where: Boston, MA, USA at the Renaissance Hotel
Build Conference
“Build is a five-day design event made up of three days of conference, workshops, lectures, exhibitions, meetups and parties?–?bookended by a day of film and another of music.”
When: November 7-11, 2011 Where: Belfast, Northern Ireland
Øredev
“Øredev is the Premier developer’s conference in Europe focused on the whole software development process. Øredev means Quantity and Quality, bringing the best speakers on subjects such as Java, .Net, Project Management, Web development and Testing. We cover the topics you are working with today as well as the ones you will be using tomorrow!”
When: November 7-11, 2011 Where: Malmö, Sweden at the Slagthuset, Jörgen Kocksg
Velocity Europe
“The Velocity Conference provides you with real-world best practices for optimizing your web pages, specifically the performance of Ajax, CSS, JavaScript, and images. Even sites that had already been optimized can benefit, making for both a better customer experience and bottom line.”
When: November 8-9, 2011 Where: Berlin, Germany
RubyConf
“RubyConf Argentina is a two-day event designed to cover the interests of a wide spectrum of programmers, from the new developer who is interested in learning Ruby for the first time to the long-time Ruby expert. The event is designed to open a dialogue between developers in Argentina and the rest of the world.”
When: November 8-9, 2011 Where: Buenos, Aires, Argentina
How To Web
“How to Web 2011 helps Eastern European web entrepreneurs and professionals get the inspiration, knowledge and connections they need for creating global valuable web businesses and apps. You will get hands-on information about success models in Eastern Europe, global web trends and building great web and mobile apps.”
When: November 9-10, 2011 Where: Bucharest, Romania at the Crystal Palace Ballrooms
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. Design City aims to further strengthen the graphic design community and bring together buyers and sellers in the industry.”
When: November 10-12, 2011 Where: Toronto, Canada at the International Centre
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.”
When: November 11, 2011 Where: Brighton, UK at the Duke of York’s cinema
Voices That Matter: iOS Developers Conference
“You’ll be able to devote a weekend to polishing your skills, picking up new techniques from the experts, learning about new technologies, and networking with your fellow developers. Voices That Matter provides the perfect forum to access industry leaders, many of whom have written books on iOS development. You’ll participate in interactive discussions that provide the perfect environment for an effective learning experience.”
When: November 12-13, 2011 Where: Boston, MA, USA at the Harvard Medical School Conference Center
Screens 2011
“After two successful FITC Mobile conferences we have transformed the event into SCREENS, now dedicated to mobile, tablet and set top box development. Jam packed with information and a massive networking opportunity, SCREENS consists of presentations, demonstrations and panel discussions.”
When: November 14-15, 2011 Where: Toronto, Canada at the Metro Toronto Convention Centre
WordCamp NL
“WordCamp is a conference that focuses on everything WordPress. WordCamps are informal, community-organized events that are put together by WordPress users like you. Everyone from casual users to core developers participate, share ideas, and get to know each other. WordCamps are open to WordPress.com and WordPress.org users alike.”
When: November 19-20, 2011 Where: Utrecht, The Netherlands at Seats2Meet
beyond tellerand conference
“An affordable 3-day event with intensive workshops and 15 high quality talks for web enthusiasts: design, technique, inspiration and networking. Don’t miss 3 very inspirational days with over 450 interested designers and developers.”
When: November 20-22, 2011 Where: Düsseldorf, Germany
The Rich Web Experience
“Front-end development practices continue to evolve at a frantic pace. RWX 2011 will help you stay up-to-speed with the latest tools, frameworks, usability, and development practices. Our speakers are opensource leaders, project committers, published authors, and professional trainers.”
When: November 29 – December 2, 2011 Where: Fort Lauderdale, FL, USA
December Events
Interaction South America
“Interaction South America 2011 is a design event that combines three days of inspiring conversations on activities presented by a set of regional and international experts. Our goal is to share knowledge on interaction design and its practice. Some of the most important global names in the area have already confirmed their presence in the 2011 edition.”
When: December 1-3, 2011 Where: Belo Horizonte, Brasil
Blackberry DevCon Asia
“The BlackBerry® Developer Conference is the showcase for the latest innovations and breakthroughs with the BlackBerry Development Platform. Thousands of BlackBerry enthusiasts come together for sessions, demonstrations, hands-on labs and keynotes — all focused on creating mobile applications for the powerful BlackBerry platform.”
When: December 7-8, 2011 Where: Bangkok, Thailand at the Centara Grand at CentralWorld
LeWeb’11
“LeWeb brings together the most influential audience in the Internet ecosystem. Top industry entrepreneurs, executives, investors, senior press & bloggers gather to focus on the key issues and opportunities in the web marketplace.”
When: December 7-9, 2011 Where: Paris, France at Eurosites Les Docks
An Event Apart San Francisco
“An Event Apart is an intensely educational two-day conference for passionate practitioners of standards-based web design. If you care about code as well as content, usability as well as design, An Event Apart is the conference you’ve been waiting for.”
When: December 12–14, 2011 Where: San Francisco, CA, USA at the Palace Hotel
January Events
New Adventures in Web Design
“We’re working closely with our speakers over the next few months to ensure we bring you engaging, relevant, joined-up themes, and we’ll introduce all eight topics here in late 2011. Note also that our provisional schedule is subject to change.”
When: January 18-19, 2012 Where: Nottingham, UK at the Albert Hall
February Events
Interaction12
“Our vision is to create an experience over four unforgettable days, plotting a course through the elements of interaction design, which will flood your mind and inspire your work.”
When: February 1-4, 2012 Where: Dublin, Ireland
An Event Apart Atlanta
“An Event Apart is an intensely educational two-day conference for passionate practitioners of standards-based web design. If you care about code as well as content, usability as well as design, An Event Apart is the conference you’ve been waiting for.”
When: February 6-8, 2012 Where: Atlanta, GA, USA at the InterContinental
Blackberry DevCon Europe
“The BlackBerry® Developer Conference is the showcase for the latest innovations and breakthroughs with the BlackBerry Development Platform. Thousands of BlackBerry enthusiasts come together for sessions, demonstrations, hands-on labs and keynotes — all focused on creating mobile applications for the powerful BlackBerry platform.”
When: February 7-8, 2012 Where: Amsterdam, The Netherlands at the RAI Convention Centre
International Conference on Intelligent User Interfaces
“IUI 2012 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.”
When: February 14-17, 2012 Where: Lisbon, Portugal
Other Early 2012 Events
Some other events that will be held early in 2012 are listed below. Details on these events is still forthcoming.
Conference Roundup A nice overview of upcoming conferences and events presented on Google Maps, with a strong focus on US and Canada.
Do You Attend Web Design Conferences?
Which ones do you like most? Are you planning to attend one soon? Perhaps we can meet at some part of the world! Feel free to check Smashing Magazine on Lanyrd, too.
Thanks to our trainee Luca for preparing the Google Calendar and iCal export for the Web design conferences and events listed in this review.
If you’ve been keeping tabs on various Web design blogs, you’ve probably noticed that the :before and :after pseudo-elements have been getting quite a bit of attention in the front-end development scene — and for good reason. In particular, the experiments of one blogger — namely, London-based developer Nicolas Gallagher — have given pseudo-elements quite a bit of exposure of late.
Nicolas Gallagher used pseudo-elements to create 84 GUI icons created from semantic HTML.
To complement this exposure (and take advantage of a growing trend), I’ve put together what I hope is a fairly comprehensive run-down of pseudo-elements. This article is aimed primarily at those of you who have seen some of the cool things done with pseudo-elements but want to know what this CSS technique is all about before trying it yourself.
Although the CSS specification contains other pseudo-elements, I’ll focus on :before and :after. So, for brevity, I’ll say “pseudo-elements� to refer generally to these particular two.
What Does A Pseudo-Element Do?
A pseudo-element does exactly what the word implies. It creates a phoney element and inserts it before or after the content of the element that you’ve targeted.
The word “pseudo� is a transliteration of a Greek word that basically means “lying, deceitful, false.� So, calling them pseudo-elements is appropriate, because they don’t actually change anything in the document. Rather, they insert ghost-like elements that are visible to the user and that are style-able in the CSS.
Basic Syntax
The :before and :after pseudo-elements are very easy to code (as are most CSS properties that don’t require a ton of vendor prefixes). Here is a simple example:
There are two things to note about this example. First, we’re targeting the same element using #example:before and #example:after. Strictly speaking, they are the pseudo-elements in the code.
Secondly, without the content property, which is part of the generated content module in the specification, pseudo-elements are useless. So, while the pseudo-element selector itself is needed to target the element, you won’t be able to insert anything without adding the content property.
In this example, the element with the id example will have a hash symbol placed “before� its content, and a period (or full stop) placed “after� its content.
Some Notes On The Syntax
You could leave the content property empty and just treat the pseudo-element like a content-less box, like this:
However, you can’t remove the content property altogether. If you did, the pseudo-element wouldn’t work. At the very least, the content property needs empty quotes as its value.
You may have noticed that you can also code pseudo-elements using the double-colon syntax (::before and ::after), which I’ve discussed before. The short explanation is that there is no difference between the two syntaxes; it’s just a way to differentiate pseudo-elements (double colon) from pseudo-classes (single colon) in CSS3.
One final point regarding the syntax. Technically, you could implement a pseudo-element universally, without targeting any element, like this:
:before {
content: "#";
}
While the above is valid, it’s pretty useless. The code will insert a hash symbol before the content in each element in the DOM. Even if you removed the <body> tag and all of its content, you’d still see two hash symbols on the page: one in the <html> element, and one in the <body> tag, which the browser automatically constructs.
Characteristics Of Inserted Content
As mentioned, the content that is inserted is not visible in the page’s source. It’s visible only in the CSS.
Also, the inserted element is by default an inline element (or, in HTML5 terms, in the category of text-level semantics). So, to give the inserted element a height, padding, margins and so forth, you’ll usually have to define it explicitly as a block-level element.
This leads well into a brief description of how to style pseudo-elements. Look at this graphic from my text editor:
In this example, I’ve highlighted the styles that will be applied to the elements inserted before and after the targeted element’s content. Pseudo-elements are somewhat unique in this way, because you insert the content and the styles in the same declaration block.
Also note that typical CSS inheritance rules apply to the inserted elements. If you had, for example, a font stack of Helvetica, Arial, sans-serif applied to the <body> element of the document, then the pseudo-element would inherit that font stack the same as any other element would.
Likewise, pseudo-elements don’t inherit styles that aren’t naturally inherited from parent elements (such as padding and margins).
Before Or After What?
Your hunch on seeing the :before and :after pseudo-elements might be that the inserted content will be injected before and after the targeted element. But, as alluded to above, that’s not the case.
The content that’s injected will be child content in relation to the targeted element, but it will be placed “before� or “after� any other content in that element.
To demonstrate this, look at the following code. First, the HTML:
<p class="box">Other content.</p>
And here’s the CSS that inserts a pseudo-element:
In the HTML, all you would see is a paragraph with a class of box, with the words “Other content� inside it (the same as what you would see if you viewed the source on the live page). In the CSS, the paragraph is given a set width, along with some padding and a visible border.
Then we have the pseudo-element. In this case, it’s a hash symbol inserted “before� the paragraph’s content. The subsequent CSS gives it a border, along with some padding and margins.
Here’s the result viewed in the browser:
The outer box is the paragraph. The border around the hash symbol denotes the boundary of the pseudo-element. So, instead of being inserted “before� the paragraph, the pseudo-element is placed before the “Other content� in the paragraph.
Inserting Non-Text Content
I mentioned briefly that you can leave the content property’s value as an empty string or insert text content. You basically have two additional options of what to include as the value of the content property.
First, you can include a URL that points to an image, just as you would do when including a background image in the CSS:
p:before {
content: url(image.jpg);
}
Notice that the quotes are missing. If you wrapped the URL reference in quotes, then it would become a literal string and insert the text “url(image.jpg)� as the content, instead of inserting the image itself.
Naturally, you could include a Data URI in place of the image reference, just as you can with a CSS background.
You also have the option to include a function in the form of attr(X). This function, according to the spec, “returns as a string the value of attribute X for the subject of the selector.�
Here’s an example:
a:after {
content: attr(href);
}
What does the attr() function do? It takes the value of the specified attribute and places it as text content to be inserted as a pseudo-element.
The code above would cause the href value of every <a> element on the page to be placed immediately after each respective <a> element. This could be used in a print style sheet to include full URLs next to all links when a document is printed.
You could also use this function to grab the value of an element’s title attribute, or even microdata values. Of course, not all of these examples would be practical in and of themselves; but depending on the situation, a specific attribute value could be practical as a pseudo-element.
While being able to grab the title or alt text of an image and display it on the page as a pseudo-element would be practical, this isn’t possible. Remember that the pseudo-element must be a child of the element to which it is being applied. Images, which are void (or empty) elements, don’t have child elements, so it wouldn’t work in this case. The same would apply to other void elements, such as <input>.
Dreaded Browser Support
As with any front-end technology that is gaining momentum, one of the first concerns is browser support. In this case, that’s not as much of a problem.
Browser support for :before and :after pseudo-elements stacks up like this:
Chrome 2+,
Firefox 3.5+ (3.0 had partial support),
Safari 1.3+,
Opera 9.2+,
IE8+ (with some minor bugs),
Pretty much all mobile browsers.
The only real problem (no surprise) is IE6 and IE7, which have no support. So, if your audience is in the Web development niche (or another market that has low IE numbers), you can probably go ahead and use pseudo-elements freely.
Pseudo-Elements Aren’t Critical
Fortunately, a lack of pseudo-elements will not cause huge usability issues. For the most part, pseudo-elements are generally decorative (or helper-like) content that will not cause problems in unsupported browsers. So, even if your audience has high IE numbers, you can still use them to some degree.
A Couple Of Reminders
As mentioned, pseudo-element content does not appear in the DOM. These elements are not real elements. As such, they are not accessible to most assistive devices. So, never use pseudo-elements to generate content that is critical to the usability or accessibility of your pages.
Another thing to keep in mind is that developer tools such as Firebug do not show the content generated by pseudo-elements. So, if overused, pseudo-elements could cause maintainability headaches and make debugging a much slower process.
That covers all of the concepts you need in order to create something practical with this technique. In the meantime, for further reading on CSS pseudo-elements, be sure to check out some of the articles that we’ve linked to in this piece.
By now you’ve probably heard at least something about animation in CSS3 using keyframe-based syntax. The CSS3 animations module in the specification has been around for a couple of years now, and it has the potential to become a big part of Web design.
Using CSS3 keyframe animations, developers can create smooth, maintainable animations that perform relatively well and that don’t require reams of scripting. It’s just another way that CSS3 is helping to solve a real-world problem in an elegant manner. If you haven’t yet started learning the syntax for CSS3 animations, here’s your chance to prepare for when this part of the CSS3 spec moves past the working draft stage.
In this article, we’ll cover all the important parts of the syntax, and we’ll fill you in on browser support so that you’ll know when to start using it.
A Simple Animated Landscape Scene
For the purpose of this article, I’ve created a simple animated landscape scene to introduce the various aspects of the syntax. You can view the demo page to get an idea of what I’ll be describing. The page includes a sidebar that displays the CSS code used for the various elements (sun, moon, sky, ground and cloud). Have a quick look, and then follow along as I describe the different parts of the CSS3 animations module.
(NOTE: Safari has a bug that prevents the animation from finishing correctly. This bug seems to be fixed in Safari using a WebKit nightly build, so future versions of Safari should look the same as Chrome. See more under the heading “The Animation’s Fill Mode”)
I’ll describe the CSS related to only one of the elements: the animated sun. That should suffice to give you a good understanding of keyframe-based animations. For the other elements in the demo, you can examine the code on the demo page using the tabs.
The Keyframe @ Rule
The first unusual thing you’ll notice about any CSS3 animation code is the keyframes @ rule. According to the spec, this specialized CSS @ rule is followed by an identifier (chosen by the developer) that is referred to in another part of the CSS.
The @ rule and its identifier are then followed by a number of rule sets (i.e. style rules with declaration blocks, as in normal CSS code). This chunk of rule sets is delimited by curly braces, which nest the rule sets inside the @ rule, much as you would find with other @ rules.
Here’s the @ rule we’ll be using:
@-webkit-keyframes sunrise {
/* rule sets go here … */
}
The word sunrise is an identifier of our choosing that we’ll use to refer to this animation.
Notice that I’m using the -webkit- prefix for all of the code examples here and in the demo. I’ll discuss browser support at the end of this article, but for now it’s enough to know that the only stable browsers that support these types of animations are WebKit-based ones.
With the addition of those new rule sets, we’ve introduced the keyframe selector. In the code example above, the keyframe selectors are 0%, 33%, 66%, and 100%. The 0% and 100% selectors could be replaced by the keywords “from� and “to,� respectively, and you would get the same results.
Each of the four rule sets in this example represents a different snapshot of the animated element, with the styles defining the element’s appearance at that point in the animation. The points that are not defined (for example, from 34% to 65%) comprise the transitional period between the defined styles.
Although the spec is still in development, some rules have been defined that user agents should follow. For example, the order of the keyframes doesn’t really matter. The keyframes will play in the order specified by the percentage values, and not necessarily the order in which they appear. Thus, if you place the “to� keyframe before the “from� keyframe, the animation would still play the same way. Also, if a “to� or “from� (or its percentage-based equivalent) is not declared, the browser will automatically construct it. So, the rule sets inside the @ rule are not governed by the cascade that you find in customary CSS rule sets.
The Keyframes That Animate the Sun
For the purpose of animating the sun in this demo, I’ve set four keyframes. As mentioned, the code above includes comments that describe the changes.
In the first keyframe, the sun is red (as if it were just rising or setting), and it is positioned below ground (i.e. not visible). Naturally, the element itself must be positioned relatively or absolutely in order for the left and bottom values to have any effect. I’ve also used z-index to stack the elements (to make sure, for example, that the ground is above the sun). Take note that the only styles shown in the keyframes are the styles that are animated. The other styles (such as z-index and position, which aren’t animated) are declared elsewhere in the style sheet and thus aren’t shown here.
0% {
bottom: 0; /* sun at bottom */
left: 340px; /* sun at right */
background: #f00; /* sun is red */
}
About one third of the way into the animation (33%), the sun is on the same horizontal plane but has risen and changed to a yellow-orange (to represent full daylight):
33% {
bottom: 340px; /* sun rises */
left: 340px;
background: #ffd630; /* changes color */
}
Then, at about two thirds into the animation (66%), the sun has moved to the left about 300 pixels but stays on the same vertical plane. Notice something else in the 66% keyframe: I’ve repeated the same color from the 33% keyframe, to keep the sun from changing back to red too early.
66% {
bottom: 340px;
left: 40px; /* sun moves left across sky */
background: #ffd630; /* maintains its color */
}
Finally, the sun gradually animates to its final state (the full red) as it disappears below the ground.
100% {
bottom: 0; /* sun sets */
left: 40px;
background: #f00; /* back to red */
}
Associating The Animation Name With An Element
Here’s the next chunk of code we’ll add in our example. It associates the animation name (in this case, the word sunrise) with a specific element in our HTML:
#sun.animate {
-webkit-animation-name: sunrise;
}
Here we’re introducing the animation-name property. The value of this property must match an identifier in an existing @keyframes rule, otherwise no animation will occur. In some circumstances, you can use JavaScript to set its value to none (the only keyword that has been reserved for this property) to prevent an animation from occurring.
The object we’ve targeted is an element with an id of sun and a class of animate. The reason I’ve doubled up the id and class like this is so that I can use scripting to add the class name animate. In the demo, I’ve started the page statically; then, with the click of a button, all of the elements with a particular class name will have another class appended called animate. This will trigger all of the animations at the same time and will allow the animation to be controlled by the user.
Of course, that’s just one way to do it. As is the case with anything in CSS or JavaScript, there are other ways to accomplish the same thing.
You can specify the duration of the animation using the animation-duration property. The duration represents the time taken to complete a single iteration of the animation. You can express this value in seconds (for example, 4s), milliseconds (2000ms), and seconds in decimal notation (3.3s).
The specification doesn’t seem to specify all of the available units of time measurement. However, it seems unlikely that anyone would need anything longer than seconds; and even then, you could express duration in minutes, hours or days simply by calculating those units into seconds or milliseconds.
The animation-timing-function property, when declared for the entire animation, allows you to define how an animation progresses over a single iteration of the animation. The values for animation-timing-function are ease, linear, ease-out, step-start and many more, as outlined in the spec.
For our example, I’ve chosen ease, which is the default. So in this case, we can leave out the property and the animation will look the same.
Additionally, you can apply a specific timing function to each keyframe, like this:
A separate timing function defines each of the keyframes above. One of them is the steps value, which jerks the animation forward a predetermined number of steps. The final keyframe (100% or to) also has its own timing function, but because it is for the final state of a forward-playing animation, the timing function applies only if the animation is played in reverse.
In our example, we won’t define a specific timing function for each keyframe, but this should suffice to show that it is possible.
This introduces two more properties: one that tells the animation how many times to play, and an indicator that tells the animation to animate back to the start position.
The animation-iteration-count property is set to 1, meaning that the animation will play only once. This property accepts an integer value or infinite.
In addition, the animation-direction property is set to normal (the default), which means that the animation will play in the same direction (from start to finish) each time it runs. In our example, the animation is set to run only once, so the property is unnecessary. The other value we could specify here is alternate, which makes the animation play in reverse on every other iteration. Naturally, for the alternate value to take effect, the iteration count needs to have a value of 2 or higher.
First, we introduce the animation-delay property, which does exactly what you would think: it allows you to delay the animation by a set amount of time. Interestingly, this property can have a negative value, which moves the starting point partway through the animation according to negative value.
The animation-play-state property, which might be removed from the spec, accepts one of two possible values: running and paused. This value has limited practical use. The default is running, and the value paused simply makes the animation start off in a paused state, until it is manually played. You can’t specify a paused state in the CSS for an individual keyframe; the real benefit of this property becomes apparent when you use JavaScript to change it in response to user input or something else.
The Animation’s Fill Mode
We’ll add one more line to our code, the property to define the “fill mode�:
The animation-fill-mode property allows you to define the styles of the animated element before and/or after the animation executes. A value of backwards causes the styles in the first keyframe to be applied before the animation runs. A value of forwards causes the styles in the last keyframe to be applied after the animation runs. A value of both does both.
UPDATE: It seems that the animation-fill-mode property has been removed from the spec, or else was never there to begin with, so this property may not end up in the spec. Also, Chrome and Safari respond differently when it is used. Safari will only apply a value of “forwards” if there are exactly two keyframes defined. It always seems to use the 2nd keyframe as the “forwards” state, which is not how Chrome does it; Chrome uses the final keyframe, which seems to be correct behaviour. Additionally, I’ve confirmed that the most up to date WebKit nightly does not have this bug, so future versions of Safari will render this correctly.
Shorthand
Finally, the specification describes shorthand notation for animations, which combines six of the properties described above. This includes everything except animation-play-state and animation-fill-mode.
Some Notes On The Demo Page And Browser Support
As mentioned, the code in this article is for animating only a single element in the demo: the sun. To see the full code, visit the demo page. You can view all of the source together or use the tabs in the sidebar to view the code for individual elements in the animation.
The demo does not use any images, and the animation does not rely on JavaScript. The sun, moon and cloud are all created using CSS3’s border-radius, and the only scripting on the page is for the tabs on the right and for the button that lets users start and reset the animation.
If you view the page in anything but a WebKit browser, it won’t work. Firefox does not currently support keyframe-based animation, but support is expected for Firefox 5, and the -moz-based syntax for animations is supported in the latest Aurora build. So, to make the source code as future-proof as possible, I’ve included all of the -moz prefixes along with the standard syntax.
Here are the browsers that support CSS3 keyframe animations:
Chrome 2+,
Safari 4+,
Firefox 5+,
iOS Safari 3.2+,
Android 2.1+.
Although no official announcement has been made, support in Opera is expected. There’s no word yet on support in IE.
“CSS3 Animator,� Anthony Calzadilla
A website “dedicated solely to CSS3/JavaScript animation and how to realistically use it in your projects today.�
We’re well into 2011, and many designers and developers around the world are planning their travels for the year, including the possibility of attending any Web design or development conferences. To help you out with your plans for the upcoming months, we’ve put together a list of conferences and events that you might want to consider.
This particular post covers events taking place in about a six month timeframe that ends in late August and early September. Later this year, we’ll post another article like this at the end of August that will cover events covering a six-month period beginning in September.
As always, there is no way for us to be able to include every possible event here, but we’ll be glad to update the list if you provide a comment to an upcoming event that you feel would be of interest to Smashing Magazine’s readers. This may also be the chance to eventually meet each other this year.
Drupalcon Chicago “In March of 2011, thousands of Drupal users, developers, designers, evaluators and businesspeople will descend on Chicago’s Sheraton Hotel and Towers for sessions, talks, code sprints, and more at DrupalCon Chicago. Whether you’re already using Drupal or considering it for your company or organization, you won’t want to miss out on this one-of-a-kind event.”
When: March 7 – 10, 2011 Where: Chicago, IL, USA at the Sheraton Chicago Hotel
FITC Amsterdam “FITC Amsterdam will feature over 50 presentations and panels covering the Creative, Technical, and Business aspects of Flash and digital media. The conference offers two full days and nights of events, plus one day of optional pre-festival workshops and over 750 attendees anticipated from around the globe.”
When: March 8 – 9, 2011 Where: Amsterdam, the Netherlands at De Meervaart
SXSW Interactive “SXSW® Interactive features five days of compelling presentations from the brightest minds in emerging technology, scores of exciting networking events hosted by industry leaders, the incredible new SXSW Trade Show and an unbeatable lineup of special programs showcasing the best new digital works, video games and innovative ideas the international community has to offer.”
When: March 11 – 15, 2011 Where: Austin, TX, USA
The Big M “The Big M is a brand new independent mobile focused event aimed at those who want to learn from and connect with the very best people in the industry. Join us in beautiful Bath for two days of sessions and workshops on mobile development, mobile design and mobile business. Hear from leading industry figures, be inspired and connect.”
When: March 20 – 22, 2011 Where: Bath, UK
SES Conference & Expo “SES Conference & Expo is the leading global event series that educates delegates in search and social marketing, putting a special focus on tactics and best practices. SES Events provide instruction from the industry’s top experts, including representatives from the Search Engines themselves.”
When: Various dates starting March 21, 2011 Where: New York, Shanghai, Toronto, San Francisco, Chicago
DevConnections “Join us and explore the latest trends and get the most up to date information and training available. All while networking with your colleagues and building a valuable network of peers in one of the most entertaining cities in the world.”
When: March 27 – 30, 2011 Where: Orlando, FL, USA at the Grande Lakes JW Marriott Resort Hotel
An Event Apart Seattle “An Event Apart is an intensely educational two-day conference for passionate practitioners of standards-based web design. If you care about code as well as content, usability as well as design, An Event Apart is the conference you’ve been waiting for.”
When: March 28 – 30, 2011 Where: Seattle, WA, USA at the Bell Harbor Conference Center
Web 2.0 Expo “Web 2.0 Expo, co-produced by O’Reilly Media, Inc. and UBM TechWeb, showcases the latest Web 2.0 business models, development paradigms, products, and design strategies for the builders of the next-generation Web.”
When: March 28 – 31, 2011 Where: San Francisco, CA, USA at Moscone West
Photoshop World Conference & Expo “Designed to help you boost your training and experience, the Photoshop World graphic design and photography convention offers three days of pulse-pounding training with classes from renowned experts in the field and a once-in-a-lifetime experience guaranteed to enhance your skill set and help your work soar to new heights!”
When: March 30 – April 1, 2011 Where: Orlando, FL, USA at the Orange County Convention Center
IA Summit “The IA Summit is the premier destination for those who practice, research and are interested in the structural design of shared information environments. Some call themselves information architects (and many don’t) but all share a common desire to help people live better lives through meaningful experiences with information.”
When: March 30 – April 3, 2011 Where: Denver, CO, USA at the Colorado Convention Center
Think Vitamin Online Conferences “Membership includes valuable conferences. You can attend live, watch the video later or view videos of past online conferences. Ask the speakers your questions and chat with the other attendees.”
When: Numerous dates starting March 2011 Where: Online
The Usability Week 2011 Conference “Many conferences offer cavernous exhibit halls, brief seminars on second-hand discoveries, and a sense of anonymity that can be truly alienating. Usability Week takes a different approach. In place of scattered, shallow talks, Usability Week offers up to 6 days of deep learning as international experts lead full-day tutorials.”
When: Various dates between February 28 – May 13, 2011 Where: Hong Kong, Melbourne, London, Washington, and Minneapolis
April 2011 Events
FFK11 “The conference offers about 30 sessions about developing and designing applications and Web sites. 10 full day workshops with just 19 attendees in each workshop are available as well”.
When: April 5 – 8, 2011 Where: MediaPark, Cologne, Germany
Scottish Ruby Conference “The Scottish Ruby Conference rebrands the successful Scotland on Rails conference.”
When: April 7 – 9, 2011 Where: Edinburgh, Scotland at the Royal College of Physicians
Voices That Matter: iPhone Developers Conference “Reinforce your skills and discover emerging trends this April at the Voices That Matter: iPhone Developers Conference, where we will connect you with some of the biggest names in the industry, as they teach you how to create effective user interfaces, utilizing exciting design and the latest technology, for the iPhone, iPad, or both.”
When: April 9 – 10, 2011 Where: Seattle, WA, USA at the Bell Harbor International Conference Center
CodeConf “Coding is about more than code. Whether it’s building a solid community, writing good documentation, or hacking space exploration, CodeConf is about improving the software ecosystem through best practices. Come with an open mind and leave a better programmer.”
When: April 9 – 10, 2011 Where: San Francisco, CA, USA at the Hyatt Regency
360|Flex Conferences “360|Flex is the first and still the best Adobe Flex developer conference in the world. We’re not a publishing company pushing books, or a media company selling subscriptions. We’re a conference company, focused on community. Our goal is to bring the best and brightest in the developer community together for 4 days of incredible sessions, awesome parties, good times, and learning.”
When: April 10 – 13, 2011 Where: Denver, CO, USA at the Marriot Denver South
Breaking Development Conference “Join us for two days of quality talks describing how to design, develop, and leverage the mobile web. Our speakers will walk you through mobile strategies appropriate for your company, design considerations for the mobile platform, development techniques, and how to use web technologies to build cross platform applications.”
When: April 11 – 12, 2011 Where: Dallas, TX, USA at the Gaylord Texan in Grapevine
O’Reilly MySQL Conference & Expo “The O’Reilly 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.”
When: April 11 – 14, 2011 Where: Santa Clara, CA, USA at the The Hyatt Regency
MIX11 “MIX is a gathering of developers, designers, UX experts and business professionals creating the most innovative and profitable consumer sites on the web. Sessions range from technical, code-based topics to expert advice on content strategy, usability and design. Explore the future of the standards-based web — join the conversation at MIX11.”
When: April 12 – 14, 2011 Where: Las Vegas, NV, USA at the Mandalay Bay Convention Center
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. Whether you’re beginning your career, or a seasoned professional, UX London is your chance to add core skills, absorb strategic thinking, and learn advanced techniques from pioneers in the field.”
When: April 13 – 15, 2011 Where: London, UK at the Cumberland Hotel
WebDU “webDU is the premier Antipodean Web Technology Conference, taking place 14-15 April 2011 in Sydney, Australia. This is the ninth year the conference will be held. 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.”
When: April 14 – 15, 2011 Where: Sydney, Australia at the Four Points by Sheraton Sydney, Darling Harbour
Where 2.0 “The O’Reilly Where 2.0 Conference explores the intersection of location technologies and trends in software development, business strategies, and marketing. The source for all things location-aware, Where 2.0 brings together CTOs, marketers, developers, technologists, researchers, geographers, startups, business developers, and entrepreneurs.”
When: April 19 – 21, 2011 Where: Santa Clara, CA, USA at the Santa Clara Convention Center
The Next Web Conference “The Next Web brings together the best from Europe and the United States to look at overall Internet trends.”
When: April 27 – 29, 2011 Where: Amsterdam, the Netherlands
LessConf “LessConf is a two-day conference with just 225 attendees. Lunch is provided on site. You’ll get the meet the speakers. You’ll get inspired (again). Between speakers and during lunch there are tons of opportunities to meet others in our industry. At LessConf you will hear great speakers, meet amazing people, and develop relationships.”
When: April 29 – 30, 2011 Where: Atlanta, GA, USA at the Georgia Institute Of Technology
May 2011 Events
JSConf “JSConf is one of the best tech conferences out there and rightly so, because JavaScript or JS is one of the best languages out there. The core focus of this conference is to present the wonders of JavaScript that are often overlooked. The content of the conference caters to all types of JavaScript developers from client interface to server development to testing.”
When: May 2 – 3, 2011 Where: Portland, OR, USA at the Portland Art Museum
FITC Toronto 2011 “Now in its 10th year, FITC Toronto is one of the largest and longest running events of its kind in the world. With some of the most unique and engaging presenters from around the globe, FITC Toronto is a three day blitz of presentations, demonstrations, and panel discussions, sandwiched between our legendary FITC parties and abundant networking opportunities. Topped off with the FITC Award Show, it’s three days and nights that will leave you inspired, energized and awed.”
When: May 2 – 4, 2011 Where: Toronto, ON, Canada at the Guvernment
An Event Apart Boston “An Event Apart is an intensely educational two-day conference for passionate practitioners of standards-based web design. If you care about code as well as content, usability as well as design, An Event Apart is the conference you’ve been waiting for.”
When: May 2 – 4, 2011 Where: Boston, MA, USA at the Marriott Copley Place
CMS Expo “You’re invited to compare the best of the best in CMS and learn first-hand, from leading developers, designers and business minds of our time.”
When: May 2 – 4, 2011 Where: Chicago, Illinois, USA at the Hilton Orrington Hotel
WordCamp Developers “The conference will feature 2 tracks, one targeting WordPress UX topics and issues, and the other targeting strictly development issues. The day will also be host to a WordPress Un-Conference where participants are encouraged to pitch talks and join in discussion.”
When: May 5, 2011 Where: Vancouver, BC, Canada
Make Web Not War “At this conference, attendees will have the opportunity to learn about the latest technologies and techniques available to the ever-evolving web community. Here we will explore the power and flexibility of new web paradigms, mixed web environments, interoperable applications, and PHP on Windows and Azure. MWNW is about bridging the gap between different platforms, communities, and developers of all trades and backgrounds.”
When: May 6 – 7, 2011 Where: Vancouver, BC, Canada
J and Beyond “An International Joomla! Conference.”
When: May 6 – 8, 2011 Where: Kercrade, the Netherlands at the Rolduc Conference Centre
Google I/O Developer Conference “Google I/O brings together thousands of developers for two days of deep technical content, focused on building the next generation of web, mobile, and enterprise applications with Google and open web technologies such as Android, Google Chrome, Google APIs, Google Web Toolkit, App Engine, and more.”
When: May 10 – 11, 2011 Where: San Francisco, CA, USA at the Moscone Center
UX Lx: User Experience Lisbon “Three eventful days in Lisbon to learn from world renowned speakers and meet UX Professionals from around the world. Hone up your skills with 16 practical workshops, 26 thought provoking talks and enjoy the city with lots of networking activities.”
When: May 11 – 13, 2011 Where: Lisbon, Portugal at the FIL Meeting Centre
Mobilism “In two days we’ll explore the mobile world from a web-centric point of view. All of our speakers are deeply rooted in the web and have at one time or another decided to take their talent to mobile. They will teach you which web techniques work on mobile, which don’t, and which new ones you need in order to keep up with a rapidly changing web.”
When: May 12 – 13, 2011 Where: Amsterdam, the Netherlands, in Felix Meritis
Web Directions Unplugged “HTML5 is fast becoming the way to develop not just web apps, but native apps for platforms like Android, iOS and webOS. Join us for two groundbreaking days of practical development and design presented by leading experts in this exploding field.”
When: May 12 – 13, 2011 Where: Seattle, WA, USA at The Conference Center
Valio Con “Conference at the beach where it’s all about actual fun and not sitting in a hotel lobby the entire time.”
When: May 13 – 15, 2011 Where: San Diego, CA, USA
RailsConf “RailsConf, co-produced by Ruby Central, Inc. and O’Reilly Media, Inc., is the largest official conference dedicated to everything Ruby on Rails. Through keynotes, sessions, tutorials, events, and of course lots of hallway hacking, RailsConf is the meeting place for the Ruby on Rails community.”
When: May 16 – 19, 2011 Where: Baltimore, MD, USA
Future of Web Design “The Future of Web Design is coming back to London in 2011. Following on from the success of last year we will be bringing you a beautiful three full days of essential web learning.”
When: May 17-18, 2011 Where: London, UK at the The Brewery
TYPO Berlin “To shift is to pick up speed, to push the envelope, to change your perspective. All three are useful strategies for TYPO 2011, in order to bring visual communications in line with the latest developments in technology.”
When: May 19 – 21, 2011 Where: Berlin, Germany
InDesignSecretsLive Print and ePublishing Conference “Founded by world-renowned InDesign experts David Blatner and Anne-Marie Concepción, and dedicated to the proposition that InDesign professionals deserve a great learning experience, the Print and ePublishing Conference brings together over a dozen of the leading InDesign experts minds for three days of non-stop inspiration and education!”
When: May 23 – 25, 2011 Where: Alexandria, VA, USA at the Westin Alexandria
Gravity Free “GRAVITY FREE 2011 is a celebration of excellence in multidisciplinary design innovation. It stars a remarkable cast of world-class designers who are changing the way we see the world, from a diverse group of design disciplines”
When: May 24 – 26, 2011 Where: San Francisco, CA, USA at the
Web Directions @media “HTML5, CSS3, JavaScript, Mobile, Interaction Design, User Experience, and everything else that’s hot right now—it’s all on the carefully curated Web Directions @media program for 2011.”
When: May 24 – 27, 2011 Where: London, UK at Queen Elizabeth Hall
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.”
When: May 25 – 26, 2011 Where: Toronto, ON, Canada
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.”
When: May 25 – 27, 2011 Where: Portland, OR, USA at the Oregon Convention Center
International PHP Conference “The IPC is the global recognized event for PHP developers, webworkers, IT managers and everyone interested in web-technology. Again, the conference will focus on main topics for developers and core-technologies for decision makers. We will show how to scale your applications, explain the details of Continuous Integration or evaluate different approaches to NoSQL.”
When: May 29 – June 11 Where: Berlin, Germany at the Maritim proArte Hotel
webinale “Business, Design and Technology are the three basic pillars for success on the World Wide Web. This webinar has been prescribed for these three pillars of the first conference in 2007.”
When: May 30 – June 1, 2011 Where: Berlin, Germany at the Maritim proArte Hotel
June 2011 Events
Interlink Web Design Conference “nterlink Conference will be a small and carefully crafted 3-day web event that will appeal to all web professionals. This international web design conference welcomes website architects, usability specialists, project managers, marketing coordinators, web developers, website designers and any other online professional that wants to meet others in the industry and get inspired.”
When: June 2 – 4, 2011 Where: Vancouver, BC, Canada at The Capilano Performing Arts Theatre
Internet Week “Since 2008, Internet Week has taken place all over the city, thanks to our many partners hosting diverse events in different locations. The result is a critical mass of web-focused events that raises the profile of NYC’s industry as a whole, as well as the partners who participate.”
When: June 6 – 13, 2011 Where: New York City, NY, USA at Metropolitan Pavilion & The Altman Building, and around NYC
DIBI Conference “DIBI (pronounced “dibby”), is the annual Design It. Build It. Conference held at The Sage Gateshead in the North East of England. DIBI brings together both sides of the web coin for an unusual two-track web conference. World renowned speakers leading in their fields of work will talk about all things web.”
When: June 7 – 8, 2011 Where: Newcastle upon Tyne, UK
TYPO3 “We invite you to the North American TYPO3 conference held this year in San Francisco. This will be a great time to learn more about the powerful system we use everyday and to connect with other developers from both North America and Europe. Several internationally-known leaders of the TYPO3 community will be attending and presenting.”
When: June 9 – 11, 2011 Where: San Francisco, CA, USA at the Fort Mason Center
When: June 9 – 12, 2011 Where: New York City, NY, USA
UXcamp Europe “The main rule of the conference is: No spectators, just participants! This BarCamp-rule does not mean everybody has to do a Session, but everybody should come prepared to participate in an active manner.”
When: June 11 – 12, 2011 Where: Berlin, Germany at Erwin-Schrödinger-Zentrum of the Humboldt University
WordCamp Kansas City “WordCamps are community organized meetings for users of WordPress, the blogging platform and content management system that is sweeping the online world.”
When: June 11 – 12, 2011 Where: Kansas City, MO, USA at Johnson County Community College
An Event Apart Atlanta “An Event Apart is an intensely educational two-day conference for passionate practitioners of standards-based web design. If you care about code as well as content, usability as well as design, An Event Apart is the conference you’ve been waiting for.”
When: June 13 – 15, 2011 Where: Atlanta, GA, USA at the InterContinental Atlanta
140 Character Conference “The #140conf events provide a platform for the worldwide twitter community to: listen, connect, share and engage with each other, while collectively exploring the effects of the emerging real-time internet on business.”
When: June 15-16, 2011 Where: New York City, NY, USA
Nordic Ruby Conference “Come to Nordic Ruby 2011 and you will get a two day, single track Ruby conference, featuring the winning concept of 30 minute talks and 30 minute breaks. Very appreciated last year.”
When: June 16 – 18, 2011 Where: Gothenburg, Sweden
HOW Design Live “What do you call a mega-gathering of thousands of designers, freelancers, in-house managers and—new for 2011—packaging designers, plus a speaker roster packed with some of the brightest minds in the industry? HOW Design Live! Click the links below for more on each HOW Design Live event, then sign up for The BIG Ticket for exclusive access to all four conferences!”
When: June 22 – 27, 2011 Where: Chicago, IL, USA at the Hyatt Regency
Eyeo Festival “Three days of inspirational talks, demos, labs, and workshops and opportunities to connect with people whose extraordinary creations are pushing the envelope. The line up is amazing. 30 brilliant individuals, one amazing collection of talent and insight. Add yourself to the mix, and it just gets better.”
When: June 27 – 29, 2011 Where: Minneapolis, MN, USA at the McNamara Alumini Center
Future of Web Apps “The Future of Web Apps is coming to Las Vegas in 2011. The brand new event is a beautiful three full days of essential web learning.”
When: June 27 – 29, 2011 Where: Las Vegas, NV, USA at Meet exhibition venue
July 2011 Events
Designer/Developer Workflow Conference “What’s the big deal about workflow? Workflow is something we all do, day in and day out – although you may not even think about it. Do you work with multiple applications during the day? Do you work with team members, departments, clients, etc.? Improving those workflows is what D2W is all about.”
When: July 14 – 16, 2011 Where: Kansas City, MO, USA at the Crown Plaza Hotel
Front-End Design Conference “Front-End Conf is an event dedicated to content, presentation and behavior and to the awesome people in the design and development community.”
When: July 23, 2011 Where: St. Petersburg, FL, USA
The O’Reilly Open Source Convention “OSCON provides a central place to gain exposure to and evaluate the new projects, tools, services, platforms, languages, software and standards sweeping through the open source community and the broader technology industry.”
When: July 25-29, 2011 Where: Portland, OR, USA
re:build Conference “re:build is an intimate one-day event hosted in Downtown Indianapolis. We’re busy lining up some of our favorite speakers from all across the country. ”
When: July 29, 2011 Where: Indianapolis, IN, USA
UXCampLondon “A one day BarCamp in Richmond, London for anyone involved or interested in user experience design, interaction design, information architecture or usability.”
When: Summer, 2011 Where: London, UK
August 2011 Events
An Event Apart Minneapolis “An Event Apart is an intensely educational two-day conference for passionate practitioners of standards-based web design. If you care about code as well as content, usability as well as design, An Event Apart is the conference you’ve been waiting for.”
When: August 8 – 10, 2011, 2011 Where: Minneapolis, MN, USA at the InterContinental Atlanta
WordCamp “WordCamp San Francisco is the official annual conference of the WordPress open source project. WordCamp SF 2010 brought together 700+ WordPress users and developers from around the world. In 2011 we’re expanding the programming for publishers, bloggers, and developers.”
When: August 12 – 14, 2011 Where: San Francisco, CA, USA at the Mission Bay Conference Center
Drupalcon London “DrupalCon is an international event that brings together the people who use, develop, design and support the Drupal platform. DrupalCon London 2011 will feature content from the most influential people and brightest minds within the Drupal community and beyond, in addition to countless opportunities for networking, code sprints, and more.”
When: August 21 – 26, 2011 Where: London, UK
UX Australia “The conference covers core user experience design topics – strategy, user-centred design, interaction design, information architecture, information design, service design, content & visual design. It’s not just digital though, and will also include presentations on the design of physical objects and environments.”
When: August 22 – 26, 2011 Where: Sydney, Australia at Four points by Sheraton
UX Week “Calling UX professionals (or aspiring professionals) of all levels! Join us at UX Week 2011, the premier user experience conference, for fun times , inspiring sessions on the main stage and roll-up-your-sleeves learning during two full days of workshops. It’s going to rock.”
When: August 23 – 26, 2011 Where: San Francisco, CA at The Mission Bay Conference Center at UCSF
Related Links
Conference Roundup A web app inspired by the original conference roundup here on Smashing Magazine.
ontwik Lectures, Screencasts And Conferences For Real Web Developers & Designers
What Event Will You Attend?
Have you attended one of these conferences before, or do you plan to attend any in 2011? Why do you enjoy attending these types of events? Which ones do you recommend and why? Please let us know in the comments.
![Phoenix Design Week[s]](http://media.smashingmagazine.com/wp-content/uploads/2011/09/phoenix-design.jpg)
