Web Directions » css http://www.webdirections.org Just another WordPress weblog Fri, 27 Jan 2012 00:02:10 +0000 en hourly 1 http://wordpress.org/?v=3.2.1 Nicole Sullivan — CSS Power Toolshttp://www.webdirections.org/resources/nicole-sullivan-css-power-tools/ http://www.webdirections.org/resources/nicole-sullivan-css-power-tools/#comments Mon, 14 Nov 2011 10:12:03 +0000 Guy Leech http://www.webdirections.org/?p=3793 Photo of Nicole SullivanIn this session, you’ll learn about good tools that can make CSS development faster and maintenance easier.

]]> Web Directions South 2011, Sydney, October 14th.

Presentation slides

Session description

Let’s admit it, the tools for writing CSS aren’t very advanced. For the most part, the people who write tools don’t know about CSS and the people who know about CSS don’t write tools. Quite a conundrum! In this session, you’ll learn about good tools that can make development faster and maintenance easier. We’ll also talk a bit about where we can go from here. What tools do we need as sites are becoming more and more complex? We need to get beyond tools whose primary goal is to avoid hand-coding and realize that, as our techniques for writing CSS become more powerful, our tools can too! Session will include:

  • Validators
  • Preprocessors
  • Finding dead rules
  • Linting
  • CSS3 gradient tools
  • Performance measurement tools
  • Unit testing

About Nicole Sullivan

Photo of Nicole SullivanNicole is an evangelist, front-end performance consultant, CSS Ninja, and author. She started the Object-Oriented CSS open source project, which answers the question: how do you scale CSS for millions of visitors or thousands of pages? She also consulted with Facebook and the W3C, and is the co-creator of Smush.it, an image optimization service in the cloud. She is passionate about CSS, web standards, and scalable front-end architecture for large commercial websites.

She co-authored Even Faster Websites and blogs at stubbornella.org.

Follow Nicole on Twitter: @stubbornella

]]> http://www.webdirections.org/resources/nicole-sullivan-css-power-tools/feed/ 0 Greg Rewis — Move it! CSS3 Transitions and Animationshttp://www.webdirections.org/resources/greg-rewis-move-it-css3-transitions-and-animations/ http://www.webdirections.org/resources/greg-rewis-move-it-css3-transitions-and-animations/#comments Sat, 05 Nov 2011 22:37:38 +0000 Guy Leech http://www.webdirections.org/?p=3797 Photo of Greg RewisIn this session, we’ll take a look at all of the possibilities and explore what works and where — from the simplest effects, to creative usability enhancements including the combination of CSS with mobile Javascript frameworks.

]]> Web Directions South 2011, Sydney, October 14th.

Presentation slides

Session description

Since the early days of the web, the only reliable way to get movement on your site was through Flash, or more recently, Javascript. But now, with WebKit and Mozilla leading the way, transformations and transitions can be done with pure CSS, even on mobile devices. And for those in need of even more movement, CSS3 provides for keyframe-based animations. In this session, we’ll take a look at all of the possibilities and explore what works and where — from the simplest effects, to creative usability enhancements including the combination of CSS with mobile Javascript frameworks.

About Greg Rewis

Photo of Greg RewisGreg Rewis is the Principal Evangelist for Adobe Systems, focusing on Adobe’s open web products and technologies such as HTML5, CSS3 and Javascript. With over 20 years of computer industry experience, Greg spends in excess of 200 days of the year on the road, talking with customers, giving product demonstrations at seminars, and speaking at industry conferences.

Greg has been passionate about the web since putting his first “home page” online in 1994. His career has taken him around the world, from the early days of desktop publishing, to a start-up in Hamburg, Germany, the glory days of the web at Macromedia and finally his current role at Adobe.

The original GoLive Cyberstudio Product Manager and former Dreamweaver Technical Product Manager, Greg is the co-author of “Mastering CSS with Dreamweaver CS3″ and “Mastering CSS with Dreamweaver CS4″ published by New Riders, as well as a regular contributor to industry publications.

