Had an interesting day sorting out all my images into scaleable, fluid containers. Turns out it is as simple as:
img, div, object {
max-width: 100%
}
This is stated in Ben Frain’s excellent book “Responsive Web Design with HTML5 and CSS3” pg 77. Available on Amazon – as always!
I encountered a problem today when trying to implement responsive design into the Shackadelic site. Using percentage widths for wrappers, headers etc works great when resizing the browser window but I wanted to constrain the the max width as my site looked a tad ridiculous when the browser window is resized to, for example, 1200 pixels. After trying out a few different approaches, I eventually found a great post on the (even more great) css-tricks.com. It seems you can constrain the higher level html to a max width which works great!
Had a go at these responsive menus that we all see kicking all over the internet. I’ve got everything working ok & looking good apart from the slide-down lists. After a lot of scouring on Google for solutions, it would appear the only sensible way to tackle this is via Javascript.
Whilst Googling around for responsive menu tutorials I came across this great article by Ian Yates on Tuts+.
Important stuff.
* Update 10/04 Some great info in Peter Gasston’s “The Modern Web: Multi Device Web Development” book (pp 48 & 49).
Another great book I’ve started reading is “The Modern Web” by Peter Gasston. It differs somewhat from other web dev books as it acts as a kind of reference to modern principles and techniques for multi-device web design. You won’t find any “build a website” tutorials in here but you will find great modern HTML5, CSS3 & Javascript “how-to’s” for responsive images, columns, grid layouts and media queries.