BlogmyQuery – BMQ

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:

• September Events
• October Events
• November Events
• December Events
• January Events
• February Events

September Events

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

When: October 6-7, 2011
Where: Amsterdam, The Netherlands, at the Pathé Tuschinski

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.

• In Control Web Design Conference (February 20-21, 2012 in Orlando, FL, USA)
• Webstock (February 13-17, 2012 in New Zealand)
• CICON (February, 2012 in London, UK)

Related Resources

• Lanyrd – the Social Conference Directory
  The comprehensive and most popular resource for organizers and attendees of conferences.
• 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.

---

© Louis Lazaris for Smashing Magazine, 2011.

Animated gifs, while being considered the bane of certain one-time popular social networking sites, have long been criticized by the design community. Seen as mere throwbacks to a less mature stage in the life of the internet, and therefore written off by many in the field. However, a creative duo took these throwbacks in a completely artistic and inspired direction. Using high speed photography and animating masked sections, of the images, Jamie Beck and Kevin Burg have given rise to a new trend in the photography field, Cinemagraphs.

More than your basic animated image, these not-so still life captures have elements (some major, some minor) within the photograph that are set in motion. Taking the photograph into a interesting new realm, that has begun to catch on, and spread like wildfire. Below we take a look through some of the images from the gallery of the two innovative minds that begat this visually intriguing artform.

Jamie Beck & Kevin Burg

When photographer Jamie Beck partnered with graphic artist Kevin Burg, cinemagraphs (which until then were tinkering ideas in Burg’s mind) came to life. The two collaborated to take the field of photography and carve out a new niche within it that would forever change the way we view and capture those once frozen moments from time.

Excerpt from the Site

A Cinemagraph is an image that contains within itself a living moment that allows a glimpse of time to be experienced and preserved endlessly.

On their site Cinemagraphs, you can view their many more amazing pieces than the handful we have gathered here. If you have some spare time, it really is worth going through. As we mentioned, here are just a few:

With Coco Rocha

The following set was created when Beck and Burg spent the day with fashion model Coco Rocha. Through these gorgeous captures, we see the deeply emotive nature that cinemagraphs can contain. Elevating the impact the photographs would otherwise pack.

Misc

Below are some cinemagraphs by random artists who have taken to this new form, and wrought some inspiring works from its grips. They have brilliantly gone through the door opened wide Beck and Burg. Enjoy!

Cinemagraph by burakereno

Vela by Osvaldo Gon

Untitled by m-a-r-v-i-n

An Endless Song by MarvelousJewFish

As Time Goes By by Ludmila Vilarinhos

A Loop In Time by Edouard Olszewski (2 from the set featured)

Untitled by Mark Saldana

Swaying by MarvelousJewFish

Create Your Own

Naturally, we couldn’t let you out of here without providing you with a few resources that you can take along with you in case you want to try your own hand at this artform. Or if you would just like to see more specifically how it is done. Either way, be sure that you take a look at the tips and tuts offered below.

• How to Make Cinemagraphs — Still Photos that Move Like Movies!
• Cinemagraph Tutorial
• Cinemagraph/Subtle GIF Tutorial
• How to Make a Cinemagraph with Photoshop and After Effects
• How To Make Your Own CinemaGraph In Photoshop CS5
• How To Make A Cinemagraph

(rb)

Anyone designing Web-based properties today requires a basic understanding of interaction design principles. Even if your training is not formally in human-computer interaction, user experience design or human factors, knowing the fundamentals of these disciplines greatly enhances the chances of your design’s success. This is especially true for visual designers. Many visual designers are formally trained in art school and informally trained at interactive agencies.

While these institutions focus on designing communications, neither typically provides a strong interaction design foundation. Having a broader skill set not only makes your designs more successful but makes you more valuable and employable (i.e. you become the unicorn). While in no way exhaustive, to get you started, here are five key tactics to understand and implement in your next project.

Image credit: Kristian Bjornard

1. Talk To Your Customers

