Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Responsive web design: WordUp Pompey! Feb-2012

1,465 views

Published on

A quick look at building responsive websites with an Artisteer theme as the base theme, by Herb Miller, of Bobbing Wide and [oik]-plugins

Slides from WordUp Pompey, held on February 23rd 2012. See also
http://wp-pompey.org.uk/wordup-pompey-wordpress-meetup-for-portsmouth/

Published in: Technology, Design
  • Herb. Thamks for your note - yes my pix have fallen off. How can this happen!! Are you the man to ask about iFrames?
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Responsive web design: WordUp Pompey! Feb-2012

  1. 1. Responsive web design
  2. 2. Means... adaptive web pages
  3. 3. Adaptive web pages● Work on differently size devices● May adjust seamlessy during viewport resizing● Use flexible grids● And flexible images● Rely on media queriesBut you have to decide what you want
  4. 4. Consider your audienceWhat are they using?Laptop, Desktop, Widescreen, iPhoneWhat will they be using?iPad, Blackberry, Android, X-box, TV, NotepadConsider each deviceWhat will they want to see?Where will they want to see it?How will you cater for viewport resizing?
  5. 5. WidescreenToo wide? the text is below or beside the images. Shouldthe images be allowed to scale larger than 256 or what?
  6. 6. LaptopMaybe the side bar should have a bigger perccentage of thetotal width?
  7. 7. Landscape iPadIt seems to fit quitenicely. Though thepage title is gettingclose to the headerimage
  8. 8. Landscape iPhone 4Oh dear, theheaders naffedup and the menuhas wrapped
  9. 9. Portrait iPadHeader still naff but the menu isbetter – separator bars andbackground gradient imagehave been removed.
  10. 10. Portrait iPhone 4Menu reduced to two in a rowAnd the sidebar has droppedbelow the main contentHeader is now atrocious
  11. 11. iPhone 3Ignoring the header the blocks seem OK butthey are too deep in landscape. Thebackground for longer menu items needssorting too!
  12. 12. Conclusion?It seems to be a lot of work.And weve only looked at one page?What about forms with text fields and text areas?MORE WORK NEEDEDWhat I didnt say was that I have been working with Artisteergenerated themes, so I am actually quite encouraged. Ive alsobeen making sure that my oik plugin produces reasonablyresponsive HTML and CSS.SO WATCH THIS SPACE!
  13. 13. For more informationRead the following books:Responsive Web Design, by Ethan Marcotte (978-0-9844425-7-7)The book of CSS3, by Peter Gasston (978-1-59327-286-9)Visit any responsive web site:and view the HTML source and the CSS
  14. 14. Herb Millerbobbingwidewebdesign.comoik-plugins.comcwiccer.comfobbonghide.comherbmiller.me@herb_miller@bobbingwide@wppompeywp-pompey.org.uk Powered by WordPress

×