Follow Greg on Twitter: @garazi

]]> http://www.webdirections.org/resources/greg-rewis-move-it-css3-transitions-and-animations/feed/ 0 Lea Verou — Mastering CSS3 gradientshttp://www.webdirections.org/resources/lea-verou-mastering-css3-gradients/ http://www.webdirections.org/resources/lea-verou-mastering-css3-gradients/#comments Sat, 04 Jun 2011 08:14:13 +0000 Guy Leech http://www.webdirections.org/?p=3377 Photo of Lea VerouWith most browsers adding increasing support, and the simplicity of providing fallbacks for those that don’t, CSS3 gradients are something we can start to use right now. They benefit our users with faster websites and ourselves with more time in our hands to spend in other things, since they are easy to create, edit and update. A very powerful feature that can also be utilized for a surprising number of design effects, even ones that don’t resemble gradients at all. In this talk, Lea will explore CSS3 gradients in great depth and it’s almost guaranteed that no matter your expertise level, you will walk out having learned new things.

]]> Web Directions @media 2011, London, May 26th 10:45am.

Presentation slides

Session description

With most browsers adding increasing support, and the simplicity of providing fallbacks for those that don’t, CSS3 gradients are something we can start to use right now. They benefit our users with faster websites and ourselves with more time in our hands to spend in other things, since they are easy to create, edit and update. A very powerful feature that can also be utilized for a surprising number of design effects, even ones that don’t resemble gradients at all. In this talk, Lea will explore CSS3 gradients in great depth and it’s almost guaranteed that no matter your expertise level, you will walk out having learned new things.

About Lea Verou

Photo of Lea VerouLea Verou is a front-end engineer currently living in Greece. She discovered programming at the young age of 12 (web development a few years after) and it was love at first …line. In 2008, she co-founded Fresset Ltd, whose websites have attracted a large following in the Greek internet scene, they are currently working frantically on their first international project.

Fed up with the lack of proper web development education in Greece, she co-organised a university course which teaches all aspects of modern, standards-based Web development, including CSS3, HTML5 and ES5 as regular parts of its content.

During her spare time, she blogs about CSS, JavaScript and web usability at leaverou.me.

Follow Lea on Twitter: @LeaVerou

]]> http://www.webdirections.org/resources/lea-verou-mastering-css3-gradients/feed/ 5 Divya Manian — Creative CSS3http://www.webdirections.org/resources/divya-manian-creative-css3/ http://www.webdirections.org/resources/divya-manian-creative-css3/#comments Sun, 29 May 2011 00:13:24 +0000 Guy Leech http://www.webdirections.org/?p=3251 Photo of Divya ManianFind out how to creatively use new features of CSS3 (gradients, multiple backgrounds, generated content, and many more) to give life to your design ideas, make them adaptable and maintainable, and provide the best experience possible on an array of platforms.

]]> Web Directions Unplugged 2011, Seattle, May 12th 11:45am.

Presentation slides

External slides

Session description

Being a front-end designer used to mean pixel hacking and endless rounds of pain while trying to make sites and applications “look the same in each browser”. Thankfully, we now live in more interesting times. But as we strive to make our web apps a pleasure to use, the vast array of tools and techniques available to us present their own set of challenges. In this session you will learn to ask the right questions to guide your choice of tools and the design.

Find out how to creatively use new features of CSS3 (gradients, multiple backgrounds, generated content, and many more) to give life to your design ideas, make them adaptable and maintainable, and provide the best experience possible on an array of platforms.

Finally, you’ll hear how to create a library of simple and ready-to-use design patterns, that you can incorporate into your workflow to bring your designs to life much faster.

About Divya Manian

Photo of Divya ManianDivya Manian is a Web Designer in Seattle. She made the jump from developing device drivers for Motorola phones to designing websites and has not looked back since. She takes her duties as an Open Web vigilante seriously which has resulted in collaborative projects such as HTML5 Readiness and HTML5 Boilerplate. Speaker Photo: © Mohini Patel Glanz.

Follow Divya on Twitter: @nimbuin

]]> http://www.webdirections.org/resources/divya-manian-creative-css3/feed/ 0 Zoe Mickley Gillenwater — Effective and efficient design with CSS3http://www.webdirections.org/resources/zoe-mickley-gillenwater-effective-and-efficient-design-with-css3/ http://www.webdirections.org/resources/zoe-mickley-gillenwater-effective-and-efficient-design-with-css3/#comments Wed, 17 Nov 2010 05:23:49 +0000 Guy Leech http://www.webdirections.org/?p=2970 Zoe Mickley Gillenwater PortraitCSS3 is changing how we design and develop web sites, allowing us to quickly and easily create and maintain highly efficient and adaptable sites that are a pleasure to use. You’ll learn practical yet progressive examples of the most beneficial CSS3 techniques to put to use in your pages today.

]]> Web Directions USA 2010, Loews Atlanta Hotel, September 23 11.45am.