The most important thing to understand when designing an online experience is your audience. Understanding who they are, what they do for a living, how old they are, how they work, what they know about the Web, how they use it, on what devices, where and so on provides invaluable insight into their pain points that you are out to solve.

Setting clear constraints on your design also helps. For example, if your audience will predominantly be using mobile devices to access the Web in hospitals, then your design must be responsive to those devices and be compatible with the environments where the devices will be used. In addition, understanding your audience builds on a communication design foundation by revealing your users’ sensitivities (physical or cultural, for example) to things like color and typography.

Understanding your audience requires conversation with target users. These conversations can happen in a variety of forums. While impersonal approaches such as surveys work well enough, nothing beats face-to-face conversations with your customers. Depending on who you’re targeting with your work, finding your target audience may be as simple as going down to the local coffee shop, buying a handful of $5 gift cards and striking up conversations with the patrons there. Most people will gladly exchange 10 to 15 minutes of sharing their opinion for a coffee shop gift card. Other ways to find users are to post ads on websites like Craigslist, pull names off your customer lists, reach out to trade organizations (for specific user types, like nurses) and spend time in locations where your audience spends time (for example, music fans at a concert).

The initial conversations will be awkward, but as more and more take place, a rhythm develops to the questions. Also, patterns begin to emerge, allowing you to tailor the questions more appropriately with each interview. The lessons you take away from these activities can be used to create personas — i.e. aggregate representations of typical users of your design — that can help provide context to future design decisions.

A persona document. (Image: Todd Zaki Warfel)

2. Orient The User

Now that you’ve got an understanding of who your user is, orienting them when they use your design is important. Orienting your users gives them a sense of place in a non-static experience. To effectively provide that sense, your design should tell users three things:

1. Where they are
   Critical to any online experience is understanding where, in the broader context of the website, the user is currently transacting. If it’s clear to the user where they are, then there is a greater chance they’ll understand what you need them to do on that page. For example, if the user is aware they are on a “product page,� they should expect to see a purchase link and perhaps some other product options.
2. How they got there
   If providing clarity on the user’s current location provides context for expected actions, then showing them the path they took to get there provides a safety net. That safety net is the comfort of knowing that if the user has wound up in the wrong place, they can back out and try again.
3. Where they can go from here
   You’ve made it clear where they are and how they got there; if they are in the wrong spot they can backtrack and try another path. But if they’re ready to move forward or they believe the path back won’t provide the content they desire, then letting your users know what options are available from this point on is imperative. Never leave a user in a dead end. There should always be an option to proceed. A perfect example of this is a search results page that yields no results. While you should let the user know that nothing matches their search query, there should be options that lead them to the answers they seek (for example, related search terms). Ways forward can be manifested in your website’s navigation but can also be implemented as affordances. Affordances are elements in the interface that are obviously clickable, such as buttons and sliders.

Amazon does a good job with its no-results page.

(For a great primer on affordances, pick up Don Norman’s The Design of Everyday Things. While a bit dated, it lays a solid foundation for how product designers should think about their products.)

Clear website orientation provides comfort to users. It also reduces the chances that users will make mistakes and increases the chances that, when they do, they’ll be able to recover quickly.

3. Simpler Is Better

Visual designers are driven to add elements to a layout that may be aesthetically pleasing but don’t necessarily serve an interaction purpose. While certainly much is to be said for aesthetics adding to the polish and feel of an experience, when designing an interactive experience, consider opting for simpler design. Simplification means reducing the elements on the screen down to the most basic ones, the ones that will facilitate the task that the user has to complete. Start with that as a baseline, and then add ornamentation sparingly. Consider the brand of the website. The brand is a reflection not only of the aesthetic but of the experience. If a website is gorgeous, but its beauty makes completing a transaction impossible, then the website (and brand) will ultimately fail.

Aesthetics will always have a place and powerful purpose in any experience, yet ensuring that the experience is usable first is critical.

4. Design For A Dialog

