What I sense is a real tension between the web as we know it, and the web as it would be. It’s the tension between an existing medium, the printed page, and its child, the web. And it’s time to really understand the relationship between the parent and the child, and to let the child go its own way in the world. -John Allsopp
The number of access points for distilling information has never been greater. Because of the iPhone, clients are finally realizing what the mobile web can do for them. Mobile webkit blows them all away.
Responsive Architecture
Looking at the way space can adapt to the needs of the people inside it. Is there something we can learn from this?
Responsible Web Design
A flexible grid (with flexible images) that incorporates media queries to create a responsive, adaptive layout.
We know the good guys, we know the bad guys, but there is a secret robot lurking within. http://robot-or-not.com/
- Flexible Grid
- Flexible Media
- Responsive Design
When handed any piece of work, do a visual inventory and translate into markup sketch and set global CSS parameters.
Font size = 100% == Font size: 16px
Simple Formula: Target / Content (16px) = Results (ems, don’t round them)
Fluid grids can be built the same way using percentages. We can do so with the same simple type setting formula. Six-column grid of 95px each = 637 pixels wide. Target / Content = Results. Figure out pixel width of columns and get percentage.
How do we accommodate fixed with images. Original image, 1024×768. Image will overflow container. What if we can set a rule to resize the image proportionally, but never exceeds the width of it’s container.
- img { max-width: 100%; }
- img, video, object {max-width: 100%;}
What about IE6? Width is a very different rule, so must be applied intelligently so it doesn’t scale non-relevant items.
- class.img, class.video, class.object {width: 100%;}
Windows platform has issues with pixelation. Using AlphaImageLoader filter turns on a super power for flexible width items in Internet Explorer 6.