Presentation slides

Session description

Since many pieces of CSS3 are now supported in the majority of browsers, web sites are popping up all over the place that feature rounded corners (ooh), drop shadows (ahh), and unique embedded fonts (hooray!). But CSS3 can do more than add visual richness to your sites (though it’s quite good at that). Using robust, forward-thinking CSS3 techniques in place of the old standbys can have tangible benefits for your business and users. Powerful new selectors and image-free visual effects can streamline your sites and improve their speed. Media queries can make your sites more adaptable and usable on the wide variety of browser configurations and user agents in use today, including mobile devices like iPhone, Android, and iPad. CSS3 is changing how we design and develop web sites, allowing us to quickly and easily create and maintain highly efficient and adaptable sites that are a pleasure to use. You’ll learn practical yet progressive examples of the most beneficial CSS3 techniques to put to use in your pages today.

About Zoe Mickley Gillenwater

Zoe Mickley Gillenwater PortraitZoe Mickley Gillenwater is a freelance graphic and web designer, developer and consultant. She is the author of the book Flexible Web Design: Creating Liquid and Elastic Layouts with CSS and the video training title Web Accessibility Principles for lynda.com, and is working on the upcoming book Stunning CSS3: A Project-based Guide to the Latest in CSS. Zoe is currently a member of the Web Standards Project (WaSP) Adobe Task Force and was previously a moderator of the popular css-discuss mailing list. Find out more about Zoe on her blog and portfolio site.

Follow Zoe on Twitter: @zomigi

]]> http://www.webdirections.org/resources/zoe-mickley-gillenwater-effective-and-efficient-design-with-css3/feed/ 0 Jason Cranford Teague — 2010: The Year of Web Typographyhttp://www.webdirections.org/resources/jason-cranford-teague-2010-the-year-of-web-typography/ http://www.webdirections.org/resources/jason-cranford-teague-2010-the-year-of-web-typography/#comments Wed, 17 Nov 2010 05:13:57 +0000 Guy Leech http://www.webdirections.org/?p=2968 Jason Cranford Teague PortraitWeb typography expert Jason Cranford Teague shows you how to apply the principles of fluid typography, to choose, find and use Webfonts and create your unique typographic voice. Come and find out why 2010 is going to be the year of Web typography.

]]> Web Directions USA 2010, Loews Atlanta Hotel, September 24 11.10am.

Presentation slides

Session description

For almost 15 years, Web designers have had a list of 10 “Core Web fonts” to choose from. Many ask, “Why can’t I just download a font file from my Web server the same way I can an image?” Well, actually, you can. The verbiage for font linking is a little different than images, but the syntax for Webfont linking has been around for over 10 years as a part of the CSS standard. Web typography expert Jason Cranford Teague shows you how to apply the principles of fluid typography, to choose, find and use Webfonts and create your unique typographic voice. Come and find out why 2010 is going to be the year of Web typography.

About Jason Cranford Teague

Jason Cranford Teague PortraitJason recently took over as the Managing Director of UX & Design for Forum One, an interactive agency that helps people apply technology in creative ways to build a positive future. He has been at the for front of Web design for over 16 years as a designer, writer and teacher. His many books include CSS3 Visual Quickstart, Fluid Web Typography and Speaking in Styles: The Fundamentals of CSS for Web Designers.

Jason has also worked with the W3C CSS Workgroup, Yuri's Night: The World Space Party, and was the Director of Web Design Standards for AOL. He recently served as the Sr. Design Manager for Marriott International eCommerce, where he helped relaunch marriott.com, the 7th largest transaction site on the Web.

Read more about Jason on his blog jasonspeaking.com.

Follow Jason on Twitter: @jasonspeaking

]]> http://www.webdirections.org/resources/jason-cranford-teague-2010-the-year-of-web-typography/feed/ 0 Dan Rubin — Creativity, design and interaction with HTML5 and CSS3http://www.webdirections.org/resources/dan-rubin-creativity-design-and-interaction-with-html5-and-css3/ http://www.webdirections.org/resources/dan-rubin-creativity-design-and-interaction-with-html5-and-css3/#comments Sun, 31 Oct 2010 23:58:00 +0000 Guy Leech http://www.webdirections.org/?p=2909 Dan Rubin PortraitHTML5 and CSS3 are the newest stars of the web: the cornerstones of progressive enhancement, the future of online video, the easiest way to build web applications for desktop and mobile devices, and a brilliant foundation upon which we can add complex interaction and animation layers with javascript and Canvas; happily — thanks to much-improved browser support — we can now use them. In this session, Dan Rubin will show you who’s already taking advantage of these latest additions to our toolbox, what this means for interface designers, and how you can bring the same techniques to your projects.

]]> Web Directions South 2010, Sydney Convention and Exhibition Centre, October 14 1.40pm.