Where visual design training focuses primarily on communication, interaction design puts a heavy focus on feedback loops — in essence, a conversation between the user and the website. As you work out an experience, provide ways for the system to communicate back to the user when they’ve done something right or wrong. Ensure that your experience makes clear when the user has succeeded and when an action is required to complete a transaction. Use your visual design and communication skills to build a visual language for this feedback dialogue. Ensure that no matter where the user is in the experience, any information that is coming from the website is consistent in design and presentation method. Different types of information will require different treatments. The user will learn the system quickly, and a dialogue with the website will begin to occur. In essence, you’re humanizing the experience (and the company behind it) by proactively predicting your users’ needs and presenting information and actions that mitigate user frustration.

Think Vitamin keeps the conversation going with its readers.

5. Workflow: Understanding The Before And After

Visual design is beautiful. It’s also static. Interaction design builds a workflow from page to page and from state to state. As you design each page, consider what the user can do on this page and how the next step in the process fits into the workflow. If you’ve just added a sign-up form to the page, think about what will happen when the user presses the “Submit� button. Will the page refresh? Will there be a confirmation page? What if there are errors in the form? What if the user hits the “Back� button? These are all components of the workflow of the experience. Each page or state is just one small component in the user’s click stream. The challenge is that each user might have a relatively unique click stream, depending on how they got to your website and why they came. You’ve used your knowledge of the user to orient them, and you’ve provided a simple interface that creates a successful dialogue with them: now ensure that each interaction has a logical next step. That next step should fit into the experience and visual language that you’ve created, so that the experience feels whole and consistent. These elements are what add credibility to the brand and increase users’ trust in your design.

Bonus Tip: Understand Your “Materials�

Jonathan Ive, designer of the iPod (among other things), promotes the idea that designers of all types must understand the material they’re working with. This hold true for interaction design as well. Understanding the “materials� that make up the Web is critical. A cursory education in HTML, CSS, JavaScript and related technologies will only enhance your understanding of the medium and provide a realistic perspective on your designs. A great resource for this is the group of developers who will be implementing your work. Strike up regular conversations with them about your design, and get a taste of whether your proposals are feasible given the technologies they employ. Even better, start learning the basics yourself. You don’t have to become a star coder, but knowing enough about how the medium in which you work behaves can greatly shape the interactions you design.

Summary

Interaction design is a multi-faceted discipline that links static communications together to form an experience. Understanding the basic principles of this discipline is core to designing websites that are not only aesthetically pleasing but that actually solve business problems and bring delight to their users. This article just scratches the surface of interaction design. For Web designers of any kind, considering these fundamentals when designing any transaction or interaction is imperative.

(al)

---

© Jeff Gothelf for Smashing Magazine, 2011.

Today we will be creating a design fit for any number of St. Patrick’s Day uses. In this tutorial you will find useful information on how to create a pile of golden coins and a Pilgrim hat. There is one very convenient way to create a hat in Adobe Illustrator. It includes 3D effect Revolve. Revolve is a very handy tool which will create 3D objects in just a few steps. However, it has one flaw. It creates too many anchor points that can be an obstacle in the printing process. We will try to avoid that and to create our illustration with simple tools, such as the Pen Tool (P), Ellipse Tool (L) and Rectangle Tool (M).

So let’s get this started!

This is what we will be creating.

Creating the Hat

Let’s break the creation process into a few parts. First, we’ll create the Crown. So, grab the Pen Tool (P) from the Tool Panel and create the shape as it is shown in the picture below.

As you can see, the right side of the shape is a little bit longer than the left side. Besides that, the new shape looks a little bit deformed. The reason for drawing a shape like this is the perspective. When you are using 3D effects you don’t have to think about perspective. Software will think about that and perspective will be included automatically. Sometimes, drawing the illustration manually can be tricky. You have to be aware of the existence of the perspective, which will give your illustration a realistic look. This is something we should keep in mind.

Next part of the hat is the Brim. Grab the Ellipse Tool (L) and create one larger ellipse for the Brim,

and, one smaller one for the top of the hat.

This is the basic shape of the hat. Select all the elements and rotate the hat as it shown on the picture below.

We will apply a radial gradient to the top of the hat.

Creating Details

You’ll probably agree that the Brim is too thin. Let’s create the thickness.

