Anyone who has spent time coding or designing for the web knows the frustration of coming up against a wall. Whether it is a period of “designer’s block” or a little script implementation that is just not making sense, the process of web design and development can lead to much hair-pulling, nail-biting and sleepless nights.
The internet has allowed us to tap into a vast pool of knowledge and opinion like never before. Creativity no longer happens in a vacuum, but through an ongoing process of collaboration and sharing. A generation ago one might have spent weeks corresponding with others in their field by post before finding a solution to a simple problem. And if one didn’t have a network of experts to tap into they might just be out of luck. Now even the most obscure solutions are only a Google search away and people readily share ideas and answers openly and even anonymously.
Yet despite (or because of) this openness and availability, we often find ourselves confronted with information overload. Scrolling through seemingly endless pages of inspiration on Dribbble or Pinterest can leave our creativity sapped. When confronted with 20 plausible solutions on Stackoverflow we might scratch our heads and ask “but which one should I use?”. It has become an exercise in finding the signal through the noise.
Finding the experts and thought-leaders who are providing creative and insightful web design and development ideas can be a challenge. I have pulled together a list of invaluable resources which I often turn to in times of need.
Web Design & Development Blogs
The best way to avoid pitfalls is to learn from the experiences of others. One of the greatest things about the web community is the willingness to share. Many of the folks building the websites that we all drool over on CSS inspiration blogs are generous enough to take the time to write about their experiences on a project or explain a new piece of code they’ve written. I often find myself scrolling through the archives of some of my favourites when I can’t wrap my head around something I’m trying to build. These blogs also serve as a great source of inspiration when I’m starting a new project and looking for a fresh approach to responsive images or implementing web typography.
This is my all-time favourite resource. The quality of insight and the attention to design detail in every single post is a testament to Trent’s skill. His posts features beautiful typography using FitText, a neat little jQuery tool built by his team at Paravel (featured in our post on typography in web design). Each post is enlivened by gorgeous graphic design and a custom colour palette. While I wish he would post more frequently (because his posts are such a visual treat and offer some very clever solutions), Trent also writes guest-posts and articles for many of the bigger publishers.
Check out his great post on responsive type in web design. He offers this little gem which has served me well. When resizing text for different browser widths, in order to maintain the optimal 45-75 character line length for comfortable reading Trent explains:
A simple, effective trick I’ve used is dropping some lorem text into the layout with two asterisks. The first marks the 45th character, and the second marks the 75th. As I widen the browser window, if at any point the two asterisks appear on the same line of text, I know it’s time to increase the font size.
Forming another 1/3 of Paravel, Dave brings a lot of wisdom as a developer to the table. He frequently writes about responsive web design and his articles elucidate some of grey areas of RWD. Dave’s writing has been feature in .net magazine and he has a great piece over at A List Apart outlining some of the current issues with responsive images and providing clever solutions (Mo’ Pixels Mo’ Problems).
For anyone who develops on WordPress, Dave has written an invaluable article on speeding up your site. For anyone who is struggling to improve their Page Speed score, or just make their site zippier in general, Dave’s 5 Steps to a Faster Website will be a great help. A few of the solutions are WordPress specific but much of what he outlines can be applied anywhere.
Part blog and part portfolio, this is the showcase of some of the cool things coming out of the brain of Stephen Burgess. With its non-traditional navigation structure and rich animations, Minimal Monkey definitely bucks the current trend in the web community towards stripped down, text-centric layouts. Stephen focuses a lot on CSS3 animation techniques; check out this post on how he made some of the neat animations on his site.
The last three resources on this list are more online magazines than blogs. They are repositories of massive amounts of information on all things web related. The first offers more high-level analysis of web design and development issues and ideas, while the latter two are chock-full of tutorials and tips.
This is the mother of all resources. Born out of a humble web design mailing list started in 1997, A List Apart has become the go-to source for insightful commentary on web design and development. Co-founded by one of the godfathers of web design, Jeffrey Zeldman, it has become a platform for the best and brightest to publish their musings on all things web-related.
Notable highlights include the watershed moment in 2010 when Ethan Marcotte coined the term ‘responsive web design’ in his now famous article.
This is in fact a print magazine, but their website offers an abundance of articles, tips and tutorials on all the latest techniques. Many of the industry veterans write guest articles here, so it’s a great place to turn for both insightful analysis and quick problem-solving help.
This is the other major goto resource for anything related to web design and development. With articles on everything from responsive web design, to typography, to script implementation, Smashing Magazine is one of the most valuable resources for anyone working in a web-related field.
Go Forth, Create & Share
Not only will this list of web design resources help you during your creative process, but it should inspire you to become active in the community as well. Comment, critique and share you ideas and solutions. Through the process of sharing and collaboration we’ll continue to push our young field forwards and find innovative new ways to build for the web.