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/

1. Responsive web design

2. Means... adaptive web pages

3. Adaptive web pages
● Work on differently size devices
● May adjust seamlessy during viewport resizing
● Use flexible grids
● And flexible images
● Rely on media queries
But you have to decide what you want

4. Consider your audience
What are they using?
Laptop, Desktop, Widescreen, iPhone
What will they be using?
iPad, Blackberry, Android, X-box, TV, Notepad
Consider each device
What will they want to see?
Where will they want to see it?
How will you cater for viewport resizing?

5. Widescreen
Too wide? the text is below or beside the images. Should
the images be allowed to scale larger than 256 or what?

6. Laptop
Maybe the side bar should have a bigger perccentage of the
total width?

7. Landscape iPad
It seems to fit quite
nicely. Though the
page title is getting
close to the header
image

8. Landscape iPhone 4
Oh dear, the
header's naffed
up and the menu
has wrapped

9. Portrait iPad
Header still naff but the menu is
better – separator bars and
background gradient image
have been removed.

10. Portrait iPhone 4
Menu reduced to two in a row
And the sidebar has dropped
below the main content
Header is now atrocious

11. iPhone 3
Ignoring the header the blocks seem OK but
they are too deep in landscape. The
background for longer menu items needs
sorting too!

12. Conclusion?
It seems to be a lot of work.
And we've only looked at one page?
What about forms with text fields and text areas?
MORE WORK NEEDED
What I didn't say was that I have been working with Artisteer
generated themes, so I am actually quite encouraged. I've also
been making sure that my oik plugin produces reasonably
responsive HTML and CSS.
SO WATCH THIS SPACE!

13. For more information
Read 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. Herb Miller
bobbingwidewebdesign.com
oik-plugins.com
cwiccer.com
fobbonghide.com
herbmiller.me
@herb_miller
@bobbingwide
@wppompey
wp-pompey.org.uk
Powered by WordPress