Select the larger ellipse and duplicate it (Ctrl / Cmd + C, Ctrl / Cmd + F). Nudge the copy downwards for 2 - 3 pixels. Feel free to adjust the anchor points until you make a perfect match.

Apply the linear gradient as it’s shown on the picture below.

Let’s create some edge highlights.

Duplicate the smaller ellipse on the top of the hat twice (Ctrl / Cmd + C, Ctrl / Cmd + F). Nudge one of the copies upwards, select both copies and under the Pathfinder Panel hit the Minus Front button.

Set the Fill color to #939598.

Repeat the previous step for the larger ellipse.

Creating a Hatband

It is time to create a ribbon with a buckle. This is the final detail that will complete our hat construction.

Grab the Pen Tool (P) from the Tool Panel and create a shape as it is shown below.

Make sure to create the bold sides of the ribbon. This way it looks like the ribbon is going around the Crown.

Apply a nice linear gradient. Make sure to create a small highlight on the left side of the ribbon, as a result of the influence of light.

We have to create an edge for the ribbon as well. It will give the illustration a certain depth.

Duplicate the green ribbon (Ctrl / Cmd + C, Ctrl / Cmd + F) twice. Nudge one of the copies downwards for 1 pixel. Select both of the copies and under the Pathfinder Panel hit the Minus Front button.

You will end up with something like this.

We have to adjust the new shape a little bit. There are some anchor points that spoil the shape we have just created. Just grab the Delete Anchor Points Tool (-) and remove the excess anchor points.

With the Direct Selection Tool (A) adjust the handler of the anchor points to perfect the shape.

A linear gradient will help us to emphasize the thickness of the ribbon.

For creating the buckle we will need the Rounded Rectangle Tool. Create a rounded rectangle like below.

Under the Object select Path > Offset Path. Set the value for the Offset to -20.

As you can see, we have created a smaller rectangle with sharp corners, but we need a rectangle with rounded corners. Under the Effect select Stylize > Round Corners. Set the value for Radius to 10 pt.

In order to be able to use the new rounded rectangle we have to expand the shape (Object > Expand Appearance).

Select both rectangles and under the Pathfinder Panel hit the Minus Front button. You should end up with something like this.

This is the basic shape of the buckle. Let’s do some adjustment for creating the necessary depth.

Duplicate (Ctrl / Cmd + C, Ctrl / Cmd + F) the pink shape and change the color to blue (for easier manipulation). Nudge the copy downwards for 1 -2 pixels.

Let’s apply nice linear gradients.

To make it more realistic we will create nice edge highlights, just like we did for the hat.

Select the front shape of the buckle, duplicate it twice (Ctrl / Cmd + C, Ctrl / Cmd + F) and nudge one of the copies for 1 pixel downwards and for 1 pixel to the right. Select both copies we have just created and under the Pathfinder Panel hit the Minus Front button. Set the Fill color of the highlight to #FFF9AE.

Group (Ctrl / Cmd + G) all the elements, rotate the buckle and place it on the hat.

A small shadow that the buckle is casting on the ribbon will benefit the semi-realistic look we are trying to achieve.

Just duplicate the buckle (Ctrl / Cmd + C, Ctrl / Cmd + F), Ungroup it (Shift + Ctrl / Cmd + G) and under the Pathfinder Panel hit the Unite button.

Make sure to place the new shape underneath the buckle and nudge it for few pixels to the right.

Duplicate the green ribbon (Ctrl / Cmd + C, Ctrl / Cmd + F). Select both new shapes and under the Pathfinder Panel hit the Intersect button.

Set the Fill color of the new shape to #0D350E.

With some light reflections our hat is complete.

Grab the Pen Tool (P) from the Tool Panel and create a shape like the one shown in the picture…

…and apply a linear gradient.

Do the same for the brim.

Creating the Golden Coins 

It is time to make a “fortune”. We will create a shiny pile of coins.

Grab the Ellipse Tool (L) from the Tool Panel and create an ellipse.

Holding the Alt / Opt key on the keyboard click on the ellipse and drag it upwards (don’t forget to hold the Shift key for straight dragging). This way we are making a copy of the ellipse.

Grab the Rectangle Tool (M) from the Tool Panel and create a rectangle as it shown on the picture below.

Make sure to match endpoints properly.

When you are done adjusting the position of the anchor points, select the red rectangle and the blue ellipse and under the Pathfinder Panel hit the Unite button. It will convert these two shapes into one.

Bring to front (Shift + Ctrl / Cmd + ]) the green ellipse and start to apply some nice gradients.

Select the ellipse and under Object select Path > Offset Path. Set the value for Offset to -1.5 pt.

Apply a linear gradient.

Duplicate (Ctrl /Cmd + C, Ctrl / Cmd + F) the smaller ellipse. Grab the the left middle point of the selection box and move it just a little bit to the right side (so-calling non-uniform scale). Apply a linear gradient to this ellipse too.

Group (Ctrl / Cmd + G) all the elements. Duplicate (Ctrl / Cmd + C, Ctrl / Cmd + F) the coin many times and place the copies in a big pile.

Place the hat on the top of the pile, as shown.

Apply a green radial gradient to the background.

As you can see, something is missing. We can’t leave the illustration like this. It looks like the hat and the coins are floating in the air. Some shadows will fix that.

We will have to create a shadow for each coin.

Choose one coin and duplicate it (Ctrl / Cmd + C, Ctrl / Cmd + F). Ungroup the copy (Shift + Ctrl / Cmd + G) and under the Pathfinder Panel hit the Unite button. Set the Fill color of the new shape to #10340D. Send it behind the coin (Ctrl / Cmd + [) and rotate to look as it shown on the picture below.

Repeat the previous step for each coin that is touching the surface.

We have to create a shadow for the hat as well. Grab the Ellipse Tool (L) and create an ellipse like pictured. Make it sure to set the hat on the top of the ellipse. This way you’ll be able to find the right angle and position for the new shadow.

Select the pile of coins and duplicate it (Ctrl / Cmd + C, Ctrl / Cmd + F). Ungroup (Shift + Ctrl / Cmd + G) the copy we have just made and under the Pathfinder Panel hit the Unite button. You should end up with something like this.

Select the white ellipse and the pink shape and under the Pathfinder Panel hit the Intersect button. Set the Fill color to #FF4200 and lower the Opacity to 30%.

For the other part of the shadow we will once again need the Pen Tool (P). Create a shape as it’s shown on the picture below. Set the Fill color to #1A3219.

We will create a tiny border in order to give the illustration a postcard feel. Select the background and under the Object select Path > Offset Path. Set the value for Offset to -10. Remove the Fill color and set the Stroke to 5 pt.

Under Object hit the Expand button. It will turn the closed path into the editable path. Apply a linear gradient like the one below.

And…voila! Our illustration is finished.

Conclusion

There are many ways to realize a good idea, but sometimes it is not that simple to choose the right technique to create a great looking illustration. Adobe Illustrator is not the type of software which will automatically generate the effect based on given instructions. Most of the things you have to plan well, to find a way to create the illusion of something that actually does not exist. It includes turning flat shapes into a 3D illustration just by using the right color gradients or a wised placed shadow. With a creative idea and the right technique a good result will be guaranteed.

Thank you for following along.

(rb)

I’ve been using LESS religiously ever since I stumbled upon it months ago. CSS was never really a problem for me, in and of itself, but I was intrigued by the idea of using variables to create something along the lines of a color palette for my websites and themes. Having a color palette with a fixed number of options to choose from helps prevent me from going color crazy and deviating from a chosen style.

As it turns out, LESS — and Sass for that matter — are so much more than that. LESS and Sass share a lot of similarities in syntax, including the following:

• Mixins – Classes for classes.
• Parametric mixins – Classes to which you can pass parameters, like functions.
• Nested Rules – Classes within classes, which cut down on repetitive code.
• Operations – Math within CSS.
• Color functions – Edit your colors.
• Namespaces – Groups of styles that can be called by references.
• Scope – Make local changes to styles.
• JavaScript evaluation – JavaScript expressions evaluated in CSS.

