Designer Elliot Jay Stocks on responsive web design (RWD):
RWD is about making your site adaptable to any scenario, without worrying about specific devices and their proprietary dimensions.
RWD doesn’t need to take more time and therefore doesn’t need to cost your clients more money. At least not after you’ve rethought your approach to web design, anyway.
His argument isn’t perfect – I think Elliot underrates costs overall, but it’s still very strong.
The web is embracing the tenants of responsive web design rapidly, but what’s the real economic and analytical impact of all of this? Luke Wroblewski reveals some numbers from Time, O’Neill Clothing and more post their respective responsive designs. It’s still very early days, but it’s encouraging news.
CSS3 is an essential tool of my web development workflow, but I often determine a lot of syntax specifics outside of my page in progress. Usually I jump to a hodgepodge of different sites where I adjust sliders and check things out visually, ending with a quick copy and paste job back into my development code.
The annoyance is that contextual back and forth. Why can’t I just rely on one tool, vs. multiple web sites to nail down my CSS3 data? That’s what makes CSSMatic so awesome. Just one source with basically all the CSS3 resources I’d ever need: gradients, border radius, noise and box shadow.
Very slick jQuery based plugin that adds drag and drop based image uploads, along with built in image previews. As author Matias Meno points out, there are other options, but there is a bit of spin and compactness here that is really interesting.
When you’re working on a responsive design and considering smaller, more compact screen sizes, a minimal nav is generally the way to go. Because many sites rely on a top navigation with more than one or two options, dropdowns are often the best choice in this small screen circumstance.
The problem with this dropdown approach is it can introduce some HTML or CSS bloat if you’re not careful. Enter tinynav.js, a really simple jQuery based plugin that auto converts a classic ul based navigation into a dropdown for small screens.
There are so many native iOS weather apps released on a regular basis that it’s reached a point of near self parody. But Sun is different: web based, fluid, minimal, with some slick off canvas navigation for getting around. I’m still sticking to my own custom web weather app, but it’s awesome to see we have great options out there.
Nice performance pointers by web developer Kelly Norton on the problems of post page load layout (a.k.a. reflow or repaint), and how it can cause such an adverse effect on web sites and web apps.
I agree with Kelly regarding the Chrome extension Speed Tracer. Even though I feel like I’ve barely scratched the surface of what the tool can do, I’ve found it can come in handy for more complex web pages that I’m working on.
I’ve recommended the ShopTalk podcast in the past, but hosts Dave Rupert and Chris Coyier touched on a pressing topic here for me: finding unused CSS selectors in your code. I didn’t realize until it was mentioned in the podcast that one great way to do so was to open up the Chrome web tools, click on the Audits tab and let it run. Scroll to the bottom where ‘remove unused CSS rules’ are listed. It’s far from perfect, but it’s a good starting point for trimming excess CSS.
Sacha Grief is already a designer I’ve kept my eye on for a while – prolific on Twitter, creator of the amazing Sidebar – but he’s outdone himself with this very long post on the future of web and app design. Loved this line:
When you have a high-definition display and screen-optimized fonts, you quickly realize you don’t need much else to create beautiful work.
Designer Nathan Ford’s responsive grid workflow can be boiled down to this quote:
You should design a grid based on your content’s constraints, not design your content based on a grid’s constraints.
It’s rather brilliant when you think about it. It’s also one of the most succinct descriptions of a shift in methodology I’ve been after for a while now, having worked for over a year professionally on responsive web designs. I generally lean heavily on the Skeleton grid system, but something about landing on break points for existing iOS hardware just feels wrong. I’ve got to research Gridset more.