Presentation slides

The presentation slides are available on Dan Rubin’s website (PDF).

Session description

HTML5 and CSS3 are the newest stars of the web: the cornerstones of progressive enhancement, the future of online video, the easiest way to build web applications for desktop and mobile devices, and a brilliant foundation upon which we can add complex interaction and animation layers with javascript and Canvas; happily — thanks to much-improved browser support — we can now use them. In this session, Dan Rubin will show you who’s already taking advantage of these latest additions to our toolbox, what this means for interface designers, and how you can bring the same techniques to your projects.

About Dan Rubin

Dan Rubin PortraitAn accomplished designer, author and speaker, Dan Rubin has over ten years of experience as a leader in the fields of user interface design and web standards, specifically focusing on the use of HTML and CSS to streamline development and improve accessibility.

His passion for all things creative and artistic isn’t a solely selfish endeavor either—you’ll frequently find him waxing educational about a cappella jazz and barbershop harmony, philosophy, web standards, typography, psychology, and design in general.

In addition to his contributions to sites including Blogger, the CSS Zen Garden, Yahoo! Small Business and Microsoft's ASP.net portal, Dan is a contributing author of Cascading Style Sheets: Separating Content from Presentation (2nd Edition, friends of ED, 2003), technical reviewer for Beginning CSS Web Development (Apress, 2006), The Art & Science of CSS (SitePoint, 2007) and Sexy Web Design (SitePoint, 2009), coauthor of Pro CSS Techniques (Apress, 2006), and Web Standards Creativity (friends of ED, 2007), writes about web standards, design and life in general on his personal site, Superfluous Banter, and spends his professional time on a variety of online and offline projects for Sidebar Creative, Webgraph and Black Seagull, consulting on design, user interaction and online publishing for Garcia Media, and speaking and teaching at events, conferences and workshops (including An Event Apart, @media, SXSW Interactive, Future of Web Design, Web Directions, and various Refresh and AIGA events) around the world.

Photo: © John Morrison / Subism Studios

Follow Dan on Twitter: @danrubin

]]> http://www.webdirections.org/resources/dan-rubin-creativity-design-and-interaction-with-html5-and-css3/feed/ 0 Andy Clarke — Keynote: Hardboiled Web Designhttp://www.webdirections.org/resources/andy-clarke-hardboiled-web-design/ http://www.webdirections.org/resources/andy-clarke-hardboiled-web-design/#comments Sat, 23 Oct 2010 00:21:42 +0000 Guy Leech http://www.webdirections.org/?p=2846 Andy Clarke PortraitAndy Clarke’s Hardboiled Web Design is an uncompromising look at how to make the most from modern design tools and browsers, up-to-date techniques and processes. In this practical, design focussed talk, Andy will discuss the ‘how’ as well as the ‘why’ and will challenge your preconceptions to help you make better work for the web.

]]> Web Directions @media 2010, Southbank Centre London, June 11 9.10am.

Session description

Andy Clarke’s Hardboiled Web Design is an uncompromising look at how to make the most from modern design tools and browsers, up-to-date techniques and processes. In this practical, design focussed talk, Andy will discuss the ‘how’ as well as the ‘why’ and will challenge your preconceptions to help you make better work for the web.

Andy will demonstrate the most modern, forward-moving and sometimes experimental CSS techniques while emphasising why a forward looking approach to CSS will pay real dividends.

About Andy Clarke

Andy Clarke PortraitAndy Clarke has been called a lot of things since he started working on the web ten years ago. His ego likes words like “ambassador for CSS”, “industry prophet” and “inspiring”, but actually he is most proud that Jeffrey Zeldman once called him a “(triple talented) bastard”.

Andy took ten months of his life to write the best-selling Transcending CSS: The Fine Art of Web Design, but his passion is amazing web design. He loves designing for the web, writing about design, and teaching it at workshops and conferences all over the world.

Now he is pulling all of those passions together to create For A Beautiful Web, a unique series of web design master classes that cover topics including visual design and best-practice use of technologies.