The main difference between LESS and Sass is the way in which they are processed. LESS is a JavaScript library and is, therefore, processed client-side.

Sass, on the other hand, runs on Ruby and is processed server-side. A lot of developers might not choose LESS because of the additional time needed for the JavaScript engine to process the code and output the modified CSS to the browser. There are a few ways around this. The way I get around it is to use LESS only during the development process. Once I’m finished, I copy and paste the LESS output into a minifier and then into a separate CSS file to be included in place of the LESS files. Another option is to use LESS.app to compile and minify your LESS files. Both options will minimize the footprint of your styles, as well as avoid any problems that might result from the client’s browser not running JavaScript. While this is not likely, it’s always a possibility.

LESS Is More

Installation

Including LESS in something that you’re building is about as easy as it gets:

1. Go get yourself a copy of less.js;
2. Create a file to put your styles in, such as style.less;
3. Add the following code to your HTML’s <head>:

<link rel="stylesheet/less" type="text/css" href="styles.less">
<script src="less.js" type="text/javascript"></script>

Note the rel attribute of the link. You are required to append the /less to the end of the value in order for LESS to work. You are also required to include the script immediately after the link to the style sheet. If you’re using HTML5 syntax, and I can’t imagine why you wouldn’t be, you can leave out the type="text/css" and the type="text/javascript".

There’s also a server-side version of LESS. The easiest way to install LESS on the server is with Node Package Manager (NPM).

Variables

If you’re a developer, variables are one of your best friends. In the event that you’ll be using information repeatedly (in this case, a color), setting it to a variable makes sense. This way, you guarantee yourself consistency and probably less scrolling about looking for a hex value to copy and paste. You can even do some fun little adding and subtracting of hex values that you want to render. Take this example:

@blue: #00c;
@light_blue: @blue + #333;
@dark_blue: @blue - #333;

If we apply these styles to three divs, we can see the gradated effect created by adding and subtracting the hex values to and from the original blue:

The transition from @light_blue to @blue to @dark_blue.

The only difference in variables between LESS and Sass is that, while LESS uses @, Sass uses $. There are some scope differences as well, which I’ll get to shortly.

Mixins

On occasion, we might create a style that’s intended to be used repeatedly throughout the style sheet. Nothing is stopping you from applying multiple classes to the elements in the HTML, but you could also do this without ever leaving your style sheet, using LESS. To illustrate this, I have pasted some sample code that one might use to style two elements on the page.

.border {
border-top: 1px dotted #333;
}

article.post {
background: #eee;
.border;
}

ul.menu {
background: #ccc;
.border;
}

This will give you something similar to what you would get if you had gone back to the HTML file and added the .bordered class to the two elements there — except you’ve done it without leaving the style sheet. And it works just as well:

Both the article and the unordered list share the border style.

With Sass, you declare @mixin prior to the style to identify it as a mixin. Later, you declare @include to call it.

@mixin border {
border-top: 1px dotted #333;
}

article.post {
background: #eee;
@include border;
}

ul.menu {
background: #ccc;
@include border;
}

Parametric Mixins

Like having functions in your CSS (*swoon*), these can be immensely useful for those seemingly redundant tasks of modern-day CSS. The best and most useful example of their use relates to the many vendor prefixes that we struggle with during this transition from CSS2 to CSS3. Nettuts+ has a wonderful webcast and article by Jeffrey Way, with details on including a file consisting entirely of useful parametric mixins that cover most of your favorite CSS3 properties in the respective vendor prefixes. For example, a simple mixin to handle rounded corners in their various forms:

.border-radius( @radius: 3px ) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
border-radius: @radius;
}

In this case, the .border-radius class has a default radius of 3 pixels, but you can pass whatever value you like to get a rounded corner of that radius. Something like .border-radius(10px) will round the corners by 10 pixels.

The syntax in Sass is very similar to that of LESS. Just use the $ for variables, and call the mixins with the @mixin and @include method mentioned earlier.

Selector Inheritance

