Green Diablo

WCNYC 2012: WordPress Responsive Design Bootcamp Session

Sonja Leix — Tue, 19 Jun 2012 18:35:10 +0000

I was very excited and honored to be one of the over 70 speakers at this years WordCamp NYC. My session topic was Responsive Design for WordPress and I designed it to be a bootcamp for all those new or fairly new to Responsive Design and how to apply it to a WordPress theme. As an introduction to Responsive Design, I covered what Responsive Design is and what it’s elements are: the Flexible Grid with Fluid Images and CSS3 Media Queries. I then step-by-step made a non-responsive theme respond to different devices and screen sizes in front of the audience using helpful tools and best practise.

Presentation Slides and Site with Resources and Tools

You can find my presentation slides here and the Responsive Theme I used for the session that includes tons of links to great articles and tools for Responsive Design in general and for WordPress. You can also follow me on twitter (@sonjanyc and @green_diablo), make sure to say hi or ask any questions you might have about Responsive Design.

I’d like to thank everyone who attended my session at WordCamp New York! You guys were great and thanks so much for the good feedback.

In case you missed my session, the video should be online shortly. I will post it here once it’s up.

We’re Sponsoring and Speaking at WordCamp NYC 2012!

Sonja Leix — Thu, 24 May 2012 01:03:32 +0000

We are very excited that WordCamp finally returned to New York! Green Diablo is not just sponsoring the event, but we will also be speaking at WordCamp this year about Responsive Design. The session is called “WordPress Responsive Design Bootcamp” and is scheduled for Saturday, June 9th at 11:30am. After a brief intro about what Responsive Design is, we will dive right in and make a standard WordPress Theme responsive.

For those of you that are interested in attending WordCamp NYC it will be held on June 9th and 10th at Baruch College. You can expect 2 packed days of WordPress goodness with over 60 sessions.

To buy tickets and find out more information go to WordCamp NYC at http://2012.nyc.wordcamp.org/ or follow them on Twitter at WordCampNYC and hashtag #wcnyc.

We hope to see you all there!

Jay-Z & Kanye West // Ni**as In Paris (Music Video)

Sonja Leix — Sat, 12 May 2012 21:42:40 +0000

Working along with Art Director Alex Moor, Gabriel and their team created the graphics animation, rotoscoping and just finish working on Jay-Z & Kanye West – Ni**as In Paris music video! Is already out, check it:

Responsive Design Presentation at NY WordPress Meetup

Sonja Leix — Fri, 11 May 2012 14:35:05 +0000

On April 17 I had the pleasure to present about Responsive Design in front of a fantastic audience at the New York WordPress Meetup. We explored the techniques and principles of Responsive Design together, including the Flexible Grid, Fluid Images and Media Queries showing examples of how these principles can be used to create a user-friendly experience across all devices and screen-sizes.

I shared this presentation with Jack Reichert who spoke about the pros and cons of Responsive Design and Progressive Enhancement vs. Graceful Degradation.

This video covers:

Responsive Design
What is it and why the future of the web is Responsive.

Understanding the Elements of Responsive Design
How Flexible Grid and Fluid Images will rule you world.

The Power of CSS3 Media Queries
Using Media Queries with common Resolution Breakpoints in mind.

The Pros and cons of Responsive Design
What people are saying about Responsive Design. Is it right for you?

Progressive Enhancement vs Graceful Degradation
The essence of Adaptive Design: If you want to use the cool stuff, build it up right so you don’t shoot yourself in the foot.

Implementing Adaptive Theme Design
Concrete steps you can take to make your theme Adaptive.

Additional links:
My Presentation
Tools & Resources for Responsive Design

Top 12 Tools and Resources for Responsive Web Design

Sonja Leix — Tue, 17 Apr 2012 02:46:05 +0000

This is the first in a series of post we’ll be adding to our site about Responsive Design. We are very excited to be talking about Responsive Design at tomorrow’s WordPress Meetup in NYC.

For tomorrow’s talk I’ve been putting together a list of my favorite resources and tools to test responsive design.

Must read Responsive Design articles and ebooks:

eBook: RESPONSIVE WEB DESIGN by Ethan Marcotte (A Book Apart)
eBook: MOBILE FIRST by Luke Wroblewski

Article: RESPONSIVE WEB DESIGN by Ethan Marcotte
Article: FLUID GRIDS by Ethan Marcotte
Article: FLUID IMAGES by Ethan Marcotte

Article: Responsive Web Design Guidelines and Tutorials by Smashing Magazine

Artile: A Beginner’s Guide to Mobile Responsive Design by StudioPress

Tools to test your Repsonsive Design:

responsinator.com
Test your site in 10 different screen sizes and devices

mattkersley.com/responsive
Test your site in the 5 most common screen sizes

responsive.is
Test your site in the 6 most common screen sizes

responsivepx.com
Adjust dimensions of your viewport to find breakpionts

seesparkbox.com/foundry/media_query_bookmarklet
Media Query Bookmarklet

Other Resources:

Browser Support for Media Queries

HTML5 / CSS3 Browser Support

W3C on Media Queries

Responsive Websites Showcase for Inspiration

Slides

My Responsive Design presentation slides can be found on Prezi

I hope these tools and resources are helpful. What are your favorite tools and resources?

Enjoy!

Speaking: At WordPress Meetup NYC about “Responsive Design”

Sonja Leix — Sun, 15 Apr 2012 21:37:25 +0000

We are super excited about the opportunity to speak about Responsive Design at the next WordPress Meetup event in New York on April 17.

We will explore the techniques and principles for Responsive Design, including flexible grids, fluid images, and media queries, demonstrating how you can deliver a quality experience to your users no matter how large (or small) their display.

What we will be covering in detail:

Responsive Design
What is it and why the future of the web is Responsive.

Understanding the Elements of Responsive Design
How Flexible Grid and Fluid Images will rule you world.

The Power of CSS3 Media Queries
Using Media Queries with common Resolution Breakpoints in mind.

We hope to get to see you there!

Big Sean // Dance ft. Nicki Minaj (Music Video)

Sonja Leix — Thu, 01 Dec 2011 22:32:51 +0000

After hard work of masking and rotoscoping, the beauty work animation for Big Sean’s Dance (A$$) Remix ft. Nicki Minaj new music video is done. Enjoy!

Ne-Yo // The Way You Move ft. Trey Songz, T-Pain (Music Video)

Sonja Leix — Tue, 15 Nov 2011 22:29:17 +0000

Gabriel just finished working on the beauty work animation for Ne-Yo’s The Way You Move new music video. Check it out and enjoy!

J. Cole // Can’t Get Enough (Music Video)

Sonja Leix — Sat, 01 Oct 2011 21:23:08 +0000

Gabriel just finished working on the beauty work animation for J. Cole’s Can’t Get Enough new music video. Definitely one of our favorites! Check it out and enjoy:

FREE Green Diablo Wallpaper for Desktop, iPhone and iPad

Gabriel Amauru — Thu, 18 Aug 2011 19:10:45 +0000

We’re excited to start our series of free graphics for you to download with Green Diablo Wallpaper for desktop, iPhone and iPad. Enjoy and share with your friends!

DOWNLOAD:

1920 x 1080px
1680 x 1050px
1440 x 900px
1280 x 1024px
1280 x 800px
1024 x 768px
iPad
iPhone

Let us know if we missed your screen size.