RWD Calculator v0.2 | a thing from alwaystwisted.com
RWD Calculator v0.2 | a thing from alwaystwisted.com.
Just a simple calculator to help turn your PSD pixel perfection into the start of your responsive website.
Tagged: responsive web design Toggle Comment Threads | Keyboard Shortcuts
-
Bobby
-
Bobby
Responsive & Retina Content Images using simple CSS & a spacer PNG – HTML5/CSS3 Experiment – Extensions, resources & tutorials for Fireworks, Dreamweaver & HTML5/CSS3
FANTASTIC!
The problem with media queries and responsive design at the moment is there’s no “real” way to deliver a particular content image (that’s referenced in an img tag) for different breakpoints and resolutions.
So, it occurred me to that the simplest way of dealing with content images (as img tags) in a responsive design and for retina screens was to use a spacer PNG (generally smaller than an GIF) and background images.
All it requires is a blank PNG or GIF the same size as the intended image, and then setting that image’s background to whatever image needs to be served along with background-size: contain.
It works because the spacer PNG is transparent, which allows the image’s background image to be visible. Because the background is set with CSS, it can then be changed with media queries as required to serve different images to different viewport sizes or resolutions.
And yes, it even works with serving “retina images” to the new iPad.
-
Bobby
Responsive Navigation Patterns | Brad Frost Web
Responsive Navigation Patterns | Brad Frost Web.
For me, the most difficult part of designing for responsive sites is figuring out what to do with the beautiful navigation you’ve designed. Here are some patterns that are emerging in how to handle it.
-
Bobby
Please resize me – A brief history of fluidity
Please resize me – A brief history of fluidity – Rudy Rigot & Sophie Taboni.
For those of you who are too young to remember what it was like back in the days of the beginning of all this awesomeness we call the interwebs, this is for you.
Brilliant yet simple way to show the history of web page fluidity.
Reply
You must be logged in to post a comment.