18
Responsive Web Design & Development With WordPress.

Michael Bailey at WP-Brighton 2011 - Responsive Web Design with WordPress

Embed Size (px)

Citation preview

Page 1: Michael Bailey at WP-Brighton 2011 - Responsive Web Design with WordPress

ResponsiveWeb Design &DevelopmentWith WordPress.

Page 2: Michael Bailey at WP-Brighton 2011 - Responsive Web Design with WordPress

Hello.I’m Michael Bailey.thisisdeliberate.co.uk

Page 3: Michael Bailey at WP-Brighton 2011 - Responsive Web Design with WordPress

ResponsiveWeb Design &DevelopmentWith WordPress.

Page 4: Michael Bailey at WP-Brighton 2011 - Responsive Web Design with WordPress

What isresponsive web design & development?

Page 5: Michael Bailey at WP-Brighton 2011 - Responsive Web Design with WordPress
Page 6: Michael Bailey at WP-Brighton 2011 - Responsive Web Design with WordPress

“The primary design principle underlying the Web’s usefulness and growth is universality… That means [content] should be accessible from any kind of hardware that can connect to the Internet: stationary or mobile, small screen or large.”

Long live the Web: A call for Continued Open Standards and Neutrality.

(Sir Tim Berners Lee - Scientific American)

Page 7: Michael Bailey at WP-Brighton 2011 - Responsive Web Design with WordPress

A brief history of publishing.

Hand. Print. Web.

Page 8: Michael Bailey at WP-Brighton 2011 - Responsive Web Design with WordPress
Page 9: Michael Bailey at WP-Brighton 2011 - Responsive Web Design with WordPress
Page 10: Michael Bailey at WP-Brighton 2011 - Responsive Web Design with WordPress

A flexible canvas.

Fixed. Fixed. Flexible.

Page 11: Michael Bailey at WP-Brighton 2011 - Responsive Web Design with WordPress

wordpress.com

Page 12: Michael Bailey at WP-Brighton 2011 - Responsive Web Design with WordPress

“The control which designers know in the print medium, and often desire in the web medium, is simply a function of the printed page. We should embrace the fact that the web doesn't have the same constraints, and design for this flexibility.”

The Dao of Web Design.

(John Allsopp - A List Apart)

Page 13: Michael Bailey at WP-Brighton 2011 - Responsive Web Design with WordPress

What don’t we know?Speed.Capability.Size.

Page 14: Michael Bailey at WP-Brighton 2011 - Responsive Web Design with WordPress

What don’t we know?Speed.Capability.Size.What do we know?The Content?

Page 15: Michael Bailey at WP-Brighton 2011 - Responsive Web Design with WordPress

Fluid Grids.Flexible Images.

Media Queries.Responsive Images.

Page 16: Michael Bailey at WP-Brighton 2011 - Responsive Web Design with WordPress

Kick Ass?

Page 17: Michael Bailey at WP-Brighton 2011 - Responsive Web Design with WordPress

WordPress 2011.

Page 18: Michael Bailey at WP-Brighton 2011 - Responsive Web Design with WordPress

Fit to scale - Trent Walton.http://trentwalton.com/2011/05/10/fit-to-scale/

.Long live the Web: A call for Continued Open Standards and Neutrality - Sir Tim Berners Lee - Scientific American.

http://www.scientificamerican.com/article.cfm?id=long-live-the-web.

A Dao of Web Design – John Allsopp.http://www.alistapart.com/articles/dao/

.Responsive Web Design – Ethan Marcotte.

http://www.alistapart.com/articles/responsive-web-design/.

Responsive Images: Experimenting with Context-Aware Image Sizing.http://filamentgroup.com/lab/responsive_images_experimenting_with_context_aware_image_sizing/

.A fabulous set of links related to Responsive Web design from Jeremy Keith.

http://adactio.com/links/tag/responsive.

A great presentation from Sara Cannon including some excellent examples of responsive WordPress websites.http://sara-cannon.com/blog/2011/08/13/responsive-web-design-slides-from-wcsf/

Thank youthisisdeliberate.co.uk