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
Top Related