Chris Coyier is a genius when it comes to CSS, yet this article I think illustrates some of the limitations for Flexbox when it comes to modern web design, at least for sites with a broad audience. Flexbox is an awesome property, but it clearly requires a lot of vendor specific CSS for coverage, and the lack of IE 9 or lower support isn’t great.
The name says it all; I know what I’m going to be having fun with on my next web side project.
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.
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.
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.
Sometimes you want a super quick way to both identify core dimensions on your open web browser and, especially for mobile devices, what critical dimensions like device width, height, and pixel ratio should be. That’s exactly what this web site does; bookmark it and keep it for reference later.
Influential designer Andy Clarke gives a great talk, and his slide deck all about responsive web design has a lot of smart ideas I’ve never considered before. Granted it’s not nearly the same as a live talk or full day workshop, but it’s worth a quick scan for almost any web designer or developer who wants to refine their responsive skills.