Responsive web design

Means... adaptive web pages

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

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?

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

LaptopMaybe the side bar should have a bigger perccentage of the total width?

Landscape iPad

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

Landscape iPhone 4

Oh dear, the header's naffed up and the menu has wrapped

Portrait iPad

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

Portrait iPhone 4

Menu reduced to two in a rowAnd the sidebar has dropped below the main content

Header is now atrocious

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!

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!

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

Herb Miller

bobbingwidewebdesign.comoik-plugins.comcwiccer.comfobbonghide.comherbmiller.me

@herb_miller@bobbingwide@wppompey

wp-pompey.org.uk Powered by WordPress