Web designer and developer Dan Davies ran a fascinating experiment; he asked twenty three UK-based web developers on their workflow and overall opinions on responsive web design. As you might imagine there’s a lot of repetition, but many answers were insightful, especially those regarding tools used (a handful of which I’ve barely heard of) and pitching RWD fundamentals on clients.
Designer and speaker Stephen Hay:
Emulation is a part of the evolution of design. And the web, for that matter. But design sameness tends to fade when one forgets all of the existing patterns, all of the Bootstraps, all of the preconceived design solutions. Design sameness fades when designers stop focusing on which solutions for their problem are out there and start focusing on the problem at hand.
Solve that problem, and maybe the solution is exactly what your peer implemented, in the exact same way. But maybe not.
Designer and speaker Elliot Jay Stocks:
If you’ve identified the website described here, I’m afraid there are no prizes, because there’s no correct answer. It is, in fact, a number of websites. A very large number. And if a new product website launches tomorrow, chances are it will fit that description, too.
The web right now is a beautiful place. Web design has matured as an industry and the technology now enables us to create whatever we might dream of in HTML, CSS and JavaScript. But it’s clear that laziness amongst designers has never been more rife.
HTML emails have always been troublesome with their required usage of old school practices like tables for layout. The problem becomes more difficult as you try and add responsiveness into the mix for various viewport sizes.
So it was pretty cool when I saw Khoi Vinh tweet out a link to this responsive email design compilation recently. It’s smartly thought out: check out the original design and copy the base HTML code below to get started.
Clever Grunt plugin to simulate a very slow internet connection during web testing. This should be extremely useful for high weight pages, especially with those where large images do the heavy lifting.
As I came to understand quickly with my day job, working with international dates can be a major pain across different languages on the web. Not only are you dealing with traditional localization issues, but the format and order often changes significantly. For a while I tried relying on a simplistic in-house JS solution, but that fell apart as our site expanded to a progressively higher set of languages.
Moment.js is an excellent solution to this date problem. Download the languages you need and you’ll find yourself up and running very quickly, whether the issue is display or more complex manipulation.
If there’s one thing that’s extremely common in web-based grid frameworks, it’s their consistency of design. Generally you see twelve to twenty four columns all with exactly the same proportional width. Designer Nathan Ford takes a different approach: start with your site’s content and design a grid system based on visually pleasing, historical ratios. It leads to often irregular, columns for your content, far from the norm as far as traditional web design boilerplate is concerned.
Influential developer Julie Ann Horvath was recently in tech news for her public resignation from GitHub over harassment during her two year tenure. It’s illuminating hearing her story first hand and underlines a startup tech culture that’s can be very unfriendly towards women. It’s not an easy listen, but it’s important for the community to hear more stories like this so it can actively change for the better.
It’s not just a talk about Julie’s GitHub work experience either; she gives advice for moving your tech career forward, sharing workload among a team and much more.
Designer Eric Portis goes over the many growing pains for the web and responsive images. There’s a lot code, a lot of math, and generally a lot of trouble. Note Eric’s proposed solution – a single img tag with both srcset and sizes attributes – doesn’t exactly look like what browser manufacturers fully agreed upon as of last month. But even with the slightly more verbose picture element, the srcset and sizes idea remains. I especially loved Eric’s illustrations on this post; they’re smart and funny.
For beginners, CSS selectors and selector specificity can be tricky to properly understand without significant trial and error. Fortunately Luke Pacholski created this smart little game to help you learn properly. Clever.