Michael Bailey at WP-Brighton 2011 - Responsive Web Design with WordPress
•Download as PPTX, PDF•
1 like•935 views
Recommended
Recommended
More Related Content
Recently uploaded
Recently uploaded (20)
Featured
Featured (20)
Michael Bailey at WP-Brighton 2011 - Responsive Web Design with WordPress
- 1. Responsive Web Design & Development WithWordPress.
- 2. Hello. I’m Michael Bailey. thisisdeliberate.co.uk
- 3. Responsive Web Design & Development WithWordPress.
- 4. What is responsive web design & development?
- 6. “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)
- 7. A brief history of publishing. Hand. Print. Web.
- 10. A flexible canvas. Fixed. Fixed. Flexible.
- 11. wordpress.com
- 12. “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)
- 13. What don’t we know? Speed. Capability. Size.
- 14. What don’t we know? Speed. Capability. Size. What do we know? The Content?
- 15. Fluid Grids. Flexible Images. Responsive Images. Media Queries.
- 16. Kick Ass?
- 17. WordPress 2011.
- 18. Thank you thisisdeliberate.co.uk 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/
Editor's Notes
- Hi, My name is Michael Bailey.I run a small web development business from the North Lanes here in Brighton.
- Today I’m going to be talking to you about Responsive Web Design & Development.How many of you have designed or built a responsive website?How many of you are planning/wanting to?In this presentation I will..Have a stab at defining responsive web design & development.Talk a little bit about why it mattersand, to help me with that, give a very brief run through the history of publishing. This, I hope, will highlight the core of the issue.Following that we’ll take a tour of the technology of responsive web design & development.Then I’ll show you the ‘Kick ass mobile ready website” I’m currently finishing and..highlight a quick win on Responsive for WordPress. Namely, the WordPress 2011 theme.Some Q&A to finish assuming there’s time.Admission..When I first agreed to talk here today, a couple of months ago, I chose this title with the sub title “How to build kick-ass mobile ready websites”. Since then I’ve come to regret that somewhat..From a pure design point of view I’ve gone at the problem the wrong way round..So, what is Responsive web design & development.
- Most definitions begin and end with the technologies that make up the design & development process.Ethan Markote (the daddy of responsive web design) centres his definition in flexible grids, flexible images and media queries.I find this a little unsatisfying, it doesn’t really get to the heart of it for me..These definitions offer more of the how than the why of it.My favorite “definition” comes from Trent Walton when in his article “Fit To Scale” he said ..“My love for responsive centers around the idea that my website will meet you wherever you are – from mobile to full-blown desktop and anywhere in between”.Responsive Web Design & Development is about meeting people where they are.It’s about designing and building websites that adapt universally to every unique, individual browsing environment..Why should we meet people where they are?To find out we’ll turn to afairly authoritative voice..
- Anyone know who this is?This is Sir Tim Berners-Lee, the father of the Internet.In November 2010 he wrote an article called “Long Live The Web” for Scientific American where, among other things, he urges us towards a universally accessible web.It is this urge or, more importantly, this inherent potential of the web that is the driving force behind the adoption of responsive web design & development.
- Universality requires responsiveness.Universality entails that our websites ‘meet people where they are”, that they meet peoples browsing environments as they are.It’s a design philosophy that finally meets the web as it is as distinct from earlier publishing platforms..To highlight this, a brief history of publishing..
- Here’s my brief history of publishing.What do you think? Pretty good huh?
- A unique, Portuguese military manuscript called “Tombo Archive Comenda Of The Comenda Pombal at Pombal 1731”Cool but a little inefficient.. It takes as long to make a second copy of this book as it did to make the first copy.
- A copy of the new your times from 1863.What print and hand written media have in common is that the designer and producer of the documents are in control of the canvas.When this copy of the new your times was designed and printed the designer and printer had full control of the canvas.This is not true for The Web..
- For us the canvas is the browser and, as any developer will attest to, we are far from in control of the browser.More on this later, back to Sir Tim for a moment..
- To fulfill our dreams of a universally accessible web we have to let go of the idea that we have any control of the browser.Wordpress.com is kinda broken on an iPhone.“Global mobile data traffic grew 2.6-fold in 2010, nearly tripling for the third year in a row.” (smartinsights.com)As Jeremy Keith argues in his presentation “One Web’ at the DIGI Conference this year, it’s been the rise of mobile that finally burst the ‘minimum screen width’ bubble.Who knows that the minimum screen width myth is?
- April 2000.
- What don’t we know about our canvas - The Browser?
- Does anyone know what do we know?All we know (or should know) is the content. Because of that we must build from the content out not from the canvas in. (Jeremy Keith DIGI Conference 2011).Well, I didn’t do that. I went at the it from the entirely opposite direction, thinking about (and receiving) a finished 960px design and then figuring out how to make that responsive.In doing so I’ve attempted to fix the flexible, as it were. Still..In my world, this may be the norm for some time..In any case the specific technologies involved are the same..
- Knowing we don’t know the viewport dimensions we code fluid grids & flexible images.Ethan Marcotte“Fluid Grids” – A List Apart, March 2009.In essence building fluid websites requires us to size elements of our documents using relative units like % and em’s. When layout and sizing are built using proportionate units the content naturally flows with the browser dimensions.Ethan Marcotte“Fluid Images” – Unstoppable Robot Ninja, April 2009.- {max-width: 100%} Adding fixed width elements to a fluid grid. Images render at their native dimensions as long as it’s width doesn’t exceed the width of it’s container.Responsive images and the Filament Group method.Knowing that to be best render content for different viewport sizes requires layout changes at different viewport sizes we code in Media Queries.Ethan Marcotte“Responsive Web Design” – A List Apart, May 2010.
- Demo.<meta name="viewport" content="width=device-width; initial-scale=0; maximum-scale=1">
- Childthemeing.Some great examples of Responsive WordPress websites from a talk by Sara Cannon – link on my final slide.