The title of this article is Maintainable Responsive Layouts, but the content is really more like “How to create designs that are responsive, will require minimum development time & effort, and are maintainable down the road.” I guess their title is better…
On another responsive note, anyone that knows what a musical cassette tape was, might find this article entertaining. It appears responsive design isn’t as young as we thought!
And while we’re dealing with responsive sites, doing so via tons of @media queries can be a real pain in the butt, so Restive.js tries to solve that by letting you easily set-up device detection, breakpoints, and orientation listeners that add classes to the body tag, so you can easily write CSS like:
/** For Desktops **/
#sidebar {display: block; float: right; width: 320px;}
/** For Phones **/
.mobi.phone #sidebar {display: none;}
/** For Tablets in Landscape Orientation **/
.mobi.tablet.landscape #sidebar {display: block; width: 35%;}
Of course, this does throw away the use of default @media queries (which could be a good thing, depending on your device matrix), and relies completely on JS (which probably doesn’t really matter), and does force a dependency on jQuery (assuming you weren’t already using it). As always, your call.
And as long as we’re letting JS fix our CSS, why not let it work on CSS Element Queries, too?
And in case you’re not familiar with the issue that Element Queries are hoping to solve, here are a couple articles on the subject:
- Thoughts on Media Queries for Elements, by Jonathan Neal, and
- Element Queries, From the Feet Up, by Daniel Buchner
SunJack, the world’s most powerful solar charger.
And it folds up to be no bigger than the iPad you want it to charge!
Sizer Soze is supposed to help illustrate how expensive it is to send the wrong image size to devices. Unfortunately, the site won’t load for me. I suspect this is due to a lot of exposure, and maybe the host gave-out or something. Hopefully it will be back soon.
Gmail Tips and Tricks That Will Save Your Inbox. As usual, some are more valuable than others.
And while we’re trying to make your life better, let’s run through a few Chrome DevTools gems that you might have missed…
text-align-last, I don’t believe we have met before, but we will be spending time ago in the future! It seems support is slowly making its way into browsers (scroll down to Browser Support), but sadly it is not in Can I Use yet. If you think this would be a useful addition, how about giving it a “check”?
And finally, you likely know most of the landmarks in these photos, but seeing them from a different vantage point, does change their impression…
Happy reading,
Atg