Follow Andy on Twitter: @Malarkey

]]> http://www.webdirections.org/resources/andy-clarke-hardboiled-web-design/feed/ 1 Rachel Andrew — Core CSS3http://www.webdirections.org/resources/rachel-andrew-core-css3/ http://www.webdirections.org/resources/rachel-andrew-core-css3/#comments Sat, 24 Jul 2010 01:06:57 +0000 Guy Leech http://www.webdirections.org/?p=2726 Rachel Andrew PortraitThis session will be a solid introduction to CSS3 by way of practical examples that can get you started using CSS3 on your projects today.

]]> Web Directions @media 2010, Southbank Centre London, June 10 11.45am.

Presentation slides

Session description

This session will be a solid introduction to CSS3 by way of practical examples that can get you started using CSS3 on your projects today.

Rachel Andrew will take you through some of the core features of CSS3 including advanced selectors, media queries and other features that are being developed and starting to be implemented in browsers.

In addition to discovering how CSS3 will change the way that we develop in the future we will explore current and upcoming browser support. We will also see how it is possible to start using some of CSS3 in your projects now, with the help of a little JavaScript to plug the holes in current browsers.

About Rachel Andrew

Rachel Andrew PortraitRachel Andrew is a front and back-end web developer and Director of edgeofmyseat.com, a UK web development consultancy and the creators of the small content management system, Perch. She is the author of a number of web design and development books including CSS Anthology: 101 Essential Tips, Tricks and Hacks (3rd edition), published by SitePoint and also writes on her blog rachelandrew.co.uk. Rachel tries to encourage a common sense application of best practice and standards adoption in her own work and when writing about the web.

Follow Rachel on Twitter: @rachelandrew

]]> http://www.webdirections.org/resources/rachel-andrew-core-css3/feed/ 2 Elliot Jay Stocks — Progressive enhancementhttp://www.webdirections.org/resources/elliot-jay-stocks-progressive-enhancement/ http://www.webdirections.org/resources/elliot-jay-stocks-progressive-enhancement/#comments Thu, 08 Oct 2009 23:42:53 +0000 Guy Leech http://www.webdirections.org/?p=2225 Elliot Jay Stocks PortraitIn the summer of ‘07 in a flood-soaked Oxford, England, Elliot appeared on stage for the very first time. His presentation, ‘Progressive Enhancement & Intentional Degradation’, looked at how to reward modern browsers with the latest CSS tricks and punish IE by dropping certain site features. Over two years later, what has changed? We’re starting to see the ideology of progressive enhancement — especially with CSS3 — spread throughout the web design community, but more work needs to be done.

]]> Web Directions South 2009, Sydney Convention Centre, October 9 11.45am.

Presentation slides

Session description

In the summer of ‘07 in a flood-soaked Oxford, England, Elliot appeared on stage for the very first time. His presentation, ‘Progressive Enhancement & Intentional Degradation’, looked at how to reward modern browsers with the latest CSS tricks and punish IE by dropping certain site features. Over two years later, what has changed? We’re starting to see the ideology of progressive enhancement — especially with CSS3 — spread throughout the web design community, but more work needs to be done.

What can we do to spread the message further and design a better-looking web faster? Elliot will look at how features of the CSS2.1 and CSS3 specs can enhance your websites and he’ll examine the implication of using such techniques. He’ll look at the issues surrounding font embedding and the recent development of the font-as-service; the arguments about browser support; the potentially controversial irrelevance of validation; and how we can attempt to reach the future sooner by writing forward-thinking code. In this motivational presentation Elliot will urge you to embrace the techniques of modern web design and to stop worrying about the so-called restraints.

About Elliot Jay Stocks

Elliot Jay Stocks PortraitElliot Jay Stocks is an independent designer whose work is frequently featured in online and offline publications, showcased on various ‘inspiration’ websites, and used as an example to design students around the world of how accessible web design can still look beautiful. A regular face at design conferences around the globe and author of the best-selling book Sexy Web Design (SitePoint, 2009), Elliot can often be found writing about design trends, issues, and techniques for industry-leading publications such as .Net (aka Practical Web Design), Computer Arts, and Computer Arts Projects. His extensive portfolio includes work for clients such as The Virgin Group, WordPress.org, The Beatles, Blue Flavor, Twiistup, EMI Records, and Carsonified.

Follow Elliot on Twitter: @elliotjaystocks

]]> http://www.webdirections.org/resources/elliot-jay-stocks-progressive-enhancement/feed/ 15