background preloader

Fluid Images — Unstoppable Robot Ninja

Fluid Images — Unstoppable Robot Ninja
(Hello! If you think this article’s interesting, you might check out my ALA article on responsive web design.) I’ve always hated publishing. I don’t mean the industry, but the act. Hitting “print,” sending an email, pressing that “Publish” button on the CMS: at some point, you relinquish your ability to smooth down some of the sharper edges, fill in the holes of your argument, and just generally fix whatever’s broken. At some point, you just accept what’s on the page, tousle its hair a bit, and send it off into the world at large to be judged, poked, and prodded. To wit: One of the really solid criticisms lobbied against my Fluid Grids article for ALA was that all of my examples were pretty text-heavy. In Which “Looking Across the Pond for Help” Is a Pretty Decent Answer, As It Turns Out Since I started mucking around with this whole “stylesheets” thing, Richard Rutter has been one of those CSS giants on whose shoulders I frequently stand. This solved the problem beautifully.

http://unstoppablerobotninja.com/entry/fluid-images

Related:  responsive web designDesign

Responsive Web Design It all started with Responsive Web Design, an article by Ethan Marcotte on A List Apart. Essentially, the article proposed addressing the ever-changing landscape of devices, browsers, screen sizes and orientations by creating flexible, fluid and adaptive Websites. Instead of responding to today’s needs for a desktop web version adapted to the most common screen resolution, along with a particular mobile version (often specific to a single mobile device), the idea is to approach the issue the other way around: use flexible and fluid layouts that adapt to almost any screen. Core Concepts Fluid Grids Early last year, I worked on the redesign of a rather content-heavy website. Design requirements were fairly light: the client asked us to keep the organization’s existing logo and to improve the dense typography and increase legibility. So, early on in the design process, we spent a sizable amount of time planning a well-defined grid for a library of content modules. Article Continues Below

SVG Patterns Gallery Try this Try this Try this Try this Try this Try this Try this Try this Try this Try this Try this Try this Try this Try this Try this Try this Try this Try this Try this Try this Try this Why SVG? SVG images are typically smaller than bitmap images and remain sharp on high-dpi screens. Unlike CSS3 gradients, SVG images are supported on IE9. Browser support

Alistapart Responsive Web Design The English architect Christopher Wren once quipped that his chosen field “aims for Eternity,” and there’s something appealing about that formula: Unlike the web, which often feels like aiming for next week, architecture is a discipline very much defined by its permanence. Article Continues Below A building’s foundation defines its footprint, which defines its frame, which shapes the facade. clagnut/sandbox 1. A very wide image contained in a paragraph with no styles applied Dunstan kindly lent me this charming image. Pellentesque in felis quis tortor consectetuer condimentum.

flexible image clagnut/sandbox 1. A medium image contained in a paragraph with no styles applied #img1 {} 2. A medium image with a width of 100% (no height set) 3. Responsive Web Design: What It Is and How To Use It Advertisement Almost every new client these days wants a mobile version of their website. It’s practically essential after all: one design for the BlackBerry, another for the iPhone, the iPad, netbook, Kindle — and all screen resolutions must be compatible, too. In the next five years, we’ll likely need to design for a number of additional inventions. 25 Beautiful Responsive Web Design Examples for Inspiration Six Revisions Menu Main Categories CSS HTML JavaScript Web Design WordPress Web Development

Related: