Responsive web design: WordUp Pompey! Feb-2012
-
Upload
herb-miller -
Category
Technology
-
view
1.269 -
download
1
Transcript of Responsive web design: WordUp Pompey! Feb-2012
![Page 1: Responsive web design: WordUp Pompey! Feb-2012](https://reader034.fdocuments.in/reader034/viewer/2022042701/55a244451a28abf1448b4806/html5/thumbnails/1.jpg)
Responsive web design
![Page 2: Responsive web design: WordUp Pompey! Feb-2012](https://reader034.fdocuments.in/reader034/viewer/2022042701/55a244451a28abf1448b4806/html5/thumbnails/2.jpg)
Means... adaptive web pages
![Page 3: Responsive web design: WordUp Pompey! Feb-2012](https://reader034.fdocuments.in/reader034/viewer/2022042701/55a244451a28abf1448b4806/html5/thumbnails/3.jpg)
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
![Page 4: Responsive web design: WordUp Pompey! Feb-2012](https://reader034.fdocuments.in/reader034/viewer/2022042701/55a244451a28abf1448b4806/html5/thumbnails/4.jpg)
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?
![Page 5: Responsive web design: WordUp Pompey! Feb-2012](https://reader034.fdocuments.in/reader034/viewer/2022042701/55a244451a28abf1448b4806/html5/thumbnails/5.jpg)
WidescreenToo wide? the text is below or beside the images. Should the images be allowed to scale larger than 256 or what?
![Page 6: Responsive web design: WordUp Pompey! Feb-2012](https://reader034.fdocuments.in/reader034/viewer/2022042701/55a244451a28abf1448b4806/html5/thumbnails/6.jpg)
LaptopMaybe the side bar should have a bigger perccentage of the total width?
![Page 7: Responsive web design: WordUp Pompey! Feb-2012](https://reader034.fdocuments.in/reader034/viewer/2022042701/55a244451a28abf1448b4806/html5/thumbnails/7.jpg)
Landscape iPad
It seems to fit quite nicely. Though the page title is getting close to the header image
![Page 8: Responsive web design: WordUp Pompey! Feb-2012](https://reader034.fdocuments.in/reader034/viewer/2022042701/55a244451a28abf1448b4806/html5/thumbnails/8.jpg)
Landscape iPhone 4
Oh dear, the header's naffed up and the menu has wrapped
![Page 9: Responsive web design: WordUp Pompey! Feb-2012](https://reader034.fdocuments.in/reader034/viewer/2022042701/55a244451a28abf1448b4806/html5/thumbnails/9.jpg)
Portrait iPad
Header still naff but the menu is better – separator bars and background gradient image have been removed.
![Page 10: Responsive web design: WordUp Pompey! Feb-2012](https://reader034.fdocuments.in/reader034/viewer/2022042701/55a244451a28abf1448b4806/html5/thumbnails/10.jpg)
Portrait iPhone 4
Menu reduced to two in a rowAnd the sidebar has dropped below the main content
Header is now atrocious
![Page 11: Responsive web design: WordUp Pompey! Feb-2012](https://reader034.fdocuments.in/reader034/viewer/2022042701/55a244451a28abf1448b4806/html5/thumbnails/11.jpg)
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!
![Page 12: Responsive web design: WordUp Pompey! Feb-2012](https://reader034.fdocuments.in/reader034/viewer/2022042701/55a244451a28abf1448b4806/html5/thumbnails/12.jpg)
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!
![Page 13: Responsive web design: WordUp Pompey! Feb-2012](https://reader034.fdocuments.in/reader034/viewer/2022042701/55a244451a28abf1448b4806/html5/thumbnails/13.jpg)
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
![Page 14: Responsive web design: WordUp Pompey! Feb-2012](https://reader034.fdocuments.in/reader034/viewer/2022042701/55a244451a28abf1448b4806/html5/thumbnails/14.jpg)
Herb Miller
bobbingwidewebdesign.comoik-plugins.comcwiccer.comfobbonghide.comherbmiller.me
@herb_miller@bobbingwide@wppompey
wp-pompey.org.uk Powered by WordPress