Here’s something not provided in LESS. With this ability, you can append a selector to a previously established selector without the need to add it in a comma-separated format.

.menu {
	border: 1px solid #ddd;
}

.footer {
	@extend .menu;
}

/* will render like so: */
.menu, .footer {
	border: 1px solid #ddd;
}

Nested Rules

Nesting classes and ids in CSS can be one of the only methods to keep your styles from interfering with and from being interfered with any other styles that may be added along the way. But this can get very messy. Using a selector like #site-body .post .post-header h2 is unappealing and takes up a lot of unnecessary space. With LESS, you can nest ids, classes and elements as you go. Using the example above, you could do something like this:

#site-body { …

    .post { …

        .post-header { …

            h2 { … }

            a { …

            	&:visited { … }
            	&:hover { … }
            }
        }
    }
}

The above code is essentially the same as the ugly selector in the previous paragraph, but it’s much easier to read and understand, and it takes up much less space. You can also refer in element styles to their pseudo-elements by using the &, which in this case functions similar to this in JavaScript.

Operations

This is about what you would expect: using fixed numbers or variables to perform mathematical operations in your styles.

@base_margin: 10px;
@double_margin: @base_margin * 2;

@full_page: 960px;
@half_page: @full_page / 2;
@quarter_page: (@full_page / 2) / 2;

For the record, I am aware that I could have also divided by four to get the @quarter_page variable, but I wanted to illustrate that the parentheses rule from the “order of operationsâ€� also applies. Parentheses are also required if you’re going to perform operations within compound properties; for example, border: (@width / 2) solid #000.

Sass is a lot more versatile with numbers than LESS. It has built into it conversion tables to combine comparable units. Sass can work with unrecognized units of measurement and print them out. This feature was apparently introduced in an attempt to future-proof the library against changes made by the W3C.

/* Sass */
2in + 3cm + 2pc = 3.514in

/* LESS */
2in + 3cm + 2pc = Error

Color Functions

Earlier, I mentioned how LESS helps me stick to a color scheme in my coding process. One of the parts that contributes to this the most is the color function. Suppose you use a standard blue throughout your styles, and you want to use this color for a gradated “Submit� button in a form. You could go into Photoshop or another editor to get the hex value for a slightly lighter or darker shade than the blue for the gradient. Or you could just use a color function in LESS.

@blue: #369;

.submit {
    padding: 5px 10px;
    border: 1px solid @blue;
    background: -moz-linear-gradient(top, lighten(@blue, 10%), @blue 100%); /*Moz*/
    background: -webkit-gradient(linear, center top, center bottom, from(lighten(@blue, 10%)), color-stop(100%, @blue)); /*Webkit*/
    background: -o-linear-gradient(top, lighten(@blue, 10%) 0%, @blue 100%); /*Opera*/
    background: -ms-linear-gradient(top, lighten(@blue, 10%) 0%, @blue 100%); /*IE 10+*/
    background: linear-gradient(top, lighten(@blue, 10%) 0%, @blue 100%); /*W3C*/
    color: #fff;
    text-shadow: 0 -1px 1px rgba(0,0,0,0.4);
}

The lighten function literally lightens the color by a percentage value. In this case, it will lighten the base blue by 10%. This method enables us to change the color of gradated elements and any other elements with that color simply by changing the base color itself. This could prove immensely helpful in theming. Plus, if you used a parametric function, like the ones listed above, you could alleviate some of that browser-prefix tedium with something as simple as .linear-gradient(lighten(@blue), @blue, 100%);.

Either way, you get an effect that’s rather nice:

Our nicely gradated, variable-based “Submit� button.

There are a lot of other color functions for darkening and saturating colors and even spinning the color wheel to other colors. I recommend trying them out to see what you can come up with.

Sass seems to have a lot more color options — not that I would need them all. Lighten and darken are the only ones that I see myself using often. For more detail, Nex3 has an in-depth article on the topic.

Conditionals and Control

This is rather nifty, and another thing not provided by LESS. With Sass, you have the ability to use if { } else { } conditional statements, as well as for { } loops. It supports and, or and not, as well as the <, >, <=, >= and == operators.

/* Sample Sass "if" statement */
@if lightness($color) > 30% {
  background-color: #000;
} @else {
  background-color: #fff;
}

/* Sample Sass "for" loop */
@for $i from 1px to 10px {
  .border-#{i} {
    border: $i solid blue;
  }
}

Namespaces

Namespaces can be used to add another level of organization to our CSS, by allowing us to create groups of commonly used styles and then pick from them along the way. For instance, if we created a group of styles called defaults, we could pull from this group when we come across an element that needs it.

#defaults {
	.nav_list () {
		list-style: none;
		margin: 0; padding: 0;
	}
	.button () { … }
	.quote () { … }
}

Later, in our code, if we come across a ul element within a nav element, we would know that we’ll need our default style. So, we can simply call it, and it will be applied.

nav ul {
	#defaults > .nav_list;
}

Scope

Scoping is standard throughout programming and thus standard in LESS. If you define a variable at the root level of your style sheet, it will be available and consistent throughout the document. If, however, you redefine the variable from within a selector such as an id or class, then it will be available — with the new value — only within that selector.

@color: #00c; /* blue */

#header {
	@color: #c00; /* red */

	border: 1px solid @color; /* will have a red border */
}

#footer {
	border: 1px solid @color; /* will have a blue border */
}

Because we’ve restated the variable within the #header selector, the value for that variable will be different and will apply only within that selector. Anything before or after it will retain the value of the original statement.

Scope is handled a little differently in Sass. In the above code, when the @color variable is changed to red, it will be interpreted as such from that point on within the code.

Comments

This part is pretty basic. Two types of comments are valid in LESS. The standard CSS comment, /* comment */, is valid and will get passed through the processing and outputted. Single-line comments, // comment, work as well but will not get passed and outputted and, as a result, are “silent.â€�

Importing

Importing is pretty standard, too. The standard @import: 'classes.less'; works just fine. If, however, you’re importing another LESS file, then the file extension is optional, so @import 'classes'; would work as well. If you want to import something without LESS processing it, you can use the .css extension (for example, @import: 'reset.css';).

String Interpolation

String values can also be used in variables and called within styles via @{name}.

@base_url = 'http://coding.smashingmagazine.com';
background-image: url("@{base_url}/images/background.png");

Escaping

There will be times when you need to include a value that is not valid CSS syntax or that LESS doesn’t recognize. More often than not, it will be some crazy Microsoft hack. To avoid throwing errors and breaking LESS, you will need to escape them.

.class {
	filter: ~"progid:DXImageTransform.Microsoft.Alpha(opacity=20)";
}

/* Will actually be outputted like this: */
.class {
	filter: progid:DXImageTransform.Microsoft.Alpha(opacity=20);
}

JavaScript Evaluation

This is one of my favorite parts of LESS: using Javascript in style sheets — simply brilliant. You can use expressions and also reference aspects of the environment using backticks.

@string: `'howdy'.toUpperCase()`; /* @string becomes 'HOWDY' */

/* You can also use the previously mentioned interpolation: */
@string: 'howdy';
@var: ~`'@{string}'.topUpperCase()`; /* becomes 'HOWDY' */

/* Here we access part of the document */
@height = `document.body.clientHeight`;

Output Formatting

Whereas LESS has no output settings, Sass provides four output versions: nested, compact, compressed and expanded.

Final Thoughts

These two libraries share a lot of basics. Both of them are fantastic tools for designers who code, and they can also help developers work more efficiently and quickly. If you’re a fan of Ruby or HAML, then Sass might be right up your ally. For me, being a PHP and JavaScript geek, I tend to lean towards LESS for its ease of inclusion and access to JavaScript’s expressions and document attributes. I doubt that I’ve even come close to truly grasping the possibilities of programming in my style sheets, but I am intent on trying. If you’ve been using either, or both, of these in your work, I’d love to hear more about it and see some of your results. Tips, tricks and corrections are, of course, always welcome as well.

(al)

---

© Jeremy Hixon for Smashing Magazine, 2011.